/* The Sealed Room: the fall-off audit (/audit). Black, bone and one red seam per screen. Mobile first (375px).
   Type: brat everywhere, bold lowercase Arial/Helvetica for what he reads first and Arial for the rest. */

:root {
  --ink: #07060a; --wall: #121016; --wall2: #1a1720; --bone: #ece7dc; --dim: #8b857c; --red: #d81f2b; --ember: #3d070d;
  --line: rgba(236, 231, 220, .12);
  --brat: Arial, Helvetica, 'Liberation Sans', sans-serif;
  --body: Arial, Helvetica, 'Liberation Sans', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.au { margin: 0; min-height: 100vh; background: radial-gradient(ellipse 80% 40% at 50% 110%, rgba(216, 31, 43, .12), transparent 70%), var(--ink); color: var(--bone);
  font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.au [hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.red { color: var(--red); }
.au-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the top: brand and the road ---------- */
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 8px; }
.au-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 700 15px var(--brat); letter-spacing: -.02em; }
.au-road-label { font: 700 13px var(--brat); color: var(--dim); text-align: right; }
.au-road { position: sticky; top: 0; z-index: 20; height: 22px; padding: 0 16px; background: linear-gradient(var(--ink), rgba(7, 6, 10, .85)); }
.au-road-track { position: relative; top: 9px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(236, 231, 220, .14) 0 10px, transparent 10px 18px); overflow: hidden; }
.au-road-track i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--ember), #93331b 50%, var(--red)); transition: transform .6s var(--ease); }
.au-road-stone { position: absolute; top: 5px; left: 0; width: 12px; height: 12px; margin-left: 10px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 12px rgba(216, 31, 43, .7); transform: translateX(-50%); transition: left .6s var(--ease); }

/* ---------- the column and a screen ---------- */
.au-col { width: 100%; max-width: 620px; margin: 0 auto; padding: 18px 16px 90px; outline: none; }
.au-col.wide { max-width: 760px; }
.au-screen.in { animation: au-in .5s var(--ease) both; }
@keyframes au-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
h1, h2 { margin: 0 0 14px; font: 700 clamp(30px, 8vw, 46px)/1.02 var(--brat); letter-spacing: -.045em; text-transform: lowercase; text-wrap: balance; outline: none; }
h2 { font-size: clamp(26px, 6.6vw, 38px); }
.au-h2b { margin-top: 10px; }
p { margin: 0 0 14px; }
.au-eyebrow { font: 700 13px var(--brat); letter-spacing: 0; color: var(--dim); margin-bottom: 10px; }
.au-eyebrow.red { color: #b9b2a6; }   /* one red moment per screen: the eyebrow stays quiet */
h1:focus, h2:focus { outline: none; }
.soft { color: #b9b2a6; }
.au-lead { font-size: 18px; color: var(--bone); }
.au-help { color: var(--dim); margin-bottom: 20px; }
.au-dim { color: var(--dim); }
.au-count { font: 700 13px var(--brat); color: var(--dim); margin-bottom: 8px; }
.au-label { font: 700 12.5px var(--brat); color: var(--dim); margin: 0 0 8px; }
.au-note { padding: 12px 14px; border-radius: 12px; background: var(--wall); color: var(--bone); font-size: 15px; }
.au-concern { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(236, 231, 220, .3); background: var(--wall2); font-size: 15px; }

/* the sealed door on the first screen: one red line of light down its seam */
.au-door { position: relative; width: 120px; height: 160px; margin: 6px 0 22px; border-radius: 60px 60px 6px 6px; border: 2px solid var(--line); background: linear-gradient(180deg, var(--wall2), var(--wall)); }
.au-door i { position: absolute; left: 50%; top: 18px; bottom: 10px; width: 2px; margin-left: -1px; background: var(--red); box-shadow: 0 0 16px 2px rgba(216, 31, 43, .7); }
@media (prefers-reduced-motion: no-preference) { .au-door i { animation: au-seam 3.2s ease-in-out infinite; } }
@keyframes au-seam { 50% { box-shadow: 0 0 26px 5px rgba(216, 31, 43, .85); } }

/* ---------- buttons ---------- */
.au-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.au-actions.stack { flex-direction: column; align-items: stretch; }
.au-cta, .au-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 700 17px var(--brat); letter-spacing: -.02em; text-transform: lowercase; text-decoration: none; cursor: pointer; transition: transform .15s, background .2s, opacity .2s; }
.au-cta { border: 0; background: var(--bone); color: var(--ink); }
.au-cta:hover { background: #fff; }
.au-cta:active { transform: scale(.98); }
.au-cta:disabled { opacity: .3; cursor: not-allowed; }
.au-ghost { border: 1px solid var(--line); background: transparent; color: var(--bone); }
.au-ghost:hover { border-color: var(--bone); }
.au-link { margin-top: 18px; padding: 8px 0; border: 0; background: none; color: var(--dim); font: 400 15px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- choices: big tap targets, many can be on ---------- */
.au-group + .au-group { margin-top: 18px; }
.au-glabel { font: 700 13px var(--brat); color: var(--dim); margin-bottom: 8px; }
.au-choices { display: grid; gap: 8px; }
.au-choices.grid { grid-template-columns: 1fr 1fr; }
.au-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--wall); color: var(--bone); font: 500 16px/1.3 var(--body); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.au-choice:hover { border-color: rgba(236, 231, 220, .3); }
.au-choice .k { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(236, 231, 220, .35); }
.au-choices.single .au-choice .k { border-radius: 50%; }
.au-choice[aria-pressed="true"] { border-color: var(--red); background: linear-gradient(135deg, rgba(216, 31, 43, .16), rgba(61, 7, 13, .5)); }
.au-choice[aria-pressed="true"] .k { border-color: var(--red); background: var(--red); box-shadow: inset 0 0 0 3px var(--wall); }
.au-other { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.au-other label { flex: none; font: 700 13px var(--brat); color: var(--dim); }
.au-other-in { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--bone); font: 400 16px var(--body); }
.au-other-in:focus, .au-field:focus { outline: none; border-color: var(--bone); }

/* ---------- typing: the field warms up the more he writes ---------- */
.au-field { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--wall); color: var(--bone); font: 400 17px/1.5 var(--body); resize: vertical; }
.au-field.long { min-height: 190px; }
.au-meter { height: 3px; margin-top: 8px; border-radius: 3px; background: rgba(236, 231, 220, .08); overflow: hidden; }
.au-meter i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--dim); transition: transform .3s, background .3s; }
.au-meter.warm i { background: var(--red); }

/* ---------- the seal ---------- */
.au-seal { display: grid; gap: 14px; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--wall); }
.au-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--bone); cursor: pointer; }
.au-consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--red); }
.au-msg { margin: 0; min-height: 1em; color: #ff8a8f; font-size: 15px; }
.au-msg:empty { display: none; }
.au-privacy { margin-top: 14px; font-size: 13.5px; color: var(--dim); }

/* ---------- reading ---------- */
.au-bar { height: 6px; margin: 18px 0; border-radius: 6px; background: rgba(236, 231, 220, .08); overflow: hidden; }
.au-bar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--ember), var(--red)); transition: transform .4s; }
.au-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--dim); }
.au-stages li::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; border: 1px solid var(--dim); }
.au-stages li.ok { color: var(--bone); }
.au-stages li.ok::before { background: var(--red); border-color: var(--red); }

/* ---------- the read ---------- */
.au-sealed { position: relative; padding: 22px 20px; border-radius: 18px; border: 1px solid rgba(216, 31, 43, .45); background: linear-gradient(160deg, rgba(216, 31, 43, .12), rgba(61, 7, 13, .35)); overflow: hidden; }
.au-secret { margin: 0; font: 700 clamp(21px, 5.4vw, 26px)/1.25 var(--brat); letter-spacing: -.03em; transition: filter .6s, opacity .6s; }
.au-sealed:not(.open) .au-secret { filter: blur(9px); opacity: .55; user-select: none; }
.au-unseal { margin-top: 16px; }
.au-evidence { display: grid; gap: 10px; margin: 18px 0; }
.au-ev { display: grid; gap: 6px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--wall); color: var(--bone); font: 400 16px/1.45 var(--body); text-align: left; cursor: pointer; }
.au-ev q { font-weight: 600; quotes: '“' '”'; }
.au-ev .au-mean { display: none; color: var(--bone); }
.au-ev .au-tap { color: var(--dim); font-size: 13px; }
.au-ev.on .au-mean { display: block; }
.au-ev.on .au-tap { display: none; }
.au-ev.on { border-color: rgba(216, 31, 43, .4); }
.au-prose p { color: var(--bone); }

/* ---------- the road: a real road, walked stop by stop, ending at a sign ---------- */
.au-route { position: relative; padding: 6px 0 0; }
.au-route::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 34px; margin-left: -17px; border-radius: 6px; background: linear-gradient(var(--wall2), var(--wall)); }
.au-route::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, rgba(236, 231, 220, .35) 0 14px, transparent 14px 26px); }
.au-route.pain::after { background: repeating-linear-gradient(180deg, rgba(216, 31, 43, .55) 0 14px, transparent 14px 26px); }
/* stops he has not reached yet take no room, so the next-stop button is always right under the last one */
.au-stop { position: relative; z-index: 1; display: none; padding: 10px 0; }
.au-stop.on { display: flex; animation: au-in .5s var(--ease) both; }
.au-stop .pin { position: absolute; left: 50%; top: 26px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 4px var(--ink); }
.au-route.pain .au-stop .pin { background: var(--red); }
.au-stop .card { width: calc(50% - 26px); padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--wall); }
.au-stop.l { justify-content: flex-start; } .au-stop.r { justify-content: flex-end; }
.au-stop .when { margin: 0 0 4px; font: 700 13px var(--brat); color: var(--dim); }
.au-stop .scene { margin: 0; font-size: 15px; line-height: 1.45; }
.au-end { position: relative; z-index: 1; display: none; justify-content: center; padding: 18px 0 6px; }
.au-end.on { display: flex; animation: au-in .6s var(--ease) both; }
.au-end .sign { width: min(420px, 100%); padding: 16px 18px; border-radius: 10px; border: 2px solid var(--bone); background: var(--ink); text-align: center; }
.au-route.pain .au-end .sign { border-color: var(--red); }
.au-end .sign p { margin: 0; }
.au-end .sign p + p { margin-top: 6px; font: 700 17px/1.3 var(--brat); letter-spacing: -.02em; }
/* the next-stop button sits on the road, where it ends for now */
.au-route > .au-actions { position: relative; z-index: 2; justify-content: center; width: max-content; margin: 14px auto 0; padding: 12px 14px 4px; background: var(--ink); }
.au-rule { margin: 34px 0 22px; border: 0; border-top: 1px solid var(--line); }
@media (max-width: 520px) {
  .au-route::before, .au-route::after { left: 18px; }
  .au-stop .pin { left: 18px; }
  .au-stop.l, .au-stop.r { justify-content: flex-end; }
  .au-stop .card { width: calc(100% - 46px); }
  .au-choices.grid { grid-template-columns: 1fr; }
}

/* ---------- 24 hours ---------- */
.au-mission { margin-top: 20px; padding: 18px; border-radius: 16px; border: 1px solid rgba(216, 31, 43, .4); background: var(--wall); }
.au-mission ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 8px; }
.au-watch { margin: 0; font: 700 16px var(--brat); }

/* ---------- the letter ---------- */
.au-letter { padding: 18px; border-radius: 16px; background: var(--wall); border: 1px solid var(--line); }
.au-to { font: 700 18px var(--brat); letter-spacing: -.02em; }
.au-letter .au-field { background: var(--ink); }

/* ---------- small print and the consent bar (consent.js) ---------- */
.au-foot { display: flex; gap: 18px; justify-content: center; padding: 0 16px 28px; font-size: 13px; color: var(--dim); }
.au-foot a { text-decoration: none; }
#consent { position: fixed; z-index: 90; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(620px, calc(100vw - 20px)); display: flex; gap: 10px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: #121016; box-shadow: 0 -12px 40px rgba(0, 0, 0, .55); }
#consent p { margin: 0; flex: 1 1 220px; font-size: 13.5px; line-height: 1.4; color: var(--dim); }
#consent a { color: var(--bone); }
#consent .row { display: flex; gap: 8px; }
#consent button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--bone); font: 700 14px var(--brat); cursor: pointer; }
#consent button.yes { background: var(--bone); color: var(--ink); border-color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (min-width: 900px) { .au-col { padding-top: 34px; } }

/* the substack subscribe box (Substack's own embed) */
.au-substack { margin: 4px 0 6px; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.au-substack:empty { display: none; }
.au-substack iframe { display: block; width: 100%; height: 320px; border: 0; }

/* the wait: the step it's on now pulses, and a line says what it's doing when it runs long */
.au-stages li.now { color: var(--bone); }
.au-stages li.now::before { border-color: var(--red); animation: au-pulse 1s ease-in-out infinite; }
@keyframes au-pulse { 50% { background: var(--red); } }
@media (prefers-reduced-motion: reduce) { .au-stages li.now::before { animation: none; background: var(--red); } }
.au-wait { min-height: 1.5em; margin: 18px 0 0; color: var(--dim); font-size: 15px; }
/* the short answer is a box that grows */
.au-field.short { min-height: 60px; resize: none; overflow: hidden; }
/* the plan */
.au-pcard { margin-top: 16px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--wall); }
.au-pcard p { margin: 0; font-size: 16px; line-height: 1.55; }
.au-pcard:first-of-type { border-color: rgba(216, 31, 43, .45); }
.au-floor { font: 700 22px/1.25 var(--brat) !important; letter-spacing: -.02em; color: var(--bone); margin-bottom: 8px !important; }
.au-dim2 { color: var(--dim); font-size: 14.5px !important; margin-top: 10px !important; }
.au-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
.au-tick { display: grid; justify-items: center; gap: 2px; padding: 10px 0 8px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--bone); cursor: pointer; font: inherit; }
.au-tick b { font: 700 17px var(--brat); }
.au-tick small { font-size: 10.5px; color: var(--dim); }
.au-tick.today { border-color: var(--bone); }
.au-tick.on { background: var(--red); border-color: var(--red); }
.au-tick.on small { color: var(--bone); }
.au-tick:disabled { opacity: .35; cursor: default; }
.au-week { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.au-week li { font-size: 15.5px; line-height: 1.5; }
.au-week li b { display: inline-block; min-width: 52px; color: var(--dim); font: 700 13px var(--brat); }
.au-week li.today b { color: var(--red); }
/* keeping it: the free account */
.au-acct { margin-top: 22px; padding: 18px; border-radius: 16px; border: 1px dashed rgba(236, 231, 220, .28); }
.au-acct .au-help { margin: 0 0 12px; }
.au-acct-in { display: grid; gap: 8px; }
.au-acct .au-other-in { width: 100%; }
.au-agree { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; color: var(--dim); font-size: 14px; line-height: 1.45; }
.au-agree a { color: var(--bone); }
.au-agree input { margin-top: 3px; accent-color: var(--red); }
.au-cap:empty { display: none; }
/* pm's note at the end */
.au-pitch { margin: 6px 0 4px; padding: 20px; border-radius: 16px; background: var(--wall); border-left: 3px solid var(--red); }
.au-pitch p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.55; }
.au-pitch p:first-child { font-weight: 700; }
.au-pitch .au-sign { margin: 4px 0 0; color: var(--dim); font-weight: 700; }

/* ================= the look, 3 november: one red light moving through the back, buttons with depth, glass over it ================= */
/* the glow: two soft red washes wandering the whole screen, corner to corner, up, down and side to side, like apple music.
   each has its own path and speed so they never line up the same way twice. transform only, so it's cheap */
.au-glow { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.au-glow::before, .au-glow::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 50%; filter: blur(60px); will-change: transform; }
.au-glow::before { width: 95vmax; height: 95vmax; margin: -47.5vmax 0 0 -47.5vmax; background: radial-gradient(closest-side, rgba(216, 31, 43, .5), rgba(140, 18, 32, .24) 55%, transparent); animation: au-wander 38s ease-in-out infinite; }
.au-glow::after { width: 75vmax; height: 75vmax; margin: -37.5vmax 0 0 -37.5vmax; background: radial-gradient(closest-side, rgba(170, 20, 36, .4), transparent 70%); animation: au-wander2 52s ease-in-out -17s infinite; }
@keyframes au-wander {
  0%   { transform: translate3d(-38vw, 42vh, 0) scale(1); }     /* bottom left */
  17%  { transform: translate3d(36vw, -38vh, 0) scale(1.12); }  /* diagonal up to top right */
  33%  { transform: translate3d(-34vw, -34vh, 0) scale(.95); }  /* across the top */
  50%  { transform: translate3d(38vw, 40vh, 0) scale(1.15); }   /* diagonal down to bottom right */
  67%  { transform: translate3d(0, -42vh, 0) scale(1); }        /* up the middle */
  83%  { transform: translate3d(-40vw, 8vh, 0) scale(1.08); }   /* out to the left */
  100% { transform: translate3d(-38vw, 42vh, 0) scale(1); }     /* down home */
}
@keyframes au-wander2 {
  0%   { transform: translate3d(40vw, 36vh, 0) scale(1); }
  20%  { transform: translate3d(-36vw, -30vh, 0) scale(1.1); }
  40%  { transform: translate3d(34vw, -36vh, 0) scale(.92); }
  60%  { transform: translate3d(-30vw, 40vh, 0) scale(1.12); }
  80%  { transform: translate3d(10vw, 0, 0) scale(1); }
  100% { transform: translate3d(40vw, 36vh, 0) scale(1); }
}
body.au { background: var(--ink); }
.au-top, .au-col, .au-foot { position: relative; z-index: 1; }
.au-road { background: linear-gradient(rgba(7, 6, 10, .7), rgba(7, 6, 10, 0)); }
/* the small print: the first screen only */
.au-foot { display: none; }
body.au-first .au-foot { display: flex; }

/* glass: the panels let the light through */
.au-sealed, .au-ev, .au-stop .card, .au-letter, .au-acct, .au-floorhero, .au-weekbox, .au-pitch, .au-field, .au-other-in, .au-substack, .au-end .sign {
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.au-ev, .au-stop .card, .au-letter, .au-weekbox, .au-field { background: rgba(18, 16, 22, .62); }
.au-other-in { background: rgba(18, 16, 22, .45); }

/* buttons: a pressable key with a red glow under it, lit where the finger is */
.au-cta, .au-ghost, .au-choice, .au-tick { position: relative; isolation: isolate; overflow: hidden; }
.au-cta::after, .au-ghost::after, .au-choice::after, .au-tick::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .2s;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 60%); }
.au-ghost::after, .au-choice::after, .au-tick::after { background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(216, 31, 43, .32), transparent 65%); }
.au-cta:hover::after, .au-ghost:hover::after, .au-choice:hover::after, .au-tick:hover::after { opacity: 1; }
.au-cta { background: linear-gradient(180deg, #fbf7ef, #dcd4c6); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(7, 6, 10, .16), 0 12px 30px -12px rgba(216, 31, 43, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .18s var(--ease), box-shadow .25s, opacity .2s; }
.au-cta:hover { background: linear-gradient(180deg, #fff, #e6dfd2); transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(7, 6, 10, .16), 0 18px 40px -12px rgba(216, 31, 43, .95), 0 0 0 1px rgba(255, 255, 255, .1); }
.au-cta:active { transform: translateY(1px) scale(.99); box-shadow: inset 0 2px 6px rgba(7, 6, 10, .25), 0 6px 18px -10px rgba(216, 31, 43, .8); }
.au-cta:disabled { transform: none; box-shadow: none; }
.au-ghost { background: rgba(236, 231, 220, .04); border-color: rgba(236, 231, 220, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.au-ghost:hover { border-color: rgba(216, 31, 43, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 28px -14px rgba(216, 31, 43, .8); }
.au-choice { background: rgba(18, 16, 22, .6); border-color: rgba(236, 231, 220, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px -18px #000; transition: transform .18s var(--ease), border-color .15s, box-shadow .2s, background .15s; }
.au-choice:hover { transform: translateY(-1px); border-color: rgba(236, 231, 220, .26); }
.au-choice[aria-pressed="true"] { border-color: var(--red); background: linear-gradient(135deg, rgba(216, 31, 43, .24), rgba(61, 7, 13, .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 30px -14px rgba(216, 31, 43, .9); }
.au-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 14px; }
.au-links .au-link { margin: 0; }

/* the plan: his floor up top, big */
.au-floorhero { margin-top: 18px; padding: 22px 20px 18px; border-radius: 22px; border: 1px solid rgba(216, 31, 43, .5);
  background: radial-gradient(120% 90% at 0% 0%, rgba(216, 31, 43, .22), transparent 60%), rgba(18, 16, 22, .6); box-shadow: 0 24px 60px -30px rgba(216, 31, 43, .7); }
.au-floorhero .au-floor { font: 700 clamp(24px, 6.4vw, 32px)/1.12 var(--brat) !important; letter-spacing: -.04em; margin: 2px 0 10px !important; }
.au-floorhero p { margin: 0; }
/* seven days as seven steps that climb */
.au-track { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; margin-top: 18px; }
.au-tick { height: calc(48px + var(--i, 0) * 8px); align-content: end; padding: 0 0 8px; border-radius: 10px 10px 6px 6px; border: 1px solid rgba(236, 231, 220, .14);
  background: linear-gradient(180deg, rgba(236, 231, 220, .07), rgba(236, 231, 220, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); transition: background .2s, transform .15s; }
.au-tick:nth-child(2) { --i: 1; } .au-tick:nth-child(3) { --i: 2; } .au-tick:nth-child(4) { --i: 3; } .au-tick:nth-child(5) { --i: 4; } .au-tick:nth-child(6) { --i: 5; } .au-tick:nth-child(7) { --i: 6; }
.au-tick:not(:disabled):active { transform: translateY(2px); }
.au-tick.today { border-color: var(--bone); }
.au-tick.on { background: linear-gradient(180deg, #ff3b4a, var(--red) 40%, #8c1220); border-color: #ff5a66; box-shadow: 0 10px 26px -10px rgba(216, 31, 43, .95), inset 0 1px 0 rgba(255, 255, 255, .25); }
/* the moment, what he does, if he slips: one chain, in order */
.au-chain { list-style: none; margin: 22px 0 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 16px; }
.au-chain::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--red), rgba(216, 31, 43, .15)); }
.au-chain li { position: relative; }
.au-chain li::before { content: ''; position: absolute; left: -26px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid var(--red); box-shadow: 0 0 12px rgba(216, 31, 43, .7); }
.au-chain li:first-child::before { background: var(--red); }
.au-chain p { margin: 0; font-size: 16.5px; line-height: 1.5; }
.au-chain .au-label { margin-bottom: 4px; }
/* the week */
.au-weekbox { margin-top: 22px; padding: 18px 18px 8px; border-radius: 18px; border: 1px solid var(--line); }
.au-week { display: grid; gap: 0; }
.au-week li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(236, 231, 220, .07); }
.au-week li:first-child { border-top: 0; }
.au-week li b { min-width: 0; padding-top: 2px; }
.au-week li.past { opacity: .55; }
.au-week li.today { margin: 0 -10px; padding: 10px; border-radius: 12px; border-top-color: transparent; background: rgba(216, 31, 43, .12); }
.au-week li.today + li { border-top-color: transparent; }

/* pm's message at the end: a letter, his words big */
.au-pitch { padding: 24px 22px; border-radius: 20px; border: 1px solid rgba(216, 31, 43, .35); border-left: 3px solid var(--red); background: rgba(18, 16, 22, .6); }
.au-pitch p { font: 400 18.5px/1.55 var(--body); }
.au-pitch p:first-child { font: 700 21px/1.35 var(--brat); letter-spacing: -.02em; }
.au-pitch .au-sign { font: 700 18px var(--brat); color: var(--bone); }
@media (prefers-reduced-motion: reduce) { .au-glow::before, .au-glow::after { animation: none !important; } }

/* ================= 3 november, round 2: the road you can read, the cost, the floor he can adjust ================= */
.au-road { cursor: pointer; outline: none; }
.au-road-track { transition: height .2s, top .2s; }
.au-road:hover .au-road-track, .au-road:focus-visible .au-road-track, .au-road.open .au-road-track { height: 6px; top: 8px; }
.au-road:focus-visible .au-road-stone { box-shadow: 0 0 0 3px rgba(236, 231, 220, .35), 0 0 12px rgba(216, 31, 43, .7); }
.au-road-notches { position: absolute; left: 16px; right: 16px; top: 8px; height: 6px; pointer-events: none; }
.au-road-notches b { position: absolute; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: rgba(236, 231, 220, .28); transition: background .3s, box-shadow .3s; }
.au-road-notches b:nth-child(1) { left: 0; }
.au-road-notches b:nth-child(2) { left: 46%; }
.au-road-notches b:nth-child(3) { left: 56%; }
.au-road-notches b:nth-child(4) { left: 70%; }
.au-road-notches b:nth-child(5) { left: 82%; }
.au-road-notches b:nth-child(6) { left: 92%; }
.au-road-notches b.done { background: var(--red); }
.au-road-notches b.now { background: var(--bone); box-shadow: 0 0 10px rgba(216, 31, 43, .9); }
.au-road-tip { position: absolute; top: 26px; right: 16px; width: min(320px, calc(100vw - 32px)); padding: 16px 18px 14px; border-radius: 16px; border: 1px solid rgba(216, 31, 43, .35);
  background: rgba(14, 12, 18, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 60px -24px #000, 0 0 40px -20px rgba(216, 31, 43, .8);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s; cursor: default; }
.au-road:hover .au-road-tip, .au-road:focus-visible .au-road-tip, .au-road.open .au-road-tip { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--ease), visibility 0s; }
.au-tip-big { margin: 0 0 10px; font: 700 15px var(--brat); color: var(--dim); }
.au-tip-big b { font-size: 30px; letter-spacing: -.04em; color: var(--bone); margin-right: 4px; }
.au-tip-list { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 7px; }
.au-tip-list::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: rgba(236, 231, 220, .14); }
.au-tip-list li { position: relative; font: 700 14px var(--brat); display: flex; justify-content: space-between; gap: 10px; }
.au-tip-list li::before { content: ''; position: absolute; left: -18px; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(236, 231, 220, .3); background: var(--ink); }
.au-tip-list li.done { color: var(--dim); }
.au-tip-list li.done::before { background: var(--red); border-color: var(--red); }
.au-tip-list li.now { color: var(--bone); }
.au-tip-list li.now::before { background: var(--bone); border-color: var(--bone); box-shadow: 0 0 10px rgba(216, 31, 43, .9); }
.au-tip-list li.sealed { color: rgba(236, 231, 220, .28); letter-spacing: .02em; }
.au-tip-list small { font: 400 12.5px var(--body); color: var(--red); }
.au-tip-dim { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .au-road-tip { transition: none; } }

/* what it's costing him: the one red block in the read */
.au-cost { margin: 22px 0 0; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(216, 31, 43, .45);
  background: linear-gradient(135deg, rgba(216, 31, 43, .2), rgba(61, 7, 13, .5)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.au-cost p:last-child { margin: 0; font: 700 19px/1.4 var(--brat); letter-spacing: -.02em; }

/* the floor he can make his own */
.au-adjust { display: inline-block; margin: -4px 0 10px; font-size: 13.5px; }
.au-floorin { width: 100%; margin: 8px 0 10px; font: 700 20px/1.3 var(--brat); resize: none; }
.au-floorbtns { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }

/* the once-only nudge under a typed answer that's mash or too thin */
.au-nudge { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; border-left: 3px solid var(--red); background: rgba(216, 31, 43, .12); font-size: 14.5px; line-height: 1.45; color: var(--bone); }
.au-nudge[hidden] { display: none; }

/* ================= the first screen's picture: it breaks in the same place every time ================= */
.au-art { display: block; width: 100%; max-width: 380px; height: auto; margin: 4px 0 22px; overflow: visible; }
.au-art line { stroke-width: 1; }
.au-art .floor { stroke: rgba(236, 231, 220, .22); stroke-dasharray: 3 5; }
.au-art .ceil { stroke: rgba(216, 31, 43, .5); stroke-dasharray: 2 6; animation: au-ceil 10s ease-in-out infinite; }
.au-art path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: au-draw 10s linear infinite; }
.au-art .up { stroke: var(--bone); stroke-width: 2.4; }
.au-art .down { stroke: var(--red); stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(216, 31, 43, .9)); }
.au-art circle { fill: var(--red); transform-box: fill-box; transform-origin: center; transform: scale(0); filter: drop-shadow(0 0 6px rgba(255, 60, 70, .95)); animation: au-snap 10s ease-out infinite; }
@keyframes au-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 6% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 0; opacity: 1; } 88% { opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes au-snap { 0% { transform: scale(0); opacity: 1; } 2% { transform: scale(1.9); } 6% { transform: scale(1); } 80% { transform: scale(1); opacity: 1; } 88% { opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
@keyframes au-ceil { 0%, 40% { opacity: .15; } 50%, 80% { opacity: 1; } 90%, 100% { opacity: .15; } }
.au-art path:nth-of-type(1) { animation-delay: 0.35s; }
.au-art path:nth-of-type(2) { animation-delay: 0.95s; }
.au-art circle:nth-of-type(1) { animation-delay: 0.95s; }
.au-art path:nth-of-type(3) { animation-delay: 1.25s; }
.au-art path:nth-of-type(4) { animation-delay: 1.85s; }
.au-art circle:nth-of-type(2) { animation-delay: 1.85s; }
.au-art path:nth-of-type(5) { animation-delay: 2.15s; }
.au-art path:nth-of-type(6) { animation-delay: 2.75s; }
.au-art circle:nth-of-type(3) { animation-delay: 2.75s; }
.au-art path:nth-of-type(7) { animation-delay: 3.0500000000000003s; }
.au-art path:nth-of-type(8) { animation-delay: 3.65s; }
.au-art circle:nth-of-type(4) { animation-delay: 3.65s; }
@media (prefers-reduced-motion: reduce) {
  .au-art path, .au-art circle, .au-art .ceil { animation: none; stroke-dashoffset: 0; transform: none; opacity: 1; }
}