/* Doomdex. One ink colour, one marker colour, three handwriting sizes, an 8px spacing base. */
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin-400-normal.d0fa07ff63.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-latin-400-normal.b0a8ad37ac.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-latin-500-normal.cd759df8ef.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-latin-600-normal.4b52ddd483.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-latin-700-normal.2d797dd8b3.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.08949f728d.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.01d2854474.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-600-normal.0d1f0b8d07.woff2) format("woff2")}
@font-face{font-family:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/caveat-latin-500-normal.edbfb1a768.woff2) format("woff2")}
@font-face{font-family:Caveat;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/caveat-latin-600-normal.d51e228301.woff2) format("woff2")}

:root{
  --paper:#E6E2D5;--card:#F3F0E6;--ink:#15130F;--muted:#53504A;--dot:rgba(21,19,15,.09);
  --focus:#1750E6;--watch:#38D7F2;--danger:#B3261E;--ok:#0E6B41;
  --inkc:#15130F;--papc:#F6F2E4;--marker:#FFD400;
  --mark:#FFD400;--mkblend:multiply;
  --f-disp:'Anton','Bebas Neue','Impact','Haettenschweiler','Arial Narrow Bold',sans-serif;
  --f-mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --f-sans:'Barlow','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-hand:'Caveat','Segoe Script','Bradley Hand','Marker Felt','Comic Sans MS',cursive;
  --tap:36px;--pw:104px;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (pointer:coarse){:root{--tap:44px}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#14120E;--card:#1F1C16;--ink:#EDE9DB;--muted:#B4AE9E;--dot:rgba(237,233,219,.06);--focus:#8DB4FF;--danger:#FF8A80;--ok:#69D79F;--mark:#FFE98A;--mkblend:normal}
}
:root[data-theme="dark"]{--paper:#14120E;--card:#1F1C16;--ink:#EDE9DB;--muted:#B4AE9E;--dot:rgba(237,233,219,.06);--focus:#8DB4FF;--danger:#FF8A80;--ok:#69D79F;--mark:#FFE98A;--mkblend:normal}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:clamp(16px,.55vw + 10px,22px);scroll-padding-top:150px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:500 1rem/1.4 var(--f-sans);
  background-image:radial-gradient(circle at 1.5px 1.5px,var(--dot) 1.3px,transparent 1.7px);background-size:8px 8px;padding-bottom:env(safe-area-inset-bottom,0px)}
body::before{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;background-image:var(--grain);background-size:180px;opacity:.11;mix-blend-mode:overlay}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--marker);color:var(--inkc);padding:8px 12px;font-weight:700;border:2px solid var(--ink)}
.skip:focus{top:8px}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:min(100%,clamp(1180px,88vw,1840px));margin:0 auto;padding:0 16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:6px 14px;background:var(--card);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;font-weight:700;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--paper)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.pri{background:var(--marker) linear-gradient(#FFE55C,#FFE55C) no-repeat 0 0/0% 100%;color:var(--inkc);transition:background-size .26s cubic-bezier(.35,0,.15,1)}
.btn.pri:hover,.btn.pri:focus-visible{background-size:100% 100%}
.btn.sm{padding:2px 10px;font-size:.875rem}
.btn[aria-pressed="true"],.btn.on{background:var(--inkc);color:var(--papc)}
:root[data-theme="dark"] .btn[aria-pressed="true"],:root[data-theme="dark"] .btn.on{background:var(--marker);color:#15130F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn[aria-pressed="true"],:root:not([data-theme="light"]) .btn.on{background:var(--marker);color:#15130F}}
.dragh{width:38px;height:38px;cursor:grab;touch-action:none;flex:none}
html.dragging-list,html.dragging-list *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
html.dragging-list .grp .body{display:none}
.grp.dragging{position:relative;z-index:30;box-shadow:8px 10px 0 var(--ink)}
.ib{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);background:var(--card);border:2px solid var(--ink);cursor:pointer;padding:0}
.ib:hover{background:var(--paper)}
.ib[aria-pressed="true"]{background:var(--watch);color:var(--inkc)}
.ib.danger:hover{background:var(--danger);color:var(--papc)}
.lk{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 10px;border:2px solid var(--ink);background:var(--card);font:600 .8125rem var(--f-mono);text-decoration:none}
.lk:hover{background:var(--inkc);color:var(--papc)}
.field{width:100%;min-height:44px;padding:8px 10px;background:var(--card);border:2px solid var(--ink);border-radius:0}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;font-weight:700}
.hint{font-size:.875rem;margin-top:8px}

/* header */
.top{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:3px solid var(--ink);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:10px 18px;align-items:center;padding-top:8px;padding-bottom:8px}
.brand{font:400 1.65rem/1 var(--f-disp);letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none}
.brand b{display:inline-block;background:var(--inkc);color:var(--marker);padding:4px 8px;transform:rotate(-2deg);font-weight:400}
.stats{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;justify-content:center}
.stat{border:2px solid var(--ink);background:var(--paper);padding:2px 10px 3px;min-width:92px}
.stat .n{font:400 1.75rem/1 var(--f-disp);display:block}
.stat .l{font:500 .75rem var(--f-mono);color:var(--muted)}
.chip{align-self:center;font:600 .8125rem var(--f-mono);border:2px dashed var(--ink);padding:4px 8px;background:var(--paper)}
.ring{position:relative;width:58px;height:58px;flex:none}
.ring svg{width:58px;height:58px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring .bg{stroke:var(--dot);stroke:color-mix(in srgb,var(--ink) 16%,transparent)}
.ring .fg{stroke:var(--ink);stroke-linecap:butt;transition:stroke-dashoffset .5s ease}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font:600 .8125rem var(--f-mono)}
.tact{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dotflag{position:relative}
.dotflag::after{content:"";position:absolute;top:-5px;right:-5px;width:12px;height:12px;background:#FF3D81;border:2px solid var(--ink);display:none}
.dotflag.flag::after{display:block}
.banner{background:var(--danger);color:#fff;border-bottom:3px solid var(--ink);padding:10px 0;font-weight:600}
:root[data-theme="dark"] .banner{color:#15130F}
.banner .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.banner .btn{min-height:36px}

/* cover and layout */
.cover{padding:48px 0 8px}
.cover h1{margin:0;font:400 clamp(54px,9vw,150px)/.88 var(--f-disp);text-transform:uppercase;letter-spacing:.005em}
.cover h1 span{display:block}
.cover h1 .l2{background:var(--inkc);color:var(--marker);display:inline-block;padding:0 14px 4px;margin-top:6px;transform:rotate(-1.2deg)}
.cover p{max-width:52ch;margin:22px 0 0;font-size:1.19rem;line-height:1.5;color:var(--muted)}
.redact{display:inline-block;height:.8em;width:5.5em;background:var(--ink);vertical-align:-.1em;margin:0 .2em}
.layout{display:flex;flex-direction:column;gap:0;margin-top:8px}
.rail{order:-1;display:grid;gap:22px;margin:30px 0 8px}
.col-main{min-width:0}
@media (min-width:700px) and (max-width:1279px){.rail{grid-template-columns:1fr 1fr}.rail .doom{grid-column:1/-1}}
@media (min-width:1280px){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,24vw,460px);gap:0 clamp(28px,2.4vw,52px);align-items:start}
  .rail{order:0;grid-column:2;grid-row:1;position:sticky;top:calc(var(--hdr,88px) + 20px);margin:30px 0 0;max-height:calc(100vh - var(--hdr,88px) - 40px);overflow:auto;padding:16px 8px 22px;scrollbar-width:thin}
  .col-main{grid-column:1;grid-row:1}
  :root{--pw:7rem}
}
@media (min-width:2560px){.wrap{width:min(86vw,2400px)}}
.doom{position:relative;border:3px solid var(--ink);background:var(--card);box-shadow:6px 6px 0 var(--ink);padding:16px 16px 14px;overflow:hidden}
.doom::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(-45deg,var(--marker) 0 12px,var(--inkc) 12px 24px)}
.doom .lock{display:flex;align-items:center;gap:8px;margin-top:10px;font:600 .8125rem var(--f-mono);color:var(--muted)}
.doom h2{margin:6px 0 0;font:400 1.9rem/1 var(--f-disp);text-transform:uppercase}
.doom .when{font:500 .8125rem var(--f-mono);color:var(--muted);margin-top:4px}
.doom .cd{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.doom .cd b{font:400 4.75rem/.9 var(--f-disp)}
.doom .cd span{font:600 .875rem var(--f-mono)}
.doom .locked{position:absolute;right:-6px;bottom:-4px;font:400 4.9rem/1 var(--f-disp);opacity:.07;transform:rotate(-8deg);pointer-events:none}
.card{position:relative;border:3px solid var(--ink);background:var(--card);box-shadow:5px 5px 0 var(--ink);padding:18px;border-radius:3px}
.card h3{margin:0 0 8px;font:400 1.5rem/1 var(--f-disp);text-transform:uppercase;letter-spacing:.02em}
.card::before{content:"";position:absolute;left:50%;top:-10px;width:70px;height:18px;background:rgba(255,226,120,.75);transform:translateX(-50%) rotate(-2deg);box-shadow:0 1px 0 rgba(0,0,0,.2);
  clip-path:polygon(0 10%,4% 0,8% 10%,12% 0,100% 0,96% 50%,100% 100%,12% 100%,8% 90%,4% 100%,0 90%,3% 50%)}
.card.pace::before{background:rgba(150,230,200,.75);transform:translateX(-50%) rotate(2.5deg)}
.nextc{display:flex;gap:18px;align-items:center}
.nextc .pframe{width:6.4rem;flex:none}
.nextc .tt{font:700 1.4rem/1.15 var(--f-sans)}
.nextc .ss{font:500 .8125rem var(--f-mono);color:var(--muted);margin:2px 0 8px}
.nextc .bt{display:flex;gap:8px;flex-wrap:wrap}
.pace .big{font:400 2.5rem/1 var(--f-disp)}
.pace p{margin:4px 0 0;color:var(--muted)}
.pace .est{margin-top:8px;font:500 .8125rem var(--f-mono)}

/* hand-drawn marks: ink follows the theme, the marker is yellow */
.scrawl{font:600 1.6rem/1 var(--f-hand);color:var(--ink);display:inline-block;white-space:nowrap;pointer-events:none}
.hl{position:relative;display:inline-block}
.mk{position:absolute;overflow:visible;pointer-events:none;fill:none;mix-blend-mode:var(--mkblend)}
.mk .mv{fill:var(--mark);stroke:none}
.mk .mc{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
/* line boil: two versions of every ribbon, switched about 7 times a second by ink.js (opacity only) */
.mk .mv.v1{opacity:0}
html[data-b] .mk .mv{opacity:0}
html[data-b="0"] .mk[data-ph="0"] .v0,html[data-b="1"] .mk[data-ph="0"] .v1,html[data-b="0"] .mk[data-ph="1"] .v1,html[data-b="1"] .mk[data-ph="1"] .v0{opacity:1}
.mk.rf{filter:url(#rough)}
.mk-under{left:0;bottom:-.34em;width:var(--mw);height:.55em;transform:translateY(var(--my)) rotate(var(--mr))}
.mk-circle{left:-9%;top:-26%;width:118%;height:152%;transform:rotate(var(--mr))}
.mk-bracket{left:-22px;top:-6px;width:14px;height:42px;transform:rotate(var(--mr))}
.mk-star{right:-28px;top:-14px;width:24px;height:24px}
.mk-tick{position:static;display:inline-block;width:20px;height:20px}
.mk-arrow{position:static;display:block;width:64px;height:32px;transform:rotate(var(--mr))}
/* pending doodles are hidden only while JS is running; a CSS failsafe shows them after 2.5 s even if the script never starts. Real text is never hidden. */
html.js .ink-p .mk{opacity:0;animation:inkshow 0s 2.5s forwards}
html.js .ink-p .ink-t{clip-path:inset(-25% 100% -25% 0);animation:inkshow-t 0s 2.5s forwards}
@keyframes inkshow{to{opacity:1}}
@keyframes inkshow-t{to{clip-path:inset(-25% 0 -25% 0)}}

/* controls */
.controls{margin:30px 0 6px;padding:18px;border:3px solid var(--ink);background:var(--card);box-shadow:5px 5px 0 var(--ink);display:grid;gap:0;border-radius:3px}
.controls>.crow{padding:12px 0}
.controls>.crow:first-child{padding-top:0}
.controls>.crow:last-child{padding-bottom:0}
.controls>.crow+.crow{border-top:2px dashed color-mix(in srgb,var(--ink) 28%,transparent)}
.crow{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center}
.clabel{flex:0 0 100%;margin:0 0 6px;padding-bottom:8px;transform:rotate(-1deg);transform-origin:left}
.seg{display:inline-flex;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.seg .btn{border:0;box-shadow:none;min-height:var(--tap)}
.seg .btn+.btn{border-left:2px solid var(--ink)}
.seg .btn:active{transform:none}
.chk{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);cursor:pointer;font-weight:600}
.chk input{width:20px;height:20px;accent-color:var(--ink)}
.search{position:relative;flex:1 1 220px;min-width:180px;max-width:360px}
.search .field{padding-left:38px}
.search .i{position:absolute;left:10px;top:12px;pointer-events:none}
.search kbd{position:absolute;right:8px;top:10px;font:600 .75rem var(--f-mono);border:2px solid var(--ink);padding:0 6px;background:var(--paper)}
.sw{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);cursor:pointer;font-weight:700;position:relative}
.sw input{position:absolute;opacity:0;width:44px;height:28px;margin:0}
.sw .trk{width:46px;height:26px;border:2px solid var(--ink);background:var(--paper);position:relative;flex:none}
.sw .trk::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--ink);transition:transform .15s}
.sw input:checked+.trk{background:var(--marker)}
.sw input:checked+.trk::after{transform:translateX(20px);background:var(--inkc)}
.sw input:focus-visible+.trk{outline:3px solid var(--focus);outline-offset:2px}

/* sagas and phases */
.saga{margin:48px 0 30px;background:var(--inkc);color:var(--papc);padding:20px 22px 22px;position:relative;overflow:hidden;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.saga::after{content:"";position:absolute;right:-30px;top:-10px;bottom:-10px;width:46%;background:repeating-linear-gradient(115deg,transparent 0 14px,rgba(255,212,0,.16) 14px 26px);pointer-events:none}
.saga::before{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:160px;opacity:.14;mix-blend-mode:screen;pointer-events:none}
.saga h2{margin:0;font:400 clamp(44px,7vw,100px)/.92 var(--f-disp);text-transform:uppercase;letter-spacing:.01em;position:relative}
.saga p{margin:8px 0 0;color:#D9D3C0;position:relative;max-width:60ch}
.saga .bar{display:block;height:12px;width:120px;background:var(--marker);margin-bottom:12px;position:relative}
.phase{margin:46px 0 0;position:relative;scroll-margin-top:140px}
.phase-head{position:relative;display:flex;align-items:stretch;min-height:104px;border:3px solid var(--ink);background:var(--card);box-shadow:5px 5px 0 var(--ink);border-radius:0 6px 6px 6px}
.phase-tab{position:absolute;left:14px;top:-32px;background:var(--accent);color:var(--inkc);border:3px solid var(--ink);border-bottom:0;padding:3px 16px 2px;font:600 .875rem var(--f-mono);height:32px;display:flex;align-items:center;border-radius:7px 7px 0 0;transform:rotate(-.8deg);transform-origin:left bottom}
.ph-main{flex:1;min-width:0;padding:14px 18px 12px}
.ph-name{margin:0;font:400 clamp(30px,4.4vw,56px)/1 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
.ph-tag{margin:4px 0 8px;color:var(--muted);max-width:60ch}
.meter{display:flex;align-items:center;gap:10px;font:600 .8125rem var(--f-mono)}
.meter .bar{flex:1;max-width:280px;height:12px;border:2px solid var(--ink);background:var(--paper);position:relative}
.meter .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);width:0;transition:width .45s ease;border-right:2px solid var(--ink)}
.meter .bar i[style*="width:0%"]{border-right:0}
.ph-motif{flex:0 0 clamp(80px,24%,280px);border-left:3px solid var(--ink);position:relative;overflow:hidden;background:var(--accent)}
.ph-motif svg{position:absolute;inset:0;width:100%;height:100%}
.ph-stamp{position:absolute;right:calc(clamp(80px,24%,280px) + 14px);top:10px;border:3px solid var(--ok);color:var(--ok);font:400 1.25rem/1 var(--f-disp);text-transform:uppercase;padding:3px 8px;transform:rotate(-7deg);letter-spacing:.06em;display:none;background:var(--card)}
.phase.done .ph-stamp{display:block}
.phase.flash .ph-stamp{animation:slam .6s cubic-bezier(.2,1.4,.4,1)}
.phase.flash .phase-head{animation:shake .5s}
.phnote{position:absolute;right:calc(clamp(80px,24%,280px) + 18px);top:-30px;transform:rotate(-3deg);font-size:1.7rem;background:var(--paper);padding:0 6px}
.phase.done .phnote{display:none}
@keyframes slam{0%{transform:rotate(-7deg) scale(2.2);opacity:0}100%{transform:rotate(-7deg) scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:none}30%{transform:translate(-3px,2px)}60%{transform:translate(3px,-2px)}}
.m1{background:radial-gradient(circle,#CFCCC2 0 3px,#15130F 3.5px 4.6px,transparent 5px) left 7px top 7px/14px 14px no-repeat,radial-gradient(circle,#CFCCC2 0 3px,#15130F 3.5px 4.6px,transparent 5px) right 7px top 7px/14px 14px no-repeat,radial-gradient(circle,#CFCCC2 0 3px,#15130F 3.5px 4.6px,transparent 5px) left 7px bottom 7px/14px 14px no-repeat,radial-gradient(circle,#CFCCC2 0 3px,#15130F 3.5px 4.6px,transparent 5px) right 7px bottom 7px/14px 14px no-repeat,linear-gradient(135deg,rgba(226,54,54,.75),rgba(226,54,54,0) 70%),repeating-linear-gradient(90deg,#46433D 0 2px,#2B2924 2px 6px),#2B2924}
.m3{background:repeating-linear-gradient(90deg,var(--inkc) 0 2px,transparent 2px 10px) left bottom/100% 14px no-repeat,repeating-linear-gradient(115deg,#F5B700 0 10px,#FFE08A 10px 14px,#C98F00 14px 26px)}
.m5{background:#F3F0E6}
.m5::before,.m5::after{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;top:50%;left:50%}
.m5::before{background:radial-gradient(circle,#FF3D81 2.2px,transparent 2.8px) 0 0/8px 8px;transform:translate(-56%,-52%)}
.m5::after{background:radial-gradient(circle,#19C6E6 2.2px,transparent 2.8px) 3px 3px/8px 8px;transform:translate(-44%,-48%);mix-blend-mode:multiply}
.m6{background:repeating-linear-gradient(-45deg,var(--marker) 0 16px,var(--inkc) 16px 32px)}
.m6 .plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--inkc);color:var(--marker);padding:4px 10px;text-align:center;font:400 1.9rem/1 var(--f-disp);white-space:nowrap;border:2px solid var(--marker)}
.m6 .plate small{display:block;font:600 .6875rem var(--f-mono);color:var(--papc)}

/* rows: content-visibility keeps long lists cheap */
.list{margin-top:18px;border-top:3px solid var(--ink)}
.row{--accent:#E23636;position:relative;display:grid;grid-template-columns:var(--tap) calc(var(--pw) + 8px) minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:24px 6px 24px 2px;
  border-bottom:2px dashed color-mix(in srgb,var(--ink) 40%,transparent);transition:background .2s;content-visibility:auto;contain-intrinsic-size:auto 190px}
.row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.row.next{background:color-mix(in srgb,var(--marker) 22%,transparent);box-shadow:inset 10px 0 0 var(--marker)}
.row.watching{box-shadow:inset 6px 0 0 var(--watch);background:color-mix(in srgb,var(--watch) 14%,transparent)}
.row.soon{opacity:.78}
.row .tick{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;position:relative}
.row .tick input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.row.soon .tick,.row.soon .tick input{cursor:not-allowed}
/* the outline is a hand-drawn two-pass svg (.bx); the box itself only fills */
.box{position:relative;width:28px;height:28px;background:var(--card);display:grid;place-items:center;transition:background .2s;border-radius:3px}
.box svg.i{width:22px;height:22px;stroke:var(--card);stroke-width:3.6;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.bx{position:absolute;left:-2px;top:-2px;width:32px;height:32px;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible;pointer-events:none}
.bp1,.bp2{stroke-dasharray:1;stroke-dashoffset:0}
.bp1{stroke:var(--ink);stroke-width:2.2}
.bp2{stroke:var(--accent);stroke-width:1.4}
/* the outline stays hidden until ink.js draws it (and shows after 2.5 s even if the script never runs) */
html.js .tick:not(.ink-d) .bx{opacity:0;animation:inkshow 0s 2.5s forwards}
.box::after{content:"";position:absolute;right:-3px;top:-4px;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:scale(0)}
.tick input:checked+.box{background:var(--ink)}
.tick input:checked+.box svg.i{opacity:1;stroke-dashoffset:0}
.tick input:checked+.box::after{transform:scale(1)}
/* two strokes: a short down stroke, then a long flick up with an overshoot dot; only right after a real tick */
.just .tick input:checked+.box{animation:boxsq .12s ease-out}
.just .tick input:checked+.box svg.i{animation:tickflick .22s both}
.just .tick input:checked+.box::after{animation:dot .3s .22s ease-out both}
@keyframes tickflick{0%{stroke-dashoffset:1.02;animation-timing-function:ease-in}40%{stroke-dashoffset:.68;animation-timing-function:cubic-bezier(.2,.7,.3,1)}100%{stroke-dashoffset:0}}
@keyframes boxsq{0%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes dot{0%{transform:scale(0)}60%{transform:scale(1.7)}100%{transform:scale(1)}}
.tick input:focus-visible+.box{box-shadow:0 0 0 4px var(--focus)}
.tick input:disabled+.box{opacity:.5}

/* posters: a photo pinned to a corkboard. One definition each. */
.pframe{--rot:-2deg;--tc:rgba(255,226,120,.82);--tc2:rgba(170,205,255,.78);--tr:-4deg;--tr2:6deg;position:relative;display:block;width:var(--pw);transform:rotate(var(--rot));transform-origin:50% 6%;transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
.pframe::before,.pframe.tape2::after{content:"";position:absolute;z-index:3;width:2.4rem;height:.95rem;background:var(--tc);box-shadow:0 1px 0 rgba(0,0,0,.18);
  clip-path:polygon(0 8%,6% 0,12% 10%,18% 0,100% 0,95% 50%,100% 100%,18% 100%,12% 90%,6% 100%,0 92%,4% 50%)}
.pframe::before{left:50%;top:-.55rem;transform:translateX(-50%) rotate(var(--tr))}
.pframe.tape2::after{right:-.7rem;bottom:.5rem;background:var(--tc2);transform:rotate(calc(var(--tr2) + 48deg))}
.pframe:not(.tape2)::after{content:"";position:absolute;z-index:3;bottom:0;width:.9rem;height:.9rem;pointer-events:none}
.pframe.curl-r:not(.tape2)::after{right:0;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.22) 50%,#E4DBC3 62%);border-bottom-right-radius:3px}
.pframe.curl-l:not(.tape2)::after{left:0;background:linear-gradient(225deg,transparent 50%,rgba(0,0,0,.22) 50%,#E4DBC3 62%);border-bottom-left-radius:3px}
.row:hover .pframe,.row:focus-within .pframe{transform:rotate(0deg) translateY(-3px)}
.poster{position:relative;display:block;aspect-ratio:2/3;width:100%;overflow:hidden;border:4px solid #EFE7D2;border-radius:3px;outline:1.5px solid var(--inkc);background:#EFE7D2;container-type:inline-size;
  box-shadow:0 1px 1px rgba(0,0,0,.25),0 8px 14px rgba(0,0,0,.28);transition:box-shadow .2s}
:root[data-theme="dark"] .poster{box-shadow:0 1px 1px rgba(0,0,0,.5),0 8px 16px rgba(0,0,0,.55),0 0 0 1px rgba(246,242,228,.06)}
.row:hover .poster,.row:focus-within .poster,.tilebtn:hover .poster{box-shadow:0 2px 2px rgba(0,0,0,.28),0 14px 22px rgba(0,0,0,.34)}
.poster::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.04) 30%,transparent 46%),var(--grain);background-size:auto,140px;mix-blend-mode:overlay;opacity:.7}
.poster::after{content:"";position:absolute;inset:0;z-index:2;background:var(--accent);mix-blend-mode:multiply;opacity:0;transition:opacity .35s;pointer-events:none}
.poster .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;transition:opacity .45s ease}
html.js .poster .ph:not(.in){opacity:0}
.fb.ld{visibility:hidden}
.watched .poster::after{opacity:.3}
.watched .poster .ph,.watched .poster .fb{filter:grayscale(.8) sepia(.3) contrast(.94)}
.fb{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:flex-end;padding:8cqw;gap:3cqw;background:linear-gradient(160deg,var(--a) 0%,var(--a) 34%,#15130F 160%)}
.fb::before,.fb::after{content:"";position:absolute;pointer-events:none}
.fb .ft,.fb .fy{position:relative;z-index:2}
.fb .ft{align-self:flex-start;background:#15130F;color:#F6F2E4;font:400 calc(var(--k) * 1cqw)/1.02 var(--f-disp);text-transform:uppercase;padding:2cqw 4cqw;transform:rotate(-2deg);max-width:100%;overflow-wrap:anywhere;letter-spacing:.01em}
.fb .fy{font:600 9cqw/1 var(--f-mono);color:#15130F;background:#F6F2E4;align-self:flex-start;padding:1cqw 3cqw}
.fb.l0::before{content:attr(data-y);right:-6cqw;top:6cqw;font:400 58cqw/1 var(--f-disp);color:rgba(246,242,228,.13);transform:rotate(-8deg)}
.fb.l0::after{left:8cqw;top:8cqw;width:26cqw;height:26cqw;border:1.2cqw solid rgba(246,242,228,.55);border-radius:50%}
.fb.l1{justify-content:center;align-items:center}
.fb.l1::before{left:-14%;right:-14%;top:38%;height:30%;background:rgba(246,242,228,.94);transform:rotate(-11deg);box-shadow:0 1.2cqw 0 rgba(21,19,15,.55)}
.fb.l1 .ft{background:none;color:#15130F;text-align:center;align-self:center;transform:rotate(-11deg);padding:0 6cqw;font-size:calc(var(--k) * .85cqw)}
.fb.l1 .fy{position:absolute;left:8cqw;top:7cqw}
.fb.l1::after{right:8cqw;bottom:8cqw;width:18cqw;height:18cqw;border-radius:50%;background:rgba(21,19,15,.55)}
.fb.l2::before{left:17%;top:9%;width:66%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 2px 2px,rgba(21,19,15,.55) 1.2px,transparent 1.7px) 0 0/7px 7px,#F6F2E4}
.fb.l2 .fy{align-self:flex-end;transform:rotate(3deg)}
.fb.l3::before{left:0;right:0;top:0;height:30%;background:repeating-linear-gradient(90deg,rgba(21,19,15,.82) 0 7cqw,transparent 7cqw 14cqw)}
.fb.l3::after{right:8cqw;top:34%;width:12cqw;height:12cqw;background:linear-gradient(#F6F2E4,#F6F2E4) center/100% 1cqw no-repeat,linear-gradient(#F6F2E4,#F6F2E4) center/1cqw 100% no-repeat}
/* hand-inked WATCHED stamp: slams in once, uneven edge from the shared rough filter */
.stamp{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%) rotate(calc(-16deg + var(--rot,0deg) * 1.2)) scale(2.4);border:1cqw solid #C52B2B;color:#C52B2B;background:rgba(246,242,228,.5);border-radius:2px;
  font:400 14cqw/1 var(--f-disp);text-transform:uppercase;padding:2cqw 4cqw;opacity:0;letter-spacing:.05em;pointer-events:none;white-space:nowrap;mix-blend-mode:multiply}
.watched .stamp{opacity:.86;transform:translate(-50%,-50%) rotate(calc(-16deg + var(--rot,0deg) * 1.2)) scale(1);filter:url(#rough)}
.just .stamp{animation:stampthud .26s cubic-bezier(.5,0,.7,1.5) both}
@keyframes stampthud{0%{opacity:.6;transform:translate(-50%,-50%) rotate(-24deg) scale(1.35)}55%{opacity:.86;transform:translate(-50%,-50%) rotate(-15deg) scale(.97)}70%{transform:translate(calc(-50% + 2px),calc(-50% - 1px)) rotate(-16deg) scale(1)}85%{transform:translate(calc(-50% - 2px),-50%) rotate(-16deg) scale(1)}100%{opacity:.86;transform:translate(-50%,-50%) rotate(-16deg) scale(1)}}
.info{min-width:0}
.title{font:700 1.25rem/1.25 var(--f-sans);overflow-wrap:anywhere}
/* hand-drawn double-pass scribble instead of a plain strike. --scr is set per accent in the generated rules at the end of this file. */
.title .t,.tile .cap .t{background-image:var(--scr),var(--scr2);background-repeat:no-repeat;background-position:0 55%,100% 62%;background-size:0% .95em,0% .8em;transition:background-size .12s ease-out,color .3s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.watched .title .t,.tile.watched .cap .t{background-size:100% .95em,70% .8em;color:var(--muted)}
/* the pen goes left to right, then a quick back stroke; the title dims after the pen is done */
.just .title .t,.just.tile .cap .t{animation:scrib .72s cubic-bezier(.35,0,.15,1) both;transition:color .3s .55s}
@keyframes scrib{0%{background-size:0% .95em,0% .8em}58%{background-size:100% .95em,0% .8em}100%{background-size:100% .95em,70% .8em}}
@media (forced-colors:active),(prefers-contrast:more){.title .t,.tile .cap .t{background:none!important}.watched .title .t,.tile.watched .cap .t{text-decoration:line-through}}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;align-items:center}
.bdg{font:600 .75rem/1 var(--f-mono);border:2px solid var(--ink);padding:3px 6px;background:var(--paper);border-radius:2px}
.bdg.opt{background:var(--marker);color:var(--inkc);border-color:var(--inkc)}
.bdg.fin{background:#E23636;color:#fff;border-color:var(--inkc)}
.bdg.soon-b{border-style:dashed;font-weight:700}
.bdg.ph-chip{background:var(--accent);color:var(--inkc);border-color:var(--inkc)}
.bdg.now{display:none;background:var(--watch);color:var(--inkc);border-color:var(--inkc)}
.bdg.now::before{content:"";display:inline-block;width:8px;height:8px;background:var(--inkc);margin-right:6px;animation:pulse 1.2s infinite}
.watching .bdg.now{display:inline-block}
.bdg.nx{display:none}
.bdg.done{display:none;background:var(--inkc);color:var(--papc)}
.watched .bdg.done{display:inline-block}
@keyframes pulse{50%{opacity:.25}}
/* next up: thick margin mark, a hand-drawn arrow and a short note */
.row.next .title::after{content:"";display:inline-block;width:56px;height:26px;margin-left:12px;vertical-align:middle;background:var(--ink);transform:rotate(-2deg);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'><path d='M76 21C58 14 36 17 20 22C14 24 10 24 6 21M16 11L5 21L18 31' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'><path d='M76 21C58 14 36 17 20 22C14 24 10 24 6 21M16 11L5 21L18 31' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.row.next .meta::after{content:"you are here";font:600 1.5rem/1 var(--f-hand);margin-left:6px;transform:rotate(-2deg);display:inline-block;white-space:nowrap}
.acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.lk-wrap{display:contents}
.hl-new{outline:3px solid var(--focus);outline-offset:-3px}
.empty{padding:18px 8px;color:var(--muted);border-bottom:2px dashed color-mix(in srgb,var(--ink) 40%,transparent)}

/* wall */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:34px 22px;margin-top:28px}
.tile{--accent:#E23636;position:relative}
.tilebtn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;position:relative}
.tile .pframe{width:100%;transform:rotate(calc(var(--rot) * .6))}
.tile:hover .pframe,.tile:focus-within .pframe{transform:rotate(0deg) translateY(-4px)}
.tile.next .poster{outline:4px solid var(--marker);outline-offset:2px}
.tile.watching .poster{outline:4px solid var(--watch);outline-offset:2px}
.tile.soon .poster{opacity:.8}
.tile .cap{position:relative;margin:-10px 6px 0;padding:8px 10px 9px;background:var(--card);border:2px solid var(--ink);transform:rotate(calc(var(--rot,0deg) * -.25));font:600 .875rem/1.25 var(--f-sans);overflow-wrap:anywhere}
.tile .cap .bdg{margin-top:6px;display:inline-block}
.tile.watched .cap{opacity:.85}
.tile .tbadges{position:absolute;left:6px;top:6px;z-index:6;display:flex;gap:4px;flex-direction:column;pointer-events:none}
.tile .tact2{position:absolute;right:4px;top:4px;z-index:6;display:flex;flex-direction:column;gap:4px;opacity:0;transition:opacity .15s}
.tile:hover .tact2,.tile:focus-within .tact2{opacity:1}
@media (pointer:coarse){.tile .tact2{opacity:1}}

/* groups */
.ext{margin-top:56px}
.ext>h2{margin:0;font:400 clamp(32px,5vw,64px)/1 var(--f-disp);text-transform:uppercase}
.extnote{margin-left:34px;font-size:1.7rem;vertical-align:middle;transform:rotate(-3deg)}
.ext>p{margin:6px 0 0;color:var(--muted);max-width:62ch}
.grp{--accent:#2F9BB5;margin-top:26px;border:3px solid var(--ink);background:var(--card);box-shadow:5px 5px 0 var(--ink)}
.grp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;border-left:12px solid var(--accent)}
.grp-head h3{margin:0;font:400 1.5rem/1.05 var(--f-disp);text-transform:uppercase;flex:1 1 240px}
.grp .body{padding:0 12px 12px}
.grp .list{margin-top:4px}

/* footer */
footer{margin-top:70px;border-top:3px solid var(--ink);background:var(--card);padding:22px 0 30px}
footer p{margin:6px 0;color:var(--muted);max-width:70ch}
footer a{font-weight:700}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px}
footer .made{font:600 1.5rem/1.2 var(--f-hand);color:var(--ink);transform:rotate(-1deg);display:inline-block;margin-top:10px}

/* dialogs */
dialog{border:3px solid var(--ink);background:var(--card);color:var(--ink);padding:0;max-width:min(560px,94vw);width:100%;box-shadow:8px 8px 0 var(--ink)}
dialog::backdrop{background:rgba(21,19,15,.6)}
dialog .dh{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:3px solid var(--ink);background:var(--marker);color:var(--inkc)}
dialog .dh h2{margin:0;font:400 1.6rem/1 var(--f-disp);text-transform:uppercase}
dialog .dh .ib{background:var(--card);color:var(--ink)}
dialog .db{padding:16px;display:grid;gap:12px;max-height:70vh;overflow:auto}
dialog label.f{display:grid;gap:4px;font-weight:700}
dialog .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
dialog .err{color:var(--danger);font-weight:700;min-height:1.2em}
dialog .hl{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:2px dashed color-mix(in srgb,var(--ink) 40%,transparent);padding:6px 0}
dialog .ok{color:var(--ok);font-weight:700}
dialog .lbl{font:600 .8125rem var(--f-mono);color:var(--muted)}
.toasts{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:grid;gap:8px;width:min(92vw,520px)}
.toast{background:var(--inkc);color:var(--papc);border:2px solid var(--marker);padding:10px 12px;display:flex;gap:12px;align-items:center;justify-content:space-between;box-shadow:4px 4px 0 rgba(0,0,0,.4);font-weight:600;position:relative;overflow:hidden}
.toast button{background:var(--marker);color:var(--inkc);border:2px solid var(--papc);padding:4px 10px;min-height:36px;cursor:pointer;font-weight:700}
.toast .tb{display:flex;gap:8px;align-items:center;flex:none}
.toast .tx{background:transparent;color:var(--papc);width:36px;padding:0;font-size:22px;line-height:1}
.toast .tt{font:600 .75rem var(--f-mono);font-variant-numeric:tabular-nums;min-width:2.5ch;text-align:right;color:var(--papc);opacity:.85}
.toast .tbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,212,0,.25)}
.toast .tbar i{display:block;height:100%;background:#FFD400;transform-origin:left center;transform:scaleX(1)}
.toast.out{opacity:0;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease}
@media (max-width:520px){.toast .tt{display:none}}

/* guide pages */
.doc{max-width:74ch;margin:0 auto;padding:40px 0 10px}
.doc h1{margin:0 0 12px;font:400 clamp(40px,6vw,76px)/.95 var(--f-disp);text-transform:uppercase}
.doc h2{margin:40px 0 10px;font:400 clamp(26px,3.4vw,40px)/1.05 var(--f-disp);text-transform:uppercase}
.doc h3{margin:22px 0 6px;font:700 1.25rem/1.2 var(--f-sans)}
.doc p,.doc li{font-size:1.06rem;line-height:1.6}
.doc .answer{font-size:1.25rem;line-height:1.5;border-left:10px solid var(--marker);padding:4px 0 4px 16px;margin:18px 0 8px}
.doc .updated{font:500 .8125rem var(--f-mono);color:var(--muted)}
.doc ol.wo,.doc ul.wo{padding:0;margin:14px 0;list-style:none;border-top:3px solid var(--ink)}
.doc .wo li{display:grid;grid-template-columns:1fr;gap:2px;padding:12px 4px;border-bottom:2px dashed color-mix(in srgb,var(--ink) 40%,transparent)}
.doc .wo b{font-weight:700;font-size:1.12rem}
.doc .wo .why{color:var(--muted)}
.doc .crumbs{font:500 .8125rem var(--f-mono);margin-bottom:8px;color:var(--muted)}
.doc .cta{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.doc details{border:2px solid var(--ink);background:var(--card);padding:10px 14px;margin:10px 0}
.doc summary{cursor:pointer;font-weight:700}
.doc .also{display:flex;flex-wrap:wrap;gap:8px 12px;margin:10px 0;padding:0;list-style:none}
.doc .also a{display:inline-block;padding:6px 10px;border:2px solid var(--ink);background:var(--card);text-decoration:none;font-weight:600}
.doc .also a:hover{background:var(--inkc);color:var(--papc)}
.topnav{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.topnav a{font-weight:700;text-decoration:none;padding:6px 2px}
.topnav a:hover{text-decoration:underline}

/* ===== responsive ===== */
@media (max-width:900px){
  :root{--pw:72px}
  .extnote{display:block;white-space:normal;margin:10px 0 0 26px;font-size:1.5rem}
  .top .wrap{grid-template-columns:1fr auto}
  .stats{grid-column:1/-1;order:3;justify-content:flex-start}
  .row{grid-template-columns:var(--tap) calc(var(--pw) + 8px) minmax(0,1fr)}
  .row .acts{grid-column:1/-1;justify-content:flex-start;padding-left:2px}
  .ph-stamp{right:14px;top:-26px}
  html{scroll-padding-top:200px}
  .topnav{grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:520px){
  .brand{font-size:1.3rem;white-space:normal;min-width:0;line-height:1.05}
  .controls{padding:14px}
  .tact{flex-wrap:nowrap}
  .stats{flex-wrap:nowrap;gap:6px;align-items:center}
  .stat{min-width:0;flex:1 1 0;padding:2px 6px 3px}
  .stat .n{font-size:1.4rem}
  .stat .l{font-size:.66rem}
  .chip{display:none}
  .ring,.ring svg{width:44px;height:44px}
  .ring span{font-size:.6875rem}
  .ph-motif{flex-basis:46px}
  .ph-stamp,.phnote,.nextnote,.nx-arrow{display:none!important}
  dialog .row2{grid-template-columns:1fr}
  .row.next .title::after{display:none}
  .row.next .meta::after{display:block;margin:4px 0 0}
  .wall{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:30px 14px}
}
/* next-up note in the rail: note plus arrow pointing back at the list */
.nextnote{position:absolute;right:20px;top:14px;transform:rotate(3deg);font-size:1.6rem}
.nx-arrow{position:absolute;right:150px;top:34px;display:none}
@media (min-width:1280px){.nx-arrow{display:block}.nx-arrow .mk-arrow{transform:scaleX(-1) rotate(var(--mr))}}
.doomnote{position:absolute;right:18px;bottom:16px;transform:rotate(-5deg);font-size:1.75rem;color:#E23636;z-index:2}
:root[data-theme="dark"] .doomnote{color:#FF8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .doomnote{color:#FF8A80}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .watched .stamp{transform:translate(-50%,-50%) rotate(calc(-16deg + var(--rot,0deg) * 1.2)) scale(1)}
  .tick input:checked+.box::after{transform:scale(1)}
}
@media (forced-colors:active){.mk{stroke:CanvasText}.poster::before,body::before{display:none}.box svg.i{stroke:CanvasText}.bx path{stroke:CanvasText}}
@media print{body::before,.top,.rail,.controls,footer nav{display:none}}
/* GENERATED: per-accent scribble strokes (see scripts/build.mjs) */

/* ---------- snap celebration: gauntlet, glow, dust, smoke, sparks (transform and opacity only) ---------- */
.snap-layer{position:absolute;z-index:95;pointer-events:none;transform-origin:0 0}
.snap-gaunt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5}
.snap-sprite{width:160px;height:160px;margin:0;transform:translate(-50%,-50%) scale(var(--k,1));background:var(--sprite) 0 0/7680px 160px no-repeat;animation:snapsp 2.35s steps(47,end) forwards}
@keyframes snapsp{to{background-position:-7520px 0}}
.snap-svgw{animation:snappop 2.3s ease-out both}
.snap-svg{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(255,190,40,.7))}
@keyframes snappop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}48%{transform:translate(-50%,-50%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.snap-gfix{position:fixed;left:50%;top:87vh;transform:translate(-50%,-50%);z-index:96;pointer-events:none}
.snap-gfix.out .snap-gaunt{opacity:0;transition:opacity .3s}
.snap-dimov,.snap-glow,.snap-flare{position:absolute;inset:0;border-radius:3px;opacity:0}
.snap-dimov{background:rgba(0,0,0,.3)}
.snap-glow{box-shadow:inset 0 0 18px 4px rgba(255,200,60,.75),0 0 14px 2px rgba(255,190,40,.55)}
.snap-flare{background:radial-gradient(circle at 50% 50%,rgba(255,236,170,.95),rgba(255,200,60,0) 62%)}
.snap-layer.ant .snap-dimov,.snap-layer.ant .snap-glow{animation:snapant 1.05s ease-in forwards}
@keyframes snapant{to{opacity:1}}
.snap-layer.go .snap-flare{animation:snapflare .14s ease-out 1 both}
@keyframes snapflare{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.snap-dust{position:absolute;overflow:visible}
.snap-layer:not(.go) .snap-dust{visibility:hidden}
.snap-layer.back .snap-dust{filter:grayscale(.8) sepia(.3)}
.snap-dust i,.snap-dust u{position:absolute;background-image:var(--img);background-size:var(--bw) var(--bh);background-repeat:no-repeat}
.snap-dust u{text-decoration:none;background-color:#8d8678}
.snap-dust b{position:absolute;border-radius:50%;opacity:0}
.snap-layer.go .snap-dust i{animation:snapdust .8s cubic-bezier(.3,.1,.6,1) var(--d) both}
.snap-layer.go .snap-dust u{animation:snapflake .95s cubic-bezier(.3,.1,.6,1) var(--d) both}
.snap-layer.go .snap-dust b{animation:snapspeck 1s ease-out var(--d) both}
.snap-layer.back .snap-dust i{animation:snapback .45s cubic-bezier(.2,.8,.3,1) var(--bd) both}
@keyframes snapdust{0%{opacity:1;transform:none}35%{opacity:.95;transform:translate(calc(var(--dx) * .35),calc(var(--dy) * .95)) rotate(calc(var(--r) * .4))}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) * .5 + var(--sw))) rotate(var(--r)) scale(.55)}}
@keyframes snapflake{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
@keyframes snapspeck{0%{opacity:.9;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes snapback{from{opacity:0;transform:translate(var(--dx),calc(var(--dy) * .5 + var(--sw))) rotate(var(--r)) scale(.55)}to{opacity:1;transform:none}}
.snap-smoke s{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(95,90,82,.55),rgba(95,90,82,0) 65%);opacity:0}
.snap-layer.go .snap-smoke s{animation:snapsmoke 1.2s ease-out var(--d) both}
@keyframes snapsmoke{0%{opacity:0;transform:scale(1)}30%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.8)}}
.snap-sparks em{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#FFD54A;box-shadow:0 0 6px #FFB800;opacity:0}
.snap-layer.go .snap-sparks em{animation:snapspark .5s ease-out var(--d) both}
@keyframes snapspark{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
.snap-dim .info,.snap-dim .cap{opacity:.4;transform:translateX(2px);transition:opacity .3s,transform .3s}
.poster.snap-fo{opacity:0;transform:scale(.96);transition:opacity .9s,transform .9s}
.poster.snap-fi{animation:snapfi .35s both}
@keyframes snapfi{from{opacity:0}}
#nextup.held button{opacity:.5;cursor:progress}
.range{width:100%;accent-color:var(--ink)}
#btn-sound[aria-pressed="true"]{background:var(--card);color:inherit}

/* ---------- "Hand-drawn animations" switched off: nothing animates and everything renders clean ---------- */
html.no-ink .ink-p .mk,html.no-ink .tick:not(.ink-d) .bx{opacity:1;animation:none}
html.no-ink .ink-p .ink-t{clip-path:none;animation:none}
html.no-ink .mk .mv.v1{opacity:0}
html.no-ink .mk .mv.v0{opacity:1}
html.no-ink .mk.rf,html.no-ink .watched .stamp{filter:none}
html.no-ink .just .tick input:checked+.box,html.no-ink .just .tick input:checked+.box svg.i,html.no-ink .just .tick input:checked+.box::after,html.no-ink .just .stamp,html.no-ink .just .title .t,html.no-ink .just.tile .cap .t{animation:none}
html.no-ink .title .t,html.no-ink .tile .cap .t{transition:none}
html.no-ink .btn.pri{transition:none}
html.no-ink .pframe{transition:none}
/* snap sound depends on the snap animation */
.fx-off{opacity:.45}
.fx-off input{cursor:not-allowed}
#btn-sound[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.sc-e23636{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%23E23636' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%23E23636' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%23E23636' stroke-width='3' stroke-linecap='round'/></svg>")}
.sc-2f9bb5{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%232F9BB5' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%232F9BB5' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%232F9BB5' stroke-width='3' stroke-linecap='round'/></svg>")}
.sc-f5b700{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%23F5B700' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%23F5B700' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%23F5B700' stroke-width='3' stroke-linecap='round'/></svg>")}
.sc-2fe0a5{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%232FE0A5' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%232FE0A5' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%232FE0A5' stroke-width='3' stroke-linecap='round'/></svg>")}
.sc-ff3d81{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%23FF3D81' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%23FF3D81' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%23FF3D81' stroke-width='3' stroke-linecap='round'/></svg>")}
.sc-ffd400{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%23FFD400' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%23FFD400' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%23FFD400' stroke-width='3' stroke-linecap='round'/></svg>")}
.sc-ff7a1a{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%23FF7A1A' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%23FF7A1A' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%23FF7A1A' stroke-width='3' stroke-linecap='round'/></svg>")}
.sc-8f7bff{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%238F7BFF' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%238F7BFF' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%238F7BFF' stroke-width='3' stroke-linecap='round'/></svg>")}
.sc-7bc043{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%237BC043' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%237BC043' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%237BC043' stroke-width='3' stroke-linecap='round'/></svg>")}
.sc-c9c2ab{--scr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M2 13.5C28 8 58 15.5 98 11.2S172 14.4 198 8.6' fill='none' stroke='%23C9C2AB' stroke-width='3.6' stroke-linecap='round'/><path d='M5 17C42 12.4 82 18.4 122 14.2S182 12.6 196 15.6' fill='none' stroke='%23C9C2AB' stroke-width='2.2' stroke-linecap='round'/></svg>");--scr2:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'><path d='M198 9C150 14 110 8 70 13S22 11 4 15' fill='none' stroke='%23C9C2AB' stroke-width='3' stroke-linecap='round'/></svg>")}