:root{
  --bg:#F4F2EF; --card:#FFFFFF; --line:#E6DFD6; --ink:#2A0A0A; --mute:#7A6560; --soft:#EFEAE3;
  --accent:#F44027; --accent-soft:#FDE3DE; --ai1:#990808; --ai2:#EDC537; --danger:#990808;
}
html.dark{
  --bg:#111215; --card:#191A1F; --line:#2A2C33; --ink:#EDECE8; --mute:#94939A; --soft:#22242A;
  --accent:#F44027; --accent-soft:#3A1512; --danger:#F44027;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Bricolage Grotesque',system-ui,sans-serif;
  background-image:radial-gradient(circle at 1px 1px, rgba(120,110,90,.10) 1px, transparent 0);background-size:22px 22px;}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card:hover{box-shadow:0 4px 18px rgba(0,0,0,.05)}
.mute{color:var(--mute)}
.line{border-color:var(--line)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;font-weight:600;font-size:14px;transition:.15s;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.btn:hover{background:var(--soft)}
.btn-p{background:var(--ink);color:var(--card);border-color:var(--ink)}
.btn-p:hover{opacity:.88;background:var(--ink)}
.btn-ai{background:linear-gradient(110deg,var(--ai1),#F44027 55%,var(--ai2));color:#fff;border:none}
.btn-ai:hover{filter:brightness(1.08)}
.inp{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:14px;outline:none}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ai-border{position:relative;border:none;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(120deg,var(--ai1),#F44027,var(--ai2)) border-box;border:1.5px solid transparent}
.ai-text{background:linear-gradient(100deg,var(--ai1),#F44027,var(--ai2));-webkit-background-clip:text;background-clip:text;color:transparent}
.fade{animation:fade .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.shimmer{background:linear-gradient(90deg,var(--soft) 25%,var(--line) 50%,var(--soft) 75%);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:10px}
@keyframes sh{to{background-position:-200% 0}}
.orbit{position:absolute;border:1px dashed rgba(255,255,255,.25);border-radius:50%;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.float{animation:flt 6s ease-in-out infinite}
@keyframes flt{50%{transform:translateY(-10px)}}
.strike{text-decoration:line-through;opacity:.5}
.navi{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;font-weight:500;color:var(--mute);cursor:pointer;position:relative}
.navi:hover{background:var(--soft);color:var(--ink)}
.navi.on{background:var(--accent-soft);color:var(--ink);font-weight:700}
.navi.on:before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
.scroll::-webkit-scrollbar{height:8px;width:8px}.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
select.inp{appearance:auto}