/* A working surface, not a brochure. Dark by default because half the screen
   is a terminal, one petrol accent so that semantic colour (connected, time
   running out, failed) keeps its meaning, and system faces throughout -- the
   policy forbids a font CDN and nothing here needs one. */
:root {
  --bg:        #0a0d10;
  --panel:     #11161b;
  --raised:    #182027;
  --hover:     #1e2730;
  --sunken:    #07090c;
  --line:      #232c35;
  --line-soft: #1a2229;
  --ink:       #e6ecf0;
  --ink-dim:   #9ba8b3;
  --ink-faint: #86929d;
  --accent:    #38b2c4;
  --accent-2:  #1f8595;
  --accent-bg: color-mix(in srgb, var(--accent) 12%, var(--panel));
  --on-accent: #03181c;
  --ok:        #5fc98d;
  --warn:      #e2a75c;
  --danger:    #f0837b;
  --shadow:    0 12px 40px rgb(0 0 0 / .45);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --topbar-h: 52px;
  --r: 8px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eef2f5; --panel: #ffffff; --raised: #f5f8fa; --hover: #edf2f5;
    --sunken: #0b0e11; --line: #d9e0e6; --line-soft: #e7ecf0;
    --ink: #121a20; --ink-dim: #4d5a65; --ink-faint: #5d6974;
    --accent: #0d6c7a; --accent-2: #0a5561; --on-accent: #ffffff;
    --ok: #17803f; --warn: #a15f0a; --danger: #b3271f;
    --shadow: 0 12px 40px rgb(15 30 40 / .16);
  }
}

* { box-sizing: border-box; }
/* Hover styles below apply only where there is a hover: a touch browser keeps
   :hover on whatever was last tapped, so a tapped tab looked hovered rather
   than selected. */
/* The UA rule for [hidden] loses to any author `display`, which once left the
   chooser on screen under the workspace. This has to outrank them all. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* No visible scrollbars anywhere in the playground. The panels still scroll
   with a wheel, a trackpad, touch and the keyboard; only the bar is hidden. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
body {
  background: var(--bg); color: var(--ink);
  font: 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
code, kbd { font-family: var(--mono); }
h1, h2 { text-wrap: balance; }
.screen { height: 100%; display: flex; flex-direction: column; }
.spring { flex: 1; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar {
  height: var(--topbar-h); flex: none; display: flex; align-items: center;
  gap: 12px; padding: 0 16px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand b { font-weight: 650; letter-spacing: -.01em; }
.mark {
  width: 11px; height: 11px; border-radius: 3px; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.crumb { color: var(--ink-faint); }
.crumb-link { color: var(--ink-dim); text-decoration: none; }
.crumb-link:hover { color: var(--accent); }
.site-link { margin-left: 14px; white-space: nowrap; }
.account { display: inline-flex; align-items: center; gap: 10px; margin-left: 14px; min-width: 0; }
.account-name { color: var(--ink); font-weight: 600; max-width: 16ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; unicode-bidi: isolate; }
.account-out { background: none; border: 0; padding: 0; color: var(--ink-dim); font: inherit; cursor: pointer; white-space: nowrap; }
.account-out:hover { color: var(--ink); }
span.crumb-link:hover { color: var(--ink-dim); }

.capacity, .conn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 500 12px/1 var(--mono); color: var(--ink-dim);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dot.busy { background: var(--warn); }
.dot.down { background: var(--danger); }
.conn.connecting .dot, .conn.reconnecting .dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
.conn.connected .dot { background: var(--ok); }
.conn.ended .dot { background: var(--danger); }
@keyframes pulse { 50% { opacity: .35; } }

.machine {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; font-size: 13.5px; padding-left: 12px; border-left: 1px solid var(--line);
}
.clock {
  font: 600 12.5px/1 var(--mono); color: var(--ink-dim); font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: 999px; background: var(--raised);
}
.clock.low { color: var(--on-accent); background: var(--warn); }

/* ---------- buttons ---------- */
button { font: inherit; cursor: pointer; border-radius: 6px; color: inherit; white-space: nowrap; }
button:disabled { cursor: not-allowed; }
.primary {
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  font-weight: 650; padding: 10px 20px; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; transition: background .12s, transform .06s;
}
.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 84%, #fff); }
.primary:active:not(:disabled) { transform: translateY(1px); }
.primary:disabled { opacity: .5; }
.primary.sm { padding: 6px 13px; font-size: 13px; }
.primary.block { width: 100%; padding: 12px 20px; font-size: 15px; }
.ghost {
  background: transparent; color: var(--ink-dim); border: 1px solid var(--line);
  padding: 6px 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
}
@media (hover: hover) { .ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--accent-2); background: var(--hover); } }
.ghost.sm { padding: 5px 11px; }
.ghost.xs { padding: 3px 9px; font-size: 12px; }
.danger-hover:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.icon {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; color: var(--ink-dim); font-size: 17px; line-height: 1;
}
@media (hover: hover) { .icon:hover { background: var(--hover); color: var(--ink); } }
.linkish { background: none; border: 0; color: var(--accent); font-weight: 600; font-size: 12.5px; padding: 2px 4px; }
.linkish:hover { text-decoration: underline; }
kbd {
  font-size: 10.5px; padding: 1px 5px; border-radius: 4px; opacity: .8;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
/* Faded, or on a tint of the button's own light text, the shortcut on the Run
   button fell below 4.5:1 against it. A dark tint keeps it legible in both themes. */
.primary kbd { opacity: 1; background: rgb(0 0 0 / .18); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.play {
  width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.caret {
  width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); margin-left: 2px;
}
.spinner {
  display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
.busy .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- chooser ---------- */
.chooser {
  flex: 1; overflow-y: auto; display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 3vw, 56px);
  /* The whole window, not a centred column: wide screens get more GPU cards per
     row instead of empty margins. Content is inset by padding, so the scroller
     itself still spans edge to edge. */
  padding: 40px clamp(20px, 3.5vw, 56px);
  width: 100%;
}
.configure { display: grid; gap: 28px; min-width: 0; }
.intro h1 { margin: 0 0 8px; font-size: clamp(28px, 3.6vw, 38px); font-weight: 680; letter-spacing: -.025em; line-height: 1.1; }
.intro p { margin: 0; color: var(--ink-dim); max-width: 60ch; font-size: 15px; }
.intro code { color: var(--ink); font-size: .92em; }

.group { min-width: 0; }
.group-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.group-head h2 {
  margin: 0; font: 600 11.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.filters { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.filter {
  background: transparent; border: 1px solid transparent; color: var(--ink-dim);
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
}
@media (hover: hover) { .filter:hover { color: var(--ink); background: var(--hover); } }
.filter[aria-pressed="true"] { color: var(--ink); border-color: var(--line); background: var(--raised); }

.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }

.gpu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gpu {
  position: relative; text-align: left; padding: 13px 14px 12px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  transition: border-color .12s, background .12s;
}
@media (hover: hover) { .gpu:hover { border-color: var(--accent-2); background: var(--raised); } }
.gpu[aria-checked="true"] {
  border-color: var(--accent); background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.gpu .g-name { font-weight: 620; font-size: 13.5px; letter-spacing: -.005em; grid-column: 1 / -1; }
.gpu .g-mem { font: 650 19px/1.25 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gpu .g-arch { font: 400 11.5px/1.4 var(--mono); color: var(--ink-faint); grid-column: 1 / -1; }
.gpu .g-flag {
  font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: 4px; padding: 3px 5px; justify-self: end;
}

.segmented {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
}
.segmented button {
  border: 0; background: transparent; color: var(--ink-dim); padding: 7px 13px;
  border-radius: 6px; font-size: 13px; font-weight: 550; min-width: 38px;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .segmented button:hover { color: var(--ink); background: var(--hover); } }
.segmented [aria-checked="true"], .segmented [aria-selected="true"] {
  background: var(--accent); color: var(--on-accent);
}

.summary { position: sticky; top: 0; }
.summary-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; display: grid; gap: 14px; box-shadow: var(--shadow);
}
.eyebrow { margin: 0; font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.summary-name { margin: -4px 0 0; font-size: 19px; font-weight: 680; letter-spacing: -.015em; line-height: 1.25; }
.specs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13px; }
.specs dt { color: var(--ink-faint); }
.specs dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.aside { margin: 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.aside b { color: var(--ink); }
.inside { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.inside li {
  font: 500 11px/1 var(--mono); color: var(--ink-dim); padding: 5px 7px;
  border-radius: 5px; background: var(--raised);
}
.form-error { margin: 0; font-size: 13px; color: var(--danger); }

/* ---------- workspace ---------- */
.netnote {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; font-size: 13px; color: var(--ink-dim);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
}
.netnote.sealed { background: color-mix(in srgb, var(--warn) 11%, var(--panel));
  border-bottom-color: color-mix(in srgb, var(--warn) 32%, var(--line)); }
.netnote b { color: var(--ink); }
.netnote code { color: var(--ink); font-size: 12.5px; }
.netnote .linkish { margin-left: auto; }

.mobile-tabs { display: none; }
.split { flex: 1; display: flex; min-height: 0; }
.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.editor-pane { flex: 0 0 48%; background: var(--panel); }
.term-pane { flex: 1; background: var(--sunken); }
.pane-head {
  height: 42px; flex: none; display: flex; align-items: center; gap: 6px;
  padding: 0 8px; background: var(--panel); border-bottom: 1px solid var(--line);
}
/* The terminal is dark in both themes, so its header is too. Mixed from the
   theme's panel, it came out mid-grey in the light theme, with light-theme ink
   on it: the label and Copy/Paste/Clear were close to invisible. */
.term-pane .pane-head { background: #12171c; border-bottom-color: #1f262d; }
.term-pane .tabname { color: #95a1ab; }
.term-pane .pane-head .ghost { color: #c3cdd4; border-color: #2b343d; }
@media (hover: hover) { .term-pane .pane-head .ghost:hover:not(:disabled) { color: #eef2f5; border-color: #3cc3d6; background: #1b2229; } }
.tabname { font: 600 11.5px/1 var(--mono); color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; padding-left: 4px; }

.tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 8px 5px 10px; border: 1px solid transparent; background: transparent;
  color: var(--ink-dim); font: 500 12.5px/1.2 var(--mono); border-radius: 6px;
}
@media (hover: hover) { .tab:hover { color: var(--ink); background: var(--hover); } }
.tab[aria-selected="true"] { color: var(--ink); background: var(--raised); border-color: var(--line); }
.tab .dirty { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); visibility: hidden; }
.tab.is-dirty .dirty { visibility: visible; }
.tab .x {
  width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px;
  color: var(--ink-faint); font-size: 13px; line-height: 1;
}
@media (hover: hover) { .tab .x:hover { background: var(--line); color: var(--ink); } }

.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 5px; display: grid; gap: 1px;
}
.menu button {
  display: grid; gap: 1px; text-align: left; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 6px;
}
.menu button:hover, .menu button:focus-visible { background: var(--hover); outline: none; }
.menu .m-title { font-weight: 600; font-size: 13px; }
.menu .m-desc { font-size: 12px; color: var(--ink-faint); }

.editor { flex: 1; min-height: 0; overflow: hidden; }
.pane-foot {
  height: 28px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border-top: 1px solid var(--line-soft); font: 500 11.5px/1 var(--mono); color: var(--ink-faint);
}
.term-wrap { flex: 1; min-height: 0; display: flex; padding: 8px 4px 4px 10px; }
.term { flex: 1; min-height: 0; min-width: 0; }
.grip { width: 5px; cursor: col-resize; background: var(--line); flex: none; transition: background .12s; }
.grip:hover, .grip:focus-visible, .grip.dragging { background: var(--accent); }

/* CodeMirror, on the page's own tokens rather than a shipped theme */
.CodeMirror { height: 100%; background: var(--panel); color: var(--ink); font: 13.5px/1.6 var(--mono); }
.CodeMirror-gutters { background: var(--panel); border-right: 1px solid var(--line-soft); }
.CodeMirror-linenumber { color: var(--ink-faint); padding: 0 10px 0 6px; }
.CodeMirror-cursor { border-left: 2px solid var(--accent); }
.CodeMirror-selected { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; }
.CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.CodeMirror pre.CodeMirror-line { padding: 0 8px; }
.cm-s-default .cm-keyword  { color: #c792ea; }
.cm-s-default .cm-def,
.cm-s-default .cm-variable-3,
.cm-s-default .cm-type     { color: var(--accent); }
.cm-s-default .cm-string   { color: #9bd07f; }
.cm-s-default .cm-comment  { color: var(--ink-faint); font-style: italic; }
.cm-s-default .cm-number   { color: #e2a75c; }
.cm-s-default .cm-meta     { color: #7fb2e5; }
.cm-s-default .cm-builtin  { color: #7fb2e5; }
div.CodeMirror span.CodeMirror-matchingbracket { color: var(--ink); outline: 1px solid var(--accent); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cm-s-default .cm-keyword { color: #7a3fb0; }
  :root:not([data-theme="dark"]) .cm-s-default .cm-string  { color: #2f7d1c; }
  :root:not([data-theme="dark"]) .cm-s-default .cm-number  { color: #a15f0a; }
  :root:not([data-theme="dark"]) .cm-s-default .cm-meta,
  :root:not([data-theme="dark"]) .cm-s-default .cm-builtin { color: #2a6bb0; }
}

/* ---------- overlays and toasts ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(3px);
}
.dialog {
  width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px; box-shadow: var(--shadow); display: grid; gap: 12px;
}
.dialog-form { display: grid; gap: 12px; }
.dialog h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.dialog p { margin: 0; }
.dim { color: var(--ink-dim); font-size: 13px; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.field { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-dim); }
.field input {
  font: 500 14px/1.4 var(--mono); color: var(--ink); background: var(--sunken);
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px;
}
.field input:focus { border-color: var(--accent); outline: none; }

.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start;
  background: var(--raised); color: var(--ink); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; box-shadow: var(--shadow); animation: rise .18s ease-out;
}
.toast.ok { border-left-color: var(--ok); }
.toast.warn { border-left-color: var(--warn); }
.toast.error { border-left-color: var(--danger); }
.toast .t-body { flex: 1; overflow-wrap: anywhere; }
.toast .t-close { border: 0; background: none; color: var(--ink-faint); padding: 0 2px; font-size: 15px; line-height: 1; }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } }

/* ---------- narrow screens ---------- */
@media (max-width: 980px) {
  .chooser { grid-template-columns: minmax(0, 1fr); padding: 28px 18px 120px; gap: 24px; }
  .summary { position: static; }
  .summary-card { box-shadow: none; }
  /* The button follows the thumb: it is the one thing on the page to press. */
  .picker #go { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; z-index: 10; box-shadow: var(--shadow); }
  /* One row of filters that scrolls sideways, rather than a lone chip wrapped onto a second line. */
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-left: 0; width: 100%; }
  .filter { flex: none; }
}
@media (max-width: 900px) {
  .hide-sm { display: none; }
  .topbar { gap: 8px; padding: 0 10px; }
  /* The top bar has no room for a name on a phone; Sign out says enough. */
  .site-account .account-name { display: none; }
  .machine { font-size: 12.5px; padding-left: 8px; }
  .conn #connText { display: none; }
  .conn { padding: 7px; }
  .mobile-tabs { display: block; flex: none; padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .mobile-tabs .segmented { display: flex; }
  .mobile-tabs .segmented button { flex: 1; }
  .grip { display: none; }
  .split .pane { flex: 1 1 auto !important; }
  .split.show-editor .term-pane, .split.show-term .editor-pane { display: none; }
  #runKbd { display: none; }
}
/* On a phone the "/ Playground" breadcrumb, Docs, Sign in and the capacity
   badge do not all fit: at 390px they pushed the page 29px wider than the
   screen. The breadcrumb goes first, then the links. The badge matters most. */
@media (max-width: 480px) {
  .crumb, span.crumb-link { display: none; }
}
@media (max-width: 380px) {
  .site-link, .site-account { display: none; }
}
/* The grid fills in once /api/machines answers. Reserving a fixed height held
   it only on wide screens: on a phone the list is one column of 13 cards, and
   everything below it jumped 900px (layout shift 0.37). Placeholder cards in the
   page take the real cards' size at any width instead. */
.gpu.placeholder, .filter.placeholder { opacity: .4; pointer-events: none; }
@media (pointer: coarse) {
  .filter { padding: 8px 12px; }
  .crumb-link, .account-out { display: inline-block; padding: 8px 2px; }
  .ghost.xs { padding: 8px 12px; }
  #btnSave { padding: 10px 6px; }
  #dismissNote { padding: 10px 6px; margin-top: -10px; margin-bottom: -10px; margin-right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}