/* ===== Absolix AI Architect — retro OS design system ===== */
:root{
  --blue:#0E50E6;          /* royal desktop blue */
  --blue-deep:#0a1c52;     /* dark navy panels */
  --blue-black:#05060d;    /* terminal black */
  --yellow:#FFDD00;
  --yellow-soft:#FFE85C;
  --orange:#F4521E;
  --green:#2EE84A;
  --green-dim:#1f7a34;
  --red:#FF362B;
  --chrome:#c8c8c0;        /* win95 face */
  --chrome-d:#8a8a82;      /* shadow */
  --chrome-l:#ffffff;      /* highlight */
  --titlebar:linear-gradient(90deg,#06059a 0%, #1f63d8 100%);
  --ink:#0a0a14;
  --card:#dadada;
  --card-d:#9a9a9a;
  --font-head:'Golos Text', system-ui, sans-serif;
  --font-pixel:'Pixelify Sans', monospace;
  --font-body:'Golos Text', system-ui, sans-serif;
  --font-mono:'VT323', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:#070811;
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  color:var(--ink);
}
.h1, .mono, .tile-title, .term-line, .titlebar, .tb-title,
.pbtn, .sbtn, .start-btn, .clock, .task-active{
  -webkit-font-smoothing:none;
}
img{image-rendering:pixelated;}

/* ---- stage scaling ---- */
#desktop{
  position:fixed; inset:0;
  background:
    radial-gradient(120% 120% at 50% 0%, #14182a 0%, #070811 70%);
  overflow:hidden;
}
#stage{
  position:absolute; top:50%; left:50%;
  width:1060px; height:730px;
  transform:translate(-50%,-50%);
  transform-origin:center center;
}

/* ================= WINDOW CHROME ================= */
.window{
  width:100%; height:100%;
  background:var(--chrome);
  border:3px solid #000;
  display:flex; flex-direction:column;
  box-shadow: inset 2px 2px 0 var(--chrome-l), inset -2px -2px 0 var(--chrome-d), 8px 8px 0 rgba(0,0,0,.5);
}
.titlebar{
  height:34px; flex:0 0 34px;
  display:flex; align-items:center; gap:8px;
  padding:0 4px 0 8px;
  background:var(--titlebar);
  color:#fff;
  border-bottom:2px solid #000;
}
.titlebar.dark{ background:#0a0a14; }
.tb-icon{ width:18px; height:18px; flex:0 0 18px; image-rendering:pixelated; }
.titlebar .tb-icon{ width:18px; height:18px; flex:0 0 18px; image-rendering:pixelated; }
.titlebar .tb-title{
  font-family:var(--font-mono); font-size:21px; letter-spacing:.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.win-btns{ display:flex; gap:4px; }
.win-btn{
  width:26px; height:24px;
  background:var(--chrome);
  border:2px solid;
  border-color:var(--chrome-l) var(--chrome-d) var(--chrome-d) var(--chrome-l);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:18px; color:#000; line-height:1;
  cursor:pointer;
}
.win-btn:active{ border-color:var(--chrome-d) var(--chrome-l) var(--chrome-l) var(--chrome-d); }
.win-btn svg{ display:block; }

/* content area */
.win-body{ flex:1; position:relative; overflow:hidden; }

/* ---- status bar (screens 1-4) ---- */
.statusbar{
  height:34px; flex:0 0 34px;
  display:flex; align-items:center; gap:6px;
  padding:4px 6px;
  background:var(--chrome);
  border-top:2px solid var(--chrome-l);
}
.sunken{
  border:2px solid;
  border-color:var(--chrome-d) var(--chrome-l) var(--chrome-l) var(--chrome-d);
  background:var(--chrome);
  display:flex; align-items:center;
}
.statusbar .sb-text{ flex:1; height:100%; padding:0 8px; font-family:var(--font-mono); font-size:19px; color:#1a1a1a; }
.tray{ gap:8px; padding:0 8px; height:100%; }
.tray .clock{ font-family:var(--font-mono); font-size:19px; color:#000; }

/* ---- taskbar (screens 5-12) ---- */
.taskbar{
  height:40px; flex:0 0 40px;
  display:flex; align-items:center; gap:6px;
  padding:4px 5px;
  background:var(--chrome);
  border-top:2px solid var(--chrome-l);
}
.start-btn{
  display:flex; align-items:center; gap:6px;
  height:30px; padding:0 10px 0 6px;
  border:2px solid; border-color:var(--chrome-l) var(--chrome-d) var(--chrome-d) var(--chrome-l);
  background:var(--chrome);
  font-family:var(--font-head); font-weight:700; font-size:18px; color:#000;
  cursor:pointer;
}
.start-btn:active{ border-color:var(--chrome-d) var(--chrome-l) var(--chrome-l) var(--chrome-d); }
.start-logo{ width:20px; height:20px; }
.quick{ display:flex; gap:3px; padding:0 4px; }
.quick-ic{
  width:30px; height:30px; padding:4px;
  border:2px solid; border-color:var(--chrome-d) var(--chrome-l) var(--chrome-l) var(--chrome-d);
  background:var(--chrome);
}
.task-active{
  flex:1; height:30px; display:flex; align-items:center; gap:8px; padding:0 8px;
  border:2px solid; border-color:var(--chrome-d) var(--chrome-l) var(--chrome-l) var(--chrome-d);
  background:var(--chrome);
  font-family:var(--font-mono); font-size:19px; color:#000;
  white-space:nowrap; overflow:hidden;
}
.task-active img{ width:18px; height:18px; }
.divider{ flex:1; }

/* ================= TYPE ================= */
.h1{
  font-family:var(--font-head); font-weight:800;
  font-size:46px; line-height:1.02; letter-spacing:-0.5px;
  color:var(--yellow);
  text-shadow:2px 2px 0 rgba(0,0,0,.28);
}
.h1.blue{ color:#fff; }
.sub{ font-family:var(--font-body); font-size:21px; line-height:1.25; }
.mono{ font-family:var(--font-mono); line-height:1.2; }

/* ================= BUTTONS ================= */
.pbtn{
  font-family:var(--font-head); font-weight:700; letter-spacing:.5px;
  font-size:22px; color:#000;
  border:3px solid #000;
  padding:14px 22px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  box-shadow:5px 5px 0 rgba(0,0,0,.45);
  transition:transform .05s, box-shadow .05s;
  text-align:center; line-height:1.15; white-space:nowrap;
}
.pbtn:hover{ transform:translate(-1px,-1px); box-shadow:6px 6px 0 rgba(0,0,0,.5); }
.pbtn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 rgba(0,0,0,.4); }
.pbtn.yellow{ background:var(--yellow); }
.pbtn.orange{ background:var(--orange); color:#fff; }
.pbtn.green{ background:#1f9e3a; color:#fff; border-color:#0a3a17; box-shadow:5px 5px 0 rgba(0,0,0,.45), 0 0 18px rgba(46,232,74,.3); }

/* small select button */
.sbtn{
  font-family:var(--font-head); font-weight:700; font-size:15px; letter-spacing:.5px;
  background:var(--chrome); color:#000;
  border:2px solid; border-color:var(--chrome-l) #6f6f6f #6f6f6f var(--chrome-l);
  padding:6px 14px; cursor:pointer;
}
.sbtn:active{ border-color:#6f6f6f var(--chrome-l) var(--chrome-l) #6f6f6f; }

/* ================= CARDS ================= */
.card{
  background:var(--card);
  border:3px solid #000;
  box-shadow:4px 4px 0 rgba(0,0,0,.3);
  position:relative;
}
.card.yellow{ background:var(--yellow); }
.card.orange{ background:var(--orange); color:#fff; }
.card.white{ background:#f2f2f2; }

/* selectable tile */
.tile{
  background:var(--card);
  border:3px solid #000;
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  cursor:pointer; transition:transform .06s;
  position:relative;
}
.tile:hover{ transform:translate(-1px,-1px); }
.tile.sel{ background:var(--yellow); box-shadow:0 0 0 3px var(--yellow), 4px 4px 0 rgba(0,0,0,.4); }
.tile .tile-title{ font-family:var(--font-head); font-weight:700; }
.tile .tile-desc{ font-family:var(--font-body); }
.check-badge{
  position:absolute; top:-12px; right:-12px;
  width:30px; height:30px; border-radius:50%;
  background:#1b9e3e; border:3px solid #000;
  display:flex; align-items:center; justify-content:center; color:#fff;
}

/* ================= SPEECH BUBBLE / STICKY ================= */
.speech{
  position:absolute;
  font-family:var(--font-body); font-size:18px; line-height:1.2;
  border:3px solid #000; padding:12px 14px;
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
  max-width:200px;
}
.speech.yellow{ background:var(--yellow); }
.speech.green{ background:var(--green); }
.speech.blue{ background:#1556e6; color:#fff; }
.speech::after{
  content:''; position:absolute; width:0;height:0;
}
.sticky{
  position:absolute; background:var(--yellow-soft);
  border:2px solid #d9b400;
  padding:14px 16px; font-family:var(--font-body); font-size:18px;
  box-shadow:4px 5px 0 rgba(0,0,0,.3);
}

/* ================= TERMINAL ================= */
.term-line{ font-family:var(--font-mono); font-size:23px; line-height:1.18; color:var(--green); white-space:nowrap; display:flex; }
.term-line .lead{ flex:1; overflow:hidden; letter-spacing:1px; }
.term-line .stat{ padding-left:8px; }
.term-line.scan{ color:var(--yellow); }
.term-line.wait{ color:#3c6b45; }
.term-line.wait .label{ color:#5a8a63; }

/* progress bars */
.bar-yellow, .bar-green{
  border:3px solid #000; height:30px; background:#0c1430; position:relative; overflow:hidden;
}
.bar-yellow .fill{ height:100%; background:repeating-linear-gradient(90deg,var(--yellow) 0 18px,#0c1430 18px 22px); }
.bar-green{ border-color:var(--green); background:#02160a; }
.bar-green .fill{ height:100%; background:var(--green); box-shadow:0 0 12px var(--green); }

/* progress dots */
.steps{ display:flex; align-items:center; gap:0; }
.steps .dot{ width:13px;height:13px;border-radius:50%; background:#9fb4e8; border:2px solid #0a2a7a; }
.steps .dot.on{ background:var(--yellow); border-color:#000; }
.steps .seg{ width:34px; height:3px; background:#9fb4e8; }
.steps .seg.on{ background:var(--yellow); }

/* faint wavy bg texture for blue screens */
.bg-blue{ background:var(--blue); position:relative; }
.bg-wave::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,255,.045) 38px 40px);
}
.bg-navy{ background:radial-gradient(120% 120% at 70% 10%, #122a6e 0%, var(--blue-deep) 70%); }
.bg-black{ background:var(--blue-black); }

/* goose */
.goose{ image-rendering:pixelated; pointer-events:none; }

/* ===== rounded tiles (screens 13-16) ===== */
.rtile{
  background:#dfdfdf;
  border:2px solid #2a2a2a; border-radius:12px;
  box-shadow:3px 4px 0 rgba(0,0,0,.28);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  cursor:pointer; transition:transform .06s; position:relative;
}
.rtile:hover{ transform:translate(-1px,-1px); }
.rtile.sel{ background:var(--yellow); border-color:#000; box-shadow:0 0 0 2px var(--yellow), 3px 4px 0 rgba(0,0,0,.4); }
.rtile .rt-title{ font-family:var(--font-head); font-weight:700; color:#16245a; line-height:1.15; }
.rtile .rt-sub{ font-family:var(--font-head); font-weight:700; color:#5a6486; }
.rcheck{
  position:absolute; top:9px; left:9px; width:20px; height:20px;
  border:2px solid #2a2a2a; border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.rcheck.on{ background:#1b9e3e; border-color:#0a5a22; }

/* ===== neon panels (screens 18-20, black bg) ===== */
.neon{
  border:2px solid; border-radius:6px; background:rgba(10,14,30,.55);
  position:relative;
}
.neon-cyan{ border-color:#28d2e6; box-shadow:0 0 12px rgba(40,210,230,.25), inset 0 0 18px rgba(40,210,230,.06); }
.neon-purple{ border-color:#b06cff; box-shadow:0 0 12px rgba(176,108,255,.25), inset 0 0 18px rgba(176,108,255,.06); }
.neon-green{ border-color:#2EE84A; box-shadow:0 0 12px rgba(46,232,74,.25), inset 0 0 18px rgba(46,232,74,.06); }
.neon-yellow{ border-color:#FFDD00; box-shadow:0 0 12px rgba(255,221,0,.22), inset 0 0 18px rgba(255,221,0,.06); }
.neon-magenta{ border-color:#ff43c4; box-shadow:0 0 12px rgba(255,67,196,.28), inset 0 0 18px rgba(255,67,196,.06); }
.neon-red{ border-color:#FF362B; box-shadow:0 0 12px rgba(255,54,43,.28), inset 0 0 18px rgba(255,54,43,.06); }
.neon-h{ font-family:var(--font-head); font-weight:700; letter-spacing:.5px; }

/* ===== screen-1 CRT + goose animation ===== */
.hero-pc-wrap{ position:absolute; }
.radar-sweep{
  position:absolute; inset:2px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(46,232,74,.55), rgba(46,232,74,0) 60deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, #000 99%, transparent 100%);
  mask:radial-gradient(circle, #000 99%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference){ .radar-sweep{ animation:radarSpin 3.4s linear infinite; } }
@keyframes radarSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.blink{ animation:blink 1s steps(1) infinite; }
@keyframes blink{ 0%,50%{ opacity:1;} 51%,100%{ opacity:0;} }
.crt-screen{
  position:absolute; overflow:hidden; border-radius:6px/8px;
  mix-blend-mode:screen; pointer-events:none;
}
.crt-scan{ position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.22) 3px 4px);
  animation:scanmove 5s linear infinite; opacity:.6;
}
@keyframes scanmove{ from{background-position:0 0;} to{background-position:0 16px;} }
.crt-glint{ position:absolute; top:-60%; left:-40%; width:40%; height:220%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform:rotate(8deg); animation:glint 4.5s ease-in-out infinite; }
@keyframes glint{ 0%,55%{ left:-50%; } 80%,100%{ left:140%; } }
.spark{ position:absolute; width:5px; height:5px; background:var(--yellow);
  box-shadow:0 0 6px var(--yellow); image-rendering:pixelated; opacity:0; }
@keyframes rise{ 0%{ transform:translateY(10px) scale(.6); opacity:0; }
  20%{ opacity:1; } 100%{ transform:translateY(-90px) scale(1); opacity:0; } }
@media (prefers-reduced-motion: no-preference){
  .goose-idle{ animation:gooseBob 3.2s ease-in-out infinite; transform-origin:50% 100%; }
  .goose-peck{ animation:goosePeck 4.5s ease-in-out infinite; transform-origin:50% 100%; }
}
@keyframes gooseBob{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-8px) rotate(-1.2deg);} }
@keyframes goosePeck{ 0%,70%,100%{ transform:rotate(0deg);} 78%{ transform:rotate(7deg);} 86%{ transform:rotate(0deg);} 92%{ transform:rotate(5deg);} }
.float-note{ position:absolute; animation:floatNote 3.8s ease-in-out infinite; }
@keyframes floatNote{ 0%{ transform:translate(0,0) rotate(-8deg); opacity:0;} 15%{opacity:1;} 100%{ transform:translate(18px,-46px) rotate(12deg); opacity:0;} }

/* nav overlay */
#nav{
  position:fixed; left:50%; transform:translateX(-50%); bottom:8px; z-index:50;
  display:flex; align-items:center; gap:8px; opacity:.82;
  font-family:var(--font-mono); color:#cfd6f0; font-size:18px;
  background:rgba(10,12,24,.82); border:1px solid #2a3354; border-radius:6px;
  padding:4px 9px; user-select:none;
}
#nav button{
  font-family:var(--font-mono); font-size:18px;
  color:#fff; border:1px solid #39426b; border-radius:4px;
  width:30px;height:26px; cursor:pointer; background:#222a47;
}
#nav button:hover{ background:#33406f; }
#nav .lbl{ min-width:80px; text-align:center; }

/* ===== mobile design system =====
   Used when React renders MScreen wrapper (phone shell) for small viewports.
   Desktop Window chrome is not rendered on mobile, so these classes are
   standalone — NOT inside a parent selector. */

/* phone shell */
.m-stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.m-phone{
  position:relative;
  width:100%; height:100%;
  background:var(--blue);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.m-top{
  flex:0 0 auto; height:48px;
  display:flex; align-items:center; gap:9px;
  padding:0 10px;
  background:#0a0a14; color:#fff;
  border-bottom:2px solid #000;
  z-index:5;
}
.m-top .tb-icon{ width:22px; height:22px; flex:0 0 22px; image-rendering:pixelated; }
.m-top .m-title{
  font-family:var(--font-mono); font-size:22px; letter-spacing:.5px;
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-top .m-back{
  font-family:var(--font-mono); font-size:20px; color:#fff;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:4px; padding:4px 8px;
}
.m-top .m-dots{ display:flex; gap:5px; }
.m-top .m-dots i{ width:11px; height:11px; border-radius:50%; display:block; }
.m-body{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:20px 18px 26px;
  position:relative;
}
.m-body::-webkit-scrollbar{ width:9px; }
.m-body::-webkit-scrollbar-track{ background:rgba(0,0,0,.2); }
.m-body::-webkit-scrollbar-thumb{ background:var(--chrome-d); border:1px solid #000; }
.m-nav{
  flex:0 0 auto; height:54px;
  display:flex; align-items:center; gap:8px;
  padding:0 12px;
  background:var(--chrome);
  border-top:2px solid var(--chrome-l);
  z-index:5;
}
.m-nav .m-start{
  display:flex; align-items:center; gap:7px;
  height:36px; padding:0 12px 0 8px;
  border:2px solid; border-color:var(--chrome-l) var(--chrome-d) var(--chrome-d) var(--chrome-l);
  background:var(--chrome);
  font-family:var(--font-head); font-weight:700; font-size:18px; color:#000;
}
.m-nav .m-spacer{ flex:1; }
.m-nav .m-navbtn{
  width:44px; height:38px; flex:0 0 44px;
  border:2px solid; border-color:var(--chrome-l) var(--chrome-d) var(--chrome-d) var(--chrome-l);
  background:var(--chrome);
  font-family:var(--font-mono); font-size:24px; color:#000; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.m-navbtn:active{ border-color:var(--chrome-d) var(--chrome-l) var(--chrome-l) var(--chrome-d); }
.m-navbtn:disabled{ color:#8a8a82; }
.m-nav .m-count{
  font-family:var(--font-mono); font-size:21px; color:#000;
  min-width:62px; text-align:center;
}

/* typography */
.m-h1{
  font-family:var(--font-head); font-weight:800;
  font-size:30px; line-height:1.06; letter-spacing:-.5px;
  color:var(--yellow); text-shadow:2px 2px 0 rgba(0,0,0,.28);
  margin:0;
}
.m-h1.light{ color:#fff; }
.m-h1.cyan{ color:#28d2e6; text-shadow:0 0 10px rgba(40,210,230,.35); }
.m-h1.green{ color:#2EE84A; text-shadow:0 0 10px rgba(46,232,74,.4); }
.m-sub{ font-family:var(--font-body); font-size:15px; line-height:1.32; color:#dce6ff; margin:7px 0 0; }
.m-sub.dim{ color:#bcd0ff; }
.m-mono{ font-family:var(--font-mono); line-height:1.4; }
.m-eyebrow{ font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:1px; }
.m-label{
  font-family:var(--font-head); font-weight:700; font-size:15px; letter-spacing:.6px;
  display:flex; align-items:center; gap:9px; margin:0 0 11px;
}

/* buttons */
.m-btn{
  width:100%;
  font-family:var(--font-head); font-weight:700; font-size:19px; letter-spacing:.4px;
  color:#000; border:3px solid #000; padding:15px 18px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:4px 4px 0 rgba(0,0,0,.4); cursor:pointer; text-align:center; line-height:1.1;
}
.m-btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,.35); }
.m-btn.yellow{ background:var(--yellow); }
.m-btn.orange{ background:var(--orange); color:#fff; }
.m-btn.green{ background:#1f9e3a; color:#fff; border-color:#0a3a17; box-shadow:4px 4px 0 rgba(0,0,0,.4), 0 0 16px rgba(46,232,74,.3); }

/* cards */
.m-card{
  background:var(--card); border:3px solid #000;
  box-shadow:4px 4px 0 rgba(0,0,0,.3);
  padding:15px 16px; position:relative;
}
.m-card.yellow{ background:var(--yellow); }
.m-card.orange{ background:var(--orange); color:#fff; }
.m-card.white{ background:#f2f2f2; }
.m-card-title{ font-family:var(--font-head); font-weight:700; font-size:17px; }

/* selectable tile */
.m-tile{
  background:var(--card); border:3px solid #000;
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
  padding:16px 12px; display:flex; flex-direction:column; align-items:center; text-align:center;
  cursor:pointer; position:relative; min-height:0; min-width:0; width:100%; box-sizing:border-box;
}
.m-tile.row{ flex-direction:row; align-items:center; text-align:left; gap:13px; padding:14px 15px; }
.m-tile.sel{ background:var(--yellow); box-shadow:0 0 0 3px var(--yellow), 3px 3px 0 rgba(0,0,0,.4); }
.m-tile-title{ font-family:var(--font-head); font-weight:700; font-size:14px; line-height:1.12; }
.m-tile-desc{ font-family:var(--font-body); font-size:13px; line-height:1.22; color:#33405e; }
.m-tile-sub{ font-family:var(--font-mono); font-size:14px; color:#5a6680; }
.m-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; min-width:0; }
.m-grid1{ display:flex; flex-direction:column; gap:12px; }
.m-check{
  width:26px; height:26px; flex:0 0 auto;
  border:3px solid #1b9e3e; border-radius:5px;
  display:flex; align-items:center; justify-content:center; background:#fff;
}
.m-check.on{ background:#1b9e3e; }
.m-checkbadge{
  position:absolute; top:-11px; right:-11px;
  width:28px; height:28px; border-radius:50%;
  background:#1b9e3e; border:3px solid #000;
  display:flex; align-items:center; justify-content:center;
}

/* goose helper banner */
.m-goose{
  display:flex; align-items:flex-end; gap:10px;
  margin:16px 0 2px;
}
.m-goose img{ height:84px; image-rendering:pixelated; flex:0 0 auto; }
.m-goose .m-bubble{
  flex:1; position:relative;
  border:3px solid #000; padding:11px 13px;
  font-family:var(--font-body); font-size:14px; line-height:1.25;
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
}
.m-bubble.yellow{ background:var(--yellow); }
.m-bubble.green{ background:#0c2a16; color:#bfffc9; border-color:#2EE84A; }
.m-bubble.blue{ background:#1556e6; color:#fff; }
.m-bubble.white{ background:#eef0f4; }
.m-bubble::after{
  content:''; position:absolute; left:-15px; bottom:16px;
  width:0; height:0; border:8px solid transparent;
  border-right-color:#000;
}

/* neon panel — relies on .neon base from styles.css */
.m-neon{ border:2px solid; border-radius:8px; padding:13px 15px; position:relative; }
.m-neon-h{ font-family:var(--font-head); font-weight:700; font-size:15px; letter-spacing:.5px; margin:0 0 10px; }

/* list row */
.m-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:9px; }
.m-row:last-child{ margin-bottom:0; }
.m-row .m-rt{ font-family:var(--font-body); font-size:14.5px; line-height:1.25; }

/* terminal line */
.m-term{ font-family:var(--font-mono); font-size:18px; line-height:1.3; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.m-term > span:first-child{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-term > span:last-child{ flex:0 0 auto; }

/* progress */
.m-prog{ border:3px solid #000; height:26px; background:#0c1430; overflow:hidden; }
.m-prog .fill{ height:100%; }
.m-prog.green{ border-color:#2EE84A; background:#02160a; }
.m-prog.green .fill{ background:#2EE84A; box-shadow:0 0 10px #2EE84A; }
.m-prog.yellow .fill{ background:repeating-linear-gradient(90deg,var(--yellow) 0 16px,#0c1430 16px 20px); }

/* metric bar */
.m-mbar{ height:11px; background:#0c2a16; border:1px solid #1f7a34; flex:1; }
.m-mbar i{ display:block; height:100%; background:#2EE84A; }

/* steps dots */
.m-steps{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.m-steps .d{ width:12px; height:12px; border-radius:50%; background:#9fb4e8; border:2px solid #0a2a7a; }
.m-steps .d.on{ background:var(--yellow); border-color:#000; }
.m-steps .s{ width:18px; height:3px; background:#9fb4e8; }
.m-steps .s.on{ background:var(--yellow); }

/* chips */
.m-chip{
  font-family:var(--font-body); font-size:13px; color:#eaf1ff;
  background:rgba(255,255,255,.08); border:2px solid #9fb4ff; border-radius:16px;
  padding:7px 14px; cursor:pointer;
}

/* stars */
.m-stars{ display:flex; gap:4px; }

/* divider */
.m-hr{ height:2px; background:rgba(255,255,255,.12); margin:16px 0; border:none; }

/* entrance animation */
@media (prefers-reduced-motion: no-preference){
  .m-body > *{ animation:mFade .4s ease both; }
}
@keyframes mFade{ from{ transform:translateY(10px);} to{ transform:none;} }

/* on phones, stage fills viewport, no scaling */
body.mobile-ui #stage{
  top:0; left:0; width:100% !important; height:100% !important;
  transform:none !important;
}