/* Meet Doris (BT-67). Print Studio owns the page shell, the honest bar, the
   pre-roll and the Fair Exit. The villain frame is BT-EX03: it decays on purpose
   from sleek SaaS to an illuminated manuscript, one look per trap, and every
   motion gag has a static reduced-motion state.
   One-screen contract (Ben, Oct 28): the page never scrolls; the frame fills the
   viewport under the shared header, the honest bar stays pinned at its foot, and
   only the villain area scrolls when a stage is taller than the space. */
/* Shared Meet Doris identity (BT-F06): flat Plum door/arrow on the paper
   tile, registered with Work and navigation. Existing Slate strokes remain. */
.exit-page-shell { --page-title-accent: #626f76; }
/* The shell gives body a 100svh floor so footers sit low on short pages. Here the
   main area is sized by measurement, so the floor would only add page scroll. */
body.exit-page-shell { min-height: 0; }
.exit-page-shell .exit-emblem { background: var(--sheet); border: 1px solid #827e6f55; }
.exit-page-shell .exit-strokes { color: #626f76; }
/* flex: 0 0 auto, because the shell's main is a growing flex item whose basis is
   its content; with a fixed basis the measured height from fit() actually holds. */
.exit-page-shell main.exit-main { display: flex; flex-direction: column; flex: 0 0 auto; height: calc(100svh - var(--header-height) - var(--footer-height) - 1px); min-height: 0; padding-block: 12px; gap: 10px; justify-content: flex-start; overflow: hidden; }
.exit-opening.compact { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.exit-opening.compact .exit-emblem { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none; }
.exit-opening.compact .exit-emblem :is(img, picture) { width: 75%; height: 75%; display: block; }
.exit-opening.compact .exit-emblem picture img { width: 100%; height: 100%; }
.exit-h1 { margin: 0; font: 900 26px/1 Barlow, sans-serif; white-space: nowrap; }
.exit-sub { margin: 0; font-size: 16px; color: #4a5860; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.exit-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 2px solid var(--ink); background: var(--sheet); }
.villain { position: relative; order: 1; flex: 1; min-height: 0; overflow: auto; }
.villain:focus { outline: none; }
.honest-bar { order: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 8px 16px; border-top: 2px solid var(--ink); background: var(--paper); font-family: 'IBM Plex Mono', monospace; font-size: 14px; }
.honest-bar p { margin: 0; }
.honest-ledger { color: #4a5860; }
.honest-actions { display: flex; gap: 10px; }
.honest-actions .button { min-height: 44px; font-size: 16px; padding-block: 5px; }
.honest-actions .button-primary span { white-space: nowrap; }
.honest-actions .button[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pre-roll, Fair Exit and the concession: Print Studio */
.preroll, .fair-exit, .concession { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: 28px 40px; min-height: 100%; }
.preroll-copy, .fair-copy { max-width: 640px; }
.preroll-title, .fair-title { margin: 0 0 14px; font: 900 clamp(28px, 3.2vw, 40px)/1.1 Barlow, sans-serif; position: relative; display: inline-block; }
.preroll p, .fair-exit p, .concession p { margin: 0 0 14px; font-size: 18px; line-height: 1.45; }
.preroll-note { font-size: 15px !important; color: #4a5860; }
.preroll-actions, .fair-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.preroll-actions .button, .fair-actions .button { min-height: 50px; font-size: 18px; padding-inline: 24px; text-decoration: none; }
.fair-exit .fair-actions { margin-top: 24px; }
.fair-exit .ledger-line { margin: 24px 0 0; font-family: Barlow, sans-serif; font-size: 16px; color: #4a5860; }
.exit-art { width: clamp(160px, 22vw, 260px); justify-self: center; }
.exit-art .raster-art { width: 100%; height: auto; display: block; }
.concession { grid-template-columns: auto minmax(0, 1fr); background: var(--paper); border-left: 6px solid var(--mustard); }
.concession .doris-line { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #4a5860; margin-bottom: 6px; }
.doris-avatar { width: 72px; height: 72px; flex: none; }
.doris-avatar .raster-art:not(.doris-sprite) { width: 100%; height: 100%; display: block; }
.doris-avatar.big { width: 120px; height: 120px; }

/* Shared villain bits */
.villain [data-focus]:focus { outline: none; }
.villain [data-focus]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.v-note { font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.4; color: #6b7280; }
.v-error { margin: 8px 0 0; font-size: 13px; color: #9a2f2f; }
.v-toast { position: sticky; bottom: 12px; margin: 12px 24px 0; width: max-content; max-width: calc(100% - 48px); padding: 12px 16px; border-radius: 10px; background: #1f2430; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: v-rise .35s ease-out; z-index: 4; }
@keyframes v-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.bs-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.bs-brand > .raster-art { width: 22px; height: 22px; flex: none; }
.bs-brand span { font-weight: 400; opacity: .7; margin-left: 6px; }

/* Decay 1: sleek SaaS */
.villain[data-decay="1"] { background: #f7f8fc; font-family: Arial, Helvetica, sans-serif; color: #1f2430; padding: 18px 28px 24px; }
.v1-brand { color: #5b5bd6; margin-bottom: 26px; }
.v1-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.v1-card { position: relative; width: min(520px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(30,40,80,.14); padding: 26px 30px 24px 30px; }
.v1-card .doris-avatar { position: absolute; right: 54px; top: -28px; width: 60px; height: 60px; }
.v1-card h3 { margin: 0 0 8px; font-size: 22px; padding-right: 80px; }
.v1-card p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #5a6072; }
.v1-x { position: absolute; right: 14px; top: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #eef0f6; color: #5a6072; font-size: 18px; line-height: 30px; cursor: pointer; }
.v1-btn { display: inline-block; border: 0; border-radius: 10px; padding: 12px 22px; background: linear-gradient(90deg, #5b5bd6, #7c3aed); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.v1-tiny { margin: 14px 0 0 !important; }
.v1-link { border: 0; background: none; padding: 0; font-size: 12px; color: #b8bcc9; text-decoration: underline; cursor: pointer; }
.v1-link:focus-visible { color: #5a6072; }

/* Decay 2: SaaS cracking */
.villain[data-decay="2"] { background: #f7f8fc; font-family: Arial, Helvetica, sans-serif; color: #1f2430; padding: 18px 28px 24px; }
.v2-brand { color: #5b5bd6; margin-bottom: 26px; }
.v2-brand i { font-family: Georgia, serif; font-weight: 400; font-style: normal; }
.v2-row { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.v2-card { position: relative; width: min(520px, 100%); background: #fff; border-radius: 16px 16px 16px 2px; box-shadow: 0 20px 50px rgba(30,40,80,.14); padding: 26px 30px; transform: rotate(-1.2deg); }
.v2-card h3 { margin: 0 0 8px; font-size: 22px; }
.v2-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #5a6072; }
.v2-btn { display: inline-block; border: 0; border-radius: 10px; padding: 14px 26px; background: linear-gradient(90deg, #5b5bd6, #e0a000); color: #fff; font-weight: 700; font-size: 17px; cursor: pointer; }
.v2-decline { display: block; margin-top: 16px; border: 0; background: none; padding: 0; font-size: 14px; color: #5a6072; text-decoration: underline; cursor: pointer; text-align: left; }
.v2-doris { display: flex; gap: 12px; align-items: flex-start; width: min(300px, 100%); padding: 12px; background: #fff; border: 1px solid #dadee9; border-radius: 12px 12px 12px 2px; font-size: 13px; line-height: 1.4; color: #5a6072; }
.v2-doris b { display: block; color: #1f2430; }
.v2-shake { animation: v2-shake .5s; }
@keyframes v2-shake { 25% { transform: rotate(-2.2deg); } 75% { transform: rotate(-.2deg); } }

/* Decay 3: enterprise portal */
.villain[data-decay="3"] { background: #e9edf2; font-family: Verdana, Geneva, sans-serif; color: #223; font-size: 12px; }
.v3-top { height: 34px; background: #2f4a6d; color: #fff; font-size: 12px; line-height: 34px; padding-left: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.v3-top > .raster-art { width: 18px; height: 18px; }
.v3-layout { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: 20px; padding: 16px 20px 20px; }
.v3-panel { position: relative; background: #fff; border: 1px solid #b9c2ce; padding: 16px; }
.v3-panel h3 { margin: 0 0 8px; font-size: 14px; }
.v3-panel p { margin: 0 0 14px; font-size: 11px; line-height: 1.5; color: #445; }
.v3-jar { float: right; width: 84px; height: 84px; margin: -4px 0 8px 12px; }
.v3-btn { display: inline-block; border: 1px solid #1d4a94; border-radius: 3px; padding: 9px 18px; background: linear-gradient(#5e8ed6, #2f62b5); color: #fff; font-weight: bold; font-size: 13px; cursor: pointer; }
.v3-btn.small { padding: 6px 14px; font-size: 11px; }
.v3-btn-quiet { display: inline-block; border: 1px solid #a8b2c0; border-radius: 3px; padding: 7px 12px; background: linear-gradient(#fbfbfc, #e4e8ee); font-size: 11px; color: #334; cursor: pointer; }
.v3-link { border: 0; background: none; padding: 0; color: #0645ad; text-decoration: underline; font-size: 11px; cursor: pointer; }
.v3-foot { margin-top: 14px; font-size: 10px; color: #889; clear: both; }
.v3-manage { display: none; }
.v3-manage.open { display: block; }
.v3-tabs { display: flex; border-bottom: 1px solid #b9c2ce; background: #f2f4f7; }
.v3-tabs button { border: 0; border-right: 1px solid #b9c2ce; background: none; padding: 7px 14px; font: inherit; font-size: 11px; cursor: pointer; }
.v3-tabs button[aria-selected="true"] { background: #fff; font-weight: bold; }
.v3-search { display: block; width: 100%; margin: 10px 0; padding: 5px 8px; border: 1px solid #b9c2ce; font: inherit; font-size: 11px; }
.v3-list { height: 240px; overflow: auto; border: 1px solid #e3e7ed; }
.v3-list ul { list-style: none; margin: 0; padding: 0; }
.v3-list li { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-bottom: 1px solid #e3e7ed; font-size: 11px; }
.v3-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-fav { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.v3-switch { position: relative; width: 34px; height: 16px; border: 0; border-radius: 9px; background: #a9b1bd; cursor: pointer; flex: none; }
.v3-switch[aria-checked="true"] { background: #2e9e4f; }
.v3-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.v3-switch[aria-checked="true"]::after { left: 20px; }
.v3-object { display: block; margin: 14px auto 10px; border: 0; background: none; color: #0645ad; text-decoration: underline; font-size: 10px; cursor: pointer; }
.v3-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.v3-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 48px)); background: #fff; border: 1px solid #b9c2ce; padding: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25); z-index: 2; }
.v3-dialog h3 { margin: 0 0 6px; font-size: 13px; }
.v3-dialog p { margin: 0 0 10px; font-size: 11px; line-height: 1.5; }

/* Decay 4: 2000s pop-ups */
.villain[data-decay="4"] { background: #c0c0c0; font-family: Tahoma, Verdana, sans-serif; color: #000; font-size: 11px; padding: 14px 24px 24px; }
.v4-banner { margin-bottom: 12px; padding: 6px 12px; background: #ffea00; border: 3px dashed #ff0000; color: #ff0000; font-weight: bold; font-size: 18px; text-align: center; font-family: Impact, "Arial Black", Arial, sans-serif; }
.v4-banner .blink { background: #ff0000; color: #ffea00; padding: 0 6px; animation: v4-blink 1s steps(1) infinite; }
@keyframes v4-blink { 50% { background: #ffea00; color: #ff0000; } }
.v4-stage { position: relative; }
.v4-win { position: relative; background: #d4d0c8; border: 2px outset #fff; box-shadow: 4px 4px 0 rgba(0,0,0,.35); width: min(560px, 100%); }
.v4-win.pop { position: absolute; z-index: 3; width: min(360px, calc(100% - 60px)); }
.v4-tb { display: flex; justify-content: space-between; align-items: center; height: 22px; background: linear-gradient(90deg, #0a246a, #a6caf0); color: #fff; font-weight: bold; font-size: 11px; padding-left: 6px; }
.v4-tb button { width: 16px; height: 16px; margin-right: 3px; border: 1px outset #fff; background: #d4d0c8; color: #000; font-size: 10px; line-height: 12px; padding: 0; cursor: pointer; }
.v4-body { padding: 10px; }
.v4-burst { position: absolute; right: -18px; top: 26px; width: 92px; height: 92px; transform: rotate(12deg); z-index: 2; pointer-events: none; }
.v4-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.v4-table td { padding: 3px 4px; border-bottom: 1px solid #a9a9a9; }
.v4-table td.r { text-align: right; white-space: nowrap; }
.v4-table label { cursor: pointer; }
.v4-btn { display: inline-block; border: 2px outset #fff; background: #d4d0c8; padding: 4px 14px; font: inherit; font-size: 11px; cursor: pointer; }
.v4-btn.go { font-weight: bold; }
.v4-btn.ghost { color: #999; }
.v4-row { margin-top: 10px; }
.v4-select { font: inherit; font-size: 11px; min-width: 230px; }
.v4-fine { margin-top: 8px; font-size: 9px; color: #444; }
.v4-pop-icon { float: left; width: 32px; height: 32px; margin: 0 10px 6px 0; }

/* Decay 5: paper bureaucracy */
.villain[data-decay="5"] { background: #d8cdb4; font-family: "Courier New", Courier, monospace; color: #2b2619; padding: 18px 22px 22px; }
.v5-layout { display: grid; grid-template-columns: minmax(300px, 620px) 1fr; gap: 24px; }
.v5-paper { position: relative; background: #f3ebd3; border: 1px solid #b9ad8c; box-shadow: 3px 3px 0 rgba(0,0,0,.15); padding: 16px 24px 16px 40px; background-image: repeating-linear-gradient(transparent 0 27px, rgba(185,173,140,.25) 27px 28px); }
.v5-paper::before { content: ""; position: absolute; left: 12px; top: 40px; width: 12px; height: 12px; border-radius: 50%; background: #d8cdb4; border: 1px solid #b9ad8c; box-shadow: 0 150px 0 -1px #d8cdb4, 0 300px 0 -1px #d8cdb4; }
.v5-clip { position: absolute; right: 22px; top: -10px; width: 26px; height: 60px; }
.v5-paper h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: .1em; padding-right: 40px; }
.v5-scroll { height: 230px; overflow: auto; border-top: 1px dashed #b9ad8c; border-bottom: 1px dashed #b9ad8c; padding: 8px 4px; font-size: 12.5px; line-height: 1.5; background: #f3ebd3; }
.v5-scroll p { margin: 0 0 10px; }
.v5-scroll p.quiet { color: #6b6248; }
.v5-clause { border: 0; background: none; padding: 0; font: inherit; font-size: 10.5px; color: #7a7159; text-align: left; cursor: pointer; }
.v5-clause:hover, .v5-clause:focus-visible { color: #2b2619; }
.v5-form { margin-top: 12px; font-size: 12px; }
.v5-form label { display: block; margin-bottom: 10px; }
.v5-sigrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v5-sig { font: inherit; font-size: 12px; border: 0; border-bottom: 1px dotted #2b2619; background: transparent; width: 220px; }
.v5-pencil { width: 90px; height: 14px; }
.v5-btn { display: inline-block; border: 2px solid #2b2619; background: transparent; padding: 6px 14px; font: inherit; font-size: 12px; letter-spacing: .08em; cursor: pointer; margin-right: 8px; }
.v5-btn.quiet { border-style: dotted; color: #7a7159; }
.v5-stamp { display: inline-block; padding: 6px 12px; border: 3px solid #c43d3d; color: #c43d3d; font-weight: 900; font-size: 18px; letter-spacing: .08em; border-radius: 4px; transform: rotate(-8deg); font-family: Barlow, sans-serif; }
.v5-side { font-size: 11px; line-height: 1.5; }
.v5-side p { margin: 0 0 12px; }
.v5-side .doris-avatar { width: 64px; height: 64px; filter: grayscale(1) contrast(1.1); margin-bottom: 8px; }
.v5-page { font-size: 11px; color: #3b3625; }

/* Decay 6: illuminated manuscript */
.villain[data-decay="6"] { background: #cdb98e; font-family: Georgia, "Times New Roman", serif; color: #3b2a14; padding: 18px 20px 20px; }
.v6-parch { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 28%); align-items: center; gap: 16px 28px; background: #eedfb8; border: 10px double #8a6a2f; padding: 20px 24px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; width: 100%; max-width: 1120px; }
.v6-book { grid-column: 1 / -1; font-size: 12px; letter-spacing: .2em; color: #8a2e1e; text-align: center; border-bottom: 1px solid #8a6a2f66; padding-bottom: 10px; }
.v6-copy { min-width: 0; }
.v6-instructions { font-size: 15px; }
.v6-parch p { margin: 0 0 12px; }
.v6-parch p.dc::first-letter { float: left; font-size: 58px; line-height: 50px; margin: 4px 10px 0 0; color: #8a2e1e; font-weight: bold; text-shadow: 1px 1px 0 #c9a227; }
.v6-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 22px; }
.v6-actions.swap { flex-direction: row-reverse; justify-content: flex-end; }
.v6-remain { border: 2px solid #6b4e22; background: linear-gradient(#d9b65a, #b88a1e); color: #3b2a14; font: inherit; font-weight: bold; font-size: 15px; padding: 10px 22px; cursor: pointer; }
.v6-exit { border: 1px solid #b9a078; background: transparent; color: #8a7554; font: inherit; font-style: italic; font-size: 12px; padding: 6px 10px; cursor: pointer; }
.v6-illumination { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.v6-marg { display: flex; align-items: center; gap: 8px; font-style: italic; font-size: 13px; line-height: 1.35; color: #6b4e22; }
.v6-marg p { margin: 0; }
.v6-marg > .raster-art { flex: none; width: 90px; height: 120px; }
.v6-roundel { width: 184px; height: 184px; border-radius: 50%; border: 4px solid #c9a227; background: #f6ecd0; overflow: hidden; display: grid; place-items: center; }
.v6-roundel .doris-avatar { width: 172px; height: 172px; filter: sepia(.6) saturate(.8); }
.v6-turn { animation: v6-turn .4s ease-out; }
@keyframes v6-turn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .v-toast, .v2-shake, .v6-turn { animation: none; }
  .v4-banner .blink { animation: none; }
  .v3-switch::after { transition: none; }
}

@media (max-width: 760px) {
  .exit-sub { display: none; }
  .honest-bar { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 8px 12px; }
  .honest-ledger { grid-column: 1 / -1; font-size: 12px; }
  .honest-actions { justify-content: flex-end; }
  .honest-actions .button { min-height: 40px; font-size: 15px; padding-inline: 12px; }
  .preroll, .fair-exit, .concession { grid-template-columns: 1fr; padding: 22px 18px; }
  .exit-art { width: 140px; }
  .v1-row, .v2-row { gap: 18px; }
  .villain[data-decay="1"], .villain[data-decay="2"] { padding: 14px 16px 20px; }
  .v1-card .doris-avatar { right: 50px; top: -22px; width: 48px; height: 48px; }
  .v3-layout, .v5-layout { grid-template-columns: 1fr; }
  .v3-jar { width: 64px; height: 64px; }
  .villain[data-decay="4"] { padding: 12px; }
  .v4-burst { right: -8px; top: 20px; width: 72px; height: 72px; }
  .v6-parch { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 18px; }
  .v6-illumination { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .v6-marg { flex-direction: column; gap: 8px; }
  .v6-marg > .raster-art { width: 80px; height: 96px; }
  .v6-roundel { width: 116px; height: 116px; }
  .v6-roundel .doris-avatar { width: 104px; height: 104px; }
}

/* ---- Game layer (Ben, Oct 28): HUD, stamps, ladder dots, dodge, CAPTCHA, rules, receipt ---- */
.v-hud { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-end; padding: 8px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.2; border-bottom: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.35); }
.v-hud-cell { display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.v-hud-cell b { font-size: 15px; font-weight: 700; }
.v-hud-cell small { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.v-hud-bar { min-width: 150px; }
.v-hud-bar i { display: block; height: 10px; border: 1px solid currentColor; border-radius: 3px; overflow: hidden; opacity: .9; }
.v-hud-bar em { display: block; height: 100%; background: currentColor; opacity: .55; transition: width 1s linear; }
.villain[data-decay="1"] .v-hud, .villain[data-decay="2"] .v-hud { color: #5b5bd6; background: #fff; margin: -18px -28px 18px; }
.villain[data-decay="3"] .v-hud { color: #fff; background: #223a55; border-bottom-color: #1a2b40; }
.villain[data-decay="4"] .v-hud { color: #000; background: #e4e0d8; margin: -14px -24px 12px; border-bottom: 2px inset #fff; }
.villain[data-decay="5"] .v-hud { color: #2b2619; background: #e7dcc1; margin: -18px -22px 16px; }
.villain[data-decay="6"] .v-hud { color: #3b2a14; background: #e3cf9f; margin: -18px -20px 16px; }

.v-stamp-layer { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(21,37,43,.18); cursor: pointer; }
.v-stamp { padding: 14px 28px; border: 5px solid #c43d3d; border-radius: 8px; color: #c43d3d; background: rgba(255,252,244,.92); font: 900 34px/1 Barlow, sans-serif; letter-spacing: .06em; text-align: center; transform: rotate(-8deg); animation: v-slam .35s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.v-stamp small { display: block; margin-top: 8px; font: 500 13px/1.3 'IBM Plex Mono', monospace; letter-spacing: 0; color: #15252b; }
.v-stamp-layer.good .v-stamp { border-color: #2e7d74; color: #2e7d74; }
@keyframes v-slam { from { transform: rotate(-20deg) scale(2.2); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }

.v2-ladder { display: flex; gap: 6px; margin-top: 12px; }
.v2-ladder i { width: 10px; height: 10px; border-radius: 50%; background: #e8eaf2; }
.v2-ladder i.now { background: #e0a000; }
.v1-tiny { position: relative; min-height: 20px; }
.v1-link.dodged { position: absolute; right: 0; }

.v4-captcha { width: min(380px, calc(100% - 48px)); }
.v4-cap-lead { margin: 0 0 8px; font-size: 12px; }
.v4-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.v4-tile { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid #fff; background: #fff; cursor: pointer; }
.v4-tile > .raster-art { width: 100%; height: 100%; display: block; }
.v4-tile i { position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); }
.v4-tile.on { outline: 3px solid #2f62b5; outline-offset: -3px; }
.v4-tile.on i { background: #2f62b5; }
.v4-tile.on i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.v4-tile:focus-visible { outline: 3px solid #0a246a; outline-offset: -3px; }
.v4-cap-note { font-size: 10px; color: #444; margin-left: 8px; }

.v5-rules { margin: 8px 0 0; padding: 0; list-style: none; font-size: 11.5px; line-height: 1.45; }
.v5-rules li { padding: 2px 0; }
.v5-rules li.ok { color: #2e7d74; }
.v5-rules li.no { color: #9a2f2f; }
.v5-rules li span[aria-hidden] { display: inline-block; width: 14px; }

.receipt-wrap { display: grid; place-items: center; min-height: 100%; padding: 22px; background: var(--paper); }
.receipt { width: min(480px, 100%); padding: 22px 24px 20px; background: #fffdf7; color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.12); border: 1px solid #827e6f55; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 97% 100%, 94% calc(100% - 10px), 91% 100%, 88% calc(100% - 10px), 85% 100%, 82% calc(100% - 10px), 79% 100%, 76% calc(100% - 10px), 73% 100%, 70% calc(100% - 10px), 67% 100%, 64% calc(100% - 10px), 61% 100%, 58% calc(100% - 10px), 55% 100%, 52% calc(100% - 10px), 49% 100%, 46% calc(100% - 10px), 43% 100%, 40% calc(100% - 10px), 37% 100%, 34% calc(100% - 10px), 31% 100%, 28% calc(100% - 10px), 25% 100%, 22% calc(100% - 10px), 19% 100%, 16% calc(100% - 10px), 13% 100%, 10% calc(100% - 10px), 7% 100%, 4% calc(100% - 10px), 1% 100%, 0 calc(100% - 10px)); }
.receipt-head { margin: 0 0 10px; text-align: center; font-size: 11px; letter-spacing: .08em; color: #4a5860; }
.receipt-rank { margin: 0; text-align: center; font: 900 30px/1.05 Barlow, sans-serif; letter-spacing: .04em; }
.receipt-line { margin: 6px 0 12px; text-align: center; font-size: 13px; color: #4a5860; }
.receipt-table { width: 100%; border-collapse: collapse; border-top: 1px dashed #827e6f; border-bottom: 1px dashed #827e6f; }
.receipt-table th, .receipt-table td { padding: 4px 2px; text-align: left; font-weight: 400; }
.receipt-table th { font-size: 11px; color: #4a5860; }
.receipt-table .r { text-align: right; }
.receipt-table tfoot td { font-weight: 700; border-top: 1px dashed #827e6f; }
.receipt-meta { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: #4a5860; }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.receipt-actions .button { min-height: 44px; font-size: 16px; padding-inline: 18px; }

@media (prefers-reduced-motion: reduce) {
  .v-stamp { animation: none; }
  .v-hud-bar em { transition: none; }
}
@media (max-width: 760px) {
  .v-hud { gap: 6px 12px; padding: 8px 12px; }
  .v-hud-cell { min-width: 0; }
  .villain[data-decay="1"] .v-hud, .villain[data-decay="2"] .v-hud { margin: -14px -16px 14px; }
  .villain[data-decay="4"] .v-hud { margin: -12px -12px 10px; }
  .v-stamp { font-size: 24px; padding: 10px 18px; }
  .v4-captcha { left: 8px !important; top: 8px !important; width: calc(100% - 16px); }
}

/* Generated raster illustration candidates with PNG loading/error fallback.
   Portrait atlases contain five equal columns; each square avatar is a headshot
   window, with no stretching or color adjustment of the generated character. */
.generated-art { position: relative; display: block; }
.generated-art img { opacity: 1; }
.generated-art.art-loaded img { opacity: 1; }

.exit-illustration { display: grid; }
.exit-illustration > img { grid-area: 1 / 1; width: 100%; height: auto; display: block; }
.doris-art { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: #f1e6d2; }
.doris-art > img { position: absolute; top: 0; left: 0; display: block; width: 500%; max-width: none; height: auto; transform: translateX(var(--portrait-offset)); }

.receipt-table th:first-child, .receipt-table td:first-child { padding-right: 8px; }
.receipt-table th.r, .receipt-table td.r { white-space: nowrap; padding-left: 8px; }
.receipt-wrap { grid-template-columns: minmax(0, 1fr); }
.receipt { min-width: 0; }
.receipt-table { table-layout: fixed; }
.receipt-table th:first-child { width: 8%; }
.receipt-table th:nth-child(2) { width: 47%; }
.receipt-table th.r { width: 15%; }
.v4-captcha .v4-tb { height: auto; min-height: 22px; align-items: flex-start; gap: 8px; padding: 4px 4px 4px 6px; }
.v4-captcha .v4-tb > span:last-child { flex: none; }
@media (max-width: 760px) {
  /* Keep the entire introduction and its actions visible; portraits still
     supply the visual character during play on compact screens. */
  .preroll > .exit-art, .fair-exit > .exit-art { display: none; }
  .receipt-wrap { padding: 16px; }
  .receipt { padding: 20px 16px; }
  .honest-bar { grid-template-columns: minmax(0, 1fr); }
  .honest-bar > * { min-width: 0; grid-column: 1; }
  .honest-ledger { overflow-wrap: anywhere; }
  .honest-actions .button { min-height: 44px; }
}
@media (max-width: 360px) {
  .honest-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .honest-actions .button { width: 100%; }
  .receipt-wrap { padding: 12px; }
  .receipt { padding-inline: 12px; }
  .receipt-table { font-size: 12px; }
}

/* Ben's browser comments, October 28: Print Studio outside the villain frame. */
.raster-art { display: block; max-width: 100%; object-fit: contain; }
.v3-jar > .raster-art, .v4-burst > .raster-art, .v4-pop-icon > .raster-art, .v5-clip > .raster-art { width: 100%; height: 100%; }
.v4-tile > .raster-art { width: 100%; height: 100%; object-fit: cover; }
.doris-file-photo > .doris-portrait { position: static; width: 100%; height: 100%; transform: none; object-fit: cover; }
.v5-pencil { position: relative; }
.v5-pencil > .raster-art { position: absolute; left: 0; top: -8px; width: 90px; max-width: none; height: 30px; }
.art-failure-label { position: absolute; inset: 0; display: grid; place-items: center; padding: 4px; background: #fff; color: #15252b; font-size: 11px; }

.exit-page-shell .button { appearance: none; font-family: Barlow, sans-serif; border: 2px solid var(--ink); font-weight: 700; cursor: pointer; }
.exit-page-shell .button:disabled { cursor: not-allowed; }
.honest-bar { font-family: Barlow, sans-serif; font-size: 16px; }
.honest-step { font-weight: 700; }
.honest-ledger { font-size: 14px; }
.honest-actions .button { font-family: Barlow, sans-serif; font-size: 18px; min-height: 48px; padding: 8px 16px; }
.title-mark { padding-bottom: 3px; }
.preroll, .fair-exit { box-sizing: border-box; width: 100%; max-width: 1080px; margin-inline: auto; }
.preroll-copy, .fair-copy { min-width: 0; }
.preroll-actions .button, .fair-actions .button { box-sizing: border-box; max-width: 100%; text-align: center; }
.v1-brand, .v2-brand { justify-content: center; }
.v1-row { max-width: 1010px; margin-inline: auto; justify-content: center; padding-top: 14px; }
.v2-row { max-width: 920px; margin-inline: auto; justify-content: center; padding-top: 10px; }
.v3-layout { width: 100%; max-width: 1060px; margin-inline: auto; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); }
.v3-layout:has(.v3-manage:not(.open)) { grid-template-columns: minmax(0, 440px); justify-content: center; }
.v5-layout { max-width: 1060px; margin-inline: auto; grid-template-columns: minmax(0, 620px) minmax(220px, 1fr); }
.v6-parch { margin-inline: auto; }

/* Checkout is deliberately excessive; the honest bar remains outside it. */
.villain[data-decay="4"] { background: #b7c8c4; background-image: repeating-linear-gradient(45deg, #ffffff20 0 12px, transparent 12px 24px); }
.v4-banner { max-width: 1060px; margin: 0 auto 16px; padding: 9px 14px; border-width: 4px; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.05; box-shadow: 4px 4px 0 #000; }
.v4-stage { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); max-width: 1060px; margin-inline: auto; gap: 18px; align-items: start; }
.v4-checkout-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.v4-checkout-column > .v4-win { width: 100%; min-width: 0; }
.v4-sponsored { display: grid; gap: 7px; padding: 14px 16px; border: 4px double #ffed28; background: #73148e; color: #fff; text-align: center; box-shadow: 3px 3px 0 #330044; font: 12px/1.3 Tahoma, sans-serif; }
.v4-sponsored-label { font-size: 9px; letter-spacing: .08em; }
.v4-sponsored strong { color: #ffed28; font: 900 clamp(22px, 2.1vw, 30px)/1 Barlow, sans-serif; }
.v4-sponsored b { width: fit-content; margin: 2px auto 0; padding: 5px 9px; background: #ffed28; color: #360344; }
.v4-stage > #v4-pops { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.v4-stage > #v4-pops > * { pointer-events: auto; }
.v4-ad-rail { display: grid; gap: 12px; padding-top: 6px; min-width: 0; }
.v4-ad-win { min-width: 0; background: #c9c7c1; border: 2px outset #ddd; box-shadow: 3px 3px 0 #555; }
.v4-ad-win > .raster-art { width: 100%; height: auto; }
.v4-burst { width: 120px; height: 120px; right: -20px; top: 26px; }
.v4-table, .v4-row, .v4-fine { font-size: 12px; }
.v4-table td { padding-block: 5px; }
@media (max-width: 760px) {
  .honest-actions .button { font-size: 17px; min-height: 48px; }
  .honest-ledger { font-size: 13px; }
  .v5-layout, .v3-layout { grid-template-columns: minmax(0, 1fr); }
  .v3-layout:has(.v3-manage:not(.open)) { grid-template-columns: minmax(0, 1fr); }
  .v3-tabs button { flex: 1; min-width: 0; padding-inline: 4px; overflow-wrap: anywhere; }
  .v1-card h3 { padding-right: 28px; }
  .v4-stage { grid-template-columns: minmax(0, 1fr); }
  .v4-ad-rail { padding-top: 0; }
  .v4-table { table-layout: fixed; }
  .v4-table td:first-child { width: 58%; }
  .v4-table td.r { white-space: normal; }
  .v4-select { min-width: 0; max-width: 100%; width: 100%; }
  .v4-tb { height: auto; min-height: 22px; gap: 4px; }
  .v4-tb > span:last-child { flex: none; }
  .v4-burst { width: 84px; height: 84px; right: 4px; top: 26px; }
  .v4-banner { padding: 8px; }
}
@media (max-width: 480px) {
  .v6-illumination { grid-template-columns: minmax(0, 1fr); }
  .v6-marg { flex-direction: row; }
  .v6-roundel { width: 156px; height: 156px; }
  .v6-roundel .doris-avatar { width: 144px; height: 144px; }
}
@media (min-width: 1440px) and (min-height: 900px) {
  .v4-banner, .v4-stage { max-width: 1240px; }
  .v4-table, .v4-row, .v4-fine { font-size: 14px; }
  .v4-table td { padding-block: 8px; }
  .v4-sponsored { padding-block: 20px; font-size: 14px; }
  .villain[data-decay="6"] { display: flex; flex-direction: column; }
  .villain[data-decay="6"] .v-hud { flex: none; }
  .v6-parch { flex: none; max-width: 1240px; margin-block: auto; padding: 24px 32px; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px 40px; font-size: 24px; }
  .v6-instructions { font-size: 18px; }
  .v6-roundel { width: 284px; height: 284px; }
  .v6-roundel .doris-avatar { width: 272px; height: 272px; }
  .v6-marg { font-size: 16px; }
  .v6-marg > .raster-art { width: 128px; height: 150px; }
}

/* Game polish, October 29. One stage, six distinct departments. The department
   ribbon supplies continuity; each interior keeps its increasingly old software. */
.exit-frame { position: relative; isolation: isolate; }
.villain { display: flex; flex-direction: column; overscroll-behavior: contain; }
.villain[data-decay] { padding: 0; }
.scene-body { flex: 1 0 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px 32px; }
.scene-body > * { flex-shrink: 0; }
.villain[data-decay="0"] .scene-body { padding: 0; }
.villain[data-decay="1"] { --scene-accent: #4e49b9; --scene-rule: #d3d8ec; background: radial-gradient(ellipse at 65% 25%, #fff 0, #eef0fb 65%); }
.villain[data-decay="2"] { --scene-accent: #734666; --scene-rule: #d7c5d3; background: linear-gradient(120deg, #f2eef8 50%, #eee3e4 50%); }
.villain[data-decay="3"] { --scene-accent: #233f60; --scene-rule: #b6c3d4; }
.villain[data-decay="4"] { --scene-accent: #192654; --scene-rule: #7a8a90; }
.villain[data-decay="5"] { --scene-accent: #3e3526; --scene-rule: #aa9c7e; }
.villain[data-decay="6"] { --scene-accent: #674024; --scene-rule: #9e8153; }
.villain[data-decay] .v-hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; flex: none; gap: 24px; margin: 0; padding: 16px 28px; background: #ffffff66; color: var(--scene-accent); border: 0; border-bottom: 1px solid var(--scene-rule); font-family: Barlow, sans-serif; }
.department-brand { display: flex; align-items: center; gap: 8px; padding-right: 24px; border-right: 1px solid var(--scene-rule); font: 800 12px/1.05 Barlow, sans-serif; letter-spacing: .06em; }
.department-brand > img { width: 34px; height: 34px; }
.department-title { display: grid; gap: 3px; }
.department-title > span { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.department-title > strong { font: 800 24px/1.1 Barlow, sans-serif; letter-spacing: -.02em; }
.department-route { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.department-route li { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--scene-rule); font: 600 11px/1 'IBM Plex Mono', monospace; color: var(--scene-accent); }
.department-route .current { background: var(--scene-accent); color: #fff; border-color: var(--scene-accent); box-shadow: 0 3px 0 var(--scene-rule); transform: translateY(-2px); }
.department-route .cleared { border-color: var(--scene-accent); }
.department-route .skipped { border-style: dashed; }
.department-route .ahead { opacity: .55; }
.villain[data-decay="3"] .v-hud { background: #223a55; color: #fff; --scene-accent: #fff; --scene-rule: #73869d; }
.villain[data-decay="3"] .department-route .current { color: #223a55; }
.villain[data-decay="4"] .v-hud { border-bottom: 2px outset #fff; background: #d4d0c8; }
.villain[data-decay="5"] .department-title > strong { font-family: 'Courier New', monospace; font-size: 22px; }
.villain[data-decay="6"] .department-title > strong { font-family: Georgia, serif; font-size: 24px; font-weight: 700; }
.honest-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 10px 18px; }
.honest-ledger { font-size: 16px; font-variant-numeric: tabular-nums; }
.honest-ledger strong { color: var(--ink); font-weight: 500; }
.honest-actions { gap: 12px; }
.honest-actions .button { white-space: nowrap; }

/* Opening and ending use the site's normal editorial system. */
.preroll, .fair-exit { max-width: 1240px; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .9fr); gap: 40px; padding: 38px 42px; min-height: 0; flex: 1; }
.preroll-copy, .fair-copy { max-width: none; }
.game-kicker { margin: 0 0 18px !important; font: 600 12px/1.3 Barlow, sans-serif !important; letter-spacing: .14em; color: #52616a; }
.preroll-title, .fair-title { font-size: clamp(32px, 3.15vw, 54px); line-height: 1.03; letter-spacing: -.025em; margin-bottom: 22px; }
.preroll-copy > p:not(.game-kicker), .fair-copy > p:not(.ledger-line) { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; max-width: 36em; }
.game-brief { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; padding-block: 16px; border-block: 1px solid #15252b30; font: 15px/1.4 Barlow, sans-serif; }
.game-brief b { display: block; margin-bottom: 4px; font-weight: 700; }
.preroll-actions { gap: 12px; margin-top: 0; }
.preroll-actions .button { min-height: 48px; padding-inline: 18px; font-size: 17px; }
.exit-art { width: 100%; max-width: 450px; }
.intro-art { display: grid; gap: 12px; transform: rotate(1deg); }
.intro-art .exit-illustration { border: 1px solid var(--ink); padding: 8px; background: var(--paper); box-shadow: 6px 6px 0 #15252b18; }
.art-caption { font: 700 12px/1.2 Barlow, sans-serif; letter-spacing: .09em; }
.art-footnote { font: 400 13px/1.3 Barlow, sans-serif; text-align: right; color: #52616a; }
.fair-actions { gap: 16px; }
.fair-actions .button { min-width: 120px; }

/* SaaS: generously staged dialogs and a persistent, expressive antagonist. */
.v1-row, .v2-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .85fr); align-items: center; width: 100%; max-width: 1080px; gap: 48px; padding: 0; margin: auto; }
.v1-dialogs { display: grid; gap: 18px; min-width: 0; }
.v1-card, .v2-card { width: 100%; padding: 30px; border: 1px solid #ffffff; border-radius: 18px; box-shadow: 0 18px 40px #3537621c, 0 2px 0 #fff; }
.v1-card h3, .v2-card h3 { font-size: clamp(26px, 2.3vw, 36px); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 16px; padding-right: 18px; }
.v1-card p, .v2-card p { font-size: 16px; line-height: 1.5; }
.v1-card .v1-eyebrow, .v2-card .v1-eyebrow { font: 700 10px/1.3 Arial, sans-serif; letter-spacing: .13em; color: #696a91; margin-bottom: 10px; }
.v1-btn, .v2-btn { min-height: 48px; padding: 14px 20px; font-size: 16px; line-height: 1.25; box-shadow: 0 3px 0 #352f7f; }
.v1-btn:active, .v2-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #352f7f; }
.v1-x { top: 16px; right: 16px; }
.v1-tiny { margin-top: 20px !important; }
.desk-agent { padding: 6px 0 6px 24px; border-left: 1px solid #989bc355; color: #4e526b; }
.agent-identity { display: flex; align-items: center; gap: 18px; }
.agent-identity .doris-avatar { width: 116px; height: 116px; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 5px 20px #35376218; }
.agent-identity h4 { margin: 4px 0; font: 800 28px/1 Barlow, sans-serif; color: #252944; }
.agent-identity small, .agent-signoff { font: 600 10px/1.4 Barlow, sans-serif; letter-spacing: .07em; }
.agent-identity span { font: 13px/1.4 Barlow, sans-serif; }
.desk-agent blockquote { margin: 24px 0; font: 500 22px/1.35 Barlow, sans-serif; color: #363951; }
.agent-signoff { margin: 0; padding-top: 14px; border-top: 1px solid #989bc355; letter-spacing: 0; font-size: 12px; font-weight: 400; }
.v2-card { transform: rotate(-.6deg); border-bottom-right-radius: 2px; }
.v2-doris { width: 100%; display: grid; justify-items: start; gap: 18px; padding: 0 0 0 24px; border: 0; border-left: 1px solid #ba98b0; background: none; border-radius: 0; }
.v2-doris .doris-avatar { width: 148px; height: 148px; box-shadow: 8px 8px 0 #dac9de; border: 6px solid #fff; border-radius: 50%; }
.v2-doris small { font: 700 10px/1.4 Arial, sans-serif; letter-spacing: .12em; color: #734666; }
.v2-doris b { margin: 7px 0 0; font: 800 22px/1.15 Barlow, sans-serif; color: #422b40; }
.v2-doris blockquote { margin: 12px 0; font: 500 21px/1.3 Barlow, sans-serif; color: #634660; }
.v2-doris .doris-caption { margin: 0; font-size: 12px; }
.v2-ladder { margin-top: 24px; gap: 7px; }
.v2-ladder i { width: 28px; height: 4px; border-radius: 0; }
.v2-decline { min-height: 28px; margin-top: 16px; }

/* Consent intake fills the scene before the preferences pane takes its place. */
.villain[data-decay="3"] .scene-body { gap: 0; padding: 0; }
.v3-top { height: auto; min-height: 30px; line-height: 1.4; padding: 8px 28px; gap: 12px; font-size: 10px; }
.v3-top span { opacity: .75; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.v3-layout, .v3-layout:has(.v3-manage:not(.open)) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); width: 100%; max-width: 1180px; gap: 24px; padding: 28px; margin: auto; }
.v3-panel { padding: 26px; min-width: 0; box-shadow: 0 3px 0 #b6c3d433; }
.v3-panel h3 { font-size: clamp(21px, 2vw, 28px); line-height: 1.15; margin: 0 0 16px; }
.v3-panel p { font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
.v3-jar { width: 106px; height: 106px; margin: -4px -4px 10px 16px; }
.v3-btn { font-size: 14px; padding: 13px 18px; min-height: 44px; }
.v3-foot { font-size: 12px !important; margin-top: 24px !important; color: #627083 !important; }
.v3-link { font-size: 12px; }
.v3-intake { align-self: center; padding: 8px 10px 8px 24px; color: #3c526c; }
.v3-case-label { font: 600 11px/1.3 Barlow, sans-serif; letter-spacing: .12em; }
.v3-intake > strong { display: block; margin: 8px 0 0; font: 900 clamp(64px, 6vw, 92px)/1 Barlow, sans-serif; color: #2f4a6d; letter-spacing: -.05em; }
.v3-intake h4 { font: 700 22px/1.1 Barlow, sans-serif; margin: 8px 0 16px; max-width: 13em; }
.v3-intake > p { max-width: 25em; font-size: 13px; line-height: 1.5; }
.v3-service { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin-top: 22px; border-top: 1px solid #b6c3d4; padding-top: 16px; font: 11px/1.3 'IBM Plex Mono', monospace; }
.v3-service b { text-align: right; font-size: 10px; }
.v3-layout:has(.v3-manage.open) .v3-intake { display: none; }
.v3-layout:has(.v3-manage.open) { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr); }
.v3-manage { padding: 16px; }
.v3-list { height: clamp(180px, 28vh, 300px); }
.v3-list li { min-height: 30px; }
.v3-search { min-height: 34px; }
.v3-actions { flex-wrap: wrap; gap: 8px; }
.v3-actions .v3-btn, .v3-actions .v3-btn-quiet { min-height: 36px; }

/* Dialogs are contained by the game viewport; the honest exit stays reachable. */
.villain.has-dialog { overflow: hidden; }
#v4-pops:not(:empty), #v3-dialog:not(:empty) { position: absolute; inset: 0; z-index: 10; display: grid; justify-items: center; align-items: safe center; overflow: auto; padding: 20px; background: #15252b66; pointer-events: auto; }
#v4-pops:empty, #v3-dialog:empty { display: none; }
#v4-pops > .v4-win.pop { position: relative; left: auto !important; top: auto !important; width: min(430px, 100%); margin: 0; }
#v3-dialog > .v3-dialog { position: relative; inset: auto; transform: none; width: min(400px, 100%); padding: 24px; }
.v3-dialog h3 { font-size: 22px; }
.v3-dialog p { font-size: 14px; }
.v4-banner, .v4-stage { max-width: 1180px; width: 100%; }
.v4-stage { gap: 20px; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); }
.v4-banner { font-size: clamp(22px, 2.6vw, 36px); padding-block: 10px; }
.v4-body { padding: 14px; }
.v4-btn { padding: 8px 12px; min-height: 32px; }
.v4-table td { padding-block: 6px; }
.v4-tb { min-height: 24px; }
.v4-fine { margin-bottom: 0; }
.v4-burst { top: 35px; right: 4px; width: 94px; height: 94px; }
.v4-sponsored { padding: 16px; }
.v4-cap-lead { font-size: 15px; line-height: 1.35; margin-bottom: 12px; }
.v4-cap-note { display: block; margin: 8px 0 0; font-size: 11px; }

/* The filing cabinet has a personnel card, rather than a floating thumbnail. */
.v5-layout { width: 100%; max-width: 1180px; grid-template-columns: minmax(0, 3fr) minmax(210px, 1fr); gap: 28px; margin: auto; }
.v5-paper { padding: 20px 24px 20px 36px; }
.v5-paper h3 { font-size: 18px; line-height: 1.25; margin-bottom: 12px; }
.v5-scroll { height: clamp(150px, 22vh, 250px); }
.v5-form { font-size: 13px; }
.v5-sig { min-height: 32px; font-size: 14px; width: 220px; max-width: 100%; }
.v5-btn { min-height: 36px; margin-block: 3px; }
.v5-side { align-self: start; background: #eee3c8; padding: 18px; border: 1px solid #aa9c7e; box-shadow: 4px 4px 0 #a3937338; font-size: 12px; line-height: 1.5; transform: rotate(1deg); }
.file-label { display: block; border-bottom: 1px solid #aa9c7e; padding-bottom: 8px; margin-bottom: 16px; font-size: 10px; letter-spacing: .06em; }
.v5-side .doris-avatar { width: 124px; height: 124px; margin-bottom: 16px; filter: none; border: 5px solid #faf5e7; box-shadow: 0 2px 4px #3e352633; }
.v5-side .doris-art { border-radius: 0; }
.v5-side h4 { font-size: 24px; letter-spacing: .15em; margin: 0; }
.file-role { font-size: 10px; margin-bottom: 18px !important; }
.file-privacy { font-size: 10px; border-top: 1px solid #aa9c7e; padding-top: 12px; margin-bottom: 0 !important; }
.v6-parch { max-width: 1180px; margin-block: auto; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .9fr); gap: 20px 36px; padding: 24px 30px; box-shadow: 5px 5px 0 #7d633b33; }
.v6-book { font-size: 13px; letter-spacing: .14em; }
.v6-parch .dc { font-size: clamp(20px, 1.7vw, 27px); line-height: 1.5; }
.v6-instructions { font-size: 15px; line-height: 1.5; margin-top: 20px !important; }
.v6-roundel { width: 210px; height: 210px; }
.v6-roundel .doris-avatar { width: 198px; height: 198px; filter: none; }
.v6-marg { max-width: 300px; }
.v6-actions { margin-top: 26px; }
.v6-remain { min-height: 44px; }
.v6-exit { min-height: 32px; }

/* Results tell the truth about the route, including skips and shortcuts. */
.receipt-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 48px; width: 100%; max-width: 1120px; align-items: center; margin: auto; padding: 32px; min-height: 0; background: none; }
.debrief { min-width: 0; }
.debrief h2 { margin: 0 0 24px; font: 900 clamp(34px, 3vw, 52px)/1.02 Barlow, sans-serif; letter-spacing: -.03em; }
.debrief-rank { font: 700 13px/1.3 Barlow, sans-serif; letter-spacing: .1em; margin: 0 0 8px; }
.debrief-line { font: 400 18px/1.5 Barlow, sans-serif; margin: 0; max-width: 28em; }
.run-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0 22px; padding-block: 18px; border-block: 1px solid #15252b33; }
.run-totals dt { font: 500 12px/1.3 Barlow, sans-serif; margin-bottom: 4px; }
.run-totals dd { font: 800 32px/1.1 Barlow, sans-serif; margin: 0; font-variant-numeric: tabular-nums; }
.run-totals dd small { font-size: 16px; font-weight: 400; }
.debrief-note { font: 400 14px/1.45 Barlow, sans-serif; color: #4a5860; }
.receipt { width: 100%; padding: 24px 22px 30px; background: #fffdf7; border-color: #827e6f66; box-shadow: none; filter: drop-shadow(4px 5px 0 #15252b0d); transform: rotate(1deg); }
.receipt-head { font-size: 10px; line-height: 1.5; margin-bottom: 16px; }
.receipt-approved { width: fit-content; font: 800 17px/1 Barlow, sans-serif; letter-spacing: .08em; margin: 0 auto 20px; padding: 8px 12px; border: 3px double #3d6556; color: #3d6556; transform: rotate(-4deg); }
.receipt-table th, .receipt-table td { padding-block: 7px; vertical-align: top; }
.receipt-table th:first-child { width: 12%; }
.receipt-table th:nth-child(2) { width: 66%; }
.receipt-table th.r { width: 22%; }
.receipt-table td small { display: block; margin-top: 2px; color: #617069; font-size: 10px; }
.receipt-table tfoot td { padding-top: 14px; }
.receipt-signature { font: italic 20px/1.2 Georgia, serif; text-align: right; margin: 20px 0; }
.receipt-thanks { text-align: center; font-size: 9px; }
.receipt-actions { gap: 12px; margin-top: 24px; }
.receipt-actions .button { min-height: 48px; font-size: 17px; }

/* Scene changes lock the old puzzle briefly, with an immediate keyboard bypass. */
.v-stamp-layer { position: absolute; inset: 0 0 var(--controls-height, 70px); z-index: 20; padding: 20px; background: #15252b88; cursor: default; }
.stamp-card { width: min(480px, 100%); display: grid; justify-items: center; gap: 22px; padding: 26px; background: #fffcf4; border: 2px solid #15252b; box-shadow: 8px 8px 0 #15252b66; color: #15252b; }
.stamp-overline { font: 600 10px/1.2 Barlow, sans-serif; letter-spacing: .15em; }
.v-stamp { font-size: 30px; padding: 16px 20px; background: none; border-width: 3px; border-radius: 0; box-shadow: none; transform: rotate(-4deg); }
.v-stamp small { font: 400 14px/1.4 Barlow, sans-serif; }
.stamp-continue { appearance: none; border: 0; background: transparent; color: #15252b; font: 700 16px/1.3 Barlow, sans-serif; min-height: 44px; cursor: pointer; padding: 8px 16px; }
.stamp-continue:focus-visible { outline: 2px solid #15252b; outline-offset: 3px; }
.v-toast { position: absolute; z-index: 15; bottom: calc(var(--controls-height, 70px) + 12px); left: 50%; transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border: 1px solid #faf5e766; border-radius: 6px; font: 500 15px/1.4 Barlow, sans-serif; pointer-events: none; animation: none; box-shadow: 0 4px 14px #15252b33; }
@media (prefers-reduced-motion: no-preference) {
  .scene-body { animation: scene-arrive .24s ease-out both; }
  .v2-doris .doris-avatar { transition: box-shadow .2s; }
}
@keyframes scene-arrive { from { opacity: .3; } to { opacity: 1; } }

@media (min-width: 1500px) and (min-height: 900px) {
  .scene-body { padding: 36px 40px; }
  .v1-row, .v2-row { gap: 70px; }
  .v1-card, .v2-card { padding: 42px; }
  .agent-identity .doris-avatar { width: 154px; height: 154px; }
  .v2-doris .doris-avatar { width: 190px; height: 190px; }
  .desk-agent blockquote, .v2-doris blockquote { font-size: 26px; }
  .v6-roundel { width: 268px; height: 268px; }
  .v6-roundel .doris-avatar { width: 256px; height: 256px; }
  .v6-parch { padding: 28px 40px; }
  .v6-marg { font-size: 15px; }
}
@media (max-width: 1100px) {
  .department-brand { display: none; }
  .villain[data-decay] .v-hud { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 24px; }
  .v1-row, .v2-row { gap: 24px; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .85fr); }
  .agent-identity { display: block; }
  .agent-identity .doris-avatar { margin-bottom: 12px; width: 100px; height: 100px; }
  .agent-identity h4 { font-size: 24px; }
  .desk-agent blockquote, .v2-doris blockquote { font-size: 20px; }
  .preroll, .fair-exit { padding: 28px; gap: 28px; }
  .game-brief { margin-block: 20px; }
  .receipt-wrap { gap: 28px; padding: 24px; }
}
@media (max-width: 760px) {
  .scene-body { padding: 20px 16px; }
  .villain[data-decay] .v-hud { padding: 14px 16px; gap: 10px; }
  .department-title > strong { font-size: 23px; }
  .department-title > span { font-size: 9px; letter-spacing: .08em; }
  .department-route { gap: 3px; }
  .department-route li { width: 15px; height: 23px; font-size: 8px; }
  .honest-bar { grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; padding: 9px 12px; }
  .honest-bar > * { grid-column: auto; }
  .honest-step, .honest-ledger { font-size: 13px; }
  .honest-ledger { text-align: right; white-space: nowrap; }
  .honest-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .honest-actions .button { font-size: 16px; padding: 8px 6px; min-height: 48px; width: 100%; }
  .preroll, .fair-exit { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; }
  .preroll-title, .fair-title { font-size: 36px; margin-bottom: 18px; }
  .game-kicker { font-size: 10px !important; margin-bottom: 16px !important; }
  .game-brief { font-size: 14px; gap: 16px; padding-block: 14px; margin-block: 20px; }
  .preroll-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .preroll-actions .button { font-size: 17px; }
  .v1-row, .v2-row { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .v1-card, .v2-card { padding: 24px 20px; border-radius: 14px; }
  .v1-card h3, .v2-card h3 { font-size: 28px; }
  .v1-card p, .v2-card p { font-size: 14px; }
  .v1-btn, .v2-btn { font-size: 15px; padding-inline: 16px; }
  .desk-agent, .v2-doris { padding: 18px 4px 0; border-left: 0; border-top: 1px solid #989bc355; }
  .agent-identity { display: flex; gap: 14px; }
  .agent-identity .doris-avatar { width: 76px; height: 76px; margin: 0; border-width: 3px; }
  .desk-agent blockquote { font-size: 20px; margin-block: 16px; }
  .v2-doris { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .v2-doris .doris-avatar { width: 82px; height: 82px; border-width: 3px; box-shadow: 4px 4px 0 #dac9de; }
  .v2-doris b { font-size: 20px; }
  .v2-doris blockquote { font-size: 18px; }
  .v3-top { padding: 8px 16px; font-size: 9px; }
  .v3-top span { display: none; }
  .v3-layout, .v3-layout:has(.v3-manage:not(.open)), .v3-layout:has(.v3-manage.open) { padding: 16px; gap: 20px; grid-template-columns: minmax(0, 1fr); }
  .v3-panel { padding: 20px 16px; }
  .v3-panel h3 { font-size: 24px; }
  .v3-panel p { font-size: 13px; }
  .v3-jar { width: 76px; height: 76px; margin-left: 10px; }
  .v3-btn { font-size: 12px; padding-inline: 10px; }
  .v3-intake { padding: 0 8px 8px; }
  .v3-intake > strong { font-size: 72px; }
  .v3-intake h4 { max-width: none; font-size: 24px; }
  .v3-service { font-size: 10px; gap: 10px; }
  .v3-actions #v3-count { flex: 0 0 100%; }
  .v3-tabs button { min-height: 40px; }
  #v4-pops:not(:empty), #v3-dialog:not(:empty) { padding: 12px; }
  .v4-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v4-banner { font-size: 24px; padding: 10px 6px; }
  .v4-body { padding: 12px; }
  .v4-table, .v4-row, .v4-fine { font-size: 11px; }
  .v4-burst { width: 74px; height: 74px; top: 40px; }
  .v4-cap-lead { font-size: 14px; }
  .v5-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .v5-paper { padding: 20px 16px 20px 26px; }
  .v5-paper h3 { font-size: 15px; padding-right: 16px; }
  .v5-scroll { height: 190px; }
  .v5-form { font-size: 12px; }
  .v5-side { transform: none; }
  .v5-side .doris-avatar { float: right; width: 100px; height: 100px; margin: 0 0 12px 12px; }
  .file-privacy { clear: both; }
  .v6-parch { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 18px 16px; border-width: 7px; }
  .v6-book { font-size: 11px; line-height: 1.4; }
  .v6-parch .dc { font-size: 21px; }
  .v6-instructions { font-size: 14px; }
  .v6-actions { gap: 12px; }
  .v6-remain { font-size: 15px; padding-inline: 14px; }
  .v6-illumination { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v6-roundel { width: 186px; height: 186px; }
  .v6-roundel .doris-avatar { width: 174px; height: 174px; }
  .v6-marg { flex-direction: row; max-width: 280px; }
  .v6-marg > .raster-art { width: 76px; height: 100px; }
  .receipt-wrap { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; gap: 28px; }
  .debrief h2 { font-size: 38px; }
  .debrief-line { font-size: 17px; }
  .run-totals { gap: 12px; }
  .run-totals dd { font-size: 28px; }
  .receipt-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .receipt { transform: none; padding: 24px 16px 30px; }
  .receipt-table { font-size: 12px; }
  .receipt-table td small { font-size: 10px; }
  .stamp-card { padding: 20px 14px; gap: 18px; }
  .v-stamp { font-size: 24px; padding: 14px 12px; }
  .v-toast { font-size: 14px; padding: 10px 14px; }
}
@media (max-width: 380px) {
  .villain[data-decay] .v-hud { grid-template-columns: 1fr; gap: 10px; padding: 12px 16px; }
  .department-route { gap: 5px; }
  .department-route li { width: 22px; height: 16px; font-size: 8px; }
  .department-title > strong { font-size: 23px; }
  .honest-bar { padding-inline: 10px; }
  .honest-actions .button { font-size: 15px; }
  .preroll, .fair-exit { padding: 22px 18px; }
  .preroll-title, .fair-title { font-size: 32px; }
  .game-brief { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .game-brief b { display: inline; margin-right: 6px; }
  .v2-doris { grid-template-columns: minmax(0, 1fr); }
  .v3-tabs button { font-size: 10px; }
  .v3-jar { float: none; width: 96px; height: 96px; margin: 0 0 16px; }
  .v5-paper::before { display: none; }
  .v5-paper { padding: 20px 14px; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .villain[data-decay] .v-hud { padding-block: 10px; }
  .scene-body { justify-content: flex-start; padding: 18px 24px; }
}

@media (min-width: 761px) {
  .v5-paper { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .v5-paper > h3, .v5-paper > p { grid-column: 1 / -1; }
  .v5-document { min-width: 0; }
  .v5-form { margin: 0; padding-left: 20px; border-left: 1px dashed #aa9c7e; }
  .v5-sigrow { gap: 4px; }
  .v5-sigrow > label { margin-bottom: 0; }
  .v5-form .v5-pencil { display: none; }
  .v5-scroll { height: clamp(220px, 29vh, 340px); }
  .v5-page { margin-bottom: 0; line-height: 1.4; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .villain[data-decay] .v-hud { padding: 10px 24px; gap: 18px; }
  .department-title > strong { font-size: 21px; }
  .department-brand > img { width: 28px; height: 28px; }
  .scene-body { padding: 16px 24px; }
  .preroll, .fair-exit { padding: 24px 36px; gap: 36px; }
  .preroll-title, .fair-title { font-size: 38px; margin-bottom: 16px; }
  .preroll-copy > p:not(.game-kicker) { font-size: 17px; }
  .game-kicker { margin-bottom: 12px !important; }
  .game-brief { margin: 16px 0; padding-block: 12px; font-size: 14px; }
  .v2-doris { gap: 12px; }
  .v2-doris .doris-avatar { width: 114px; height: 114px; }
  .v2-doris blockquote { font-size: 19px; margin-block: 8px; }
  .v2-doris b { font-size: 20px; }
  .v3-layout, .v3-layout:has(.v3-manage:not(.open)) { padding: 18px 24px; }
  .v3-panel { padding: 20px; }
  .v3-panel h3 { font-size: 24px; margin-bottom: 12px; }
  .v3-panel p { font-size: 12px; margin-bottom: 14px; }
  .v3-jar { width: 88px; height: 88px; }
  .v3-foot { margin-top: 16px !important; font-size: 11px !important; }
  .v3-list { height: 145px; }
  .v3-layout:has(.v3-manage.open) { padding-block: 14px; }
  .v3-layout:has(.v3-manage.open) .v3-panel { padding: 16px 20px; }
  .v4-banner { font-size: 26px; padding: 7px; margin-bottom: 12px; }
  .v4-body { padding: 10px; }
  .v4-table, .v4-row { font-size: 11px; }
  .v4-table td { padding-block: 3px; }
  .v4-row { margin-top: 8px; }
  .v4-btn { padding: 5px 10px; min-height: 28px; }
  .v4-fine { font-size: 10px; }
  .v4-burst { width: 80px; height: 80px; }
  .v5-layout { gap: 20px; grid-template-columns: minmax(0, 3.1fr) minmax(205px, 1fr); }
  .v5-paper { padding: 16px 18px 16px 30px; gap: 0 16px; }
  .v5-paper h3 { font-size: 15px; margin-bottom: 8px; }
  .v5-scroll { height: 200px; }
  .v5-form { padding-left: 14px; font-size: 11px; }
  .v5-form label { margin-bottom: 6px; }
  .v5-rules { font-size: 11px; }
  .v5-btn { font-size: 10px; padding-inline: 8px; min-height: 30px; }
  .v5-side { padding: 14px; font-size: 11px; line-height: 1.4; }
  .v5-side .doris-avatar { float: right; width: 76px; height: 76px; margin: 0 0 10px 10px; border-width: 3px; }
  .v5-side h4 { font-size: 20px; }
  .file-role { font-size: 9px; }
  .file-label { margin-bottom: 10px; font-size: 9px; }
  .file-privacy { font-size: 10px; }
  .v6-parch { padding: 14px 22px; gap: 12px 28px; grid-template-columns: minmax(0, 1.7fr) minmax(190px, .8fr); border-width: 8px; }
  .v6-book { font-size: 11px; padding-bottom: 8px; }
  .v6-parch .dc { font-size: 20px; line-height: 1.4; }
  .v6-instructions { font-size: 13px; margin-top: 12px !important; line-height: 1.4; }
  .v6-actions { margin-top: 16px; gap: 12px; }
  .v6-roundel { width: 146px; height: 146px; }
  .v6-roundel .doris-avatar { width: 134px; height: 134px; }
  .v6-marg { font-size: 11px; }
  .v6-marg > .raster-art { width: 60px; height: 80px; }
  .receipt-wrap { align-items: start; padding: 24px; gap: 32px; }
  .debrief h2 { font-size: 36px; margin-bottom: 16px; }
  .debrief-line { font-size: 16px; }
  .run-totals { padding-block: 12px; margin: 18px 0; }
  .receipt-actions { margin-top: 18px; }
  .receipt-actions .button { font-size: 16px; padding-inline: 12px; }
  .debrief-note { font-size: 13px; }
  .receipt { padding: 18px 18px 28px; }
  .receipt-head { font-size: 9px; margin-bottom: 12px; }
  .receipt-approved { font-size: 15px; margin-bottom: 12px; }
  .receipt-table { font-size: 11px; }
  .receipt-table th, .receipt-table td { padding-block: 5px; }
  .receipt-signature { margin-block: 14px; }
}
@media (max-width: 760px) {
  .villain[data-decay="6"] .scene-body { padding: 12px 8px; }
  .v6-parch { padding: 14px 10px; border-width: 5px; gap: 14px; }
  .v6-book { font-size: 10px; letter-spacing: .08em; padding-bottom: 10px; }
  .v6-parch .dc { font-size: 18px; line-height: 1.42; }
  .v6-parch .dc::first-letter { font-size: 48px; }
  .v6-instructions { font-size: 13px; line-height: 1.4; margin-top: 12px !important; }
  .v6-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .v6-actions.swap .v6-exit { order: -1; }
  .v6-actions button { min-height: 44px; padding: 8px 6px; font-size: 13px; }
  .preroll-copy { display: flex; flex-direction: column; }
  .preroll-actions { order: 1; margin-top: 12px; }
  .game-brief { order: 2; }
  .v2-doris { order: -1; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding-top: 0; border-top: 0; }
  .v2-doris .doris-avatar { width: 64px; height: 64px; }
  .v2-doris small, .v2-doris .doris-caption { display: none; }
  .v2-doris b { font-size: 16px; margin-top: 0; }
  .v2-doris blockquote { font-size: 15px; margin: 6px 0 0; }
  .v2-card .v1-eyebrow { display: none; }
  .v2-row { gap: 18px; }
  .debrief-line { font-size: 16px; }
  .run-totals { margin-block: 20px; }
  .v3-intake { display: none; }
  .v2-card { padding-block: 20px; }
  .v2-card h3 { font-size: 25px; margin-bottom: 12px; padding-right: 0; }
  .v2-card .v2-btn { font-size: 14px; }
  .v2-card .v2-ladder { margin-top: 16px; }
  .v2-decline { font-size: 13px; }
}
@media (max-width: 380px) {
  .v3-jar { float: right; width: 64px; height: 64px; margin: 0 0 12px 12px; }
  .v3-panel h3 { font-size: 21px; }
  .v3-foot { font-size: 11px !important; }
}

/* Era detail, October 29. All misbehavior is contained inside the villain. */
.saas-workspace, .saas-trust { width: 100%; max-width: 1080px; margin: 0 auto; color: #696887; font: 11px/1.4 Arial, sans-serif; }
.saas-workspace { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 20px; }
.saas-workspace b { font-size: 17px; letter-spacing: -.05em; color: #5148ac; margin-right: 8px; }
.saas-plan { background: #e4dfff; color: #6250a4; border: 1px solid #cfc5f1; border-radius: 20px; padding: 5px 9px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.saas-trust { margin-top: 20px; text-align: center; }
.saas-trust span { display: block; margin-top: 3px; color: #89869c; font-size: 10px; }
.saas-spark { color: #8253ef; font-size: 16px; }
.saas-insight { display: flex; gap: 10px; align-items: center; padding: 11px 14px; margin: 0 0 18px; background: #f3efff; border: 1px solid #ded6f5; border-radius: 8px; font: 13px/1.4 Arial, sans-serif; color: #60577c; }
.saas-insight > span:first-child { font-size: 25px; color: #895bc8; }
.saas-insight b { color: #594e82; }
.saas-chat { align-self: center; padding: 0; border: 1px solid #d5d3ea; border-radius: 16px; background: #fff; box-shadow: 0 14px 40px #3b365e1c; overflow: hidden; color: #35334f; }
.chat-top { display: flex; gap: 12px; align-items: center; padding: 16px; background: linear-gradient(110deg,#6851b9,#514993); color: #fff; }
.chat-top .doris-avatar { width: 48px; height: 48px; border: 2px solid #fff; border-radius: 50%; flex: none; }
.chat-top h4 { font: 700 17px/1.2 Arial,sans-serif; margin: 0 0 4px; }
.chat-top small { display: block; font: 11px/1.35 Arial,sans-serif; opacity: .85; }
.chat-online { display: inline-flex; gap: 4px; align-items: center; font: 10px Arial,sans-serif; margin-left: 5px; opacity: .85; }
.chat-online::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #a5f5b4; }
.chat-unread { display: grid; place-items: center; margin-left: auto; width: 21px; height: 21px; border-radius: 50%; background: #e7dbff; color: #514993; font: 700 10px Arial,sans-serif; }
.chat-messages { padding: 18px 16px 8px; }
.chat-you { width: fit-content; margin: 0 0 16px auto; padding: 10px 13px; border-radius: 12px 12px 2px 12px; background: #6552ba; color: #fff; font: 14px/1.4 Arial,sans-serif; }
.chat-bubble { position: relative; background: #f0eef7; border: 1px solid #e5e1ef; border-radius: 2px 12px 12px; padding: 8px 14px 12px; }
.chat-bubble::before { content: ''; position: absolute; left: -7px; top: -1px; border-top: 8px solid #e5e1ef; border-left: 7px solid transparent; }
.chat-author { display: block; font: 700 10px/1.2 Arial,sans-serif; color: #736a93; }
.saas-chat blockquote { margin: 7px 0 0; font: 14px/1.5 Arial,sans-serif; color: #423d59; }
.chat-receipt { margin: 7px 0 0; font: 10px/1.35 Arial,sans-serif; color: #8a829b; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 14px; }
.chat-suggestions button { color: #6652a8; background: #fff; border: 1px solid #d6cce9; border-radius: 20px; padding: 8px 12px; font: 14px/1.2 Arial,sans-serif; cursor: pointer; }
.chat-suggestions button:hover { background: #eee7fa; }
.chat-suggestions[hidden] { display: none; }
.chat-composer { border-top: 1px solid #ece8f3; padding: 12px 16px 8px; color: #8b839a; font: 11px/1.4 Arial,sans-serif; }
.chat-powered { margin: 0; padding: 0 16px 12px; text-align: left; font: 9px/1.4 Arial,sans-serif; color: #8b839a; }
.v-toast.doris-toast { background: #f4f0fc; color: #423d59; border-color: #b8a6db; border-radius: 12px 12px 2px; font-family: Arial,sans-serif; }
.decline-track { position: relative; width: 100%; height: 34px; margin-top: 8px; }
.decline-track > button { position: absolute; left: 3px; top: 3px; right: auto; margin: 0; width: max-content; max-width: calc(100% - 6px); min-height: 28px; padding: 4px; text-align: left; transition: left 130ms ease-out,top 130ms ease-out; }
.decline-track .v2-decline { font-size: 13px; }
.evade-note { position: absolute; bottom: 0; left: 3px; right: 3px; font: 10px/1.3 Arial,sans-serif; color: #81758e; pointer-events: none; }
.v2-card .v2-ladder { margin-top: 10px; }
.guilt-bubble { position: relative; width: 100%; padding: 16px 18px; background: #fff9; border: 1px solid #cbb4c5; border-radius: 0 14px 14px 14px; }
.guilt-bubble::before { content: ''; position: absolute; top: -10px; left: 22px; width: 18px; height: 18px; background: #f8f2f5; border-left: 1px solid #cbb4c5; border-top: 1px solid #cbb4c5; transform: rotate(45deg); }
.guilt-bubble blockquote { margin-bottom: 10px; }
.v3-certified { margin: 18px 0 0; padding: 10px 0; border-top: 3px double #8c9fb5; font: 700 10px/1.4 Arial,sans-serif !important; letter-spacing: .06em; }
.v3-purposes { padding: 14px; font: 12px/1.5 Arial,sans-serif; color: #445; }
.v3-purposes ol { padding-left: 20px; }
.v3-purposes p { font-size: 12px; }
.v4-taskbar { position: relative; width: 100%; max-width: 1180px; display: flex; align-items: center; gap: 6px; padding: 4px; border: 2px outset #ddd; background: #c0c0c0; margin: 14px auto 0; color: #000; font: 11px Tahoma,Arial,sans-serif; }
.v4-taskbar .v4-btn { min-height: 28px; font-weight: bold; padding: 3px 12px; }
.v4-task { flex: 1; padding: 6px 8px; border: 2px inset #ddd; max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4-clock { margin-left: auto; padding: 6px 10px; border: 2px inset #ddd; white-space: nowrap; }
.v4-start-menu:not([hidden]) { position: absolute; left: -2px; bottom: 100%; display: grid; grid-template-columns: 26px 1fr; width: 230px; border: 2px outset #ddd; background: #c0c0c0; padding: 3px; box-shadow: 3px 3px #0005; z-index: 2; }
.v4-start-menu b { grid-row: span 2; writing-mode: vertical-rl; transform: rotate(180deg); background: #777; color: #fff; padding: 8px 4px; font-size: 16px; }
.v4-start-menu button { border: 0; background: none; text-align: left; font: 12px Tahoma,Arial,sans-serif; padding: 14px 10px; cursor: pointer; }
.v4-start-menu button:hover { background: #000080; color: #fff; }
.window-status { padding: 5px 8px; border: 2px inset #dedede; margin: 3px; color: #333; font: 10px/1.3 Tahoma,Arial,sans-serif; }
.v4-million { display: block; color: #b40000; font: 900 25px/1.05 Barlow,sans-serif; margin: 2px 0 12px; }
#v4-pops > .prize-window { width: min(390px,calc(100% - 24px)); box-shadow: 5px 5px 0 #0005; }
#v4-pops > .prize-window.escaped { position: absolute; left: var(--escape-x) !important; top: var(--escape-y) !important; transition: left 140ms ease-out,top 140ms ease-out; }
.v5-paper > .v5-warrant { grid-column: 1 / -1; margin: 0 0 12px; font: 10px/1.4 'Courier New',monospace; letter-spacing: .05em; color: #7b3c2f; border-block: 3px double #9f8a66; padding-block: 6px; }
.v5-copy-stamp { display: inline-block; border: 2px solid #ad5548; color: #ad5548; font: 700 10px/1.2 'Courier New',monospace; padding: 4px 7px; transform: rotate(-3deg); margin: 0 0 12px; }
.v5-clerk { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 44px; background: #bc974d; color: #382714; border: 3px double #694c25; font: bold 13px Georgia,serif; padding: 3px 8px; cursor: pointer; }
.v5-clerk > .raster-art { width: 36px; height: 36px; object-fit: contain; flex: 0 0 36px; transform-origin: 50% 85%; }
.v5-clerk-note { font-style: italic; margin-top: 10px !important; }
.v5-submit { margin: 8px 0 0; }
#v5-stamp { display: block; margin: 8px 0 0; }
#v5-stamp:empty { display: none; }
#v5-error::before { content: attr(data-verdict); display: block; font-weight: bold; letter-spacing: .06em; margin-bottom: 4px; }
.v6-roundel { padding: 4px; }
.v6-roundel .doris-avatar { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.v6-roundel .doris-sprite { top: -8%; }
.v6-doris-title { margin: 0 !important; text-align: center; font: bold 14px/1.25 Georgia,serif; color: #674024; }
.v6-doris-title small { font-weight: normal; font-style: italic; font-size: 12px; }
.v6-decree { grid-column: 1 / -1; border-top: 3px double #a88c54; padding: 10px 14px 0; text-align: center; font: italic 13px/1.4 Georgia,serif; color: #7d3427; }
.v6-decree.decree-approved { color: #4b5c33; font-weight: bold; }
@media (min-width: 761px) and (max-height: 820px) {
  .saas-workspace, .saas-trust { display: none; }
  .v1-card, .v2-card { padding: 22px 26px; }
  .v1-card h3, .v2-card h3 { font-size: 30px; margin-bottom: 12px; }
  .v1-card p, .v2-card p { font-size: 14px; margin-bottom: 12px; }
  .saas-insight { padding: 8px 10px; font-size: 12px; margin-bottom: 12px; }
  .saas-insight br { display: none; }
  .decline-track { height: 80px; margin-top: 12px; }
  .chat-top { padding: 12px; }
  .chat-top .doris-avatar { width: 40px; height: 40px; }
  .chat-messages { padding: 12px; }
  .chat-you { margin-bottom: 12px; }
  .chat-bubble { padding: 7px 12px 10px; }
  .chat-suggestions { padding: 0 12px 10px; }
  .chat-composer { padding: 10px 12px; }
  .guilt-bubble { padding: 12px; }
  .guilt-bubble b { font-size: 18px; }
  .guilt-bubble blockquote { font-size: 17px; }
  .v6-parch { row-gap: 10px; }
  .v6-decree { padding-top: 8px; font-size: 12px; }
  .v6-illumination { gap: 8px; }
  .v6-doris-title { font-size: 12px; }
  .v6-doris-title small { font-size: 10px; }
}
@media (max-width: 760px) {
  .saas-workspace { gap: 6px; font-size: 9px; margin-bottom: 12px; }
  .saas-plan { display: none; }
  .saas-trust { font-size: 10px; }
  .saas-chat { width: 100%; padding: 0; border: 1px solid #d5d3ea; }
  .saas-insight { font-size: 12px; padding: 10px; }
  .v1-card, .v2-card { padding: 20px 16px; }
  .v1-card .v1-eyebrow { font-size: 9px; letter-spacing: .06em; padding-right: 32px; }
  .decline-track { height: 115px; }
  .v2-doris { grid-template-columns: 48px minmax(0,1fr); gap: 10px; }
  .v2-doris .doris-avatar { width: 48px; height: 48px; }
  .guilt-bubble { padding: 10px; border-radius: 0 10px 10px; }
  .guilt-bubble::before { display: none; }
  .guilt-bubble b { font-size: 14px; }
  .guilt-bubble blockquote { font-size: 13px; }
  .v4-taskbar { font-size: 10px; }
  .v4-clock { padding-inline: 4px; font-size: 9px; }
  .v4-million { font-size: 22px; }
  .v5-paper > .v5-warrant { font-size: 9px; }
  .v6-decree { padding-inline: 0; font-size: 12px; }
  .v6-doris-title { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .decline-track > button, #v4-pops > .prize-window.escaped { transition: none; }
}

/* Ben's browser refinements: first-person Doris, smaller gaps and raster stamps. */
.villain[data-decay="1"] .doris-sprite, .villain[data-decay="2"] .doris-sprite,
.human-inspector .doris-sprite { top: -9%; }
.v2-offer { display: flex; gap: 18px; align-items: center; }
.v2-offer > button { flex: none; }
.v2-offer > aside { border-left: 1px solid #d5bccd; padding-left: 18px; color: #775268; display: grid; gap: 3px; }
.v2-offer small { font: 700 9px/1.3 Arial,sans-serif; letter-spacing: .04em; }
.v2-offer b { font: italic 15px/1.3 Georgia,serif; }
.v2-offer span { font: italic 12px/1.3 Georgia,serif; }
.v3-intake h4, .v3-certified { text-wrap: balance; }
.keep-together { white-space: nowrap; }
.receipt-signature { text-align: left; }

/* Intro has no run statistics until Begin; the honest actions remain available. */
.honest-bar.is-preroll { grid-template-columns: minmax(0, 1fr); }
.honest-bar.is-preroll .honest-actions { grid-column: 1; justify-self: end; }
.honest-bar [hidden] { display: none; }

/* A single receipt header replaces stacked headings; all six rows stay readable. */
.receipt-wrap { padding: 18px; gap: 32px; }
.receipt { padding: 18px 18px 24px; }
.receipt-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.receipt-header .receipt-head { margin: 0; text-align: left; font-size: 13px; line-height: 1.25; letter-spacing: 0; }
.receipt-header .receipt-approved { flex: none; margin: 0; font-size: 13px; padding: 6px 8px; letter-spacing: .03em; }
.receipt-table th, .receipt-table td { padding-block: 4px; }
.receipt-table tfoot td { padding-top: 8px; }
.receipt-signature { margin: 12px 0 8px; }
.receipt-thanks { margin-top: 6px; }

/* The manuscript finale is a directory puzzle, not another decline ladder. */
.v6-cancellation { grid-template-columns: minmax(0, 1.8fr) minmax(180px, .8fr); align-items: start; gap: 16px 28px; padding: 20px 26px; font-size: 16px; line-height: 1.45; }
.v6-cancellation .v6-book { padding-bottom: 8px; }
.v6-cancellation h3 { font: bold clamp(24px, 2vw, 30px)/1.15 Georgia,serif; color: #52381e; margin: 0 0 14px; }
.v6-cancellation .dc { font-size: 21px; line-height: 1.4; }
.v6-cancellation .dc::first-letter { font-size: 48px; line-height: 40px; }
.v6-cancellation .v6-illumination { align-self: center; gap: 10px; }
.v6-cancellation .v6-roundel { width: clamp(144px, 15vw, 210px); height: auto; aspect-ratio: 1; }
.v6-cancellation .v6-clerk-remark { margin: 0; padding: 12px 0 0; border-top: 1px solid #a88c54; font: italic 15px/1.45 Georgia,serif; color: #674024; }
.v6-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 18px; }
.v6-services button { min-width: 0; display: grid; justify-items: start; gap: 4px; text-align: left; padding: 14px 12px; background: #f6ebcf; border: 2px solid #9d7938; box-shadow: 3px 3px #8a6a2f33; color: #52381e; font: inherit; cursor: pointer; }
.v6-service-number { font-size: 13px; color: #8a2e1e; border-bottom: 1px solid #b9a078; width: 100%; padding-bottom: 6px; margin-bottom: 4px; }
.v6-services strong { font-size: 22px; }
.v6-services small { font-size: 13px; }
.v6-cancellation .v6-fine { font-size: 13px; color: #6b4e22; margin-bottom: 0; }
.v6-channel-nav { display: flex; gap: 8px; border-bottom: 1px solid #b9a078; padding-bottom: 10px; margin-bottom: 14px; }
.v6-channel-nav button { flex: 1; min-height: 40px; border: 1px solid #9d7938; color: #674024; background: transparent; font: bold 15px Georgia,serif; cursor: pointer; }
.v6-channel-nav [aria-current] { color: #fff3ce; background: #6b4e22; }
.v6-route-action { min-height: 44px; padding: 9px 14px; background: #d3b361; color: #3b2a14; border: 2px solid #856124; font: bold 15px/1.3 Georgia,serif; cursor: pointer; }
.v6-services button:hover, .v6-route-action:hover { background: #e9cc81; }
.v6-cancellation button:focus-visible, .v6-directory summary:focus-visible { outline: 3px solid #6b4e22; outline-offset: 3px; }
.v6-cancellation .v6-route-error { margin: 10px 0 0; color: #8a2e1e; font-size: 14px; }
.v6-petition { display: grid; gap: 8px; margin: 16px 0; padding: 16px; border: 1px solid #b9a078; background: #fff3d3; }
.v6-petition span { font-size: 13px; }
.v6-petition strong { font-size: 20px; }
.v6-return { padding: 12px 0; margin-bottom: 10px; border-block: 3px double #a88c54; }
.v6-return strong { color: #8a2e1e; letter-spacing: .08em; font-size: 14px; }
.v6-return p { margin: 6px 0 0; }
.v6-office-notice { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; margin-bottom: 14px; }
.v6-office-notice > div { display: grid; justify-items: center; gap: 4px; align-content: center; }
.v6-office-notice img { width: 74px; height: 86px; object-fit: contain; }
.v6-office-notice strong { font-size: 14px; letter-spacing: .12em; color: #8a2e1e; }
.v6-cancellation dl { margin: 0; font-size: 14px; font-variant-numeric: lining-nums; }
.v6-cancellation dl > div { display: grid; gap: 2px; padding: 5px 0; border-bottom: 1px solid #b9a07866; }
.v6-cancellation dt { font-weight: bold; }
.v6-cancellation dd { margin: 0; }
.v6-directory { margin: 12px 0; border: 1px solid #b9a078; background: #f6ebcf; padding: 0 12px; }
.v6-directory summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 14px; }
.v6-directory dl > div { grid-template-columns: 1fr 1fr; gap: 12px; }
.v6-directory p { font-size: 13px; margin: 10px 0; }
.v6-route-log { grid-column: 1 / -1; border-top: 3px double #a88c54; padding-top: 10px; font: 13px/1.4 Georgia,serif; color: #674024; }
.v6-route-log span { display: block; font-style: italic; margin-top: 3px; }

/* Trap 2: a fixed editor. Doris changes the wording, never the target position. */
.villain[data-decay="2"] .scene-body { animation: none; }
.v2-letter-layout { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(230px, 1fr); gap: 32px; align-items: center; width: 100%; max-width: 1160px; margin: auto; font-family: Arial,sans-serif; }
.v2-editor { background: #fff; border: 1px solid #e7dfed; border-radius: 18px; padding: 22px 24px; box-shadow: 0 16px 30px #493f6820; min-width: 0; }
.letter-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; color: #7d5f7a; font: 700 9px/1.3 Arial,sans-serif; letter-spacing: .09em; margin-bottom: 14px; }
.letter-toolbar span:last-child { font-weight: normal; letter-spacing: 0; }
.v2-editor h3 { font: 700 27px/1.15 Arial,sans-serif; color: #242534; margin: 0 0 8px; }
.letter-draft { padding: 16px; background: #fffdf8; border: 1px solid #dfd7cd; border-top: 3px solid #c6a9c0; border-radius: 2px; }
.letter-salutation, .letter-signoff { font: italic 16px/1.3 Georgia,serif; color: #685564; margin: 0; }
.letter-signoff { margin-top: 12px; }
.letter-draft ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; list-style: none; padding: 0; margin: 8px 0 0; }
.letter-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 53px; padding-block: 4px; border-bottom: 1px solid #e9e0db; font: 13px/1.3 Arial,sans-serif; color: #343342; }
.letter-line.empty { font-size: 12px; color: #958a95; }
.letter-line.empty span:first-child { white-space: nowrap; }
.letter-rule { flex: 1; border-top: 1px dotted #cabfc8; }
.letter-line > div { min-width: 0; }
.letter-line del { display: block; font-size: 12px; color: #8a7c85; text-decoration-color: #b66c79; }
.letter-line strong { display: block; font-weight: 400; color: #92374d; }
.letter-line button { flex: none; min-height: 44px; padding: 8px 10px; border: 1px solid #cda3af; background: #fff; color: #7d3449; border-radius: 5px; font: 12px/1.25 Arial,sans-serif; cursor: pointer; }
.letter-line button:hover { background: #f8e6eb; }
.letter-line .letter-choice { min-width: 0; flex: 0 1 auto; text-align: left; border-color: #beb2d5; background: #f5f1fc; color: #504174; font-size: 13px; box-shadow: 0 2px #d7cce9; }
.letter-line .letter-choice:hover { background: #e9dff8; }
.letter-line.empty small { color: #7d5f7a; }
.letter-line.restored { color: #365e50; }
.letter-line small { flex: none; font: 10px/1.3 Arial,sans-serif; color: #6f8a7f; }
.letter-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.letter-send-row .v2-btn { background: #6951a3; font-size: 14px; padding: 12px 16px; }
.letter-send-row .v2-btn:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; }
.letter-edit-count { flex: 1; margin: 0; font: 12px/1.4 Arial,sans-serif; color: #7d5f7a; }
.letter-error { flex: 1; border-left: 3px solid #b25872; padding-left: 10px; margin: 0; font: 13px/1.4 Arial,sans-serif; color: #8a344b; }
.v2-letter-doris { display: grid; gap: 18px; align-content: center; justify-items: start; min-width: 0; }
.v2-letter-doris .doris-avatar { width: 140px; height: 140px; border: 5px solid #fff; border-radius: 50%; box-shadow: 7px 7px #dac9de; }
.v2-letter-doris .guilt-bubble { padding: 16px; }
.v2-letter-doris small { display: block; font: 700 9px/1.4 Arial,sans-serif; letter-spacing: .1em; color: #734666; }
.v2-letter-doris b { display: block; margin: 8px 0; font: 800 21px/1.15 Barlow,sans-serif; color: #422b40; }
.v2-letter-doris blockquote { margin: 0; font: 500 20px/1.35 Barlow,sans-serif; color: #634660; }
.v2-letter-doris .doris-caption { margin: 14px 0 0; font: 11px/1.4 Arial,sans-serif; color: #8a6e83; }
.v2-editor button:focus-visible { outline: 3px solid #6c4f97; outline-offset: 3px; }
@media (min-width: 761px) and (max-height: 820px) {
  .v2-letter-layout { gap: 24px; grid-template-columns: minmax(0, 2.3fr) minmax(220px, 1fr); }
  .v2-editor { padding: 16px 18px; }
  .v2-editor h3 { font-size: 24px; }
  .letter-toolbar { margin-bottom: 10px; }
  .letter-draft { padding: 12px 14px; }
  .letter-line { min-height: 48px; padding-block: 5px; font-size: 14px; }
  .letter-line.empty { min-height: 28px; }
  .letter-send-row { margin-top: 12px; }
  .v2-letter-doris .doris-avatar { width: 110px; height: 110px; }
  .v2-letter-doris blockquote { font-size: 18px; }
}
@media (max-width: 760px) {
  .villain[data-decay="2"] .scene-body { padding: 10px 8px; }
  .v2-letter-layout { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .v2-letter-doris { order: -1; position: sticky; top: 0; z-index: 2; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px; background: #f1e7ee; border-bottom: 1px solid #cbb4c5; border-radius: 8px; }
  .v2-letter-doris .doris-avatar { width: 48px; height: 48px; border-width: 2px; box-shadow: 3px 3px #dac9de; }
  .v2-letter-doris .guilt-bubble { padding: 0; border: 0; background: transparent; }
  .v2-letter-doris .guilt-bubble::before { display: none; }
  .v2-letter-doris small, .v2-letter-doris .doris-caption { display: none; }
  .v2-letter-doris b { font-size: 14px; margin: 0 0 5px; }
  .v2-letter-doris blockquote { font-size: 14px; line-height: 1.3; }
  .v2-editor { padding: 14px 10px; border-radius: 10px; }
  .letter-draft ol { grid-template-columns: minmax(0, 1fr); }
  .v2-editor h3 { font-size: 22px; }
  .letter-toolbar { margin-bottom: 10px; font-size: 8px; }
  .letter-toolbar span:last-child { display: none; }
  .letter-draft { padding: 12px 10px; }
  .letter-line { flex-wrap: wrap; gap: 6px; padding-block: 10px; font-size: 14px; }
  .letter-line > div { flex: 1 0 100%; }
  .letter-line button { margin-left: auto; }
  .letter-line.restored { display: block; }
  .letter-line.restored small { display: block; margin-top: 4px; }
  .letter-line.empty { flex-wrap: nowrap; }
  .letter-send-row { gap: 12px; }
  .letter-send-row .v2-btn { width: 100%; }
  .letter-edit-count { text-align: left; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .receipt-wrap { padding: 0 4px; gap: 28px; align-items: center; }
  .receipt { padding: 12px 16px 20px; transform: none; }
  .receipt-header { margin-bottom: 10px; }
  .receipt-table { font-size: 11px; line-height: 1.35; }
  .receipt-table th, .receipt-table td { padding-block: 3px; }
  .receipt-table td small { font-size: 9px; margin-top: 1px; }
  .receipt-signature { font-size: 18px; margin-block: 10px 6px; }
  .receipt-thanks { font-size: 8px; }
  .v6-cancellation { padding: 14px 18px; gap: 12px 24px; font-size: 15px; }
  .v6-cancellation h3 { font-size: 23px; margin-bottom: 10px; }
  .v6-cancellation .v6-roundel { width: 142px; }
  .v6-cancellation .v6-clerk-remark { font-size: 13px; }
  .v6-cancellation .dc { font-size: 18px; }
  .v6-services { margin-block: 14px; }
}
@media (max-width: 760px) {
  .honest-bar.is-preroll .honest-actions { width: 100%; }
  .receipt-wrap { padding: 14px 6px; gap: 24px; }
  .villain[data-decay="6"] .scene-body { padding: 10px 6px; }
  .v6-cancellation { grid-template-columns: minmax(0, 1fr); padding: 12px 10px; gap: 16px; border-width: 5px; font-size: 15px; }
  .v6-cancellation h3 { font-size: 22px; }
  .v6-cancellation .dc { font-size: 17px; }
  .v6-services { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-block: 16px; }
  .v6-services button { grid-template-columns: 20px 55px minmax(0, 1fr); align-items: center; min-height: 48px; gap: 8px; padding: 8px; }
  .v6-services .v6-service-number { border: 0; padding: 0; margin: 0; font-size: 12px; }
  .v6-services strong { font-size: 16px; }
  .v6-services small { font-size: 12px; line-height: 1.3; }
  .v6-cancellation .v6-illumination { grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 10px 12px; }
  .v6-cancellation .v6-roundel { grid-row: 1 / 3; width: 80px; }
  .v6-cancellation .v6-doris-title { text-align: left; justify-self: start; font-size: 13px; }
  .v6-cancellation .v6-clerk-remark { font-size: 13px; padding-top: 8px; }
  .v6-office-notice { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
  .v6-office-notice img { width: 62px; height: 76px; }
  .v6-channel-nav { gap: 6px; }
  .v6-channel-nav button { min-height: 44px; }
  .v6-directory dl > div { grid-template-columns: 1fr; gap: 2px; }
}
.villain.has-swarm { overflow: hidden; }
.saas-swarm { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.saas-pop { position: absolute; width: min(370px,calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; padding: 22px; border: 1px solid #d6c6f0; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px #3926583d,0 2px 0 #b4a0d3; color: #2c273a; font: 14px/1.5 Arial,sans-serif; pointer-events: auto; transform: rotate(var(--window-tilt,0deg)); }
.saas-pop-label { margin: 0 38px 12px 0; color: #78609c; font: 700 10px/1.3 Arial,sans-serif; letter-spacing: .07em; }
.saas-pop h3 { font: 700 28px/1.15 Arial,sans-serif; margin: 0 0 12px; }
.saas-pop p { margin: 0 0 16px; }
.saas-pop .v1-btn { width: 100%; font-size: 14px; }
.saas-pop .v1-link { display: block; margin: 12px 0 8px; }
.saas-pop > small { display: block; margin: -8px 0 14px; font: 12px/1.4 Arial,sans-serif; color: #6a5b80; }
.v-stamp.raster-stamp { position: relative; width: 100%; padding: 0; border: 0; background: none; color: #2e7d74; }
.v-stamp-layer.bad .raster-stamp { color: #c43d3d; }
.stamp-image { display: block; width: 100%; height: auto; }
.stamp-fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 900 24px/1.1 Barlow,sans-serif; }
.art-loaded > .stamp-fallback { display: none; }
.stamp-detail { margin: 0; font: 400 14px/1.45 Barlow,sans-serif; color: #15252b; }
.human-inspector { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.human-inspector .doris-avatar { width: 48px; height: 48px; flex: none; }
.human-inspector p { margin: 0; font-size: 12px; line-height: 1.45; }
.human-inspector b { display: block; margin-bottom: 4px; }
.v4-humanity h3 { font: 700 17px/1.3 Tahoma,Arial,sans-serif; margin: 0 0 14px; }
.v4-human-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.v4-humanity .v-error { margin: 0 0 10px; }
.v4-human-choice { display: flex; align-items: flex-start; gap: 6px; border: 2px outset #ddd; background: #e8e7e2; color: #111; padding: 10px 8px; font: 12px/1.4 Tahoma,Arial,sans-serif; text-align: left; cursor: pointer; }
.v4-human-choice span { font-size: 17px; line-height: 1; }
.v4-human-choice.on { border-style: inset; background: #dce8f6; }
.v4-humanity .v4-cap-note { margin: 10px 0 0; }
@media (max-width: 760px) {
  .v2-offer { gap: 10px; align-items: stretch; flex-direction: column; }
  .v2-offer > aside { border-left: 0; padding-left: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
  .v2-offer small { font-size: 8px; }
  .v2-offer b { font-size: 12px; }
  .saas-pop { padding: 18px; }
  .saas-pop h3 { font-size: 24px; }
  .v4-human-grid { grid-template-columns: 1fr; }
  .v4-human-choice { padding: 8px; }
  .v4-humanity .v4-body { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .saas-pop { transform: none; } }


/* BT-67: dense consent desk, intrusive ads, compact departure artifacts. */
.v3-layout, .v3-layout:has(.v3-manage:not(.open)), .v3-layout:has(.v3-manage.open) {
  align-items: center; padding: 18px 24px; gap: 24px; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
}
.v3-intro-panel { padding: 20px; align-self: center; }
.v3-intro-panel h3 { font-size: 25px; margin-bottom: 12px; }
.v3-intro-panel > p { font-size: 13px; line-height: 1.45; margin: 0 0 14px; }
.v3-jar { width: 116px; height: 116px; margin: 0 0 10px 14px; }
.v3-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; clear: both; }
.v3-options-grid { margin-top: 8px; }
.v3-choice { appearance: none; border: 1px solid #506078; border-radius: 2px; min-height: 44px; padding: 9px 10px; font: 700 12px/1.25 Arial,sans-serif; box-shadow: inset 0 1px #ffffff88,0 2px #2b3e5544; cursor: pointer; }
/* The juicy red button does everything it can to get clicked. Its box stays
   still, so the glow, ring, shine and sparkles do the moving. */
.v3-choice.danger { position: relative; z-index: 1; color: #fff; border-color: #8a0f2b; background: linear-gradient(110deg, transparent 38%, #ffffff66 50%, transparent 62%) 100% 0 / 260% 100% no-repeat, linear-gradient(#ea3556, #c41c41 52%, #a1122f); text-shadow: 0 1px 1px #5e0a1c; box-shadow: inset 0 1px #ffffff99, inset 0 -3px 5px #6d0c2380, 0 2px #6d0c23, 0 0 16px 4px #ff2f55a6; }
.v3-choice.danger::after { content: ''; position: absolute; inset: -1px; border: 2px solid #ff4a6b; border-radius: inherit; opacity: 0; pointer-events: none; }
.v3-choice.danger > i { position: absolute; width: 14px; height: 14px; background: #fff3b0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; pointer-events: none; }
.v3-choice.danger > i:nth-of-type(1) { left: -6px; top: -7px; }
.v3-choice.danger > i:nth-of-type(2) { right: 14%; top: -8px; }
.v3-choice.danger > i:nth-of-type(3) { right: -6px; bottom: -6px; }
.v3-choice.danger > i:nth-of-type(4) { left: 18%; bottom: -8px; }
.v3-choice.reassuring { background: #d8f3da; color: #174b25; border-color: #599168; }
.v3-choice.urgent { background: #ffe75d; color: #432900; border-color: #bd921a; }
.v3-choice.neutral { background: #d8e2ef; color: #223b59; }
.v3-choice.assuring { background: #326db9; color: white; }
.v3-choice:hover { filter: brightness(.95); }
.v3-choice.danger:hover { filter: brightness(1.12) saturate(1.2); }
.v3-choice:focus-visible { outline: 3px solid #15252b; outline-offset: 3px; }
/* Manage preferences starts chained shut. Each half of a chain and the padlock
   are separate pieces, so they can fall away when the third hit lands. */
.v3-locked { position: relative; z-index: 2; }
.v3-locked-label { display: block; transition: filter .3s, opacity .3s; }
.v3-locked.is-locked { background: #c8d3e1; }
.v3-locked.is-locked .v3-locked-label { filter: blur(3px); opacity: .6; }
.v3-chains { position: absolute; inset: 0; pointer-events: none; }
.v3-chain-tile { position: absolute; }
.v3-chain { position: absolute; left: 50%; top: calc(50% - 7px); width: 51%; transform-origin: 0 50%; filter: drop-shadow(0 1px 1px #0005); }
.v3-chain:nth-of-type(2) { --chain-tilt: 9deg; --chain-x: 46px; --chain-spin: 58deg; }
.v3-chain:nth-of-type(3) { --chain-tilt: 189deg; --chain-x: -52px; --chain-spin: 128deg; }
.v3-chain:nth-of-type(4) { --chain-tilt: -9deg; --chain-x: 74px; --chain-spin: 38deg; }
.v3-chain:nth-of-type(5) { --chain-tilt: 171deg; --chain-x: -28px; --chain-spin: 236deg; }
.v3-chain { transform: translate(0, 0) rotate(var(--chain-tilt)); }
.v3-padlock { position: absolute; left: 50%; top: 50%; width: 34px; height: 41px; margin: -22px 0 0 -17px; overflow: visible; filter: drop-shadow(0 2px 2px #0006); transform-origin: 50% 12%; }
.v3-shackle { transform-box: fill-box; transform-origin: 100% 100%; }
/* The lock falls apart in stages, so one press already looks like progress. */
.v3-crack { opacity: 0; }
.v3-locked[data-hits="1"] .v3-crack-1, .v3-locked[data-hits="2"] .v3-crack, .v3-locked[data-hits="3"] .v3-crack { opacity: 1; }
.v3-locked[data-hits="1"] .v3-locked-label { filter: blur(2px); opacity: .72; }
.v3-locked[data-hits="2"] .v3-locked-label { filter: blur(1px); opacity: .85; }
.v3-locked[data-hits="1"] .v3-padlock { transform: rotate(9deg); }
.v3-locked[data-hits="2"] .v3-padlock { transform: translateY(3px) rotate(-16deg); filter: drop-shadow(0 2px 2px #0006) saturate(.55) brightness(.82); }
.v3-locked[data-hits="2"] .v3-shackle { transform: translateY(-4px) rotate(-16deg); }
.v3-sparks { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.v3-sparks i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #ffd65a; box-shadow: 0 0 6px 1px #ff9f1a; }
.v3-intro-panel { overflow: clip; }
.v3-recommendation { display: grid; gap: 4px; margin-top: 16px; padding: 12px; background: #edf2f8; border-left: 3px solid #8ba2c2; font: 12px/1.4 Arial,sans-serif; }
.v3-intro-panel .v3-foot { margin: 12px 0 0 !important; font-size: 11px !important; line-height: 1.4; }
.v3-intake { padding: 6px 0; }
.v3-partner-head { display: flex; align-items: center; gap: 18px; margin: 12px 0; }
.v3-partner-head > strong { font: 900 clamp(56px,5.5vw,88px)/1 Barlow,sans-serif; letter-spacing: -.055em; color: #2f4a6d; flex: none; }
.v3-partner-head h4 { font: 700 21px/1.1 Barlow,sans-serif; margin: 0; max-width: 10em; text-wrap: balance; }
.v3-service { margin-top: 18px; padding-top: 14px; }
.v3-layout:has(.v3-manage.open) { grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); }
.v3-manage { padding: 14px; }
.v3-manage.open { display: flex; flex-direction: column; gap: 8px; }
.v3-tabs { margin: 0; flex: none; }
.v3-tabs button { font-size: 10px; padding: 8px; white-space: normal; min-height: 36px; }
.v3-search { margin: 0; width: 100%; min-height: 34px; }
.v3-search[hidden] { display: none; }
.v3-list { height: clamp(145px,22vh,250px); flex: none; }
.v3-manage .v3-draft-note { font: 11px/1.35 Arial,sans-serif; min-height: 30px; margin: 0; color: #53637b; }
.v3-actions { margin: 0; }
.v3-actions .v3-btn-quiet { flex: 1; }
#v3-count { font: 10px/1.3 Arial,sans-serif; color: #53637b; }
.v3-switch.reverted { box-shadow: 0 0 0 2px #b68a25; }
.v3-purpose-tree { padding: 8px; font: 12px/1.4 Arial,sans-serif; }
.v3-purpose-tree p { font: 11px/1.4 Arial,sans-serif; margin: 0 0 8px; }
.v3-purpose-tree details { border: 1px solid #bac8d9; margin: 5px 0; background: #f3f6fa; }
.v3-purpose-tree details details { margin: 5px 5px 5px 10px; background: #fff; }
.v3-purpose-tree summary { padding: 9px 8px; cursor: pointer; }
.v3-purpose-leaf { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid #dde4ef; }
.v3-purpose-leaf span { flex: 1; }
.v3-purpose-leaf .v3-switch { flex: none; }

.v4-sale { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 12px; margin: -2px -2px 8px; border: 3px double #c11722; background: #ffef00; color: #a70811; transform: rotate(-.5deg); }
.v4-sale > span { grid-column: 1/-1; font: 700 11px/1 Arial,sans-serif; letter-spacing: .12em; }
.v4-sale strong { font: 900 clamp(24px,2.6vw,42px)/1.05 Impact,sans-serif; margin-top: 5px; }
.v4-sale b { max-width: 110px; font: 900 18px/1 Arial,sans-serif; text-align: right; }
.v4-table tr:last-child { background: #fff49c; font-size: 16px; color: #96101b; }
.v4-table tr:last-child td { padding-block: 10px; border-block: 2px dashed #ac1722; }
.v4-row > .v4-btn { min-height: 40px; }
.v4-row > .v4-btn[data-act="t4-leave"] { color: #980a13; background: #fff147; font-weight: 900; border-color: #fff #946f00 #946f00 #fff; }
.v4-exit-ad { display: grid; gap: 0; padding: 0; background: #f2dfa5; color: #133920; box-shadow: 3px 4px #344a3e77; }
.v4-exit-ad > button { position: relative; display: block; border: 0; padding: 0; background: #16492d; color: #fff3aa; width: 100%; min-height: 56px; aspect-ratio: 1280 / 512; cursor: pointer; }
.v4-exit-ad > button:focus-visible { outline: 3px solid #fff500; outline-offset: 3px; }
.v4-exit-ad > button > .raster-art { position: relative; display: block; width: 100%; height: auto; }
.v4-ad-fallback { position: absolute; inset: 0; display: grid; place-content: center; padding: 14px; font: 900 clamp(16px,2vw,28px)/1.2 Impact,sans-serif; text-align: center; }
.art-loaded > .v4-ad-fallback { visibility: hidden; }
.v4-queue-ad { display: grid; gap: 3px; padding: 10px 12px; background: #b40024; color: #fff; border: 3px outset #ff94ad; transform: rotate(1deg); text-align: center; }
.v4-queue-ad b { font: 700 10px/1.2 Arial,sans-serif; }
.v4-queue-ad strong { font: 900 36px/1 Impact,sans-serif; color: #fff200; }
.v4-queue-ad span { font: 12px/1.2 Arial,sans-serif; }
.v4-queue-ad em { padding: 5px; margin-top: 4px; color: #830014; background: #ffec66; font: 700 10px/1.2 Arial,sans-serif; }
.v4-coupon { position: relative; color: #fff3aa; text-align: center; }

.receipt-wrap { padding: 24px 30px; }
.receipt-actions { flex-wrap: wrap; }

/* One tactile tag serves all outcomes; status is live text, never a huge box. */
.stamp-card.departure-tag { position: relative; width: min(500px,100%); aspect-ratio: 1000/371; padding: 0; display: block; background: none; border: 0; box-shadow: none; }
.tag-paper { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(2px 5px 3px #15252b44); }
.tag-paper img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tag-content { position: absolute; inset: 9% 5% 9% 32%; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.tag-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; color: #15252b; }
.tag-status { font: 800 clamp(18px,2.3vw,26px)/1.05 Barlow,sans-serif; text-transform: uppercase; color: #3b5f52; }
.v-stamp-layer.bad .tag-status { color: #9c2b25; }
.departure-tag .stamp-detail { font: 13px/1.25 Barlow,sans-serif; margin: 0; text-wrap: balance; }
.tag-actions { display: flex; align-items: center; gap: 10px; }
.departure-tag .stamp-continue,.stamp-replay { appearance: none; position: static; min-height: 44px; margin: 0; padding: 8px 12px; border: 2px solid #15252b; border-radius: 6px; background: #f5efdf; color: #15252b; cursor: pointer; font: 700 14px/1.2 Barlow,sans-serif; }
.departure-tag .stamp-continue { background: #b54128; color: #fff; }
.departure-tag .stamp-continue:hover { background: #963720; }
.stamp-replay:hover { background: #e6dec9; }
.stamp-replay:focus-visible { outline: 2px solid #15252b; outline-offset: 3px; }
@media(min-width:761px) and (max-height:820px) {
  .v3-layout,.v3-layout:has(.v3-manage:not(.open)),.v3-layout:has(.v3-manage.open) { padding: 12px 22px; gap: 20px; }
  .v3-intro-panel { padding: 16px; }
  .v3-intro-panel h3 { font-size: 23px; }
  .v3-intro-panel > p { font-size: 12px; }
  .v3-intro-panel .v3-foot { font-size: 10px !important; }
  .v3-jar { width: 104px; height: 104px; margin-bottom: 6px; }
  .v3-choice { min-height: 40px; padding: 7px; font-size: 11px; }
  .v3-recommendation { padding: 8px; margin-top: 12px; font-size: 11px; }
  .v3-list { height: 145px; }
  .v3-partner-head { gap: 12px; }
  .v3-partner-head h4 { font-size: 20px; }
  .receipt-wrap { padding: 20px 28px; gap: 28px; }
}
@media(max-width:760px) {
  .v3-layout,.v3-layout:has(.v3-manage:not(.open)),.v3-layout:has(.v3-manage.open) { padding: 14px; gap: 18px; grid-template-columns: minmax(0,1fr); }
  .v3-intro-panel { padding: 14px; }
  .v3-intro-panel h3 { font-size: 23px; }
  .v3-jar { width: 100px; height: 100px; margin-left: 10px; }
  .v3-choice { font-size: 11px; padding: 8px; min-height: 48px; }
  .v3-partner-head > strong { font-size: 64px; }
  .v3-partner-head h4 { font-size: 20px; }
  .v3-manage { padding: 10px; }
  .v3-list { height: 230px; }
  .v3-purpose-tree summary { padding-block: 14px; }
  .v3-purpose-leaf { min-height: 44px; }
  .v3-purpose-tree details details { margin-left: 6px; }
  .v4-sale { grid-template-columns: 1fr; }
  .v4-sale b { text-align: left; max-width: none; font-size: 14px; margin-top: 5px; }
  .v4-sale strong { font-size: 27px; }
  .receipt-wrap { padding: 24px 18px; gap: 22px; }
}


.v4-sale { padding-right: 88px; }
.v4-sale b { font-size: 14px; }
.receipt-wrap { justify-items: stretch; }
.receipt { padding-top: 12px; }
.receipt-header { margin-bottom: 8px; }
@media(min-width:761px) and (max-height:740px) {
  .v3-layout:has(.v3-manage.open) .v3-panel { padding: 10px 14px; }
  .v3-layout,.v3-layout:has(.v3-manage:not(.open)),.v3-layout:has(.v3-manage.open) { padding: 10px 20px; gap: 18px; }
  .v3-intro-panel { padding: 12px; }
  .v3-intro-panel h3 { font-size: 21px; margin-bottom: 8px; }
  .v3-intro-panel > p { font-size: 11px; margin-bottom: 9px; }
  .v3-jar { width: 92px; height: 92px; margin-bottom: 4px; }
  .v3-choice-grid { gap: 6px; }
  .v3-options-grid { margin-top: 6px; }
  .v3-choice { min-height: 36px; padding: 6px; }
  .v3-recommendation { padding: 7px; margin-top: 9px; gap: 2px; }
  .v3-intro-panel .v3-foot { margin-top: 8px !important; }
  .v3-manage.open { padding: 10px; gap: 6px; }
  .v3-list { height: 125px; }
  .v3-manage .v3-draft-note { min-height: 28px; }
}
@media(max-width:760px) {
  .v3-intro-panel { display: grid; grid-template-columns: minmax(0,1fr) 90px; gap: 8px 10px; }
  .v3-intro-panel h3 { grid-column: 1; grid-row: 1; font-size: 21px; align-self: center; margin: 0; }
  .v3-intro-panel .v3-jar { grid-column: 2; grid-row: 1; width: 90px; height: 90px; margin: 0; float: none; }
  .v3-intro-panel > p,.v3-intro-panel > .v3-choice-grid,.v3-recommendation { grid-column: 1/-1; margin-block: 0; }
  .v3-intro-panel .v3-options-grid { margin-top: 0; }
  .v3-intro-panel .v3-foot { margin-top: 4px !important; }
  .v3-tabs button { padding-inline: 4px; }
  .v4-sale { padding-right: 70px; }
}
.v4-image-ad { display: block; position: relative; width: 100%; padding: 0; border: 0; background: #001b45; color: #fff; cursor: pointer; }
.v4-image-ad .raster-art { display: block; width: 100%; height: auto; }
.v4-ad-cta { display: block; padding: 6px 10px; text-align: left; font: 700 11px/1.3 Arial,sans-serif; color: #fff858; }
.v4-image-ad:hover .v4-ad-cta,.v4-image-ad:focus-visible .v4-ad-cta { color: #001b45; background: #fff858; }
.v4-image-ad:focus-visible { outline: 3px solid #ffef00; outline-offset: -3px; }
.v4-offer .v4-body > .raster-art { display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; margin: 0 0 16px; }
.v4-offer .v4-body > h3 { font: 700 22px/1.15 Arial,sans-serif; margin: 0 0 10px; }
.v4-offer .v4-body > p { font: 14px/1.45 Arial,sans-serif; margin: 10px 0; }
.v4-offer .v4-body { padding: 18px; }
.v4-desk-destinations { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block: 14px; }
.v4-offer .v4-btn { min-height: 44px; font-size: 13px; }
.v4-desk-destinations small { display: block; margin-top: 4px; font-weight: 400; }
.v4-offer .v4-offer-price { border-top: 1px solid #8b8b86; padding-top: 10px; font-size: 12px; }
.v4-added-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px; background: #fff49b; }
.v4-added-item + .v4-added-item { border-top: 1px dotted #a48825; }

/* Tiny print stays legible with either a lens or the ordinary large-text control. */
.v5-document { position: relative; min-width: 0; }
.v5-reading-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font: 11px/1.4 'Courier New',monospace; }
.v5-reading-tools .v5-btn { flex-shrink: 0; }
.v5-scroll,.v5-lens-text { font: 4px/1.55 'Courier New',monospace; color: #352e21; }
.v5-scroll p,.v5-lens-text p { margin: 0 0 5px; }
.v5-scroll p.quiet,.v5-lens-text p.quiet { color: #514832; }
.v5-scroll .v5-clause,.v5-lens-text .v5-clause { font: inherit; color: #514832; }
.v5-scroll.is-enlarged { font-size: 160px; line-height: 1; overflow-wrap: anywhere; }
.v5-scroll.is-enlarged p { margin-bottom: .4em; }
.v5-lens { position: absolute; z-index: 8; width: 144px; height: 144px; overflow: hidden; pointer-events: none; border: 5px solid #6f5831; border-radius: 50%; background: #fff7df; box-shadow: 0 0 0 2px #d1ba80,4px 7px 9px #291e2445; }
.v5-lens-text { position: absolute; left: 0; top: 0; transform-origin: 0 0; padding: 8px 4px; }
.v5-lens-text .v5-clause { border: 0; background: transparent; padding: 0; }
.v5-sign-label { margin: 12px 0 6px; font-weight: 700; }
.v5-sign-label > span { font-weight: 400; }
.v5-sign-pad { position: relative; border: 1px solid #a19270; background: #fff9e6; box-shadow: inset 0 -20px #d1c39d25; }
.v5-sign-pad::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 22%; border-bottom: 1px dotted #a19270; pointer-events: none; }
#v5-signature { display: block; width: 100%; height: auto; aspect-ratio: 10 / 3; touch-action: none; cursor: crosshair; }
.v5-sign-placeholder { position: absolute; left: 12px; bottom: 26%; color: #9e8e6b; font: italic 16px/1.2 Georgia,serif; pointer-events: none; }
.has-ink .v5-sign-placeholder { display: none; }
.v5-pencil-cursor { display: block; width: 132px; height: 44px; position: absolute; z-index: 9; transform: translate(-100%,-50%) rotate(135deg); transform-origin: 100% 50%; pointer-events: none; }
.v5-pencil-cursor .pencil-shaft,.v5-pencil-cursor .pencil-tip { display: block; position: absolute; inset: 0; }
.v5-pencil-cursor .raster-art { display: block; width: 132px; height: 44px; }
.pencil-tip { visibility: hidden; clip-path: inset(0 0 0 90%); }
.pencil-broken .pencil-shaft { clip-path: inset(0 10% 0 0); }
.pencil-broken .pencil-tip { visibility: visible; transform: translate(8px,-15px) rotate(8deg); transform-origin: 100% 50%; }
.pencil-broken { border-color: #a43629; }
.v5-sign-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.v5-pencil-status:empty { margin: 0; }
.v5-pencil-status { margin: 6px 0 0; font: 11px/1.4 'Courier New',monospace; color: #665131; }
.v5-lens[hidden],.v5-pencil-cursor[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .v5-scroll:not(.is-enlarged) { cursor: none; }
  .v5-sign-pad:has(.pencil-shaft.art-loaded) #v5-signature { cursor: none; }
}
@media (max-width: 760px) {
  .v4-desk-destinations { grid-template-columns: 1fr; }
}
.v4-coupon { border: 0; padding: 16px 14px; background-color: #57117b; background-image: radial-gradient(circle,#fff94a 3px,#ffe30055 4px,transparent 5px),radial-gradient(circle,#fff94a 3px,#ffe30055 4px,transparent 5px),radial-gradient(circle,#fff94a 3px,#ffe30055 4px,transparent 5px),radial-gradient(circle,#fff94a 3px,#ffe30055 4px,transparent 5px); background-size: 18px 8px,18px 8px,8px 18px,8px 18px; background-repeat: repeat-x,repeat-x,repeat-y,repeat-y; background-position: 0 0,0 100%,0 0,100% 0; box-shadow: 0 0 0 1px #9a8137,inset 0 0 12px #ffef0033; }
.v4-exit-ad > button { animation: none; }
.v4-exit-ad .v4-exit-arrow { position: absolute; left: 4%; top: 64%; width: 23%; height: 23%; pointer-events: none; background: radial-gradient(ellipse,#fff36b99,transparent 70%); mix-blend-mode: screen; opacity: .35; }
@keyframes coupon-chase { to { background-position: 18px 0,-18px 100%,0 -18px,100% 18px; } }
@keyframes exit-arrow-beckon { 50% { opacity: 1; filter: brightness(1.5); } }
@media (prefers-reduced-motion: no-preference) {
  .v4-coupon { animation: coupon-chase 1.3s linear infinite; }
  .v4-exit-ad .v4-exit-arrow { animation: exit-arrow-beckon 1.4s ease-in-out infinite; }
}
.v4-queue-ad strong > [data-crowd] { font: inherit; color: inherit; }
@media (min-width: 761px) and (max-height: 820px) {
  .v5-paper { padding-block: 12px; }
  .v5-scroll { height: 180px; }
  .v5-sign-label { margin-top: 8px; }
  .v5-pencil-status { margin-top: 6px; font-size: 10px; }
  .v5-side > p { margin-block: 9px; }
}
.v4-ad-rail { display: flex; flex-direction: column; align-self: stretch; }
.v4-ad-rail > * { flex: 0 0 auto; }
.v4-ad-rail > .v4-coupon { display: grid; align-content: center; flex: 1 0 auto; min-height: 0; padding: 8px; }
.v4-coupon > .raster-art { position: relative; display: block; width: 100%; height: auto; }

/* Small, staggered ad effects stay inside the villain frame and add no layout space.
   Pictures move inside their ads. The buttons themselves hold still to be clicked. */
.v4-exit-ad > button { overflow: hidden; isolation: isolate; }
.v4-exit-ad > button, .v4-image-ad, .v4-skip-ad { container-type: inline-size; overflow: hidden; isolation: isolate; position: relative; }
.v4-exit-ad > button::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 3px solid #fff200; }
.v4-ad-shout { position: absolute; z-index: 4; right: 3%; top: 40%; padding: .2em .45em; background: #e3001b; color: #fff200; font: 900 5.5cqw/1 Impact,'Arial Black',sans-serif; transform: rotate(-6deg); box-shadow: 2px 2px 0 #0007; }
.v4-ad-burst { position: absolute; z-index: 3; left: 2%; top: 4%; isolation: isolate; display: grid; place-items: center; width: 27cqw; aspect-ratio: 1; color: #fff200; font: 900 6cqw/1 Impact,'Arial Black',sans-serif; text-align: center; }
.v4-ad-burst::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #e3001b; clip-path: polygon(50% 0, 61% 18%, 82% 7%, 82% 29%, 100% 37%, 87% 53%, 100% 69%, 79% 73%, 77% 95%, 58% 84%, 42% 100%, 34% 80%, 12% 85%, 18% 63%, 0 50%, 18% 37%, 11% 15%, 34% 19%); }
.v4-mini-pops { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.v4-mini-pops i { position: absolute; width: 30cqw; height: 19cqw; border: 1px outset #fff; background: linear-gradient(#0a246a 0 28%, #d4d0c8 28%); box-shadow: 1px 1px 0 #0007; opacity: 0; }
.v4-mini-pops i::before { content: 'AD!!!'; position: absolute; inset: 28% 0 0; display: grid; place-items: center; color: #c40000; font: 900 7cqw/1 Impact,'Arial Black',sans-serif; }
.v4-mini-pops i::after { content: '×'; position: absolute; right: 3%; top: -1%; color: #fff; font: 700 4.5cqw/1 Tahoma,Arial,sans-serif; }
.v4-mini-pops i:nth-child(1) { left: 4%; top: 6%; }
.v4-mini-pops i:nth-child(2) { left: 62%; top: 10%; }
.v4-mini-pops i:nth-child(3) { left: 34%; top: 36%; }
.v4-mini-pops i:nth-child(4) { left: 6%; top: 52%; }
.v4-mini-pops i:nth-child(5) { left: 60%; top: 54%; }
.v4-miles { position: absolute; z-index: 3; left: 4%; bottom: 8%; padding: .15em .4em; background: #fff200; color: #b30000; font: 900 7.5cqw/1 Impact,'Arial Black',sans-serif; box-shadow: 2px 2px 0 #0007; opacity: 0; }
.v4-skip-ad[data-i="1"]::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(100deg, transparent 0 22px, #ffffff33 22px 28px); background-size: 120px 100%; mix-blend-mode: screen; }
.v4-exit-ad > button::after { content: ''; position: absolute; z-index: 2; pointer-events: none; top: -70%; left: 0; width: 32%; height: 240%; background: linear-gradient(90deg,transparent,#fff9b8a0,transparent); mix-blend-mode: screen; transform: translateX(-160%) skewX(-20deg); }
.v4-exit-ad .v4-exit-arrow { z-index: 1; }
.v4-banner { background-image: repeating-linear-gradient(115deg,#ffec00 0 16px,#ffd91b 16px 32px); background-size: 36px 100%; }
.v4-sale { position: relative; overflow: hidden; }
.v4-sale::after { content: ''; position: absolute; pointer-events: none; inset: 3px; border: 1px solid #fffb9b; box-shadow: inset 0 0 12px #fff8a344; }
.v6-call-quote { font: italic 20px/1.4 Georgia,serif; }
.v6-call-status { font-weight: bold; color: #8a321b; }
@keyframes ad-icon-blink { 0%,45%,100% { opacity: 1; filter: drop-shadow(0 0 5px #ffed00); } 50%,95% { opacity: .18; filter: none; } }
@keyframes exit-sign-sweep { 0%,20% { transform: translateX(-160%) skewX(-20deg); } 66%,100% { transform: translateX(430%) skewX(-20deg); } }
@keyframes urgency-stripes { to { background-position: 36px 0; } }
@keyframes sale-letter-print { from { opacity: 0; } to { opacity: 1; } }
@keyframes sale-finale-blink { 0%,49%,100% { opacity: 1; } 50%,99% { opacity: 0; } }
@keyframes crowd-pressure { 0%,75%,100% { transform: scale(1); text-shadow: 2px 2px #6d0016; } 85% { transform: scale(1.045); text-shadow: 2px 2px #6d0016,0 0 9px #ffff9b; } }
@keyframes ad-alarm { 50% { border-color: #e3001b; } }
@keyframes ad-rumble { 0%, 58%, 100% { transform: scale(1.03); } 62% { transform: scale(1.03) translate(-2px, 1px); } 68% { transform: scale(1.03) translate(2px, -1px); } 74% { transform: scale(1.03) translate(-2px, -1px); } 80% { transform: scale(1.03) translate(2px, 1px); } 86% { transform: scale(1.03) translate(-1px, 0); } }
@keyframes ad-throb { from { transform: rotate(-7deg) scale(.92); } to { transform: rotate(5deg) scale(1.12); } }
@keyframes ad-bob { from { transform: scale(1.05) translateY(-2px); } to { transform: scale(1.1) translateY(2px); } }
@keyframes ad-cta-blink { 50% { background: #e3001b; color: #fff858; } }
@keyframes ad-spin { to { transform: rotate(360deg); } }
@keyframes ad-jitter { 0%, 100% { transform: scale(1.04) translate(-1px, 1px); } 33% { transform: scale(1.04) translate(2px, 0); } 66% { transform: scale(1.04) translate(-1px, -1px); } }
@keyframes mini-pop { 0%, 64.9% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes treadmill { to { background-position: 120px 0; } }
@keyframes miles-rise { 0% { transform: translateY(30%) scale(.8); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(-240%) scale(1.2); opacity: 0; } }
@keyframes disco-lights { to { filter: hue-rotate(360deg); } }
@keyframes confetti-fall { to { top: 106%; transform: rotate(calc(var(--spin) + 540deg)); } }
@keyframes disco-dance { from { transform: translateY(2px) rotate(-7deg); } to { transform: translateY(-4px) rotate(7deg); } }
@keyframes disco-flash { 50% { color: #fff; } }
@keyframes exit-bounce { from { transform: scale(.94) rotate(-2deg); } to { transform: scale(1.08) rotate(2deg); } }
@keyframes party-wobble { from { transform: skewX(-9deg) translateX(-3px); } to { transform: skewX(9deg) translateX(3px); } }
@keyframes clerk-bell-ring { 0%,100% { transform: rotate(0); } 18%,55% { transform: rotate(-13deg); } 36%,72% { transform: rotate(11deg); } }
@media (prefers-reduced-motion: no-preference) {
  .v4-burst > .raster-art { animation: ad-icon-blink 1.6s steps(1,end) infinite; }
  .v4-exit-ad > button::after { animation: exit-sign-sweep 1.9s linear infinite; }
  .v4-exit-ad > button::before { animation: ad-alarm .7s steps(1) infinite; }
  .v4-exit-ad > button > .raster-art { animation: ad-rumble 2.2s steps(1) infinite; }
  .v4-ad-shout { animation: ad-throb .45s ease-in-out infinite alternate; }
  .v4-image-ad .raster-art { animation: ad-bob .9s ease-in-out infinite alternate; }
  .v4-image-ad .v4-ad-cta { animation: ad-cta-blink .8s steps(1) infinite; }
  .v4-ad-burst { animation: ad-throb .45s ease-in-out infinite alternate; }
  .v4-ad-burst::before { animation: ad-spin 1.8s linear infinite; }
  .v4-skip-ad[data-i="0"] > .raster-art { animation: ad-jitter .36s steps(3) infinite; }
  .v4-mini-pops i { animation: mini-pop 4.2s steps(1) infinite; }
  .v4-mini-pops i:nth-child(2) { animation-delay: .45s; }
  .v4-mini-pops i:nth-child(3) { animation-delay: .9s; }
  .v4-mini-pops i:nth-child(4) { animation-delay: 1.35s; }
  .v4-mini-pops i:nth-child(5) { animation-delay: 1.8s; }
  .v4-skip-ad[data-i="1"] > .raster-art { animation: ad-jitter .28s steps(3) infinite; }
  .v4-skip-ad[data-i="1"]::after { animation: treadmill .5s linear infinite; }
  .v4-miles { animation: miles-rise 1.3s ease-out infinite; }
  .v4-banner { animation: urgency-stripes 2.4s linear infinite; }
  .v4-hit-counter::before { animation: disco-lights 1.6s steps(8) infinite; }
  .v4-confetti i { top: -14px; animation: confetti-fall var(--fall) linear var(--wait) infinite; }
  .v4-disco > span { display: inline-block; animation: disco-dance .5s ease-in-out calc(var(--letter) * -.08s) infinite alternate, disco-flash .8s steps(1) calc(var(--letter) * -.13s) infinite; }
  #v4-exit-count { animation: exit-bounce .42s ease-in-out infinite alternate; }
  .v4-party-line { animation: party-wobble .46s ease-in-out infinite alternate; }
  .v4-sale-letters.is-printing > span:not(.is-printed) { opacity: 0; }
  .v4-sale-letters.is-blinking { animation: sale-finale-blink .9s steps(1,end) 3; }
  .v4-queue-ad > strong { animation: crowd-pressure 2.8s ease-in-out infinite; }
  .v5-clerk.is-ringing > .raster-art { animation: clerk-bell-ring .6s ease-out; }
}
.v4-sale-letters { display: inline-block; white-space: pre; }
.v3-object-action { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 36px; padding: 4px 8px; }
.v3-object-action .v3-object { min-height: 28px; margin: 0; }
.v3-object-confirm { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.v3-object-confirm button { min-width: 44px; min-height: 26px; padding: 2px 10px; border: 1px solid #8b9bb1; background: #edf1f8; color: #233e5c; font: inherit; cursor: pointer; }
.department-brand > img { width: 68px; height: 68px; margin-block: -12px; object-fit: contain; }
@media (min-width: 761px) and (max-height: 850px) { .department-brand > img { width: 60px; height: 60px; } }

/* Cancellation channels use their own objects and gestures. */
.v6-postage { position: absolute; right: 12px; top: 12px; width: 50px; height: 57px; padding: 3px; border: 2px dotted #9c8051; color: #876a3f; text-align: center; font: 9px/1.4 Georgia,serif; display: grid; align-content: center; justify-items: center; }
.v6-postage.is-stamped { background: #e1c7a3; border-color: #6b4e22; transform: rotate(5deg); }
.v6-postage .doris-art { display: block; position: relative; width: 34px; height: 34px; overflow: hidden; }
.v6-postage small { font-size: 8px; }
.v6-postbox:disabled { opacity: 1; cursor: default; }
.v6-postbox:not(:disabled):hover { filter: drop-shadow(0 0 7px #a36f26); }
.v6-cancellation[data-channel="office"] { grid-template-columns: minmax(0,1fr); }
.v6-office-scene { --office-button: 44px; display: grid; grid-template-columns: minmax(0,1.5fr) minmax(220px,1fr); gap: 22px; align-items: start; }
.v6-office-scene .v6-route-action { box-sizing: border-box; min-height: var(--office-button); padding: 2px 10px; font: bold 14px/1.2 Georgia,serif; }
.v6-office-board .v6-route-action { display: block; width: 100%; }
.v6-counter { position: relative; width: 100%; isolation: isolate; container-type: inline-size; }
.v6-counter-art { display: block; width: 100%; height: auto; }
.v6-postage .doris-sprite { top: -8%; }
.v6-counter-sign { position: absolute; top: 10%; left: 33%; right: 33%; padding: clamp(1px,.9cqi,6px) 3px; border: clamp(1px,.3cqi,2px) solid #c2a66e; background: #f5e2b5; color: #6e2a20; font: 700 clamp(4px,1.5cqi,10px)/1.15 Georgia,serif; text-align: center; box-shadow: 1px 2px 3px #0006; }
.v6-counter-sign strong { display: block; font-size: clamp(7px,3.7cqi,24px); margin-top: 1px; }
.v6-counter.is-closed .v6-counter-sign { transform: rotate(-4deg); padding-block: clamp(1px,.7cqi,5px); }
.v6-counter.is-closed .v6-counter-sign strong { font-size: clamp(6px,2.2cqi,14px); }
.v6-ticket { position: absolute; left: 6%; bottom: 7%; width: 92px; padding: 9px 6px; background: #fff5d7; color: #563c23; border-block: 2px dashed #ab8e57; box-shadow: 1px 3px 5px #0006; transform: rotate(-7deg); text-align: center; font: 10px/1.25 'Courier New',monospace; }
.v6-ticket strong { display: block; font-size: 28px; }
.v6-ticket span { display: block; }
.v6-counter-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.v6-counter-controls button { flex: 1 1 auto; }
.v6-counter-bell { display: flex; align-items: center; justify-content: center; gap: 5px; }
.v6-counter-bell img { width: 26px; height: 26px; object-fit: contain; }
.v6-counter-controls button:disabled { color: #6b5940; background: #dfcfaa; border-color: #ab9162; cursor: default; }
.v6-office-board { min-width: 0; }
.v6-cancellation .v6-counter-response { margin-bottom: 12px; padding: 12px; border-left: 3px solid #a98444; background: #fff4d240; font-style: italic; }
.v6-office-board .v6-directory { margin-block: 12px; }
@media(min-width:761px) and (max-height:850px) {
  .v6-office-scene { grid-template-columns: minmax(0,330px) minmax(0,1fr); gap: 22px; }
  .v6-cancellation[data-channel="office"],.v6-cancellation[data-channel="post"] { padding: 12px 20px; gap: 10px 24px; }
  .v6-cancellation[data-channel="office"] .v6-book,.v6-cancellation[data-channel="post"] .v6-book,.v6-cancellation[data-channel="phone"] .v6-book { display: none; }
  .v6-cancellation[data-channel="office"] .v6-channel-nav { margin-bottom: 8px; padding-bottom: 8px; }
  .v6-cancellation[data-channel="office"] h3 { margin-bottom: 8px; }
  .v6-counter-response { font-size: 14px; }
}
@media(max-width:760px) {
  .v6-office-scene { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .v6-ticket { width: 70px; padding: 5px 3px; font-size: 8px; }
  .v6-ticket strong { font-size: 23px; }
  .v3-object-confirm button { min-height: 32px; }
  .v3-object-action .v3-object { min-height: 32px; }
}

/* Laptop fit: give the scene room without changing the shared site header or
   footer. Sentence choices now occupy their own lines in the goodbye letter. */
@media (min-width: 761px) and (max-height: 820px) {
  .exit-page-shell main.exit-main { padding-block: 6px; gap: 6px; }
  .exit-opening.compact { min-height: 32px; gap: 10px; }
  .exit-opening.compact .exit-emblem { width: 32px; height: 32px; border-radius: 8px; }
  .exit-h1 { font-size: 23px; }
  .exit-sub { font-size: 15px; }
  .honest-bar { padding: 4px 16px; gap: 12px; }
  .honest-ledger { font-size: 14px; }
  .villain[data-decay] .v-hud { padding: 7px 20px; gap: 16px; }
  .department-brand { padding-right: 16px; }
  .department-brand > img { width: 50px; height: 50px; }
  .department-title > strong { font-size: 20px; }
  .department-title > span { font-size: 9px; }
  .villain[data-decay="2"] .scene-body { padding: 12px 20px; }
  .v2-letter-layout { grid-template-columns: minmax(0, 2.3fr) minmax(220px, 1fr); gap: 24px; }
  .v2-editor { padding: 14px 18px; }
  .letter-toolbar { margin-bottom: 8px; }
  .letter-draft { padding: 10px 12px; }
  .letter-line { min-height: 50px; padding-block: 3px; }
  .letter-line.empty { min-height: 50px; }
  .letter-signoff { margin-top: 6px; }
  .letter-send-row { flex-wrap: nowrap; margin-top: 10px; gap: 10px; min-height: 44px; }
  .letter-send-row .v2-btn { flex: none; min-height: 44px; padding: 8px 12px; }
  .letter-send-row .letter-error { font-size: 12px; }
  .v2-letter-doris { gap: 12px; }
  .v2-letter-doris .guilt-bubble { padding: 14px; }
}
@media (min-width: 761px) and (max-height: 720px) {
  .villain[data-decay="2"] .scene-body { padding-block: 8px; }
  .v2-editor { padding: 12px 16px; }
  .letter-toolbar { display: none; }
  .v2-editor h3 { font-size: 22px; margin-bottom: 4px; }
  .letter-salutation, .letter-signoff { font-size: 14px; }
  .letter-draft ol { margin-top: 4px; }
  .letter-line, .letter-line.empty { min-height: 47px; padding-block: 1px; }
  .letter-line { font-size: 13px; line-height: 1.3; }
  .letter-line del { font-size: 11px; }
  .v2-letter-doris .doris-avatar { width: 84px; height: 84px; }
  .v2-letter-doris blockquote { font-size: 17px; }
  .v2-letter-doris .doris-caption { margin-top: 8px; }
}
/* On laptop and desktop, the partner list owns scrolling. The surrounding
   consent desk fits the scene; its tabs, pending status and Save stay visible. */
@media (min-width: 1001px) and (min-height: 600px) {
  .villain[data-decay="3"] .scene-body { flex: 1 1 0; min-height: 0; }
  .v3-top { flex: none; }
  .v3-layout, .v3-layout:has(.v3-manage:not(.open)), .v3-layout:has(.v3-manage.open) { flex: 1 1 0; min-height: 0; margin-block: 0; padding-block: 12px; }
  .v3-manage.open { align-self: stretch; min-height: 0; }
  .v3-list { flex: 1 1 0; min-height: 70px; height: auto; overscroll-behavior: contain; }
  .v3-manage > :not(.v3-list) { flex-shrink: 0; }
  .v3-manage .v3-actions { min-height: 36px; }
}

/* Department 1 in two parts: the chat, then the gauntlet alone. */
.v1-chat-stage { width: 100%; max-width: 560px; margin: 0 auto; }
.v1-chat-stage .saas-chat { width: 100%; }
.v1-chat-stage .chat-messages { max-height: min(34vh, 300px); overflow-y: auto; overscroll-behavior: contain; }
.v1-chat-stage .chat-you { max-width: 85%; }
.v1-chat-stage .chat-bubble { margin-bottom: 12px; }
.v1-row.is-solo { display: flex; justify-content: center; }
.v1-row.is-solo .v1-dialogs { width: min(520px, 100%); justify-items: center; }
.v1-row.is-solo .v1-card { width: 100%; }
.chat-unread { position: relative; flex: none; padding: 0; border: 0; cursor: pointer; }
.chat-unread::after { content: ''; position: absolute; inset: -12px; }
.chat-unread:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chat-leave { display: block; width: fit-content; min-height: 44px; margin: 0 16px 12px; padding: 10px 22px; font: 700 14px/1.25 Arial,sans-serif; }
.chat-leave[hidden] { display: none; }
.v4-row > .v4-btn.is-shut { color: #77736b; background: #d4d0c8; border-color: #fff #888 #888 #fff; font-weight: 400; cursor: not-allowed; }
.v4-leave-note { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: #3f3c36; }
.v4-tile > .doris-art { position: absolute; inset: 0; display: block; border-radius: 0; }
.v4-tile > .doris-art > img { top: -9%; }
.v6-ethics { font-family: Arial, sans-serif; color: #1f2430; text-align: left; }
.v6-ethics-label { margin: 0 0 8px; font-size: 11px !important; font-weight: 700; color: #5a6470; }
.v6-ethics .v3-btn { min-height: 44px; margin: 4px 0 0; padding-inline: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .v6-counter-bell.is-ringing > .raster-art { animation: clerk-bell-ring .6s ease-out; }
}

/* Totals keep their numbers level when a long label wraps. */
.run-totals > div { display: flex; flex-direction: column; justify-content: flex-end; }

/* Old-style numerals turn the extension clue into a letter o. */
.v6-cancellation { font-variant-numeric: lining-nums; }
.v6-directory p strong { font-family: Barlow, sans-serif; }

/* Batch 2, October 30. */

/* The chat fits the scene at every size. Only the conversation scrolls, and on
   very short screens the chat window scrolls instead of the frame behind it. */
.villain[data-decay="1"]:has(.v1-chat-stage) { overflow: hidden; }
.villain[data-decay="1"]:has(.v1-chat-stage) .scene-body { flex: 1 1 0; min-height: 0; }
.v1-chat-stage { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; }
.v1-chat-stage .saas-chat { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.v1-chat-stage .saas-chat > * { flex: none; }
.v1-chat-stage .saas-chat > .chat-messages { flex: 1 1 auto; min-height: 96px; max-height: none; overflow-y: auto; }
.v1-chat-stage .chat-bubble:last-child { margin-bottom: 0; }
.chat-thinking { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 7px 0 0; font: italic 14px/1.5 Arial,sans-serif; color: #6c6290; }
.chat-dots { display: inline-flex; gap: 3px; }
.chat-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.chat-suggestions [aria-disabled="true"] { opacity: .55; cursor: progress; }
.chat-suggestions [aria-disabled="true"]:hover { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .chat-dots i { animation: chat-dot 1s ease-in-out infinite; }
  .chat-dots i:nth-child(2) { animation-delay: .15s; }
  .chat-dots i:nth-child(3) { animation-delay: .3s; }
}
@keyframes chat-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (min-width: 761px) and (max-height: 820px) {
  .v1-chat-stage .saas-chat > .chat-messages { min-height: 72px; }
  .chat-powered { padding-bottom: 8px; }
}

/* Every suggestion shares one grid cell, so the card never changes height. */
.saas-suggestion { flex: 1; min-width: 0; }
.saas-suggestion-lines b { display: block; }
.saas-suggestion-lines { display: grid; }
.saas-suggestion-lines > span { grid-area: 1 / 1; align-self: center; visibility: hidden; opacity: 0; }
.saas-suggestion-lines > .is-on { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .saas-suggestion-lines > span { transition: opacity .25s ease-out; }
}

/* Purposes: uneven indents and a few dead ends. */
.v3-purpose-tree details details { margin-left: calc(4px + var(--drift, 0px)); }
.v3-purpose-tree details details details { background: #f7f3e6; }
.v3-purpose-tree details details details details { background: #eef5ee; }
.v3-purpose-tree details details details details details { background: #f6edf3; }
.v3-purpose-tree summary { overflow-wrap: anywhere; }
.v3-purpose-tree .v3-purpose-note { margin: 0; padding: 8px; border-top: 1px dashed #c3cedc; color: #5c6b7e; font-style: italic; }
@media (max-width: 760px) {
  .v3-purpose-tree details details { margin-left: calc(2px + var(--drift, 0px) / 4); }
}

/* Checkout: everything competes for one screen. */
.v4-ad-row { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; }
.v4-ad-row > * { min-width: 0; }
.v4-skip-ad { display: block; width: 100%; padding: 0; border: 2px outset #fff; background: #000; cursor: pointer; }
.v4-skip-ad > .raster-art { display: block; width: 100%; height: auto; }
.v4-skip-ad:focus-visible { outline: 3px solid #15252b; outline-offset: 2px; }
@media (min-width: 761px) {
  .villain[data-decay="4"] .scene-body { padding: 8px 16px; justify-content: flex-start; }
  .villain[data-decay="4"] { overflow-x: hidden; }
  .v4-banner { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 1180px; margin-bottom: 8px; padding: 3px 10px; border-width: 3px; font-size: clamp(18px, 3vh, 26px); box-shadow: 3px 3px 0 #000; }
  .v4-stage { max-width: 1180px; grid-template-columns: minmax(0, 2.7fr) minmax(200px, 1fr); gap: 8px 12px; align-items: stretch; }
  .v4-checkout-column { gap: 0; }
  .v4-checkout-column .v4-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 8px 10px; }
  .v4-checkout-column .v4-table { grid-column: 1; grid-row: 1 / span 4; }
  .v4-checkout-column .v4-sale, .v4-checkout-column .v4-row, .v4-checkout-column .v4-leave-note { grid-column: 2; }
  .v4-checkout-column .v4-fine { grid-column: 1; grid-row: 5; margin: 4px 0 0; font-size: 10px; }
  .v4-checkout-column .v4-sale { margin: 0; padding: 4px 66px 4px 8px; }
  .v4-sale > span { font-size: 9px; }
  .v4-sale strong { margin-top: 2px; font-size: clamp(22px, 2vw, 28px); }
  .v4-sale b { font-size: 12px; }
  .v4-burst { top: 18px; right: 2px; width: 74px; height: 74px; }
  .v4-table, .v4-row, .v4-fine { font-size: 12px; }
  .v4-table td { padding-block: 4px; }
  .v4-table tr:last-child { font-size: 14px; }
  .v4-table tr:last-child td { padding-block: 5px; }
  .v4-row { margin-top: 6px; }
  .v4-row > .v4-btn { min-height: 32px; }
  .v4-leave-note { margin-top: 4px; font-size: 11px; }
  .v4-ad-rail { gap: 8px; padding: 0; justify-content: space-between; }
  .v4-queue-ad { padding: 6px 8px; gap: 2px; }
  .v4-queue-ad strong { font-size: 26px; }
  .v4-queue-ad em { margin-top: 2px; padding: 3px; font-size: 9px; }
  .v4-hit-counter { flex: 1 1 auto; }
  .v4-ad-row { --row-h: 90px; display: flex; justify-content: space-between; gap: 8px; height: var(--row-h); }
  .v4-ad-row > * { flex: none; box-sizing: border-box; height: var(--row-h); }
  .v4-stage { margin-bottom: 0; }
  .v4-ad-row .v4-exit-ad { position: relative; display: block; width: calc((var(--row-h) - 4px) * 2.5 + 4px); padding: 0; border: 2px outset #fff; box-shadow: none; }
  .v4-ad-row .v4-ad-win { width: calc((var(--row-h) - 4px) * 2.4 + 4px); box-shadow: none; }
  .v4-ad-row .v4-coupon { display: grid; align-content: center; width: calc((var(--row-h) - 12px) * 1.8 + 12px); padding: 6px; overflow: hidden; }
  .v4-ad-row .v4-skip-ad { width: calc((var(--row-h) - 4px) * 2.4 + 4px); }
  .v4-exit-ad > button { height: 100%; min-height: 0; aspect-ratio: auto; }
  .v4-exit-ad > button > .raster-art { width: 100%; height: 100%; object-fit: contain; }
  .v4-ad-row .v4-image-ad { height: 100%; }
  .v4-ad-row .v4-image-ad .raster-art { width: 100%; height: 100%; object-fit: contain; }
  .v4-ad-row .v4-ad-cta { display: none; }
  .v4-coupon > .raster-art { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
  .v4-taskbar { margin-top: auto; padding: 2px 4px; }
  .v4-taskbar .v4-btn { min-height: 24px; padding: 1px 10px; }
  .v4-task, .v4-clock { padding-block: 3px; }
}
@media (min-width: 761px) and (max-height: 880px) {
  .v4-table td { padding-block: 3px; }
  .v4-table tr:last-child td { padding-block: 4px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .v4-sale > span { display: none; }
  .v4-table td { padding-block: 2px; }
  .v4-table tr:last-child td { padding-block: 3px; }
  .v4-checkout-column .v4-fine { display: none; }
}
@media (min-width: 1500px) and (min-height: 1000px) {
  .v4-banner, .v4-stage { max-width: 1320px; }
  .v4-table, .v4-row, .v4-fine { font-size: 13px; }
  .v4-table td { padding-block: 6px; }
}
@media (max-width: 760px) {
  .v4-ad-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4-ad-row .v4-exit-ad { grid-column: 1 / -1; }
  .v4-exit-ad > button { min-height: 0; }
  .v4-ad-row .v4-coupon { padding: 8px; }
}

/* Leaving Plus: a narrower window, and an OK button that has to earn it. */
#v4-pops > .v4-win.pop.v4-chain-pop { width: min(330px, 100%); }
.v4-chain-pop .v4-row { display: flow-root; text-align: right; }
.v4-chain-pop.v4-flappy .v4-row { clear: both; text-align: left; }
.v4-flappy-field { position: relative; height: 132px; margin-top: 8px; overflow: hidden; border: 2px inset #fff; background: linear-gradient(#63bde6, #cdeef8 80%); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.v4-flappy-field::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(90deg, #7ab648 0 10px, #5c9a34 10px 20px); }
.v4-flappy-score { position: absolute; right: 4px; top: 4px; z-index: 4; padding: 1px 4px; background: #ffffffc4; color: #0a246a; font: 700 10px/1.25 Tahoma,Arial,sans-serif; }
.v4-btn.v4-flappy-ok { position: absolute; left: 30px; top: 0; z-index: 3; width: 46px; height: 26px; min-height: 0; padding: 0; touch-action: none; }
.v4-flappy-field.is-parked .v4-flappy-ok { left: 50%; top: calc(50% - 5px); translate: -50% -50%; }
.v4-flappy-pipe { position: absolute; left: 0; top: 0; bottom: 10px; z-index: 2; width: 30px; pointer-events: none; }
.v4-flappy-pipe i { position: absolute; left: 0; display: grid; place-items: center; box-sizing: border-box; width: 30px; overflow: hidden; border: 2px solid #1c5a22; background: linear-gradient(90deg, #3b9a3f, #7ed36a 45%, #2c7a31); color: #fff; font: 700 8px/1 Tahoma,Arial,sans-serif; letter-spacing: .06em; writing-mode: vertical-rl; }
.v4-flappy-pipe i:first-child { top: 0; }
.v4-flappy-pipe i:last-child { bottom: 0; }
.v4-flappy-status { min-height: 1.4em; margin: 6px 0 0; font: 11px/1.4 Tahoma,Arial,sans-serif; }

/* Stage 5: name who is speaking. */
.v5-clerk-note { min-height: 3em; }

/* Stage 6 fits a laptop without a scroll bar. */
@media (min-width: 761px) {
  .villain[data-decay="6"] .scene-body { padding: 8px 20px; }
  .v6-cancellation, .v6-cancellation[data-channel="office"], .v6-cancellation[data-channel="post"] { gap: 8px 24px; padding: 10px 20px; margin-block: auto; }
  .v6-cancellation .v6-book { padding-bottom: 6px; font-size: 11px; }
  .v6-cancellation h3 { margin-bottom: 8px; font-size: clamp(21px, 3vh, 28px); }
  .v6-cancellation .dc { font-size: clamp(17px, 2.2vh, 21px); line-height: 1.35; }
  .v6-parch p { margin-bottom: 8px; }
  .v6-services { margin-block: 12px; }
  .v6-services button { padding: 8px 12px; }
  .v6-channel-nav { margin-bottom: 8px; padding-bottom: 8px; }
  .v6-channel-nav button { min-height: 36px; }
  .v6-cancellation .v6-roundel { width: clamp(112px, 18vh, 200px); }
  .v6-cancellation .v6-clerk-remark { padding-top: 8px; font-size: 14px; line-height: 1.35; }
  .v6-illumination { gap: 6px; }
  .v6-route-log { padding-top: 6px; font-size: 12px; }
  .v6-route-log span { display: inline; margin: 0 0 0 6px; }
  .v6-office-scene { grid-template-columns: minmax(0, clamp(260px, 40vh, 520px)) minmax(240px, 1fr); gap: 20px; }
  .v6-counter-controls { margin-top: 6px; }
}

/* The rotary phone. Each hole is a real button; the wheel only turns for show. */
.v6-phone-desk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
.v6-rotary { --size: clamp(240px, 34vh, 320px); position: relative; flex: none; width: var(--size); aspect-ratio: 320 / 300; }
.v6-phone-body { position: absolute; inset: 0; display: block; width: 100%; height: 100%; filter: drop-shadow(2px 4px 3px #3b2a1466); }
.v6-dial { position: absolute; left: 50%; top: 64.7%; width: 52%; aspect-ratio: 1; translate: -50% -50%; }
.v6-dial-numbers { position: absolute; inset: 0; border-radius: 50%; background: #f5e9c9; box-shadow: 0 0 0 2px #2a1c14; }
.v6-dial-numbers span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 14%; height: 14%; margin: -7% 0 0 -7%; color: #2f2118; font: 700 clamp(10px, 1.7vh, 13px)/1 Barlow,sans-serif; font-variant-numeric: lining-nums; transform: rotate(var(--a)) translateY(-271%) rotate(calc(-1 * var(--a))); }
.v6-dial-wheel { position: absolute; inset: 0; border-radius: 50%; }
.v6-wheel-face { position: absolute; inset: 0; display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 2px #0007); }
.v6-dial-hole { position: absolute; left: 50%; top: 50%; width: 19%; height: 19%; margin: -9.5% 0 0 -9.5%; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; transform: rotate(var(--a)) translateY(-200%); }
.v6-dial-wheel.is-dragging .v6-dial-hole { cursor: grabbing; }
.v6-dial-hole:hover { background: radial-gradient(circle, #ffd97888 0 60%, transparent 62%); }
.v6-dial-plate { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 40%; aspect-ratio: 1; translate: -50% -50%; border: 2px solid #8a6a2f; border-radius: 50%; background: #f5e9c9; color: #6b4e22; text-align: center; pointer-events: none; }
.v6-dial-plate small { font: 700 clamp(6px, .95vh, 8px)/1.2 Barlow,sans-serif; letter-spacing: .06em; }
.v6-dial-stop { position: absolute; left: 50%; top: 50%; width: 5%; height: 14%; margin: -7% 0 0 -2.5%; border-radius: 3px; background: linear-gradient(90deg, #d8c9a0, #8d7c55); transform: rotate(120deg) translateY(-345%); pointer-events: none; }
.v6-speech { position: relative; min-width: 0; padding: 14px 16px; border: 2px solid #8a6a2f; border-radius: 16px; background: #fff6da; box-shadow: 2px 3px 0 #8a6a2f33; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.v6-speech::before, .v6-speech::after { content: ''; position: absolute; top: 24%; width: 0; height: 0; border-block: 11px solid transparent; }
.v6-speech::before { left: -20px; top: 30px; border-right: 20px solid #8a6a2f; }
.v6-speech::after { left: -16px; top: 31px; border-block-width: 10px; border-right: 18px solid #fff6da; }
.v6-speech > p { margin: 0 0 8px; }
.v6-speech > p:last-child, .v6-speech > :last-child { margin-bottom: 0; }
.v6-speech .v6-call-quote { font-size: clamp(16px, 2.3vh, 20px); }
.v6-phone-hint { font-style: italic; }
.v6-phone-directory { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding-top: 8px; border-top: 1px solid #b9a078; }
.v6-phone-book { display: block; width: 74px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; }
.v6-book-cover { display: grid; align-content: center; gap: 4px; width: 100%; height: 100%; padding: 4px; box-sizing: border-box; border: 2px solid #6b4e22; border-left-width: 7px; border-radius: 2px 4px 4px 2px; background: #e9c23f; color: #3b2a14; box-shadow: 2px 3px 0 #6b4e2255; text-align: center; font: 8px/1.15 Barlow,sans-serif; }
.v6-book-cover small { font: inherit; letter-spacing: .05em; }
.v6-book-cover strong { font: 700 11px/1.05 Georgia,serif; }
.v6-book-cover em { font: italic 8px/1.1 Georgia,serif; }
.v6-phone-book:hover .v6-book-cover { background: #f2d35f; }
.v6-phone-directory .v6-book-note { margin: 0; font-size: 14px; line-height: 1.35; }
@media (max-width: 760px) {
  .v6-phone-desk { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .v6-rotary { --size: min(300px, 84vw); order: 2; justify-self: center; }
  .v6-dial-plate small { font-size: 8px; }
}

/* Office notices read as one list at one size. */
.v6-office-board { font-size: 14px; }
.v6-cancellation .v6-counter-response { margin-bottom: 8px; padding: 8px 10px; font-size: 14px; }
.v6-cancellation .v6-office-board dl { font-size: 14px; line-height: 1.35; }
.v6-cancellation .v6-office-board dl > div, .v6-directory summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #b9a07866; }
.v6-office-board .v6-directory { margin: 0 0 10px; padding: 0; border: 0; background: none; }
.v6-directory summary { min-height: 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: bold; line-height: 1.35; }
.v6-directory summary::-webkit-details-marker { display: none; }
.v6-directory summary > span:last-child { font-weight: normal; text-decoration: underline; text-underline-offset: 2px; }
.v6-directory summary > span:last-child::after { content: ' ▾'; display: inline-block; margin-left: 4px; }
.v6-directory[open] summary > span:last-child::after { content: ' ▴'; }
.v6-office-board .v6-directory p { margin: 8px 0 0; font-size: 14px; line-height: 1.35; }
.v6-counter-bell:disabled img { filter: grayscale(1); opacity: .6; }
@media (min-width: 761px) {
  .v6-cancellation .v6-office-board dl > div, .v6-directory summary { padding-block: 4px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .v6-cancellation[data-channel="office"] .v6-route-log { display: none; }
  .v6-cancellation[data-channel="office"] h3 { font-size: 20px; margin-bottom: 4px; }
  .v6-cancellation .v6-counter-response { margin-bottom: 4px; padding-block: 4px; }
  .v6-office-board .v6-directory { margin-bottom: 6px; }
}
@media (max-width: 760px) {
  .v6-directory summary { padding-block: 12px; }
}

/* Bell apology ladder. */
.v6-ethics-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.v6-ethics-actions .v3-btn, .v6-ethics-actions .v3-btn-quiet { min-height: 44px; margin: 0; }

/* The outcome tag has paper of its own until the image is on screen. */
.tag-paper::before { content: ''; position: absolute; inset: 3% 1%; background: linear-gradient(180deg, #f4e7c9, #e6d3a8); clip-path: polygon(6% 0, 100% 0, 100% 100%, 6% 100%, 0 76%, 0 24%); }
.tag-paper.art-loaded::before { display: none; }

/* See you soon, signed by Doris. */
.debrief-avatar { position: relative; aspect-ratio: 1; overflow: hidden; border: 3px solid var(--ink); border-radius: 50%; background: #dfd3ba; }
.debrief-avatar .debrief-portrait { position: absolute; left: -32%; top: -14%; width: 170%; max-width: none; height: auto; }

/* The exit counter throws a party for everybody who isn't you. */
.v4-hit-counter { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: center; justify-items: center; gap: 5px; min-height: 118px; padding: 8px 6px; border: 3px ridge #ffe14d; background: #190b33; color: #fff; font: 700 12px/1.2 Tahoma,Arial,sans-serif; text-align: center; }
.v4-hit-counter::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 18% 28%, #ff2fa899, transparent 46%), radial-gradient(circle at 82% 72%, #2fc7ff99, transparent 46%), radial-gradient(circle at 58% 12%, #ffe14d66, transparent 42%); }
.v4-confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v4-confetti i { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 10px; background: hsl(var(--hue) 92% 62%); transform: rotate(var(--spin)); }
.v4-disco { display: flex; justify-content: center; letter-spacing: .04em; white-space: nowrap; }
.v4-disco > span { color: hsl(calc(var(--letter) * 37) 96% 70%); text-shadow: 0 0 6px currentColor; }
#v4-exit-count { color: #fff200; font: 900 clamp(28px, 3.4vw, 36px)/1 Impact,'Arial Black',sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 2px 2px 0 #b3006b, 0 0 12px #ff2fa8; }
.v4-party-line { font-size: 10px; letter-spacing: .05em; text-shadow: 0 0 5px #ff2fa8; white-space: nowrap; }

/* Laptop heights between the compact and the full layout. */
@media (min-width: 761px) and (min-height: 821px) and (max-height: 950px) {
  .scene-body:has(.v1-row.is-solo) > .saas-workspace, .scene-body:has(.v1-row.is-solo) > .saas-trust { display: none; }
  .v1-card, .v2-card { padding: 24px 28px; }
  .v5-paper { padding-block: 14px; }
  .v5-scroll { height: 176px; }
  .v5-form label { margin-bottom: 6px; }
  .v5-sign-label { margin-top: 8px; }
  .v5-side { padding: 14px; }
  .v5-side .doris-avatar { float: right; width: 84px; height: 84px; margin: 0 0 10px 10px; border-width: 3px; }
}
@media (min-width: 761px) and (max-height: 880px) {
  .v6-office-scene { --office-button: 36px; }
  .v4-queue-ad em { display: none; }
  .v4-hit-counter { min-height: 76px; gap: 2px; padding: 4px; }
  #v4-exit-count { font-size: 26px; }
  .v4-party-line { font-size: 9px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .v5-scroll { height: 122px; }
  .v4-banner { margin-bottom: 4px; }
  .v4-stage { row-gap: 6px; }
}


/* Lossless WebP twins of the shared logo. */
.brand[data-preview-logo="01"] .logo-study-crop {
  background-image: image-set(
    url("/assets/bt-soft-upright-01-44-1x-8de6f0b2bfff.webp") 1x,
    url("/assets/bt-soft-upright-01-44-2x-d499ca3895f0.webp") 2x,
    url("/assets/bt-soft-upright-01-44-3x-ab15e44a48bc.webp") 3x,
    url("/assets/bt-soft-upright-01-44-4x-adc2be220271.webp") 4x
  );
}
@media (max-width: 1000px), (min-width: 1001px) and (max-height: 780px) {
  .brand[data-preview-logo="01"] .logo-study-crop {
    background-image: image-set(
      url("/assets/bt-soft-upright-01-40-1x-9036f3a7bceb.webp") 1x,
      url("/assets/bt-soft-upright-01-40-2x-9514ec0848cf.webp") 2x,
      url("/assets/bt-soft-upright-01-40-3x-dc50163d2f4d.webp") 3x,
      url("/assets/bt-soft-upright-01-40-4x-0b2b9f15a7c3.webp") 4x
    );
  }
}

/* The consent desk gives the player's side most of the width. */
@media (min-width: 761px) {
  .v3-layout:has(.v3-manage:not(.open)) { grid-template-columns: minmax(0, 1.9fr) minmax(230px, 1fr); }
}

/* Short laptop windows keep the popup on one screen. */
@media (min-width: 761px) and (max-height: 700px) {
  .v1-card { padding: 14px 22px; }
  .v1-card h3 { font-size: 26px; margin-bottom: 8px; }
  .v1-card p { margin-bottom: 8px; }
  .v1-card .v1-eyebrow { margin-bottom: 6px; }
  .saas-insight { padding: 6px 10px; margin-bottom: 10px; }
  .v1-btn { min-height: 42px; padding-block: 10px; }
}

/* Windows this short have no room for a chat. The frame scrolls instead. */
@media (max-height: 499px) {
  .villain[data-decay="1"]:has(.v1-chat-stage) { overflow: auto; }
  .villain[data-decay="1"]:has(.v1-chat-stage) .scene-body { flex: 1 0 auto; }
  .v1-chat-stage { flex: none; }
  .v1-chat-stage .saas-chat { flex: none; overflow: visible; }
  .v1-chat-stage .saas-chat > .chat-messages { max-height: 160px; }
}

/* The CAPTCHA sizes itself to the frame, so all three rounds fit without
   scrolling. The grid is square, which ties its width to the height left over. */
#v4-pops:not(:empty) { container-type: size; }
#v4-pops > .v4-win.pop.v4-captcha { width: min(380px, 100%, max(190px, calc(100cqh - 150px))); }
.v4-captcha .v4-cap-lead { margin-bottom: 8px; }
.v4-captcha .v4-row { margin-top: 8px; }
.v4-captcha .v-error { margin-top: 6px; font-size: 12px; }
@container (max-height: 460px) {
  .v4-captcha .v4-body, .v4-humanity .v4-body { padding: 8px 10px; }
  .v4-captcha .v4-cap-lead { font-size: 13px; margin-bottom: 6px; }
  .v4-humanity .human-inspector { margin-bottom: 6px; }
  .v4-humanity h3 { margin-bottom: 6px; font-size: 15px; }
  .v4-human-grid { gap: 4px; margin-bottom: 8px; }
  .v4-humanity .v-error { margin-bottom: 8px; }
  .v4-human-choice { padding: 5px 6px; }
}
@container (max-height: 400px) {
  .v4-humanity .human-inspector { display: none; }
}

/* Stage 5: every section gets its own box. */
.v5-paper { background-image: none; }
.v5-paper::before { display: none; }
.v5-document, .v5-paper .v5-form { box-sizing: border-box; padding: 12px; border: 1px solid #a99a78; background: #fbf5e2; }
.v5-scroll { border: 1px solid #c9bc9a; background: #fffaf0; }
.v5-layout { align-items: stretch; }
.v5-side { align-self: stretch; transform: none; }
@media (min-width: 761px) {
  .v5-paper { align-items: stretch; gap: 10px 12px; padding: 12px 14px; }
  .v5-paper > p { margin-bottom: 4px !important; }
  .v5-paper > .v5-warrant { margin-bottom: 6px; }
  .v5-paper .v5-form { padding: 12px; border-left: 1px solid #a99a78; }
}
@media (max-width: 760px) {
  .v5-paper { padding: 16px 12px; }
  .v5-paper .v5-form { margin-top: 12px; }
}

/* Start page: a larger headline, and Doris leaning over the edge of her button. */
@media (min-width: 761px) {
  .preroll { grid-template-columns: minmax(0, 1.5fr) minmax(220px, .8fr); }
  .preroll-title { font-size: clamp(36px, 6.6vh, 68px); line-height: 1.04; margin-bottom: clamp(14px, 2.6vh, 28px); }
  .preroll-copy > p:not(.game-kicker) { font-size: clamp(17px, min(1.5vw, 2.5vh), 23px); line-height: 1.5; }
  .game-brief { margin-block: clamp(16px, 3.4vh, 34px); padding-block: clamp(12px, 2vh, 20px); font-size: clamp(14px, 1.15vw, 17px); }
  .preroll .game-kicker { margin-bottom: clamp(10px, 2.2vh, 22px) !important; }
}
.preroll-actions { align-items: center; gap: 30px; }
.begin-button { position: relative; overflow: visible; padding-right: 62px; }
.preroll-actions .begin-button { padding-right: 62px; }
.begin-doris { position: absolute; right: -16px; top: 50%; width: 68px; height: 68px; overflow: hidden; translate: 0 -50%; rotate: 6deg; border: 3px solid var(--ink); border-radius: 50%; background: #f1e6d2; box-shadow: 2px 3px 0 #15252b40; pointer-events: none; }
.begin-doris .doris-art { display: block; }
.begin-doris .doris-sprite { top: -9%; }
@media (prefers-reduced-motion: no-preference) {
  .begin-doris { transition: rotate .15s ease-out; }
  .begin-button:hover .begin-doris { rotate: -4deg; }
}
@media (max-width: 760px) {
  .preroll-actions { gap: 14px; }
  .preroll-actions .begin-button { padding-inline: 62px; }
  .begin-doris { right: 6px; width: 62px; height: 62px; }
}

/* The personnel file stays level with the agreement on laptop heights. */
@media (min-width: 761px) and (max-height: 950px) {
  .v5-layout { grid-template-columns: minmax(0, 2.7fr) minmax(230px, 1fr); }
  .v5-side { padding: 10px 12px; font-size: 11px; line-height: 1.35; }
  .v5-side > p { margin-block: 6px; }
  .v5-side .file-label { margin-bottom: 8px; padding-bottom: 6px; }
  .v5-side .file-role { margin-bottom: 8px !important; }
  .v5-clerk { min-height: 38px; }
  .v5-clerk-note { margin-top: 6px !important; }
  .file-privacy { padding-top: 6px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .v5-side .doris-avatar { width: 60px; height: 60px; margin-bottom: 4px; }
  .v5-paper > p { font-size: 10px !important; }
  .v5-paper > .v5-warrant { margin-bottom: 4px; padding-block: 3px; }
  .v5-paper h3 { margin-bottom: 4px; }
}

/* The agreement's extra borders are paid for out of its margins on laptops. */
@media (min-width: 761px) and (max-height: 950px) {
  .villain[data-decay="5"] .scene-body { padding-block: 10px; }
  .v5-paper { padding-block: 10px; }
  .v5-paper h3 { margin-bottom: 4px; }
  .v5-paper > .v5-warrant { padding-block: 4px; margin-bottom: 4px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .villain[data-decay="5"] .scene-body { padding-block: 6px; }
  .v5-copy-stamp { margin-bottom: 6px; }
  .v5-sign-label { margin: 4px 0 3px; }
  .v5-sign-tools { margin-top: 5px; }
}

@media (prefers-reduced-motion: no-preference) {
  .v3-choice.danger { animation: juice-glow 1.5s ease-in-out infinite, juice-shine 3s ease-in-out infinite; }
  .v3-choice.danger::after { animation: juice-ring 1.5s ease-out infinite; }
  .v3-choice.danger > i { animation: juice-twinkle 2.1s ease-in-out infinite; }
  .v3-choice.danger > i:nth-of-type(2) { animation-delay: .55s; }
  .v3-choice.danger > i:nth-of-type(3) { animation-delay: 1.05s; }
  .v3-choice.danger > i:nth-of-type(4) { animation-delay: 1.6s; }
  .v3-locked[data-hits="1"] { animation: lock-rattle .42s ease-out; }
  .v3-locked[data-hits="2"] { animation: lock-rattle-hard .52s ease-out; }
  .v3-locked[data-hits="3"] { animation: lock-rattle-hard .3s ease-out, lock-flash .55s ease-out; }
  .v3-locked[data-hits="1"] .v3-padlock { animation: padlock-swing .55s ease-out; }
  .v3-locked[data-hits="2"] .v3-padlock { animation: padlock-swing-hard .65s ease-out; }
  .v3-locked[data-hits="3"] .v3-padlock { animation: padlock-drop .85s cubic-bezier(.45, 0, .9, .6) both; }
  .v3-locked[data-hits="3"] .v3-shackle { animation: shackle-open .2s ease-out both; }
  .v3-locked[data-hits="3"] .v3-chain { animation: chain-drop .8s cubic-bezier(.4, 0, .9, .6) both; }
  .v3-sparks i { animation: spark-fly .6s cubic-bezier(.15, .7, .3, 1) both; }
}
@keyframes juice-glow {
  0%, 100% { box-shadow: inset 0 1px #ffffff99, inset 0 -3px 5px #6d0c2380, 0 2px #6d0c23, 0 0 14px 3px #ff2f5599; }
  50% { box-shadow: inset 0 1px #ffffffcc, inset 0 -3px 5px #6d0c2380, 0 2px #6d0c23, 0 0 32px 10px #ff2f55ee; }
}
@keyframes juice-shine { 0%, 40% { background-position: 100% 0, 0 0; } 80%, 100% { background-position: 0% 0, 0 0; } }
@keyframes juice-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.09, 1.7); opacity: 0; } }
@keyframes juice-twinkle { 0%, 60%, 100% { transform: scale(0) rotate(0); opacity: 0; } 30% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes lock-rattle { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-1deg); } 45% { transform: translateX(4px) rotate(1deg); } 70% { transform: translateX(-2px); } }
@keyframes lock-rattle-hard { 0%, 100% { transform: none; } 15% { transform: translate(-7px, 1px) rotate(-2deg); } 35% { transform: translate(7px, -1px) rotate(2deg); } 55% { transform: translate(-5px, 1px) rotate(-1deg); } 75% { transform: translate(4px, 0) rotate(1deg); } }
@keyframes lock-flash { 0%, 100% { filter: none; } 18% { filter: brightness(1.7); } }
@keyframes padlock-swing { 0% { transform: none; } 30% { transform: rotate(-16deg); } 60% { transform: rotate(14deg); } 100% { transform: rotate(9deg); } }
@keyframes padlock-swing-hard { 0% { transform: rotate(9deg); } 25% { transform: rotate(28deg); } 55% { transform: rotate(-30deg); } 80% { transform: rotate(-6deg); } 100% { transform: translateY(3px) rotate(-16deg); } }
@keyframes padlock-drop { 0% { transform: translateY(3px) rotate(-16deg); opacity: 1; } 25% { transform: translateY(-10px) rotate(16deg); opacity: 1; } 100% { transform: translateY(120px) rotate(150deg); opacity: 0; } }
@keyframes shackle-open { to { transform: translateY(-4px) rotate(-36deg); } }
@keyframes chain-drop { to { transform: translate(var(--chain-x), 110px) rotate(calc(var(--chain-tilt) + var(--chain-spin))); opacity: 0; } }
@keyframes spark-fly { from { transform: none; opacity: 1; } to { transform: translate(var(--spark-x), var(--spark-y)) scale(.3); opacity: 0; } }

/* The chat fills in one bubble at a time. The chips wait for Doris. */
.saas-chat .chat-suggestions { transition: opacity .3s; }
.saas-chat.is-opening .chat-suggestions { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  #v1-chat-log > .is-new { animation: chat-arrive .24s ease-out; }
}
@keyframes chat-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Doris hides the AI in her title, slowly enough for everyone to watch. */
.chat-ai-word { position: relative; display: inline-block; }
.chat-ai-word::after { content: ''; position: absolute; inset: 0 -2px; background: #15121f; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s ease-in; }
.chat-ai-word.is-redacted::after { transform: scaleX(1); transition: transform 3.4s linear(0, .2 14%, .22 30%, .48 42%, .5 62%, .8 72%, .82 86%, 1); }
@media (prefers-reduced-motion: no-preference) {
  .chat-ai-word.is-redacting::before { content: '🖊️'; position: absolute; z-index: 1; left: 0; top: -9px; font-size: 13px; pointer-events: none; animation: redact-pen 3.4s linear(0, .2 14%, .22 30%, .48 42%, .5 62%, .8 72%, .82 86%, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-ai-word::after, .chat-ai-word.is-redacted::after { transition: none; }
}
@keyframes redact-pen { 0%, 97% { opacity: 1; } 0% { left: -4px; } 97%, 100% { left: 100%; } 100% { opacity: 0; } }

/* The link leaves its card and zips around the department. */
.v1-link.is-roaming { position: absolute; z-index: 30; margin: 0; width: max-content; min-height: 28px; padding: 4px; color: #767b92; transition: left 160ms ease-out, top 160ms ease-out; }

/* A short rewrite never leaves one word alone on a line. */
.letter-line strong { text-wrap: balance; }
.v2-letter-doris blockquote { text-wrap: pretty; }

/* Randomize spins, and it always lands on Accept all. Reject all shorts out. */
.v3-reject { position: relative; z-index: 2; }
.v3-reject-error, .v3-cracks, .v3-smoke { display: none; }
.v3-reject.is-broken { color: #ffb454; border-color: #11151a; background: linear-gradient(#3b434f, #1f252d); box-shadow: inset 0 0 12px #0009; text-shadow: 0 0 6px #ff8a1a99; cursor: not-allowed; }
.v3-reject.is-broken .v3-reject-label { display: none; }
.v3-reject.is-broken .v3-reject-error { display: inline; position: relative; z-index: 1; }
.v3-reject-error b { font-size: 15px; letter-spacing: .06em; }
.v3-reject.is-broken .v3-cracks { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.v3-reject.is-broken .v3-smoke { display: block; position: absolute; bottom: 55%; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #59626dd9, #59626d00 70%); opacity: 0; pointer-events: none; }
.v3-smoke:nth-of-type(1) { left: 22%; }
.v3-smoke:nth-of-type(2) { left: 52%; }
.v3-smoke:nth-of-type(3) { left: 76%; }
@media (prefers-reduced-motion: no-preference) {
  .v3-roll.is-rolling { animation: lock-rattle .3s ease-in-out infinite; }
  .v3-roll.is-rolling > span { display: inline-block; animation: roll-spin .3s linear infinite; }
  .v3-reject.is-broken { animation: reject-short .9s steps(1); }
  .v3-reject.is-broken .v3-smoke { animation: reject-smoke 2.6s ease-out infinite; }
  .v3-reject.is-broken .v3-smoke:nth-of-type(2) { animation-delay: .8s; }
  .v3-reject.is-broken .v3-smoke:nth-of-type(3) { animation-delay: 1.6s; }
  .v3-locked[data-hits="1"] .v3-chain:nth-of-type(5), .v3-locked[data-hits="2"] .v3-chain:nth-of-type(5), .v3-locked[data-hits="2"] .v3-chain:nth-of-type(3) { animation: chain-drop .8s cubic-bezier(.4, 0, .9, .6) both; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-locked[data-hits="1"] .v3-chain:nth-of-type(5), .v3-locked[data-hits="2"] .v3-chain:nth-of-type(5), .v3-locked[data-hits="2"] .v3-chain:nth-of-type(3) { display: none; }
}
@keyframes roll-spin { to { transform: rotate(360deg); } }
@keyframes reject-short { 0% { filter: brightness(2.2); } 10% { filter: brightness(.4); transform: translateX(-3px); } 22% { filter: brightness(1.9); transform: translateX(3px); } 34% { filter: brightness(.5); transform: none; } 46% { filter: brightness(1.6); transform: translateX(-2px); } 60% { filter: brightness(.6); transform: none; } 74% { filter: brightness(1.3); } 100% { filter: none; } }
@keyframes reject-smoke { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate(10px, -64px) scale(2.6); } }

/* The EXIT NOW!!! banner is a ticker that never ends. */
.v4-banner { display: flex; align-items: center; justify-content: flex-start; overflow: hidden; white-space: nowrap; }
.v4-ticker { display: inline-flex; flex: none; align-items: center; }
.v4-ticker-item { display: inline-flex; flex: none; align-items: center; gap: 12px; padding-right: 2em; }
@media (prefers-reduced-motion: no-preference) {
  .v4-ticker { animation: v4-ticker 70s linear infinite; }
  .v4-banner-stack .v4-banner:nth-child(even) .v4-ticker { animation-direction: reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .v4-banner { justify-content: center; white-space: normal; }
  .v4-ticker { display: block; flex: 1; }
  .v4-ticker-item { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; padding-right: 0; }
  .v4-ticker-item:not(:first-child) { display: none; }
}
@keyframes v4-ticker { to { transform: translateX(-50%); } }

/* Whatever the ads leave goes to more EXIT NOW!!! banners. */
.v4-banner-stack { display: grid; grid-auto-rows: 1fr; gap: 6px; width: 100%; max-width: 1180px; margin: 8px auto 0; }
.v4-banner-stack[hidden] { display: none; }
.v4-banner-stack .v4-banner { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0 10px; overflow: hidden; font-size: var(--banner-font, 24px); line-height: 1; white-space: nowrap; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .v4-banner-stack .v4-banner { justify-content: flex-start; }
}

/* The fine print takes all the height its box has. Paperwork sits below it. */
.v5-document { display: flex; flex-direction: column; }
.v5-reading-tools { flex: none; margin-bottom: 6px; }
.v5-scroll { flex: 1 1 auto; min-height: 0; }
.v5-page { flex: 1; min-width: 0; margin: 0; font-size: 10px; line-height: 1.3; }
.v5-admin { flex: none; display: flex; align-items: stretch; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #b9ad8c; }
.v5-initial { display: grid; align-content: center; justify-items: center; flex: 1 1 0; gap: 1px; min-width: 0; height: 34px; padding: 1px; border: 1px solid #a99a78; background: #fff; cursor: pointer; }
.v5-initial.is-yellow { background: #fbeea4; }
.v5-initial.is-pink { background: #f8c9d2; }
.v5-initial small { font: 8px/1 'Courier New',monospace; color: #514832; }
.v5-initial b { min-height: 15px; font: italic 700 14px/1 Georgia,serif; color: #1f3a7a; }
.v5-initial b:empty::before { content: 'tap here'; font: italic 400 10px/15px Georgia,serif; color: #8a7c62; }
.v5-admin .v5-clip-btn { position: relative; flex: none; overflow: visible; padding-inline: 8px; }
.v5-clip-art { position: absolute; z-index: 3; right: 2px; top: 50%; overflow: hidden; width: 42px; height: 84px; transform: translateY(-50%) rotate(16deg); filter: drop-shadow(1px 2px 1px #0005); pointer-events: none; }
.v5-clip-art > .raster-art { position: absolute; left: 50%; top: 50%; width: 60px; max-width: none; height: 148px; transform: translate(-50%, -50%); }
.v5-clip-btn[aria-pressed="true"] .v5-clip-art { display: none; }
.v5-doc-clip { position: absolute; right: 8px; top: -16px; z-index: 2; display: none; width: 20px; height: 46px; transform: rotate(5deg); pointer-events: none; }
.v5-document.is-clipped .v5-doc-clip { display: block; }
.v5-doc-clip > .raster-art { display: block; width: 100%; height: 100%; }
.v5-office { clear: both; margin-top: 10px; padding-top: 8px; border-top: 1px solid #aa9c7e; }
.v5-side .v5-office-label { margin: 0 0 6px; font: 700 9px/1.2 'Courier New',monospace; letter-spacing: .03em; text-transform: uppercase; color: #7b3c2f; }
.v5-office-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.v5-rubber, .v5-thumb { position: relative; display: grid; place-items: center; min-height: 44px; padding: 10px 2px 2px; border: 1px dashed #8d7d5a; background: #fbf5e2; color: #514832; cursor: pointer; overflow: hidden; }
.v5-rubber small, .v5-thumb small { position: absolute; left: 4px; top: 3px; font: 8px/1 'Courier New',monospace; }
.v5-rubber b { display: block; padding: 1px 5px; border: 2px solid #b32f2f; color: #b32f2f; font: 900 12px/1.1 Barlow,sans-serif; letter-spacing: .08em; transform: rotate(-7deg); }
.v5-rubber b:empty { padding: 0; border: 0; transform: none; }
.v5-rubber b:empty::before, .v5-thumb[aria-pressed="false"]::after { content: 'tap here'; font: italic 400 10px/15px Georgia,serif; letter-spacing: 0; color: #8a7c62; }
.v5-print { display: none; width: 24px; height: 31px; opacity: .85; }
.v5-thumb[aria-pressed="true"] .v5-print { display: block; }
.v5-initial:focus-visible, .v5-rubber:focus-visible, .v5-thumb:focus-visible { outline: 2px solid #2b2619; outline-offset: 1px; }
.v5-side .file-privacy { margin: 8px 0 0; }
@media (min-width: 761px) {
  .v5-layout { flex: 1 0 auto; margin: 0 auto; }
  .v5-paper { grid-template-rows: auto auto minmax(0, 1fr); }
  .v5-scroll { height: 0; min-height: 120px; }
  .v5-paper .v5-form { display: flex; flex-direction: column; }
  .v5-form > * { flex: none; }
  .v5-form > .v5-copy-stamp { align-self: flex-start; }
  .v5-form > .v5-sign-pad { flex: 1 1 auto; min-height: 64px; max-height: 240px; }
  #v5-signature { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
@media (min-width: 761px) and (min-height: 880px) and (max-height: 950px) {
  .v5-side .doris-avatar { width: 116px; height: 116px; }
  .v5-rubber, .v5-thumb { min-height: 54px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .v5-office { margin-top: 6px; padding-top: 6px; }
  .v5-rubber, .v5-thumb { min-height: 36px; padding-top: 8px; }
  .v5-rubber b { padding-block: 0; font-size: 10px; }
  .v5-print { width: 18px; height: 23px; }
}
@media (prefers-reduced-motion: no-preference) {
  .v5-rubber[aria-pressed="true"] b { animation: v5-thump .22s ease-out; }
}
@keyframes v5-thump { from { transform: rotate(-7deg) scale(2.2); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: 1; } }

/* The ending keeps its text together and borrows the site's full heading. */
/* Doris takes the left of the block, and everything else lines up beside her. */
.debrief { display: grid; grid-template-columns: clamp(150px, 26vh, 260px) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 36px); align-items: center; }
.debrief > .debrief-avatar { grid-column: 1; grid-row: 1 / span 4; }
.debrief > .game-kicker { grid-column: 2; grid-row: 1; margin-bottom: 10px !important; }
.debrief > .debrief-copy { grid-column: 2; grid-row: 2; }
.debrief > .run-totals { grid-column: 2; grid-row: 3; }
.debrief > .receipt-actions { grid-column: 2; grid-row: 4; }
.debrief-copy { min-width: 0; }
.debrief-copy h2 { margin: 0; }
.run-totals { grid-template-columns: auto auto auto; justify-content: space-between; }
.run-totals dt { white-space: nowrap; }
@media (max-width: 360px) {
  .run-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .run-totals dt { white-space: normal; }
}
.honest-bar[hidden] { display: none; }
@media (min-width: 761px) {
  .receipt-wrap { max-width: 1240px; grid-template-columns: minmax(0, 1.4fr) minmax(340px, .9fr); }
}
@media (min-width: 761px) and (max-height: 820px) {
  .receipt-header .receipt-head { font-size: 12px; }
}
@media (max-width: 760px) {
  .debrief { grid-template-columns: 116px minmax(0, 1fr); column-gap: 14px; }
  .debrief > .game-kicker { grid-column: 1 / -1; grid-row: 1; }
  .debrief > .debrief-avatar { grid-column: 1; grid-row: 2; }
  .debrief > .run-totals { grid-column: 1 / -1; }
  .debrief > .receipt-actions { grid-column: 1 / -1; }
}
.debrief-copy .debrief-line { margin-top: 6px; }
.run-totals { margin: 16px 0; padding-block: 14px; }
.debrief .receipt-actions { margin-top: 16px; }
@media (min-width: 761px) and (min-height: 820px) {
  .exit-opening.compact.is-final { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: center; min-height: 76px; }
  .exit-opening.compact.is-final .exit-emblem { grid-row: 1 / span 2; width: 76px; height: 76px; border-radius: 12px; }
  .is-final .exit-h1 { align-self: end; font-size: clamp(44px, 3.125vw, 60px); line-height: 1.08; }
  .is-final .exit-sub { align-self: start; font-size: 21px; line-height: 1.35; white-space: normal; }
}

/* Every button on the agreement shares one short size, in capitals. */
.v5-btn { text-transform: uppercase; }
.v5-reading-tools .v5-btn, .v5-form .v5-btn, .v5-admin .v5-clip-btn { box-sizing: border-box; height: 34px; min-height: 34px; margin: 0; padding-block: 0; font-size: 11px; line-height: 1.15; letter-spacing: .03em; }
.v5-reading-tools .v5-btn, .v5-form .v5-btn { padding-inline: 10px; }

/* Undo sits beside the rewrite, and sentences start at the left margin. */
.letter-line button { min-height: 32px; padding: 4px 10px; }
.letter-line .letter-choice { min-height: 44px; padding: 8px 10px; }
.game-brief { grid-template-columns: minmax(0, 1fr); text-wrap: pretty; }
@media (max-width: 760px) {
  .letter-line { flex-wrap: nowrap; }
  .letter-line > div { flex: 1 1 auto; }
  .letter-line .letter-choice { margin-left: 0; }

  /* The cookie text wraps beside the jar instead of waiting below it. */
  .v3-intro-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 12px; }
  .v3-intro-panel h3 { grid-column: 1; grid-row: 1; margin-bottom: 6px; padding-right: 0; }
  .v3-intro-panel > p { grid-column: 1; grid-row: 2; margin-bottom: 12px; }
  .v3-intro-panel .v3-jar { grid-column: 2; grid-row: 1 / span 2; float: none; width: 84px; height: 84px; margin: 0; }
  .v3-intro-panel > .v3-choice-grid, .v3-recommendation { grid-column: 1 / -1; }
}

/* Doris talks from beside her bubble, and the phone and post pages use the full width. */
.v6-cancellation[data-channel="phone"], .v6-cancellation[data-channel="post"] { grid-template-columns: minmax(0, 1fr); }
.v6-phone-talk { display: grid; gap: 12px; min-width: 0; }
.v6-speech-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; min-width: 0; }
.v6-speech-row { --speaker: 116px; }
.v6-clerk-answer .v6-speech-row { --speaker: clamp(120px, 24vh, 200px); }
.v6-cancellation .v6-roundel.v6-speaker { width: var(--speaker); height: var(--speaker); }
.v6-speech-row .v6-speech::before { top: calc(var(--speaker) / 2 - 11px); }
.v6-speech-row .v6-speech::after { top: calc(var(--speaker) / 2 - 10px); }
.v6-speech-column { display: grid; gap: 10px; min-width: 0; }
.v6-call-after { display: grid; justify-items: start; gap: 10px; padding-left: 4px; font-size: 15px; line-height: 1.35; }
.v6-call-after p { margin: 0; }
.v6-call-after .v6-route-error { margin: 0; }

/* The clerk finally answers, and a thumbs up is all it takes. */
.v6-clerk-answer { display: grid; justify-items: center; padding-block: clamp(8px, 4vh, 40px); }
.v6-clerk-answer .v6-speech-row { align-items: center; width: min(100%, 680px); }
.v6-clerk-answer .v6-speech .v6-call-quote { font-size: clamp(22px, 3.6vh, 32px); line-height: 1.25; }
.v6-thumbs { display: grid; place-items: center; min-width: 64px; min-height: 52px; padding: 2px 12px; border: 2px solid #8a6a2f; border-radius: 26px; background: #fff6da; font: 28px/1 Arial,sans-serif; cursor: pointer; }
.v6-thumbs:hover { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .v6-thumbs { animation: tap-glow 1.4s ease-in-out infinite; }
  .v6-thumbs.is-reacted { animation: thumb-pop .45s ease-out both; }
}
@keyframes thumb-pop { 40% { transform: scale(1.5) rotate(-10deg); } 100% { transform: scale(1.2); } }

/* The post desk. Paper and post box share one stage, and the narrative sits on the
   paper. The letter and the envelope take the same space, so nothing jumps. */
.v6-post-desk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; align-items: center; }
.v6-mail-stage { --stage-h: clamp(190px, 33vh, 340px); position: relative; box-sizing: border-box; justify-self: center; width: min(100%, var(--stage-h) * 1.6); aspect-ratio: 8 / 5; margin-bottom: 8px; }
.v6-mail-piece { position: absolute; inset: 0 5% 0 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 12px 16px; background: #fff6da; color: #503b23; border: 1px solid #beaa7c; box-shadow: 2px 4px 5px #52381e30; font: 15px/1.3 Georgia,serif; transform: rotate(-1deg); }
.v6-mail-piece strong { font-size: clamp(18px, 3.4vh, 24px); line-height: 1.2; }
.v6-mail-piece em { max-width: 66%; font-size: 13px; }
.v6-mail-piece.is-folded { background: linear-gradient(155deg, transparent 49.5%, #b9a07866 50%, transparent 50.5%) #f9eac3; }
.v6-envelope-from { font: italic 12px/1.3 Georgia,serif; }
.v6-envelope-to { max-width: 80%; font-size: clamp(14px, 2.3vh, 17px); line-height: 1.3; }
.v6-cancellation .v6-mail-instruction { display: block; max-width: 64%; margin: auto 0 0; font: italic 14px/1.3 Georgia,serif; color: #52381e; }
.v6-return-mark { padding: 2px 4px; border-block: 3px double currentColor; color: #9a3021; font-size: 15px; letter-spacing: .03em; transform: rotate(-3deg); }
.v6-return-note { color: #9a3021; font: italic 14px/1.2 Georgia,serif; }
.v6-mail-piece.is-returned .v6-return-mark { margin-top: auto; }
.v6-mail-piece.is-returned .v6-return-note { margin-bottom: auto; }
.v6-mail-piece.is-returned .v6-mail-instruction { margin-top: 0; }
.v6-postbox { position: absolute; right: 0; bottom: -8px; width: 32%; appearance: none; padding: 0; border: 0; background: transparent; color: #fff5d0; cursor: pointer; font: bold 10px/1.3 Georgia,serif; }
.v6-postbox img { display: block; width: 100%; height: auto; }
.v6-postbox span { position: absolute; left: 14%; right: 14%; top: 36%; padding: 4px 2px; background: #352216e6; }
@media (min-width: 1001px) {
  .v6-post-desk { grid-template-columns: auto minmax(0, 1fr); }
  .v6-mail-stage { justify-self: start; width: calc(var(--stage-h) * 1.6); }
  .v6-post-desk .v6-speech-row { --speaker: clamp(92px, 20vh, 170px); }
  .v6-post-desk .v6-speech { font-size: clamp(16px, 2.6vh, 20px); }
  .v6-call-after:has(.v6-route-action) { grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
}

/* Paper you can act on says so, then folds itself away. */
.v6-mail-piece.is-tappable { appearance: none; text-align: left; cursor: pointer; }
button.v6-postage { appearance: none; background: #fff6da; cursor: pointer; }
.is-tappable::after { content: '👆'; position: absolute; font-size: 24px; line-height: 1; pointer-events: none; }
.v6-mail-piece.is-tappable::after { left: 36%; top: 59%; margin: -12px 0 0 -12px; }
.v6-postage.is-tappable::after { right: -10px; bottom: -14px; }
.v6-mail-piece.is-folding::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .is-tappable { animation: tap-glow 1.4s ease-in-out infinite; }
  .is-tappable::after { animation: tap-hint .9s ease-in-out infinite; }
  .v6-mail-piece.is-folding { animation: letter-fold .5s ease-in both; }
}
@keyframes tap-glow { 0%, 100% { box-shadow: 2px 4px 5px #52381e30; } 50% { box-shadow: 0 0 0 3px #c9a227, 0 0 16px 5px #e0b13fb0; } }
@keyframes tap-hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes letter-fold { 0% { transform: rotate(-1deg) scaleY(1); } 45% { transform: rotate(-1deg) scaleY(.5) skewX(4deg); } 100% { transform: rotate(-1deg) scale(.78, .12); opacity: .35; } }

@media (min-width: 761px) and (max-height: 820px) {
  .v6-speech-row { --speaker: 92px; }
  .v6-clerk-answer .v6-speech-row { --speaker: 120px; }
  .v6-speech { padding: 10px 14px; font-size: 15px; }
}
@media (max-width: 760px) {
  .v6-phone-talk { display: contents; }
  .v6-speech-row { --speaker: 92px; order: 1; grid-template-columns: var(--speaker) minmax(0, 1fr); gap: 20px; }
  .v6-clerk-answer { padding-block: 0 4px; }
  .v6-clerk-answer .v6-speech-row { --speaker: 116px; gap: 18px; }
  .v6-clerk-answer .v6-speech .v6-call-quote { font-size: 19px; }
  .v6-rotary { margin-top: -24px; }
  .v6-phone-directory { order: 3; }
  .v6-mail-piece { padding: 12px 14px; }
  .v6-envelope-to { font-size: 16px; }
  .v6-mail-piece strong { font-size: 20px; }
}

/* On phones the outcome tag still holds its text and both buttons. */
@media (max-width: 760px) {
  .v-stamp-layer { padding: 8px; }
  .tag-content { inset: 7% 4% 7% 31%; gap: 5px; }
  .tag-copy { gap: 2px; }
  .tag-status { font-size: min(18px, (100vw - 20px) * .043); white-space: nowrap; }
  .departure-tag .stamp-detail { font-size: 12px; line-height: 1.2; }
  .departure-tag .stamp-continue, .stamp-replay { min-height: 34px; padding: 4px 14px; }

  .receipt-header { gap: 8px; }
  .receipt-header .receipt-head { font-size: min(13px, max(10px, (100vw - 244px) / 12.6)); }
  .receipt-header .receipt-approved { font-size: 12px; padding: 5px 6px; }
}
@media (max-width: 360px) {
  .departure-tag .stamp-detail { display: none; }
}
.v6-mail-piece strong.v6-return-mark { font-size: 14px; }