:root{
    --bg1:#fff3d6; --bg2:#ffe1ec; --bg3:#dcefff5;
    --ink:#16182b; --ink-soft:#4a4f6a;
    --blue:#2f7bff; --red:#ff4d5e; --yellow:#ffd23f; --green:#1fcf8f;
    --purple:#9b5cff; --orange:#ff8a3d; --pink:#ff6fae;
    --line:#16182b;
    --r:18px;
    --comic:'Comic Sans MS','Chalkboard SE','Comic Neue',system-ui,sans-serif;
    --font:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
    --hard:6px 6px 0 var(--line);
    --hard-sm:4px 4px 0 var(--line);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--font); color:var(--ink);
    background:
      radial-gradient(circle at 12% 18%, rgba(0,0,0,.05) 1.6px, transparent 1.7px) 0 0/16px 16px,
      linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));
    min-height:100vh; display:flex; flex-direction:column; overflow:hidden;
  }

  /* ===== top bar (comic HUD) ===== */
  .os-bar{display:flex;align-items:center;gap:12px;padding:9px 16px;
    background:#fff;border-bottom:4px solid var(--line);z-index:30}
  .os-title{font-family:var(--comic);font-weight:700;font-size:17px;letter-spacing:.3px;
    transform:rotate(-1.5deg)}
  .os-title b{color:var(--blue)}
  .os-home{display:flex;align-items:center;flex:none;text-decoration:none;margin-right:2px;transform:rotate(-1.5deg)}
  .os-home svg{height:30px;width:auto;display:block;transition:transform .18s,filter .18s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
  .os-home:hover svg{transform:scale(1.06);filter:drop-shadow(0 3px 8px rgba(55,230,255,.45))}
  @media(max-width:560px){.os-home svg{height:24px}}
  .os-spacer{flex:1}
  .xp-badge{font-family:var(--comic);display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;
    background:var(--yellow);color:#5a4200;padding:5px 13px;border:3px solid var(--line);
    border-radius:999px;box-shadow:var(--hard-sm)}
  .progress-wrap{flex:1;max-width:320px;height:16px;background:#fff;border:3px solid var(--line);
    border-radius:999px;overflow:hidden}
  .progress-bar{height:100%;width:5%;background:repeating-linear-gradient(45deg,var(--green),var(--green) 9px,#19b97f 9px,#19b97f 18px);transition:width .4s}
  .slide-count{display:none;font-family:var(--comic);font-weight:700;font-size:14px;min-width:52px;text-align:right}

  /* ===== stage ===== */
  .stage{flex:1;position:relative;overflow:hidden}
  .slide{position:absolute;inset:0;padding:26px 22px 14px;display:none;flex-direction:column;
    align-items:center;overflow-y:auto;animation:pop .45s cubic-bezier(.2,1.3,.5,1)}
  .slide.active{display:flex}
  @keyframes pop{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
  .inner{width:100%;max-width:960px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:16px}

  /* comic headings */
  .kicker{font-family:var(--comic);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;
    background:var(--blue);color:#fff;padding:6px 16px;border:3px solid var(--line);border-radius:999px;
    box-shadow:var(--hard-sm);transform:rotate(-1.5deg)}
  h1{font-family:var(--comic);font-size:clamp(30px,5.4vw,54px);line-height:1.02;text-align:center;
    color:var(--ink);text-shadow:3px 3px 0 var(--yellow),6px 6px 0 rgba(0,0,0,.12);letter-spacing:.5px}
  h2{font-family:var(--comic);font-size:clamp(24px,4vw,40px);text-align:center;line-height:1.05;
    text-shadow:2px 2px 0 #fff,4px 4px 0 rgba(0,0,0,.1)}
  .lead{font-size:clamp(16px,2.1vw,20px);color:var(--ink-soft);text-align:center;max-width:680px;line-height:1.45;font-weight:600}
  .big-step{font-family:var(--comic);font-size:clamp(18px,2.5vw,24px);text-align:center;line-height:1.45}
  .hl{color:var(--blue)} .hl-r{color:var(--red)}
  .hl-y{background:var(--yellow);padding:0 6px;border-radius:6px;box-decoration-break:clone}
  .dual{color:var(--blue);font-weight:800}
  .note{font-size:13px;color:var(--ink-soft);text-align:center;font-weight:600}

  /* comic panel card */
  .grid{display:grid;gap:15px;width:100%}
  .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:720px){.g2,.g3,.g4{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:460px){.g2,.g3,.g4{grid-template-columns:1fr}}
  .card{background:#fff;border:4px solid var(--line);border-radius:var(--r);padding:16px;
    box-shadow:var(--hard);transition:transform .14s,box-shadow .14s}
  .card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--line)}
  .card .emoji{font-size:30px;display:block;margin-bottom:6px}
  .card h3{font-family:var(--comic);font-size:18px;margin-bottom:3px}
  .card h3 small{display:block;font-size:.68em;line-height:1.15;margin-top:4px;color:inherit;opacity:.88}
  .card p{font-size:13.5px;color:var(--ink-soft);line-height:1.4;font-weight:600}
  .card.tap{cursor:pointer;text-align:center;user-select:none}
  .card.tap:active{transform:scale(.96)}
  .card.tap.picked{background:#eafff6;border-color:var(--green);box-shadow:6px 6px 0 var(--green)}
  .card.tap.picked::after{content:"✓";position:absolute;margin:-30px 0 0 8px;font-family:var(--comic);
    color:#fff;background:var(--green);width:26px;height:26px;border-radius:50%;border:3px solid var(--line);
    display:grid;place-items:center;font-size:15px;transform:translateY(-6px)}
  .card.tap{position:relative}

  /* speech bubble */
  .bubble{position:relative;background:#fff;border:4px solid var(--line);border-radius:20px;
    padding:16px 20px;box-shadow:var(--hard);font-family:var(--comic);font-size:clamp(16px,2.2vw,21px);
    line-height:1.4;max-width:660px;text-align:center}
  .bubble::after{content:"";position:absolute;left:48px;bottom:-20px;width:0;height:0;
    border:16px solid transparent;border-top-color:var(--line)}
  .bubble::before{content:"";position:absolute;left:52px;bottom:-12px;width:0;height:0;
    border:11px solid transparent;border-top-color:#fff;z-index:1}

  /* burst badge */
  .burst{font-family:var(--comic);background:var(--red);color:#fff;padding:18px 26px;text-align:center;
    box-shadow:var(--hard);font-size:clamp(18px,2.6vw,26px);border:4px solid var(--line);
    clip-path:polygon(0% 15%,8% 0%,18% 12%,30% 0,42% 12%,54% 0,66% 12%,78% 0,90% 12%,100% 4%,94% 22%,100% 40%,92% 52%,100% 68%,90% 80%,100% 96%,84% 90%,70% 100%,58% 90%,46% 100%,34% 90%,22% 100%,10% 90%,0 98%,6% 78%,0 60%,8% 48%,0 30%);
    padding:34px}

  /* steps */
  .steps{display:flex;flex-direction:column;gap:12px;width:100%;max-width:620px}
  .step{display:flex;gap:14px;align-items:flex-start;background:#fff;border:4px solid var(--line);
    border-radius:16px;padding:13px 16px;box-shadow:var(--hard-sm)}
  .step .n{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
    font-family:var(--comic);font-size:18px;color:#fff;background:var(--purple);border:3px solid var(--line)}
  .step .t{font-size:16px;line-height:1.4;padding-top:5px;font-weight:600}
  .step .t b{color:var(--blue)}
  .folder-manager{width:min(1180px,94vw);display:grid;grid-template-columns:1fr 390px;gap:20px;align-items:stretch}
  .folder-manager.legacy{display:grid;grid-template-columns:1fr;gap:16px}
  .folder-manager.legacy .steps{max-width:1180px!important;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .folder-manager.legacy .step{width:100%;min-height:88px;text-align:left;cursor:pointer;color:inherit;font-family:inherit}
  .folder-manager.legacy .step:hover{transform:translateY(-3px);border-color:var(--neon);box-shadow:0 0 22px rgba(55,200,255,.3)}
  .folder-actions{display:flex;flex-direction:column;gap:12px}
  .folder-action{border:1px solid rgba(90,150,255,.38);border-radius:20px;padding:15px 16px;text-align:left;
    background:linear-gradient(145deg,rgba(18,30,62,.92),rgba(9,17,38,.94));color:#eef3ff;
    box-shadow:var(--hard-sm);cursor:pointer;font-family:var(--comic);font-weight:900;font-size:16px}
  .folder-action b{color:var(--neon)}
  .folder-action small{display:block;margin-top:5px;color:#b9c8ec;font-family:var(--font);font-weight:800;line-height:1.25}
  .folder-action:hover{transform:translateY(-3px);border-color:var(--neon);box-shadow:0 0 22px rgba(55,200,255,.32)}
  .folder-path{border-radius:18px;padding:12px 14px;background:rgba(3,9,22,.62);border:1px dashed rgba(90,150,255,.45);
    color:#d9e6ff;font-family:Consolas,'Courier New',monospace;font-size:15px;line-height:1.35}
  .folder-status{min-height:50px;border-radius:18px;padding:12px 14px;background:rgba(39,232,167,.12);
    border:1px solid rgba(39,232,167,.35);color:#dfffee;font-weight:900;line-height:1.35}
  .folder-manager.legacy .folder-status{width:min(760px,90vw);justify-self:center;text-align:center}
  .folder-status.mounted{cursor:pointer;background:linear-gradient(135deg,rgba(39,232,167,.32),rgba(55,230,255,.2));
    border-color:var(--green);box-shadow:0 0 24px rgba(39,232,167,.36)}
  .folder-status.mounted::after{content:" Натисни, щоб зберегти пакет для Codex.";display:block;margin-top:4px;color:#ffffff;font-size:13px}
  .transfer-codex{margin-left:10px;background:linear-gradient(90deg,#27e8a7,#37e6ff,#ffd23f)!important;color:#061227!important}
  @media(max-width:980px){.folder-manager{grid-template-columns:1fr}.folder-actions{order:-1}}

  /* checklist */
  .check-list{display:flex;flex-direction:column;gap:10px;width:100%;max-width:560px}
  .check{display:flex;align-items:center;gap:13px;background:#fff;border:4px solid var(--line);
    border-radius:14px;padding:12px 15px;cursor:pointer;font-size:16px;font-weight:700;
    box-shadow:var(--hard-sm);transition:.14s;user-select:none}
  .check:active{transform:scale(.98)}
  .check .box{width:28px;height:28px;border-radius:8px;border:3px solid var(--line);flex:0 0 auto;
    display:grid;place-items:center;font-size:18px;color:#fff;background:#fff;transition:.14s}
  .check.on .box::before{content:"✓"}
  .check .em{font-size:22px}
  .inline-jump{appearance:none;border:0;border-radius:999px;padding:5px 10px;margin-left:4px;
    font-family:var(--comic);font-weight:900;cursor:pointer;background:var(--yellow);color:var(--ink);
    box-shadow:0 0 12px rgba(255,210,63,.35);white-space:nowrap}
  .inline-jump:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .check.on{background:#eafff6}
  .check.on .box{background:var(--green)}

  /* files */
  .filerow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%}
  .filebox{background:#fff;border:4px solid var(--line);border-radius:16px;padding:15px 20px;text-align:center;
    box-shadow:var(--hard-sm);min-width:148px}
  .filebox .ic{font-size:38px}
  .filebox code{display:block;margin-top:5px;font-family:var(--comic);font-size:15px;color:var(--blue)}
  .filebox span{font-size:12.5px;color:var(--ink-soft);font-weight:600}

  /* style logo cards (Q4) */
  .style-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;width:100%}
  @media(max-width:820px){.style-grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:480px){.style-grid{grid-template-columns:repeat(2,1fr)}}
  .style-card{cursor:pointer;border:4px solid var(--line);border-radius:16px;padding:14px 8px;text-align:center;
    box-shadow:var(--hard-sm);transition:.14s;user-select:none;position:relative;overflow:hidden}
  .style-card:active{transform:scale(.96)}
  .style-card .logo{width:62px;height:62px;margin:0 auto 8px;border:4px solid var(--line);border-radius:14px;
    display:grid;place-items:center;font-size:30px;background:#fff}
  .style-card h4{font-family:var(--comic);font-size:14px;line-height:1.1}
  .style-card.sel{outline:5px solid var(--blue);outline-offset:2px}
  .sc-game{background:#e9f0ff}.sc-game .logo{background:repeating-linear-gradient(45deg,#cfe0ff,#cfe0ff 6px,#bcd4ff 6px,#bcd4ff 12px)}
  .sc-study{background:#fff7e0}.sc-study .logo{background:#fffbe9}
  .sc-cartoon{background:#ffe8f2}.sc-cartoon .logo{background:radial-gradient(circle at 30% 30%, #ffd23f 2px, transparent 2.5px) 0 0/10px 10px,#ffd0e6}
  .sc-movie{background:#eae6ff}.sc-movie .logo{background:repeating-linear-gradient(#1a1a1a,#1a1a1a 5px,#fff 5px,#fff 10px);color:#fff}
  .sc-folk{background:#e7fff4}.sc-folk .logo{background:#f3ffe9}

  /* prompt box */
  .prompt-box{position:relative;width:100%;max-width:780px;background:#101a2e;color:#dfe9ff;
    border:4px solid var(--line);border-radius:16px;padding:46px 18px 18px;box-shadow:var(--hard);text-align:left;
    font-family:'Consolas','Courier New',monospace;font-size:13.5px;line-height:1.5;white-space:pre-wrap;
    max-height:300px;overflow:auto}
  .copy-btn{position:absolute;top:12px;right:12px;font-family:var(--comic);background:var(--yellow);color:#5a4200;
    border:3px solid var(--line);border-radius:10px;padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer;
    box-shadow:var(--hard-sm);transition:.12s}
  .copy-btn:active{transform:translate(2px,2px);box-shadow:none}
  .copy-btn.done{background:var(--green);color:#fff}
  .ph-title{position:absolute;top:14px;left:18px;font-family:var(--comic);color:#7fd0ff;font-size:13px}

  /* trouble */
  .trouble{width:100%;max-width:640px;display:flex;flex-direction:column;gap:10px}
  .trouble details{background:#fff8e6;border:4px solid var(--line);border-radius:14px;padding:2px 15px;box-shadow:var(--hard-sm)}
  .trouble summary{list-style:none;cursor:pointer;font-family:var(--comic);font-size:16px;padding:12px 0;
    display:flex;align-items:center;gap:10px}
  .trouble summary::-webkit-details-marker{display:none}
  .trouble summary .q{flex:1}
  .trouble summary .arr{transition:.2s}
  .trouble details[open] summary .arr{transform:rotate(90deg)}
  .trouble p{padding:0 0 13px 30px;color:#6a4f12;font-size:15px;line-height:1.5;font-weight:600}

  /* cover */
  .cover-frame{width:100%;max-width:1000px;border:5px solid var(--line);border-radius:18px;overflow:hidden;
    box-shadow:var(--hard);background:#fff}
  .cover-frame img{display:block;width:100%}

  /* nav */
  .nav{display:flex;align-items:center;gap:12px;padding:11px 16px;background:#fff;border-top:4px solid var(--line);z-index:30}
  .btn{font-family:var(--comic);border:4px solid var(--line);border-radius:14px;padding:12px 24px;font-weight:700;
    font-size:17px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--hard-sm);transition:.12s}
  .btn:active{transform:translate(2px,2px);box-shadow:none}
  .btn-prev{background:#fff;color:var(--ink)}
  .btn-next{background:var(--blue);color:#fff}
  .btn:disabled{opacity:.35;cursor:not-allowed}
  .nav-center{flex:1;display:flex;gap:10px;justify-content:center;align-items:center;min-width:0}
  .nav .dots{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap}
  .nav .dot{appearance:none;padding:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--line);
    cursor:pointer;transition:.2s;font-family:var(--comic);font-size:10px;line-height:1;font-weight:900;color:var(--ink)}
  .nav .dot.active{background:var(--red);color:#fff;transform:scale(1.18)}

  /* misc */
  .float{animation:floaty 3s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
  .trophy{font-size:92px;display:block;text-align:center}
  .placeholder{display:inline-block;background:var(--yellow);border:3px solid var(--line);border-radius:8px;
    padding:2px 8px;font-family:var(--comic);font-size:13px}
  .tool-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;text-decoration:none;
    background:linear-gradient(90deg,#ffd23f,#37e6ff,#a06bff);color:#061227;border:2px solid rgba(255,255,255,.6);
    border-radius:999px;padding:10px 15px;font-family:var(--comic);font-size:15px;font-weight:1000;
    box-shadow:0 0 20px rgba(55,230,255,.35),0 8px 18px rgba(0,0,0,.24);transition:transform .12s,filter .12s}
  .tool-link:hover{transform:translateY(-2px);filter:brightness(1.08) saturate(1.12)}
  .tool-link:active{transform:translateY(1px)}
  .challenge-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
  .confetti{position:absolute;top:-10px;width:11px;height:16px;border:2px solid rgba(0,0,0,.25);
    animation:fall linear forwards;z-index:60}
  @keyframes fall{to{transform:translateY(110vh) rotate(640deg);opacity:0}}
  .toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);font-family:var(--comic);
    background:var(--ink);color:#fff;padding:12px 22px;border:4px solid var(--line);border-radius:14px;
    box-shadow:var(--hard);opacity:0;pointer-events:none;transition:.3s;z-index:70;font-size:16px}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .pickhint{font-family:var(--comic);background:#fff;border:3px solid var(--line);border-radius:999px;
    padding:5px 14px;font-size:13px;box-shadow:var(--hard-sm)}
  .name-card{width:min(720px,92vw);display:flex;align-items:center;gap:14px;justify-content:center;
    background:#fff;border:3px solid var(--line);border-radius:22px;padding:12px 16px;box-shadow:var(--hard-sm)}
  .name-card label{font-family:var(--comic);font-size:18px;font-weight:900;white-space:nowrap}
  .name-card input{flex:1;min-width:180px;border:3px solid var(--line);border-radius:16px;padding:12px 14px;
    font-family:var(--comic);font-size:18px;font-weight:800;color:var(--ink);outline:none}
  .name-card input:focus{box-shadow:0 0 0 4px rgba(55,230,255,.25)}

.room{position:relative;width:100%;max-width:960px;border:5px solid var(--line);border-radius:20px;
    padding:20px;box-shadow:var(--hard);overflow:hidden;
    background:radial-gradient(120% 85% at 82% -10%, #cfe7ff 0%, #ecdfc6 52%, #dcc9aa 100%);}
  .room .plant{position:absolute;left:-6px;bottom:-8px;font-size:46px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.15))}
  .room .win{position:absolute;right:16px;top:14px;width:120px;height:84px;border:4px solid var(--line);
    border-radius:10px;background:linear-gradient(#cfe-aff,#eaf6ff);opacity:.55}
  .logo-lockup{display:flex;align-items:center;gap:10px;font-family:var(--comic)}
  .logo-lockup .code{font-size:17px;color:var(--blue);border:3px solid var(--line);background:#fff;
    border-radius:8px;padding:1px 8px;box-shadow:var(--hard-sm)}
  .logo-lockup .word{font-size:clamp(20px,3.2vw,30px)} .logo-lockup .word b{color:var(--blue)}
  .room-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:15px}
  @media(max-width:700px){.room-cols{grid-template-columns:1fr}}
  .screen{background:#0f1a2e;border:5px solid var(--line);border-radius:14px;padding:13px;box-shadow:var(--hard);position:relative}
  .screen::after{content:"";position:absolute;left:14%;right:14%;bottom:-9px;height:8px;border-radius:8px;
    background:var(--blue);box-shadow:0 0 18px 2px var(--blue)}
  .screen .tb{display:flex;align-items:center;gap:6px;color:#9fb3d8;font-family:var(--comic);font-size:13px;margin-bottom:11px}
  .screen .tb i{width:11px;height:11px;border-radius:50%;display:block;border:2px solid rgba(0,0,0,.4)}
  .tb .r{background:#ff5f57}.tb .y{background:#febc2e}.tb .g{background:#28c840}
  .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  @media(max-width:640px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:420px){.proj-grid{grid-template-columns:1fr}}
  .proj-card{background:#17223c;border:2px solid #2b3a5e;border-radius:12px;padding:12px;color:#e3ecff;transition:.14s;cursor:default}
  .proj-card:hover{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,123,255,.35);transform:translateY(-3px)}
  .proj-card .pi{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:22px;
    background:#22304f;border:2px solid #34466e;margin-bottom:8px}
  .proj-card h4{font-family:var(--comic);font-size:14px;line-height:1.18}
  .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  .chip{background:#fff;border:4px solid var(--line);border-radius:14px;padding:9px 13px;text-align:center;
    box-shadow:var(--hard-sm);min-width:94px;font-family:var(--comic);font-size:12px}
  .chip .ce{display:block;font-size:23px;margin-bottom:2px}
  .banner{font-family:var(--comic);background:var(--blue);color:#fff;border:4px solid var(--line);border-radius:14px;
    padding:11px 22px;font-size:clamp(15px,2.2vw,20px);box-shadow:var(--hard);transform:rotate(-1deg)}
  .chat .row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
  .chat .av{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:14px;flex:0 0 auto;
    border:2px solid #34466e;background:#22304f}
  .chat .msg{background:#17223c;border:2px solid #2b3a5e;border-radius:10px;padding:8px 11px;color:#e3ecff;font-size:13px;line-height:1.35}
  .chat .msg.me{background:#1d2f55;border-color:#3a5188}

.tag{font-family:var(--comic);display:inline-block;background:var(--yellow);border:3px solid var(--line);
    border-radius:999px;padding:4px 14px;font-size:13px;box-shadow:var(--hard-sm)}
  .laptop{position:relative;width:100%;max-width:720px;margin:2px auto 0}
  .laptop .lid{background:#d7dbe6;border:6px solid var(--line);border-radius:16px 16px 5px 5px;padding:8px;box-shadow:var(--hard)}
  .laptop .cam{width:7px;height:7px;border-radius:50%;background:#aeb6c8;margin:0 auto 6px}
  .laptop .ui{background:#fff;border-radius:8px;overflow:hidden;border:1px solid #e3e6ee}
  .laptop .base{height:15px;background:linear-gradient(#cdd6e8,#9fabc4);border:6px solid var(--line);
    border-top:none;border-radius:0 0 18px 18px;width:120%;margin:-3px -10% 0;position:relative}
  .laptop .base::after{content:"";position:absolute;left:43%;right:43%;top:-1px;height:6px;background:#7c89a6;border-radius:0 0 8px 8px}
  .appwin{display:flex;flex-direction:column;min-height:262px;background:#fff;color:#2b2f3a;font-family:var(--font);font-size:11.5px}
  @media(max-width:520px){.appwin{font-size:10.5px}}
  .appwin .topbar{display:flex;align-items:center;gap:13px;background:#f6f7fa;border-bottom:1px solid #e6e8ef;padding:6px 12px;color:#5b6170;font-size:11px}
  .appwin .topbar .dots{display:flex;gap:5px}
  .appwin .topbar .dots i{width:9px;height:9px;border-radius:50%;display:block}
  .appwin .body{display:grid;grid-template-columns:150px 1fr;flex:1}
  @media(max-width:520px){.appwin .body{grid-template-columns:110px 1fr}}
  .appwin .side{background:#f3f4f7;border-right:1px solid #e6e8ef;padding:11px 9px;display:flex;flex-direction:column;gap:10px}
  .appwin .side .it{display:flex;gap:7px;align-items:center;color:#4b5160;line-height:1.1}
  .appwin .main{padding:12px;display:flex;flex-direction:column;gap:9px;background:#fff}
  .appwin .title{font-family:var(--comic);font-size:13px;color:#1f2430;display:flex;justify-content:space-between;align-items:center}
  .appwin .frow{background:#f7f8fa;border:1px solid #e6e8ef;border-radius:9px;padding:8px 11px;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .appwin .frow .fl{display:flex;gap:8px;align-items:center}
  .appwin .openbtn{border:1px solid #d6dae6;border-radius:7px;padding:3px 9px;font-size:10.5px;color:#3a4150;background:#fff}
  .appwin .changes{background:#f7f8fa;border:1px solid #e6e8ef;border-radius:9px;padding:9px 11px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
  .appwin .btns{display:flex;gap:7px;align-items:center}
  .appwin .b{border:1px solid #d6dae6;border-radius:7px;padding:4px 11px;font-family:var(--comic);font-size:11px;background:#fff;color:#3a4150;display:inline-flex;align-items:center;gap:5px}
  .appwin .b.dark{background:#1f2430;color:#fff;border-color:#1f2430}
  .appwin .inputbar{margin-top:auto;background:#fff;border:2px solid #cfd5e4;border-radius:11px;padding:9px 11px;display:flex;align-items:center;gap:9px;color:#8a93a6;flex-wrap:wrap}
  .appwin .inputbar .opt{margin-left:auto;display:flex;gap:8px;align-items:center;color:#5b6170;font-size:10.5px}
  .appwin .send{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;border:none;font-size:14px;flex:0 0 auto}
  .nbadge{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:var(--red);
    color:#fff;font-family:var(--comic);font-size:12px;border:2px solid var(--line);flex:0 0 auto;animation:pulse 1.4s infinite}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
  .legend{display:flex;flex-direction:column;gap:8px;max-width:600px;width:100%}
  .legend .li{display:flex;gap:11px;align-items:center;background:#fff;border:3px solid var(--line);border-radius:12px;
    padding:9px 13px;box-shadow:var(--hard-sm);font-weight:700;font-size:14px}
  .legend .li .ln{width:27px;height:27px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--comic);
    display:grid;place-items:center;flex:0 0 auto;border:2px solid var(--line)}

.os-bar,.nav{position:relative;z-index:40}
  .stage{position:relative;z-index:2}
  .toast{z-index:80}
  .bg-back{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
  .bg-back .orb{position:absolute;border-radius:50%;filter:blur(48px);opacity:.42;mix-blend-mode:multiply}
  .orb.o1{width:340px;height:340px;background:#7fb0ff;top:-80px;left:-60px;animation:orb1 18s ease-in-out infinite}
  .orb.o2{width:300px;height:300px;background:#ffd27f;bottom:-90px;right:-60px;animation:orb2 22s ease-in-out infinite}
  .orb.o3{width:260px;height:260px;background:#d8a8ff;top:42%;right:6%;animation:orb1 26s ease-in-out infinite}
  .orb.o4{width:240px;height:240px;background:#9affc8;bottom:10%;left:5%;animation:orb2 20s ease-in-out infinite}
  @keyframes orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(42px,30px)}}
  @keyframes orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,-26px)}}
  .grid-fx{position:absolute;inset:-2px;
    background-image:linear-gradient(rgba(47,123,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(47,123,255,.10) 1px,transparent 1px);
    background-size:46px 46px;opacity:.55;
    -webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 80%);
    mask-image:radial-gradient(circle at 50% 38%,#000,transparent 80%);
    animation:gridmove 16s linear infinite}
  @keyframes gridmove{from{background-position:0 0,0 0}to{background-position:46px 46px,46px 46px}}
  .bg-objects{position:fixed;inset:0;z-index:6;pointer-events:none;overflow:hidden}
  body.no-bg-objects .bg-objects,
  body.cover-clean .space-fx{display:none}
  .obj{position:absolute;pointer-events:auto;cursor:pointer}
  .obj .o-in{display:inline-block;opacity:.5;filter:drop-shadow(2px 3px 4px rgba(0,0,0,.16));transition:transform .15s,opacity .15s}
  .obj:hover .o-in{opacity:1;transform:scale(1.35)}
  .obj.hit .o-in{animation:popObj .45s}
  @keyframes popObj{0%{transform:scale(1)}40%{transform:scale(1.7) rotate(12deg)}100%{transform:scale(1)}}
  body.intro-bg-breathe .bg-objects .obj .o-in{animation:bgObjectBreathe 2.35s ease-in-out infinite;opacity:.9;will-change:transform,filter}
  body.intro-bg-breathe .bg-objects .obj:nth-child(2n) .o-in{animation-delay:.22s}
  body.intro-bg-breathe .bg-objects .obj:nth-child(3n) .o-in{animation-delay:.44s}
  body.intro-bg-breathe .bg-objects .obj:nth-child(4n) .o-in{animation-delay:.66s}
  @keyframes bgObjectBreathe{
    0%,100%{transform:scale(1);filter:drop-shadow(0 0 9px rgba(55,200,255,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.55))}
    50%{transform:scale(1.22);filter:drop-shadow(0 0 18px rgba(55,230,255,.82)) drop-shadow(0 0 14px rgba(155,92,255,.42)) drop-shadow(0 4px 8px rgba(0,0,0,.62))}
  }
  .obj.fa{animation:floatA 6s ease-in-out infinite}
  .obj.fb{animation:floatB 7.5s ease-in-out infinite}
  .obj.dr{animation:driftX 9s ease-in-out infinite}
  @keyframes floatA{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}
  @keyframes floatB{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(9px,-13px) rotate(8deg)}}
  @keyframes driftX{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
  @media(max-width:760px){.obj.sm-hide{display:none}}

:root{
    --ink:#eef3ff; --ink-soft:#a3b4dd; --line:#33457a; --card:#121b34;
    --blue:#37b6ff; --red:#ff4d8d; --yellow:#ffd23f; --green:#27e8a7;
    --purple:#a06bff; --orange:#ff9b4a; --pink:#ff6fae; --neon:#37e6ff;
    --hard:0 0 0 1px rgba(80,170,255,.22),0 16px 42px rgba(0,0,0,.55);
    --hard-sm:0 0 0 1px rgba(80,170,255,.18),0 8px 22px rgba(0,0,0,.5);
    --comic:'Segoe UI','Segoe UI Variable Display',system-ui,-apple-system,sans-serif;
    --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  }
  body{color:var(--ink);
    background:
      radial-gradient(1200px 600px at 82% -12%, rgba(55,120,255,.22), transparent 60%),
      radial-gradient(950px 520px at 8% 112%, rgba(160,107,255,.20), transparent 60%),
      linear-gradient(160deg,#070b18 0%,#0b1226 48%,#0a1020 100%);}
  /* layout breathing room (more modern, less cramped) */
  .slide{padding:38px 28px 18px}
  .inner{gap:22px;max-width:1000px}
  /* background fx */
  .grid-fx{background-image:linear-gradient(rgba(55,230,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(55,230,255,.10) 1px,transparent 1px);opacity:.5}
  .bg-back .orb{mix-blend-mode:screen;opacity:.4;filter:blur(60px)}
  .orb.o1{background:#2f7bff}.orb.o2{background:#ff7ac2}.orb.o3{background:#a06bff}.orb.o4{background:#27e8a7}
  /* bars */
  .os-bar{background:rgba(10,16,33,.72);backdrop-filter:blur(10px);border-bottom:1px solid rgba(80,150,255,.25)}
  .os-title{color:#eef3ff;text-shadow:0 0 12px rgba(55,200,255,.5)}
  .nav{background:rgba(10,16,33,.74);backdrop-filter:blur(10px);border-top:1px solid rgba(80,150,255,.25)}
  .slide-count{color:var(--ink-soft)}
  .progress-wrap{background:#0e1730;border:1px solid rgba(80,150,255,.3)}
  .progress-bar{background:linear-gradient(90deg,#27e8a7,#37b6ff,#a06bff);box-shadow:0 0 14px rgba(55,200,255,.7)}
  .xp-badge{background:linear-gradient(90deg,#ffd23f,#ff9b4a);color:#3a2700;border:1px solid #ffd98a;box-shadow:0 0 16px rgba(255,200,70,.5)}
  /* typography bigger + glow */
  h1{color:#fff;text-shadow:0 0 18px rgba(55,200,255,.55),0 0 44px rgba(160,107,255,.35);letter-spacing:.4px;font-size:clamp(36px,5.8vw,64px)}
  h2{color:#fff;text-shadow:0 0 16px rgba(55,200,255,.5);font-size:clamp(28px,4.4vw,46px)}
  .lead{color:var(--ink-soft);font-size:clamp(18px,2.4vw,23px);max-width:740px}
  .big-step{color:#eef3ff;font-size:clamp(20px,2.8vw,27px)}
  .note{color:#8fa3cf;font-size:14px}
  .hl{color:var(--neon);text-shadow:0 0 10px rgba(55,230,255,.6)}
  .hl-y{background:linear-gradient(90deg,#ffd23f,#ff9b4a);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0}
  .kicker{background:linear-gradient(90deg,#2f7bff,#a06bff);color:#fff;border:1px solid rgba(150,180,255,.5);box-shadow:0 0 18px rgba(80,120,255,.5);transform:none;font-size:13px;letter-spacing:.6px}
  /* glass neon cards */
  .card{background:linear-gradient(180deg,rgba(24,34,62,.92),rgba(15,23,44,.94));border:1px solid rgba(90,150,255,.28);border-radius:18px;color:var(--ink);box-shadow:var(--hard);padding:22px}
  .card:hover{transform:translateY(-5px);border-color:var(--neon);box-shadow:0 0 26px rgba(55,200,255,.35),0 24px 48px rgba(0,0,0,.55)}
  .card h3{color:#fff;font-size:19px} .card p{color:var(--ink-soft)}
  .card.tap.picked{background:linear-gradient(180deg,rgba(18,64,50,.95),rgba(11,42,33,.96));border-color:var(--green);box-shadow:0 0 26px rgba(39,232,167,.4)}
  .card.tap.picked::after{background:var(--green);border-color:#0b1226;color:#04120c}
  .bubble{background:linear-gradient(180deg,rgba(22,32,58,.95),rgba(14,22,44,.96));border:1px solid rgba(90,150,255,.35);color:#eef3ff;box-shadow:0 0 22px rgba(55,120,255,.3)}
  .bubble::after{border-top-color:rgba(90,150,255,.6)} .bubble::before{border-top-color:#16203a}
  .step{background:linear-gradient(180deg,rgba(22,32,58,.9),rgba(14,22,44,.92));border:1px solid rgba(90,150,255,.25);color:var(--ink);box-shadow:var(--hard-sm)}
  .step .n{background:linear-gradient(135deg,#37b6ff,#a06bff);border:none;box-shadow:0 0 14px rgba(55,150,255,.5);color:#021124}
  .step .t{color:#dfe8ff} .step .t b{color:var(--neon)}
  .check{background:linear-gradient(180deg,rgba(22,32,58,.9),rgba(14,22,44,.92));border:1px solid rgba(90,150,255,.25);color:#eef3ff;box-shadow:var(--hard-sm)}
  .check .box{border-color:rgba(120,160,255,.5);background:#0e1730}
  .check .check-text{flex:1}
  .codex-download{margin-left:auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;
    font-family:var(--comic);font-weight:900;color:#061227;background:linear-gradient(90deg,#37e6ff,#27e8a7,#ffd23f);
    border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:9px 15px;box-shadow:0 0 20px rgba(55,230,255,.32),0 8px 18px rgba(0,0,0,.22);
    transition:transform .12s,filter .12s}
  .codex-download:hover{filter:brightness(1.08) saturate(1.12);transform:translateY(-1px)}
  .codex-download:active{transform:translateY(1px)}
  @media(max-width:720px){.codex-download{width:100%;justify-content:center;margin:6px 0 0 44px}.check{flex-wrap:wrap}}
  .check.on{background:linear-gradient(180deg,rgba(18,64,50,.9),rgba(11,42,33,.92));border-color:var(--green)}
  .check.on .box{background:var(--green)}
  .filebox{background:linear-gradient(180deg,rgba(22,32,58,.9),rgba(14,22,44,.92));border:1px solid rgba(90,150,255,.25);box-shadow:var(--hard-sm)}
  .filebox code{color:var(--neon)} .filebox span{color:var(--ink-soft)}
  .tag{background:linear-gradient(90deg,#ffd23f,#ff9b4a);color:#3a2700;border:1px solid #ffd98a;box-shadow:0 0 16px rgba(255,200,70,.45)}
  .pickhint{background:rgba(22,32,58,.92);border:1px solid rgba(90,150,255,.35);color:#cdd9ff;box-shadow:var(--hard-sm)}
  .name-card{background:linear-gradient(145deg,rgba(18,30,62,.92),rgba(9,17,38,.94));border:1px solid rgba(90,150,255,.38);box-shadow:var(--hard-sm);color:#eaf3ff}
  .name-card label{color:#37e6ff;text-shadow:0 0 12px rgba(55,230,255,.45)}
  .name-card input{background:rgba(3,9,22,.68);border:1px solid rgba(90,150,255,.45);color:#fff}
  .style-card{border:1px solid rgba(90,150,255,.3);box-shadow:var(--hard-sm);color:#eef3ff}
  .style-card h4{color:#fff} .style-card .logo{border:1px solid rgba(120,160,255,.4)}
  .style-card.sel{outline:3px solid var(--neon);outline-offset:2px;box-shadow:0 0 22px rgba(55,200,255,.45)}
  .sc-game,.sc-study,.sc-cartoon,.sc-movie,.sc-folk{background:rgba(18,26,50,.9)}
  .prompt-box{background:linear-gradient(180deg,#0a1224,#0a0f1f);border:1px solid rgba(90,150,255,.35);box-shadow:0 0 26px rgba(55,120,255,.25);color:#cfe0ff}
  .copy-btn{background:linear-gradient(90deg,#37b6ff,#a06bff);color:#fff;border:none;box-shadow:0 0 16px rgba(55,150,255,.6)}
  .ph-title{color:var(--neon)}
  .chip{background:rgba(20,30,56,.92);border:1px solid rgba(90,150,255,.35);color:#eef3ff;box-shadow:var(--hard-sm)}
  .banner{background:linear-gradient(90deg,#2f7bff,#a06bff);border:none;box-shadow:0 0 24px rgba(80,120,255,.6);transform:none;color:#fff}
  .room{border:1px solid rgba(90,150,255,.3);box-shadow:0 0 32px rgba(55,120,255,.2);background:linear-gradient(160deg,rgba(20,30,58,.92),rgba(12,20,40,.96))}
  .room .win{background:linear-gradient(#16315a,#0e1f3c);opacity:.5}
  .logo-lockup .word{color:#fff} .logo-lockup .code{background:#0e1730;color:var(--neon);border-color:rgba(90,150,255,.5)}
  .screen{border:1px solid rgba(90,150,255,.45);box-shadow:0 0 30px rgba(55,150,255,.3)}
  .proj-card{background:rgba(18,28,54,.92);border-color:rgba(90,150,255,.3)}
  .proj-card:hover{border-color:var(--neon);box-shadow:0 0 18px rgba(55,200,255,.5)}
  .laptop .lid{background:#0e1730;border:1px solid rgba(90,150,255,.5);box-shadow:0 0 34px rgba(55,150,255,.35)}
  .laptop .base{background:linear-gradient(#22335c,#16223f);border:1px solid rgba(90,150,255,.4)}
  .laptop .base::after{background:#0c1530}
  .legend .li{background:rgba(20,30,56,.92);border:1px solid rgba(90,150,255,.3);color:#eef3ff;box-shadow:var(--hard-sm)}
  .cover-frame{border:1px solid rgba(90,150,255,.5);box-shadow:0 0 44px rgba(55,150,255,.35);border-radius:20px}
  /* buttons modern */
  .btn{border:none;border-radius:14px;box-shadow:0 0 16px rgba(0,0,0,.4)}
  .btn-prev{background:rgba(28,40,70,.95);color:#dfe8ff;border:1px solid rgba(90,150,255,.35)}
  .btn-next{background:linear-gradient(90deg,#37b6ff,#2f7bff);color:#fff;box-shadow:0 0 20px rgba(55,150,255,.6)}
  .nav .dot{background:#22335c;border:1px solid rgba(90,150,255,.45);color:#c7d5ff}
  .nav .dot.active{background:var(--neon);color:#061227;box-shadow:0 0 12px var(--neon)}
  .trouble details{background:rgba(30,26,52,.9);border:1px solid rgba(150,120,255,.35)}
  .trouble summary{color:#ffd98a} .trouble p{color:#cdb8ff}
  .burst{box-shadow:0 0 30px rgba(255,77,141,.5)}
  .trophy{filter:drop-shadow(0 0 20px rgba(255,210,60,.6))}
  /* bigger glowing live objects */
  .obj .o-in{opacity:.74;filter:drop-shadow(0 0 9px rgba(55,200,255,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.55))}
  body.intro-bg-breathe .bg-objects .obj .o-in{opacity:.94!important}
  .obj:hover .o-in{opacity:1;transform:scale(1.4)}

.slide{overflow:hidden;justify-content:center}
  .inner{transform-origin:center center;transition:transform .2s ease;will-change:transform}

/* ===== deeper space backdrop ===== */
  body{background:
    radial-gradient(1200px 600px at 82% -12%, rgba(55,120,255,.20), transparent 60%),
    radial-gradient(950px 520px at 8% 112%, rgba(160,107,255,.18), transparent 60%),
    radial-gradient(760px 540px at 50% 46%, rgba(20,46,104,.28), transparent 72%),
    linear-gradient(160deg,#04060f 0%,#070d1f 48%,#05080f 100%);}

  /* ===== wider layout: use the empty sides, break long vertical lists ===== */
  @media(min-width:1024px){
    .steps{max-width:920px !important;display:grid !important;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
    .check-list{max-width:920px !important;display:grid !important;grid-template-columns:1fr 1fr;gap:12px}
    .legend{max-width:900px !important;display:grid !important;grid-template-columns:1fr 1fr;gap:10px}
  }
  @media(min-width:1180px){
    .inner{max-width:1120px}
    .steps,.check-list{max-width:1040px !important}
    .legend{max-width:980px !important}
    .bubble,.lead,.prompt-box,.trouble{max-width:1000px !important}
  }
  @media(min-width:1500px){
    .inner{max-width:1300px}
    .steps,.check-list{max-width:1180px !important}
  }
  .step .t{font-size:17px}
  .check{font-size:17px}

  /* ===== bigger, clearer HUD / bars ===== */
  .os-title{font-size:22px}
  .xp-badge{font-size:17px;padding:7px 16px}
  .slide-count{font-size:18px;min-width:66px}
  .progress-wrap{height:20px;max-width:400px}
  .kicker{font-size:14px;padding:7px 18px}
  .nav .btn{font-size:18px;padding:13px 26px}
  .banner{font-size:clamp(16px,2.3vw,22px)}

  /* ===== toast: top placement + dark-theme contrast fix ===== */
  .toast{top:76px;bottom:auto;transform:translateX(-50%) translateY(-20px);
    background:linear-gradient(180deg,#101a33,#0b1226);color:#eaf3ff;
    border:1px solid rgba(90,150,255,.55);
    box-shadow:0 0 24px rgba(55,120,255,.45),0 10px 30px rgba(0,0,0,.5);
    font-size:17px}
  .toast.show{transform:translateX(-50%) translateY(0)}

  /* ===== animated space FX layer (behind cards, in the side gutters) ===== */
  .space-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .star{position:absolute;border-radius:50%;background:#eaf3ff;
    box-shadow:0 0 6px rgba(170,210,255,.9);animation:tw var(--d,3s) ease-in-out infinite}
  @keyframes tw{0%,100%{opacity:var(--o,.25);transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}

  .shoot{position:absolute;width:170px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,transparent,#bfe0ff,#fff);
    box-shadow:0 0 10px #9fd0ff;opacity:0;animation:shoot var(--sd,8s) linear infinite}
  @keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(28deg)}
    4%{opacity:1}20%{opacity:1}28%{opacity:0;transform:translate(460px,245px) rotate(28deg)}100%{opacity:0}}

  .planet{position:absolute;border-radius:50%;animation:drift 38s ease-in-out infinite}
  .planet::after{content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:inset -10px -8px 24px rgba(0,0,0,.55),0 0 34px rgba(80,150,255,.22)}
  @keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,-16px)}}

  .ship{position:absolute;width:64px;animation:flyR var(--fd,16s) linear infinite}
  .ship.lft{animation-name:flyL}
  @keyframes flyR{from{transform:translateX(-14vw)}to{transform:translateX(114vw)}}
  @keyframes flyL{from{transform:translateX(114vw) scaleX(-1)}to{transform:translateX(-14vw) scaleX(-1)}}
  .ship .laser{position:absolute;top:46%;left:60px;width:10px;height:3px;border-radius:3px;
    background:linear-gradient(90deg,#ff4d8d,transparent);box-shadow:0 0 9px #ff4d8d;
    opacity:0;animation:fire 1.7s ease-in-out infinite}
  @keyframes fire{0%,68%,100%{opacity:0;width:8px}80%,90%{opacity:1;width:42px}}

  .hero{position:absolute;width:84px;filter:drop-shadow(0 0 12px rgba(55,230,255,.6));
    animation:heroDash var(--hd,24s) linear infinite}
  @keyframes heroDash{from{transform:translate(-16vw,0) rotate(-6deg)}
    50%{transform:translate(52vw,-26px) rotate(-6deg)}
    to{transform:translate(120vw,0) rotate(-6deg)}}
  body.intro-bg-breathe .space-fx .planet,
  body.intro-bg-breathe .space-fx .ship,
  body.intro-bg-breathe .space-fx .hero{animation:spaceObjectBreathe 2.6s ease-in-out infinite!important;will-change:transform,filter}
  body.intro-bg-breathe .space-fx .planet:nth-of-type(2n),
  body.intro-bg-breathe .space-fx .ship:nth-of-type(2n),
  body.intro-bg-breathe .space-fx .hero:nth-of-type(2n){animation-delay:.35s!important}
  @keyframes spaceObjectBreathe{
    0%,100%{transform:scale(1);filter:drop-shadow(0 0 10px rgba(55,200,255,.45))}
    50%{transform:scale(1.12);filter:drop-shadow(0 0 22px rgba(55,230,255,.8)) drop-shadow(0 0 12px rgba(160,107,255,.45))}
  }

  @media(prefers-reduced-motion:reduce){
    .star,.shoot,.planet,.ship,.hero,.ship .laser,
    .orb,.grid-fx,.obj.fa,.obj.fb,.obj.dr,.float,.trophy{animation:none !important}
    .shoot,.ship,.hero{display:none}
  }

.modal-ov{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
    padding:20px;background:rgba(4,8,20,.74);backdrop-filter:blur(4px)}
  .modal-ov.show{display:flex;animation:mfade .18s ease}
  @keyframes mfade{from{opacity:0}to{opacity:1}}
  .modal{width:100%;max-width:640px;background:linear-gradient(180deg,#121d3a,#0b1226);
    border:2px solid rgba(90,150,255,.5);border-radius:18px;
    box-shadow:0 0 40px rgba(55,120,255,.4),0 24px 60px rgba(0,0,0,.6);
    padding:20px 20px 18px;color:#eaf3ff;animation:mpop .25s cubic-bezier(.2,1.3,.5,1)}
  @keyframes mpop{from{transform:scale(.9) translateY(10px);opacity:0}to{transform:none;opacity:1}}
  .modal .mh{display:flex;align-items:center;gap:10px;font-family:var(--comic);font-size:21px;line-height:1.15}
  .modal .mh .mi{font-size:28px;flex:0 0 auto}
  .modal .msub{color:#9fb3d8;font-size:13.5px;margin:6px 0 12px}
  .modal .mbox{background:#0a1224;border:1px solid rgba(90,150,255,.35);border-radius:12px;
    padding:14px;font-family:'Consolas','Courier New',monospace;font-size:13px;line-height:1.55;
    white-space:pre-wrap;max-height:44vh;overflow:auto;color:#cfe0ff}
  .idea-form{display:grid;gap:10px;margin-top:10px}
  .idea-form label{display:grid;gap:5px;font-family:var(--comic);font-weight:900;color:#37e6ff}
  .idea-form input,.idea-form textarea{width:100%;border:1px solid rgba(90,150,255,.45);border-radius:12px;
    background:#0a1224;color:#eaf3ff;padding:11px 12px;font:700 15px/1.35 var(--font);outline:none}
  .idea-form textarea{min-height:82px;resize:vertical}
  .idea-form input:focus,.idea-form textarea:focus{border-color:#37e6ff;box-shadow:0 0 0 3px rgba(55,230,255,.18)}
  .modal .mbtns{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap}
  .modal .mbtn{flex:1;min-width:170px;font-family:var(--comic);border:none;border-radius:13px;
    padding:14px 18px;font-size:16px;font-weight:700;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.12s}
  .modal .mbtn:active{transform:translateY(2px)}
  .modal .mbtn.go{background:linear-gradient(90deg,#37b6ff,#2f7bff);color:#fff;box-shadow:0 0 18px rgba(55,150,255,.6)}
  .modal .mbtn.go.done{background:linear-gradient(90deg,#27e8a7,#1fcf8f);color:#04120c;box-shadow:0 0 18px rgba(39,232,167,.6)}
  .modal .mbtn.close{flex:0 0 auto;min-width:120px;background:rgba(40,54,90,.92);color:#dfe8ff;border:1px solid rgba(90,150,255,.35)}
  @media(prefers-reduced-motion:reduce){.modal-ov.show,.modal{animation:none}}

/* cover slide = just the big picture; the title now lives in the top bar */
  .slide.cover{padding:8px 10px 6px}
  .slide.cover.active{animation:none;opacity:1;transform:none}
  .slide.cover .inner{gap:0;max-width:98vw}
  .slide.cover .cover-frame{max-width:100%}
  .slide.cover h1,.slide.cover .bubble,.slide.cover .note{display:none}

/* enlarge capped hero components so every slide fills the screen */
  .laptop{max-width:1150px}
  .room{max-width:1120px}
  .screen{max-width:1080px !important}
  .prompt-box{max-width:1080px !important}
  .filerow{max-width:1000px;margin:0 auto}
  .filebox{min-width:200px}
  .bubble{max-width:1040px}
  .burst{font-size:clamp(22px,3vw,34px)}
  #profileCard{max-width:1000px !important}
  .grid.g2{max-width:900px !important;margin:0 auto}
  #profileText{font-size:17px;line-height:1.9}

  /* per-slide section label + title now live in the top bar */
  .os-spacer{flex:1;display:flex;align-items:center;gap:10px;min-width:0;padding-left:14px;overflow:hidden}
  .os-kick{font-family:var(--comic);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
    background:linear-gradient(90deg,#2f7bff,#a06bff);color:#fff;padding:4px 12px;border-radius:999px;
    white-space:nowrap;flex:0 0 auto;box-shadow:0 0 12px rgba(80,120,255,.45)}
  .os-kick:empty{display:none}
  .os-h{font-family:var(--comic);font-size:19px;color:#eef3ff;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;min-width:0;text-shadow:0 0 10px rgba(55,200,255,.4)}
  .progress-wrap{max-width:260px}
  @media(max-width:760px){.os-h,.os-kick{display:none}}
  /* section label = compact badge in the bar; title stays in the slide body (compact) */
  .slide .kicker{display:none}        /* section now shown as the bar badge */
  .os-h{display:none}                  /* full title no longer in the bar */
  .os-kick{font-size:13px;padding:5px 14px}
  .slide h2{display:block;font-size:clamp(20px,2.8vw,32px);margin:0}

  /* secondary info cards: flat + compact (not the hero of the slide) */
  .grid.g2.mini{max-width:640px !important;gap:12px}
  .g2.mini .card{padding:11px 14px;box-shadow:none;background:rgba(18,26,50,.55);
    border:1px solid rgba(90,150,255,.22)}
  .g2.mini .card:hover{transform:none;box-shadow:none;border-color:rgba(90,150,255,.35)}
  .g2.mini .card .emoji{font-size:18px;margin-bottom:2px}
  .g2.mini .card h3{font-size:15px}
  .g2.mini .card p{font-size:12.5px;line-height:1.35}

  /* digital-disintegration transition */
  .slide.glitching{animation:slideGlitch .13s steps(2,end) 5}
  @keyframes slideGlitch{
    0%{transform:translate(0,0);filter:none}
    25%{transform:translate(-4px,1px);filter:hue-rotate(50deg) contrast(1.4)}
    50%{transform:translate(4px,-2px);filter:saturate(1.8)}
    75%{transform:translate(-2px,2px);filter:hue-rotate(-40deg)}
    100%{transform:translate(0,0);filter:none}
  }
  @media(prefers-reduced-motion:reduce){.slide.glitching{animation:none}}

  /* animation on/off toggle in the top bar */
  .anim-toggle{font-family:var(--comic);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
    background:linear-gradient(90deg,#27e8a7,#1fcf8f);color:#04120c;border:1px solid rgba(120,255,200,.5);
    border-radius:999px;padding:6px 14px;box-shadow:0 0 12px rgba(39,232,167,.4);flex:0 0 auto;transition:.12s}
  .anim-toggle:active{transform:translateY(1px)}
  .anim-toggle.off{background:rgba(40,54,90,.92);color:#cdd9ff;border-color:rgba(90,150,255,.4);box-shadow:none}
  .anim-toggle b{font-weight:800}
  .anim-toggle.breathe{animation:softBreathe 1.65s ease-in-out infinite}
  @keyframes softBreathe{0%,100%{transform:scale(1);box-shadow:0 0 12px rgba(39,232,167,.4)}50%{transform:scale(1.06);box-shadow:0 0 24px rgba(55,230,255,.66)}}
  .contents-btn{font-family:var(--comic);font-size:13px;font-weight:900;cursor:pointer;white-space:nowrap;
    color:#eaf3ff;background:rgba(28,40,70,.92);border:1px solid rgba(90,150,255,.38);
    border-radius:999px;padding:7px 14px;box-shadow:0 0 14px rgba(55,120,255,.25);display:none}
  .contents-btn:hover{border-color:var(--neon);box-shadow:0 0 20px rgba(55,200,255,.35)}
  @media(max-width:680px){.anim-toggle{display:none !important}}

  .slide.cover .inner{position:relative}
  .game-start{position:absolute;z-index:58;left:50%;top:16px;transform:translateX(-50%) scale(1);
    font-family:var(--comic);font-size:clamp(15px,1.9vw,24px);font-weight:900;letter-spacing:.2px;
    color:#211200;border:3px solid rgba(255,255,255,.82);border-radius:999px;padding:12px 26px;
    background:linear-gradient(90deg,#ffe53b 0%,#ff3f3f 42%,#28e66f 100%);
    box-shadow:0 0 22px rgba(255,218,60,.7),0 10px 28px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.25);
    cursor:pointer;text-shadow:0 1px 0 rgba(255,255,255,.35);animation:gamePulse 1.05s ease-in-out infinite}
  .game-start:hover{filter:saturate(1.18) brightness(1.06)}
  .game-start:active{transform:translateX(-50%) translateY(2px) scale(.97)}
  .game-start[hidden]{display:none}
  @keyframes gamePulse{
    0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 0 18px rgba(255,218,60,.65),0 10px 28px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.25)}
    50%{transform:translateX(-50%) scale(1.11);box-shadow:0 0 38px rgba(40,230,111,.9),0 10px 28px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.38)}
  }
  .game-layer{position:absolute;inset:0;z-index:57;pointer-events:none;overflow:hidden}
  .game-layer.active{pointer-events:none}
  .game-hud{position:absolute;z-index:59;left:50%;top:76px;transform:translateX(-50%);display:none;
    font-family:var(--comic);font-weight:900;color:#eaf2ff;background:rgba(7,13,30,.72);
    border:1px solid rgba(90,150,255,.55);border-radius:16px;padding:8px 16px;box-shadow:0 0 18px rgba(55,150,255,.35);white-space:nowrap}
  .game-hud .bad{color:#ff6d6d;margin-left:12px;text-shadow:0 0 12px rgba(255,80,80,.65)}
  .game-hud.show{display:block}
  .game-invite{position:absolute;z-index:60;min-width:150px;max-width:240px;padding:10px 14px;border-radius:15px;
    font-family:var(--comic);font-size:clamp(13px,1.35vw,18px);font-weight:900;color:#fff;
    background:linear-gradient(135deg,rgba(20,12,8,.92),rgba(72,22,6,.94));border:2px solid rgba(255,164,74,.75);
    box-shadow:0 0 22px rgba(255,88,30,.55),0 8px 24px rgba(0,0,0,.35);text-align:center;cursor:pointer;pointer-events:auto;
    user-select:none;transform:translate(-50%,-50%) rotate(var(--rot,0deg))}
  .game-invite::after{content:"";position:absolute;inset:-7px;border-radius:19px;border:1px solid rgba(255,90,40,.42);filter:blur(1px)}
  .game-invite.frozen{color:#dff7ff;background:linear-gradient(135deg,rgba(138,225,255,.92),rgba(38,92,180,.94));
    border-color:rgba(215,250,255,.95);box-shadow:0 0 26px rgba(105,218,255,.9),inset 0 0 18px rgba(255,255,255,.32)}
  .game-invite.frozen::before{content:"ICE";position:absolute;right:8px;top:-12px;color:#ecfbff;font-size:12px;letter-spacing:1px;text-shadow:0 0 10px #fff}
  .game-invite.evade{background:linear-gradient(135deg,rgba(54,24,96,.95),rgba(255,52,120,.92));border-color:rgba(255,142,200,.82);box-shadow:0 0 26px rgba(255,70,150,.7)}
  .game-invite.breaking{animation:inviteBreak .38s ease-out forwards}
  @keyframes inviteBreak{to{transform:translate(-50%,-50%) rotate(22deg) scale(.2);opacity:0;filter:brightness(1.8) saturate(1.7)}}
  .game-flash{position:absolute;z-index:61;pointer-events:none;font-family:var(--comic);font-weight:900;color:#ffe53b;text-shadow:0 0 14px rgba(255,255,255,.8);animation:flashPop .68s ease-out forwards}
  @keyframes flashPop{to{transform:translate(var(--gx),var(--gy)) scale(.2) rotate(var(--gr));opacity:0}}
  .gaming-win-screen{position:absolute;z-index:72;left:50%;top:50%;transform:translate(-50%,-50%) scale(.86);width:min(72vw,820px);
    aspect-ratio:16/9;border:8px solid #070b18;border-radius:24px;display:none;place-items:center;overflow:hidden;
    background:radial-gradient(circle at 50% 20%,rgba(255,80,50,.35),transparent 28%),linear-gradient(135deg,#120505,#230913 48%,#080914);
    box-shadow:0 0 42px rgba(255,70,45,.8),0 26px 70px rgba(0,0,0,.65),inset 0 0 0 3px rgba(255,255,255,.1)}
  .gaming-win-screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 7px);mix-blend-mode:screen;opacity:.35}
  .gaming-win-screen .gw-title{position:relative;font-family:var(--comic);font-size:clamp(44px,8vw,104px);font-weight:900;color:#ffef3f;
    text-shadow:0 0 10px #fff,0 0 26px #ff3f3f,5px 5px 0 #250000;text-align:center;line-height:.95}
  .gaming-win-screen .gw-sub{position:absolute;bottom:88px;font-family:var(--comic);font-size:clamp(18px,2.5vw,34px);font-weight:900;color:#fff;text-shadow:0 0 18px #ff3f3f}
  .gaming-win-screen .gw-actions{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:calc(100% - 48px)}
  .gaming-win-screen .gw-actions button,.game-modal button{font-family:var(--comic);font-size:clamp(15px,1.35vw,20px);font-weight:900;border:1px solid rgba(255,255,255,.28);border-radius:16px;
    color:#071126;background:linear-gradient(90deg,#ffd23f,#ff7a39,#27e8a7);padding:12px 20px;min-width:180px;cursor:pointer;box-shadow:0 0 22px rgba(255,210,63,.4)}
  .gaming-win-screen .gw-actions button:first-child{background:linear-gradient(90deg,#ffef65,#ff4d5e);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
  .slide.cover.gaming-won .cover-frame,.slide.game-cover.gaming-won .cover-frame{filter:brightness(.28) saturate(.7) blur(1.5px);transform:scale(.98);transition:.45s}
  .slide.cover.gaming-won .game-start,.slide.cover.gaming-won .game-hud,.slide.game-cover.gaming-won .game-start,.slide.game-cover.gaming-won .game-hud{display:none!important}
  .slide.cover.gaming-won .gaming-win-screen,.slide.game-cover.gaming-won .gaming-win-screen{display:grid;animation:gamingWinIn .5s cubic-bezier(.2,1.4,.45,1) both}
  @keyframes gamingWinIn{from{opacity:0;transform:translate(-50%,-50%) scale(.58) rotate(-4deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
  .game-modal-ov{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:24px;
    background:rgba(3,8,22,.72);backdrop-filter:blur(10px)}
  .game-modal-ov.show{display:flex}
  .game-modal{width:min(620px,92vw);border-radius:26px;padding:28px;background:linear-gradient(135deg,rgba(12,24,58,.98),rgba(22,12,45,.98));
    border:1px solid rgba(90,150,255,.65);box-shadow:0 0 36px rgba(55,150,255,.42),0 28px 80px rgba(0,0,0,.55);text-align:center}
  .game-modal h3{font-family:var(--comic);font-size:clamp(28px,4vw,48px);margin:0 0 12px;color:#fff;text-shadow:0 0 18px rgba(55,230,255,.7)}
  .game-modal p{font-size:clamp(17px,2vw,23px);line-height:1.45;color:#dbe8ff;margin:0 auto 22px;max-width:520px}
  .game-modal .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .game-modal .ghost{background:rgba(255,255,255,.08);color:#dbe8ff;box-shadow:none}
  .game-modal.win h3{color:#27e8a7;text-shadow:0 0 20px rgba(39,232,167,.8)}
  .intro-slide .inner{max-width:1120px;gap:14px}
  .intro-slide h2{font-size:clamp(34px,4.5vw,56px);line-height:1;text-shadow:0 0 12px rgba(255,255,255,.65),0 0 26px rgba(55,230,255,.35)}
  .intro-slide .lead{font-size:clamp(17px,1.8vw,23px);line-height:1.35;max-width:760px;margin:2px auto 8px;color:#dce8ff;text-align:center}
  .intro-stage{width:min(1050px,94vw);display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
  @media(max-width:880px){.intro-stage{grid-template-columns:1fr}}
  .intro-lab,.intro-guide,.intro-next{position:relative;border:1px solid rgba(80,150,255,.48);border-radius:24px;
    background:linear-gradient(145deg,rgba(15,27,58,.88),rgba(9,17,38,.92));box-shadow:0 0 30px rgba(55,150,255,.18),inset 0 0 0 1px rgba(255,255,255,.04)}
  .intro-lab{min-height:210px;padding:24px;overflow:hidden}
  .intro-lab::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 24% 28%,rgba(39,232,167,.18),transparent 25%),radial-gradient(circle at 82% 70%,rgba(155,92,255,.18),transparent 26%);pointer-events:none}
  .intro-lab h3,.intro-guide h3{position:relative;font-family:var(--comic);font-size:clamp(22px,2.5vw,34px);color:#fff;text-shadow:0 0 14px rgba(55,230,255,.55);margin-bottom:8px}
  .intro-lab p,.intro-guide p,.intro-next{position:relative;color:#cfdcff;font-size:clamp(15px,1.45vw,19px);line-height:1.38;font-weight:700}
  .intro-live.obj{position:absolute!important;left:var(--x)!important;top:var(--y)!important;width:96px;height:96px;display:grid;place-items:center;
    z-index:6;border-radius:26px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 28px var(--glow),0 14px 26px rgba(0,0,0,.26);font-size:48px;cursor:grab;animation:introFloat 3.2s ease-in-out infinite}
  .intro-live.obj:nth-child(2){animation-delay:.45s}.intro-live.obj:nth-child(3){animation-delay:.9s}
  .intro-live.obj::after{content:attr(data-tip);position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);white-space:nowrap;
    font-family:var(--comic);font-size:12px;color:#eaf2ff;background:rgba(4,10,24,.76);border:1px solid rgba(120,190,255,.35);border-radius:999px;padding:4px 10px}
  @keyframes introFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(4deg)}}
  .intro-guide{padding:22px;display:grid;gap:14px}
  .intro-rule{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(120,190,255,.22)}
  .intro-rule .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:linear-gradient(135deg,#37e6ff,#9b5cff);box-shadow:0 0 18px rgba(55,230,255,.35)}
  .intro-copy-demo{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .intro-slide .copy-btn{position:static;border-radius:16px;padding:12px 18px;background:linear-gradient(90deg,#37e6ff,#9b5cff);color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:0 0 20px rgba(55,150,255,.36)}
  .intro-next{width:min(900px,92vw);padding:16px 22px;text-align:center}
  .intro-slide.active .intro-lab,
  .intro-slide.active .intro-guide,
  .intro-slide.active .intro-rule,
  .intro-slide.active .intro-next{animation:introBreathe 2.8s ease-in-out infinite;will-change:transform,box-shadow,filter}
  .intro-slide.active .intro-rule .ico,
  .intro-slide.active .copy-btn{animation:introObjectBreathe 2.25s ease-in-out infinite;will-change:transform,box-shadow,filter}
  .intro-slide.active .intro-guide{animation-delay:.18s}
  .intro-slide.active .intro-rule:nth-child(2){animation-delay:.28s}
  .intro-slide.active .intro-rule:nth-child(3){animation-delay:.46s}
  .intro-slide.active .copy-btn{animation-delay:.62s;animation-duration:2.15s}
  .intro-slide.active .intro-next{animation-delay:.72s}
  .intro-slide.active .intro-live.obj{animation:introBreatheFloat 2.35s ease-in-out infinite}
  .intro-live.obj.pageobj{animation:introBreatheFloat 2.8s ease-in-out infinite!important;z-index:8;cursor:grab}
  .intro-live.obj.pageobj:nth-child(1){animation-duration:3.1s;animation-delay:0s}
  .intro-live.obj.pageobj:nth-child(2){animation-duration:2.5s;animation-delay:.5s}
  .intro-live.obj.pageobj:nth-child(3){animation-duration:3.5s;animation-delay:1s}
  .intro-slide.active .intro-live.obj:nth-child(2){animation-delay:.32s}
  .intro-slide.active .intro-live.obj:nth-child(3){animation-delay:.64s}
  .intro-live.obj.pageobj svg{transform-origin:center;transform-box:fill-box}
  .intro-live.obj.pageobj.corner-spin svg{animation:cornerSpinReturn 5s cubic-bezier(.08,.92,.18,1) both}
  @keyframes cornerSpinReturn{
    0%{transform:rotate(0deg)}
    12%{transform:rotate(900deg)}
    32%{transform:rotate(1560deg)}
    58%{transform:rotate(1980deg)}
    82%{transform:rotate(2130deg)}
    100%{transform:rotate(2160deg)}
  }
  @keyframes introBreathe{
    0%,100%{transform:scale(1);filter:brightness(1);box-shadow:0 0 30px rgba(55,150,255,.18),inset 0 0 0 1px rgba(255,255,255,.04)}
    50%{transform:scale(1.025);filter:brightness(1.12);box-shadow:0 0 34px rgba(55,230,255,.34),0 0 18px rgba(155,92,255,.2),inset 0 0 0 1px rgba(255,255,255,.08)}
  }
  @keyframes introObjectBreathe{
    0%,100%{transform:scale(1);filter:brightness(1)}
    50%{transform:scale(1.08);filter:brightness(1.18)}
  }
  @keyframes introBreatheFloat{
    0%,100%{transform:translateY(0) rotate(-3deg) scale(1);filter:brightness(1)}
    50%{transform:translateY(-12px) rotate(4deg) scale(1.09);filter:brightness(1.18)}
  }
  .toc-slide .inner{max-width:1120px;gap:12px}
  .toc-slide h2{font-size:clamp(32px,4.2vw,52px)}
  .toc-slide .lead{font-size:clamp(16px,1.8vw,21px);max-width:850px;line-height:1.3}
  .toc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(1060px,94vw)}
  @media(max-width:980px){.toc-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.toc-grid{grid-template-columns:1fr}}
  .toc-card{min-height:116px;border:1px solid rgba(90,150,255,.35);border-radius:22px;padding:15px;text-align:left;cursor:pointer;
    background:linear-gradient(145deg,rgba(18,30,62,.92),rgba(9,17,38,.94));box-shadow:0 0 24px rgba(55,120,255,.16);
    transition:transform .14s,border-color .14s,box-shadow .14s}
  .toc-card:hover{transform:translateY(-5px);border-color:var(--neon);box-shadow:0 0 28px rgba(55,200,255,.36)}
  .toc-card.visited{border-color:rgba(39,232,167,.82);background:linear-gradient(145deg,rgba(35,95,76,.92),rgba(14,54,48,.95));box-shadow:0 0 28px rgba(39,232,167,.28),inset 0 0 0 1px rgba(210,255,235,.08)}
  .toc-card.visited .num{background:linear-gradient(90deg,#b8ffd8,#27e8a7);color:#06351f}
  .toc-card.visited h3{color:#eafff2}
  .toc-card.visited p{color:#d5ffe7}
  .toc-card .num{font-family:var(--comic);font-size:13px;color:#061227;background:linear-gradient(90deg,#37e6ff,#27e8a7);
    border-radius:999px;padding:4px 10px;font-weight:900}
  .toc-card .ico{display:block;font-size:30px;margin:8px 0 5px;filter:drop-shadow(0 0 10px rgba(55,230,255,.35))}
  .toc-card h3{font-family:var(--comic);font-size:18px;color:#fff;margin:0 0 4px}
  .toc-card p{font-size:13px;line-height:1.28;color:#b9c8ec;font-weight:700}
  .toc-note{width:min(780px,90vw);text-align:center;color:#cfdcff;background:rgba(12,22,46,.72);
    border:1px solid rgba(90,150,255,.28);border-radius:18px;padding:10px 16px;font-weight:800;font-size:14px}
  .toc-result-slide h2{font-size:clamp(36px,5vw,68px);color:#fff;text-shadow:0 0 18px rgba(55,230,255,.9),0 0 34px rgba(160,107,255,.55)}
  .toc-result-slide .lead b{color:#37e6ff}
  .vibe-card h3{font-size:17px;line-height:1.12}
  .vibe-green{color:#27e8a7;text-shadow:0 0 10px rgba(39,232,167,.42)}
  .video-slide .inner{max-width:1120px;gap:14px}
  .video-frame{width:min(1120px,94vw);display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:stretch}
  .prompt-window,.result-window,.sketch-page{border:1px solid rgba(90,150,255,.38);border-radius:22px;background:linear-gradient(145deg,rgba(15,27,58,.92),rgba(9,17,38,.94));box-shadow:0 0 28px rgba(55,150,255,.2);padding:18px;position:relative;overflow:hidden}
  .prompt-window{min-height:360px}
  .prompt-title{font-family:var(--comic);font-weight:900;color:#37e6ff;margin-bottom:12px}
  .prompt-text{font-family:Consolas,'Courier New',monospace;white-space:pre-wrap;color:#d9e6ff;line-height:1.45;font-size:15px;background:rgba(3,9,22,.58);border:1px solid rgba(120,190,255,.24);border-radius:16px;padding:14px}
  .prompt-text.copyable{max-height:260px;overflow:auto;cursor:copy}
  .prompt-text.copyable:hover{border-color:var(--neon);box-shadow:0 0 18px rgba(55,230,255,.22)}
  .send-prompt{margin-top:14px;border:0;border-radius:999px;padding:12px 18px;font-family:var(--comic);font-weight:900;color:#071126;background:linear-gradient(90deg,#ffd23f,#ff7a39,#27e8a7);box-shadow:0 0 22px rgba(255,210,63,.35);cursor:pointer}
  .codex-fetch-cloud{position:fixed;z-index:260;left:50%;top:82px;transform:translate(-50%,-18px) scale(.92);opacity:0;pointer-events:none;
    width:min(740px,88vw);padding:18px 24px 20px;border-radius:36px;background:linear-gradient(110deg,#37e6ff,#27e8a7 42%,#ffd23f);
    color:#061227;font-family:var(--comic);font-weight:1000;text-align:center;box-shadow:0 0 34px rgba(55,230,255,.65),0 18px 48px rgba(0,0,0,.38);
    text-shadow:0 1px 0 rgba(255,255,255,.55);transition:opacity .22s,transform .22s}
  .codex-fetch-cloud.show{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
  .codex-fetch-cloud::before,.codex-fetch-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit;filter:brightness(1.04)}
  .codex-fetch-cloud::before{width:54px;height:54px;left:70px;bottom:-18px}
  .codex-fetch-cloud::after{width:30px;height:30px;left:38px;bottom:-42px;opacity:.9}
  .codex-fetch-cloud .big{display:block;font-size:clamp(23px,2.4vw,34px);line-height:1.08}
  .codex-fetch-cloud .small{display:block;margin-top:7px;font-size:clamp(14px,1.35vw,18px);line-height:1.25;color:#10304a}
  .codex-fetch-cloud button{position:absolute;right:14px;top:10px;border:0;border-radius:999px;width:34px;height:34px;background:rgba(6,18,39,.14);color:#061227;font-family:var(--comic);font-size:20px;font-weight:1000;cursor:pointer}
  .result-window{min-height:360px;display:grid;place-items:center}
  .video-pop{animation:videoPop .75s cubic-bezier(.2,1.55,.45,1) both}
  .idea-cloud{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:min(920px,90vw);
    padding:18px 32px;border-radius:999px;background:linear-gradient(90deg,#37e6ff,#a06bff,#ff4d8d,#ffd23f);
    color:#061227!important;font-family:var(--comic);font-size:clamp(28px,4vw,50px)!important;line-height:1.08;
    box-shadow:0 0 24px rgba(55,230,255,.7),0 0 54px rgba(255,77,141,.35),0 16px 42px rgba(0,0,0,.35);
    text-shadow:0 1px 0 rgba(255,255,255,.55);position:relative;isolation:isolate;animation:cloudPop 1s cubic-bezier(.2,1.45,.45,1) both}
  .idea-cloud::before,.idea-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit;z-index:-1;filter:brightness(1.08)}
  .idea-cloud::before{width:54px;height:54px;left:38px;bottom:-20px}
  .idea-cloud::after{width:34px;height:34px;left:15px;bottom:-42px;opacity:.9}
  @keyframes cloudPop{0%{opacity:0;transform:translateY(18px) scale(.86)}70%{transform:translateY(-3px) scale(1.04)}100%{opacity:1;transform:none}}
  .thinking-slide .inner{max-width:1380px;gap:10px}
  .thinking-layout{width:min(1300px,96vw);display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:18px;align-items:stretch}
  .thinking-frame{width:100%;grid-template-columns:330px minmax(0,1fr)}
  .thinking-frame .prompt-window,.thinking-frame .result-window{min-height:452px}
  .thinking-frame .prompt-text{font-size:16px;line-height:1.5}
  .thinking-frame .wire-page{min-height:414px;padding:20px}
  .thinking-frame .wire-box{font-size:14px}
  .side-thought{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    width:170px;min-height:452px;padding:22px 15px;border-radius:48% 42% 50% 45% / 38% 50% 42% 55%;
    background:radial-gradient(circle at 28% 18%,#fff8a8 0 12%,transparent 13%),linear-gradient(180deg,#27e8a7,#37e6ff 44%,#a06bff 72%,#ff4d8d);
    color:#061227!important;font-family:var(--comic);box-shadow:0 0 26px rgba(39,232,167,.8),0 0 60px rgba(55,230,255,.42),0 18px 44px rgba(0,0,0,.35);
    text-shadow:0 1px 0 rgba(255,255,255,.55);animation:cloudPop 1s cubic-bezier(.2,1.45,.45,1) both;cursor:grab;user-select:none;position:relative}
  .side-thought:active{cursor:grabbing}
  .side-thought.user-moved{position:fixed;z-index:150}
  .side-thought .bulb{font-size:42px}
  .side-thought .tagline{font-size:20px;font-weight:1000;letter-spacing:.04em}
  .side-thought .main-thought{font-size:18px;font-weight:1000;line-height:1.08;text-align:center;color:#033d25}
  .side-thought .word{font-size:27px;font-weight:1000;line-height:1}
  .side-thought .arr{font-size:30px;font-weight:1000;transform:rotate(90deg)}
  .thought-add{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.75);background:#ffd23f;
    color:#061227;font-family:var(--comic);font-size:28px;font-weight:1000;line-height:1;cursor:pointer;box-shadow:0 0 22px rgba(255,210,63,.85)}
  .thought-add:hover{transform:scale(1.08) rotate(6deg)}
  @media(max-width:980px){.thinking-layout{grid-template-columns:1fr}.side-thought{width:100%;min-height:auto;flex-direction:row;border-radius:999px}.side-thought .arr{transform:none}}
  .video-frame .result-window .video-pop{animation:none;opacity:.24;transform:scale(.92);filter:grayscale(.45) brightness(.72)}
  .video-frame.prompt-sent .result-window .video-pop{animation:videoPop .75s cubic-bezier(.2,1.55,.45,1) both;opacity:1;transform:none;filter:none}
  @keyframes videoPop{from{transform:scale(.82) translateY(18px);opacity:0}to{transform:none;opacity:1}}
  .paper-idea{width:min(760px,84vw);min-height:390px;background:#fbf7e8;color:#18213a;border-radius:18px;border:1px solid #eadfbf;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:34px;display:grid;place-items:center;text-align:center;transform:rotate(-1deg)}
  .paper-idea h3{font-family:'Comic Sans MS','Segoe UI',cursive;font-size:clamp(34px,4.2vw,58px);line-height:1.12;color:#18213a}
  .cover-result{width:min(720px,100%);border-radius:20px;overflow:hidden;border:1px solid rgba(90,150,255,.45);box-shadow:0 0 34px rgba(55,150,255,.34);background:#071126}
  .cover-result img{display:block;width:100%;height:auto}
  .wire-page{width:min(780px,88vw);min-height:410px;background:#fff;border-radius:22px;padding:24px;color:#13203b;display:grid;gap:14px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
  .result-window .wire-page{width:100%;min-height:360px;box-shadow:none}
  .wire-head{height:56px;border-radius:16px;background:#dff4ff;display:flex;align-items:center;padding:0 18px;font-weight:900;color:#12375a}
  .wire-note{border-radius:16px;background:#fff4c7;color:#29324d;padding:12px 16px;font-family:var(--comic);font-weight:900;box-shadow:0 8px 18px rgba(255,210,63,.18)}
  .wire-body{display:grid;grid-template-columns:210px 1fr;gap:14px;align-items:stretch}
  .folder-list{display:grid;gap:8px}
  .folder-item{display:flex;align-items:center;gap:8px;border-radius:12px;background:#f5fbff;border:2px solid #d4e9ff;padding:9px 10px;font-family:var(--comic);font-weight:900;color:#18304d;font-size:13px}
  .folder-item .folder-ico{font-size:20px;filter:drop-shadow(0 4px 6px rgba(255,190,55,.35))}
  .folder-open-card{cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}
  .folder-open-card:hover,.folder-open-card:focus-visible{transform:translateY(-4px);border-color:#27e8a7!important;box-shadow:0 0 30px rgba(39,232,167,.35),0 18px 42px rgba(0,0,0,.32);outline:none}
  .wire-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .wire-box{border:3px dashed #8dbdf5;border-radius:16px;min-height:98px;padding:12px;background:#f6fbff;font-weight:800}
  .snapshot-site{width:min(760px,86vw);min-height:400px;border-radius:26px;background:linear-gradient(145deg,#071126,#111b3a 55%,#29194f);border:1px solid rgba(90,150,255,.45);box-shadow:0 0 36px rgba(55,150,255,.32);position:relative;overflow:hidden;padding:24px}
  .snap-ray{position:absolute;width:170px;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,#37e6ff,#ff4d8d,transparent);transform:rotate(22deg);opacity:.75}
  .snap-ship{position:absolute;font-size:42px;filter:drop-shadow(0 0 12px rgba(55,230,255,.65))}
  .snap-card{position:absolute;border:1px solid rgba(90,150,255,.35);border-radius:18px;background:rgba(14,25,55,.88);padding:14px;color:#dce8ff;font-weight:900}
  .mega-keyboard{font-size:112px;filter:drop-shadow(0 0 26px rgba(55,230,255,.8));animation:levitateBig 2.4s ease-in-out infinite}
  .mega-keyboard.breathing{animation:levitateBig 2.4s ease-in-out infinite, keyboardPulse 1.25s ease-in-out infinite}
  .demo-live-set{width:100%;min-height:360px;position:relative}
  .demo-live-object{cursor:grab;user-select:none;position:relative;z-index:8}
  .demo-live-object::after{content:"prompt";position:absolute;right:-34px;bottom:-18px;border:1px solid rgba(120,190,255,.45);border-radius:999px;
    padding:4px 9px;background:rgba(4,10,24,.78);color:#dff6ff;font-family:var(--comic);font-size:12px;box-shadow:0 0 14px rgba(55,230,255,.26)}
  .demo-live-object:active{cursor:grabbing}
  .demo-shape{position:absolute;display:grid;place-items:center;width:104px;height:104px;border-radius:28px;font-size:60px;
    background:linear-gradient(145deg,rgba(55,230,255,.22),rgba(160,107,255,.18));border:1px solid rgba(120,190,255,.34);
    box-shadow:0 0 28px rgba(55,230,255,.22),inset 0 0 18px rgba(255,255,255,.06);animation:levitateBig 2.4s ease-in-out infinite, keyboardPulse 1.25s ease-in-out infinite}
  .demo-shape.keyboard{left:42%;top:35%;font-size:78px}
  .demo-shape.rocket{left:18%;top:18%;animation-delay:.15s}
  .demo-shape.gamepad{right:17%;top:24%;animation-delay:.35s;background:linear-gradient(145deg,rgba(255,210,63,.28),rgba(255,77,141,.24))}
  .demo-shape.gem{left:30%;bottom:14%;animation-delay:.55s;background:linear-gradient(145deg,rgba(39,232,167,.3),rgba(55,230,255,.2))}
  @keyframes levitateBig{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(3deg)}}
  @keyframes keyboardPulse{0%,100%{filter:drop-shadow(0 0 20px rgba(55,230,255,.68));opacity:1}50%{filter:drop-shadow(0 0 38px rgba(39,232,167,.95));opacity:.92}}
  .video-controls{width:min(840px,86vw);display:flex;align-items:center;justify-content:center;gap:12px}
  .video-pause{width:42px;height:42px;border:1px solid rgba(90,150,255,.45);border-radius:50%;display:grid;place-items:center;
    background:rgba(14,26,56,.92);color:#eaf3ff;font-family:var(--comic);font-weight:900;font-size:18px;cursor:pointer;
    box-shadow:0 0 18px rgba(55,150,255,.28);transition:.14s}
  .video-pause:hover{border-color:var(--neon);box-shadow:0 0 22px rgba(55,230,255,.42);transform:scale(1.05)}
  .video-pause:disabled{opacity:.45;cursor:default;transform:none}
  .video-scrub{flex:1;height:22px;border-radius:999px;background:rgba(8,16,34,.86);border:1px solid rgba(90,150,255,.38);position:relative;cursor:pointer;box-shadow:inset 0 0 12px rgba(0,0,0,.45)}
  .video-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,#27e8a7,#37e6ff,#a06bff)}
  .video-knob{position:absolute;left:0;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 16px rgba(55,230,255,.9);transform:translate(-50%,-50%)}
  .video-caption{font-size:13px;color:#aebfe8;font-weight:800}
  @media(max-width:880px){.video-frame{grid-template-columns:1fr}.prompt-window{min-height:auto}}

.draggable-fun{touch-action:none}
  .obj.draggable-fun.user-moved{animation:none!important}
  .draggable-fun.is-dragging{z-index:120!important;transition:none!important;filter:drop-shadow(0 18px 26px rgba(0,0,0,.35))}
  .obj.draggable-fun.is-flinging,.demo-live-object.draggable-fun.is-flinging{z-index:118!important;animation:none!important;filter:drop-shadow(0 18px 26px rgba(0,0,0,.35)) brightness(1.12)}
  .draggable-fun.crashing{animation:funCrash .62s cubic-bezier(.2,1.4,.45,1) both!important}
  .obj.respawn-vanish .o-in{animation:objVanish .95s cubic-bezier(.2,1.4,.45,1) forwards!important}
  .obj.respawn-born .o-in{animation:objBorn .82s cubic-bezier(.2,1.55,.45,1) forwards!important}
  @keyframes funCrash{
    0%{filter:brightness(1);transform:translate(var(--drag-x,0px),var(--drag-y,0px)) rotate(0) scale(1)}
    30%{filter:brightness(1.35) saturate(1.4);transform:translate(calc(var(--drag-x,0px) + 8px),calc(var(--drag-y,0px) - 12px)) rotate(-9deg) scale(1.14)}
    62%{filter:brightness(1.1) saturate(1.1);transform:translate(calc(var(--drag-x,0px) - 10px),calc(var(--drag-y,0px) + 18px)) rotate(16deg) scale(.84)}
    100%{filter:brightness(1);transform:translate(var(--drag-x,0px),var(--drag-y,0px)) rotate(0) scale(1)}
  }
  @keyframes objVanish{
    0%{transform:scale(1) rotate(0);opacity:1;filter:brightness(1)}
    28%{transform:scale(1.45) rotate(-10deg);opacity:1;filter:brightness(1.8) saturate(1.8)}
    68%{transform:scale(.34) rotate(24deg);opacity:.36;filter:brightness(2.2) saturate(2)}
    100%{transform:scale(.04) rotate(80deg);opacity:0;filter:brightness(2.5) saturate(2)}
  }
  @keyframes objBorn{
    0%{transform:scale(.05) rotate(-30deg);opacity:0;filter:brightness(2.2)}
    54%{transform:scale(1.28) rotate(9deg);opacity:1;filter:brightness(1.6) saturate(1.5)}
    100%{transform:scale(1) rotate(0);opacity:1;filter:brightness(1)}
  }
  .crash-piece{position:fixed;z-index:140;pointer-events:none;font-weight:900;text-shadow:0 0 14px rgba(255,255,255,.9);animation:pieceFly 1.18s ease-out forwards}
  .crash-laser{position:fixed;z-index:139;left:var(--lx);top:var(--ly);width:var(--ll);height:3px;border-radius:999px;pointer-events:none;
    background:linear-gradient(90deg,rgba(55,230,255,0),rgba(55,230,255,.95),#fff,rgba(255,77,141,.9),rgba(255,77,141,0));
    box-shadow:0 0 12px rgba(55,230,255,.9),0 0 20px rgba(255,77,141,.55);transform:rotate(var(--lr));animation:laserBurst .72s ease-out forwards}
  @keyframes pieceFly{to{transform:translate(var(--px),var(--py)) rotate(var(--pr)) scale(.12);opacity:0}}
  @keyframes laserBurst{0%{transform:rotate(var(--lr)) scaleX(.05);opacity:0}18%{opacity:1}100%{transform:rotate(var(--lr)) scaleX(1);opacity:0}}