/* Idle Master — shared by index.html and docs.html */
:root{
--bg:#111318; --panel:#1a1d25; --input:#0d0f13; --logbg:#0b0d11;
--logfg:#a8cbe8; --fg:#e2e6ec; --dim:#78808c; --accent:#8fc1f0;
--good:#1e4e78; --danger:#6e2830; --neutral:#232833; --warn:#d08484;
--line:#242a35;
--mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
--sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0; background:var(--bg); color:var(--fg);
font:16px/1.65 var(--sans);
background-image:radial-gradient(900px 500px at 50% -180px,#18202c 0%,transparent 70%);
background-repeat:no-repeat;
}
.wrap{max-width:960px;margin:0 auto;padding:0 22px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;letter-spacing:-.01em}
h2{font-size:1.6rem;margin:0 0 6px}
h3{font-size:1.05rem;margin:28px 0 8px;color:var(--fg)}
p{margin:0 0 14px}
code{font-family:var(--mono);font-size:.87em;background:var(--input);
border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--logfg)}
section{padding:56px 0;border-top:1px solid var(--line)}
.lead{color:var(--dim);max-width:62ch}
.kicker{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
color:var(--dim);margin:0 0 14px}
/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:10;background:rgba(17,19,24,.86);
backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:22px;height:54px}
.brand{font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.brand span{color:var(--accent)}
nav .links{margin-left:auto;display:flex;gap:20px;font-size:.9rem}
nav .links a{color:var(--dim)}
nav .links a:hover{color:var(--fg);text-decoration:none}
nav .links a.here{color:var(--fg)}
/* ---------- hero ---------- */
header{padding:76px 0 62px}
header h1{font-size:clamp(2.3rem,6vw,3.4rem);margin:0 0 16px;font-weight:800}
header h1 .hl{color:var(--accent)}
.sub{font-size:1.12rem;color:var(--dim);max-width:60ch;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:7px;
font-weight:600;font-size:.95rem;border:1px solid transparent;transition:.14s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--good);color:#eaf3fb;border-color:#2a608e}
.btn-primary:hover{background:#25608f}
.btn-ghost{background:var(--neutral);color:var(--fg);border-color:var(--line)}
.btn-ghost:hover{background:#2b313e}
.meta{color:var(--dim);font-size:.85rem;margin:14px 0 0}
.meta code{background:none;border:none;padding:0}
/* ---------- console ---------- */
.console{background:var(--logbg);border:1px solid var(--line);border-radius:9px;
overflow:hidden;box-shadow:0 18px 40px -24px #000}
.console .bar{display:flex;align-items:center;gap:7px;padding:9px 12px;
background:var(--panel);border-bottom:1px solid var(--line)}
.dot{width:10px;height:10px;border-radius:50%;background:#2c333f}
.console .bar .t{margin-left:8px;font:12px/1 var(--mono);color:var(--dim)}
.console pre{margin:0;padding:16px 18px;overflow-x:auto;
font:13px/1.75 var(--mono);color:var(--logfg)}
.console .d{color:var(--dim)}
.console .a{color:var(--accent)}
.console .w{color:var(--warn)}
/* ---------- screen clips (framed recordings of the real app) ---------- */
.clip{margin:0}
.shot{background:var(--logbg);border:1px solid var(--line);border-radius:10px;
overflow:hidden;box-shadow:0 22px 50px -30px #000}
.shot .bar{display:flex;align-items:center;gap:7px;padding:9px 12px;
background:var(--panel);border-bottom:1px solid var(--line)}
.shot .bar .t{margin-left:8px;font:12px/1 var(--mono);color:var(--dim);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot .bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
font:600 10px/1 var(--sans);letter-spacing:.1em;color:var(--dim)}
.shot .bar .live::before{content:"";width:7px;height:7px;border-radius:50%;
background:#d06a6a;box-shadow:0 0 0 0 rgba(208,106,106,.5);
animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(208,106,106,.45)}
70%{box-shadow:0 0 0 6px rgba(208,106,106,0)}
100%{box-shadow:0 0 0 0 rgba(208,106,106,0)}}
.shot img{display:block;width:100%;height:auto;background:var(--logbg)}
.clip figcaption{margin:12px 2px 0;color:var(--dim);font-size:.9rem;max-width:60ch}
.clip figcaption b{color:var(--logfg);font-weight:600}
/* hero: one big clip, centred and capped so the tall window stays readable */
.hero-clip{max-width:460px;margin:38px auto 0}
.hero-clip figcaption{text-align:center;margin-left:auto;margin-right:auto}
/* a clip sitting beside prose */
.clip.inline{margin-top:8px}
/* the gallery of everything-else-in-the-window */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;margin-top:30px}
.gallery>*{min-width:0}
@media (prefers-reduced-motion:reduce){
.shot .bar .live::before{animation:none}
}
@media (max-width:720px){
.gallery{grid-template-columns:1fr}
}
/* ---------- modes ---------- */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 0}
.mode{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
.mode .tag{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.11em;
padding:6px 10px;border-radius:5px;margin:0 0 12px}
.mode.boost .tag{background:var(--good);color:#dcecfa}
.mode.idle .tag{background:var(--danger);color:#f2d9dc}
.mode h3{margin:0 0 8px;font-size:1.15rem}
.mode p{margin:0 0 10px;color:var(--dim);font-size:.95rem}
.mode .keeps{font-size:.85rem;color:var(--dim);border-top:1px solid var(--line);
padding-top:11px;margin-top:14px}
.mode .keeps b{color:var(--logfg);font-weight:600}
.restore{margin-top:16px;background:var(--input);border:1px solid var(--line);
border-radius:10px;padding:16px 20px;color:var(--dim);font-size:.95rem}
.restore b{color:var(--fg)}
/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:.93rem;
background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.tbl th{text-align:left;font:600 12px/1 var(--sans);letter-spacing:.09em;
text-transform:uppercase;color:var(--dim);padding:12px 16px;
background:var(--input);border-bottom:1px solid var(--line)}
.tbl td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl td.n{font-family:var(--mono);color:var(--logfg);white-space:nowrap}
.scroll{overflow-x:auto}
.pill{display:inline-block;font:700 10px/1 var(--mono);letter-spacing:.08em;
padding:4px 7px;border-radius:4px;border:1px solid}
.pill.b{color:#9cc9f2;border-color:#2a608e;background:#16283a}
.pill.i{color:#e0a9ad;border-color:#7a3038;background:#31191d}
/* ---------- toast mock ---------- */
.toast{background:var(--panel);border:1px solid #2f3a49;border-radius:9px;
padding:16px 18px;max-width:430px;box-shadow:0 16px 34px -20px #000;margin:6px 0 0}
.toast .h{font-weight:700;margin:0 0 6px}
.toast .b{color:var(--dim);font-size:.9rem;margin:0 0 14px}
.toast .row{display:flex;gap:8px;flex-wrap:wrap}
.toast .row span{font-size:.82rem;padding:6px 12px;border-radius:5px;
border:1px solid var(--line);background:var(--neutral);color:var(--fg)}
.toast .row span.k{background:var(--good);border-color:#2a608e;color:#e6f1fb}
.toast .row span.t{background:var(--danger);border-color:#8a3a44;color:#f6dfe2}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
/* grid items default to min-width:auto, which lets a wide push the page sideways */
.cols>*,.modes>*{min-width:0}
.note{border-left:2px solid var(--warn);padding:2px 0 2px 16px;color:var(--dim);
margin:18px 0;font-size:.95rem}
.note b{color:var(--warn)}
ul{margin:0 0 14px;padding-left:20px;color:var(--dim)}
li{margin:0 0 8px}
li b{color:var(--fg);font-weight:600}
footer{border-top:1px solid var(--line);padding:34px 0 54px;color:var(--dim);font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
footer a{color:var(--dim)}
/* ---------- docs page ---------- */
.doc{max-width:1180px;margin:0 auto;padding:0 22px;
display:grid;grid-template-columns:214px 1fr;gap:52px;align-items:start}
.toc{position:sticky;top:54px;padding:38px 0 40px;font-size:.9rem;
max-height:calc(100vh - 54px);overflow-y:auto}
.toc b{display:block;font:600 11px/1 var(--sans);letter-spacing:.13em;
text-transform:uppercase;color:var(--dim);margin:22px 0 10px}
.toc b:first-child{margin-top:0}
.toc a{display:block;color:var(--dim);padding:4px 0 4px 11px;
border-left:1px solid var(--line);line-height:1.4}
.toc a:hover{color:var(--fg);border-left-color:var(--accent);text-decoration:none}
.docbody{padding:38px 0 20px;min-width:0}
.docbody h1{font-size:2.1rem;margin:0 0 10px;font-weight:800}
.docbody section{padding:34px 0 4px;border-top:1px solid var(--line);scroll-margin-top:66px}
.docbody section:first-of-type{border-top:none;padding-top:12px}
.docbody h2{font-size:1.42rem;margin:0 0 12px}
.docbody h3{margin:26px 0 8px}
.docbody p{color:var(--dim);max-width:70ch}
.docbody p.tight{margin-bottom:8px}
.docbody strong{color:var(--fg);font-weight:600}
.docbody ul{max-width:70ch}
.docbody .console{margin:14px 0 18px}
.docbody .tbl td:first-child{white-space:nowrap}
.docbody .tbl td.wrap-ok{white-space:normal}
.anchor{color:var(--line);margin-left:9px;font-weight:400;font-size:.75em}
.anchor:hover{color:var(--accent);text-decoration:none}
.steps{counter-reset:s;list-style:none;padding-left:0;max-width:70ch}
.steps li{counter-increment:s;position:relative;padding-left:38px;margin:0 0 14px}
.steps li:before{content:counter(s);position:absolute;left:0;top:1px;
width:24px;height:24px;border-radius:50%;background:var(--neutral);
border:1px solid var(--line);color:var(--logfg);
font:700 12px/23px var(--mono);text-align:center}
.tip{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent);
border-radius:0 9px 9px 0;padding:14px 18px;margin:18px 0;
color:var(--dim);font-size:.95rem;max-width:70ch}
.tip b{color:var(--fg)}
.tip p:last-child,.note p:last-child{margin-bottom:0}
.docfoot{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0;
padding-top:26px;border-top:1px solid var(--line)}
@media (max-width:900px){
.doc{grid-template-columns:1fr;gap:0}
.toc{position:static;max-height:none;padding:26px 0 0;
columns:2;column-gap:26px}
.toc a{border-left:none;padding-left:0}
.toc b{margin-top:16px}
}
@media (max-width:720px){
.modes,.cols{grid-template-columns:1fr}
nav .links a:not(.gh):not(.docs){display:none}
header{padding:52px 0 44px}
section{padding:44px 0}
.toc{columns:1}
}