@font-face{font-family:Rubik;src:url(fonts/rubik-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-bold.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
  --ink:#27304d; --mute:#66708f; --line:#d9def0; --paper:#fbfcff;
  --lav:#ecebfb; --lavD:#6a63c9; --sky:#e4f1fb; --skyD:#3f7fb8; --mint:#e1f5ef; --mintD:#2b8f80;
  --lilac:#f3eefa; --c1:#5458c4; --c2:#2a9d8f; --good:#2b8f80; --warn:#7a5fc0;
  --r:18px; --shadow:0 6px 24px rgba(48,56,110,.10),0 1px 3px rgba(48,56,110,.08);
  --fs:clamp(16px,1.05vw + 11px,21px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Rubik,system-ui,sans-serif;color:var(--ink);background:#eef1fa;font-size:var(--fs);line-height:1.55;-webkit-tap-highlight-color:transparent}
body{background-image:radial-gradient(circle at 15% 0%,#e9e6fb 0,transparent 40%),radial-gradient(circle at 100% 30%,#dff1f6 0,transparent 45%),radial-gradient(circle at 30% 100%,#e3f4ec 0,transparent 40%);background-attachment:fixed}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
.hidden{display:none!important}

/* top bar */
#top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.6em;padding:.5em .8em;background:rgba(251,252,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#top .brand{display:flex;flex-direction:column;line-height:1.15;min-width:0}
#top .brand small{font-size:.66em;color:var(--mute)}
#top .brand b{font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stars{display:flex;gap:.3em;margin-inline-start:auto}
.star{display:flex;align-items:center;gap:.25em;font-size:.68em;padding:.28em .6em;border-radius:99px;background:#f1f2f8;color:#9aa1bb;border:1px solid var(--line);white-space:nowrap;transition:.4s}
.star i{font-style:normal;font-size:1.15em;filter:grayscale(1);opacity:.5;transition:.4s}
.star.on{background:var(--mint);color:var(--mintD);border-color:#bfe6da}
.star.on i{filter:none;opacity:1}
.star.pop{animation:pop .7s}
@keyframes pop{30%{transform:scale(1.25)}60%{transform:scale(.95)}}
#nbBtn{border:0;background:var(--lavD);color:#fff;border-radius:12px;padding:.35em .7em;font-weight:500;font-size:.85em;display:flex;align-items:center;gap:.3em;position:relative}
#nbBtn .cnt{background:#fff;color:var(--lavD);border-radius:99px;font-size:.75em;padding:0 .45em;font-weight:700}
#nbBtn.bump{animation:pop .6s}
#menuBtn{border:0;background:transparent;font-size:1.2em;padding:.1em .3em;color:var(--mute)}

/* layout */
#wrap{display:flex;align-items:flex-start;max-width:1500px;margin:0 auto}
#stage{flex:1;min-width:0;padding:1em .9em 5em}
.scene{max-width:980px;margin:0 auto;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1,h2,h3{line-height:1.2;margin:.2em 0 .4em}
h1{font-size:2.3em}
h2{font-size:1.55em}
h3{font-size:1.15em}
.kicker{font-size:.78em;font-weight:500;color:var(--lavD);letter-spacing:.02em}
.lead{color:var(--mute);margin:.2em 0 1em}
.card{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:1.1em 1.2em;border:1px solid #e6e9f5}
.btn{border:0;border-radius:14px;padding:.7em 1.3em;font-weight:500;background:var(--lavD);color:#fff;box-shadow:0 4px 14px rgba(106,99,201,.3);transition:transform .15s,box-shadow .15s,opacity .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.teal{background:var(--mintD);box-shadow:0 4px 14px rgba(43,143,128,.3)}
.btn.sky{background:var(--skyD);box-shadow:0 4px 14px rgba(63,127,184,.3)}
.btn.ghost{background:transparent;color:var(--lavD);box-shadow:none;border:1.5px solid #cfcaf2}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.big{font-size:1.15em;padding:.8em 1.6em}
.row{display:flex;gap:.7em;flex-wrap:wrap;align-items:center}
.sp{flex:1}
.ink{background:var(--sky);border-radius:14px;overflow:hidden;position:relative}
.ink img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.ink.lav{background:var(--lav)} .ink.mint{background:var(--mint)} .ink.lilac{background:var(--lilac)}
.sim{font-size:.68em;color:var(--mute);background:#f1f2f8;border-radius:99px;padding:.15em .6em;display:inline-block}
.hist{font-size:.68em;color:var(--skyD);background:var(--sky);border-radius:99px;padding:.15em .6em;display:inline-block}

/* title */
.title{display:grid;grid-template-columns:1.1fr 1fr;gap:1.4em;align-items:center;min-height:calc(100vh - 140px)}
.title .ink{aspect-ratio:1344/768;box-shadow:var(--shadow);transform:rotate(-1.2deg)}
.title h1{font-size:clamp(2.2em,4vw,3.4em);margin:.1em 0}
.title .tag{display:inline-flex;gap:.4em;flex-wrap:wrap;margin-top:1em;font-size:.75em;color:var(--mute)}
.title .tag span{background:#fff;border:1px solid var(--line);padding:.2em .7em;border-radius:99px}

/* story cards */
.story{display:grid;grid-template-columns:1fr 1fr;gap:1.3em;align-items:center}
.story .ink{aspect-ratio:4/3}
.story p{font-size:1.12em}
.dots{display:flex;gap:.4em;margin:.8em 0}
.dots i{width:.55em;height:.55em;border-radius:50%;background:#d3d6ea}
.dots i.on{background:var(--lavD);width:1.4em;border-radius:99px}

/* bars */
.bars{display:grid;gap:.9em;margin:1em 0}
.bar{display:grid;grid-template-columns:9.5em 1fr 3.8em;gap:.6em;align-items:center}
.bar .t{height:2.1em;background:#eef0f8;border-radius:10px;overflow:hidden}
.bar .t i{display:block;height:100%;width:0;border-radius:10px;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.bar b{font-size:1.2em;text-align:left}
.bar small{display:block;color:var(--mute);font-size:.72em}

/* options */
.opts{display:grid;gap:.55em;margin:.8em 0}
.opt{text-align:right;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:.7em 1em;transition:.2s;display:flex;gap:.6em;align-items:flex-start}
.opt:hover{border-color:#b9b4ee;background:#faf9ff}
.opt .k{flex:none;width:1.7em;height:1.7em;border-radius:50%;background:var(--lav);color:var(--lavD);display:grid;place-items:center;font-weight:700;font-size:.8em;margin-top:.1em}
.opt.right{border-color:var(--mintD);background:var(--mint)}
.opt.right .k{background:var(--mintD);color:#fff}
.opt.wrong{border-color:#c7c2ea;background:#f6f4fd;opacity:.85}
.opt.sel{border-color:var(--lavD);background:var(--lav)}
.opts.done .opt{pointer-events:none}
.fb{border-radius:14px;padding:.8em 1em;margin:.6em 0;background:var(--sky);border-inline-start:5px solid var(--skyD);animation:fadeUp .4s}
.fb.good{background:var(--mint);border-color:var(--mintD)}
.fb.hm{background:var(--lav);border-color:var(--lavD)}
.fb > b:first-of-type{display:block;margin-bottom:.15em}
.fb .nw{white-space:nowrap}

/* clue board */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em;margin:1em 0}
.clue{position:relative;text-align:right;border:0;background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:0;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.clue:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 12px 28px rgba(48,56,110,.16)}
.clue .pic{height:7.2em;display:grid;place-items:center;font-size:2.6em;background:var(--lav);overflow:hidden;position:relative}
.clue .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clue .pic.ink{border-radius:0}
.clue .body{padding:.7em .9em .9em}
.clue .body b{display:block;font-size:.98em}
.clue .body small{color:var(--mute);font-size:.75em}
.clue .stamp{position:absolute;top:.6em;left:.6em;font-size:.66em;font-weight:700;padding:.25em .6em;border-radius:8px;background:#fff;border:2px solid;transform:rotate(-6deg)}
.stamp.out{color:#7d84a3;border-color:#a9afc9}
.stamp.test{color:var(--skyD);border-color:var(--skyD)}
.stamp.sus{color:var(--lavD);border-color:var(--lavD)}
.stamp.ruled{color:var(--mintD);border-color:var(--mintD)}
.clue.seen{opacity:.92}
.legend{display:flex;gap:.6em;flex-wrap:wrap;font-size:.75em;color:var(--mute)}

/* modal */
#modal{position:fixed;inset:0;z-index:60;background:rgba(32,38,70,.42);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1em;animation:fade .25s}
@keyframes fade{from{opacity:0}}
#modal .box{background:var(--paper);border-radius:22px;max-width:720px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(20,24,60,.35);animation:fadeUp .35s}
#modal .box .ink{border-radius:22px 22px 0 0;aspect-ratio:16/8}
#modal .box .in{padding:1.1em 1.3em 1.3em}
#modal .x{position:sticky;top:.5em;float:left;margin:.5em;border:0;background:rgba(255,255,255,.9);border-radius:50%;width:2em;height:2em;font-size:1em;z-index:2;box-shadow:var(--shadow)}

/* hypothesis */
.sentence{font-size:1.2em;line-height:2.3}
.sentence select{font-family:inherit;font-size:.9em;border:2px dashed var(--lavD);background:var(--lav);color:var(--ink);border-radius:10px;padding:.15em .4em;max-width:100%}

/* lab */
.lab{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:1em;align-items:start}
.panel h3{display:flex;align-items:center;gap:.4em}
.var{border:1px solid var(--line);border-radius:14px;padding:.6em .7em;margin:.5em 0;background:#fff;transition:.3s}
.var.changed{border-color:var(--lavD);background:#f7f6ff;box-shadow:0 0 0 3px rgba(106,99,201,.12)}
.var.locked{opacity:.55}
.var .vt{display:flex;align-items:center;gap:.4em;font-weight:500;font-size:.9em}
.var .vt .ic{font-size:1.2em}
.var .vt .ch{margin-inline-start:auto;font-size:.7em;color:var(--lavD);font-weight:700}
.seg{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.45em}
.seg button{flex:1 1 auto;border:1.5px solid var(--line);background:#fbfbfe;border-radius:10px;padding:.35em .5em;font-size:.78em;line-height:1.25}
.seg button.on{background:var(--lavD);border-color:var(--lavD);color:#fff}
.ctrlbox{border:1.5px dashed #9fd3c9;background:var(--mint);border-radius:14px;padding:.6em .8em;font-size:.82em;margin:.6em 0}
.changes{font-size:.82em;margin:.6em 0;padding:.5em .8em;border-radius:12px;background:#f3f4fa}
.changes.many{background:var(--lav);color:var(--lavD)}
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .ax{stroke:#cfd4e8;stroke-width:1}
.chart .grid{stroke:#e8ebf6;stroke-width:1}
.chart text{font-family:Rubik;fill:#7c84a3;font-size:13px}
.chart .l1{fill:none;stroke:var(--c1);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.chart .l2{fill:none;stroke:var(--c2);stroke-width:3.5;stroke-dasharray:9 6;stroke-linejoin:round;stroke-linecap:round}
.chart .d1{fill:var(--c1)} .chart .d2{fill:var(--c2)}
.chart .base1{stroke:var(--c1);stroke-opacity:.35;stroke-width:2;stroke-dasharray:3 5}
.chart .base2{stroke:var(--c2);stroke-opacity:.35;stroke-width:2;stroke-dasharray:3 5}
.keys{display:flex;gap:1em;flex-wrap:wrap;font-size:.8em;margin:.3em 0 .5em}
.keys span{display:flex;align-items:center;gap:.35em}
.keys i{width:1.6em;height:.3em;border-radius:3px;display:inline-block}
.ticker{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin:.6em 0}
.tick{border-radius:14px;padding:.55em .8em;background:#f3f4fb}
.tick small{display:block;color:var(--mute);font-size:.72em}
.tick b{font-size:1.5em;font-variant-numeric:tabular-nums}
.tick.t1 b{color:var(--c1)} .tick.t2 b{color:var(--c2)}
.runlbl{display:flex;justify-content:space-between;align-items:center;gap:.5em;flex-wrap:wrap}
.verdict{margin-top:.8em}
#run{white-space:nowrap;font-size:1.02em}
.month-hint{font-size:.75em;color:var(--mute)}

/* deduce */
.chips{display:flex;flex-wrap:wrap;gap:.5em;margin:1em 0}
.chip{border:2px solid var(--line);background:#fff;border-radius:99px;padding:.45em 1em;transition:.2s;font-size:.95em}
.chip.on{background:var(--lavD);color:#fff;border-color:var(--lavD);transform:scale(1.03)}
.chip.ok{background:var(--mintD);border-color:var(--mintD);color:#fff}
.chip.bad{border-color:#b9b2e6;background:#f3f1fd;color:#8a85b5;text-decoration:line-through}

/* board meeting */
.meet{display:grid;grid-template-columns:1fr 1fr;gap:1em}
.ev{border:2px solid var(--line);background:#fff;border-radius:16px;padding:.7em .9em;text-align:right;transition:.2s;display:flex;gap:.6em;align-items:flex-start}
.ev .ic{font-size:1.5em;flex:none}
.ev small{display:block;color:var(--mute);font-size:.75em}
.ev.on{border-color:var(--lavD);background:var(--lav)}
.ev.lock{opacity:.5;pointer-events:none;border-style:dashed}
.evs{display:grid;gap:.5em}
.speech{display:flex;gap:.6em;align-items:flex-start;margin:.6em 0;animation:fadeUp .5s}
.speech .who{flex:none;width:2.6em;height:2.6em;border-radius:50%;background:var(--sky);display:grid;place-items:center;font-size:1.2em}
.speech .bub{background:#fff;border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:.55em .85em;box-shadow:var(--shadow)}
.speech .bub small{display:block;font-weight:700;color:var(--skyD);font-size:.72em}
.speech.me{flex-direction:row-reverse}
.speech.me .who{background:var(--lav)}
.speech.me .bub{border-radius:16px 4px 16px 16px;background:var(--lav)}
.bigstamp{display:inline-block;font-size:2.4em;font-weight:700;color:#6b6f9a;border:5px solid #6b6f9a;border-radius:12px;padding:.05em .5em;transform:rotate(-8deg);animation:stamp .5s cubic-bezier(.3,1.6,.5,1);margin:.4em 0;opacity:.85}
@keyframes stamp{from{transform:scale(2.4) rotate(-8deg);opacity:0}}
.meter{height:.8em;background:#eceef7;border-radius:99px;overflow:hidden;margin:.3em 0}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--c2),var(--c1));width:0;transition:width 1.2s}

/* timeline */
.tl{position:relative;margin:1.2em 0;padding-inline-start:1.6em}
.tl:before{content:"";position:absolute;inset-inline-start:.55em;top:.3em;bottom:.3em;width:3px;background:linear-gradient(var(--lavD),var(--mintD));border-radius:3px}
.tli{position:relative;margin:0 0 .9em;animation:fadeUp .5s both}
.tli:before{content:"";position:absolute;inset-inline-start:-1.38em;top:.5em;width:.9em;height:.9em;border-radius:50%;background:#fff;border:3px solid var(--lavD)}
.tli .yr{font-weight:700;color:var(--lavD)}
.tli.now:before{border-color:var(--mintD);background:var(--mintD)}

/* notebook */
#nb{width:360px;flex:none;position:sticky;top:3.6em;height:calc(100vh - 3.6em);overflow:auto;padding:1em .9em 2em;border-inline-start:1px solid var(--line);background:repeating-linear-gradient(#fdfdff 0 31px,#e7ebf7 31px 32px);}
#nb h3{display:flex;align-items:center;gap:.4em;margin:0 0 .4em}
#nb .x{display:none}
.ne{background:rgba(255,255,255,.88);border-radius:12px;padding:.55em .7em;margin:.5em 0;border-inline-start:4px solid var(--lavD);font-size:.82em;animation:fadeUp .4s}
.ne .h{display:flex;gap:.4em;align-items:center;font-weight:700}
.ne .h small{margin-inline-start:auto;font-weight:400;color:var(--mute);font-size:.8em}
.ne p{margin:.2em 0 0}
.ne.clue{border-color:var(--skyD)} .ne.exp{border-color:var(--c1)} .ne.good{border-color:var(--mintD)} .ne.hyp{border-color:var(--lavD)} .ne.ref{border-color:#9b8fd8}
.ne svg{width:100%;height:42px;margin-top:.3em}
.ne textarea{width:100%;min-height:4em;font-family:inherit;font-size:1em;border:1px solid var(--line);border-radius:8px;padding:.4em}
.nbempty{color:var(--mute);font-size:.85em}
#scrim{display:none}

#toast{position:fixed;bottom:1.2em;left:50%;transform:translateX(-50%) translateY(300%);visibility:hidden;background:var(--ink);color:#fff;padding:.6em 1.1em;border-radius:14px;z-index:70;transition:transform .35s;font-size:.9em;max-width:92vw;text-align:center}
#toast.on{transform:translateX(-50%) translateY(0);visibility:visible}

.cert{text-align:center;border:3px double #b8b3ea;background:linear-gradient(135deg,#fbfaff,#f0f8f7)}
.statg{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;margin:1em 0}
.statg div{background:#fff;border-radius:14px;padding:.6em;border:1px solid var(--line)}
.statg b{display:block;font-size:1.6em;color:var(--lavD)}
.statg small{color:var(--mute);font-size:.72em}
textarea.big{width:100%;min-height:5em;font-family:inherit;font-size:1em;border:1.5px solid var(--line);border-radius:14px;padding:.6em .8em;background:#fff}

/* responsive */
@media (max-width:1100px){
  #nb{position:fixed;top:0;bottom:0;left:0;height:100vh;width:min(420px,88vw);z-index:50;transform:translateX(-105%);transition:transform .35s;box-shadow:0 0 40px rgba(20,24,60,.25);background-color:#fdfdff}
  #nb.open{transform:none}
  #nb .x{display:block;margin-inline-start:auto;border:0;background:#fff;border-radius:50%;width:2em;height:2em;box-shadow:var(--shadow)}
  #scrim.on{display:block;position:fixed;inset:0;z-index:45;background:rgba(32,38,70,.3)}
}
@media (min-width:1101px){ #nbBtn{display:none} }
@media (max-width:800px){
  .title,.story,.lab,.meet{grid-template-columns:1fr}
  .title{min-height:auto;gap:1em}
  .title .ink{order:-1}
  .board{grid-template-columns:repeat(2,1fr)}
  .statg{grid-template-columns:repeat(2,1fr)}
  .bar{grid-template-columns:7.2em 1fr 3em}
  #stars .star span{display:none}
}
@media (max-width:420px){
  :root{--fs:16px}
  .board{gap:.6em}
  .clue .pic{height:5.6em}
  h1{font-size:1.9em}
}
@media (min-width:1500px){ :root{--fs:22px} }

#real{max-width:620px;margin:0 auto}
@media (max-width:800px){.var{padding:.45em .6em;margin:.35em 0}.seg button{padding:.3em .4em}}

@media (min-width:1101px){body[data-scene=title] #nb,body[data-scene=intro] #nb{display:none}}

@media (max-width:800px){.chart text{font-size:22px}#top .brand small{display:none}}

/* ================= round 2: colour frames, case file, motion ================= */
:root{--px:0;--py:0}
/* scene frame: blurred episode still + sharp cut-out popping out of the top edge */
.frame{position:relative;aspect-ratio:16/9;isolation:isolate}
.frame .fr-clip{position:absolute;inset:14% 0 0 0;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,var(--lav),var(--sky));box-shadow:var(--shadow)}
.frame .fr-img{position:absolute;left:0;width:100%;top:-16.28%;height:116.28%;object-fit:cover;max-width:none;translate:calc(var(--px) * 5px) calc(var(--py) * 4px);scale:1.045;transition:translate .5s ease-out}
.frame.sharp .fr-clip{inset:0}
.frame.sharp .fr-img{top:0;height:100%}
.frame .fr-fg{position:absolute;height:auto;max-width:none;z-index:2;translate:calc(var(--px) * -9px) calc(var(--py) * -6px);transition:translate .5s ease-out;filter:drop-shadow(0 6px 10px rgba(30,36,80,.18));animation:fgIn .8s var(--d,0s) both cubic-bezier(.2,.9,.3,1.15)}
@keyframes fgIn{from{opacity:0;transform:translateY(18px) scale(.96)}}
.frame .fr-svg{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 60%,#fff 0,transparent 60%),linear-gradient(160deg,#ecebfb,#e4f1fb)}
.frame .fr-svg svg{width:62%;height:auto}
.bellsvg .bell{transform-origin:100px 16px;animation:ring 2.8s ease-in-out infinite}
.bellsvg .arcs{animation:arcs 2.8s ease-in-out infinite}
@keyframes ring{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(14deg)}70%{transform:rotate(-12deg)}78%{transform:rotate(8deg)}86%{transform:rotate(-4deg)}}
@keyframes arcs{0%,58%{opacity:0}66%,84%{opacity:1}100%{opacity:0}}
.storyfr .fr-img,.herofr .fr-img{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{scale:1.12}}
.storyfr .fr-fg{animation:fgIn .8s var(--d,0s) both cubic-bezier(.2,.9,.3,1.15),float 6s calc(var(--d,0s) + 1s) ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.frame.shake{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-6px) rotate(-.4deg)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* title hero */
.hero{position:relative;transform:rotate(-1.2deg)}
.hero-semmel{position:absolute;left:-7%;bottom:0;width:46%;z-index:3;filter:drop-shadow(0 10px 18px rgba(30,36,80,.28));animation:heroIn 1s .3s both cubic-bezier(.2,.9,.3,1.1),float 7s 1.4s ease-in-out infinite alternate;translate:calc(var(--px) * -12px) calc(var(--py) * -8px);transition:translate .5s ease-out}
@keyframes heroIn{from{opacity:0;transform:translateX(-30px) scale(.92)}}
.story{grid-template-columns:1.1fr 1fr}
.title{grid-template-columns:1fr 1.3fr}
.story .stxt{animation:fadeUp .6s .15s both}

/* small art */
.thumb{display:block;object-fit:contain}
.thumb.photo{object-fit:cover}
.av{width:2.6em;height:2.6em;border-radius:50%;object-fit:cover;object-position:50% 12%;background:linear-gradient(160deg,var(--lav),var(--sky));border:2px solid #fff;box-shadow:0 2px 8px rgba(48,56,110,.15);flex:none}
.av.sm{width:2em;height:2em}
.bar .who{display:flex;gap:.5em;align-items:center}
.bar{grid-template-columns:12.5em 1fr 3.8em}
.who1{display:flex;align-items:center;gap:.45em;margin:.2em 0 .1em}
.ctrlbox{display:flex;gap:.55em;align-items:center}
.tick{display:flex;gap:.6em;align-items:center}
.tick .av{width:2.4em;height:2.4em}
.tick.tk b{animation:tick .35s}
@keyframes tick{40%{transform:translateY(-3px) scale(1.1)}}
.vthumb{width:2em;height:2em;border-radius:10px;object-fit:cover;object-position:50% 20%;background:linear-gradient(160deg,var(--lav),var(--sky));flex:none;display:inline-grid;place-items:center;font-size:1.25em}
.vthumb.svgt svg{width:1.1em;height:1.1em}
.sent-art{float:left;width:min(34%,190px);margin:-.4em .2em 0 -.2em;shape-outside:margin-box;filter:drop-shadow(0 6px 10px rgba(30,36,80,.15));animation:fgIn .8s .2s both}
.sentence:after{content:"";display:block;clear:both}

/* clue board: cards with art that pops out */
.board{row-gap:1.6em;margin-top:1.6em}
.clue{background:transparent;box-shadow:none;overflow:visible;animation:dealIn .55s calc(var(--i,0) * 80ms) both cubic-bezier(.2,.9,.3,1.2)}
@keyframes dealIn{from{opacity:0;transform:translateY(24px) rotate(2deg) scale(.95)}}
.clue .frame.mini .fr-clip{border-radius:var(--r) var(--r) 0 0;box-shadow:none}
.clue .frame.mini{margin-bottom:-1px}
.clue .body{background:var(--paper);border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow);flex:1;position:relative}
.clue:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:none}
.clue:hover .fr-fg{transform:translateY(-4px) scale(1.03);transition:transform .3s}
.clue .inf{display:flex;width:max-content;align-items:center;gap:.25em;font-size:.68em;color:var(--mintD);font-weight:700;margin-top:.25em}
.clue .inf svg{width:.7em;height:1.4em;color:var(--mintD)}
.clue .inf.new{color:var(--lavD);animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.45}}
.clue .stamp{top:auto;bottom:4.2em;left:.6em;z-index:4;box-shadow:0 2px 6px rgba(48,56,110,.12)}
.clue.fresh .stamp{animation:stamp .55s .5s both cubic-bezier(.3,1.6,.5,1)}
.clue.fresh{animation:none}
.clue.fresh .body{animation:glow 1.6s .4s}
@keyframes glow{30%{box-shadow:0 0 0 4px rgba(43,143,128,.35),var(--shadow)}}
.legend{gap:1em}

/* modal + flip */
#modal .box.flip{animation:flipIn .55s cubic-bezier(.2,.9,.3,1.1);transform-origin:50% 40%}
@keyframes flipIn{from{opacity:0;transform:perspective(900px) rotateY(-75deg) scale(.92)}}
#modal .box .modalfr{margin:.4em 1em 0}
#modal .box .modalfr .fr-clip{border-radius:16px}
#modal .box{overflow-x:hidden}

/* options & buttons: micro-interactions */
.opts .opt{animation:optIn .4s calc(var(--i,0) * 60ms) both}
@keyframes optIn{from{opacity:0;transform:translateX(-12px)}}
.opt:active{transform:scale(.985)}
.opt.right{animation:okPulse .5s}
.opt.wrong{animation:nope .4s}
@keyframes okPulse{50%{transform:scale(1.02)}}
@keyframes nope{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.btn{position:relative;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s,opacity .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(106,99,201,.32)}
.btn:active{transform:translateY(1px) scale(.97)}
.btn.big:not([disabled]){animation:nudge 3.6s 2s ease-in-out infinite}
@keyframes nudge{0%,88%,100%{transform:none}92%{transform:translateX(-4px)}96%{transform:translateX(1px)}}
.btn.big:hover{animation:none}
.chip{animation:optIn .4s calc(var(--i,0) * 50ms) both}
.chip:active{transform:scale(.96)}
.chip.ok{animation:okPulse .5s}
.seg button{transition:background .2s,color .2s,border-color .2s,transform .15s}
.seg button:active{transform:scale(.95)}
.seg button.on{animation:okPulse .3s}

/* chart */
.chart circle{transform-box:fill-box;transform-origin:center;animation:dotIn .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes dotIn{from{transform:scale(0)}}
.chart .l1,.chart .l2{transition:all .3s}

/* verdict stamps */
.vbox{position:relative}
.vstamp{float:left;margin:-.1em .1em .3em .7em;font-weight:700;font-size:.92em;letter-spacing:.02em;padding:.18em .6em;border:3px solid;border-radius:10px;transform:rotate(-7deg);background:rgba(255,255,255,.75);animation:stamp .55s .15s both cubic-bezier(.3,1.6,.5,1);white-space:nowrap}
.vstamp.mint{color:var(--mintD);border-color:var(--mintD)}
.vstamp.lav{color:var(--lavD);border-color:var(--lavD)}
.vstamp.sky{color:var(--skyD);border-color:var(--skyD)}
.fb.vbox:after{content:"";display:block;clear:both}

/* header: the case-file button */
#caseBtn{border:1.5px solid #c9d8ee;background:#fff;color:var(--ink);border-radius:12px;padding:.25em .6em .25em .5em;font-weight:500;font-size:.85em;display:flex;align-items:center;gap:.35em;position:relative;transition:transform .15s,box-shadow .2s}
#caseBtn:hover{box-shadow:0 4px 14px rgba(63,127,184,.22);transform:translateY(-1px)}
#caseBtn .fold{position:relative;width:1.9em;height:1.5em;display:block}
#caseBtn .fold>svg{width:100%;height:100%;overflow:visible}
#caseBtn .fback{fill:#9fc3e6}#caseBtn .fpaper{fill:#fff;stroke:#c9d8ee}#caseBtn .ffront{fill:#c7dcf3;stroke:#7fa9d6;stroke-width:1;transform-origin:50% 100%;transition:transform .3s}
#caseBtn .fclip{position:absolute;top:-.45em;left:.18em;width:.5em;height:1.2em;color:#6a63c9;transform-origin:50% 0}
#caseBtn .fclip svg{width:100%;height:100%;display:block}
#caseBtn .cnt{background:var(--sky);color:var(--skyD);border-radius:99px;font-size:.75em;padding:0 .5em;font-weight:700;font-variant-numeric:tabular-nums}
#caseBtn.snap{animation:fileBounce .7s cubic-bezier(.3,1.6,.5,1)}
#caseBtn.snap .ffront{animation:flap .6s}
#caseBtn.snap .fclip{animation:clipSnap .6s cubic-bezier(.3,1.8,.5,1)}
#caseBtn.snap .cnt{animation:pop .6s;background:var(--mintD);color:#fff;transition:background 1.2s .6s,color 1.2s .6s}
@keyframes fileBounce{30%{transform:scale(1.18) rotate(-4deg)}60%{transform:scale(.96)}}
@keyframes flap{30%{transform:scaleY(.72) skewX(-8deg)}}
@keyframes clipSnap{0%{transform:translateY(-.5em) rotate(-25deg)}55%{transform:translateY(.12em) rotate(6deg)}100%{transform:none}}
#nbBtn .lbl{display:inline}

/* the flying card */
.flyer{position:fixed;left:0;top:0;z-index:90;display:flex;align-items:center;gap:.5em;background:#fff;border-radius:12px;padding:.4em .7em .4em .5em;box-shadow:0 14px 34px rgba(30,36,80,.28);border:1.5px solid #c9d8ee;font-size:.85em;pointer-events:none;max-width:240px;will-change:transform}
.flyer .thumb{width:2.6em;height:2.6em;border-radius:8px;background:linear-gradient(160deg,var(--lav),var(--sky));object-position:50% 15%}
.flyer small{display:block;color:var(--mute);font-size:.72em}
.flyer b{display:block;line-height:1.2}
.svgt{display:inline-grid;place-items:center}
.svgt svg{width:65%;height:65%}

/* the open case file */
#modal .box.filebox{max-width:900px;background:#f4f7fd}
.folder{position:relative;margin:1.6em .6em .6em;background:linear-gradient(#dfe9f8,#e9effa);border:1.5px solid #c3d4ee;border-radius:6px 18px 18px 18px;padding:1em 1em 1.2em;box-shadow:inset 0 1px 0 #fff}
.ftab{position:absolute;top:-1.55em;right:-1.5px;background:#dfe9f8;border:1.5px solid #c3d4ee;border-bottom:0;border-radius:12px 12px 0 0;padding:.25em 1em;font-size:.72em;font-weight:700;color:var(--skyD)}
.fhead{display:flex;gap:.9em;align-items:center;margin-bottom:.4em}
.fhead h3{margin:.05em 0 .3em}
.bigclip{width:1.3em;height:3em;color:var(--lavD);flex:none;transform:rotate(-8deg);margin-top:-1.6em}
.bigclip svg{width:100%;height:100%}
.fprog{height:.55em;border-radius:99px;background:#fff;overflow:hidden;margin:.2em 0 .3em;width:min(320px,60vw)}
.fprog i{display:block;height:100%;background:linear-gradient(90deg,var(--c2),var(--c1));border-radius:99px;animation:grow 1s .2s both}
@keyframes grow{from{width:0}}
.fsec h4{margin:.9em 0 .5em;font-size:.85em;color:var(--mute);font-weight:500}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8em}
.fcard{position:relative;display:flex;gap:.6em;align-items:flex-start;background:#fff;border-radius:6px;padding:.75em .75em .7em;box-shadow:0 3px 10px rgba(48,56,110,.12);transform:rotate(var(--rot,0));animation:deal .5s calc(var(--i) * 45ms) both cubic-bezier(.2,.9,.3,1.2);font-size:.85em}
@keyframes deal{from{opacity:0;transform:translateY(-14px) rotate(-4deg) scale(.95)}}
.fcard .thumb{width:3.6em;height:3.6em;flex:none;border-radius:8px;background:linear-gradient(160deg,var(--lav),var(--sky));object-position:50% 15%}
.fcard small{display:block;color:var(--mute);font-size:.78em}
.fcard b{display:block;line-height:1.25}
.fcard em{display:block;font-style:normal;color:var(--mute);font-size:.86em;line-height:1.35;margin-top:.15em}
.fcard em.dt{color:var(--ink);font-weight:500}
.fcard svg:not(.pclip svg){width:100%;height:30px;margin-top:.3em}
.fcard .svgt svg{width:65%;height:65%;margin:0}
.pclip{position:absolute;top:-.85em;left:1em;width:.75em;height:2em;color:#8a84d6;z-index:2}
.pclip svg{width:100%!important;height:100%!important;margin:0!important;display:block}
.fcard.fresh{animation:deal .5s calc(var(--i) * 45ms) both,glow 1.6s .8s}
.fcard.empty{background:rgba(255,255,255,.4);border:1.5px dashed #b9c8e4;box-shadow:none;transform:none;color:var(--mute)}
.fcard.empty .q{width:2.4em;height:2.4em;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);font-weight:700;color:#9aa7c6;font-size:1.2em}
.histi{font-style:normal;color:var(--skyD)}

/* board: evidence pulled from the file */
.boardfile{margin:1.8em 0 0}
.fhead.mini{margin-bottom:.6em}
.fhead.mini .bigclip{height:2.4em;width:1em;margin-top:-1.4em}
.boardfile .evs{grid-template-columns:repeat(2,1fr);gap:.7em}
.ev{position:relative;border:1.5px solid #dfe5f3;border-radius:8px;box-shadow:0 3px 10px rgba(48,56,110,.1);animation:deal .5s calc(var(--i,0) * 70ms) both cubic-bezier(.2,.9,.3,1.2);align-items:center}
.ev .thumb{width:3.2em;height:3.2em;border-radius:8px;flex:none;background:linear-gradient(160deg,var(--lav),var(--sky));object-position:50% 15%}
.ev .pclip{left:1.2em}
.ev:hover{transform:translateY(-2px) rotate(-.4deg)}
.ev.on{transform:translateY(-6px) rotate(-1.2deg);box-shadow:0 12px 26px rgba(106,99,201,.25);border-color:var(--lavD);background:#f6f5ff}
.ev.on .pclip{color:var(--lavD)}
.ev.note{background:#fbfbfe;border-style:dashed}
.ev .tag{display:block;font-style:normal;font-size:.7em;color:var(--lavD);margin-top:.15em}
.ev.lock{opacity:.55}
.meetfr{align-self:center}
.speech .who .face{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 10%}
.speech .who{overflow:hidden;border:2px solid #fff;box-shadow:0 2px 6px rgba(48,56,110,.15)}
.inl .fr-clip{border-radius:14px}

/* timeline + end */
.tli.hasart{min-height:4.6em}
.tlart{float:left;width:6.4em;height:4.6em;margin:-.2em .8em .4em 0;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(30,36,80,.15));animation:fgIn .8s both;animation-delay:inherit}
.tli:after{content:"";display:block;clear:both}
.cast{display:flex;justify-content:center;align-items:flex-end;height:6.5em;margin:-.3em 0 .4em}
.cast .thumb{height:100%;width:auto;filter:drop-shadow(0 6px 10px rgba(30,36,80,.15));animation:fgIn .8s both}
.cast .c1{height:92%;margin-left:-1.2em;animation-delay:.15s}.cast .c2{z-index:2;animation-delay:0s}.cast .c3{height:80%;margin-right:-1.2em;animation-delay:.3s}
.closedfile{position:relative;display:inline-flex;align-items:center;gap:.8em;border:1.5px solid #c3d4ee;background:linear-gradient(#dfe9f8,#e9effa);border-radius:6px 14px 14px 14px;padding:.7em 1.2em .7em 1.4em;margin-top:.3em;transition:transform .2s}
.closedfile:hover{transform:translateY(-2px) rotate(-.5deg)}
.closedfile .pclip{top:-.9em;left:1.2em}
.cstamp{font-weight:700;color:var(--lavD);border:3px solid var(--lavD);border-radius:8px;padding:0 .5em;transform:rotate(-8deg);animation:stamp .55s .9s both cubic-bezier(.3,1.6,.5,1);font-size:.9em;background:rgba(255,255,255,.6)}

/* responsive for round 2 */
@media (max-width:800px){
  .story{grid-template-columns:1fr}
  .title .hero{order:-1;max-width:520px;margin:0 auto .4em;width:92%}
  .hero-semmel{left:-6%;width:44%}
  .bar{grid-template-columns:9.6em 1fr 2.8em}
  .bar .who .av{width:2.1em;height:2.1em}
  .boardfile .evs{grid-template-columns:1fr}
  #caseBtn .lbl,#nbBtn .lbl{display:none}
  #caseBtn{padding:.25em .45em}
  .vstamp{font-size:.82em}
  .tlart{width:5em;height:3.8em}
}
@media (max-width:420px){
  .board{row-gap:1.3em}
  .clue .body{padding:.55em .7em .7em}
  .clue .stamp{bottom:3.8em;font-size:.6em}
  .sent-art{width:30%}
  #top{gap:.4em;padding:.45em .55em}
  .star{padding:.25em .45em}
  .fgrid{grid-template-columns:1fr}
  .tick .av{display:none}
  .folder{margin:1.6em .2em .4em;padding:.9em .7em 1em}
}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .frame .fr-img,.frame .fr-fg,.hero-semmel{translate:none!important}
}

#toast{top:4.6em;bottom:auto;transform:translateX(-50%) translateY(-200%)}
#toast.on{transform:translateX(-50%) translateY(0)}

.opt.dim{opacity:.55;border-color:var(--line);background:#fafbfe}
.opt.sel{animation:okPulse .45s}
.opt.sel .k{background:var(--lavD);color:#fff}
.fb.open{background:#f3f4fb;border-color:#9aa7c6}

/* ===== desktop modal layout: art beside the text, so feedback + continue stay in view ===== */
@media (min-width:900px){
  #modal .box.hasart{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) 40%;grid-template-areas:"in art";align-items:start;position:relative}
  #modal .box.hasart > .in{grid-area:in;padding:1.3em 1.5em 1.4em}
  #modal .box.hasart > .modalfr{grid-area:art;margin:2.9em .1em 1.3em 1.3em;position:sticky;top:2.9em}
  #modal .box.hasart > .x{grid-area:art;position:sticky;top:.6em;justify-self:end;align-self:start;margin:.6em;float:none}
}
@media (max-width:899px) and (max-height:800px){
  #modal .box .modalfr{max-height:30vh;max-width:calc(30vh * 16 / 9);margin-inline:auto}
}

/* credit + feedback (Oct 29; made small & quiet per her request) */
.fb-pill{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;box-sizing:border-box;padding:0;text-decoration:none;border:1px solid var(--line);background:transparent;color:var(--lavD);border-radius:50%;font-size:.8em;line-height:1;opacity:.55;transition:opacity .2s}
.fb-pill:hover,.fb-pill:focus-visible{opacity:1}
.fb-pill .lbl{display:none}
.hc-credit{font-size:.78em;color:var(--mute);margin:.9em 0 0}
.hc-credit a{color:var(--lavD);text-decoration:none;border-bottom:1px dotted currentColor}
.hc-credit a:hover{border-bottom-style:solid}
.hc-credit a.fb-mini{border-bottom:0;margin-inline-start:.45em;opacity:.55;font-size:.95em;transition:opacity .2s}
.hc-credit a.fb-mini:hover,.hc-credit a.fb-mini:focus-visible{opacity:1}
.cert .hc-credit{text-align:center}
.menu-credit{text-align:center;margin-top:1em}
a.opt{text-decoration:none;color:inherit}
@media (max-width:800px){ .fb-pill{display:none} }
@media (max-width:420px){ #top{gap:.3em} }
@media (prefers-reduced-motion:reduce){ .fb-pill,.hc-credit a.fb-mini{transition:none} }
@media print{ .fb-pill,.fb-mini{display:none!important} }

/* lab UX (Oct 29, task de53cbba): numbered steps, paired identical choice cards, run always in view, passive results until a run */
.labsteps{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.35em .3em;margin:.35em 0 .7em;padding:0;font-size:.82em}
.labsteps li{display:flex;align-items:center;gap:.4em;padding:.3em .75em .3em .6em;border-radius:99px;background:#f1f2f8;color:var(--mute);transition:background .3s,color .3s}
.labsteps li i{font-style:normal;width:1.55em;height:1.55em;border-radius:50%;display:grid;place-items:center;background:#fff;font-weight:700;font-size:.85em}
.labsteps li+li:before{content:"←";color:#b7bcd4;margin-inline-end:.45em;margin-inline-start:-.25em}
.labsteps li.now{background:var(--lavD);color:#fff;font-weight:500}
.labsteps li.now i{color:var(--lavD)}
.labsteps li.done{background:var(--mint);color:var(--mintD)}
.labsteps li.done i{background:var(--mintD);color:#fff}
@media (min-width:801px){.lab{grid-template-columns:minmax(300px,410px) 1fr}}
#vars{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin:.45em 0}
#vars .var{margin:0;display:flex;flex-direction:column;padding:.5em .55em}
.var .vt{gap:.35em;min-height:2em}
.var .vt .vn{line-height:1.15}
.var .vthumb{width:1.7em;height:1.7em;font-size:1.05em}
.var .vt .ch{white-space:nowrap}
.seg{flex-direction:column;flex-wrap:nowrap;gap:.3em;margin-top:.4em}
.seg button{flex:none;width:100%;min-height:2.85em;display:flex;align-items:center;justify-content:center;text-align:center;padding:.3em .45em;font-size:.76em}
.var.fresh{animation:freshIn 1.4s ease 2}
@keyframes freshIn{50%{box-shadow:0 0 0 4px rgba(106,99,201,.22);border-color:var(--lavD)}}
.runwrap{position:sticky;bottom:.5em;z-index:6;margin:.55em 0}
.runwrap #run{box-shadow:0 6px 18px rgba(43,143,128,.35),0 0 0 4px #fff}
.panel .changes{margin:.5em 0 0}
.rescard{transition:background .4s,box-shadow .4s,border-color .4s}
.rescard.idle{background:#f8f9fd;box-shadow:none;border:1.5px dashed #d6daea}
.rescard.idle .keys,.rescard.idle .chart svg,.rescard.idle .ticker{opacity:.32;filter:grayscale(1)}
.rescard.idle .keys,.rescard.idle .chart,.rescard.idle .ticker{pointer-events:none;user-select:none}
.idlemsg{display:none}
.rescard.idle .idlemsg{display:grid;place-items:center;position:absolute;inset:0;text-align:center;color:#8d93ad;font-size:1.05em;font-weight:500;padding:1em;pointer-events:none}
@media (max-width:800px){
  .labsteps{font-size:.74em;gap:.3em .2em}
  .labsteps li{padding:.25em .55em .25em .45em}
  #vars .var{padding:.45em .45em}
  .seg button{min-height:3.1em;font-size:.74em;padding:.25em .35em}
  .rescard.idle .idlemsg{font-size:.95em}
}
@media (prefers-reduced-motion:reduce){.var.fresh{animation:none}.labsteps li{transition:none}}

/* unlock announcement (unlock-ann.js) — case-file look */
#ua{--ua-accent:var(--lavD);--ua-ink:var(--ink);--ua-ink2:var(--mute);--ua-card:var(--paper);--ua-soft:var(--lav);--ua-ring:#cfcaf3;--ua-shade:rgba(39,48,77,.55);--ua-btn-radius:14px;--ua-btn-shadow:0 4px 14px rgba(106,99,201,.3)}