/* JetBrains Mono (SIL OFL 1.1, fonts/OFL.txt), self-hosted: one variable file covers 400 and 700 */
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-latin.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-symbols.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:block;unicode-range:U+2197,U+2502,U+25BE,U+25C6,U+25C7,U+276F}
  /* Layout: one terminal screen in Grok Build's grammar. Rows open sheets for detail; the prompt is the only door. Ink + cyan. */
  :root{
    --ink:#0A0E16; --ink-2:#0F1620; --ink-3:#17222E;
    --rule:#243241; --rule-2:#33465A; --rule-3:#47607A;
    --fg:#C6D3DB; --bright:#EDF5F7; --muted:#8195A4; --faint:#62778A;
    --accent:#2FD9E8; --accent-2:#7FF0F7;
    --mono:"JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --fs:15px; --lh:1.45;
    color-scheme: dark;
  }
  [hidden]{display:none!important}
  html,body{height:100%}
  body{margin:0;background:var(--ink);color:var(--fg);font:400 var(--fs)/var(--lh) var(--mono);-webkit-font-smoothing:antialiased}
  ::selection{background:var(--accent);color:var(--ink)}
  a{color:inherit}
  button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
  :focus-visible{outline:1px solid var(--accent);outline-offset:2px}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  .term{box-sizing:border-box;min-height:100%;max-width:calc(900px + 2 * clamp(16px,3vw,28px));margin:0 auto;padding-inline:clamp(16px,3vw,28px);padding-block:14px;display:grid;grid-template-rows:auto 1fr auto;gap:10px}

  .bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .bar .path{color:var(--bright)}
  .bar .r{color:var(--muted);display:flex;gap:1ch;align-items:baseline}
  .bar .count{color:var(--bright);font-variant-numeric:tabular-nums}
  .bar .count.hot{color:var(--accent-2)}
  .bar .sep{color:var(--rule-2)}
  .bar .addr{color:var(--faint)}
  .bar .addr:hover{color:var(--accent)}

  .screen{display:flex;flex-direction:column;justify-content:center;gap:30px;min-width:0;padding-block:26px}
  .col{width:100%;max-width:900px;margin-inline:auto;box-sizing:border-box;min-width:0}

  /* rows: the band is the selection; square, full width of its frame */
  .row{display:flex;justify-content:space-between;gap:2ch;text-decoration:none;outline:none}
  .row:hover,.row:focus-visible{background:var(--ink-3)}
  .row kbd{font:inherit;color:var(--faint);white-space:nowrap}

  .welcome{border:1px solid var(--rule-2);border-radius:4px;padding:26px 0 24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 38px;align-items:start}
  .mark{width:124px;height:124px;display:block;margin:-6px 0 0 34px}
  .wtext{min-width:0;padding-right:20px}
  .name{margin:0;display:flex;gap:1.4ch;align-items:baseline;flex-wrap:wrap}
  .name b{color:var(--bright)}
  .name .ver{color:var(--faint)}
  h1{font:inherit;font-weight:700;color:var(--accent);margin:16px 0 0;text-wrap:balance}
  .sub{margin:0;color:var(--muted)}
  .menu{list-style:none;margin:18px 0 0;padding:0}
  .menu .row{color:var(--bright);font-weight:700;width:100%;margin-left:-8px;padding:0 8px;box-sizing:content-box}

  .list h2{font:inherit;font-weight:700;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:1ch}
  .list h2 .n{color:var(--faint);font-weight:400}
  .list h2::after{content:"";flex:1;border-top:1px solid var(--rule)}
  .eng{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .eng .row{display:grid;grid-template-columns:2ch minmax(0,1fr) auto;gap:0 1ch;align-items:baseline;padding:3px 10px;margin-inline:-10px;width:100%;box-sizing:content-box}
  .eng .d{color:var(--muted)}
  .eng .row:hover .d,.eng .row:focus-visible .d{color:var(--accent)}
  .eng .nm{color:var(--bright);font-weight:700}
  .eng .dom{color:var(--faint)}
  .eng .yr{color:var(--faint);font-variant-numeric:tabular-nums}
  .eng .sub2{grid-column:2 / 4;color:var(--muted)}
  .eng .you .nm{color:var(--accent-2)}

  .log{display:grid;gap:16px}
  .log:empty{display:none}
  .turn{display:grid;gap:3px}
  .turn .band{display:flex;justify-content:space-between;gap:2ch;background:var(--ink-3);padding:6px 12px}
  .turn .band span{color:var(--bright);min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
  .turn .band time{color:var(--faint);white-space:nowrap}
  .turn p{margin:0;padding:0 12px;color:var(--muted)}
  .turn p b{color:var(--fg)}
  .turn .gl{color:var(--accent)}
  .turn .q,.turn .done{color:var(--faint)}

  .foot{display:grid;gap:10px}
  .prompt{position:relative;border:1px solid var(--rule-2);border-radius:4px;display:flex;align-items:flex-start;gap:1.2ch;padding:9px 14px 11px;margin-bottom:10px}
  .prompt:focus-within{border-color:var(--rule-3)}
  .prompt.email{border-color:var(--accent)}
  .prompt .chev{color:var(--bright);font-weight:700}
  .prompt textarea{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--bright);font:inherit;line-height:var(--lh);caret-color:var(--fg);caret-shape:block;padding:0;resize:none;height:calc(1em * var(--lh));max-height:calc(6em * var(--lh));overflow-y:auto}
  .prompt textarea::placeholder{color:var(--faint)}
  .prompt .blk{width:.6em;height:1.15em;margin-top:.2em;background:var(--fg);display:none;flex:none}
  .prompt.idle .blk{display:block;animation:blink 1.1s steps(1) infinite}
  .prompt.idle textarea{margin-left:-.7ch}
  .notch{position:absolute;right:12px;bottom:-.75em;background:var(--ink);padding-inline:1ch;color:var(--muted);font-size:1em;line-height:1.45;display:flex;gap:1ch;align-items:baseline}
  .notch button{color:var(--faint)}
  .notch button:hover{color:var(--accent)}
  .notch .dot{color:var(--faint)}
  .notch .mode{color:var(--fg)}
  .prompt.email .notch .mode{color:var(--accent)}
  dialog.sheet > .x::after,.notch button::after{content:"";position:absolute;inset:-12px -6px}
  dialog.sheet > .x,.notch button{position:relative}
  @keyframes blink{50%{opacity:0}}
  .keys{margin:0;color:var(--muted);display:flex;flex-wrap:wrap;gap:0 1.2ch;min-height:1.6em}
  .keys b{color:var(--fg)}
  .keys .sep{color:var(--rule-2)}

  /* sheet: title and [X] notched into the top rule, detail inside, the way Grok frames its panels */
  dialog.sheet{width:min(calc(100% - 32px),620px);max-height:min(82vh,680px);box-sizing:border-box;margin:auto;background:var(--ink);color:var(--fg);border:1px solid var(--rule-3);border-radius:4px;padding:0;overflow:visible}
  dialog.sheet::backdrop{background:rgba(10,14,22,.74)}
  .frame{display:grid;gap:14px;padding:22px 18px 12px;max-height:min(82vh,680px);box-sizing:border-box;overflow-y:auto}
  dialog.sheet > .ttl{position:absolute;top:-.8em;left:12px;background:var(--ink);padding-inline:1ch;color:var(--bright);font-weight:700;z-index:1}
  dialog.sheet > .x{position:absolute;top:-.8em;right:12px;background:var(--ink);padding-inline:1ch;color:var(--faint);z-index:1}
  dialog.sheet > .x:hover{color:var(--accent)}
  .sbody{display:grid;gap:14px}
  .frame .meta{margin:0;color:var(--faint)}
  .frame .meta b{color:var(--accent);font-weight:400}
  .frame .desc{margin:0;color:var(--fg);max-width:64ch}
  .frame h3{font:inherit;font-weight:700;color:var(--muted);margin:2px 0 0;display:flex;align-items:center;gap:1ch}
  .frame h3::after{content:"";flex:1;border-top:1px solid var(--rule)}
  .frame ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .frame .li{display:grid;grid-template-columns:2ch minmax(0,1fr) auto;gap:0 .8ch;padding:2px 8px;margin-inline:-8px;align-items:baseline}
  .frame .li .g{color:var(--faint)}
  .frame .li .t{color:var(--bright);min-width:0}
  .frame .li .s{color:var(--faint);white-space:nowrap}
  .frame a.li:hover .g,.frame a.li:focus-visible .g{color:var(--accent)}
  .frame .principles .t{color:var(--fg)}
  .frame .nav{display:flex;justify-content:space-between;gap:2ch;border-top:1px solid var(--rule);padding-top:8px;color:var(--faint)}
  .frame .nav button{color:var(--muted)}
  .frame .nav button:hover{color:var(--accent)}

  @media (max-width:640px){
    :root{--fs:14px}
    .screen{justify-content:flex-start;padding-block:18px;gap:24px}
    .welcome{grid-template-columns:1fr;padding:22px 0 20px}
    .mark{width:88px;height:88px;margin:0 0 14px 14px}
    .wtext{padding-inline:20px}
    .eng .dom{display:none}
    .eng .row{padding-block:9px}
    .frame .li{grid-template-columns:2ch minmax(0,1fr)}
    .frame .li .s{grid-column:2}
  }
  @media (hover:none){ .row kbd,.keys{display:none} }
  @media (prefers-reduced-motion:reduce){ .prompt.idle .blk{animation:none} }

/* production additions: honeypot, no-JS fallback, send-result actions */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.no-js .prompt,.no-js .keys,.no-js .menu,.no-js .list{display:none}
.nojs p{margin:0 0 10px}
.nojs ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;color:var(--faint)}
.nojs a{color:var(--bright)}
.turn .act{color:var(--accent)}
.turn .act:hover{color:var(--accent-2)}