:root { --bg:#f4f4f2; --card:#fff; --line:#e6e6e2; --text:#151515; --muted:#77776f; --bar:#ebebe7; color-scheme:light;
        --c1:#b79f6a; --c2:#7fa391; --c3:#7b8fb0; --c4:#a58bad; }
:root[data-theme="dark"] { --bg:#0c0c0c; --card:#151515; --line:#262626; --text:#ececea; --muted:#8d8d86; --bar:#242424; color-scheme:dark;
        --c1:#c9b27c; --c2:#8fb3a0; --c3:#8da0c2; --c4:#b79fbf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0c0c0c; --card:#151515; --line:#262626; --text:#ececea; --muted:#8d8d86; --bar:#242424; color-scheme:dark;
        --c1:#c9b27c; --c2:#8fb3a0; --c3:#8da0c2; --c4:#b79fbf; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:13px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans Thai",Roboto,sans-serif;
       font-variant-numeric:tabular-nums; padding-block:clamp(16px,4vw,44px); padding-inline:16px; }
main { max-width:900px; margin:0 auto; }
a { color:inherit; }
.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:clamp(18px,4vw,34px); }
.btns { display:flex; gap:8px; }
.btn { background:transparent; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:5px 12px; font:inherit; font-size:12px; cursor:pointer; text-decoration:none; }
.btn:hover { border-color:var(--muted); }
.hero { display:flex; gap:12px; align-items:center; margin-bottom:22px; padding:14px 18px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--text); border-radius:10px; }
.hero.partial, .hero.major, .hero.stale { border-left-color:var(--muted); }
.pulse { width:12px; height:12px; border-radius:50%; background:var(--text); flex:none; animation:pulse 2.4s infinite; }
.hero.partial .pulse, .hero.major .pulse, .hero.stale .pulse, a.go.bad .pulse { background:transparent; border:2px solid var(--text); animation:none; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--text) 40%,transparent); } 70%,100% { box-shadow:0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation:none; } }
h1 { margin:0; font-size:clamp(17px,3vw,20px); font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.sub, .muted { color:var(--muted); font-size:12px; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.p { grid-column:1/-1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; min-width:0; }
@media (min-width:780px) { .p.cpu { grid-column:span 7; } .p.mem { grid-column:span 5; } .p.sto { grid-column:span 5; } .stack { grid-column:span 7; } }
.stack { grid-column:1/-1; display:grid; gap:12px; }
.stack .p { grid-column:auto; }
.ph { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px; }
.lbl { color:var(--muted); font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; }
.chip { font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:0 9px; white-space:nowrap; }
.big { font-size:clamp(20px,3vw,24px); font-weight:600; letter-spacing:-.02em; line-height:1.2; } .big small { font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0; margin-left:4px; }
.row { display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap; }
.cores { display:flex; gap:3px; height:52px; margin-top:14px; }
.core { flex:1; min-width:0; background:var(--bar); border-radius:3px; display:flex; align-items:flex-end; overflow:hidden; }
.core i { display:block; width:100%; background:var(--text); opacity:.8; min-height:2px; }
.vms .cores { height:32px; margin-top:6px; }
.meter { height:5px; background:var(--bar); border-radius:3px; margin-top:8px; overflow:hidden; } .meter i { display:block; height:100%; background:var(--text); opacity:.8; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px 20px; }
.stat .v { font-size:15px; font-weight:600; } .stat .v small { font-size:11px; color:var(--muted); font-weight:400; margin-left:3px; }
svg.line { width:100%; height:34px; display:block; margin-top:12px; } svg.line path { fill:none; stroke:var(--muted); stroke-width:1.3; vector-effect:non-scaling-stroke; }
/* storage: vertical tank, the only coloured element on the page */
.vwrap { display:flex; gap:18px; margin-top:14px; }
.vbar { width:38px; height:236px; display:flex; flex-direction:column-reverse; gap:2px; background:var(--bar); border-radius:8px; overflow:hidden; flex:none; }
.vbar i { display:block; width:100%; min-height:2px; }
.vlist { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.vrow { display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:center; }
.vrow b { width:10px; height:10px; border-radius:3px; display:block; } .vrow em { color:var(--muted); font-style:normal; font-size:12px; white-space:nowrap; }
.c0 { background:var(--muted); } .c1 { background:var(--c1); } .c2 { background:var(--c2); } .c3 { background:var(--c3); } .c4 { background:var(--c4); } .cf { background:transparent; border:1px solid var(--muted); }
.vms { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:12px; }
.vms .p { grid-column:auto; }
.vh { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; } .vh b { font-size:14px; display:block; }
.vh .chip { align-self:flex-start; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--text); margin-right:7px; } .dot.down { background:transparent; border:1.5px solid var(--text); }
.vms .stats { grid-template-columns:1.5fr 1fr 1fr; gap:12px 14px; margin-bottom:4px; }
.vms .p > .lbl { display:block; margin-top:14px; }
.sec { margin:26px 0 10px; }
.inc { padding:0; overflow:hidden; } .inc > div, .inc details { padding:11px 18px; border-top:1px solid var(--line); } .inc > :first-child { border-top:0; }
.inc summary { display:flex; justify-content:space-between; gap:12px; cursor:pointer; } .inc ul { margin:8px 0 0; padding-left:18px; color:var(--muted); font-size:12px; }
.tag { border:1px solid var(--text); border-radius:5px; font-size:10px; padding:0 6px; margin-left:8px; letter-spacing:.08em; }
footer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:24px; color:var(--muted); font-size:11px; }
a.go { display:flex; align-items:center; gap:12px; text-decoration:none; } a.go:hover { border-color:var(--muted); } a.go .arrow { margin-left:auto; color:var(--muted); }
.hint { margin:0; color:var(--muted); }
.narrow { max-width:640px; } .lede { margin:6px 0 22px; }
[hidden] { display:none !important; }
@media (min-width:780px) { .p.cpu { grid-column:span 7; } .p.mem { grid-column:span 5; } .p.sto { grid-column:span 5; } .stack { grid-column:span 7; } }
@media (min-width:780px) { .stack { grid-auto-rows:1fr; } }
.chart { margin-top:14px; } .chart svg { width:100%; height:96px; display:block; }
.chart .grid { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.chart .l1 { fill:none; stroke:var(--text); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.chart .l2 { fill:none; stroke:var(--muted); stroke-width:1.2; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.ax { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; margin-top:6px; }
.key span::before { content:""; display:inline-block; width:16px; margin-right:6px; vertical-align:middle; border-top:1.6px solid var(--text); }
.key span + span { margin-left:16px; } .key span + span::before { border-top:1.2px dashed var(--muted); }
.pstats { margin-top:16px; }
.note { margin:12px 0 0; color:var(--muted); font-size:11px; }
.core i { transition:height .5s ease; } .meter i { transition:width .5s ease; } .vbar i { transition:height .5s ease; }
@media (prefers-reduced-motion: reduce) { .core i, .meter i, .vbar i { transition:none; } }
.tip { position:fixed; z-index:20; pointer-events:none; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:7px 11px; font-size:12px; line-height:1.5; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.25); }
.tip b { display:block; margin-bottom:2px; font-weight:600; }
.cur { position:fixed; z-index:19; width:1px; pointer-events:none; background:var(--muted); opacity:.7; }
svg.hv { cursor:crosshair; }
.tip.help { white-space:normal; max-width:280px; font-weight:400; }
[data-tip] { cursor:help; }
[data-tip] > .lbl, .chip[data-tip], .vrow[data-tip] > span { text-decoration:underline dotted var(--muted); text-underline-offset:3px; }
.narrow { max-width:760px; } .pre { white-space:pre-line; }
.why { margin-top:3px; } .note { font-size:12px; margin-top:3px; } .inc li { margin-bottom:10px; }
.yrs { display:flex; gap:6px; flex-wrap:wrap; } a.chip { text-decoration:none; color:var(--text); } a.chip:hover { border-color:var(--text); }
.tl { position:relative; margin-left:6px; padding-left:22px; border-left:1px solid var(--line); }
.yg { margin:0 0 4px; } .yg:first-child > summary.yr { margin-top:0; }
summary.yr { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px; margin:16px 0 10px; font-size:20px; font-weight:650; position:relative; scroll-margin-top:16px; }
summary.yr::-webkit-details-marker { display:none; } summary.yr .sub { font-size:12px; font-weight:400; }
summary.yr::after { content:"+"; margin-left:auto; color:var(--muted); font-weight:400; } .yg[open] > summary.yr::after { content:"\2212"; }
.yr::before, .ev::before { content:""; position:absolute; left:-28px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--muted); }
.yr::before { top:9px; background:var(--text); border-color:var(--text); } .ev::before { top:5px; }
.ev { position:relative; margin:0 0 24px; } .ev .when { color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.ev h3 { margin:2px 0 6px; font-size:16px; } .ev p { margin:0 0 10px; color:var(--text); opacity:.85; }
.lk { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:10px; }
a.lc { display:flex; gap:14px; align-items:center; padding:13px 15px; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:var(--text); transition:border-color .2s, transform .2s; }
a.lc:hover { border-color:var(--text); transform:translateY(-2px); }
.lc .ic { width:42px; height:42px; border-radius:12px; background:var(--bar); display:grid; place-items:center; flex:none; } .lc svg { width:22px; height:22px; fill:currentColor; }
.lc .tx { min-width:0; } .lc b { display:block; font-size:15px; } .lc .d { display:block; color:var(--muted); font-size:12.5px; line-height:1.4; }
/* photos keep their own shape; every row is stretched to the full width (justified rows), the last row is not */
.tp { display:block; text-decoration:none; color:inherit; transition:border-color .2s; } .tp:hover { border-color:var(--muted); } .tp .arrow { color:var(--muted); font-size:13px; }
.tstrip { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:2px 0 12px; } .tstrip img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block; background:var(--bar); }
/* lightbox: fills the screen; the photo fits, and zooms to its real pixels inside a scrollable pane */
dialog#lb { width:100vw; height:100vh; max-width:none; max-height:none; padding:0; border:0; background:transparent; overflow:hidden; }
dialog#lb::backdrop { background:rgba(0,0,0,.92); }
.lbs { width:100%; height:100%; overflow:auto; display:flex; }
#lbimg { margin:auto; max-width:96vw; max-height:92vh; border-radius:8px; display:block; cursor:zoom-in; }
#lbimg.z { max-width:none; max-height:none; border-radius:0; cursor:zoom-out; }
.lbx { position:fixed; top:12px; right:16px; z-index:2; width:40px; height:40px; border-radius:999px; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
/* breadcrumb that behaves like a shell prompt: where you are, and every part of it is a way back */
.prompt { display:flex; align-items:center; flex-wrap:wrap; font:16px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; min-width:0; }
.prompt a { color:var(--text); text-decoration:none; border-bottom:1px dotted transparent; position:relative; } .prompt a:first-child { font-weight:700; } .prompt a::after { content:""; position:absolute; inset:-12px -6px; }   /* bigger touch target, underline stays tight */ .prompt a:hover { border-bottom-color:var(--muted); }
.prompt .d { color:var(--muted); } .prompt .u, .prompt .here { color:var(--text); font-weight:600; } .prompt .u { font-weight:700; }
.prompt .caret { display:inline-block; width:8px; height:16px; margin-left:6px; background:var(--text); animation:blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .prompt .caret { animation:none; } }
@media (max-width:520px) { .prompt .h { display:none; } }
/* photos: identical square tiles, each photo fills its tile (cropped to the centre); the lightbox shows the whole photo */
.pg { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:10px; }
.pg button { position:relative; isolation:isolate; aspect-ratio:1; padding:0; border:0; border-radius:10px; overflow:hidden; cursor:zoom-in; background:var(--bar); }
.pg img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; } .pg button:hover img { transform:scale(1.03); }
.ev + .ev { border-top:1px solid var(--line); padding-top:20px; } .ev { margin:0 0 22px; }
@media (max-width:520px) { .pg { grid-template-columns:repeat(2,1fr); gap:8px; } }
/* optional shell: ` or a tap on the prompt turns the caret into an input (assets/cli.js) */
.prompt .caret, .prompt .d { cursor:text; } .prompt.typing .caret { display:none; }
.prompt .cli-in { background:transparent; border:0; outline:0; padding:0; margin:0 0 0 6px; font:inherit; color:var(--text); caret-color:var(--text); width:1ch; max-width:100%; }
.cli { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:-10px 0 18px; font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; max-height:40vh; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; } .cli:empty { display:none; } .cli .c { color:var(--muted); }
.foot { display:block; text-align:center; color:var(--muted); font-size:13px; letter-spacing:.02em; margin:28px 0 6px; }