/* ============================================================
   codebin - terminal-grade snippet bin
   design system: near-black + neon green, Space Grotesk / IBM Plex Mono
   ============================================================ */

:root{
  --bg:#050807;
  --bg-2:#0a120e;
  --bg-3:#0d1712;
  --panel:rgba(10,18,14,.72);
  --ink:#e6f4ec;
  --muted:#8ba096;
  --faint:#49574f;
  --accent:#00ff9c;
  --accent-2:#00c47a;
  --accent-3:#00ffd5;
  --accent-glow:rgba(0,255,156,.18);
  --line:rgba(255,255,255,.08);
  --line-hot:rgba(0,255,156,.35);
  --danger:#ff5c5c;
  --warn:#ffcc66;
  --ease:cubic-bezier(.22,1,.36,1);
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --sans:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --r:14px;
  --r-sm:9px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.has-cursor,body.has-cursor *{cursor:none}
img{max-width:100%}
a{color:inherit;text-decoration:none}
code,pre,kbd{font-family:var(--mono)}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
.grow{flex:1}
[hidden]{display:none!important}

/* ---------- background fx ---------- */
.grain{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}
}
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:.2;will-change:transform}
.b1{width:46vw;height:46vw;background:radial-gradient(circle,#00ff9c,transparent 62%);top:-14vw;left:-8vw;animation:drift1 26s ease-in-out infinite}
.b2{width:38vw;height:38vw;background:radial-gradient(circle,#00ffd5,transparent 62%);top:34vh;right:-12vw;animation:drift2 32s ease-in-out infinite}
.b3{width:30vw;height:30vw;background:radial-gradient(circle,#00c47a,transparent 62%);bottom:-12vw;left:22vw;animation:drift3 29s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(6vw,5vh) scale(1.12)}}
@keyframes drift2{50%{transform:translate(-7vw,-4vh) scale(1.08)}}
@keyframes drift3{50%{transform:translate(5vw,-6vh) scale(1.15)}}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor-dot{width:6px;height:6px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.cursor-ring{width:34px;height:34px;border:1.5px solid rgba(0,255,156,.55);transition:opacity .3s,width .2s,height .2s,background .2s}
body.has-cursor.cursor-on .cursor-dot,body.has-cursor.cursor-on .cursor-ring{opacity:1}
.cursor-ring.hot{width:52px;height:52px;background:rgba(0,255,156,.08);border-color:var(--accent)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(12px);background:rgba(5,8,7,.72);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.logo-caret{color:var(--accent-2);margin-right:6px}
.logo-cursor,.typed::after{display:inline-block;width:9px;height:1.05em;background:var(--accent);margin-left:5px;vertical-align:-2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{font-family:var(--mono);font-size:.85rem;color:var(--muted);position:relative;padding:4px 2px;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--accent);transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-links a.active{color:var(--accent)}
.nav-gh{color:var(--accent-2)!important}

/* nav stays on one row on desktop, wraps gracefully on small screens */
@media (max-width:720px){
  .nav-inner{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;gap:8px}
  .nav-links{flex-wrap:wrap;gap:14px 18px;justify-content:flex-end;width:100%}
}

/* glitch logo */
.glitch{position:relative;color:var(--accent)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none;clip-path:inset(0 0 0 0)}
.glitch::before{color:var(--accent-3);left:1px}
.glitch::after{color:#00c47a;left:-1px}
.glitch:hover::before{animation:gl1 1.6s steps(1) infinite;opacity:.9}
.glitch:hover::after{animation:gl2 1.6s steps(1) infinite;opacity:.9}
@keyframes gl1{0%,86%,100%{transform:translate(0);clip-path:inset(100% 0 0 0)}
  88%{transform:translate(-2px,1px);clip-path:inset(12% 0 62% 0)}
  92%{transform:translate(2px,-1px);clip-path:inset(48% 0 24% 0)}
  96%{transform:translate(-1px,2px);clip-path:inset(78% 0 4% 0)}}
@keyframes gl2{0%,87%,100%{transform:translate(0);clip-path:inset(100% 0 0 0)}
  89%{transform:translate(2px,-1px);clip-path:inset(30% 0 44% 0)}
  93%{transform:translate(-2px,1px);clip-path:inset(66% 0 12% 0)}
  97%{transform:translate(1px,-2px);clip-path:inset(6% 0 82% 0)}}

/* ---------- hero ---------- */
main{position:relative;z-index:2}
.hero{padding:78px 22px 34px}
.eyebrow{font-family:var(--mono);font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:9px;letter-spacing:.02em;margin:0 0 22px}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(0,255,156,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,255,156,.5)}70%{box-shadow:0 0 0 12px rgba(0,255,156,0)}100%{box-shadow:0 0 0 0 rgba(0,255,156,0)}}
.headline{font-size:clamp(2.6rem,7.4vw,5.2rem);line-height:.98;letter-spacing:-.045em;font-weight:700;margin:0;text-wrap:balance;
  background:linear-gradient(180deg,var(--ink),#9fe9c6 160%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{max-width:56ch;color:var(--muted);font-size:1.08rem;margin:24px 0 0}
.sub em{color:var(--accent-2);font-style:normal}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:.86rem;font-weight:500;
  padding:12px 22px;border-radius:var(--r-sm);border:1px solid transparent;transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden;will-change:transform}
.btn.primary{background:linear-gradient(180deg,#00ff9c,#00c47a);color:#04140d;box-shadow:0 6px 26px -10px rgba(0,255,156,.7)}
.btn.primary:hover{box-shadow:0 10px 34px -8px rgba(0,255,156,.85)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.btn.ghost:hover{color:var(--ink);border-color:var(--line-hot);background:rgba(0,255,156,.05)}
.btn:active{transform:scale(.97)}

/* terminal demo */
.term-demo{margin-top:52px;border:1px solid var(--line);border-radius:var(--r);background:rgba(6,12,9,.66);overflow:hidden;box-shadow:0 30px 80px -50px rgba(0,255,156,.5)}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:var(--bg-3);border-bottom:1px solid var(--line)}
.cdot{width:11px;height:11px;border-radius:50%}
.cdot.r{background:#ff5f57}.cdot.y{background:#febc2e}.cdot.g{background:#28c840}
.term-name{margin-left:10px;font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.term-spacer{flex:1}
.term-badge{font-family:var(--mono);font-size:.72rem;color:var(--accent-2);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.term-body{margin:0;padding:17px;font-size:.86rem;line-height:1.7;color:var(--muted);min-height:132px;white-space:pre-wrap;word-break:break-word}
.term-body .t-cmd{color:var(--accent)}
.term-body .t-ok{color:var(--accent-3)}
.term-body .t-dim{color:var(--faint)}

/* ticker */
.ticker{margin-top:32px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;gap:34px;width:max-content;padding:12px 0;animation:marq 40s linear infinite;font-family:var(--mono);font-size:.82rem;color:var(--faint)}
.ticker-track span::before{content:"#";color:var(--accent-2);margin-right:6px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- composer ---------- */
#composer{padding-top:26px}
.term{position:relative;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(9,16,12,.9),rgba(5,9,7,.92));overflow:hidden;box-shadow:0 40px 100px -60px rgba(0,255,156,.55)}
.term::before{content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;background:conic-gradient(from var(--spin),transparent 0 62%,rgba(0,255,156,.55) 78%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none;opacity:.9}
@property --spin{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spin{to{--spin:360deg}}
.term-inner{padding:24px}
@media(max-width:640px){.term-inner{padding:18px 15px}}

.cmd-line{font-family:var(--mono);font-size:.86rem;color:var(--muted);margin:0 0 20px;display:flex;align-items:center;gap:8px}
.prompt{color:var(--accent)}
.cmd{color:var(--ink)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:680px){.grid-2,.grid-3{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.lab{font-family:var(--mono);font-size:.76rem;color:var(--accent-2);letter-spacing:.03em}
.lab i{color:var(--faint);font-style:normal}
.lab-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;flex-wrap:wrap}
.lab-row .lab{margin:0}
.tool-row{display:flex;gap:8px;flex-wrap:wrap}

input,textarea,select{font-family:var(--mono);font-size:.9rem;color:var(--ink);background:rgba(3,7,5,.7);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;width:100%;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#5f7166}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--line-hot);box-shadow:0 0 0 3px rgba(0,255,156,.12)}
.mini-select{width:auto;padding:7px 10px;font-size:.78rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2300ff9c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:13px;padding-right:28px;appearance:none;color:var(--accent-2)}
.mini-select option{background:#0a120e;color:var(--ink)}
.nav-theme{padding:5px 24px 5px 9px;font-size:.74rem;color:var(--muted);background-position:right 6px center}
.nav-theme:hover{color:var(--ink)}

.chip{font-family:var(--mono);font-size:.76rem;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;padding:6px 13px;transition:all .2s var(--ease)}
.chip:hover{color:var(--accent);border-color:var(--line-hot);background:rgba(0,255,156,.06)}
.chip:active{transform:scale(.95)}
.chip.copy{background:rgba(0,255,156,.1);color:var(--accent);border-color:var(--line-hot)}

/* editor */
.editor{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(3,7,5,.72);overflow:hidden;min-height:280px}
.editor:focus-within{border-color:var(--line-hot);box-shadow:0 0 0 3px rgba(0,255,156,.1)}
.editor-hl{position:absolute;inset:0;margin:0;padding:15px;font-family:var(--mono);font-size:.86rem;line-height:1.65;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;overflow:hidden;pointer-events:none}
.editor-hl code{font-family:inherit;display:block}
#f-code{position:relative;display:block;width:100%;min-height:280px;border:0;border-radius:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;padding:15px;font-family:var(--mono);font-size:.86rem;line-height:1.65;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;resize:none;overflow:hidden;caret-color:var(--accent)}
#f-code::selection{background:rgba(0,255,156,.28);color:transparent}

.statusbar{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;color:var(--faint);padding:9px 3px 0}
.statusbar .sep{opacity:.5}
.statusbar .hint{color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:1px 8px}

.social-block{margin:6px 0 4px;border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 14px}
.social-block summary{font-family:var(--mono);font-size:.78rem;color:var(--muted);cursor:pointer;list-style:none}
.social-block summary::-webkit-details-marker{display:none}
.social-block summary::before{content:"▸ ";color:var(--accent-2)}
.social-block[open] summary::before{content:"▾ "}
.social-block .grid-3{margin-top:14px}

.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.autosave{font-family:var(--mono);font-size:.74rem;color:var(--faint)}
.autosave.on{color:var(--accent-2)}

/* result */
.result{margin-top:24px;border:1px solid var(--line-hot);border-radius:var(--r-sm);padding:20px;background:rgba(0,255,156,.045);animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.result-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.tick{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(0,255,156,.14);color:var(--accent);font-size:1rem}
.result-top strong{font-family:var(--mono);color:var(--accent);display:block;font-size:.95rem}
.result-top p{margin:2px 0 0;color:var(--muted);font-size:.86rem}
.url-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.share-input{flex:1 1 240px;min-width:0;color:var(--accent);background:rgba(3,7,5,.8);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.url-row .chip{flex:0 0 auto}
.share-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.share-grid .chip{text-transform:lowercase;flex:0 0 auto}
.result-foot{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* ---------- blocks / cards ---------- */
.block{padding:64px 22px}
.block-head{margin-bottom:30px}
.block-head h2{font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.03em;margin:0 0 8px;font-weight:600}
.block-head p{color:var(--muted);margin:0;font-size:.95rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

.card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);border-color:var(--line-hot);box-shadow:0 26px 60px -40px rgba(0,255,156,.6)}
.card-top{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)}
.card-top .lang{font-family:var(--mono);font-size:.7rem;color:var(--accent-2);border:1px solid var(--line);border-radius:6px;padding:1px 8px}
.card-title{font-family:var(--mono);font-size:.84rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.card-body{padding:14px;font-family:var(--mono);font-size:.76rem;line-height:1.6;color:var(--muted);max-height:180px;overflow:hidden;white-space:pre;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);
  mask-image:linear-gradient(to bottom,#000 60%,transparent)}
.card-foot{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.card-foot .grow{flex:1}
.card-meta{display:flex;flex-direction:column;gap:3px}
.card-desc{color:var(--muted);font-size:.8rem;padding:0 14px 12px;font-family:var(--sans)}
.card-actions{display:flex;gap:7px}

.shine::before{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(0,255,156,.09),transparent);transform:skewX(-18deg);transition:left .7s var(--ease);pointer-events:none}
.card:hover .shine::before{left:120%}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:780px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:rgba(10,18,14,.5)}
.step-n{font-family:var(--mono);font-size:.8rem;color:var(--accent-2)}
.step h3{margin:12px 0 8px;font-size:1.05rem;font-weight:600}
.step p{margin:0;color:var(--muted);font-size:.88rem}

/* ---------- snippet view ---------- */
.back{display:inline-block;font-family:var(--mono);font-size:.82rem;color:var(--muted);margin:30px 0 18px;transition:color .2s}
.back:hover{color:var(--accent)}
.snippet-term{margin-bottom:22px}
.snip-head{padding:22px 24px 0}
.snip-title{font-size:clamp(1.4rem,3.2vw,2rem);letter-spacing:-.03em;margin:0 0 10px;font-weight:600;word-break:break-word}
.snip-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-bottom:16px}
.snip-sub .by{color:var(--accent-2)}
.snip-sub .dotz{opacity:.4}
.snip-socials{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.snip-exp{font-family:var(--mono);font-size:.74rem;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.snip-exp.warn{color:var(--warn);border-color:rgba(255,204,102,.4)}
.snip-exp.never{color:var(--accent-2);border-color:var(--line-hot)}
.snip-socials a{font-family:var(--mono);font-size:.76rem;color:var(--accent-2);border:1px solid var(--line);border-radius:999px;padding:3px 11px;transition:all .2s}
.snip-socials a:hover{border-color:var(--line-hot);background:rgba(0,255,156,.06)}
.codeblock{margin:18px 0 0;border-top:1px solid var(--line)}
.codeblock-head{display:flex;align-items:center;gap:12px;padding:11px 16px;background:rgba(0,0,0,.25);position:sticky;top:62px;z-index:5;backdrop-filter:blur(8px)}
.codeblock-head .lang{font-family:var(--mono);font-size:.72rem;color:var(--accent);border:1px solid var(--line-hot);border-radius:6px;padding:2px 9px;background:rgba(0,255,156,.07)}
.codeblock-head .grow{flex:1}
.codeblock-head .chip{padding:4px 11px}
.code-scroll{overflow-x:auto}
.code-lines{counter-reset:l;font-family:var(--mono);font-size:.85rem;line-height:1.65;padding:14px 0}
.code-line{display:flex;gap:16px;padding:0 16px}
.code-line:hover{background:rgba(0,255,156,.04)}
.code-line .ln{flex:none;width:2.6em;text-align:right;color:var(--faint);user-select:none;counter-increment:l;position:sticky;left:0;background:linear-gradient(90deg,var(--bg-2) 70%,transparent)}
.code-line .lc{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;flex:1;min-width:0}
.snip-meta-bar{margin-bottom:70px}

/* ---------- code tokens (themed via --t-* vars) ---------- */
:root{
  --t-com:#5b7a6c; --t-str:#7ee787; --t-num:#ffa657; --t-kw:#00ff9c; --t-lit:#00ffd5;
  --t-fn:#79c0ff; --t-type:#ffd479; --t-attr:#ffa657; --t-var:#e6f4ec; --t-op:#ff7b72;
  --t-punc:#8ba096; --t-tag:#ff7b72; --t-prop:#79c0ff;
}
body[data-theme="amber"]{
  --t-com:#6e6350; --t-str:#f0d68a; --t-num:#ff9d5c; --t-kw:#ffb454; --t-lit:#ffe08a;
  --t-fn:#ffd479; --t-type:#ffcf7a; --t-attr:#ff9d5c; --t-var:#f5e9d5; --t-op:#ff8f6b;
  --t-punc:#9c8a70; --t-tag:#ff8f6b; --t-prop:#ffd479;
}
body[data-theme="ice"]{
  --t-com:#5a6b7a; --t-str:#9be7ff; --t-num:#b0a0ff; --t-kw:#5cc8ff; --t-lit:#a0e9ff;
  --t-fn:#6fd3ff; --t-type:#8ab4ff; --t-attr:#b0a0ff; --t-var:#e2f0ff; --t-op:#ff9ecb;
  --t-punc:#7f93a8; --t-tag:#ff9ecb; --t-prop:#8ab4ff;
}
body[data-theme="rose"]{
  --t-com:#6f5560; --t-str:#ffd6a5; --t-num:#ffcf7a; --t-kw:#ff5ea8; --t-lit:#ffb0d8;
  --t-fn:#ff9ecb; --t-type:#ffc6e0; --t-attr:#ffcf7a; --t-var:#f7e6ee; --t-op:#ff7b72;
  --t-punc:#9c7f8c; --t-tag:#ff7b72; --t-prop:#ff9ecb;
}
body[data-theme="mono"]{
  --t-com:#6a6a6a; --t-str:#c9c9c9; --t-num:#d2d2d2; --t-kw:#ffffff; --t-lit:#ffffff;
  --t-fn:#e4e4e4; --t-type:#d2d2d2; --t-attr:#c9c9c9; --t-var:#ededed; --t-op:#a4a4a4;
  --t-punc:#7c7c7c; --t-tag:#a4a4a4; --t-prop:#d2d2d2;
}
.tok-com{color:var(--t-com);font-style:italic}
.tok-str{color:var(--t-str)}
.tok-num{color:var(--t-num)}
.tok-kw{color:var(--t-kw)}
.tok-lit{color:var(--t-lit)}
.tok-fn{color:var(--t-fn)}
.tok-type{color:var(--t-type)}
.tok-attr{color:var(--t-attr)}
.tok-var{color:var(--t-var)}
.tok-op{color:var(--t-op)}
.tok-punc{color:var(--t-punc)}
.tok-tag{color:var(--t-tag)}
.tok-prop{color:var(--t-prop)}
.tok-plain{color:var(--ink)}

/* ---------- snippet engagement (server mode) ---------- */
.snip-engage{border-top:1px solid var(--line);padding:20px 24px 24px}
.engage-rate{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.eng-label{font-family:var(--mono);font-size:.76rem;color:var(--accent-2);letter-spacing:.03em}
.stars{display:flex;gap:4px}
.star{background:none;border:0;padding:0;font-size:1.35rem;line-height:1;color:rgba(255,255,255,.18);transition:color .18s var(--ease),transform .18s var(--ease)}
.star:hover,.star.on{color:var(--warn)}
.star:hover{transform:scale(1.15)}
.rate-meta{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.eng-views{font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.comments{margin-top:20px}
.comments h3{font-size:1rem;margin:0 0 14px;font-weight:600}
.cmt-count{font-family:var(--mono);font-size:.78rem;color:var(--accent-2);border:1px solid var(--line);border-radius:999px;padding:1px 9px;margin-left:6px}
.cmt-list{margin-bottom:18px}
.comment{padding:12px 0;border-bottom:1px dashed var(--line)}
.comment-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.comment-author{font-family:var(--mono);font-size:.82rem;color:var(--ink);font-weight:500}
.comment-date{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.comment-text{margin:0;color:var(--muted);font-size:.9rem;line-height:1.65;word-break:break-word}
.cmt-empty{color:var(--faint);font-family:var(--mono);font-size:.82rem;margin:0 0 16px}
.cmt-form{display:flex;flex-direction:column;gap:10px}
.cmt-form input,.cmt-form textarea{font-family:var(--mono)}
.cmt-form textarea{resize:vertical;min-height:64px}
.cmt-actions{display:flex;justify-content:flex-end}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(2,5,4,.72);backdrop-filter:blur(6px);padding:20px}
.modal[hidden]{display:none}
.modal-panel{width:min(460px,100%);border:1px solid var(--line-hot);border-radius:var(--r);background:linear-gradient(180deg,rgba(9,16,12,.98),rgba(5,9,7,.99));box-shadow:0 40px 100px -50px rgba(0,255,156,.6);animation:pop .3s var(--ease)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head strong{font-family:var(--mono);font-size:.9rem;color:var(--accent)}
.modal-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.modal-body input{font-family:var(--mono)}
.modal-note{margin:0;color:var(--muted);font-size:.82rem;line-height:1.6}
.modal-note code{background:rgba(0,255,156,.08);border-radius:5px;padding:1px 5px;color:var(--accent-2)}
.modal-note a{color:var(--accent-2);border-bottom:1px dashed var(--line-hot)}
.modal-foot{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}

/* ---------- about prose ---------- */
.prose p{color:var(--muted);margin:0 0 16px}
.prose h3{font-size:1.05rem;margin:26px 0 10px;font-weight:600;color:var(--ink)}
.prose ul{margin:0 0 16px;padding-left:18px;color:var(--muted)}
.prose li{margin-bottom:7px}
.prose code{background:rgba(0,255,156,.08);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.82rem;color:var(--accent-2)}
.prose strong{color:var(--ink)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:40px;position:relative;z-index:2}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 22px;font-family:var(--mono);font-size:.78rem;color:var(--faint);flex-wrap:wrap}
.foot-links{display:flex;gap:20px}
.foot-links a{color:var(--muted);transition:color .2s}
.foot-links a:hover{color:var(--accent)}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:9998;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{font-family:var(--mono);font-size:.8rem;color:var(--ink);background:rgba(10,18,14,.95);border:1px solid var(--line-hot);border-left:3px solid var(--accent);border-radius:10px;padding:12px 16px;box-shadow:0 20px 50px -30px rgba(0,255,156,.7);animation:toastIn .4s var(--ease);max-width:320px}
.toast.err{border-color:var(--danger);border-left-color:var(--danger)}
.toast.out{animation:toastOut .35s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* ---------- empty ---------- */
.empty{text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:var(--r)}
.empty .big{font-size:1.5rem;font-weight:600;margin:0 0 8px}
.empty p{color:var(--muted);margin:0 0 20px}

/* ---------- reveal (JS-gated so no-JS still shows content) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none;filter:none}
}