:root{
  --bg:#080802;
  --fg:#f0a020;
  --fg-bright:#ffd28a;
  --fg-dim:#a47c1c;
  --surface:#0f0e04;
  --border:#3a2a00;--border-soft:#241a02;
  --error:#ff6b6b;
  --ok:#8f8;
  --warn:#ffb347;
  --font:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--fg);font-family:var(--font)}
body{overflow:hidden}
body.nav-open,body.pal-open{overflow:hidden}
button{font-family:inherit}
:where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--fg-bright);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-48px;z-index:200;background:var(--fg);color:#1a1000;padding:8px 12px;border-radius:0 0 8px 8px;font-weight:600;text-decoration:none}
.skip-link:focus{top:0}

.layout{display:flex;height:100vh;height:100dvh}

/* ---------- sidebar ---------- */
.sidebar{width:280px;border-right:1px solid var(--border);padding:24px 16px;background:var(--bg);overflow-y:auto;flex-shrink:0;height:100%}
.logo{display:inline-block;background:none;border:0;padding:0;font-weight:700;font-size:1.6rem;letter-spacing:-0.03em;color:var(--fg);cursor:pointer;text-align:left}
.logo:hover{color:var(--fg-bright)}
.tagline{font-size:0.78rem;line-height:1.5;color:var(--fg-dim);margin:8px 0 16px;max-width:235px}
.search-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0 0 18px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--fg-dim);font-size:0.82rem;cursor:pointer;text-align:left;transition:border-color .15s,color .15s}
.search-trigger:hover{border-color:var(--fg);color:var(--fg)}
kbd{font-family:var(--mono);font-size:0.72em;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--fg);background:#050500}
.side-note{margin-top:24px;font-size:0.72rem;color:var(--fg-dim);letter-spacing:0.08em;text-transform:uppercase}
.tree-group{margin-bottom:18px}
.tree-group h3{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-dim);margin-bottom:6px;padding-left:4px}
.tree-group h3 a{color:inherit;text-decoration:none}
.tree-group h3 a:hover{color:var(--fg)}
.tree ul{list-style:none}
.tree li{font-size:0.88rem;border-radius:6px;color:#b08a30;transition:background .15s,color .15s;user-select:none}
.tree li a{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:5px 8px;border-radius:6px;cursor:pointer;text-decoration:none}
.tree li:hover{background:rgba(240,160,32,0.1);color:var(--fg)}
.tree li.active{background:rgba(240,160,32,0.16);color:var(--fg-bright)}
.tree li.home{color:var(--fg);border-left:2px solid var(--border);margin-bottom:8px}
.tree li.home a{padding-left:6px}
.tree li a:focus-visible{outline-offset:-2px}

/* ---------- body pane / storm ---------- */
.body-pane{flex:1;min-width:0;padding:16px;overflow:auto;position:relative;display:flex}
.body-pane:focus{outline:none}
#storm{flex:1;font-family:var(--mono);font-size:clamp(7px,0.95vw,13px);line-height:1.06;white-space:pre;overflow:hidden;width:100%;height:100%;opacity:0.95;transition:filter .12s ease;text-align:center}
#storm.flash{filter:brightness(2.1) drop-shadow(0 0 22px rgba(255,215,120,0.55))}
.r1{color:#4a3410}
.r2{color:#8a6215}
.r3{color:#c18518}
.rh{color:#f0c060}
.cl{color:#3a2d10}
.bolt{color:#fff3c4;text-shadow:0 0 8px rgba(255,220,120,0.9)}
.banner{color:#f0a020;}
.banner-dim{color:#6a4d0c}

/* ---------- tool cards ---------- */
.tool-card{flex:1;max-width:760px;margin:0 auto;width:100%}
.tool-card h2{font-size:1.4rem;font-weight:600;margin:8px 0 4px;color:var(--fg-bright)}
.tool-card h2:focus{outline:none}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 4px}
.card-head h2{margin:0}
.card-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-action{background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--fg);width:34px;height:34px;font-size:1rem;cursor:pointer;line-height:1}
.icon-action:hover{border-color:var(--fg)}
.icon-action[aria-pressed="true"]{color:var(--fg-bright);border-color:var(--fg)}
.ghost-btn{background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--fg);padding:7px 12px;font-size:0.8rem;cursor:pointer;font-family:inherit}
.ghost-btn:hover{border-color:var(--fg)}
.tool-about{margin:4px 0 24px;padding:18px 20px;border:1px solid var(--border-soft);border-radius:12px;background:rgba(15,14,4,0.6)}
.tool-about h3{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--fg-dim);margin:12px 0 6px}
.tool-about h3:first-child{margin-top:0}
.tool-card h1{font-size:1.6rem;font-weight:600;margin:8px 0 4px;color:var(--fg-bright)}
/* Generated SEO pages ship static copy in #card; hide it as soon as JS is running. */
html.heyutil-js #card:not(.ready){display:none}
.tool-about p,.tool-card>p{font-size:0.88rem;line-height:1.6;color:var(--fg)}
.faq{display:flex;flex-direction:column;gap:10px}
.faq-item dt{font-size:0.85rem;color:var(--fg-bright);font-weight:600}
.faq-item dd{font-size:0.82rem;line-height:1.55;color:var(--fg-dim);margin-top:2px}
.related{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.related a{display:inline-block;font-size:0.8rem;color:var(--fg);border:1px solid var(--border);border-radius:999px;padding:5px 11px;text-decoration:none}
.related a:hover{border-color:var(--fg);color:var(--fg-bright)}
.tool-card .hint{font-size:0.82rem;color:var(--fg-dim);margin-bottom:8px}
.tool{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 30px rgba(0,0,0,0.45)}
.field{display:flex;flex-direction:column;gap:4px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.row .field{flex:1;min-width:110px}
.field label{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-dim)}
.tool input,.tool select,.tool textarea{background:#050500;border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--fg);font-family:inherit;font-size:0.95rem;outline:none;transition:border-color .15s;width:100%}
.tool input:focus,.tool select:focus,.tool textarea:focus{border-color:#f0a020;box-shadow:0 0 0 3px rgba(240,160,32,0.15)}
.tool input[type="color"]{padding:4px;height:2.6rem;cursor:pointer}
.tool textarea{font-family:var(--mono);font-size:0.85rem;resize:vertical;min-height:70px}
.tool .res{color:var(--fg-bright);font-family:var(--mono);font-size:0.95rem;min-height:1.4rem;word-break:break-word;white-space:pre-wrap}
.tool .res.err{color:var(--error)}
.tool .res.warn{color:var(--warn)}
.tool small.muted,.muted{font-size:0.78rem;color:var(--fg-dim)}
.muted.warn{color:var(--warn)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn-row button{background:linear-gradient(135deg,#f0a020,#ffd28a);border:none;border-radius:8px;padding:9px 16px;min-height:38px;color:#1a1000;font-weight:600;font-size:0.86rem;cursor:pointer;transition:all .15s ease;font-family:var(--font)}
.btn-row button:hover{filter:brightness(1.15)}
.btn-row button:active{transform:translateY(1px)}
.btn-row button.ghost{background:transparent;border:1px solid var(--border);color:var(--fg)}
.btn-row button.ghost:hover{border-color:var(--fg);filter:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-2 .kv b{color:var(--fg-dim);font-weight:500;margin-right:6px;font-size:0.78rem;text-transform:uppercase}
.timer-display{font-family:var(--mono);font-size:2.6rem;color:var(--fg-bright);text-align:center;padding:12px 0;font-weight:700}

/* QR */
#qr-box{display:flex;justify-content:center}
#qr-box img,#qr-box svg{border-radius:8px;border:1px solid var(--border);background:#fff;padding:8px;width:180px;height:180px;object-fit:contain}

/* color swatch */
.color-swatch{width:100%;height:56px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700}

/* stopwatch laps */
.sw-laps{font-family:var(--mono);font-size:0.8rem;color:var(--fg-dim);max-height:130px;overflow:auto}

/* ---------- mobile bar / drawer ---------- */
.mobile-bar{display:none}
.icon-btn{background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--fg);width:38px;height:38px;font-size:1.05rem;cursor:pointer}
.icon-btn:hover{border-color:var(--fg)}
.mobile-title{background:none;border:0;color:var(--fg);font-weight:700;font-size:1.1rem;letter-spacing:-0.02em;cursor:pointer}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.66);z-index:90}
.backdrop[hidden]{display:none}

/* ---------- command palette ---------- */
.palette{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:rgba(4,4,0,0.72);backdrop-filter:blur(4px)}
.palette[hidden]{display:none}
.palette-box{position:relative;width:min(640px,100%);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,0.6);overflow:hidden}
.dialog-close{position:absolute;top:10px;right:10px;z-index:2;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--fg);width:30px;height:30px;line-height:1;font-size:1rem;cursor:pointer}
.dialog-close:hover{border-color:var(--fg)}
.card-actions{flex-wrap:wrap;justify-content:flex-end}
.card-head{flex-wrap:wrap}
.issue-list{display:flex;flex-direction:column;gap:4px}
.issue{font-family:var(--mono);font-size:0.78rem;color:var(--fg-dim)}
#palette-input{width:100%;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--fg-bright);font-family:var(--font);font-size:1.05rem;padding:16px 18px;outline:none}
#palette-input::placeholder{color:var(--fg-dim)}
#palette-results{list-style:none;max-height:min(52vh,420px);overflow:auto;padding:6px}
#palette-results li{margin:2px 0}
#palette-results button{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 12px;color:var(--fg);cursor:pointer;font:inherit}
#palette-results button:hover,#palette-results li[aria-selected="true"] button{background:rgba(240,160,32,0.14)}
.pal-name{font-size:0.95rem;grid-column:1;grid-row:1}
.pal-desc{font-size:0.76rem;color:var(--fg-dim);line-height:1.3;grid-column:1;grid-row:2}
.pal-group{grid-column:2;grid-row:1/3;align-self:center;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-dim)}
.pal-empty{padding:14px;color:var(--fg-dim);font-size:0.85rem}
.palette-hint{margin:0;padding:10px 14px;border-top:1px solid var(--border-soft);font-size:0.72rem;color:var(--fg-dim)}
.palette-box:focus{outline:none}
.shortcuts-title{margin:0;padding:16px 18px;border-bottom:1px solid var(--border);font-size:1rem;color:var(--fg-bright)}
.shortcuts{margin:0;padding:12px 18px 16px;display:flex;flex-direction:column;gap:9px}
.shortcuts div{display:flex;justify-content:space-between;gap:16px;font-size:0.85rem}
.shortcuts dt{color:var(--fg)}
.shortcuts dd{margin:0;color:var(--fg-dim)}

/* sidebar footer */
.side-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.side-actions .ghost-btn{font-size:0.74rem;padding:6px 10px}
.side-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.side-links a{font-size:0.75rem;color:var(--fg-dim);text-decoration:none}
.side-links a:hover{color:var(--fg)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;background:var(--surface);border:1px solid var(--border);color:var(--fg-bright);padding:10px 16px;border-radius:10px;font-size:0.85rem;box-shadow:0 12px 30px rgba(0,0,0,0.5)}
.toast[hidden]{display:none}
.noscript{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--fg);font-size:1.1rem}

/* ---------- data / business tool pieces ---------- */
.tool input[type="checkbox"]{width:auto;height:auto;padding:0;border:0;background:none;box-shadow:none;accent-color:var(--fg)}
.check{display:inline-flex;align-items:center;gap:7px;font-size:0.82rem;color:var(--fg);cursor:pointer}
.fieldset{display:flex;flex-wrap:wrap;gap:12px 18px}
.table-wrap{overflow:auto;max-height:340px;border:1px solid var(--border-soft);border-radius:10px}
table.data{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:0.78rem}
table.data th,table.data td{padding:6px 10px;border-bottom:1px solid var(--border-soft);text-align:left;white-space:nowrap}
table.data th{position:sticky;top:0;background:var(--surface);color:var(--fg-bright);font-weight:600}
table.data tr:last-child td{border-bottom:0}
pre.code-block{font-family:var(--mono);font-size:0.78rem;line-height:1.5;background:#050500;border:1px solid var(--border-soft);border-radius:8px;padding:10px;overflow:auto;max-height:220px;white-space:pre-wrap;word-break:break-word;color:var(--fg)}
h3.sub{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-dim);margin-bottom:6px;font-weight:500}
pre.diff{font-family:var(--mono);font-size:0.82rem;line-height:1.55;background:#050500;border:1px solid var(--border-soft);border-radius:10px;padding:12px;overflow:auto;max-height:360px;white-space:pre-wrap;word-break:break-word}
.diff-add{color:var(--ok)}
.diff-del{color:var(--error)}
.diff-same{color:var(--fg-dim)}
.inv-row{display:grid;grid-template-columns:1fr 78px 110px 36px;gap:8px;align-items:center;margin-bottom:8px}
.rx-list{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:0.8rem}
.rx-item{padding:6px 10px;border:1px solid var(--border-soft);border-radius:8px;word-break:break-all}
.rx-index{color:var(--fg-dim);margin-right:8px}
.rx-group{color:var(--fg-dim);margin-left:8px}
.hash-val{word-break:break-all;font-size:0.72rem}
.grid-2 .kv span{word-break:break-all}

/* ---------- standalone content pages (privacy) ---------- */
body.doc-page{overflow:auto;height:auto;min-height:100%}
.doc{max-width:760px;margin:0 auto;padding:40px 20px 80px}
.doc .logo{margin-bottom:18px}
.doc h1{font-size:1.9rem;color:var(--fg-bright);margin-bottom:8px}
.doc .tool h2{font-size:1rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--fg-dim);margin:22px 0 10px}
.doc .tool h2:first-child{margin-top:0}
.doc .tool ul{margin:0 0 6px 18px;display:flex;flex-direction:column;gap:8px}
.doc .tool li{font-size:0.9rem;line-height:1.6;color:var(--fg)}
.doc .tool p{font-size:0.9rem;line-height:1.6;color:var(--fg)}
.doc .tool code{font-family:var(--mono);font-size:0.82em;color:var(--fg-bright)}
.doc a{color:var(--fg-bright)}
.doc h2.sub{font-size:1.05rem;color:var(--fg-bright);margin:28px 0 10px}
.doc .tool-index{list-style:none;display:flex;flex-direction:column;gap:14px}
.doc .tool-index li{display:flex;flex-direction:column;gap:2px}
.doc .tool-index a{font-size:0.98rem;text-decoration:none;color:var(--fg-bright)}
.doc .tool-index a:hover{text-decoration:underline}
.doc .tool-index span{font-size:0.83rem;color:var(--fg-dim)}
.doc .related{display:flex;flex-wrap:wrap;gap:10px}
.doc .related a{border:1px solid var(--border);border-radius:999px;padding:5px 12px;text-decoration:none}
.doc-links{font-size:0.8rem;color:var(--fg-dim);margin:22px 0 6px}
.doc-links a{color:var(--fg-dim);text-decoration:none}
.doc-links a:hover{color:var(--fg)}

/* responsive */
@media(max-width:720px){
  body{overflow:auto}
  .mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:52px;padding:0 12px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:70}
  .layout{display:block;height:auto;min-height:calc(100dvh - 52px)}
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:100;width:min(86vw,320px);height:100dvh;max-height:none;transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility .2s;border-right:1px solid var(--border);box-shadow:20px 0 50px rgba(0,0,0,0.55)}
  .sidebar.open{transform:none;visibility:visible}
  .body-pane{height:calc(100dvh - 52px);padding:12px}
  .tool-card{max-width:none}
  .grid-2{grid-template-columns:1fr}
  #storm{font-size:clamp(5px,1.3vw,10px)}
  .palette{padding:10vh 12px 12px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  #storm.flash{filter:none}
}