@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:block}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:block}

:root{
  --paper:#EFEAE0;--ink:#14130F;--blue:#1B34F2;--c:#1B34F2;--on:#FBF8F1;
  --disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,"Courier New",monospace;
  --pad:20px;--fs:200px;--cyn:-100px;--cfs:32px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--paper);color:var(--ink);overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;height:100dvh;font-family:var(--disp);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.mono{font-family:var(--mono);font-size:11px;line-height:15px;letter-spacing:.09em;text-transform:uppercase;font-weight:500}

/* paper grain: generated, static, no image download */
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.3;background-size:240px 240px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .06 0 0 0 0 .05 0 0 0 1.15 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* hidden measuring probe: glyph advances + baseline at 200px */
#probe{position:absolute;left:-9999px;top:0;visibility:hidden;pointer-events:none;white-space:nowrap;
  font-family:var(--disp);font-size:200px;line-height:1;font-weight:620;letter-spacing:-.02em;font-optical-sizing:none}
#probe span{display:inline-block}
#probe i{display:inline-block;width:1px;height:1px;vertical-align:baseline}

/* layers */
#ghosts,#stage,#tags{position:fixed;inset:0;pointer-events:none;overflow:hidden;font-size:var(--fs);opacity:0;transition:opacity .5s}
.ready #ghosts,.ready #stage,.ready #tags{opacity:1}
#ghosts{z-index:3}
#ink{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#stage{z-index:10}
#tags{z-index:12;font-size:11px}

.L,.ghost{position:absolute;left:0;top:0;width:0;height:0}
.L{will-change:transform}
.g{position:absolute;left:0;top:0;display:block;height:1em;line-height:1;white-space:nowrap;
  font-family:var(--disp);font-size:var(--fs);font-weight:620;letter-spacing:-.02em;color:var(--ink);
  font-optical-sizing:none;transform:translate(-50%,var(--cyn))}
.L .g{pointer-events:auto;cursor:grab;touch-action:none}
.L .g::after{content:"";position:absolute;inset:-12px}
.L.held .g{cursor:grabbing}
.rm .L .g{pointer-events:none;cursor:default}

/* faint dotted outline left behind in the slot */
.ghost{opacity:0;transition:opacity .45s}
.ghost.on{opacity:1}
.ghost .g{color:transparent;-webkit-text-stroke:1.6px rgba(27,52,242,.7);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 .8px,transparent 1.15px);
  mask-image:radial-gradient(circle at 50% 50%,#000 .8px,transparent 1.15px);
  -webkit-mask-size:4px 4px;mask-size:4px 4px}

/* tags, findings, remarks (annotation voice) */
.tag,.find{position:absolute;left:0;top:0;font:500 11px/15px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  white-space:pre;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.tag{background:var(--blue);color:var(--paper);padding:3px 6px 2px;line-height:14px}
.tag.remark{background:var(--paper);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);text-transform:none;letter-spacing:.03em}
.find{color:var(--blue);border-left:1px solid var(--blue);padding-left:6px}
.tag.on,.find.on{opacity:1}

/* chrome */
.bar{position:fixed;top:calc(16px + env(safe-area-inset-top));z-index:6;pointer-events:none}
.bar-l{left:var(--pad)}
.bar-r{right:var(--pad)}
#sub{position:fixed;z-index:6;left:0;top:0;text-transform:none;letter-spacing:.06em;font-size:12px;opacity:.7;min-height:15px;white-space:pre}
#copy{position:fixed;z-index:5;left:0;top:0;font-family:var(--disp);font-size:var(--cfs);line-height:1.16;font-weight:520;
  letter-spacing:-.012em;pointer-events:none}
.ln{white-space:pre;min-height:1.16em}
.ln .mk{display:inline-block;width:0;height:0}
.ln.small{font:500 12px/18px var(--mono);letter-spacing:.05em;margin-top:12px;min-height:18px}

#foot{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;
  padding:0 var(--pad) calc(8px + env(safe-area-inset-bottom));pointer-events:none}
#foot>*{pointer-events:auto}
.credit{justify-self:start;padding-bottom:14px;opacity:.78;text-transform:none;letter-spacing:.04em}
.cmd{justify-self:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0}
.cmd .lead{opacity:.6;padding-right:6px;text-transform:none;letter-spacing:.04em}
.notify{justify-self:end;position:relative;display:flex;align-items:center;gap:12px}
button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer;
  min-height:44px;padding:0 8px;touch-action:manipulation}
.cmd button{text-transform:none;letter-spacing:.04em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:rgba(17,17,16,.32)}
.cmd button:hover,.notify button:hover{color:var(--blue);text-decoration-color:var(--blue)}
.notify button{text-transform:none;letter-spacing:.04em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:rgba(17,17,16,.32);padding:0 4px;white-space:nowrap}
:focus-visible{outline:1px solid var(--blue);outline-offset:2px}
input{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--ink);background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--ink);min-height:44px;width:min(30vw,230px);padding:0 2px;outline:0;
  -webkit-user-select:text;user-select:text}
input::placeholder{color:rgba(17,17,16,.42)}
input:focus{border-bottom-color:var(--blue)}
.msg{position:absolute;right:0;bottom:calc(100% - 6px);font:500 11px/15px var(--mono);letter-spacing:.04em;color:var(--blue);
  text-transform:none;white-space:nowrap;pointer-events:none}
.msg:empty{display:none}

.rm .cmd,.rm .ghost{display:none}

@media (max-width:1100px){
  #foot{grid-template-columns:1fr;justify-items:stretch}
  .notify{order:1;justify-self:stretch}
  .notify input{flex:1;width:auto;min-width:0}
  .cmd{order:2;justify-self:center}
  .credit{order:3;padding-bottom:12px;justify-self:start}
  .msg{right:auto;left:0}
}
@media (max-width:420px){
  :root{--pad:16px}
  .cmd button{padding:0 6px}
  .credit{font-size:10px}
}
@media (pointer:coarse){input{font-size:16px}}
@media (prefers-reduced-motion:reduce){
  #ghosts,#stage,#tags,.tag,.find,.ghost{transition:none}
}
.find{overflow:hidden;text-overflow:ellipsis}
.pt .tag{font-size:10px;line-height:12px;padding:2px 4px 1px;letter-spacing:.05em}

/* ---------- v2: seven colours, sealed notes, reset, solved state ---------- */
[data-k="A"]{--c:#1B34F2}[data-k="G"]{--c:#E4410F}[data-k="E"]{--c:#0B7F52}[data-k="N"]{--c:#6B33E0}
[data-k="T"]{--c:#B36B00}[data-k="I"]{--c:#D11A6E}[data-k="C"]{--c:#007F8C}[data-k="Z"]{--c:#F3EEE2}
html,body{transition:background-color 1.2s,color 1.2s}
.g{transition:color .6s}
.L.got .g{color:var(--c)}
.tag{background:var(--c);color:var(--on)}
.tag.remark{background:var(--paper);color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.find{color:var(--c);border-left-color:var(--c)}

#home{pointer-events:auto;top:calc(10px + env(safe-area-inset-top));min-height:28px;padding:0 10px;margin-left:-4px;box-shadow:inset 0 0 0 1px currentColor;z-index:31;text-transform:none;letter-spacing:.06em}
#home:hover{color:var(--blue)}
#home.held{background:var(--ink);color:var(--paper);min-height:28px;top:calc(10px + env(safe-area-inset-top))}
#trk{position:fixed;z-index:31;top:calc(2px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px}
#trk button{min-height:44px;padding:0;width:18px;position:relative;color:transparent;z-index:0}
#trk button::before{content:"";position:absolute;left:1px;right:1px;top:14px;height:16px;box-shadow:inset 0 0 0 1px var(--c);opacity:.55;transition:opacity .3s,background-color .3s;z-index:-1}
#trk button:hover::before{opacity:1}
#trk button.got{color:var(--on)}
#trk button.got::before{background:var(--c);opacity:1}
#trkN{padding-left:6px;opacity:.6}
#note{position:fixed;z-index:40;left:50%;top:calc(50px + env(safe-area-inset-top));width:min(460px,calc(100vw - 32px));
  transform:translate(-50%,-14px);opacity:0;pointer-events:none;transition:opacity .28s,transform .38s cubic-bezier(.2,.9,.3,1.2);
  background:var(--c);color:var(--on);padding:12px 16px 15px;cursor:pointer;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
#note.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#note .nh{opacity:.8;margin-bottom:6px}
#note .nw{font:700 34px/1 var(--disp);letter-spacing:-.02em;margin-bottom:8px}
#note .nb{font:500 15px/1.36 var(--disp);letter-spacing:0}
#note[data-k="Z"]{color:#0D0F1C;width:min(560px,calc(100vw - 32px))}
#note[data-k="Z"] .nw{font-size:21px;line-height:1.25}

.solved{--paper:#0D0F1C;--ink:#F3EEE2;--blue:#8FA2FF;--on:#0D0F1C}
.solved [data-k="A"]{--c:#7C92FF}.solved [data-k="G"]{--c:#FF6A3D}.solved [data-k="E"]{--c:#2FCB8B}.solved [data-k="N"]{--c:#A98BFF}
.solved [data-k="T"]{--c:#F2B01E}.solved [data-k="I"]{--c:#FF5FA2}.solved [data-k="C"]{--c:#2CC7D6}.solved [data-k="Z"]{--c:#F3EEE2}
.solved .grain{opacity:.12;mix-blend-mode:screen}
.solved .cmd button,.solved .notify button{text-decoration-color:rgba(243,238,226,.4)}
.solved input{border-bottom-color:var(--ink)}.solved input::placeholder{color:rgba(243,238,226,.45)}
.solved .ghost .g{-webkit-text-stroke-color:rgba(143,162,255,.8)}
@media (max-width:520px){#note{top:auto;bottom:calc(178px + env(safe-area-inset-bottom))}#trkN{display:none}#trk button{width:16px}#note .nw{font-size:28px}#note[data-k="Z"] .nw{font-size:17px}#note .nb{font-size:14px}}
@media (prefers-reduced-motion:reduce){html,body,.g,#note{transition:none}}

/* ---------- v2.1: catchable tags, explained tracker ---------- */
.tag.on{pointer-events:auto;cursor:pointer}
.tag.sealed::after{content:" \2190  catch";opacity:.75}
.pt .tag.sealed::after{content:""}
#trk button{color:var(--c)}
#trk button::after{content:"?";position:absolute;left:0;right:0;top:14px;line-height:16px;text-align:center}
#trk button.got::after{content:attr(data-l);color:var(--on)}
html:not(.any) #trk button::before{animation:trkp 1.6s ease-in-out infinite}
#trk button:nth-child(2)::before{animation-delay:.1s}#trk button:nth-child(3)::before{animation-delay:.2s}#trk button:nth-child(4)::before{animation-delay:.3s}
#trk button:nth-child(5)::before{animation-delay:.4s}#trk button:nth-child(6)::before{animation-delay:.5s}#trk button:nth-child(7)::before{animation-delay:.6s}
@keyframes trkp{0%,100%{opacity:.35}50%{opacity:1}}
#trkN{text-transform:none;letter-spacing:.04em;white-space:nowrap}
@media (max-width:520px){#trkN{display:none}}
@media (prefers-reduced-motion:reduce){#trk button::before{animation:none!important}}

/* ---------- v2.2: A + I beat, full-screen finale ---------- */
.g{transition:color .6s,opacity .7s}
.aibeat .L:not([data-k="A"]):not([data-k="I"]) .g{opacity:.1}
.aibeat .L[data-k="A"] .g,.aibeat .L[data-k="I"] .g{color:var(--blue)}
.aibeat #sub{opacity:1;color:var(--blue)}
@media (max-width:760px){.bar-r .w{display:none}}

/* ---------- v2.3: finale on the stage, bolder tracker ---------- */
.fin #copy,.fin #sub,.fin #tags,.fin #ink,.fin #ghosts,.fin #foot,.fin #trkN,.fin .bar-r{opacity:0!important;transition:opacity .5s}
.fin #foot>*{pointer-events:none}
#finw{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden;font-size:var(--fs)}
.fw{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;opacity:0;transition:opacity .25s}
.fw.on{opacity:1}
.fw span{position:absolute;left:0;top:0;display:block;height:1em;line-height:1;white-space:nowrap;font-family:var(--disp);font-size:var(--fs);
  font-weight:620;letter-spacing:-.02em;color:var(--ink);font-optical-sizing:none;transform:translate(.012em,var(--cyn));transition:color .3s}
.fw.hot span{color:var(--c)}
#loopA{position:fixed;z-index:9;width:44px;overflow:visible;pointer-events:none;opacity:0}
#loopA.on{opacity:.75}
#loopA path{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
#loopA .lp{stroke-dasharray:1;stroke-dashoffset:1}
#loopA.on .lp{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease}
#loopA .lh{opacity:0}
#loopA.on .lh{opacity:1;transition:opacity .3s 1s}
#conf{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}
#fin{position:fixed;z-index:35;left:56%;top:50%;width:min(470px,38vw);transform:translateY(-44%);opacity:0;pointer-events:none;
  transition:opacity .8s,transform .8s cubic-bezier(.2,.9,.3,1.1);color:var(--ink)}
#fin.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
#fin .fh{opacity:.7;margin-bottom:12px;text-transform:none;letter-spacing:.06em}
#fin .fl{display:none;font:600 17px/1.3 var(--disp);margin-bottom:12px}
.rm #fin .fl{display:block}
#fin h2{font:700 clamp(26px,4.4vh,44px)/1.05 var(--disp);letter-spacing:-.02em}
#fin .fb{font:500 16px/1.45 var(--disp);opacity:.85;margin:12px 0 20px;max-width:44ch}
#fin button{box-shadow:inset 0 0 0 1px currentColor;padding:0 16px;margin:0 10px 8px 0;text-transform:none;letter-spacing:.04em}
#fin button.p{background:var(--ink);color:var(--paper);box-shadow:none}
@media (max-width:760px),(orientation:portrait){
  #fin{left:24px;right:24px;width:auto;top:auto;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateY(14px)}
  #fin.on{transform:none}
  #fin h2{font-size:26px}#fin .fb{font-size:14.5px;margin:8px 0 14px}
}
#trk{gap:4px}
#trk button{width:22px;font-weight:700;font-size:12px}
#trk button::before{top:11px;height:22px;left:0;right:0;box-shadow:inset 0 0 0 1.5px var(--c);background:color-mix(in srgb,var(--c) 18%,transparent);opacity:1}
#trk button::after{top:11px;line-height:22px}
#trk button.got::before{background:var(--c)}
@keyframes trkp{0%,100%{opacity:.5;transform:none}50%{opacity:1;transform:translateY(-2px)}}
#trkN{opacity:.9}
@media (max-width:520px){#trk{gap:3px}#trk button{width:19px}}
@media (prefers-reduced-motion:reduce){#fin{transition:none}}