/* ══════════════════════════════════════════════════════════════
    terminal portfolio — single screen, everything inside the TUI
    16 colour schemes, cos i like switching themes at like 3am lol

    note to future me: the :target hack in narrow didn't work, gave up
    also some css vars are unused, couldn't be bothered to clean
    ══════════════════════════════════════════════════════════════ */

/* ── themes: 16 palettes, dracula nord gruvbox monokai solarized one dark
    tokyo night catppuccin rose pine everforest kanagawa github + 3 originals
    each one defines the full variable set so switching is instant no reload ── */

:root, body[data-theme="harness"]{
   --bg:#0a0a0b; --bg-row:#161619; --bg-panel:#1b1b1f; --bg-code:#0f0f13;
   --line:#232327; --line2:#2e2e34;
   --fg:#e7e7ea; --dim:#8b8b95; --dimmer:#5c5c66;
   --blue:#3b82f6; --blue-soft:#6ea8ff; --amber:#f59e0b;
   --green:#4ade80; --red:#f87171; --violet:#a78bfa;
  }
body[data-theme="abyss"]{
   --bg:#05070d; --bg-row:#0d1220; --bg-panel:#101728; --bg-code:#070b14;
   --line:#182036; --line2:#23304d; --fg:#dfe8ff; --dim:#7f8db0; --dimmer:#4e5a78;
   --blue:#38bdf8; --blue-soft:#7dd3fc; --amber:#fbbf24; --violet:#c084fc;
   --green:#4ade80; --red:#f87171;
  }
body[data-theme="ember"]{
   --bg:#0c0806; --bg-row:#1a1310; --bg-panel:#1f1713; --bg-code:#120d0a;
   --line:#2a1f19; --line2:#3a2b23; --fg:#f0e6e0; --dim:#9c8a80; --dimmer:#6a5a52;
   --blue:#fb923c; --blue-soft:#fdba74; --amber:#facc15; --violet:#f0abfc;
   --green:#4ade80; --red:#f87171;
  }
body[data-theme="dracula"]{
   --bg:#282a36; --bg-row:#21222c; --bg-panel:#2b2d40; --bg-code:#1e1f29;
   --line:#33344a; --line2:#44475a; --fg:#f8f8f2; --dim:#6272a4; --dimmer:#4c5274;
   --blue:#bd93f9; --blue-soft:#d3c2ff; --amber:#ffb86c; --violet:#ff79c6;
   --green:#50fa7b; --red:#ff5555;
  }
body[data-theme="nord"]{
   --bg:#2e3440; --bg-row:#3b4252; --bg-panel:#434c5e; --bg-code:#272e38;
   --line:#434c5e; --line2:#4c566a; --fg:#eceff4; --dim:#7b88a1; --dimmer:#5b677f;
   --blue:#81a1c1; --blue-soft:#88c0d0; --amber:#ebcb8b; --violet:#b48ead;
   --green:#a3be8c; --red:#bf616a;
  }
body[data-theme="gruvbox"]{
   --bg:#282828; --bg-row:#32302f; --bg-panel:#3c3836; --bg-code:#1d2021;
   --line:#504945; --line2:#665c54; --fg:#ebdbb2; --dim:#928374; --dimmer:#7c6f64;
   --blue:#83a598; --blue-soft:#a8c8d8; --amber:#fabd2f; --violet:#d3869b;
   --green:#b8bb26; --red:#fb4934;
  }
body[data-theme="monokai"]{
   --bg:#272822; --bg-row:#3e3d32; --bg-panel:#49483e; --bg-code:#1e1f1c;
   --line:#49483e; --line2:#605c52; --fg:#f8f8f2; --dim:#75715e; --dimmer:#5f5c52;
   --blue:#66d9ef; --blue-soft:#9be9ef; --amber:#e6db74; --violet:#ae81ff;
   --green:#a6e22e; --red:#f92672;
  }
body[data-theme="solarized-dark"]{
   --bg:#002b36; --bg-row:#073642; --bg-panel:#0a3d4c; --bg-code:#00222b;
   --line:#0b4152; --line2:#1c5a6e; --fg:#93a1a1; --dim:#657b83; --dimmer:#586e75;
   --blue:#268bd2; --blue-soft:#4aa8d8; --amber:#b58900; --violet:#d33683;
   --green:#859900; --red:#dc322f;
  }
body[data-theme="solarized-light"]{
   --bg:#fdf6e3; --bg-row:#eee8d5; --bg-panel:#e7e0cc; --bg-code:#f6efdb;
   --line:#e4dcc8; --line2:#d0c6af; --fg:#586e75; --dim:#657b83; --dimmer:#839496;
   --blue:#268bd2; --blue-soft:#1a7fbf; --amber:#b58900; --violet:#d33683;
   --green:#6c8500; --red:#cb3d3a;
  }
body[data-theme="one-dark"]{
   --bg:#282c34; --bg-row:#21252b; --bg-panel:#2c313a; --bg-code:#1e222a;
   --line:#3a3f4b; --line2:#4b5263; --fg:#abb2bf; --dim:#7f848e; --dimmer:#5c6370;
   --blue:#61afef; --blue-soft:#8ecdf7; --amber:#e5c07b; --violet:#c678dd;
   --green:#98c379; --red:#e06c75;
  }
body[data-theme="tokyo-night"]{
   --bg:#1a1b26; --bg-row:#16161e; --bg-panel:#24283b; --bg-code:#13141c;
   --line:#292e42; --line2:#414868; --fg:#c0caf5; --dim:#787c99; --dimmer:#565f89;
   --blue:#7aa2f7; --blue-soft:#7dcfff; --amber:#e0af68; --violet:#bb9af7;
   --green:#9ece6a; --red:#f7768e;
  }
body[data-theme="catppuccin"]{
   --bg:#1e1e2e; --bg-row:#181825; --bg-panel:#313244; --bg-code:#11111b;
   --line:#313244; --line2:#45475a; --fg:#cdd6f4; --dim:#a6adc8; --dimmer:#6c7086;
   --blue:#89b4fa; --blue-soft:#a8c7fa; --amber:#f9e2af; --violet:#cba6f7;
   --green:#a6e3a1; --red:#f38ba8;
  }
body[data-theme="rose-pine"]{
   --bg:#191724; --bg-row:#1f1d2e; --bg-panel:#26233a; --bg-code:#14121d;
   --line:#2a273f; --line2:#403d52; --fg:#e0def4; --dim:#908caa; --dimmer:#6e6a86;
   --blue:#9ccfd8; --blue-soft:#b9e3ea; --amber:#f6c177; --violet:#c4a7e7;
   --green:#5fbd98; --red:#eb6f92;
  }
body[data-theme="everforest"]{
   --bg:#2d353b; --bg-row:#343f44; --bg-panel:#3c464e; --bg-code:#262e32;
   --line:#425047; --line2:#56645b; --fg:#d3c6aa; --dim:#859289; --dimmer:#627069;
   --blue:#7fbbb3; --blue-soft:#9fd0c9; --amber:#dbbc7f; --violet:#d699b6;
   --green:#a7c080; --red:#e67e80;
  }
body[data-theme="kanagawa"]{
   --bg:#1f1f28; --bg-row:#1a1a22; --bg-panel:#2a2a37; --bg-code:#16161d;
   --line:#36363d; --line2:#54546d; --fg:#dcd7ba; --dim:#9e9b8f; --dimmer:#727169;
   --blue:#7e9cd8; --blue-soft:#a3b8e0; --amber:#dca561; --violet:#957fb8;
   --green:#7aa89f; --red:#c34043;
  }
body[data-theme="github-dark"]{
   --bg:#0d1117; --bg-row:#161b22; --bg-panel:#21262d; --bg-code:#090c10;
   --line:#30363d; --line2:#484f58; --fg:#e6edf3; --dim:#8b949e; --dimmer:#6e7681;
   --blue:#58a6ff; --blue-soft:#79c0ff; --amber:#d29922; --violet:#bc8cff;
   --green:#3fb950; --red:#f85149;
  }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
   background:var(--bg);color:var(--fg);
   font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
   font-size:13.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
   display:flex;flex-direction:column;overflow:hidden;
 }
::selection{background:rgba(59,130,246,.35)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--blue-soft);text-decoration:none}
a:hover{text-decoration:underline}
.dim{color:var(--dim)}
.add{color:var(--green)}
.del{color:var(--red)}

/* ── top bar (header) ── */
.topbar{
   flex:none;height:42px;display:flex;align-items:center;justify-content:space-between;
   padding:0 14px;font-size:12px;color:var(--dim);
   background:var(--bg);border-bottom:1px solid var(--line);
  }
.topbar__c{color:var(--dimmer);letter-spacing:.04em}
.topbar__back{
   display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);
   padding:3px 9px;border:1px solid transparent;border-radius:6px;transition:.18s;
  }
.topbar__back .topbar__arr{
   display:inline-block;font-size:15px;line-height:1;color:var(--blue-soft);
   transition:transform .18s;
  }
.topbar__back:hover{border-color:var(--line2);color:var(--fg);background:var(--bg-row)}
.topbar__back:hover .topbar__arr{transform:translateX(-3px)}
body[data-state="idle"] .topbar__back{opacity:.55;pointer-events:none}
.topbar__help{
   font-size:12px;color:var(--dim);border:1px solid var(--line2);
   border-radius:6px;padding:3px 10px;transition:.18s;
  }
.topbar__help:hover{border-color:var(--blue);color:var(--fg)}

/* ── shell (main terminal) ── */
.term{flex:1;display:flex;flex-direction:column;min-height:0}

/* ── boot screen (fake POST vibes) ── */
.boot{
   position:fixed;inset:0;z-index:100;background:var(--bg);
   display:flex;flex-direction:column;justify-content:center;
   padding:0 8vw;cursor:pointer;user-select:none;
   transition:opacity .35s ease;
  }
.boot.gone{opacity:0;pointer-events:none}
.boot__lines{
   font-family:inherit;font-size:clamp(12px,1.6vw,15px);line-height:1.75;
   color:var(--dim);white-space:pre-wrap;word-break:break-word;
  }
.boot__lines .ok{color:var(--green)}
.boot__lines .dim{color:var(--dimmer)}
.boot__skip{
   position:absolute;bottom:26px;left:0;right:0;text-align:center;
   font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);
  }
@media (prefers-reduced-motion:reduce){.boot{transition:none}}

/* ── transcript (where answers show up) ── */
.transcript{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 12px;display:none}
body[data-state="active"] .transcript{display:block}
body[data-state="active"] .idle{display:none}
.transcript::-webkit-scrollbar{width:9px}
.transcript::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}

.row{padding:6px 14px;white-space:pre-wrap;word-break:break-word}
.row--echo{background:var(--bg-row)}
.row--echo .chev{color:var(--blue-soft);font-weight:700}
body[data-mode="plan"] .row--echo .chev{color:var(--amber)}
.row--err{color:var(--red)}
.row--err .mk{color:var(--red);font-weight:700}
.row--out .mk{color:var(--amber);font-weight:700;margin-right:7px}

/* thinking — open by default, reply poora hone ke baad collapse */
.think{padding:6px 14px;cursor:pointer;white-space:pre-wrap;word-break:break-word;user-select:none}
.think__live{color:var(--amber)}
.think__live .esc{color:var(--dim);font-style:italic}
.think__hd{color:var(--dim);font-weight:700}
.think__body{color:var(--dim);font-style:italic;padding-left:20px}
.think__inline{color:var(--dim);font-style:italic}
.think__arrow{color:var(--dimmer);margin-right:6px}
.think__hint{
   display:block;color:var(--dimmer);font-size:11.4px;font-style:normal;
   padding-left:20px;margin-top:1px;
  }
.think:hover .think__hd,.think:hover .think__inline{color:var(--fg)}

/* tool call display */
.tool{padding:4px 14px;white-space:pre-wrap;word-break:break-word}
.tool__name{color:var(--amber);font-weight:700}
.tool__out{padding-left:20px;cursor:pointer}
.tool__line{color:var(--dim)}
.tool__bracket{color:var(--dimmer)}
.tool__more{color:var(--dimmer)}
.tool__out:hover .tool__more{color:var(--fg)}

/* code blocks */
.code{
   margin:6px 14px 8px;background:var(--bg-code);
   border:1px solid var(--line);border-left:2px solid var(--violet);
   border-radius:5px;padding:10px 12px;white-space:pre;overflow-x:auto;
   font-size:12.6px;line-height:1.65;
  }
.code::-webkit-scrollbar{height:7px}
.code::-webkit-scrollbar-thumb{background:var(--line2);border-radius:7px}
.code .cl{min-height:1.65em}
.tk-c{color:var(--dimmer);font-style:italic}
.tk-s{color:#86efac}
.tk-k{color:var(--violet)}
.tk-n{color:var(--amber)}
.tk-p{color:var(--blue-soft)}
.tk-f{color:var(--amber);font-weight:700}

/* panels (key/value lists) */
.panel{
   margin:7px 14px;background:var(--bg-code);border:1px solid var(--line);
   border-radius:6px;padding:10px 12px;
  }
.panel__hd{color:var(--dim);font-size:11.6px;letter-spacing:.08em;margin-bottom:7px}
.krow{display:flex;gap:12px;padding:2.5px 0;align-items:baseline;flex-wrap:wrap}
/* easter-egg ASCII art */
.eggart{
   font:inherit;color:var(--amber);white-space:pre;line-height:1.15;
   padding:6px 0 4px;text-shadow:0 0 12px color-mix(in srgb, var(--amber) 35%, transparent);
  }
.krow .ico{width:17px;height:17px;object-fit:contain;flex:none;border-radius:3px;background:#1a1a1f;padding:1px;align-self:center}
.krow b{color:var(--fg);font-weight:700;min-width:172px}
.krow span{color:var(--dim);font-size:12.5px}
.krow .num{color:var(--dimmer);min-width:24px}
/* /theme picker rows */
.krow.thm{cursor:pointer;transition:.14s;border-radius:6px;padding:3px 8px;margin-left:-8px}
.krow.thm:hover{background:var(--bg-row)}
.krow.thm.is-cur{background:var(--bg-row);box-shadow:inset 2px 0 0 var(--blue)}
.krow.thm .sw{display:inline-flex;gap:3px;min-width:44px;flex:none;align-self:center}
.krow.thm .sw i{
   width:12px;height:12px;border-radius:3px;display:block;
   border:1px solid var(--line2);
  }
.krow.thm .sw i:nth-child(1){background:var(--bg)}
.krow.thm .sw i:nth-child(2){background:var(--fg)}
.krow.thm .sw i:nth-child(3){background:var(--blue)}
.krow.thm.is-cur b{color:var(--blue-soft)}
@media (prefers-reduced-motion:no-preference){
   .krow.thm:hover{transform:translateX(2px)}
  }

/* project card — screenshot + description side by side */
.proj{
   margin:10px 14px;background:var(--bg-code);border:1px solid var(--line);
   border-radius:8px;overflow:hidden;transition:border-color .2s;
  }
.proj:hover{border-color:var(--line2)}
.proj__hd{display:flex;gap:10px;align-items:baseline;padding:9px 12px 7px;flex-wrap:wrap}
.proj__hd .num{color:var(--blue-soft);font-weight:700}
.proj__hd b{color:var(--fg);font-size:14.5px}
.proj__hd .yr{color:var(--dimmer);font-size:12px}
.proj__hd .tags{color:var(--violet);font-size:11.6px;margin-left:auto}
.proj__body{display:flex;gap:14px;padding:4px 12px 12px;align-items:flex-start}
.proj__img{
   display:block;flex:0 0 clamp(200px, 42%, 330px);width:clamp(200px, 42%, 330px);
   aspect-ratio:16/10;object-fit:cover;object-position:top center;
   background:#000;border:1px solid var(--line);border-radius:6px;
   opacity:0;transform:translateY(4px);transition:opacity .5s ease, transform .5s ease, border-color .2s;
  }
.proj__img.in{opacity:1;transform:none}
.proj__img:hover{border-color:var(--blue)}
.proj__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.proj__txt{color:var(--dim);font-size:13px;line-height:1.55;white-space:normal;margin:0}
.proj__stack{color:var(--blue-soft);font-size:11.8px}
.proj__links{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.proj__links a{
   font-size:11.6px;padding:4px 11px;border:1px solid var(--line2);
   border-radius:6px;color:var(--dim);transition:.16s;
  }
.proj__links a:hover{border-color:var(--blue);color:var(--fg);text-decoration:none}
.proj__links a.hot{border-color:rgba(59,130,246,.45);color:var(--blue-soft)}

/* ── idle hero (starting screen with mascot) ── */
.idle{
   flex:1;min-height:0;display:flex;flex-direction:column;
   align-items:center;justify-content:center;padding:8px 16px;text-align:center;
  }
.mascot{width:min(520px,94vw);height:min(310px,40vh);display:block;cursor:crosshair;touch-action:none}
.idle__q{font-size:15px;font-weight:700;color:var(--fg);margin-top:2px}
.idle__hint{font-size:13px;color:var(--dim);font-style:italic;margin-top:20px}
.chips{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.chip{
   font-size:12.5px;padding:5px 12px;border:1px solid var(--line2);
   border-radius:999px;color:var(--dim);transition:.18s;background:var(--bg-row);
  }
.chip:hover{border-color:var(--blue);color:var(--fg);transform:translateY(-1px)}

/* ── prompt (input area) ── */
.prompt{
   flex:none;position:relative;display:flex;align-items:center;gap:10px;
   padding:11px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
   background:var(--bg);
  }
.prompt__chevron{color:var(--blue-soft);font-weight:700;font-size:15px;flex:none}
body[data-mode="plan"] .prompt__chevron{color:var(--amber)}
.prompt__input{
   flex:1;background:none;border:none;outline:none;color:var(--fg);
   font-family:inherit;font-size:13.5px;caret-color:var(--blue-soft);
  }
body[data-mode="plan"] .prompt__input{caret-color:var(--amber)}
.prompt__input::placeholder{color:var(--dimmer)}

/* ── command menu (dropdown when u type /) ── */
.menu{
   position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:40;
   background:var(--bg-panel);border:1px solid var(--line2);border-radius:8px;
   padding:5px;box-shadow:0 20px 60px rgba(0,0,0,.72);
   max-height:min(320px,44vh);overflow:auto;
  }
.menu__i{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px}
.menu__i .mk{color:var(--blue-soft);width:9px;flex:none;opacity:0}
.menu__i.on{background:var(--blue)}
.menu__i.on .mk{opacity:1;color:#fff}
.menu__i.on .cmd,.menu__i.on .desc{color:#fff}
.menu__i .cmd{color:var(--fg);font-weight:500;white-space:nowrap}
.menu__i .desc{color:var(--dim);margin-left:auto;text-align:right;font-size:12.4px;padding-left:14px}
.menu__more{display:flex;align-items:center;gap:7px;padding:6px 10px;margin-top:4px;border-top:1px solid var(--line);color:var(--dimmer);font-size:12.4px}

/* ── status bar (neeche wala) ── */
.status{flex:none;padding:9px 14px 12px;font-size:13px;line-height:1.75;background:var(--bg)}
.status__row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.status__session{color:var(--fg)}
.status__auto{color:var(--green);cursor:pointer;user-select:none}
.status__auto.off{color:var(--red)}
.status__sound{cursor:pointer;color:var(--dim);font-size:11px;letter-spacing:.06em;transition:.14s;user-select:none}
.status__sound:hover{color:var(--fg)}
.status__toggle{display:flex;gap:9px;align-items:center;white-space:nowrap}
.opt{cursor:pointer;color:var(--dim);transition:.16s;user-select:none}
.opt:hover{color:var(--fg)}
.opt.is-on[data-mode="act"]{color:var(--blue-soft)}
.opt.is-on[data-mode="plan"]{color:var(--amber)}
.status__key{color:var(--dimmer)}

/* ── beginner guide (modal popup) ── */
.guide{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
.guide[hidden]{display:none}
.guide__box{
   width:min(620px,94vw);max-height:88vh;overflow:auto;
   background:var(--bg-panel);border:1px solid var(--line2);border-radius:12px;
   padding:22px 24px 18px;box-shadow:0 30px 90px rgba(0,0,0,.8);
   animation:pop .28s cubic-bezier(.2,.9,.3,1.3);
  }
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.guide__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.guide__badge{
   font-size:11px;letter-spacing:.14em;color:var(--amber);
   border:1px solid rgba(245,158,11,.4);border-radius:999px;padding:3px 11px;
  }
.guide__x{color:var(--dim);font-size:15px;padding:2px 7px;border-radius:6px}
.guide__x:hover{color:var(--fg);background:var(--line)}
.guide h2{font-size:18px;color:var(--fg);font-weight:700;margin-bottom:8px}
.guide__lede{color:var(--dim);font-size:13.2px;white-space:normal}
.guide__list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.guide__list li{color:var(--dim);font-size:12.9px;padding-left:16px;position:relative;white-space:normal}
.guide__list li::before{content:"→";position:absolute;left:0;color:var(--green)}
.guide__list b{color:var(--fg);font-weight:700}
.guide__list i{color:var(--blue-soft);font-style:normal}
.guide__ft{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.guide__remember{color:var(--dimmer);font-size:12px;display:flex;gap:7px;align-items:center;cursor:pointer}
.guide__remember input{accent-color:var(--blue)}
.guide__btns{display:flex;gap:9px}
.gbtn{font-size:12.6px;padding:7px 15px;border:1px solid var(--line2);border-radius:7px;color:var(--dim);transition:.16s}
.gbtn:hover{border-color:var(--fg);color:var(--fg)}
.gbtn--go{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.gbtn--go:hover{background:#2f6fe0;border-color:#2f6fe0;color:#fff}

/* animated demo inside the guide (live typing preview) */
.demo{
   margin-top:14px;border:1px solid var(--line2);border-radius:8px;
   overflow:hidden;background:var(--bg-code);
  }
.demo__bar{
   font-size:11.2px;color:var(--dimmer);padding:5px 10px;
   border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;
  }
.demo__dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}}
.demo__screen{padding:10px 12px;min-height:118px;font-size:12.4px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.demo__in{color:var(--fg)}
.demo__in .c{color:var(--blue-soft);font-weight:700}
.demo__think{color:var(--amber);font-style:italic}
.demo__out{color:var(--dim)}
.demo__out .mk{color:var(--amber);font-weight:700}
.caret{display:inline-block;width:7px;height:14px;background:var(--fg);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ── toast (temporary popups) ── */
.toast{
   position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:90;
   background:#2a2a30;color:#d9d9de;border-radius:6px;padding:9px 18px;
   font-size:13px;box-shadow:0 16px 50px rgba(0,0,0,.6);
  }
.toast .spin{color:var(--amber)}
.spin{display:inline-block;animation:spinstep 1s steps(10) infinite}
@keyframes spinstep{to{transform:rotate(360deg)}}

/* ── narrow screens (mobile stuff) ── */
@media (max-width:640px){
   .topbar__c{display:none}
   .mascot{height:min(230px,32vh)}
   .krow b{min-width:120px}
   .status__row{font-size:12px}
   .proj__hd .tags{margin-left:0;width:100%}
   .proj__body{flex-direction:column}
   .proj__img{flex-basis:auto;width:100%}
  }
@media (prefers-reduced-motion:reduce){
   .spin,.caret,.demo__dot{animation:none}
   .guide__box{animation:none}
  }