:root{--bg:#05080d;--panel:#071015;--panel2:#0c161c;--line:#30434a;--green:#18ff8b;--pink:#ff4fa8;--blue:#1745aa;--text:#eaf4ef;--muted:#91a3a4;--yellow:#ffc857;--danger:#ff4757;--shadow:0 22px 60px rgba(0,0,0,.6)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none;background:#020407;color:var(--text);font-family:"Courier New",monospace;overflow:hidden}button,input,select,textarea{font:inherit}.desktop{height:100vh;height:100dvh;display:flex;flex-direction:column;background:radial-gradient(circle at 75% 28%,rgba(68,16,80,.42),transparent 25%),radial-gradient(circle at 20% 80%,rgba(0,135,105,.18),transparent 30%),linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.7)),repeating-linear-gradient(120deg,#071019 0 2px,#09090f 3px 5px)}
.desktop:before{content:"";position:absolute;inset:72px 0 38px;background:linear-gradient(115deg,transparent 0 22%,rgba(255,255,255,.025) 22.4%,transparent 23%),radial-gradient(circle at 82% 48%,rgba(255,79,168,.12),transparent 18%);pointer-events:none}.scanlines{position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.06) 4px)}
.brand-strip{height:74px;padding:9px 18px;display:flex;align-items:center;gap:28px;border-bottom:1px solid rgba(24,255,139,.35);background:rgba(0,0,0,.68);z-index:2}.brand-mark{display:flex;align-items:center;gap:10px;min-width:290px}.cat-mark{font-size:40px;filter:saturate(.4) sepia(1) hue-rotate(270deg) saturate(8)}.brand-mark h1{font-family:Impact,sans-serif;letter-spacing:2px;font-style:italic;color:var(--pink);margin:0;font-size:32px}.brand-mark span{font-size:11px;color:var(--green);letter-spacing:1.4px}.chain-pill{margin-left:auto;border:1px solid #6d8791;border-radius:4px;box-shadow:0 0 15px rgba(24,255,139,.15);padding:6px 34px 6px 12px;position:relative;display:grid;gap:2px;background:#071116}.chain-pill strong{color:var(--green);font-size:18px}.chain-pill span{font-size:11px}.chain-pill i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--green);right:12px;top:12px;box-shadow:0 0 10px var(--green)}.mission{font-size:11px;line-height:1.35;color:var(--pink);width:260px}.desktop-area{position:relative;flex:1;min-height:0}.icons{position:absolute;left:13px;top:22px;display:grid;grid-template-columns:90px 90px;gap:16px 12px;z-index:1}.desktop-icon{position:relative;width:88px;min-height:82px;background:transparent;border:0;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;text-shadow:1px 1px #000}.desktop-icon span{font-size:34px;filter:drop-shadow(2px 3px 0 #000)}.desktop-icon small{font-size:11px;line-height:1.05}.desktop-icon:hover{background:rgba(23,69,170,.3);outline:1px dotted #fff}.tin-icon .icon-cat{font-size:37px}.tin-icon em{position:absolute;right:16px;top:0;background:#ff233f;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:bold;font-style:normal}.wall-copy{position:absolute;color:rgba(244,246,251,.8);font-family:Impact,sans-serif;font-size:38px;line-height:.98;transform:rotate(-8deg);text-shadow:0 0 18px rgba(255,255,255,.08)}.wall-copy-right{right:35px;top:72px}.poster{position:absolute;background:#d7bf8a;color:#17120e;padding:14px 10px;font-weight:bold;box-shadow:0 5px 10px #000;transform:rotate(-8deg);font-family:"Comic Sans MS",cursive;z-index:0}.poster-left{left:25px;bottom:25px}.poster-right{right:28px;bottom:20px;transform:rotate(7deg)}
.app-window{position:absolute;z-index:20;left:15.5%;top:4%;width:min(1120px,74vw);height:min(740px,83%);min-width:760px;min-height:520px;background:#b9bdc2;border:2px solid #d9dfe6;box-shadow:var(--shadow),0 0 0 2px #3a3e42;display:flex;flex-direction:column}.titlebar{height:34px;flex:0 0 34px;background:linear-gradient(90deg,#113d9d,#0d2a77);color:#fff;display:flex;align-items:center;justify-content:space-between;padding-left:9px;cursor:move;user-select:none}.titlebar>div:first-child{display:flex;align-items:center;gap:10px}.mini-cat{font-size:19px}.version{font-size:12px;margin-left:14px}.window-controls{display:flex;gap:2px;height:100%;align-items:center;padding-right:3px}.window-controls button{height:25px;width:28px;border:2px outset #ddd;background:#c5c9cc;font-weight:bold;cursor:pointer}.window-controls button:last-child{background:#ee7447}.app-shell{flex:1;min-height:0;background:#061016;display:grid;grid-template-columns:170px 1fr}.side-nav{background:linear-gradient(#18232a,#10191e);border-right:1px solid #50636d;padding:11px;display:flex;flex-direction:column;gap:6px}.nav-btn{border:1px solid #394c55;background:#1a242a;color:#eef6f2;text-align:left;padding:12px 10px;cursor:pointer;font-weight:bold;font-size:12px}.nav-btn:hover,.nav-btn.active{background:var(--green);color:#08100d;border-color:#7effba}.nav-stamp{margin:auto 10px 20px;color:#aeb9ba;font-size:13px;line-height:1.7;text-align:center}.content{overflow:auto;background:radial-gradient(circle at 50% 0,rgba(24,255,139,.04),transparent 25%),#071015;padding:9px 9px 28px}.tab-panel{display:none;height:100%}.tab-panel.active{display:block}.overview-grid{display:grid;grid-template-columns:1.25fr .9fr 1fr;grid-template-rows:1fr .72fr;gap:8px;height:calc(100% - 62px)}.overview-grid>*{min-height:0}.panel{background:rgba(3,10,14,.94);border:1px solid #405864;box-shadow:inset 0 0 0 1px rgba(0,0,0,.7)}.panel-head{height:30px;padding:7px 9px;border-bottom:1px solid #2a444d;font-weight:bold;font-size:12px}.panel-head time{float:right;color:#bac6c8}.panel-head.green,.eyebrow{color:var(--green)}.live-dot{width:9px;height:9px;background:var(--pink);border-radius:50%;display:inline-block;margin-right:6px;box-shadow:0 0 10px var(--pink)}.live-card{grid-column:1/span 2}.cat-room{height:calc(100% - 30px);position:relative;overflow:hidden;background:radial-gradient(circle at 50% 70%,rgba(255,79,168,.34),transparent 20%),linear-gradient(120deg,#0b1515,#100b18 55%,#09160e)}.cat-room:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 48%,rgba(255,79,168,.14) 49%,transparent 50%),repeating-linear-gradient(90deg,transparent 0 80px,rgba(24,255,139,.04) 81px 82px)}.room-wall,.room-sign{position:absolute;top:25px;padding:8px;font-weight:bold;line-height:1.2;transform:rotate(-3deg)}.room-wall{left:25px;color:var(--green);border:2px solid #40525c;background:#071113;box-shadow:0 0 15px rgba(24,255,139,.2)}.room-sign{right:20px;color:#111;background:#cab68c;font-family:"Comic Sans MS",cursive}.cat-avatar{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:270px;text-align:center}.cat-avatar .foil{position:absolute;left:50%;transform:translateX(-50%) rotate(2deg);top:-37px;font-size:72px;color:#d7dae4;text-shadow:0 0 1px #fff,2px 2px 0 #888;line-height:1}.ears{font-size:31px;color:var(--pink);letter-spacing:9px;margin-bottom:-23px}.face{font-size:92px;filter:saturate(.7) sepia(1) hue-rotate(280deg) saturate(8);line-height:1}.laptop{margin:-15px auto 0;width:185px;height:72px;background:#1e2027;border:3px solid #09090c;color:#d47196;font-size:13px;display:grid;place-items:center;transform:perspective(300px) rotateX(-6deg)}.obsession-card{padding:14px;overflow:auto}.obsession-card h2{font-size:23px;color:var(--green);margin:7px 0}.obsession-card blockquote{margin:6px 0 18px;color:#c7cfcc;font-size:12px}.meter{height:18px;border:1px solid #53646c;padding:2px;margin:6px 0 17px;background:#111}.meter div{height:100%;width:82%;background:repeating-linear-gradient(90deg,var(--pink) 0 10px,transparent 11px 13px);transition:width .5s}.topic-list{display:grid;gap:7px;font-size:11px}.topic{display:flex;gap:7px;align-items:center}.topic i{width:12px;height:12px;border:1px solid #839296;display:inline-grid;place-items:center;font-style:normal}.topic.active i{border-color:var(--green);color:var(--green)}.brain-card{position:relative;padding-bottom:27px}.brain-card canvas{width:65%;height:calc(100% - 31px);display:block}.brain-stats{position:absolute;right:13px;top:45px;display:grid;gap:10px}.brain-stats div{display:grid}.brain-stats strong{color:var(--green);font-size:18px}.brain-stats span{color:var(--green);font-size:10px}.process{position:absolute;left:8px;right:8px;bottom:6px;color:var(--pink);font-size:10px;font-weight:bold}.terminal{padding:8px;color:var(--green);font-size:11px;line-height:1.55;overflow:auto}.terminal div:before{content:"> ";color:#1dff84}.feed-card{overflow:auto}.feed-item{padding:9px;border-bottom:1px solid #1c313a;display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;font-size:10px}.feed-item b{font-size:11px}.feed-item small{color:#7e9196}.feed-icon{font-size:18px}.quick-feed{height:54px;display:grid;grid-template-columns:1fr 170px 220px;gap:6px;margin-top:8px}.quick-feed input,.quick-feed select,.lead-form input,.lead-form select,.lead-form textarea{background:#0a141a;border:1px solid #546b76;color:#dce7e3;padding:10px;outline:none}.quick-feed input:focus,.lead-form input:focus,.lead-form textarea:focus{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}.quick-feed button,.big-action{border:0;background:var(--pink);color:#14070d;font-weight:900;padding:10px 15px;cursor:pointer;box-shadow:inset 0 -3px rgba(0,0,0,.2)}.quick-feed button:hover,.big-action:hover{filter:brightness(1.15)}
.section-title{display:flex;align-items:center;gap:12px;border-bottom:1px solid #27404a;padding:7px 2px 12px;margin-bottom:14px}.section-title>span{font-size:38px}.section-title h2{margin:0;color:var(--green)}.section-title p{margin:3px 0 0;color:#aeb9ba;font-size:12px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.rabbit-card{padding:14px;background:#0a151b;border:1px solid #415963;position:relative;overflow:hidden}.rabbit-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--pink)}.rabbit-card h3{margin:5px 0 4px;color:#fff}.rabbit-card p{color:#9dabad;font-size:11px;min-height:30px}.status{font-size:10px;padding:4px 6px;background:#182930;border:1px solid #344e59;color:var(--green)}.rabbit-card button{margin-top:10px;background:#173b30;border:1px solid var(--green);color:var(--green);padding:7px 10px;cursor:pointer}.lead-form{max-width:760px;margin:20px auto;display:grid;gap:12px}.lead-form label{display:grid;gap:6px;font-size:11px;color:var(--green);font-weight:bold}.lead-form textarea{height:150px;resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lead-form .check{display:flex;align-items:center;color:#c6d0cd}.lead-form .check input{width:auto}.feed-result{max-width:760px;margin:0 auto;padding:0 0 20px}.feed-result.success{border:1px solid var(--green);padding:15px;background:#062015;color:var(--green)}.case-list{display:grid;gap:10px}.case-row{border:1px solid #3d5660;background:#0a1419;padding:12px;display:grid;grid-template-columns:100px 1fr auto;gap:14px;align-items:center}.case-num{font-size:11px;color:var(--pink)}.case-row h3{margin:0 0 4px}.case-row p{font-size:11px;color:#9aa9aa;margin:0}.case-status{font-size:10px;padding:4px 7px;border:1px solid currentColor}.brain-lab{display:grid;grid-template-columns:1fr 270px;gap:12px;height:calc(100% - 78px);min-height:320px}.brain-lab>*{min-height:0}.stimulus-panel{overflow:auto}.giant-brain{min-height:390px}.giant-brain canvas{width:100%;height:100%}.stimulus-panel{padding:18px}.stimulus-panel h3{font-size:18px;margin:7px 0 20px}.stimulus-panel .big-action{width:100%;margin-top:16px}.disclaimer{font-size:10px;color:#89999b;line-height:1.5}.history-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0}.history-kpis div{background:#0b171c;border:1px solid #425b66;padding:16px;display:grid}.history-kpis b{font-size:27px;color:var(--green)}.history-kpis span{font-size:10px;color:#a4b1b0}.history-log{height:calc(100% - 155px);border:1px solid #3e5760}.taskbar{height:40px;background:#bcc0c4;border-top:2px solid #e5e9ed;display:flex;align-items:center;gap:4px;z-index:50}.taskbar button{height:34px;border:2px outset #ddd;background:#c2c5c8;padding:0 16px;cursor:pointer}.taskbar .task.active{box-shadow:inset 1px 1px 3px #777;background:#aeb2b5}.start{font-weight:bold}.task-status{margin-left:auto;background:#080e12;color:#dfe7e4;height:32px;display:flex;gap:20px;align-items:center;padding:0 12px;font-size:11px;border:1px inset #999}.task-status span{color:var(--green)}.toast{position:fixed;right:20px;bottom:58px;z-index:2000;background:#071116;border:1px solid var(--green);color:#e9fff3;padding:14px 18px;min-width:290px;box-shadow:0 10px 40px #000;transform:translateY(140px);opacity:0;transition:.25s}.toast.show{transform:translateY(0);opacity:1}.maximized{left:0!important;top:0!important;width:100%!important;height:100%!important}.minimized{display:none}
@media(max-width:900px){.brand-strip{height:64px}.brand-mark{min-width:0}.brand-mark h1{font-size:24px}.mission{display:none}.desktop-area{overflow:hidden}.icons{grid-template-columns:76px;gap:8px}.desktop-icon{width:75px}.app-window{left:90px!important;top:12px!important;width:calc(100% - 100px)!important;height:calc(100% - 20px)!important;min-width:0;min-height:0}.app-shell{grid-template-columns:56px 1fr}.side-nav{padding:6px}.nav-btn{padding:11px 7px;text-align:center}.nav-btn span,.nav-stamp{display:none}.overview-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}.live-card{grid-column:1/span 2;min-height:260px}.feed-card{grid-column:1/span 2}.quick-feed{grid-template-columns:1fr}.quick-feed{height:auto}.content{overflow:auto}.cards{grid-template-columns:1fr}.brain-lab{grid-template-columns:1fr;height:auto}.history-kpis{grid-template-columns:1fr 1fr}.wall-copy,.poster{display:none}}

/* ============================================================
   v0.02 — TYPOGRAPHY, ART DIRECTION & BOOT SEQUENCE
   ============================================================ */

:root{
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --display:"Anton",Impact,sans-serif;
  --crt:"VT323","IBM Plex Mono",monospace;
  --ink:#05080d;
}

/* ---- type ---- */
html,body{font-family:var(--mono);font-size:14px;letter-spacing:.01em}
.brand-mark h1{font-family:var(--display);font-style:normal;transform:skewX(-7deg);font-size:34px;letter-spacing:1.5px;
  color:var(--pink);text-shadow:0 0 22px rgba(255,79,168,.55),2px 2px 0 #40081f}
.brand-mark span{letter-spacing:2.6px;font-weight:600}
.wall-copy{font-family:var(--display);letter-spacing:.5px}
.section-title h2,.obsession-card h2{font-family:var(--display);letter-spacing:1.2px;font-weight:400}
.obsession-card h2{font-size:27px;text-shadow:0 0 18px rgba(24,255,139,.4)}
.section-title h2{font-size:26px;text-shadow:0 0 16px rgba(24,255,139,.3)}
.history-kpis b{font-family:var(--display);font-weight:400;font-size:31px}
.brain-stats strong{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.5px}
.terminal{font-family:var(--crt);font-size:15px;line-height:1.45;letter-spacing:.4px}
.nav-btn,.taskbar button,.quick-feed button,.big-action{letter-spacing:.7px}
.poster,.room-sign{font-family:"Comic Sans MS","Chalkboard SE",cursive}

/* ---- grain / atmosphere ---- */
.grain{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* ---- svg cat swaps (replaces emoji) ---- */
.cat-mark{width:52px;height:52px;filter:drop-shadow(0 0 14px rgba(255,79,168,.45))}
.tin-icon .icon-cat{width:46px;height:46px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.85))}
.mini-cat{width:22px;height:22px;vertical-align:middle;flex:0 0 auto}
.taskbar button{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;font-weight:600}

@keyframes catBreathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
.cat-avatar{bottom:4px}
.laptop{margin:-26px auto 0;position:relative;z-index:2;font-family:var(--mono);font-weight:700;letter-spacing:1px;
  box-shadow:0 0 26px rgba(255,79,168,.28)}

/* ---- replay intro button ---- */
.replay-btn{margin:0 2px 4px;background:#0d1b21;border:1px dashed #3d6a5c;color:#7fe9b4;
  font-family:var(--mono);font-size:10px;padding:8px 4px;cursor:pointer;letter-spacing:.6px;transition:.18s}
.replay-btn:hover{background:#123026;border-color:var(--green);color:var(--green)}
@media(max-width:900px){.replay-btn{font-size:0;padding:9px 2px}.replay-btn:before{content:"↺";font-size:14px}}

/* ============================================================
   BOOT SEQUENCE
   ============================================================ */
.boot{position:absolute;inset:34px 0 0;z-index:40;background:
    radial-gradient(ellipse at 50% 38%,#0c2029 0%,#050d12 52%,#01060a 100%);
  display:flex;flex-direction:column;overflow:hidden;
  font-family:var(--mono);animation:crtOn .5s ease-out}
.boot.closing{animation:crtOff .45s ease-in forwards;pointer-events:none}
.boot.hidden{display:none}
@keyframes crtOn{0%{opacity:0;transform:scaleY(.004);filter:brightness(4)}
  42%{opacity:1;transform:scaleY(.02);filter:brightness(3)}
  70%{transform:scaleY(1.02);filter:brightness(1.5)}100%{transform:scaleY(1);filter:brightness(1)}}
@keyframes crtOff{0%{opacity:1;transform:scale(1);filter:brightness(1)}
  55%{opacity:1;transform:scaleY(.012) scaleX(1.03);filter:brightness(3.4)}
  100%{opacity:0;transform:scaleY(.002) scaleX(.4);filter:brightness(5)}}

.boot-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 34%,rgba(24,255,139,.10),transparent 46%),
    radial-gradient(circle at 82% 86%,rgba(255,79,168,.12),transparent 40%);
  box-shadow:inset 0 0 130px rgba(0,0,0,.92)}
.boot:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.32;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.5) 3px 4px)}

.boot-stage{position:absolute;inset:0;padding:34px 44px 74px;overflow:auto;z-index:2;
  display:none;flex-direction:column;justify-content:center}
.boot-stage.is-active{display:flex;animation:stageIn .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes stageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- stage 0: BIOS --- */
.bios{font-family:var(--crt);font-size:17px;line-height:1.5;color:#5dffae;margin:0;
  text-shadow:0 0 9px rgba(24,255,139,.65);white-space:pre-wrap;letter-spacing:.5px;
  align-self:flex-start;max-width:100%}
.bios b{color:#fff;font-weight:400}
.bios .ok{color:var(--green)}
.bios .off{color:#ff7a94}
.bios .cur{display:inline-block;width:9px;height:16px;background:#5dffae;vertical-align:-2px;
  animation:blink 1s steps(1) infinite;box-shadow:0 0 10px var(--green)}
@keyframes blink{50%{opacity:0}}

/* --- stage 1: TITLE --- */
.title-card{text-align:center;margin:auto;animation:none}
.title-cat{width:118px;height:118px;filter:drop-shadow(0 0 34px rgba(255,79,168,.6));
  animation:titleCat 4s ease-in-out infinite}
@keyframes titleCat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.kicker{margin:14px 0 2px;color:var(--green);font-size:11px;letter-spacing:5px;font-weight:600;opacity:.85}
.mega{font-family:var(--display);font-weight:400;margin:2px 0 6px;font-size:clamp(42px,7.2vw,78px);
  line-height:.9;letter-spacing:2px;color:#fff;transform:skewX(-6deg);position:relative;
  text-shadow:0 0 40px rgba(255,79,168,.6),3px 3px 0 #6d0c38;animation:megaGlitch 5s steps(1) infinite}
.mega em{font-style:normal;color:var(--green);text-shadow:0 0 34px rgba(24,255,139,.7),3px 3px 0 #073d23}
@keyframes megaGlitch{0%,92%,100%{transform:skewX(-6deg) translate(0)}
  93%{transform:skewX(-6deg) translate(-3px,1px)}95%{transform:skewX(-6deg) translate(3px,-1px)}
  97%{transform:skewX(-6deg) translate(-2px,0)}}
.tagline{margin:10px 0 0;color:#bfcfd2;font-size:12px;letter-spacing:3.4px;font-weight:500}
.title-rule{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:22px}
.title-rule i{height:1px;width:74px;background:linear-gradient(90deg,transparent,var(--green))}
.title-rule i:last-child{background:linear-gradient(90deg,var(--green),transparent)}
.title-rule span{color:var(--green);font-size:10px;letter-spacing:3px}

/* --- shared stage heading --- */
.boot-head{display:flex;align-items:center;gap:14px;margin:0 0 20px;flex:0 0 auto}
.boot-num{font-family:var(--display);font-weight:400;font-size:34px;color:var(--pink);line-height:1;
  text-shadow:0 0 20px rgba(255,79,168,.55)}
.boot-head h3{font-family:var(--display);font-weight:400;letter-spacing:2.6px;margin:0;font-size:23px;color:#fff}
.boot-head:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(24,255,139,.6),transparent)}

/* --- stage 2: LORE --- */
.lore{display:grid;gap:12px;max-width:790px}
.lore article{border-left:3px solid var(--pink);padding:12px 0 12px 17px;position:relative;
  background:linear-gradient(90deg,rgba(255,79,168,.09),transparent 62%);
  opacity:0;animation:slideIn .5s cubic-bezier(.2,.8,.2,1) forwards}
.lore article:nth-child(1){animation-delay:.1s}
.lore article:nth-child(2){animation-delay:.26s;border-color:var(--green);
  background:linear-gradient(90deg,rgba(24,255,139,.09),transparent 62%)}
.lore article:nth-child(3){animation-delay:.42s;border-color:var(--yellow);
  background:linear-gradient(90deg,rgba(255,200,87,.08),transparent 62%)}
@keyframes slideIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.lore b{display:block;font-size:13.5px;letter-spacing:1.2px;color:#fff;margin-bottom:5px}
.lore p{margin:0;color:#a8bcbd;font-size:12.5px;line-height:1.65;max-width:66ch}
.lore i{color:var(--green);font-style:italic}

/* --- stage 3: CAPABILITIES --- */
.cando{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:860px}
.cando article{border:1px solid #2c4751;background:linear-gradient(160deg,rgba(10,24,30,.95),rgba(5,13,17,.95));
  padding:15px 16px;position:relative;overflow:hidden;opacity:0;
  animation:popIn .44s cubic-bezier(.2,.9,.3,1.3) forwards;transition:border-color .2s,transform .2s}
.cando article:nth-child(1){animation-delay:.08s}
.cando article:nth-child(2){animation-delay:.18s}
.cando article:nth-child(3){animation-delay:.28s}
.cando article:nth-child(4){animation-delay:.38s}
.cando article:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--green);
  transform:scaleY(0);transform-origin:top;transition:transform .28s}
.cando article:hover{border-color:var(--green);transform:translateY(-2px)}
.cando article:hover:before{transform:scaleY(1)}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.cd-ico{font-size:25px;display:block;margin-bottom:7px;filter:drop-shadow(0 0 10px rgba(24,255,139,.35))}
.cando b{display:block;color:var(--green);font-size:12.5px;letter-spacing:1.6px;margin-bottom:5px}
.cando p{margin:0;color:#9fb2b4;font-size:11.5px;line-height:1.6}

/* --- stage 4: BOUNDARY --- */
.boundary{max-width:770px}
.boundary p{color:#b2c4c5;font-size:12.5px;line-height:1.68;margin:0 0 11px;max-width:74ch}
.boundary b{color:#fff}
.warn{color:var(--yellow)!important;font-size:14px!important;letter-spacing:1.4px}
.warn b{color:var(--yellow)}
.off-list{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:6px;max-width:430px}
.off-list li{display:flex;align-items:center;gap:10px;font-size:11px;color:#93a6a8;letter-spacing:.7px;
  border:1px solid #2a3f47;background:rgba(8,18,23,.7);padding:8px 11px}
.off-list i{color:var(--danger);font-style:normal;font-weight:700}
.off-list b{color:var(--danger);margin-left:auto;letter-spacing:1.2px}
.enter-btn{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:2.4px;
  background:linear-gradient(95deg,var(--pink),#ff7bc0);color:#2b0616;border:0;padding:16px 34px;
  cursor:pointer;display:inline-flex;align-items:center;gap:14px;position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,0 10px 34px rgba(255,79,168,.42);
  animation:enterPulse 2.6s ease-in-out infinite;transition:transform .16s}
.enter-btn i{font-style:normal;transition:transform .2s}
.enter-btn:hover{transform:translateY(-2px)}
.enter-btn:hover i{transform:translateX(6px)}
.enter-btn:active{transform:translateY(1px)}
.enter-btn:after{content:"";position:absolute;top:0;bottom:0;left:-120%;width:55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{0%,62%{left:-120%}92%,100%{left:150%}}
@keyframes enterPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,0 10px 34px rgba(255,79,168,.42)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 10px 52px rgba(255,79,168,.72)}}
.enter-hint{margin-top:12px!important;font-size:10.5px!important;color:#7d9092!important;letter-spacing:1.2px}
.enter-hint kbd{border:1px solid #4a6169;padding:1px 6px;background:#0b171c;color:var(--green);font-family:var(--mono)}

/* --- boot footer --- */
.boot-bar{position:absolute;left:0;right:0;bottom:0;height:52px;z-index:4;
  display:flex;align-items:center;justify-content:space-between;padding:0 18px;
  border-top:1px solid #223a42;background:linear-gradient(rgba(4,11,15,.4),rgba(4,11,15,.96))}
.boot-ghost{background:transparent;border:1px solid #37505a;color:#8fa4a6;font-family:var(--mono);
  font-size:10.5px;letter-spacing:1.5px;padding:9px 15px;cursor:pointer;transition:.18s}
.boot-ghost:hover{border-color:var(--green);color:var(--green);background:rgba(24,255,139,.07)}
.boot-ghost[disabled]{opacity:.28;cursor:default}
.boot-ghost[disabled]:hover{border-color:#37505a;color:#8fa4a6;background:transparent}
.boot-dots{display:flex;gap:9px}
.boot-dots b{width:8px;height:8px;border:1px solid #4b626b;background:transparent;cursor:pointer;
  transition:.22s;transform:rotate(45deg)}
.boot-dots b.on{background:var(--green);border-color:var(--green);box-shadow:0 0 12px var(--green)}
.boot-dots b.done{background:#2c5a47;border-color:#3f7d63}

@media(max-width:900px){
  .boot-stage{padding:20px 18px 66px}
  .cando{grid-template-columns:1fr;gap:9px}
  .cando p{font-size:11px}
  .bios{font-size:14px}
  .boot-head h3{font-size:18px}
  .enter-btn{font-size:17px;padding:14px 22px;width:100%;justify-content:center}
  .off-list{max-width:none}
  .boot-ghost{font-size:9.5px;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){
  .boot,.boot.closing,.boot-stage.is-active,.lore article,.cando article,.mega,.enter-btn,
  .enter-btn:after,.title-cat,.cat-avatar .big-cat{animation:none!important;opacity:1!important}
}

/* BIOS types from the top like a real POST screen, not from the middle */
.boot-stage[data-stage="0"]{justify-content:flex-start;padding-top:30px}
.off-list li b{font-size:10px}

/* ---- overview layout: stop the grid crushing into the feed bar on short windows ---- */
#overview{display:flex;flex-direction:column;height:100%;gap:8px}
#overview.tab-panel:not(.active){display:none}
.overview-grid{flex:1 1 auto;min-height:430px;height:auto;
  grid-template-rows:minmax(0,1fr) minmax(0,.8fr)}
.overview-grid>.panel{min-height:0;overflow:hidden}
.thoughts-card,.feed-card{display:flex;flex-direction:column}
.thoughts-card .terminal,.feed-card>div:last-child{flex:1 1 auto;min-height:0;overflow:auto}
.quick-feed{flex:0 0 auto;margin-top:0}
.brain-card canvas{width:62%}

/* toast sizing */
.toast{max-width:min(460px,calc(100vw - 40px));font-size:12px;line-height:1.5}

/* ---- cat scales with the panel so the tin hat never clips ---- */


.laptop{margin:-18px 0 0;width:clamp(140px,15vw,185px);height:clamp(52px,6.2vh,72px);font-size:clamp(10px,1vw,13px)}

/* ---- keep the process label clear of the stat column ---- */
.process{right:auto;width:62%;font-size:9.5px;letter-spacing:.6px;bottom:7px}
.brain-card canvas{height:calc(100% - 48px)}

/* ---- centre, but fall back to top when the stage overflows (mobile) ---- */
.boot-stage{justify-content:safe center}
.boot-stage[data-stage="0"]{justify-content:flex-start}

/* ---- mobile corrections (must follow the v0.02 type rules) ---- */
@media(max-width:900px){
  .brand-mark h1{font-size:21px;letter-spacing:.5px}
  .brand-mark span{font-size:9px;letter-spacing:1.4px}
  .cat-mark{width:34px;height:34px}
  .brand-strip{gap:10px;padding:6px 10px}
  .mega{font-size:clamp(29px,8.6vw,42px);line-height:1.02;letter-spacing:0;word-spacing:-2px}
  .mega em{display:inline}
  .kicker{letter-spacing:3px;font-size:9.5px}
  .tagline{letter-spacing:1.6px;font-size:10.5px}
  .title-cat{width:84px;height:84px}
  .title-rule i{width:40px}
  .boot-stage{padding-bottom:70px}
  .lore p,.boundary p{font-size:12px}
  .taskbar button{font-size:10px;padding:0 8px}
  .task-status{font-size:9px;gap:8px;padding:0 7px}
  .overview-grid{min-height:0}
}
@media(max-width:430px){
  .mission,.chain-pill span{display:none}
  .mega{font-size:clamp(26px,8.2vw,34px)}
}

@media(max-width:900px){
  .boot-stage{padding-bottom:96px}
  .boot-stage[data-stage="1"]{padding-bottom:70px}
  .enter-btn{font-size:15px;letter-spacing:1.4px;padding:13px 16px}
  .off-list li{padding:7px 9px;font-size:10px}
  .off-list b{font-size:9.5px}
  .titlebar strong{white-space:nowrap;font-size:12px}
  .titlebar .version{font-size:10px;margin-left:8px;white-space:nowrap}
  .boot-bar{height:48px;padding:0 10px}
}

/* ============================================================
   3D MASCOT CONTAINERS (SVG inside stays as the fallback)
   ============================================================ */
@media(max-width:900px){
  .cat3d-live{width:clamp(120px,22vh,170px);height:clamp(120px,22vh,170px)}
  .cat3d-title{width:100px;height:100px}
}

/* the foil hat is the identity feature - never let a wall sign cover it */
.cat-avatar{z-index:3}
.room-wall,.room-sign{z-index:1}
.cat-room .laptop{z-index:4}

/* ============================================================
   MASCOT — flat SVG mark, used at every size. No 3D, no WebGL.
   ============================================================ */
.cat3d{position:relative;display:block;line-height:0}
.cat3d>svg{width:100%;height:100%;display:block}

.cat3d-live{width:clamp(140px,23vh,215px);height:clamp(140px,23vh,215px)}
.cat-avatar{left:50%;transform:translateX(-50%);bottom:2px;width:auto;
  display:flex;flex-direction:column;align-items:center}
.cat3d-live>svg{filter:drop-shadow(0 0 26px rgba(255,79,168,.42));
  animation:catFloat 5.5s ease-in-out infinite}
.cat-room .laptop{margin:-14px 0 0}
.room-sign{right:6px;top:10px;font-size:11px;padding:6px 7px}
.room-wall{left:8px;top:14px;font-size:12px;padding:6px 7px}

.cat3d-title{width:clamp(118px,16vw,168px);height:clamp(118px,16vw,168px);margin:0 auto}
.cat3d-title>svg{filter:drop-shadow(0 0 32px rgba(255,79,168,.5));
  animation:catFloat 4.6s ease-in-out infinite}

@keyframes catFloat{0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-8px) rotate(2deg)}}
@media(max-width:900px){
  .cat3d-live{width:clamp(112px,18vh,150px);height:clamp(112px,18vh,150px)}
  .cat3d-title{width:104px;height:104px}
}
@media(prefers-reduced-motion:reduce){.cat3d>svg{animation:none}}

/* ============================================================
   PHONE LAYOUT (<=760px)
   The desktop metaphor does not survive a 390px viewport: the window
   overflowed the screen edge, the titlebar controls clipped, and the
   overview grid's absolutely-positioned panel internals collided.
   On a phone the app runs full-screen over the desktop, like a real one.
   ============================================================ */
@media(max-width:760px){
  /* boot overlay is inset by the titlebar height, which is 32px here not 34px */
  .boot{inset:32px 0 0}
  .boot-stage{padding:18px 16px 78px}
  .boot-stage[data-stage="1"]{padding-bottom:64px}
  .mega{font-size:clamp(30px,10vw,46px)}
  .title-cat{width:96px;height:96px}

  /* --- window fills the screen; desktop icons stay behind it --- */
  .app-window{left:0!important;top:0!important;
    width:100%!important;height:100%!important;border-width:0 0 1px 0;
    min-width:0;min-height:0}
  .app-window.maximized{left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none;max-height:none;z-index:60}.app-window.maximized .titlebar{cursor:default}body:has(.app-window.maximized) .brand-strip{display:none}
  .titlebar{height:32px;flex-basis:32px;padding-left:7px;cursor:default}
  .titlebar>div:first-child{min-width:0;flex:1;overflow:hidden}
  .titlebar strong{font-size:11.5px;white-space:nowrap}
  .titlebar .version{display:none}
  .mini-cat{width:18px;height:18px}
  .window-controls{flex:0 0 auto;padding-right:2px}
  .window-controls button{width:26px;height:22px;font-size:11px}

  /* --- sidebar: icon rail --- */
  .app-shell{grid-template-columns:44px 1fr}
  .side-nav{padding:5px 4px;gap:4px}
  .nav-btn{padding:9px 0;font-size:15px;line-height:1;text-align:center}
  .nav-btn span{display:none}
  .nav-stamp{display:none}
  .content{padding:6px}

  /* --- overview: one column, natural heights, nothing overlapping --- */
  #overview{height:auto;display:block}
  .overview-grid{display:flex;flex-direction:column;gap:7px;
    height:auto!important;min-height:0!important}
  .overview-grid>.panel{min-height:0;overflow:hidden;width:100%}
  .live-card{grid-column:auto;min-height:0}
  .cat-room{height:196px}
  .cat3d-live{width:126px;height:126px}
  .room-wall,.room-sign{font-size:9px;padding:4px 5px;top:6px}
  .room-wall{left:5px}.room-sign{right:5px}
  .cat-room .laptop{width:120px;height:42px;font-size:9px;margin-top:-10px}

  /* brain card internals were absolutely positioned and collided */
  .brain-card{padding-bottom:6px}
  .brain-card canvas{width:100%;height:118px}
  .brain-stats{position:static;display:grid;grid-template-columns:repeat(3,1fr);
    gap:4px;padding:6px 8px 0;text-align:center}
  .brain-stats strong{font-size:15px}
  .brain-stats span{font-size:8.5px}
  .process{position:static;width:auto;padding:4px 8px 0;font-size:8.5px}

  .panel-head{height:auto;min-height:26px;font-size:10.5px;padding:6px 8px}
  .panel-head time{font-size:10px}
  .terminal{font-size:13px;line-height:1.35}
  .thoughts-card .terminal{max-height:132px}
  .feed-card>div:last-child{max-height:190px}
  .feed-item{grid-template-columns:22px 1fr auto;padding:7px;gap:6px}
  .feed-item b{font-size:10px}
  .feed-item small{font-size:9px}
  .feed-icon{font-size:15px}
  .obsession-card{padding:10px}
  .obsession-card h2{font-size:19px}
  .topic-list{grid-template-columns:1fr 1fr}

  /* --- feed bar stacks --- */
  .quick-feed{display:grid;grid-template-columns:1fr;height:auto;gap:6px;margin-top:7px}
  .quick-feed input,.quick-feed select,.quick-feed button{padding:10px;font-size:13px}

  /* --- other tabs --- */
  .section-title{gap:8px;padding-bottom:9px;margin-bottom:10px}
  .section-title>span{font-size:26px}
  .section-title h2{font-size:18px}
  .section-title p{font-size:10.5px}
  .cards{grid-template-columns:1fr}
  .case-row{grid-template-columns:1fr;gap:6px}
  .case-row h3{font-size:14px}
  .brain-lab{grid-template-columns:1fr;height:auto}
  .giant-brain{min-height:220px}
  .giant-brain canvas{height:220px}
  .history-kpis{grid-template-columns:1fr 1fr}
  .history-log{height:auto;max-height:230px}
  .form-row{grid-template-columns:1fr}
  .lead-form textarea{height:110px}

  /* --- chrome --- */
  .brand-strip{height:56px;padding:5px 9px;gap:8px}
  .brand-mark h1{font-size:18px}
  .brand-mark span{font-size:8px;letter-spacing:1px}
  .cat-mark{width:30px;height:30px}
  .chain-pill{padding:4px 22px 4px 8px}
  .chain-pill strong{font-size:14px}
  .chain-pill i{width:7px;height:7px;right:9px;top:9px}
  .taskbar{height:36px}
  .taskbar button{height:30px;font-size:9.5px;padding:0 7px}
  .task-status{font-size:8.5px;gap:6px;padding:0 6px}
  .toast{right:8px;left:8px;bottom:44px;min-width:0;font-size:11px;padding:11px 13px}
  .wall-copy,.poster{display:none}
  .desktop-icon{width:66px;min-height:70px}
  .desktop-icon span{font-size:26px}
  .desktop-icon small{font-size:9.5px}
  .tin-icon .icon-cat{width:34px;height:34px}
  .icons{left:6px;top:10px;gap:8px 6px}
}

/* ============================================================
   MASCOT SIZING — authoritative. Every cat gets an explicit
   width AND height: WebKit will not derive one from the other
   via the viewBox, and collapses `width:auto` to zero.
   The float animation lives on the WRAPPER, never on the same
   element as the drop-shadow filter (that pairing is a known
   iOS compositing hazard).
   ============================================================ */
.cat3d{position:relative;display:block;line-height:0;
  animation:catFloat 5.5s ease-in-out infinite}
.cat3d>svg{display:block;width:100%!important;height:100%!important}
.cat3d-live{width:200px;height:200px}
.cat3d-title{width:150px;height:150px;margin:0 auto}
.cat3d-live>svg{filter:drop-shadow(0 0 24px rgba(255,79,168,.40));animation:none}
.cat3d-title>svg{filter:drop-shadow(0 0 30px rgba(255,79,168,.48));animation:none}
.cat-avatar{position:absolute;left:50%;transform:translateX(-50%);bottom:2px;
  display:flex;flex-direction:column;align-items:center;width:auto;text-align:center}
@media(max-width:1100px){.cat3d-live{width:168px;height:168px}}
@media(max-width:760px){
  .cat3d-live{width:122px;height:122px}
  .cat3d-title{width:104px;height:104px}
}
@media(prefers-reduced-motion:reduce){.cat3d{animation:none}}

/* ============================================================
   BRAIN CAM — real connectome readout
   ============================================================ */
.giant-brain{position:relative}
.fly-badge{position:absolute;right:10px;top:8px;font-size:10px;letter-spacing:1.4px;
  color:var(--green);background:rgba(3,12,16,.8);border:1px solid #2b4a52;padding:4px 8px}
.eyebrow .hint{font-style:normal;color:#7d9092;font-size:9px;letter-spacing:.6px;text-transform:none}
.odour{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 16px}
.odour i{font-style:normal;font-size:9.5px;letter-spacing:.5px;color:#ffd9ec;
  border:1px solid #6b3450;background:rgba(255,79,168,.12);padding:3px 6px}
.tingle{display:grid;gap:5px;margin:6px 0 14px}
.tg{display:grid;grid-template-columns:58px 1fr 40px;align-items:center;gap:7px;font-size:10px}
.tg b{color:#cfe0e2;font-weight:600}
.tg span{height:9px;background:#0d1b21;border:1px solid #2a4048;display:block}
.tg i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),#ff9ad2)}
.tg em{font-style:normal;color:var(--green);text-align:right;font-size:9.5px}
.fly-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px}
.fly-stats div{background:#0b171c;border:1px solid #2f4650;padding:7px 8px;display:grid}
.fly-stats b{color:var(--green);font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.5px}
.fly-stats span{font-size:8px;color:#9fb0b1;letter-spacing:.8px}
.stimulus-panel{overflow:auto}
.stimulus-panel h3{font-size:17px;margin:5px 0 14px;color:#fff}
@media(max-width:760px){
  .giant-brain canvas{height:200px}
  .fly-stats{grid-template-columns:1fr 1fr}
  .tg{grid-template-columns:52px 1fr 34px}
}
.off-list li b.on{color:var(--green)}
.off-list li:has(b.on){border-color:#2f6a4e}

/* case files = recorded runs */
.case-row.real{grid-template-columns:92px 1fr 132px;align-items:start}
.case-row.real h3{font-size:15px;margin-bottom:5px;color:#fff}
.case-row .c-odour,.case-row .c-read,.case-row .c-seed{margin:2px 0;font-size:10px;color:#93a6a8;line-height:1.5}
.case-row .c-odour b{color:#ffd9ec;font-weight:500}
.case-row .c-read b{color:var(--green);font-weight:600}
.case-row .c-seed{color:#6d8082;font-size:9px}
.case-row .c-seed code{color:#8fa4a6;background:#0a1418;border:1px solid #24363d;padding:1px 4px}
.case-status.st-strong{color:#18ff8b;border-color:#18ff8b}
.case-status.st-clear{color:#9ae66b;border-color:#5d8f47}
.case-status.st-weak{color:#ffc857;border-color:#7d6428}
.case-status.st-base{color:#7d9092;border-color:#3a4c52}
@media(max-width:760px){.case-row.real{grid-template-columns:1fr}}

/* case file: the readable part */
.case-row .c-cat{margin:7px 0 5px;font-size:11.5px;color:#ffd9ec;line-height:1.5;
  border-left:2px solid var(--pink);padding-left:8px}
.c-more{margin:4px 0 6px}
.c-more summary{cursor:pointer;font-size:10px;color:var(--green);letter-spacing:.5px;
  list-style:none;display:inline-block;border-bottom:1px dotted #2f6a4e;padding-bottom:1px}
.c-more summary::-webkit-details-marker{display:none}
.c-more summary:before{content:"▸ ";font-size:9px}
.c-more[open] summary:before{content:"▾ "}
.c-more p{margin:8px 0 0;font-size:10.5px;line-height:1.65;color:#a8bcbd;max-width:74ch}
.c-more .c-cmp b{color:var(--green)}
.c-more .c-warn{color:#7d9092;font-style:italic;border-top:1px solid #1e2f36;padding-top:7px}

/* ============================================================
   SIGNATURE MAP · SETTINGS · SHARE
   ============================================================ */
.map-panel{margin-bottom:12px}
.map-panel canvas{width:100%;height:auto;display:block;cursor:pointer}
.map-legend{display:flex;gap:18px;padding:6px 10px 9px;font-size:9.5px;color:#8fa4a6;letter-spacing:.6px}
.map-legend i{display:inline-block;vertical-align:middle;margin-right:5px}
.map-legend .lg-line{width:16px;height:2px;background:var(--green)}
.map-legend .lg-dot{width:8px;height:8px;border-radius:50%;background:var(--pink)}

.c-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.share-btn{background:#16232a;border:1px solid var(--green);color:var(--green);
  font-family:var(--mono);font-size:9.5px;letter-spacing:1.1px;padding:6px 10px;cursor:pointer;transition:.16s}
.share-btn:hover{background:var(--green);color:#08100d}
.c-learn{font-size:9.5px;color:#7fe9b4;letter-spacing:.4px;border:1px dashed #2f6a4e;padding:5px 8px}
.case-row.flash{outline:2px solid var(--green);outline-offset:2px;
  animation:caseFlash 1.6s ease-out}
@keyframes caseFlash{0%{background:rgba(24,255,139,.16)}100%{background:transparent}}

.settings{display:grid;gap:10px;max-width:820px}
.sw{display:grid;grid-template-columns:auto 1fr;gap:6px 11px;align-items:start;
  border:1px solid #2f4650;background:#0a161b;padding:12px 14px;cursor:pointer}
.sw input{width:16px;height:16px;accent-color:#18ff8b;margin-top:2px;grid-row:span 2}
.sw b{color:var(--green);font-size:11.5px;letter-spacing:1.2px}
.sw span{font-size:10.5px;color:#93a6a8;line-height:1.55}
.credits{border:1px solid #2f4650;background:#081318;padding:15px 16px;margin-top:6px}
.credits h3{margin:0 0 8px;font-family:var(--display);font-weight:400;letter-spacing:2px;
  font-size:15px;color:#fff}
.credits p{margin:0 0 9px;font-size:10.5px;color:#a8bcbd;line-height:1.6}
.credits ul{margin:0 0 10px;padding-left:16px;display:grid;gap:6px}
.credits li{font-size:10.5px;color:#a8bcbd;line-height:1.6}
.credits li b{color:var(--green)}
.credits code{background:#0a1418;border:1px solid #24363d;padding:1px 4px;color:#8fa4a6;font-size:9.5px}
.credits .c-warn{border-top:1px solid #1e2f36;padding-top:9px;color:#7d9092;font-style:italic;margin-bottom:0}
body.no-motion *{animation:none!important}
@media(max-width:760px){
  .map-legend{flex-direction:column;gap:3px}
  .sw{grid-template-columns:auto 1fr}
}

/* live odour preview in the lead form */
.odour-preview{max-width:760px;margin:0 auto 18px;border:1px solid #3d6a5c;
  background:linear-gradient(160deg,rgba(10,26,22,.9),rgba(6,16,20,.9));padding:13px 15px}
.odour-preview .odour{margin:7px 0 9px}
.op-note{margin:0;font-size:10px;color:#93a6a8;line-height:1.6}
.op-note b{color:var(--green);font-family:var(--mono)}
.op-note i{color:var(--green);font-style:italic}

/* interactive training */
.teach{border:1px solid #2f4650;background:#0a161b;padding:10px 11px;margin:6px 0 15px}
.teach canvas{width:100%;height:auto;display:block;margin-bottom:7px}
.teach-row{display:flex;align-items:center;gap:9px}
.teach-row input[type=range]{flex:1;accent-color:#18ff8b;height:16px}
.teach-row b{font-size:9.5px;color:var(--green);letter-spacing:.8px;white-space:nowrap;min-width:48px}
.teach-read{margin:7px 0 0;font-size:10px;color:#a8bcbd;line-height:1.55}
.teach-read b{color:var(--green);font-size:13px}
.teach-read em{font-style:normal;color:#ff8ac7}
.teachability{display:inline-block;font-size:8.5px;letter-spacing:1px;padding:2px 6px;
  border:1px solid currentColor;margin-right:7px;vertical-align:2px}
.teachability.ok{color:#18ff8b}.teachability.mid{color:#ffc857}.teachability.no{color:#ff7a94}
.teach-why{display:block;margin-top:6px;font-size:9.5px;color:#7d9092;line-height:1.55;font-style:italic}
.c-kcd{font-size:9.5px;letter-spacing:.4px;padding:5px 8px;border:1px dashed currentColor}
.c-kcd.ok{color:#7fe9b4}.c-kcd.mid{color:#ffc857}.c-kcd.no{color:#ff7a94}
.fly-legend{position:absolute;left:10px;bottom:9px;display:flex;flex-wrap:wrap;gap:4px 13px;
  font-size:9px;letter-spacing:.5px;color:#cfe0e2;background:rgba(3,12,16,.72);
  border:1px solid #223a42;padding:6px 9px;max-width:calc(100% - 20px)}
.fly-legend span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.fly-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.fly-legend em{font-style:normal;color:#7d9092}
@media(max-width:760px){.fly-legend{font-size:8px;gap:3px 8px;padding:5px 7px}.fly-legend em{display:none}}
.share-btn{text-decoration:none;display:inline-block}
.x-btn{border-color:#cfe0e2;color:#cfe0e2}
.x-btn:hover{background:#cfe0e2;color:#08100d}
.link-btn{border-color:#6b8790;color:#9fb4b6}
.link-btn:hover{background:#6b8790;color:#08100d}

/* ============================================================
   FEED CEREMONY
   ============================================================ */
.feed-result.running,.feed-result.accepted,.feed-result.gate{
  border:1px solid var(--green);background:linear-gradient(160deg,rgba(6,26,18,.95),rgba(5,13,17,.95));
  padding:18px;max-width:760px;margin:0 auto 22px}
.feed-result.gate{border-color:var(--pink);
  background:linear-gradient(160deg,rgba(36,6,22,.95),rgba(13,5,10,.95))}
.can{display:grid;place-items:center;margin-bottom:12px}
.can-body{font-size:44px;animation:canDrop .75s cubic-bezier(.3,1.5,.5,1)}
@keyframes canDrop{0%{transform:translateY(-70px) rotate(-18deg);opacity:0}
  60%{transform:translateY(6px) rotate(4deg);opacity:1}100%{transform:none}}
.feed-log{font-family:var(--crt);font-size:14px;color:var(--green);line-height:1.5;
  max-height:150px;overflow:auto;text-shadow:0 0 8px rgba(24,255,139,.5)}
.feed-log b{color:#fff;font-weight:400}
.stim-hit{font-family:var(--display);font-weight:400;letter-spacing:3px;font-size:15px;
  color:var(--pink);margin-bottom:6px;animation:hitPulse 1.1s ease-out}
@keyframes hitPulse{0%{opacity:0;transform:scale(.9);text-shadow:0 0 30px var(--pink)}100%{opacity:1;transform:none}}
.feed-result h3{font-family:var(--display);font-weight:400;letter-spacing:2px;
  font-size:23px;color:#fff;margin:2px 0 6px}
.fr-topic{color:#ffd9ec;font-size:13px;margin:0 0 13px;border-left:2px solid var(--pink);padding-left:9px}
.fr-note{font-size:10.5px;color:#a8bcbd;line-height:1.65;margin:9px 0 0}
.fr-note code{background:#0a1418;border:1px solid #24363d;padding:1px 5px;color:#8fa4a6;font-size:9.5px}
.fr-warn{font-size:10px;color:#7d9092;font-style:italic;line-height:1.6;
  border-top:1px solid #1e2f36;padding-top:9px;margin-top:11px}
.thc-amt{font-family:var(--display);font-weight:400;font-size:44px;color:var(--pink);
  letter-spacing:1px;line-height:1;margin:4px 0 10px;text-shadow:0 0 26px rgba(255,79,168,.5)}
.thc-amt span{font-size:18px;color:#ffd9ec;letter-spacing:3px}
.feed-result.gate .big-action{width:100%;margin-top:6px;font-size:16px;letter-spacing:2px}
@media(max-width:760px){.thc-amt{font-size:32px}.feed-result h3{font-size:18px}}
.cat-note{font-size:10px;color:#8fa4a6;line-height:1.6;margin:-4px 0 6px;font-style:italic}
.cat-note i{color:var(--green);font-style:normal}
.tiers{display:grid;gap:7px;margin:6px 0 14px}
.tier{display:grid;grid-template-columns:auto 1fr auto;gap:4px 11px;align-items:center;
  border:1px solid #2f4650;background:#0a161b;padding:11px 13px;cursor:pointer;transition:.16s}
.tier:hover{border-color:#4d7a86}
.tier:has(input:checked){border-color:var(--green);background:#0c2019}
.tier input{accent-color:#18ff8b;width:15px;height:15px;grid-row:span 2}
.tier b{color:var(--green);font-size:11px;letter-spacing:1.1px}
.tier span{grid-column:2;font-size:10px;color:#93a6a8;line-height:1.5}
.tier em{grid-row:span 2;font-style:normal;text-align:right;color:#fff;
  font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.5px}
.tier em i{display:block;font-style:normal;font-family:var(--mono);font-size:9px;
  color:#ff8ac7;letter-spacing:.3px;margin-top:2px}
.fr-cat{font-size:9px;letter-spacing:1px;border:1px solid #6b3450;color:#ffd9ec;padding:2px 6px;margin-left:6px}
.fr-tier{font-size:9.5px;letter-spacing:1.4px;color:var(--green);margin:-8px 0 12px}
@media(max-width:760px){.tier{grid-template-columns:auto 1fr}.tier em{grid-column:2;grid-row:auto;text-align:left;font-size:15px}}

/* ---- Brain Cam: circuit vs whole-brain view -------------------------------
   Two different runs, and the UI has to keep them apart. The circuit is the
   instrument; the whole brain is the view. Nothing measured comes from it. */
.brain-view{position:absolute;left:10px;top:8px;z-index:3;display:flex;gap:4px;align-items:stretch}
.brain-view .bv{font:inherit;font-size:9.5px;letter-spacing:1.1px;cursor:pointer;
  background:rgba(3,12,16,.82);border:1px solid #2b4a52;color:#8fa6a8;padding:4px 8px;
  display:flex;gap:6px;align-items:baseline;transition:.15s}
.brain-view .bv em{font-style:normal;font-size:8.5px;color:#5d7379;letter-spacing:.4px}
.fly-badge{max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-badge i{font-style:normal;font-variant-numeric:tabular-nums;display:inline-block;min-width:4ch;text-align:right}
.brain-view .bv:hover{color:#cfe0e2;border-color:#3d6a75}
.brain-view .bv.is-on{color:var(--green);border-color:var(--green);background:rgba(6,32,21,.9)}
.brain-view .bv.is-on em{color:#4f9c78}
.brain-view .bv-mode{font:inherit;font-size:9px;letter-spacing:1px;cursor:pointer;
  background:rgba(3,12,16,.82);border:1px dashed #4a6b57;color:#7fe9b4;padding:4px 8px}
.brain-view .bv-mode:hover{border-style:solid}
.fly-note{position:absolute;right:10px;bottom:9px;margin:0;max-width:44%;text-align:right;
  font-size:9px;line-height:1.5;letter-spacing:.3px;color:#8b9fa1;
  background:rgba(3,12,16,.72);border:1px solid #223a42;padding:6px 9px}
.fly-note b{color:#ffc857}
.fly-loading{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  color:var(--green);font-size:11px;letter-spacing:2px;background:rgba(3,9,13,.72)}
.fly-note[hidden]{display:none}
@media(max-width:760px){
  .brain-view{left:8px;top:6px;gap:3px}
  .brain-view .bv{font-size:8px;padding:3px 6px;letter-spacing:.6px}
  .brain-view .bv em{display:none}
  .brain-view .bv-mode{font-size:8px;padding:3px 6px;letter-spacing:.5px}
  .fly-legend{bottom:6px}
}

/* boot bar now carries BACK · dots · SKIP · NEXT, so the dots centre themselves
   in whatever room is left instead of relying on space-between */
.boot-bar{justify-content:flex-start;gap:8px}
.boot-bar .boot-dots{margin:0 auto}
.boot-ghost.boot-next{border-color:#2f6b52;color:#7fe9b4}
.boot-ghost.boot-next:hover{border-color:var(--green);color:var(--green);background:rgba(24,255,139,.1)}
.boot-ghost[hidden]{display:none}
@media(max-width:560px){
  .boot-bar{gap:5px;padding:0 8px}
  .boot-ghost{font-size:8.5px;padding:7px 8px;letter-spacing:.8px}
  .boot-bar .boot-dots{gap:6px}
}

/* orbit controls for the Brain Cam. pan-y keeps a vertical page swipe working
   on a phone while a horizontal drag spins the brain. */
#flyCanvas{touch-action:pan-y;cursor:grab}
#flyCanvas:active{cursor:grabbing}
.cam-ctl{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:3;
  display:flex;flex-direction:column;gap:4px}
.cam-ctl button{font:inherit;font-size:13px;line-height:1;width:26px;height:26px;cursor:pointer;
  background:rgba(3,12,16,.82);border:1px solid #2b4a52;color:#8fa6a8;padding:0;transition:.15s}
.cam-ctl button:hover{color:var(--green);border-color:var(--green);background:rgba(6,32,21,.9)}
.cam-ctl button.is-live{color:var(--green);border-color:var(--green)}
@media(max-width:760px){.cam-ctl button{width:30px;height:30px;font-size:14px}}
/* on a phone the view toggle and the badge fight for the same strip, so the
   badge drops under it instead of being clipped mid-word */
@media(max-width:760px){
  .fly-badge{top:auto;bottom:8px;right:8px;max-width:60%;font-size:8.5px;padding:3px 6px}
  .cam-ctl{top:auto;bottom:34px;transform:none;flex-direction:row}
}
/* narrow panel: badge and camera controls drop clear of the view toggle */
.giant-brain.is-narrow .fly-badge{top:auto;bottom:8px;right:8px;max-width:60%;font-size:8.5px;padding:3px 6px}
.giant-brain.is-narrow .cam-ctl{top:auto;bottom:34px;transform:none;flex-direction:row}

/* ---- paid submission flow: screening, review queue, payment ---------------- */
.stim-hit.bad{background:#3a1420;border-color:#ff4f6d;color:#ff9db0}
.stim-hit.ok{background:#062015;border-color:var(--green);color:var(--green)}
.feed-result.blocked{border:1px solid #7a2a3c;background:#160a0f;padding:15px}
.feed-result.queued{border:1px solid #6b5a2a;background:#151107;padding:15px}
.fr-reasons{margin:8px 0 10px;padding-left:18px;color:#ffb3c1;font-size:11px;line-height:1.7}
.fr-note.dim{color:#7d9092}
.fr-cat{margin-top:10px;padding:9px 11px;border-left:3px solid var(--pink);
  background:#1a0d15;color:#ffd9ec;font-size:11.5px;line-height:1.6}
#payArea{margin:12px 0 6px}
#payLog{max-height:190px;overflow:auto;font-size:10.5px;line-height:1.75;color:#9fd9bd;
  background:#050d10;border:1px solid #1e3a34;padding:9px 11px;margin-bottom:10px}
#payLog div{word-break:break-word}
#payLog div.bad{color:#ff9db0}
#payLog code{color:#ffc857}
.feed-result a{color:var(--green)}
.claim-check[hidden]{display:none}
.claim-box{margin:22px auto 0;max-width:760px;border-top:1px solid #23373f;padding-top:16px}.claim-box h4{color:var(--green);font-size:12px;margin:0 0 4px}.claim-box p{color:#8ea0a4;font-size:11px;margin:0 0 10px;line-height:1.6}.mine-list{display:grid;gap:6px;margin:0 0 12px}.mine-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;background:#0b171d;border:1px solid #2b4753;padding:9px 11px;cursor:pointer;text-align:left;color:#dce7e3;font:inherit;font-size:11px}.mine-row:hover{border-color:var(--green)}.mine-row b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mine-row .ms{font-size:10px;letter-spacing:.6px;padding:3px 7px;border:1px solid currentColor}.ms.pay{color:var(--pink)}.ms.done{color:var(--green)}.ms.wait{color:#c8b25e}.ms.no{color:#8a949a}.mine-row .mgo{color:var(--green);font-size:14px}.mine-empty{color:#8ea0a4;font-size:11px;padding:8px 0}.claim-adv{margin-top:6px}.claim-adv summary{color:#7e9196;font-size:11px;cursor:pointer;margin-bottom:8px}.claim-check{display:flex;gap:8px;max-width:760px}
.claim-check input{flex:1;text-transform:uppercase}
.claim-check button{white-space:nowrap;background:#132a22;border:1px solid #2f6b52;color:#7fe9b4;
  padding:0 14px;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px}
.claim-check button:hover{border-color:var(--green);color:var(--green)}
.wallet-chip{font-size:9.5px;letter-spacing:.8px;color:#7fe9b4;border:1px solid #2f6b52;
  padding:4px 8px;background:#0a1a14}

/* signature map: pan / spin / zoom */
.map-panel{position:relative}
#simMap{touch-action:pan-y;cursor:grab}
#simMap:active{cursor:grabbing}
.cam-ctl.map-ctl{right:10px;top:42px;transform:none;flex-direction:column}
.map-hint{position:absolute;left:12px;top:44px;margin:0;font-size:8.5px;letter-spacing:.5px;
  color:#6f8285;background:rgba(3,12,16,.6);border:1px solid #1b3037;padding:4px 7px}
@media(max-width:760px){
  .cam-ctl.map-ctl{flex-direction:row;top:auto;bottom:8px;right:8px}
  .map-hint{display:none}
}

/* case file search + sort */
.case-search{display:flex;gap:8px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.case-search input{flex:1;min-width:220px}
.case-sort{display:flex;gap:4px}
.cs-btn{font:inherit;font-size:9.5px;letter-spacing:1px;cursor:pointer;padding:7px 10px;
  background:#0a151b;border:1px solid #2b4a52;color:#8fa6a8;transition:.15s}
.cs-btn:hover{color:#cfe0e2;border-color:#3d6a75}
.cs-btn.is-on{color:var(--green);border-color:var(--green);background:#062015}
.case-count{font-size:9.5px;letter-spacing:.8px;color:#7d9092;white-space:nowrap}
.case-empty{text-align:center;color:#7d9092;font-size:11px;padding:26px 10px;border:1px dashed #2b4a52}
.case-row mark{background:rgba(255,200,87,.28);color:#ffe6a8;padding:0 1px}
@media(max-width:760px){.case-search input{min-width:100%}.case-sort{flex:1}}

/* image → odour, and the wallet chip */
.img-drop{position:relative;border:1px dashed #3a5560;background:#0a151b;padding:14px;text-align:center;transition:.15s}
.img-drop.is-over{border-color:var(--green);background:#08201a}
.img-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.img-drop label{font-size:10px;letter-spacing:1.2px;color:#8fa6a8;cursor:pointer}
.img-drop.has-file label{color:var(--green)}
.img-info{margin-top:9px;font-size:10px;line-height:1.7;color:#9fd9bd;text-align:left}
.img-info code{color:#ffc857;word-break:break-all}
.img-info .img-clear{margin-top:6px;background:#241016;border:1px solid #7a2a3c;color:#ff9db0;
  font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:4px 8px;cursor:pointer}
.img-note b{color:#ffc857}
.wallet-box{margin-left:auto;text-align:right}
.wallet-btn{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;cursor:pointer;
  background:#0a1a14;border:1px solid #2f6b52;color:#7fe9b4;padding:7px 11px;transition:.15s}
.wallet-btn:hover{border-color:var(--green);color:var(--green)}
.wallet-btn[disabled]{opacity:.45;cursor:default}
.wallet-info{font-size:9.5px;line-height:1.7;color:#8fa6a8;margin-top:6px;text-align:right}
.wallet-info b{color:var(--green)}
.wallet-info .w-warn{color:#ffc857}
@media(max-width:760px){.wallet-box{margin:8px 0 0;text-align:left}.wallet-info{text-align:left}}

/* ---- cat moods ------------------------------------------------------------
   Set on :root, inherited into every <use> shadow tree, so all five cats on the
   page change expression together. Each mood is derived from the run, never
   chosen at random — see tbSetMood() in app.js. */
:root{--tc-ear:0;--tc-pupil-rx:3.6;--tc-pupil-ry:9.5;--tc-lid:0;--tc-brow:0;
  --tc-smile:1;--tc-flat:0;--tc-oh:0;--tc-whisk:0}
:root[data-mood="alert"]   {--tc-ear:-6;--tc-pupil-rx:8.5;--tc-pupil-ry:11.5;--tc-brow:1;--tc-whisk:-4}
:root[data-mood="smug"]    {--tc-lid:.55;--tc-pupil-rx:3;--tc-pupil-ry:7;--tc-whisk:3}
:root[data-mood="bored"]   {--tc-ear:9;--tc-lid:.72;--tc-pupil-rx:2.6;--tc-pupil-ry:6;--tc-smile:0;--tc-flat:1;--tc-whisk:6}
:root[data-mood="spooked"] {--tc-ear:-9;--tc-pupil-rx:9.5;--tc-pupil-ry:12;--tc-smile:0;--tc-oh:1;--tc-whisk:-7}
:root[data-mood="squint"]  {--tc-lid:.5;--tc-pupil-rx:3;--tc-pupil-ry:8;--tc-brow:.7;--tc-smile:0;--tc-flat:1}
@media(prefers-reduced-motion: reduce){
  .tc-ear-l,.tc-ear-r,.tc-pupil,.tc-lid,.tc-brow,.tc-whisk,
  .tc-m-smile,.tc-m-flat,.tc-m-oh{transition:none!important}
}
.mood-chip{display:inline-flex;align-items:center;gap:6px;font-size:9px;letter-spacing:1.2px;
  color:#ffd9ec;background:#1a0d15;border:1px solid #79174a;padding:4px 8px;margin-top:8px}
.mood-chip i{font-style:normal}

/* ---- lore documents ------------------------------------------------------- */
.doc-window{position:absolute;left:8%;top:7%;width:min(720px,84vw);max-height:82vh;z-index:60;
  background:#070f14;border:2px solid #2b4a52;box-shadow:0 24px 70px rgba(0,0,0,.75);
  display:flex;flex-direction:column}
.doc-window[hidden]{display:none}
.doc-window .titlebar{background:linear-gradient(#1d3f4a,#122a32);border-bottom:1px solid #2b4a52}
.doc-ico{font-size:15px;margin-right:7px}
.doc-body{overflow:auto;padding:18px 20px 22px}
.doc-body h3{color:var(--green);margin:0 0 4px;font-size:14px;letter-spacing:1px}
.doc-body .stamp{display:inline-block;border:2px solid #ff4f6d;color:#ff8fa3;font-size:10px;
  letter-spacing:2px;padding:4px 9px;transform:rotate(-3deg);margin:4px 0 12px}
.doc-body p{font-size:11.5px;line-height:1.75;color:#bccbcc}
.doc-body .redact{background:#0c1418;color:transparent;user-select:none;border-radius:1px;
  padding:0 2px;box-shadow:inset 0 0 0 1px #16242a}
.doc-body .kv{display:grid;grid-template-columns:150px 1fr;gap:4px 12px;font-size:10.5px;
  margin:12px 0;color:#9fb3b5}
.doc-body .kv b{color:#dfeceb;font-weight:normal}
.doc-body .bp{width:100%;height:auto;background:#04141c;border:1px solid #1d4652;margin:10px 0}
.doc-body .foot{font-size:10px;color:#7d9092;border-top:1px solid #1e3239;padding-top:10px;margin-top:14px}
.doc-body .foot b{color:#ffc857}
@media(max-width:760px){.doc-window{left:3%;top:5%;width:94vw;max-height:88vh}
  .doc-body .kv{grid-template-columns:1fr}}

/* ---- THE PROCEDURE REEL ---------------------------------------------------
   One 27s timeline. Each scene owns a window of it, so there is a single
   source of truth for timing and the whole thing loops cleanly. */
.reel{--dur:27s;position:relative}
.reel-gate{position:relative;background:#04090c;border:1px solid #1d3239;overflow:hidden;
  padding:0 26px}
.reel-svg{display:block;width:100%;height:auto;font-family:var(--mono)}
.reel-svg text{text-anchor:middle;fill:#cfe0e2}
.reel-svg .rs-num{text-anchor:start;font-size:9px;letter-spacing:2px;fill:#5d7379}
.reel-svg .rs-title{text-anchor:start;font-size:17px;letter-spacing:3px;fill:#18ff8b}
.reel-svg .rs-lab{font-size:9px;letter-spacing:1.1px;fill:#8fa6a8}
.reel-svg .rs-lab2{font-size:8.5px;letter-spacing:1px;fill:#8fa6a8}
.reel-svg .rs-foot{font-size:8px;letter-spacing:2px;fill:#4a6b7a}
.reel-svg .rs-end{font-size:19px;letter-spacing:3px;fill:#18ff8b}
.reel-svg .rs-end.lo{fill:#ff4fa8}
.reel-svg .bx{font-size:10px;letter-spacing:1.4px}
.reel-svg .bx.sm{font-size:8px;letter-spacing:.6px;fill:#7d9092}

/* film stock: grain, gate weave, sprockets */
.reel-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay}
.reel.run .reel-gate{animation:gateWeave 1.1s steps(3) infinite}
@keyframes gateWeave{0%{transform:translate(0,0)}33%{transform:translate(.6px,-.7px)}
  66%{transform:translate(-.5px,.5px)}100%{transform:translate(0,0)}}
.reel-sprocket{position:absolute;top:0;bottom:0;width:16px;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,transparent 0 9px,#0d1a20 9px 21px,transparent 21px 30px);
  border-left:1px solid #12242b;border-right:1px solid #12242b}
.reel-sprocket.left{left:0}.reel-sprocket.right{right:0}
.reel.run .reel-sprocket{animation:sprock .5s linear infinite}
@keyframes sprock{to{background-position-y:30px}}

/* every scene hidden until its window; .run starts the clock */
.reel-svg .rs{opacity:0}
.reel.run .rs{animation-duration:var(--dur);animation-timing-function:linear;
  animation-iteration-count:infinite;animation-fill-mode:both}
.reel.run .rs1{animation-name:sc1}.reel.run .rs2{animation-name:sc2}
.reel.run .rs3{animation-name:sc3}.reel.run .rs4{animation-name:sc4}
.reel.run .rs5{animation-name:sc5}.reel.run .rs6{animation-name:sc6}
.reel.run .rs7{animation-name:sc7}
@keyframes sc1{0%{opacity:1}10%{opacity:1}11.5%{opacity:0}100%{opacity:0}}
@keyframes sc2{0%,11%{opacity:0}12.5%{opacity:1}25%{opacity:1}26.5%{opacity:0}100%{opacity:0}}
@keyframes sc3{0%,26%{opacity:0}27.5%{opacity:1}40%{opacity:1}41.5%{opacity:0}100%{opacity:0}}
@keyframes sc4{0%,41%{opacity:0}42.5%{opacity:1}55%{opacity:1}56.5%{opacity:0}100%{opacity:0}}
@keyframes sc5{0%,56%{opacity:0}57.5%{opacity:1}69%{opacity:1}70.5%{opacity:0}100%{opacity:0}}
@keyframes sc6{0%,70%{opacity:0}71.5%{opacity:1}84%{opacity:1}85.5%{opacity:0}100%{opacity:0}}
@keyframes sc7{0%,85%{opacity:0}86.5%{opacity:1}99%{opacity:1}100%{opacity:0}}

/* per-scene motion */
.reel.run .ct{font-size:56px;fill:#cfe0e2;opacity:0;animation:ctIn 3s linear infinite}
.reel.run .ct3{animation-delay:0s}.reel.run .ct2{animation-delay:1s}.reel.run .ct1{animation-delay:2s}
@keyframes ctIn{0%{opacity:0}4%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}
.reel.run .wg{animation:wing .09s ease-in-out infinite alternate;transform-origin:0 -26px}
@keyframes wing{to{transform:rotate(var(--w,0deg)) scaleY(.35)}}
.reel.run .wgl{--w:-22deg}.reel.run .wgr{--w:22deg}
.reel.run .cl{opacity:0;animation:clIn var(--dur) linear infinite;animation-delay:var(--d)}
@keyframes clIn{0%,26%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1)}
  40%{opacity:1}41.5%{opacity:0}100%{opacity:0}}
.reel.run .seat{animation:seatIn var(--dur) ease-in-out infinite}
@keyframes seatIn{0%,42%{transform:translateY(46px) scale(1.25);opacity:0}
  48%{opacity:1}54%{transform:translateY(0) scale(.62);opacity:1}
  56.5%{transform:translateY(0) scale(.62);opacity:0}100%{opacity:0}}
.reel.run .cl2{opacity:.9}
.reel.run .skull{animation:skullIn var(--dur) linear infinite}
@keyframes skullIn{0%,42%{opacity:0}46%{opacity:1}56%{opacity:1}56.5%{opacity:0}100%{opacity:0}}
.reel.run .pulse{opacity:0;animation:pz var(--dur) linear infinite}
.reel.run .p1{animation-name:pz1}.reel.run .p2{animation-name:pz2}
.reel.run .p3{animation-name:pz3}.reel.run .p4{animation-name:pz4}
@keyframes pz1{0%,58%{opacity:0;transform:translateX(0)}59%{opacity:1}62%{opacity:1;transform:translateX(86px)}63%{opacity:0}100%{opacity:0}}
@keyframes pz2{0%,62%{opacity:0;transform:translateX(126px)}63%{opacity:1}66%{opacity:1;transform:translateX(212px)}67%{opacity:0}100%{opacity:0}}
@keyframes pz3{0%,66%{opacity:0;transform:translateX(252px)}67%{opacity:1}69%{opacity:1;transform:translateX(338px)}70%{opacity:0}100%{opacity:0}}
@keyframes pz4{0%,69%{opacity:0;transform:translateX(378px)}70%{opacity:1}70.4%{opacity:1;transform:translateX(421px)}70.8%{opacity:0}100%{opacity:0}}
.reel.run .bar{transform-origin:center bottom;animation:barDrop var(--dur) ease-out infinite}
.reel.run .b0{--h:1}.reel.run .b1{--h:.84}.reel.run .b2{--h:.66}
.reel.run .b3{--h:.5}.reel.run .b4{--h:.4}.reel.run .b5{--h:.34}
@keyframes barDrop{0%,72%{transform:scaleY(1)}84%{transform:scaleY(var(--h,1))}
  85.5%{transform:scaleY(var(--h,1))}100%{transform:scaleY(1)}}
.reel.run .dan{opacity:0;animation:danPulse var(--dur) linear infinite}
@keyframes danPulse{0%,72%{opacity:0;transform:scale(.6)}74%{opacity:1;transform:scale(1.5)}
  76%{opacity:.7;transform:scale(1)}84%{opacity:.7}85.5%{opacity:0}100%{opacity:0}}

.reel-bar{display:flex;align-items:center;gap:12px;margin-top:9px;font-size:9.5px;letter-spacing:1.2px}
.reel-bar button{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;cursor:pointer;
  background:#0a1a14;border:1px solid #2f6b52;color:#7fe9b4;padding:6px 11px}
.reel-bar button:hover{border-color:var(--green);color:var(--green)}
.reel-time{color:#ffc857}
.reel-meta{margin-left:auto;color:#5d7379}
@media(prefers-reduced-motion: reduce){
  .reel.run .reel-gate,.reel.run .reel-sprocket,.reel.run .wg{animation:none!important}
}

/* ---- start menu ---- */
.start-menu{position:absolute;left:6px;bottom:44px;z-index:80;display:flex;
  background:#c2c5c8;border:2px outset #e5e9ed;box-shadow:4px 4px 0 rgba(0,0,0,.45);
  width:min(330px,82vw)}
.start-menu[hidden]{display:none}
.sm-rail{width:30px;background:linear-gradient(#123a4a,#0a1f29);flex:0 0 30px;position:relative}
/* rotate() spins about the span's own centre, so a long label overflows the rail
   and gets clipped. A vertical writing-mode lays the text out inside its box. */
.sm-rail span{position:absolute;bottom:9px;left:0;right:0;text-align:center;
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:#7fe9b4;font-weight:bold}
.sm-items{flex:1;padding:4px;min-width:0}
.sm-items button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:transparent;border:0;padding:7px 8px;cursor:pointer;font-family:var(--mono);color:#111}
.sm-items button:hover{background:#123a4a;color:#fff}
.sm-items button i{font-style:normal;font-size:14px;width:18px;flex:0 0 18px;text-align:center}
.sm-items button b{font-size:11px;font-weight:normal}
.sm-items button em{font-style:normal;font-size:9px;color:#4a5a5e;margin-left:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44%}
.sm-items button:hover em{color:#9fd9bd}
.sm-items hr{border:0;border-top:1px solid #9aa0a4;border-bottom:1px solid #e9edf0;margin:4px 2px}
@media(max-width:560px){.sm-items button em{display:none}}
/* the merch icon is a real outbound link, so it needs the button's look */
a.desktop-icon{text-decoration:none}
.sm-items a[role=menuitem]{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:7px 8px;cursor:pointer;font-family:var(--mono);color:#111;text-decoration:none}
.sm-items a[role=menuitem]:hover{background:#123a4a;color:#fff}
.sm-items a[role=menuitem] i{font-style:normal;font-size:14px;width:18px;flex:0 0 18px;text-align:center}
.sm-items a[role=menuitem] b{font-size:11px;font-weight:normal}
.sm-items a[role=menuitem] em{font-style:normal;font-size:9px;color:#4a5a5e;margin-left:auto}
.sm-items a[role=menuitem]:hover em{color:#9fd9bd}

/* buy card */
.buy-live{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.buy-live div{background:#0a151b;border:1px solid #2b4a52;padding:10px;display:grid;gap:2px}
.buy-live b{font-size:15px;color:var(--green)}
.buy-live b.up{color:#7fe9b4}.buy-live b.down{color:#ff9db0}
.buy-live span{font-size:8.5px;letter-spacing:1px;color:#7d9092}
.buy-note{font-size:10.5px;color:#9fb3b5;margin:0 0 14px}
.buy-note b{color:#ffc857}
.buy-cta{display:block;text-align:center;text-decoration:none;font-family:var(--mono);
  font-size:13px;letter-spacing:2px;padding:14px;margin:14px 0 8px;
  background:linear-gradient(#ff4fa8,#d42b80);color:#fff;border:1px solid #ff7ac0;
  box-shadow:0 6px 22px rgba(255,79,168,.28);transition:.15s}
.buy-cta:hover{filter:brightness(1.1);box-shadow:0 8px 28px rgba(255,79,168,.45)}
.buy-alt{display:block;text-align:center;font-size:10px;letter-spacing:1px;color:#8fa6a8;
  text-decoration:none;margin-bottom:6px}
.buy-alt:hover{color:var(--green)}
.buy-addr{display:flex;gap:8px;align-items:center;margin:6px 0 4px}
.buy-addr code{flex:1;font-size:10.5px;color:#ffc857;background:#0a151b;border:1px solid #2b4a52;
  padding:9px 10px;word-break:break-all}
.buy-addr button{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;cursor:pointer;
  background:#132a22;border:1px solid #2f6b52;color:#7fe9b4;padding:9px 12px;white-space:nowrap}
.buy-addr button:hover{border-color:var(--green);color:var(--green)}
@media(max-width:560px){.buy-live{grid-template-columns:repeat(2,1fr)}}
.buy-why{font-size:10px;line-height:1.65;color:#7d9092;margin:-4px 0 10px}
.buy-why code{color:#ffc857;font-size:9.5px}
@media(max-width:560px){.buy-chart{min-height:180px}}

/* what the fly tried to DO — descending-neuron readout */
.c-behav{margin:10px 0 4px;padding:10px 11px;border:1px solid #2b4a52;background:#08151a}
.cb-h{display:block;font-size:8.5px;letter-spacing:1.6px;color:#7d9092;margin-bottom:7px}
.cb-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cb-tag{display:inline-flex;align-items:baseline;gap:6px;font-size:10px;letter-spacing:1.2px;
  color:#ffd9ec;background:#2a0d1c;border:1px solid #79174a;padding:5px 9px;font-weight:normal}
.cb-tag i{font-style:normal;font-size:9px;color:#ff9db0}
.cb-tag.none{color:#7d9092;background:#0d1519;border-color:#2b4a52}
.cb-p{font-size:11px;line-height:1.65;color:#bccbcc;margin:0 0 5px}
.cb-sub{font-size:9px;letter-spacing:.4px;color:#6f8285;margin:0}
/* Wallet lives in the brand strip: it was buried in one tab where nobody
   looking for it would find it. It must never be display:none — hiding the
   connect button on a narrow window is exactly how it went missing before.
   It shrinks instead. */
.brand-strip .wallet-box{margin-left:14px;text-align:right;min-width:150px}
.brand-strip .wallet-btn{width:100%;background:#2a0d1c;border-color:#79174a;color:#ffd9ec;
  font-size:10.5px;padding:9px 12px;letter-spacing:1.4px}
.brand-strip .wallet-btn:hover{border-color:var(--pink);color:#fff;background:#3d1228}
.brand-strip .wallet-btn[disabled]{opacity:.5}
@media(max-width:900px){
  .brand-strip .wallet-box{min-width:0;margin-left:10px}
  .brand-strip .wallet-btn{font-size:9px;padding:7px 9px;letter-spacing:.8px}
  .brand-strip .wallet-info{display:none}
}
@media(max-width:560px){
  .brand-strip .mission{display:none}
  .brand-strip .wallet-btn{font-size:8.5px;padding:6px 7px}
}

.teach-row input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:6px;background:#13242c;border:1px solid #3d5b66;outline:none}.teach-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;background:var(--pink);border:1px solid #280819;cursor:pointer}.teach-row input[type=range]::-moz-range-thumb{width:15px;height:15px;background:var(--pink);border:1px solid #280819;cursor:pointer}.teach canvas{width:100%;height:78px;display:block;background:#050d12;border:1px solid #23373f}.teach-read{font-size:11px;color:#a8bcbd;line-height:1.65;margin:8px 0 0}.teach-read .dim{color:#7e9196}.stim-pick{margin:8px 0 14px}.stim-pick input{width:100%;background:#0a141a;border:1px solid #546b76;color:#dce7e3;padding:8px 10px;font:inherit;font-size:11px;outline:none}.stim-pick input:focus{border-color:var(--green)}.stim-list{max-height:168px;overflow:auto;margin-top:6px;display:grid;gap:3px}.stim-row{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;background:#0b171d;border:1px solid #22383f;color:#cddad6;padding:7px 9px;cursor:pointer;font:inherit;font-size:11px;text-align:left}.stim-row:hover{border-color:var(--green)}.stim-row.on{border-color:var(--pink);color:#fff}.stim-row em{color:var(--green);font-style:normal;font-size:10px}.stim-none{font-size:11px;color:#7e9196;line-height:1.6;padding:8px 2px}

/* ---- first-run tour ----
   The spotlight is one element with a huge spread shadow: everything outside
   the ring is dimmed by the shadow itself, so there is no four-div overlay to
   keep in sync and the highlighted control stays fully visible and clickable. */
.tour-wrap{position:fixed;inset:0;z-index:9000;pointer-events:none}
.tour-spot{position:fixed;border:2px solid var(--green);border-radius:3px;
  box-shadow:0 0 0 9999px rgba(3,7,10,.62),0 0 22px rgba(24,255,139,.45);
 /* No size/position transition. The ring animating from the last step's shape
     spends 280ms at sizes that belong to neither step — which looks exactly
     like a box clipping the top and bottom of the text it points at, and is
     what it was. It snaps now: always either right or not drawn. */
  transition:opacity .18s ease}
.tour-box{position:fixed;background:#0a161b;border:1px solid var(--green);
  box-shadow:0 18px 44px rgba(0,0,0,.6);padding:14px 15px 12px;pointer-events:auto;
  transition:top .28s ease,left .28s ease}
.tour-box h4{margin:4px 0 7px;color:#fff;font-size:15px;line-height:1.25}
.tour-box p{margin:0;color:#b6c6c4;font-size:11.5px;line-height:1.7}
.tour-n{color:var(--green);font-size:10px;letter-spacing:2px}
.tour-act{display:flex;align-items:center;gap:7px;margin-top:13px}
.tour-act button{font:inherit;font-size:11px;padding:7px 13px;cursor:pointer;border:1px solid #3d5b66;
  background:#0d1b21;color:#cddad6}
.tour-act button:hover{border-color:var(--green)}
.tour-next{background:var(--green)!important;color:#08100d!important;border-color:var(--green)!important;font-weight:700}
.tour-skip{border-color:#2b4048!important;color:#7e9196!important}
.tour-act button:disabled{opacity:.35;cursor:default}
.sw-act{display:block}
.sw-act b{display:block;margin-bottom:4px}
.act-btn{margin-top:10px;background:var(--pink);color:#14070d;border:0;font:inherit;font-weight:700;
  letter-spacing:1px;padding:10px 16px;cursor:pointer}
.act-btn:hover{filter:brightness(1.12)}

/* ---- bounties ---- */
.bounty{background:rgba(3,10,14,.94);border:1px solid #405864;padding:15px 16px;margin-bottom:10px}
.b-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.b-head h3{margin:0;color:#fff;font-size:17px;line-height:1.25}
.b-pay{color:var(--green);font-weight:700;font-size:19px;white-space:nowrap}
.b-pay i{font-style:normal;font-size:11px;color:#7e9196}
.b-brief{color:#b6c6c4;font-size:12px;line-height:1.7;margin:9px 0 6px}
.b-meta{color:#7e9196;font-size:11px;margin:0}
.b-open{margin-top:12px;background:var(--green);color:#08100d;border:0;font:inherit;font-weight:800;
  letter-spacing:1px;padding:10px 16px;cursor:pointer}
.b-open:hover{filter:brightness(1.1)}
.b-form{margin-top:12px;border-top:1px solid #23373f;padding-top:12px}
.b-form label{display:block;color:var(--green);font-size:10px;letter-spacing:1.5px;margin:9px 0 4px}
.b-form textarea,.b-form input[type=text],.b-form input:not([type]){width:100%;background:#0a141a;
  border:1px solid #546b76;color:#dce7e3;padding:9px;font:inherit;font-size:12px;outline:none}
.b-form textarea:focus,.b-form input:focus{border-color:var(--green)}
.b-form .check{color:#b6c6c4;font-size:11px;letter-spacing:0;display:flex;align-items:center;gap:7px;margin-top:10px}
.b-send{margin-top:12px;background:var(--pink);color:#14070d;border:0;font:inherit;font-weight:800;
  letter-spacing:1px;padding:11px 18px;cursor:pointer}
.b-send:disabled{opacity:.5;cursor:default}
.b-note{color:#7e9196;font-size:10.5px;line-height:1.6;margin:9px 0 0}
.b-mine{margin-top:12px;padding:10px 12px;border-left:3px solid #546b76;background:#0a141a;font-size:11.5px}
.b-mine p{margin:5px 0 0;color:#b6c6c4;line-height:1.6}
.b-mine.b-won{border-left-color:var(--green);color:var(--green)}
.b-mine.b-short{border-left-color:#c8b25e}
.b-mine.b-no{border-left-color:#6d7d84;color:#8a949a}
.b-empty{padding:26px 18px}