@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400;1,500&display=swap');
:root{
  color-scheme:light;
  --paper:oklch(0.97 0.012 85);--paper-raised:oklch(0.99 0.006 85);
  --ink:oklch(0.27 0.06 255);--ink-muted:oklch(0.48 0.04 255);--rule:oklch(0.84 0.025 240);
  --primary:oklch(0.33 0.09 255);--on-primary:oklch(0.97 0.012 85);
  --flag:oklch(0.84 0.15 88);--on-flag:oklch(0.25 0.05 255);--flag-wash:oklch(0.84 0.15 88 / 0.22);
  --awake:oklch(0.58 0.13 155);--danger:oklch(0.55 0.19 28);--warn-text:oklch(0.5 0.12 70);
  --header-bg:oklch(0.27 0.07 255);--header-fg:oklch(0.97 0.012 85);
  --font-serif:'IBM Plex Serif',Georgia,serif;
  --font-sans:'IBM Plex Sans Condensed','Arial Narrow',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
/* data-theme is set before paint from the gw-theme cookie; with none, the OS decides. */
[data-theme="dark"]{
  color-scheme:dark;
  --paper:oklch(0.2 0.035 255);--paper-raised:oklch(0.25 0.04 255);
  --ink:oklch(0.94 0.015 85);--ink-muted:oklch(0.72 0.03 250);--rule:oklch(0.36 0.04 250);
  --primary:oklch(0.84 0.15 88);--on-primary:oklch(0.22 0.05 255);
  --flag-wash:oklch(0.84 0.15 88 / 0.16);
  --awake:oklch(0.75 0.14 155);--danger:oklch(0.62 0.18 28);--warn-text:oklch(0.82 0.11 75);
  --header-bg:oklch(0.15 0.03 255);--header-fg:oklch(0.94 0.015 85);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:oklch(0.2 0.035 255);--paper-raised:oklch(0.25 0.04 255);
  --ink:oklch(0.94 0.015 85);--ink-muted:oklch(0.72 0.03 250);--rule:oklch(0.36 0.04 250);
  --primary:oklch(0.84 0.15 88);--on-primary:oklch(0.22 0.05 255);
  --flag-wash:oklch(0.84 0.15 88 / 0.16);
  --awake:oklch(0.75 0.14 155);--danger:oklch(0.62 0.18 28);--warn-text:oklch(0.82 0.11 75);
  --header-bg:oklch(0.15 0.03 255);--header-fg:oklch(0.94 0.015 85);}}
:root{
  --neatline:inset 0 0 0 1px var(--ink),inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--ink);
  --nav-active:inset 0 -3px 0 var(--flag);
  --notice-bar:inset 3px 0 0 var(--flag);
  --mark-flag:oklch(0.84 0.15 88);--mark-red:oklch(0.55 0.19 28);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
a:hover,.link:hover{text-decoration:underline;text-underline-offset:2px}
@keyframes gw-pulse{50%{opacity:.35}}
::selection{background:var(--flag-wash)}
:focus-visible{outline:2px solid var(--flag);outline-offset:2px}

/* header */
.hdr{height:56px;background:var(--header-bg);color:var(--header-fg);display:flex;align-items:center;gap:32px;padding:0 32px}
.lockup{display:flex;align-items:center;gap:10px;color:var(--header-fg)}
.lockup:hover{text-decoration:none}
.wordmark{font:600 18px/1 var(--font-mono);letter-spacing:-.04em}
.lockup .tag{font:600 10px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;opacity:.7;border:1px solid currentColor;padding:3px 5px}
.nav{display:flex;align-self:stretch;gap:4px;flex:1}
.nav a,.nav button{display:flex;align-items:center;padding:0 12px;font:500 13px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--header-fg);opacity:.7;background:none;border:0;cursor:pointer}
.nav a:hover,.nav button:hover{opacity:1;text-decoration:none}
.nav .on{opacity:1;box-shadow:var(--nav-active)}
.who{display:flex;align-items:center;gap:14px;font:13px var(--font-mono);color:var(--header-fg);opacity:.85}
.who button,.who a{font:500 12px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--header-fg);background:none;border:0;cursor:pointer;padding:0;opacity:.8}
.who form{display:inline}
.theme{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:none;border:1px solid transparent;color:var(--header-fg);cursor:pointer;opacity:.8}
.theme:hover{opacity:1;border-color:color-mix(in oklch,var(--header-fg) 40%,transparent)}
.theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme .sun{display:none}
[data-theme="dark"] .theme .moon{display:none}
[data-theme="dark"] .theme .sun{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .moon{display:none}:root:not([data-theme="light"]) .theme .sun{display:block}}

/* page */
main{flex:1}
.page{max-width:1120px;margin:0 auto;padding:36px 48px 64px}
.eyebrow{font:600 11px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.title{font:italic 400 48px/1 var(--font-serif);letter-spacing:-.01em;margin:6px 0 0}
.lead{font:400 16px/1.45 var(--font-serif);color:var(--ink-muted);max-width:640px;margin:12px 0 0;text-wrap:pretty}
.pagehead{border-bottom:1px solid var(--ink);padding-bottom:20px;margin-bottom:32px}
.section{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:28px 0;border-top:1px dotted var(--rule)}
.section:first-of-type{border-top:0;padding-top:0}
.section h2{font:italic 400 22px/1.2 var(--font-serif);margin:0}
.section .aside p{color:var(--ink-muted);font-size:14px;margin:8px 0 0}
.mono{font-family:var(--font-mono);font-size:13px}
.muted{color:var(--ink-muted)}
.small{font-size:14px}
.foot{border-top:1px solid var(--rule);padding:18px 48px;font-size:13px;color:var(--ink-muted);display:flex;gap:16px;justify-content:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;font:600 13px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;border-radius:2px;border:1px solid var(--primary);background:var(--primary);color:var(--on-primary);cursor:pointer}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* fields: no boxes, a caps label and an ink underline */
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 22px}
.field label{font:600 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.field input{font:16px var(--font-sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:6px 0;border-radius:0;outline:none;width:100%}
.field input:focus{border-bottom:2px solid var(--ink);padding-bottom:5px}
.field .help{font-size:13px;color:var(--ink-muted)}
.field .help.bad{color:var(--danger)}
.field .help.good{color:var(--awake)}
.suffixed{display:flex;align-items:baseline;border-bottom:1px solid var(--ink)}
.suffixed:focus-within{border-bottom-width:2px}
.suffixed input{border:0 !important;padding:6px 0 !important;font-family:var(--font-mono);font-size:15px}
.suffixed span{font:15px var(--font-mono);color:var(--ink-muted);white-space:nowrap}

/* notices */
.notice{box-shadow:var(--notice-bar);background:var(--flag-wash);padding:12px 16px;margin:0 0 22px;font-size:14px}
.notice.bad{box-shadow:inset 3px 0 0 var(--danger);background:color-mix(in oklch,var(--danger) 10%,transparent)}

/* auth: a neatline card on the chart grid */
.chart{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:72px 16px;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:80px 80px;background-position:-1px -1px}
.card{width:100%;max-width:440px;background:var(--paper);box-shadow:var(--neatline);padding:36px 40px 32px}
.card .title{font-size:36px;margin:8px 0 24px}
.card .after{margin-top:20px;font-size:14px;color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:6px 14px}
.card p{margin:0 0 18px}

/* state flags: a square plus the word, never colour alone */
.flag{display:inline-flex;align-items:center;gap:8px;font:13px var(--font-sans);text-transform:lowercase}
.flag i{width:9px;height:9px;display:inline-block;background:var(--ink-muted)}
.flag.awake i{background:var(--awake)}
.flag.building i{background:var(--flag);animation:gw-pulse 1.6s infinite}
.flag.failed i{background:var(--danger)}
.flag.off i{background:transparent;box-shadow:inset 0 0 0 1px var(--ink-muted)}
.flag.off{color:var(--ink-muted)}

/* table */
.table{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:1fr 140px 120px 110px 90px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.row.head{font:600 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);padding:10px 0}
.name{font:italic 400 19px/1.2 var(--font-serif)}
.host{font:12px var(--font-mono);color:var(--ink-muted);margin-top:2px}
.row .act{text-align:right;font:600 12px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase}
.empty{border:1px dashed var(--rule);padding:28px;color:var(--ink-muted);text-align:center}

/* data tables (operations) */
table.grid{width:100%;border-collapse:collapse;border-top:1px solid var(--ink);font-size:14px}
table.grid th{font:600 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule)}
table.grid td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.grid td.mono,table.grid td .mono{font-size:12px}
table.grid tr:hover td{background:color-mix(in oklch,var(--ink) 3%,transparent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:0 0 32px}
.stat{box-shadow:inset 0 0 0 1px var(--rule);padding:14px 16px}
.stat b{display:block;font:600 28px/1 var(--font-mono);letter-spacing:-.03em;margin-top:8px}
.stat.warn{box-shadow:inset 3px 0 0 var(--flag),inset 0 0 0 1px var(--rule)}
.stat.bad{box-shadow:inset 3px 0 0 var(--danger),inset 0 0 0 1px var(--rule)}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.actions form{display:flex;gap:8px;align-items:flex-end}
.actions .field{margin:0}
.btn.small{height:32px;padding:0 12px;font-size:12px}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.subnav{display:flex;gap:18px;margin:-12px 0 28px;font:500 13px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase}
.subnav a{color:var(--ink-muted);padding-bottom:6px}
.subnav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--flag)}

/* plan tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0 0 22px}
.tile{position:relative;display:block;padding:20px 22px;box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;background:var(--paper)}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile:has(input:checked){box-shadow:var(--neatline)}
.tile:has(input:focus-visible){outline:2px solid var(--flag);outline-offset:2px}
.tile .tname{font:italic 400 24px/1.1 var(--font-serif)}
.tile .price{font:600 26px/1 var(--font-mono);letter-spacing:-.03em;margin:12px 0 2px}
.tile .price span{font:13px var(--font-sans);color:var(--ink-muted);letter-spacing:0}
.tile ul{list-style:none;padding:0;margin:12px 0 0;font-size:14px}
.tile li{display:flex;gap:8px;padding:3px 0;border-top:1px dotted var(--rule)}
.tile li:first-child{border-top:0}
.tile li b{font-weight:500;margin-left:auto;font-family:var(--font-mono);font-size:13px}

/* leaders: key ······ value */
.leaders{margin:0;padding:0;list-style:none}
.leaders li{display:flex;align-items:baseline;gap:8px;padding:5px 0}
.leaders li::after{content:"";order:1;flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-4px)}
.leaders li span:last-child{order:2;font-family:var(--font-mono);font-size:13px}

/* steps: setup progress */
.steps{list-style:none;padding:0;margin:8px 0 28px;border-top:1px solid var(--ink)}
.steps li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);color:var(--ink-muted)}
.steps li i{width:9px;height:9px;flex:none;box-shadow:inset 0 0 0 1px var(--rule)}
.steps li.done{color:var(--ink)}
.steps li.done i{background:var(--awake);box-shadow:none}
.steps li.now{color:var(--ink);font-weight:500}
.steps li.now i{background:var(--flag);box-shadow:none;animation:gw-pulse 1.6s infinite}
.steps li.bad i{background:var(--danger);box-shadow:none}

@media (max-width:760px){
  .hdr{padding:0 16px;gap:12px}.who .email{display:none}.lockup .tag{display:none}
  .nav a,.nav button{padding:0 8px;letter-spacing:.08em}
  .page{padding:24px 18px 48px}.title{font-size:36px}
  .section{grid-template-columns:1fr;gap:12px}
  .row{grid-template-columns:1fr auto}.row .c-plan,.row .c-when,.row.head{display:none}
  .card{padding:28px 22px}.chart{padding:32px 12px}
}