/* WEBBELT; retro terminal stylesheet. Own implementation. */
:root{
  --bg:#0b0e11;
  --panel:#10141b;
  --panel2:#151b26;
  --grn:#33ff66;
  --amb:#ffb000;
  --red:#ff5555;
  --txt:#c9d4de;
  --dim:#5f6f80;
  --line:#1f2a38;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:16px;
  line-height:1.65;
  min-height:100vh;
  padding-bottom:4rem;
}
/* ambient background grid: diffuse random letters, cell lights up under cursor */
.bggrid{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;display:grid;grid-template:repeat(var(--rows,10),1fr)/repeat(var(--cols,20),1fr);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
.bggrid i{font-style:normal;display:grid;place-items:center;font-size:1.1rem;color:hsl(140 70% 45%);opacity:var(--o,.07);transform:scale(1);filter:grayscale(.45) brightness(.8);transition:opacity .8s ease-in,transform .4s ease-out,filter .6s ease-out}
.bggrid i.lit{opacity:.22;filter:grayscale(0) brightness(1.15);transform:rotate(calc(var(--g,0)*9deg)) scale(1.2);transition-duration:0s}
/* subtle scanlines */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  opacity:.5;
}
::selection{background:var(--grn);color:#04140a}
a{color:var(--grn);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:960px;margin:0 auto;padding:0 1rem}

/* header */
header.top{
  border-bottom:1px solid var(--line);
  background:rgba(11,14,17,.92);
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(4px);
}
.top-inner{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;max-width:960px;margin:0 auto}
.logo{font-weight:700;color:var(--grn);letter-spacing:1px;white-space:nowrap}
.logo .cur{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
nav.main{margin-left:auto;display:flex;gap:1rem;align-items:center;position:relative}
nav.main a{color:var(--dim);font-size:.85rem;position:relative;z-index:1;padding:.35rem .55rem;border-radius:6px}
nav.main a:hover,nav.main a.on{color:var(--grn)}
nav.main a.nav-donate{color:var(--amb)}
nav.main a.nav-donate:hover{color:var(--amb);filter:brightness(1.25)}
.navpill{position:absolute;z-index:0;left:0;top:0;background:rgba(51,255,102,.08);border:1px solid rgba(51,255,102,.28);border-radius:6px;pointer-events:none;opacity:0;transition:left .38s cubic-bezier(.2,.8,.25,1.12),top .38s cubic-bezier(.2,.8,.25,1.12),width .38s cubic-bezier(.2,.8,.25,1.12),height .38s cubic-bezier(.2,.8,.25,1.12),opacity .25s}
nav.main.pill-on .navpill{opacity:1}
@media (prefers-reduced-motion:reduce){.navpill{transition:none}}

/* hero */
.hero{padding:3rem 0 2rem;text-align:center}
.hero .ascii{color:var(--grn);font-weight:700;font-size:clamp(1.4rem,6vw,2.6rem);letter-spacing:2px}
.hero p.tag{color:var(--dim);margin-top:.8rem;max-width:34rem;margin-left:auto;margin-right:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;justify-content:center;margin:1.4rem auto 0;max-width:780px}
.stat{border:1px solid var(--line);background:var(--panel);padding:.6rem 1.1rem;border-radius:6px;text-align:center}
.stat b{display:block;color:var(--amb);font-size:1.3rem}
.stat span{font-size:.75rem;color:var(--dim)}

/* sections */
section.block{margin-top:2.6rem}
.sec-head{display:flex;align-items:baseline;gap:.8rem;border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:1.2rem}
.sec-head .num{color:var(--amb);font-weight:700}
.sec-head h2{font-size:1.05rem;letter-spacing:1px;color:var(--txt)}
.sec-head .hint{margin-left:auto;color:var(--dim);font-size:.75rem}

/* ad slots */
.adslot{
  border:1px dashed var(--dim);border-radius:6px;
  color:var(--dim);text-align:center;font-size:.75rem;letter-spacing:2px;
  padding:1.6rem 1rem;margin:2rem auto;max-width:728px;
}
.adslot small{display:block;margin-top:.4rem;letter-spacing:1px;opacity:.7}

/* terminal panel */
.term{
  background:#05070a;border:1px solid var(--line);border-radius:6px;
  padding:1.1rem 1.2rem;font-size:.9rem;overflow-x:auto;
}
.term .p{color:var(--grn)}
.term .k{color:var(--dim)}
.term .warn{color:var(--amb)}
.termline{margin:.15rem 0}

/* buttons */
.btn{
  display:inline-block;background:transparent;color:var(--grn);
  border:1px solid var(--grn);border-radius:4px;
  font:inherit;font-weight:700;letter-spacing:1px;cursor:pointer;
  padding:.8rem 1.6rem;min-height:48px;margin-top:1.2rem;
}
.btn:hover{background:var(--grn);color:#04140a}
.btn:active{transform:translateY(1px)}
.crumb{color:var(--dim);font-size:.85rem;margin:1.6rem 0 .6rem;display:inline-block}
h1.tool-title{color:var(--grn);font-size:1.4rem;letter-spacing:1px;margin:.4rem 0 .6rem}
p.lead{color:var(--dim);max-width:40rem;margin-bottom:1.4rem}
.note{
  border-left:3px solid var(--grn);background:var(--panel);
  padding:.8rem 1rem;margin-top:1.6rem;font-size:.85rem;color:var(--dim);border-radius:0 6px 6px 0;
}
.note b{color:var(--grn)}
footer.site{
  margin-top:4rem;border-top:1px solid var(--line);padding-top:1.4rem;
  color:var(--dim);font-size:.78rem;text-align:center;
}
footer.site .row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-bottom:.8rem}
.cclicense{margin-top:.9rem;font-size:.72rem}
.cclicense img{height:1em;width:1em;margin-left:.25em;vertical-align:-.12em}
@media (max-width:560px){
  .hero{padding:2rem 0 1.4rem}
  .top-inner{padding:.6rem .8rem}
  nav.main{overflow-x:auto;scrollbar-width:none;gap:.6rem;max-width:100%}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a:not(.keep){display:none}
}

/* ---- v2 additions: dropdowns, lang menu, toplist ---- */
.langwrap{position:relative}
.langbtn{
  display:flex;align-items:center;gap:.45rem;
  background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--grn);
  font:inherit;font-size:.8rem;padding:.5rem .7rem;cursor:pointer;min-height:44px;
}
.langbtn svg{width:18px;height:18px;stroke:currentColor;flex:none}
.langbtn .chev{font-size:.65rem;color:var(--dim)}
.langmenu{
  display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  min-width:150px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.langmenu.open{display:block}
.langmenu button{
  display:flex;width:100%;align-items:center;gap:.6rem;
  background:transparent;border:0;color:var(--txt);font:inherit;font-size:.85rem;
  padding:.7rem .9rem;cursor:pointer;min-height:48px;text-align:left;
}
.langmenu button:hover{background:var(--panel)}
.langmenu button.on{color:var(--grn)}
.langmenu button .tick{margin-left:auto;color:var(--grn)}
/* collapsible sections */
.sec-toggle{cursor:pointer;user-select:none}
.sec-toggle .chev{margin-left:.6rem;color:var(--grn);transition:transform .2s;font-size:.9rem}
.sec-toggle.open .chev{transform:rotate(180deg)}
.sec-panel{overflow:hidden;max-height:0;transition:max-height .35s ease}
.sec-panel.open{max-height:1200px}
/* top-10 rows */
.toplist{display:flex;flex-direction:column;gap:.55rem;padding:.4rem 0 1.4rem}
.toptool{
  display:flex;align-items:center;gap:.8rem;
  border:1px solid var(--line);background:var(--panel);border-radius:6px;
  padding:.75rem 1rem;
}
a.toptool:hover{border-color:var(--grn);text-decoration:none}
.toptool .n{color:var(--amb);font-weight:700;font-size:.8rem;min-width:2ch}
.toptool .t{color:var(--grn);font-weight:700;flex:1;overflow-wrap:anywhere}
.toptool .u{color:var(--dim);font-size:.75rem;white-space:nowrap}
.toptool.openall{border-style:dashed;justify-content:center}
.toptool.openall .t{flex:none;color:var(--amb)}
div.toptool{opacity:.6}
/* toolbox page rows */
.tbcat{margin-top:2rem}
.tbrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.5rem;margin-top:.8rem}
.tbrow{
  display:flex;flex-direction:column;align-items:stretch;gap:.2rem;
  border:1px solid var(--line);background:var(--panel);border-radius:6px;
  padding:.55rem .8rem;font-size:.85rem;
}
.tbrow .t{color:var(--grn);white-space:nowrap;overflow:hidden}
.tbrow .s{font-size:.68rem;letter-spacing:1px}
.tbrow .s.on{color:var(--grn)}
.tbrow .s.off{color:var(--dim)}
a.tbrow:hover{border-color:var(--grn);text-decoration:none}
h3.catname{color:var(--amb);font-size:.9rem;letter-spacing:2px}
.catcount{color:var(--dim);font-size:.75rem;margin-left:.6rem}

/* ---- v3: terminal bar, themes, scramble, toolbox ---- */
[hidden]{display:none !important}
.logo .lname{cursor:pointer}

.logo .cur{cursor:pointer}
/* retro pixel theme (easter egg) */
@font-face{
  font-family:'Press Start 2P';
  src:url('fonts/press-start-2p.ttf') format('truetype');
  font-display:swap;
}
body.retro{font-family:'Press Start 2P',ui-monospace,monospace;font-size:12px;line-height:2}
body.retro::after{opacity:.85}
/* retro CRT kit; adapted inspo. self-hosted font, inline svg noise, no external requests */
body.retro::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:51;
  background:
    radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}
body.retro .logo{animation:rgbflicker 2.6s steps(2) infinite}
@keyframes rgbflicker{
  0%,100%{text-shadow:1px 0 0 rgba(255,45,120,.5),-1px 0 0 rgba(0,220,255,.5)}
  50%{text-shadow:-1px 0 0 rgba(255,45,120,.5),1px 0 0 rgba(0,220,255,.5)}
}
@media (prefers-reduced-motion:reduce){body.retro .logo{animation:none}}
body.retro .hero .ascii{font-size:clamp(.95rem,4.5vw,1.5rem);letter-spacing:1px}
body.retro h1.tool-title{font-size:1rem}
body.retro .sec-head h2{font-size:.7rem}
body.retro .sec-head .num{font-size:.7rem}
body.retro .btn{font-size:.6rem}
body.retro .logo{font-size:.75rem}
body.retro .stat b{font-size:1rem}
body.retro .toptool .t,body.retro .tbrow .t{font-size:.62rem}
/* feedback form */
.fbform{max-width:36rem;margin:1.6rem 0}
.fbform>label{display:block;color:var(--dim);font-size:.8rem;margin:1rem 0 .4rem}
.fbform input[type=text],.fbform input[type=email]{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  color:var(--txt);font:inherit;padding:.8rem 1rem;min-height:48px;
}
.fbform input:focus{outline:none;border-color:var(--grn)}
.fbform label,.fbform select,.fbform button{font-family:inherit}
.fbmsg{margin-top:1rem;color:var(--grn);font-size:.85rem}
/* hype button: split counter w/ rolling number (inspo, own build) */
.hypebtn{display:inline-flex;align-items:stretch;overflow:hidden;background:transparent;
  border:1px solid var(--amb);color:var(--amb);border-radius:4px;font:inherit;cursor:pointer;
  padding:0;min-height:44px;flex:none;transition:transform .08s ease}
.hypebtn:hover{background:var(--amb);color:#04140a}
.hypebtn:hover .hypecount{background:#04140a;color:var(--amb)}
.hypebtn:active{transform:translateY(2px)}
.hypebtn:disabled{opacity:.65;cursor:default}
.hypecount{display:flex;flex-direction:column;height:44px;overflow:hidden;min-width:2.4em;
  align-items:center;background:rgba(255,176,0,.12);transition:background .15s ease,color .15s ease}
.hypecount>span{display:flex;align-items:center;justify-content:center;height:44px;flex:none;
  font-weight:700;transition:transform .28s ease}
.hypebtn.rolled .hypecount>span{transform:translateY(-100%)}
.hypeword{display:flex;align-items:center;padding:0 .9rem;letter-spacing:1px;font-size:.68rem}
/* floating expanding search (inspo clone, webbelt-styled, no deps) */
.fsearch{position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;display:flex;align-items:center;
  height:52px;width:52px;border:1px solid var(--grn);border-radius:6px;background:#04140a;
  overflow:hidden;transition:width .35s ease;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.fsearch:hover,.fsearch:focus-within,.fsearch.open{width:min(320px,72vw)}
.fsearch-input{flex:1;min-width:0;width:0;background:transparent;border:0;outline:0;color:var(--txt);
  font:inherit;font-size:.9rem;padding:0;opacity:0;transition:opacity .25s ease,padding .25s ease}
.fsearch:hover .fsearch-input,.fsearch:focus-within .fsearch-input,.fsearch.open .fsearch-input{padding:0 .8rem;opacity:1}
.fsearch-btn{position:relative;flex:none;width:50px;height:50px;background:transparent;border:0;color:var(--grn);
  cursor:pointer;display:grid;place-items:center;transition:background .25s ease,color .25s ease}
.fsearch-btn svg{width:22px;height:22px}
.fsearch:hover .fsearch-btn,.fsearch:focus-within .fsearch-btn,.fsearch.open .fsearch-btn{background:var(--grn);color:#04140a}
.fsearch-clear{flex:none;width:36px;height:50px;background:transparent;border:0;color:var(--dim);
  font-size:1.3rem;cursor:pointer;display:none}
.fsearch.has-text .fsearch-clear{display:block}
/* amber dot: filter is on while the box sits collapsed */
.fsearch.has-text:not(:hover):not(:focus-within):not(.open) .fsearch-btn::after{content:'';
  position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--amb)}
/* search results dropdown (hovering window above the bar) */
.fdrop{position:fixed;right:1.2rem;bottom:4.6rem;z-index:61;width:min(320px,72vw);max-height:44vh;
  overflow-y:auto;background:#04140a;border:1px solid var(--grn);border-radius:6px;
  box-shadow:0 0 22px rgba(51,255,102,.35),0 4px 18px rgba(0,0,0,.6)}
.fdrop:not([hidden]){animation:fdropIn .25s ease-in-out}
@keyframes fdropIn{from{transform:translateY(1rem);opacity:0}to{transform:none;opacity:1}}
.fdrop-item{display:block;padding:.6rem .9rem;color:var(--grn);font-size:.85rem;
  text-decoration:none;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fdrop-item:last-child{border-bottom:0}
.fdrop-item:hover,.fdrop-item.active{background:rgba(0,255,157,.1)}
.fdrop-none{padding:.7rem .9rem;color:var(--dim);font-size:.8rem}
/* hide the browser's native search clear; we have our own */
.fsearch-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none;width:0;height:0}
.fsearch-input::-ms-clear{display:none;width:0;height:0}
/* fingerprint legend */
.legend{margin:1.2rem 0;color:var(--dim);font-size:.78rem;line-height:1.8;max-width:38rem}
.legend .acc{color:var(--amb);font-weight:700}
/* trackability verdict ranking */
.verdict{margin:1.2rem 0;border:1px solid var(--line);border-radius:6px;background:var(--panel);
  padding:1.1rem 1.2rem;text-align:center;max-width:38rem}
.verdict-label{color:var(--dim);font-size:.7rem;letter-spacing:2px}
.verdict-rank{font-size:1.7rem;font-weight:700;letter-spacing:4px;margin:.35rem 0 .7rem}
.verdict.bad .verdict-rank{color:var(--amb)}
.verdict.good .verdict-rank{color:var(--grn)}
.verdict-meter{display:flex;gap:.4rem;justify-content:center;margin-bottom:.7rem}
.verdict-meter span{width:3rem;height:.5rem;background:var(--line);border-radius:2px}
.verdict.bad .verdict-meter span.on{background:var(--amb)}
.verdict.good .verdict-meter span.on{background:var(--grn)}
.verdict-why{color:var(--dim);font-size:.78rem}
/* readable prose (news issues) */
.prose{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.7;font-size:.95rem}
.prose h3{color:var(--grn);margin:1.2rem 0 .5rem;font-size:1rem;font-family:inherit}
.prose p{margin:.6rem 0;color:var(--txt)}
.prose a{color:var(--grn)}
.issue{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:1.2rem 1.4rem;margin-top:1.2rem}
.issue .ititle{color:var(--grn);font-size:1.05rem;margin-bottom:.2rem}
.issue .idate{color:var(--dim);font-size:.75rem;margin-bottom:.8rem}
.termbar{
  border-top:1px solid var(--line);background:#05070a;
  padding:.55rem 1rem;display:flex;align-items:center;gap:.6rem;
  max-width:960px;margin:0 auto;
}
.termbar .p{color:var(--grn);font-weight:700}
.termbar input{
  flex:1;background:transparent;border:0;outline:0;color:var(--txt);
  font:inherit;min-height:44px;
}
/* light mode (lumos) */
body.light{
  --bg:#ece7db;--panel:#fbf8f1;--panel2:#ffffff;
  --txt:#221f1a;--dim:#6f675c;--line:#d9d2c2;
  --grn:#0c7a34;--amb:#a35c00;--red:#c22;
}
body.light::after{display:none}
body.light .termbar{background:#f3efe4}
.cloudlayer{display:none}
body.light .cloudlayer{
  display:block;position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 220px 70px at 15% 20%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(ellipse 300px 90px at 75% 12%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(ellipse 260px 80px at 45% 32%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse 200px 60px at 88% 45%, rgba(255,255,255,.75), transparent 70%);
  animation:drift 60s linear infinite alternate;
}
@keyframes drift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
body.light .wrap,body.stars .wrap{position:relative;z-index:2}
/* light-mode contrast fixes: dark text on the light palette, light panels */
body.light .term{background:var(--panel)}
body.light ::selection{color:#fbf8f1}
body.light .btn:hover{color:#fbf8f1}
body.light .hypebtn:hover{color:#fbf8f1}
body.light .hypebtn:hover .hypecount{background:#fbf8f1}
body.light .fsearch{background:var(--panel)}
body.light .fsearch:hover .fsearch-btn,body.light .fsearch:focus-within .fsearch-btn,body.light .fsearch.open .fsearch-btn{color:#fbf8f1}
body.light .fdrop{background:var(--panel)}
body.light .faq summary:hover,body.light .faq details[open] summary{color:#fbf8f1}
body.light .faq summary:hover::after,body.light .faq details[open] summary::after{border-top-color:#fbf8f1}
/* starfield (nox) */
.starfield{
  position:fixed;top:0;left:0;width:2px;height:2px;border-radius:50%;
  pointer-events:none;z-index:1;animation:twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.45}to{opacity:1}}
/* dark wash between the stars and the content so text stays readable */
.starwash{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:rgba(4,6,12,.55);
}
/* toolbox extras */
.newtag{
  color:var(--amb);font-size:.62rem;letter-spacing:1px;white-space:nowrap;
  border:1px solid var(--amb);border-radius:3px;padding:.05rem .3rem;margin-left:.5rem;
}
.donate-panel{
  border:1px solid var(--line);background:var(--panel);border-radius:6px;
  padding:1.4rem;text-align:center;margin-top:1rem;
}
.donate-panel .big{color:var(--grn);font-size:1.05rem;margin-bottom:.4rem}
.donate-panel .sub{color:var(--dim);font-size:.85rem}
section.block{scroll-margin-top:76px}
/* services page */
.svcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem;margin:1.4rem 0}
.svccard{border:1px solid var(--line);background:var(--panel);padding:1.1rem 1.1rem 1.2rem;position:relative}
.svccard h3{color:var(--grn);font-size:1rem;letter-spacing:1px;margin:0 0 .5rem}
.svccard .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.svccard .tag{font-size:.66rem;border:1px solid var(--line);padding:.12rem .5rem;color:var(--dim);letter-spacing:1px}
.svccard p{color:var(--txt);font-size:.85rem;line-height:1.55;margin:0 0 1rem}
.svccard .visit{display:inline-block;text-decoration:none}
.svcfeat{border-color:var(--amb)}
.featbadge{position:absolute;top:-.72rem;left:1rem;background:var(--amb);color:#1a1200;font-size:.66rem;font-weight:700;letter-spacing:1px;padding:.16rem .6rem}
.svcdisc{color:var(--dim);font-size:.75rem;margin-top:1.6rem}
.legend a{color:var(--amb);text-decoration:underline;text-underline-offset:2px}
.footlegal{margin:.9rem 0 0;font-size:.72rem}
.footlegal a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.disbody p{color:var(--txt);font-size:.88rem;line-height:1.6;margin:0 0 .9rem;max-width:60ch}
.fbform input.bad{border-color:var(--red)}
.fberr{color:var(--red);font-size:.78rem;margin-top:.35rem}
.svccard .tag.aff{border-color:var(--amb);color:var(--amb);font-weight:700}
.seenon{font-size:.72rem;color:var(--dim);margin:-.2rem 0 .8rem}
.seenon a{color:var(--amb);text-decoration:underline;text-underline-offset:2px}
.fdrop-item em{font-style:normal;color:var(--dim);font-size:.7rem;letter-spacing:1px}
.fdrop-item.fdrop-engine{border-top:1px solid var(--line);color:var(--amb)}
.selist{display:flex;flex-direction:column;gap:.6rem;margin-top:1.2rem}
.serow{display:flex;align-items:baseline;gap:.8rem;border:1px solid var(--line);background:var(--panel);padding:.8rem 1rem;text-decoration:none}
.serow:hover{border-color:var(--grn)}
.serow .n{color:var(--grn);font-weight:700;overflow-wrap:anywhere}
.serow .ty{margin-left:auto;flex:none;color:var(--dim);font-size:.68rem;letter-spacing:1px}
.secount{color:var(--dim);font-size:.8rem;margin-top:1rem}
.sebig{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--txt);font:inherit;font-size:1.05rem;padding:.9rem 1.1rem}
.sebig:focus{outline:none;border-color:var(--grn)}
.fbsel{width:100%;background-color:rgba(51,255,102,.06);border:1px solid var(--grn);border-radius:6px;color:var(--grn);font:inherit;padding:.8rem 2.4rem .8rem 1rem;min-height:48px;margin-bottom:1.2rem;appearance:none;-webkit-appearance:none;cursor:pointer;transition:all .3s ease-in-out;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2333ff66' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.fbsel:hover,.fbsel:focus{outline:none;border-color:var(--grn);box-shadow:0 0 22px rgba(51,255,102,.55)}
.fbsel option{background:var(--panel);color:var(--txt)}
/* tool text input + qr output */
.tinput{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--txt);font:inherit;padding:.8rem 1rem;min-height:48px;margin:.4rem 0 1rem}
.tinput:focus{outline:none;border-color:var(--grn)}
.tarea{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--txt);font:inherit;padding:.8rem 1rem;min-height:160px;margin:.4rem 0 1rem;resize:vertical}
.tarea:focus{outline:none;border-color:var(--grn)}
.tarea[readonly]{color:var(--dim)}
.jbrow{display:flex;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.jbrow .btn{margin-top:0}
.jberr{color:var(--red);font-size:.85rem;margin:.4rem 0;min-height:1.2em}
/* epub reader */
.eb-body{max-width:38rem;margin:1.2rem auto 0;color:var(--txt);line-height:1.8;font-size:.95rem;overflow-wrap:break-word}
.eb-body img{max-width:100%;height:auto;display:block;margin:1rem auto}
.eb-body h1,.eb-body h2,.eb-body h3{color:var(--grn);margin:1.4rem 0 .8rem;line-height:1.3}
.eb-body p{margin:.8rem 0}
.eb-nav{display:flex;gap:.6rem;align-items:center;margin-top:1rem;flex-wrap:wrap}
.eb-nav .btn{margin-top:0}
.eb-nav .btn:disabled{opacity:.4;cursor:default}
.eb-count{color:var(--dim);font-size:.8rem;letter-spacing:1px}
.toollabel{color:var(--dim);font-size:.8rem;letter-spacing:1px}
#qr-cv{display:block;max-width:min(100%,320px);height:auto;margin:1rem 0;border:1px solid var(--line);border-radius:6px}
#qr-empty{color:var(--dim);font-size:.85rem;margin:1rem 0}
.dimrow{display:flex;gap:.8rem;margin:.4rem 0 1rem}
.dimrow>div{flex:1;min-width:0}
.dimrow .tinput{margin:.4rem 0 0}
.dimrow .fbsel{margin:.4rem 0 0;min-height:48px}
#ir-cv{display:block;max-width:100%;height:auto;margin:1rem 0;border:1px solid var(--line);border-radius:6px}
#ir-empty{color:var(--dim);font-size:.85rem;margin:1rem 0}
/* emoji finder */
.emgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:.4rem;margin-top:1rem}
.emgrid button{background:var(--panel);border:1px solid var(--line);border-radius:6px;font-size:1.7rem;line-height:1;padding:.55rem .2rem;cursor:pointer;transition:transform .15s ease-in-out,box-shadow .15s ease-in-out,border-color .15s ease-in-out}
.emgrid button:hover{border-color:var(--grn);box-shadow:0 0 12px rgba(51,255,102,.35);transform:scale(1.1)}
#em-status{color:var(--grn);font-size:.8rem;letter-spacing:1px;min-height:1.3em;margin-top:.6rem}
/* piano */
.piano{position:relative;display:flex;user-select:none;-webkit-user-select:none;margin-top:1rem;height:230px;touch-action:manipulation}
.pw{flex:1;background:#f2f2f2;border:1px solid #8a8a8a;border-radius:0 0 5px 5px;position:relative;cursor:pointer;color:#555;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.6rem;font-size:.68rem;letter-spacing:1px;min-width:0}
.pw.on{background:#cfd8dc}
.pb{position:absolute;top:0;width:5.4%;height:58%;background:#161616;border:1px solid #000;border-radius:0 0 4px 4px;z-index:2;cursor:pointer;color:#777;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.45rem;font-size:.6rem}
.pb.on{background:#2e7d32}
/* snake */
#sn-cv{display:block;background:#070b07;border:1px solid var(--line);border-radius:6px;max-width:100%;height:auto;touch-action:none}
.sn-hud{display:flex;gap:1.4rem;align-items:center;margin:.8rem 0;color:var(--dim);font-size:.85rem;letter-spacing:1px}
.sn-hud b{color:var(--grn);font-weight:normal}
#sn-msg{color:var(--grn);font-size:1rem;letter-spacing:2px;margin:.6rem 0;min-height:1.5em}
/* text to speech */
.tslider{width:100%;margin:.4rem 0 1rem;accent-color:var(--grn)}
.tsval{color:var(--grn);font-size:.8rem}
/* faq dropdowns: scifi trigger + staggered fly-in, adapted to the terminal palette */
.faq{margin:1.2rem 0;max-width:38rem}
.faq details{margin-bottom:.6rem}
.faq summary{position:relative;display:block;border:1px solid var(--grn);background:rgba(51,255,102,.06);color:var(--grn);font-size:.85rem;padding:.7rem 2.6rem .7rem 1rem;cursor:pointer;list-style:none;user-select:none;transition:all .3s ease-in-out}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;top:50%;right:1rem;transform:translateY(-70%);border-top:9px solid var(--grn);border-left:9px solid transparent;border-right:9px solid transparent;transition:all .3s ease-in-out}
.faq summary:hover{box-shadow:0 0 22px rgba(51,255,102,.55),0 1px 4px rgba(0,0,0,.6);border-color:var(--grn);background:var(--grn);color:#04140a}
.faq summary:hover::after{border-top-color:#04140a}
.faq details[open] summary{background:var(--grn);color:#04140a;box-shadow:0 0 22px rgba(51,255,102,.35)}
.faq details[open] summary::after{border-top-color:#04140a;transform:translateY(-30%) rotate(180deg)}
.faqbody{border:1px solid var(--line);border-top:0;background:var(--panel);padding:.9rem 1rem;color:var(--dim);font-size:.78rem;line-height:1.8;overflow:hidden}
.faqbody a{color:var(--amb);text-decoration:underline;text-underline-offset:2px}
.faq details[open] .faqbody{animation:faqIn .32s ease-in-out}
.faq details:nth-of-type(even)[open] .faqbody{animation-name:faqInR}
@keyframes faqIn{from{transform:translateX(-4rem) skewX(18deg);opacity:0}to{transform:none;opacity:1}}
@keyframes faqInR{from{transform:translateX(4rem) skewX(-18deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.faq summary,.faq summary::after,.fbsel{transition:none}.faq details[open] .faqbody,.fdrop:not([hidden]){animation:none}.bggrid i{transition:none}}
.perks{list-style:none;margin:0 auto 1.4rem;padding:0;max-width:36rem}
.perks li{color:var(--dim);font-size:.85rem;margin-bottom:.4rem}
.perks li::before{content:'\00bb  ';color:var(--grn)}
.term .v.t-bad{color:var(--red)}
.term .v.t-warn{color:var(--amb)}
.term .v.t-good{color:var(--grn)}
/* 2048 tiles */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:22rem;margin:.8rem 0}
.tcell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--dim);font-size:1.35rem;min-height:3rem;user-select:none}
.tcell.t2{background:rgba(51,255,102,.08);color:var(--grn)}
.tcell.t4{background:rgba(51,255,102,.16);color:var(--grn)}
.tcell.t8{background:rgba(51,255,102,.28);color:#04140a}
.tcell.t16{background:rgba(51,255,102,.42);color:#04140a}
.tcell.t32{background:rgba(51,255,102,.56);color:#04140a}
.tcell.t64{background:rgba(51,255,102,.72);color:#04140a}
.tcell.t128{background:rgba(255,176,0,.35);color:var(--amb)}
.tcell.t256{background:rgba(255,176,0,.5);color:#1a1000}
.tcell.t512{background:rgba(255,176,0,.68);color:#1a1000}
.tcell.t1024{background:rgba(255,80,80,.4);color:var(--red)}
.tcell.t2048{background:var(--grn);color:#04140a;font-weight:bold;box-shadow:0 0 18px rgba(51,255,102,.6)}
.tcell.tbig{background:var(--amb);color:#1a1000;font-weight:bold}