/*
 * The Way It Was — daily political-history quiz
 * Skin: "The Archive" (1.11.0) — the newspaper morgue. Clippings, manila
 * case files, rubber year-stamps in a ledger margin, and a typewriter for
 * the working labels. The elegant serif is reserved for the history itself.
 *
 * Defensive styling: every rule is scoped under `.twiw-app` and uses
 * !important on layout-critical properties so an aggressive WordPress
 * theme can't break the timeline, the tiles, or the drag-and-drop slots.
 * Themes can still recolor by overriding the --hs-* CSS variables.
 *
 * Typefaces: the stacks name "Ultra" (nameplate — loaded by the theme),
 * "Special Elite" (typewriter labels), "Old Standard TT" (headlines) and
 * "Libre Franklin" (body/numerals). The plugin does not load webfonts
 * itself; the companion The Way It Was theme enqueues them from Google Fonts.
 * On other themes everything falls back to Courier/Georgia/system sans.
 */

.twiw-app {
	--hs-accent: #2B5E93;             /* stamp blue                           */
	--hs-red: #B5342A;                /* stamp red                            */
	--hs-gold: #b98a24;               /* archive gold — hints                 */
	--hs-ink: #211F1C;
	--hs-paper: #F1EBDC;              /* page canvas                          */
	--hs-card-stock: #FCFAF3;         /* clipping stock                       */
	--hs-manila: #EBDDBD;             /* case-file folder                     */
	--hs-rule: #B3AB99;               /* aged hairline rule                   */
	--hs-ledger: #C86F63;             /* ledger margin rule                   */
	--hs-card-bg: #FCFAF3;
	--hs-card-border: #B3AB99;
	--hs-card-shadow: 1px 2px 0 rgba(33, 31, 28, 0.10);
	--hs-tile-bg: #FDFBF2;
	--hs-tile-shadow: 2px 3px 0 rgba(33, 31, 28, 0.14);
	--hs-anchor-bg: #FCFAF3;
	--hs-line: #B3AB99;
	--hs-correct: #3D6B1F;
	--hs-incorrect: #B5342A;
	--hs-text: #211F1C;
	--hs-muted: #6B6459;
	--hs-slot-bg: rgba(33, 31, 28, 0.03);
	--hs-slot-bg-hover: color-mix(in srgb, var(--hs-accent) 8%, transparent);
	--hs-font-serif: "Old Standard TT", "Iowan Old Style", "Times New Roman", Georgia, serif;
	--hs-font-sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
	--hs-font-type: "Special Elite", "Courier New", Courier, monospace;

	max-width: 760px !important;
	margin: 0 auto !important;
	padding: 16px !important;
	font-family: var(--hs-font-sans) !important;
	font-size: 16px;
	color: var(--hs-text) !important;
	line-height: 1.4 !important;
	box-sizing: border-box !important;
	-webkit-text-size-adjust: 100%;
}

.twiw-app *,
.twiw-app *::before,
.twiw-app *::after {
	box-sizing: border-box !important;
}

.twiw-app p {
	margin: 0 0 6px !important;
}

.twiw-app h2,
.twiw-app h3 {
	color: inherit !important;
	font-family: var(--hs-font-serif) !important;
}

.twiw-app .twiw-login-gate {
	text-align: center !important;
	padding: 32px 16px !important;
	border: 1px dashed var(--hs-rule) !important;
	border-radius: 4px !important;
	background: var(--hs-card-stock) !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 1.05rem !important;
}
.twiw-app .twiw-button {
	display: inline-block !important;
	background: var(--hs-accent) !important;
	color: #F1EBDC !important;
	font-family: var(--hs-font-type) !important;
	font-style: normal !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 3px !important;
	padding: 11px 24px !important;
	margin-top: 6px !important;
	transition: filter 120ms ease !important;
}
.twiw-app .twiw-button:hover {
	filter: brightness(1.12) !important;
	color: #F1EBDC !important;
	text-decoration: none !important;
}
.twiw-app .twiw-loading {
	text-align: center !important;
	padding: 48px 16px !important;
	color: var(--hs-muted) !important;
	font-family: var(--hs-font-type) !important;
	letter-spacing: 0.08em !important;
}

/* =====================================================================
 * The edition — today's case file: folder tab, manila body, era headline.
 * ===================================================================== */
.twiw-app .hs-edition {
	margin: 4px 0 26px !important;
	position: relative !important;
}
.twiw-app .hs-ed-tab {
	display: inline-block !important;
	background: var(--hs-manila) !important;
	border: 1px solid var(--hs-rule) !important;
	border-bottom: none !important;
	border-radius: 6px 6px 0 0 !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--hs-muted) !important;
	padding: 7px 18px 5px !important;
	margin-left: 26px !important;
}
.twiw-app .hs-ed-body {
	background: var(--hs-manila) !important;
	border: 1px solid var(--hs-rule) !important;
	border-radius: 4px !important;
	padding: 22px 28px 24px !important;
	box-shadow: 0 2px 0 rgba(33, 31, 28, 0.12) !important;
}
.twiw-app .hs-ed-kicker {
	font-family: var(--hs-font-type) !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--hs-accent) !important;
}
.twiw-app .hs-ed-gauge {
	letter-spacing: 0.18em !important;
	font-size: 0.72rem !important;
	color: var(--hs-red) !important;
	vertical-align: 1px !important;
}
.twiw-app .hs-ed-head {
	font-family: var(--hs-font-serif) !important;
	font-weight: 700 !important;
	font-size: 2.3rem !important;
	line-height: 1.05 !important;
	margin: 8px 0 8px !important;
	color: var(--hs-ink) !important;
}
.twiw-app .hs-ed-deck {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 1.06rem !important;
	line-height: 1.55 !important;
	color: #4a463f !important;
	max-width: 560px !important;
	margin: 0 !important;
}

/* Top status bar: progress + points */
.twiw-app .hs-statusbar {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-bottom: 18px !important;
	font-family: var(--hs-font-type) !important;
}
.twiw-app .hs-progress-label {
	font-size: 0.78rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--hs-muted) !important;
	flex: 0 0 auto !important;
}
.twiw-app .hs-progress {
	flex: 1 1 auto !important;
	display: flex !important;
	gap: 5px !important;
}
.twiw-app .hs-progress span {
	flex: 1 1 0 !important;
	height: 8px !important;
	border-radius: 0 !important;
	background: #E2DAC6 !important;
	border: 1px solid var(--hs-rule) !important;
	transition: background 200ms ease !important;
}
.twiw-app .hs-progress span.is-correct   { background: var(--hs-correct) !important; border-color: var(--hs-correct) !important; }
.twiw-app .hs-progress span.is-incorrect { background: var(--hs-incorrect) !important; border-color: var(--hs-incorrect) !important; }
.twiw-app .hs-progress span.is-current {
	background: var(--hs-card-stock) !important;
	border-color: var(--hs-accent) !important;
	box-shadow: inset 0 0 0 1px var(--hs-accent) !important;
}
.twiw-app .hs-points {
	font-size: 0.82rem !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--hs-accent) !important;
	flex: 0 0 auto !important;
}

/* The pending tile — an UNFILED INDEX CARD. Ruled lines, red head rule,
   a slight tilt, and a hard offset shadow. Sticky so it stays in view. */
.twiw-app .hs-pending {
	margin-bottom: 24px !important;
	position: sticky !important;
	top: 8px !important;
	z-index: 50 !important;
}
body.admin-bar .twiw-app .hs-pending {
	top: 40px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .twiw-app .hs-pending {
		top: 54px !important;
	}
}
.twiw-app .hs-pending::before {
	content: "" !important;
	position: absolute !important;
	left: -8px !important;
	right: -8px !important;
	top: -8px !important;
	bottom: -16px !important;
	background: linear-gradient(to bottom, rgba(241, 235, 220, 0.95), rgba(241, 235, 220, 0.95) 70%, rgba(241, 235, 220, 0)) !important;
	z-index: -1 !important;
	pointer-events: none !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
}
.twiw-app .hs-card-pending {
	background: var(--hs-tile-bg) !important;
	background-image: repeating-linear-gradient(transparent, transparent 25px, rgba(157, 180, 200, 0.14) 25px, rgba(157, 180, 200, 0.14) 26px) !important;
	color: var(--hs-text) !important;
	border-radius: 2px !important;
	box-shadow: var(--hs-tile-shadow) !important;
	padding: 16px 18px !important;
	display: flex !important;
	gap: 14px !important;
	align-items: flex-start !important;
	border: 1px solid var(--hs-card-border) !important;
	border-top: 3px solid rgba(200, 111, 99, 0.65) !important;
	cursor: grab !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	-webkit-touch-callout: none !important;
	touch-action: none !important;
	transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease !important;
	position: relative !important;
	transform: rotate(-0.4deg);
}
@media (hover: hover) {
	.twiw-app .hs-card-pending:hover {
		border-color: var(--hs-accent) !important;
		transform: rotate(-0.4deg) translateY(-1px) !important;
	}
}
.twiw-app .hs-card-pending:active,
.twiw-app .hs-card-pending.is-dragging {
	cursor: grabbing !important;
	opacity: 0.4 !important;
	transform: scale(0.98) !important;
}

/* Scroll affordance rails — visible only during a drag. Pointer-events:
   none so they don't interfere with elementFromPoint slot detection. */
.twiw-app .hs-scroll-rail,
.hs-scroll-rail {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	height: 64px !important;
	pointer-events: none !important;
	z-index: 99998 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: "Special Elite", "Courier New", Courier, monospace !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: #F1EBDC !important;
	transition: opacity 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
	opacity: 0.78 !important;
}
.twiw-app .hs-scroll-rail-up,
.hs-scroll-rail-up {
	top: 0 !important;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--hs-accent, #2B5E93) 92%, transparent), color-mix(in srgb, var(--hs-accent, #2B5E93) 0%, transparent)) !important;
}
.twiw-app .hs-scroll-rail-down,
.hs-scroll-rail-down {
	bottom: 0 !important;
	background: linear-gradient(to top, color-mix(in srgb, var(--hs-accent, #2B5E93) 92%, transparent), color-mix(in srgb, var(--hs-accent, #2B5E93) 0%, transparent)) !important;
}
.twiw-app .hs-scroll-rail-inner,
.hs-scroll-rail-inner {
	background: color-mix(in srgb, var(--hs-accent, #2B5E93) 95%, transparent) !important;
	color: #F1EBDC !important;
	padding: 6px 14px !important;
	border-radius: 3px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}
.twiw-app .hs-scroll-rail.is-active,
.hs-scroll-rail.is-active {
	opacity: 1 !important;
}
.twiw-app .hs-scroll-rail.is-active .hs-scroll-rail-inner,
.hs-scroll-rail.is-active .hs-scroll-rail-inner {
	box-shadow: 0 0 0 4px rgba(241, 235, 220, 0.45), 0 6px 18px rgba(0, 0, 0, 0.25) !important;
	transform: scale(1.06) !important;
}
body.admin-bar .twiw-app .hs-scroll-rail-up,
body.admin-bar .hs-scroll-rail-up {
	top: 32px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .twiw-app .hs-scroll-rail-up,
	body.admin-bar .hs-scroll-rail-up {
		top: 46px !important;
	}
}
@keyframes hs-rail-pulse {
	0%, 100% { opacity: 0.78; }
	50%      { opacity: 0.95; }
}
.twiw-app .hs-scroll-rail:not(.is-active),
.hs-scroll-rail:not(.is-active) {
	animation: hs-rail-pulse 1.6s ease-in-out infinite !important;
}

/* The drag ghost — a clone of the index card that follows the pointer.
   position: fixed must win over .hs-card-pending's position: relative. */
.twiw-app .hs-drag-ghost,
.hs-drag-ghost {
	position: fixed !important;
	left: 0 !important;
	top: 0 !important;
	pointer-events: none !important;
	box-shadow: 4px 6px 0 rgba(33, 31, 28, 0.18) !important;
	transform-origin: top left !important;
	will-change: transform !important;
	cursor: grabbing !important;
	border-color: var(--hs-accent, #2B5E93) !important;
	transition: none !important;
	opacity: 0.95 !important;
	z-index: 99999 !important;
	margin: 0 !important;
}
.twiw-app .hs-drag-ghost .hs-pending-hint,
.hs-drag-ghost .hs-pending-hint {
	display: none !important;
}
.twiw-app .hs-card-pending.is-armed {
	border-color: var(--hs-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-accent) 18%, transparent), var(--hs-tile-shadow) !important;
}
.twiw-app .hs-card-pending:focus-visible {
	outline: 3px solid var(--hs-accent) !important;
	outline-offset: 2px !important;
}

.twiw-app .hs-drag-handle {
	flex: 0 0 auto !important;
	width: 22px !important;
	color: var(--hs-rule) !important;
	font-size: 1.1rem !important;
	letter-spacing: -2px !important;
	line-height: 1 !important;
	padding-top: 4px !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

.twiw-app .hs-card-pending .hs-card-img {
	flex: 0 0 auto !important;
	width: 84px !important;
	height: 84px !important;
	border-radius: 2px !important;
	border: 1px solid var(--hs-rule) !important;
	background: var(--hs-manila) center/cover no-repeat !important;
	filter: saturate(0.7) contrast(1.05) sepia(0.12) !important;
}
.twiw-app .hs-card-pending .hs-card-img.empty {
	background: var(--hs-manila) !important;
	border-style: dashed !important;
}
.twiw-app .hs-card-pending .hs-card-text { flex: 1 1 auto !important; min-width: 0 !important; }
.twiw-app .hs-card-meta {
	font-family: var(--hs-font-type) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--hs-red) !important;
	margin: 0 0 2px !important;
}
.twiw-app .hs-card-pending .hs-card-title {
	font-family: var(--hs-font-serif) !important;
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	margin: 4px 0 4px !important;
	color: var(--hs-ink) !important;
}
.twiw-app .hs-card-pending .hs-card-desc {
	margin: 0 0 6px !important;
	font-size: 0.9rem !important;
	line-height: 1.5 !important;
	color: #4a463f !important;
}
.twiw-app .hs-pending-hint {
	display: block !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--hs-muted) !important;
	border-top: 1px dashed var(--hs-rule) !important;
	padding-top: 8px !important;
	margin-top: 8px !important;
}

/* =====================================================================
 * The ledger timeline — red margin rule at left, year stamps in the
 * margin, clippings filed to the right at faint alternating tilts.
 * ===================================================================== */
.twiw-app .hs-timeline {
	position: relative !important;
	padding: 24px 0 24px 118px !important;
	margin: 0 !important;
}
.twiw-app .hs-timeline::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 96px !important;
	width: 2px !important;
	background: var(--hs-ledger) !important;
	z-index: 0 !important;
	pointer-events: none !important;
}
.twiw-app .hs-timeline::after {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 102px !important;
	width: 1px !important;
	background: var(--hs-ledger) !important;
	opacity: 0.5 !important;
	z-index: 0 !important;
	pointer-events: none !important;
}
.twiw-app .hs-end-label {
	text-align: left !important;
	font-family: var(--hs-font-type) !important;
	letter-spacing: 0.24em !important;
	font-size: 0.72rem !important;
	text-transform: uppercase !important;
	color: var(--hs-muted) !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	position: relative !important;
	z-index: 1 !important;
	background: transparent !important;
}
.twiw-app .hs-end-label.top    { margin-bottom: 8px !important; }
.twiw-app .hs-end-label.bottom { margin-top: 8px !important; }

.twiw-app .hs-row {
	position: relative !important;
	display: block !important;
	margin: 8px 0 !important;
	min-height: 28px !important;
	z-index: 1 !important;
}
.twiw-app .hs-row.placed { margin: 14px 0 !important; }
.twiw-app .hs-row.slot   { margin: 8px 0 !important; }

/* Filed clipping */
.twiw-app .hs-card-placed {
	background: var(--hs-card-bg) !important;
	color: var(--hs-text) !important;
	border-radius: 0 !important;
	padding: 13px 16px !important;
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
	max-width: none !important;
	width: 100% !important;
	border: 1px solid var(--hs-rule) !important;
	box-shadow: var(--hs-card-shadow) !important;
	position: relative !important;
	transform: rotate(0.35deg);
}
.twiw-app .hs-row.placed:nth-child(odd) .hs-card-placed {
	transform: rotate(-0.3deg);
}
.twiw-app .hs-card-placed.is-correct   { border-left: 3px solid var(--hs-correct) !important; }
.twiw-app .hs-card-placed.is-incorrect { border-left: 3px solid var(--hs-incorrect) !important; }
.twiw-app .hs-card-placed .hs-card-img {
	flex: 0 0 auto !important;
	width: 68px !important;
	height: 68px !important;
	border-radius: 2px !important;
	border: 1px solid var(--hs-rule) !important;
	background: var(--hs-manila) center/cover no-repeat !important;
	filter: saturate(0.7) contrast(1.05) sepia(0.12) !important;
}
.twiw-app .hs-card-placed .hs-card-img.empty {
	background: var(--hs-manila) !important;
	border-style: dashed !important;
}
.twiw-app .hs-card-placed .hs-card-text { flex: 1 1 auto !important; min-width: 0 !important; }

/* The year — a rubber stamp in the ledger margin. Blue for the anchor,
   green once earned, red when missed. */
.twiw-app .hs-date-pill {
	position: absolute !important;
	left: -110px !important;
	top: 6px !important;
	width: 84px !important;
	display: block !important;
	text-align: center !important;
	background: color-mix(in srgb, var(--hs-accent) 4%, transparent) !important;
	color: var(--hs-accent) !important;
	font-family: var(--hs-font-type) !important;
	font-size: 1.1rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.06em !important;
	line-height: 1 !important;
	padding: 6px 0 4px !important;
	border: 2px solid var(--hs-accent) !important;
	border-radius: 5px !important;
	margin: 0 !important;
	transform: rotate(-3deg) !important;
	opacity: 0.88 !important;
}
.twiw-app .hs-date-pill.is-correct {
	background: rgba(61, 107, 31, 0.05) !important;
	color: var(--hs-correct) !important;
	border-color: var(--hs-correct) !important;
}
.twiw-app .hs-date-pill.is-incorrect {
	background: rgba(181, 52, 42, 0.05) !important;
	color: var(--hs-incorrect) !important;
	border-color: var(--hs-incorrect) !important;
}
.twiw-app .hs-card-placed .hs-card-title {
	margin: 0 0 4px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.12rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--hs-ink) !important;
}
.twiw-app .hs-card-placed .hs-card-desc {
	margin: 0 !important;
	font-size: 0.85rem !important;
	line-height: 1.5 !important;
	color: #4a463f !important;
}

/* Placement slot — a striped "file here" gap in the ledger. */
.twiw-app .hs-slot {
	width: 100% !important;
	max-width: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4px 16px !important;
	margin: 4px 0 !important;
	min-height: 30px !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(179, 171, 153, 0.12) 6px, rgba(179, 171, 153, 0.12) 12px) !important;
	border: 2px dashed var(--hs-rule) !important;
	transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, min-height 150ms ease, padding 150ms ease !important;
	position: relative !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}
.twiw-app .hs-slot:focus-visible {
	outline: 3px solid var(--hs-accent) !important;
	outline-offset: 2px !important;
}

.twiw-app .hs-slot-label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: var(--hs-accent) !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.74rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	pointer-events: none !important;
	opacity: 0 !important;
	transform: scale(0.92) !important;
	transition: opacity 150ms ease, transform 150ms ease !important;
}
.twiw-app .hs-slot-plus {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 3px !important;
	background: var(--hs-accent) !important;
	color: #F1EBDC !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
}
.twiw-app .hs-slot-text {
	font-weight: 400 !important;
}

.twiw-app .hs-slot.is-hover {
	background: color-mix(in srgb, var(--hs-accent) 10%, transparent) !important;
	border-color: var(--hs-accent) !important;
	border-style: solid !important;
	min-height: 48px !important;
	padding: 10px 16px !important;
	transform: scale(1.01) !important;
}
.twiw-app .hs-slot.is-hover .hs-slot-label {
	opacity: 1 !important;
	transform: scale(1) !important;
}
@media (hover: hover) {
	.twiw-app .hs-slot:hover {
		background: color-mix(in srgb, var(--hs-accent) 10%, transparent) !important;
		border-color: var(--hs-accent) !important;
		border-style: solid !important;
		min-height: 48px !important;
		padding: 10px 16px !important;
		transform: scale(1.01) !important;
	}
	.twiw-app .hs-slot:hover .hs-slot-label {
		opacity: 1 !important;
		transform: scale(1) !important;
	}
}

.twiw-app .is-dragging .hs-slot {
	border-color: var(--hs-accent) !important;
	background: color-mix(in srgb, var(--hs-accent) 4%, transparent) !important;
	min-height: 48px !important;
	padding: 10px 16px !important;
	animation: hs-slot-pulse 1.4s ease-in-out infinite !important;
}
@keyframes hs-slot-pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hs-accent, #2B5E93) 0%, transparent); }
	50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hs-accent, #2B5E93) 12%, transparent); }
}

.twiw-app .hs-row.is-flash .hs-card-placed {
	box-shadow: 0 0 0 3px var(--hs-accent), var(--hs-card-shadow) !important;
	transition: box-shadow 600ms ease !important;
}

/* Reveal CTA */
.twiw-app .hs-reveal-cta {
	background: var(--hs-card-bg) !important;
	color: var(--hs-text) !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 4px solid var(--hs-ink) !important;
	border-radius: 2px !important;
	padding: 22px 20px !important;
	box-shadow: var(--hs-card-shadow) !important;
	margin: 0 0 20px !important;
	text-align: center !important;
}
.twiw-app .hs-reveal-headline {
	font-family: var(--hs-font-serif) !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	margin: 0 0 6px !important;
	color: var(--hs-ink) !important;
}
.twiw-app .hs-reveal-sub {
	margin: 0 0 16px !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	color: var(--hs-muted) !important;
}
.twiw-app .hs-reveal-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--hs-accent) !important;
	color: #F1EBDC !important;
	border: 0 !important;
	border-radius: 3px !important;
	padding: 12px 28px !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: 2px 2px 0 rgba(33, 31, 28, 0.15) !important;
	transition: transform 120ms ease, filter 120ms ease !important;
}
.twiw-app .hs-reveal-btn:hover {
	transform: translateY(-1px) !important;
	filter: brightness(1.08) !important;
}

/* Results screen */
.twiw-app .hs-results {
	background: transparent !important;
	color: var(--hs-text) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	margin-top: 24px !important;
}
.twiw-app .hs-results-headline {
	font-family: var(--hs-font-serif) !important;
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
	color: var(--hs-ink) !important;
}
.twiw-app .hs-results-sub {
	margin: 0 0 16px !important;
	color: var(--hs-text) !important;
	opacity: 0.85 !important;
}

/* Result cards: filed clippings — ink top rule on card stock. */
.twiw-app .hs-rescard {
	border: 1px solid var(--hs-rule) !important;
	border-top: 4px solid var(--hs-ink) !important;
	border-radius: 2px !important;
	background: var(--hs-card-bg) !important;
	padding: 18px 22px 20px !important;
	margin: 0 0 18px !important;
	text-align: left !important;
	box-shadow: var(--hs-card-shadow) !important;
}
.twiw-app .hs-kicker {
	font-family: var(--hs-font-type) !important;
	font-size: 0.74rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--hs-red) !important;
	margin: 0 0 10px !important;
}
.twiw-app .hs-res-context {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	color: var(--hs-muted) !important;
	font-size: 0.95rem !important;
	margin: 0 0 10px !important;
}
.twiw-app .hs-bigscore-row {
	display: flex !important;
	align-items: baseline !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	margin: 0 0 10px !important;
}
.twiw-app .hs-bigscore {
	font-family: var(--hs-font-sans) !important;
	font-size: 3rem !important;
	font-weight: 900 !important;
	font-variant-numeric: tabular-nums !important;
	line-height: 1 !important;
	color: var(--hs-accent) !important;
	letter-spacing: -0.02em !important;
}
.twiw-app .hs-bigscore-sentence {
	font-family: var(--hs-font-serif) !important;
	font-size: 1.1rem !important;
	color: var(--hs-ink) !important;
}
.twiw-app .hs-hint-note {
	color: var(--hs-muted) !important;
	font-size: 0.85rem !important;
	margin: 0 0 8px !important;
}

/* The sign-off, the countdown, and the daily source link */
.twiw-app .hs-signoff {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 1.7rem !important;
	line-height: 1.25 !important;
	color: var(--hs-ink) !important;
	text-align: center !important;
	margin: 4px 0 6px !important;
	padding: 0 0 14px !important;
	border-bottom: 3px double var(--hs-ink) !important;
}
.twiw-app .hs-countdown {
	margin: 22px 0 4px !important;
	padding: 20px 22px 22px !important;
	background: var(--hs-manila) !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 4px solid var(--hs-ink) !important;
	border-radius: 2px !important;
	box-shadow: var(--hs-card-shadow) !important;
	text-align: center !important;
	font-family: var(--hs-font-type) !important;
	color: var(--hs-muted) !important;
	font-size: 0.85rem !important;
}
.twiw-app .hs-countdown-label {
	font-size: 0.78rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: #4a463f !important;
	margin: 0 0 8px !important;
}
.twiw-app .hs-countdown-time {
	font-size: 2.4rem !important;
	line-height: 1 !important;
	color: var(--hs-red) !important;
	font-variant-numeric: tabular-nums !important;
	letter-spacing: 0.06em !important;
}
@media (max-width: 600px) {
	.twiw-app .hs-signoff { font-size: 1.35rem !important; }
	.twiw-app .hs-countdown-time { font-size: 1.9rem !important; }
}
.twiw-app .hs-morgue {
	margin: 14px 0 6px !important;
	padding: 10px 14px !important;
	border-left: 3px solid var(--hs-red) !important;
	background: var(--hs-card-stock) !important;
	font-size: 0.92rem !important;
}
.twiw-app .hs-morgue-kicker {
	font-family: var(--hs-font-type) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--hs-red) !important;
}
.twiw-app .hs-morgue a {
	font-family: var(--hs-font-serif) !important;
	font-weight: 700 !important;
	color: var(--hs-ink) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}
.twiw-app .hs-morgue a:hover {
	color: var(--hs-accent) !important;
}

/* Result squares */
.twiw-app .hs-squares {
	display: flex !important;
	gap: 7px !important;
	margin: 4px 0 16px !important;
	flex-wrap: wrap !important;
}
.twiw-app .hs-square {
	width: 30px !important;
	height: 30px !important;
	border-radius: 2px !important;
	display: inline-block !important;
}
.twiw-app .hs-square.is-correct   { background: var(--hs-correct) !important; }
.twiw-app .hs-square.is-incorrect { background: var(--hs-incorrect) !important; }

/* Copy button */
.twiw-app .hs-copy-row {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	margin: 0 0 20px !important;
	flex-wrap: wrap !important;
}
.twiw-app .hs-copy-btn {
	background: transparent !important;
	color: var(--hs-accent) !important;
	border: 1px solid var(--hs-accent) !important;
	border-radius: 3px !important;
	padding: 10px 18px !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.76rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background 120ms ease, color 120ms ease !important;
}
.twiw-app .hs-copy-btn:hover {
	background: color-mix(in srgb, var(--hs-accent) 7%, transparent) !important;
}
.twiw-app .hs-copy-btn.is-copied {
	background: var(--hs-correct) !important;
	border-color: var(--hs-correct) !important;
	color: #F1EBDC !important;
}
.twiw-app .hs-copy-hint {
	font-size: 0.8rem !important;
	color: var(--hs-muted) !important;
}

/* Recap — hairline-ruled listing with typewriter years. */
.twiw-app .hs-recap {
	margin-top: 24px !important;
	border-top: 1px solid var(--hs-rule) !important;
	padding-top: 18px !important;
}
.twiw-app .hs-recap-head {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin: 0 0 12px !important;
}
.twiw-app .hs-recap h3 {
	margin: 0 !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
}
.twiw-app .hs-recap-toggle {
	display: inline-flex !important;
	background: transparent !important;
	border: 1px solid var(--hs-ink) !important;
	border-radius: 3px !important;
	padding: 0 !important;
	gap: 0 !important;
	overflow: hidden !important;
}
.twiw-app .hs-recap-tab {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--hs-ink) !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.68rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 7px 12px !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background 120ms ease, color 120ms ease !important;
	box-shadow: none !important;
}
.twiw-app .hs-recap-tab.is-active {
	background: var(--hs-ink) !important;
	color: #F1EBDC !important;
	box-shadow: none !important;
}
@media (hover: hover) {
	.twiw-app .hs-recap-tab:hover:not(.is-active) {
		background: rgba(33, 31, 28, 0.06) !important;
	}
}
.twiw-app .hs-recap-note {
	grid-column: 2 / -1 !important;
	font-size: 0.82rem !important;
	color: var(--hs-incorrect) !important;
	font-weight: 500 !important;
	margin-top: 2px !important;
}
.twiw-app .hs-recap-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}
.twiw-app .hs-recap-item {
	display: grid !important;
	grid-template-columns: 28px 64px 1fr !important;
	gap: 10px !important;
	align-items: center !important;
	padding: 9px 12px !important;
	border-radius: 0 !important;
	background: transparent !important;
	border-bottom: 1px solid #E2DAC6 !important;
	font-size: 0.92rem !important;
	line-height: 1.3 !important;
}
.twiw-app .hs-recap-item:last-child {
	border-bottom: 0 !important;
}
.twiw-app .hs-recap-item.is-correct {
	border-left: 3px solid var(--hs-correct) !important;
}
.twiw-app .hs-recap-item.is-incorrect {
	border-left: 3px solid var(--hs-incorrect) !important;
	background: rgba(181, 52, 42, 0.05) !important;
}
.twiw-app .hs-recap-item.is-anchor {
	border-left: 3px solid var(--hs-rule) !important;
	opacity: 0.85 !important;
}
.twiw-app .hs-recap-mark {
	flex: 0 0 auto !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	text-align: center !important;
	line-height: 1 !important;
}
.twiw-app .hs-recap-item.is-correct   .hs-recap-mark { color: var(--hs-correct) !important; }
.twiw-app .hs-recap-item.is-incorrect .hs-recap-mark { color: var(--hs-incorrect) !important; }
.twiw-app .hs-recap-item.is-anchor    .hs-recap-mark { color: var(--hs-muted) !important; }
.twiw-app .hs-recap-year {
	font-family: var(--hs-font-type) !important;
	font-weight: 400 !important;
	color: var(--hs-accent) !important;
	font-variant-numeric: tabular-nums !important;
}
.twiw-app .hs-recap-title {
	font-family: var(--hs-font-serif) !important;
	color: var(--hs-text) !important;
	word-break: break-word !important;
}

/* Histogram */
.twiw-app .hs-histogram {
	margin-top: 4px !important;
	border-top: 0 !important;
	padding-top: 0 !important;
}
.twiw-app .hs-histogram h3 {
	margin: 0 0 12px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
}
.twiw-app .hs-histogram-row {
	display: grid !important;
	grid-template-columns: 118px 1fr 52px 36px !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 !important;
	margin-bottom: 10px !important;
	font-size: 0.9rem !important;
}
.twiw-app .hs-histogram-row .label {
	font-size: 0.92rem !important;
	opacity: 1 !important;
	color: var(--hs-text) !important;
	white-space: nowrap !important;
}
.twiw-app .hs-histogram-row.is-you .label { font-weight: 700 !important; }
.twiw-app .hs-histogram-row .bar-wrap {
	background: #E2DAC6 !important;
	border-radius: 2px !important;
	height: 16px !important;
	overflow: hidden !important;
}
.twiw-app .hs-histogram-row .bar {
	background: var(--hs-rule) !important;
	height: 100% !important;
	border-radius: 2px !important;
}
.twiw-app .hs-histogram-row.is-you .bar { background: var(--hs-accent) !important; }
.twiw-app .hs-histogram-row .pct {
	text-align: right !important;
	font-size: 0.92rem !important;
	font-variant-numeric: tabular-nums !important;
	white-space: nowrap !important;
}
.twiw-app .hs-histogram-row .you-tag {
	visibility: hidden;
	font-family: var(--hs-font-type) !important;
	font-size: 0.66rem !important;
	letter-spacing: 0.08em !important;
	color: var(--hs-accent) !important;
}
.twiw-app .hs-histogram-row.is-you .you-tag { visibility: visible !important; }
.twiw-app .hs-histogram-foot {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	color: var(--hs-muted) !important;
	font-size: 0.85rem !important;
	margin: 10px 0 0 !important;
}

.twiw-app .hs-email-optin {
	margin-top: 18px !important;
	padding: 14px 16px !important;
	border: 1px dashed var(--hs-rule) !important;
	border-radius: 3px !important;
	background: var(--hs-card-stock) !important;
	text-align: center !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
}
.twiw-app .hs-email-optin a {
	color: var(--hs-accent) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}

/* Preview state */
.twiw-app .hs-preview-banner {
	text-align: center !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 0.95rem !important;
	color: var(--hs-muted) !important;
	margin-bottom: 14px !important;
	padding: 8px 12px !important;
	background: color-mix(in srgb, var(--hs-accent) 6%, transparent) !important;
	border-radius: 3px !important;
}
.twiw-app .hs-row.is-preview-row {
	margin: 14px 0 !important;
}
.twiw-app .hs-slot.has-preview {
	flex-direction: column !important;
	gap: 10px !important;
	padding: 6px 0 !important;
	cursor: default !important;
}
.twiw-app .hs-slot.has-preview:hover {
	background: transparent !important;
}
.twiw-app .hs-card-pending.in-preview {
	max-width: none !important;
	width: 100% !important;
	border-color: var(--hs-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-accent) 18%, transparent), var(--hs-tile-shadow) !important;
	animation: hs-preview-in 180ms ease-out !important;
}
@keyframes hs-preview-in {
	from { transform: scale(0.96); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}
.twiw-app .hs-confirm-row {
	display: flex !important;
	gap: 10px !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
}
.twiw-app .hs-confirm-btn,
.twiw-app .hs-cancel-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 0 !important;
	border-radius: 3px !important;
	padding: 10px 20px !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
}
.twiw-app .hs-confirm-btn {
	background: var(--hs-accent) !important;
	color: #F1EBDC !important;
}
.twiw-app .hs-confirm-btn:hover {
	filter: brightness(1.08) !important;
}
.twiw-app .hs-cancel-btn {
	background: transparent !important;
	color: var(--hs-ink) !important;
	border: 1px solid var(--hs-rule) !important;
}
.twiw-app .hs-cancel-btn:hover {
	background: rgba(33, 31, 28, 0.04) !important;
}

/* Mobile: shrink the ledger margin, smaller stamps. */
@media (max-width: 600px) {
	.twiw-app { padding: 12px !important; }
	.twiw-app .hs-timeline { padding-left: 74px !important; }
	.twiw-app .hs-timeline::before { left: 58px !important; }
	.twiw-app .hs-timeline::after  { left: 64px !important; }
	.twiw-app .hs-date-pill {
		left: -70px !important;
		width: 54px !important;
		font-size: 0.86rem !important;
		border-width: 1.5px !important;
		padding: 5px 0 3px !important;
	}
	.twiw-app .hs-card-pending .hs-card-img { width: 60px !important; height: 60px !important; }
	.twiw-app .hs-drag-handle { width: 16px !important; }
	.twiw-app .hs-ed-body { padding: 16px 18px 18px !important; }
	.twiw-app .hs-ed-head { font-size: 1.7rem !important; }
	.twiw-app .hs-histogram-row {
		grid-template-columns: 90px 1fr 48px 36px !important;
		font-size: 0.82rem !important;
	}
}

/* =====================================================================
 * Toolbar, how-to modal, hints, off-by badges, stats, archive list,
 * screen-reader live region
 * ===================================================================== */

.hs-sr-live {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.twiw-app .hs-toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	margin: 0 0 10px !important;
	min-height: 20px !important;
}
.twiw-app .hs-linklike {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--hs-accent) !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}
.twiw-app .hs-archive-banner {
	margin-right: auto !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.72rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: var(--hs-red) !important;
	background: var(--hs-card-stock) !important;
	border: 2px solid var(--hs-red) !important;
	border-radius: 4px !important;
	padding: 3px 10px !important;
	transform: rotate(-1deg) !important;
	opacity: 0.9 !important;
}

/* How-to-play modal — an index card. */
.twiw-app .hs-howto-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(33, 31, 28, 0.5) !important;
	z-index: 99998 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}
.twiw-app .hs-howto-card {
	background: var(--hs-tile-bg) !important;
	background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(157, 180, 200, 0.14) 27px, rgba(157, 180, 200, 0.14) 28px) !important;
	color: var(--hs-text) !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 3px solid rgba(200, 111, 99, 0.65) !important;
	border-radius: 3px !important;
	box-shadow: 4px 6px 0 rgba(33, 31, 28, 0.2) !important;
	max-width: 460px !important;
	width: 100% !important;
	padding: 22px 24px !important;
	max-height: 85vh !important;
	overflow: auto !important;
}
.twiw-app .hs-howto-card h3 {
	margin: 0 0 12px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.4rem !important;
}
.twiw-app .hs-howto-step {
	margin: 0 0 10px !important;
	font-size: 0.95rem !important;
	line-height: 1.5 !important;
}
/* Looping how-to demo: a card drops into the gap between two filed
   clippings and gets its year stamped. Pure CSS, 5.5s loop. */
.twiw-app .hs-demo {
	position: relative !important;
	height: 208px !important;
	margin: 4px 0 18px !important;
	overflow: hidden !important;
	background: var(--hs-paper) !important;
	border: 1px solid var(--hs-rule) !important;
	border-radius: 3px !important;
}
.twiw-app .hs-demo::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 74px !important;
	width: 2px !important;
	background: var(--hs-ledger) !important;
}
.twiw-app .hs-demo-tl {
	position: absolute !important;
	top: 62px !important;
	left: 86px !important;
	right: 14px !important;
}
.twiw-app .hs-demo-row {
	position: relative !important;
	height: 38px !important;
	margin: 0 0 8px !important;
	background: var(--hs-card-stock) !important;
	border: 1px solid var(--hs-rule) !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 10px !important;
}
.twiw-app .hs-demo-title {
	font-family: var(--hs-font-serif) !important;
	font-weight: 700 !important;
	font-size: 0.82rem !important;
	color: var(--hs-ink) !important;
}
.twiw-app .hs-demo-stamp {
	position: absolute !important;
	left: -66px !important;
	top: 4px !important;
	width: 50px !important;
	text-align: center !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.78rem !important;
	color: var(--hs-accent) !important;
	border: 2px solid var(--hs-accent) !important;
	border-radius: 4px !important;
	padding: 4px 0 2px !important;
	transform: rotate(-3deg) !important;
	opacity: 0.85 !important;
	background: var(--hs-paper) !important;
}
.twiw-app .hs-demo-gap {
	position: relative !important;
	height: 30px !important;
	margin: 0 0 8px !important;
	border: 2px dashed var(--hs-rule) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	animation: hs-demo-gap 5.5s ease-in-out infinite !important;
}
.twiw-app .hs-demo-gap span {
	font-family: var(--hs-font-type) !important;
	font-size: 0.62rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--hs-muted) !important;
	animation: hs-demo-gap-label 5.5s ease-in-out infinite !important;
}
.twiw-app .hs-demo-card {
	position: absolute !important;
	top: 8px !important;
	left: 50% !important;
	width: 200px !important;
	margin-left: -80px !important;
	z-index: 2 !important;
	background: var(--hs-tile-bg) !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 3px solid rgba(200, 111, 99, 0.65) !important;
	box-shadow: 2px 2px 0 rgba(33, 31, 28, 0.14) !important;
	padding: 6px 12px 8px !important;
	animation: hs-demo-card 5.5s ease-in-out infinite !important;
}
.twiw-app .hs-demo-card-meta {
	display: block !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.58rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--hs-red) !important;
}
.twiw-app .hs-demo-card-title {
	display: block !important;
	font-family: var(--hs-font-serif) !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	color: var(--hs-ink) !important;
}
.twiw-app .hs-demo-hand {
	position: absolute !important;
	top: 34px !important;
	left: 50% !important;
	margin-left: 106px !important;
	z-index: 3 !important;
	font-size: 1.3rem !important;
	animation: hs-demo-hand 5.5s ease-in-out infinite !important;
}
.twiw-app .hs-demo-stamp-new {
	left: -66px !important;
	top: 46px !important;
	color: var(--hs-correct) !important;
	border-color: var(--hs-correct) !important;
	opacity: 0 !important;
	animation: hs-demo-stamp 5.5s ease-in-out infinite !important;
}
@keyframes hs-demo-card {
	0%, 16%   { transform: translateY(0) rotate(-0.8deg); opacity: 1; }
	42%, 82%  { transform: translateY(92px) rotate(0.4deg); opacity: 1; }
	88%       { transform: translateY(92px); opacity: 0; }
	90%       { transform: translateY(0); opacity: 0; }
	96%, 100% { transform: translateY(0) rotate(-0.8deg); opacity: 1; }
}
@keyframes hs-demo-hand {
	0%, 8%   { transform: translateY(0); opacity: 0; }
	14%      { opacity: 1; }
	42%      { transform: translateY(92px); opacity: 1; }
	52%      { transform: translateY(92px); opacity: 0; }
	100%     { transform: translateY(92px); opacity: 0; }
}
@keyframes hs-demo-gap {
	0%, 16%  { border-color: var(--hs-rule); background: transparent; }
	26%, 42% { border-color: var(--hs-accent); background: color-mix(in srgb, var(--hs-accent) 8%, transparent); border-style: solid; }
	50%, 100% { border-color: var(--hs-rule); background: transparent; }
}
@keyframes hs-demo-gap-label {
	0%, 14%  { opacity: 0.9; }
	40%, 84% { opacity: 0; }
	92%, 100% { opacity: 0.9; }
}
@keyframes hs-demo-stamp {
	0%, 46%  { opacity: 0; transform: rotate(-3deg) scale(1.5); }
	54%, 82% { opacity: 0.9; transform: rotate(-3deg) scale(1); }
	88%, 100% { opacity: 0; transform: rotate(-3deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.twiw-app .hs-demo-card,
	.twiw-app .hs-demo-gap,
	.twiw-app .hs-demo-gap span,
	.twiw-app .hs-demo-stamp-new { animation: none !important; }
	.twiw-app .hs-demo-hand { display: none !important; }
	.twiw-app .hs-demo-card { transform: translateY(92px) !important; }
	.twiw-app .hs-demo-stamp-new { opacity: 0.9 !important; }
	.twiw-app .hs-demo-gap span { opacity: 0 !important; }
}

.twiw-app .hs-howto-note {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	color: var(--hs-muted) !important;
	font-size: 0.88rem !important;
	margin: 12px 0 14px !important;
}

/* Hint button + reveal */
.twiw-app .hs-hint-row,
.twiw-app .hs-hint-reveal {
	text-align: center !important;
	margin-top: 10px !important;
}
.twiw-app .hs-hint-btn {
	background: none !important;
	border: 1px dashed var(--hs-rule) !important;
	border-radius: 3px !important;
	padding: 6px 16px !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--hs-muted) !important;
	cursor: pointer !important;
}
.twiw-app .hs-hint-btn:hover {
	border-color: var(--hs-gold) !important;
	color: var(--hs-gold) !important;
}
.twiw-app .hs-hint-reveal {
	font-family: var(--hs-font-type) !important;
	font-size: 0.82rem !important;
	color: var(--hs-accent) !important;
	background: var(--hs-slot-bg-hover) !important;
	border-radius: 3px !important;
	padding: 6px 12px !important;
	display: inline-block !important;
}
.twiw-app .hs-pending {
	text-align: center !important;
}

/* Off-by badge on misfiled clippings */
.twiw-app .hs-offby {
	position: absolute !important;
	right: 10px !important;
	bottom: 8px !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.66rem !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--hs-incorrect) !important;
	background: rgba(181, 52, 42, 0.07) !important;
	border-radius: 3px !important;
	padding: 2px 8px !important;
	white-space: nowrap !important;
}

/* Stats panel */
.twiw-app .hs-stats {
	margin: 0 0 20px !important;
	padding: 18px 22px 20px !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 4px solid var(--hs-ink) !important;
	border-radius: 2px !important;
	background: var(--hs-card-bg) !important;
	box-shadow: var(--hs-card-shadow) !important;
}
.twiw-app .hs-stats h3 {
	margin: 0 0 10px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.15rem !important;
}
.twiw-app .hs-stats.hs-rescard {
	border: 1px solid var(--hs-rule) !important;
	border-top: 4px solid var(--hs-ink) !important;
	padding: 18px 22px 20px !important;
}
.twiw-app .hs-fire-line {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	margin: 0 0 14px !important;
}
.twiw-app .hs-stats-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 10px !important;
	text-align: center !important;
}
@media screen and (max-width: 520px) {
	.twiw-app .hs-stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
.twiw-app .hs-stat-num {
	font-size: 2rem !important;
	font-weight: 900 !important;
	font-variant-numeric: tabular-nums !important;
	line-height: 1.1 !important;
	color: var(--hs-ink) !important;
}
.twiw-app .hs-stat-label {
	font-family: var(--hs-font-type) !important;
	font-size: 0.66rem !important;
	color: var(--hs-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin-top: 2px !important;
}
.twiw-app .hs-stats-loading {
	color: var(--hs-muted) !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.82rem !important;
	text-align: center !important;
	margin: 0 !important;
}

/* Archive list */
.twiw-app .hs-archive {
	margin: 20px 0 8px !important;
	padding: 18px 22px 20px !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 4px solid var(--hs-ink) !important;
	border-radius: 2px !important;
	background: var(--hs-card-bg) !important;
	box-shadow: var(--hs-card-shadow) !important;
}
.twiw-app .hs-archive h3 {
	margin: 0 0 4px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.15rem !important;
}
.twiw-app .hs-archive-note {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 0.85rem !important;
	color: var(--hs-muted) !important;
	margin: 0 0 10px !important;
}
.twiw-app .hs-archive-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	gap: 6px !important;
}
.twiw-app .hs-archive-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 8px !important;
	background: var(--hs-manila) !important;
	border: 1px solid var(--hs-rule) !important;
	border-radius: 3px !important;
	padding: 7px 10px !important;
	font-family: var(--hs-font-type) !important;
	font-size: 0.76rem !important;
	cursor: pointer !important;
	color: var(--hs-text) !important;
	text-align: left !important;
}
.twiw-app .hs-archive-row:hover:not(:disabled) {
	border-color: var(--hs-accent) !important;
	background: var(--hs-slot-bg-hover) !important;
}
.twiw-app .hs-archive-row:disabled {
	opacity: 0.55 !important;
	cursor: default !important;
}
.twiw-app .hs-archive-row .hs-archive-status {
	font-weight: 700 !important;
	color: var(--hs-accent) !important;
	white-space: nowrap !important;
}
.twiw-app .hs-archive-row.is-done .hs-archive-status {
	color: var(--hs-correct) !important;
}
.twiw-app .hs-archive-back {
	text-align: center !important;
	margin-top: 14px !important;
}

.twiw-app .hs-slot:focus-visible {
	outline: 2px solid var(--hs-accent) !important;
	outline-offset: 2px !important;
}