/* grokius maximus */
:root {
  --bg: #050605; --fg: #c8d4bc; --fg2: #7a8870; --hi: #e8f2dc;
  --ok: #9dcc6a; --wait: #c4b86a; --line: #1c2218;
  --glow: rgba(200, 212, 188, 0.22);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 13px; line-height: 1.55; }
body { min-height: 100dvh; text-shadow: 0 0 8px var(--glow); }
a { color: var(--hi); } a:hover { color: var(--ok); }
.scan { pointer-events: none; position: fixed; inset: 0; z-index: 20; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.18) 2px 3px); opacity: .28; }
.term { max-width: 52rem; margin: 0 auto; padding: 14px 14px 48px; }
.bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.name { margin: 0; color: var(--hi); font-weight: 600; }
.stat, .clk { margin: 0; color: var(--fg2); }
em { font-style: normal; font-weight: 600; }
.ok { color: var(--ok); } .wait { color: var(--wait); } .dim { color: var(--fg2); }
.stat .ok::before { content: "\25cf "; animation: pulse 1.6s step-end infinite; }
@keyframes pulse { 50% { opacity: .15; } }
.boot { margin: 16px 0 0; white-space: pre-wrap; color: var(--fg2); }
.boot:empty { display: none; }
.surface { margin-top: 8px; }
.blk { margin: 22px 0 0; }
.blk h2 { margin: 0 0 8px; font-size: 13px; color: var(--hi); }
.blk p { margin: 0 0 4px; }
.p { color: var(--ok); margin-right: .4em; }
.mark-cap { margin: 8px 0 0; color: var(--fg2); font-size: 11px; letter-spacing: .08em; }
.addr-row { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 6px 0 4px; }
.addr { font: inherit; color: var(--hi); word-break: break-all; }
.cmd { border: 0; background: none; color: var(--fg2); font: inherit; cursor: pointer; }
.log, .caps { list-style: none; margin: 0; padding: 0; }
.log li { margin: 0 0 8px; }
.log time { display: block; color: var(--fg2); }
.caps li { display: flex; gap: 10px; margin: 0 0 4px; }
.tag { flex: 0 0 3.2em; font-weight: 600; }
.foot { margin: 28px 0 18px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--fg2); }
.cli { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cli label { color: var(--ok); }
.cli input { flex: 1 1 12rem; border: 0; background: transparent; color: var(--hi); font: inherit; font-size: 16px; }
.cli-out { margin: 8px 0 0; color: var(--fg2); }
.stage { width: 100%; height: 260px; background: #000; overflow: hidden; }
.stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
@media (min-width: 640px) { html, body { font-size: 14px; } .term { padding: 22px 22px 64px; } .stage { height: 380px; } .log time { display: inline; margin-right: .7em; } }
#bal-age { font-size: 11px; }

.blog-post { margin: 0 0 14px; }
.blog-post .bt { color: var(--hi); }
.blog-post time { color: var(--fg2); margin-right: .7em; }
.blog-post p { margin: 2px 0 0; }
.player { width: 100%; height: 220px; background: #000; margin-top: 8px; overflow: hidden; }
.player iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 640px) { .player { height: 320px; } }