:root{--font-body:ui-sans-serif,-apple-system,system-ui,"Segoe UI","Noto Sans",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;--font-mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,Consolas,"Liberation Mono","DejaVu Sans Mono","Courier New",monospace}
:root{--noir-canvas:#0a0a0a;--noir-surface-subtle:#101010;--noir-surface-raised:#191919;--noir-surface:#0e0e0e;--noir-terminal-background:#0e0e0e;--noir-stroke-subtle:#2c2c2c;--noir-stroke:#404040;--noir-scrollbar-hover:#4e4e4e;--noir-control-hover:rgb(237 237 237 / 0.047);--noir-control:rgb(237 237 237 / 0.023);--noir-control-on-overlay:#1e1e1e;--noir-control-pressed:rgb(237 237 237 / 0.079);--noir-content:#ededed;--noir-content-secondary:#818181;--noir-content-tertiary:#656565;--noir-accent:#ededed;--noir-accent-solid:#ededed;--noir-accent-on-solid:#0a0a0a;--noir-accent-container:#191919;--noir-accent-on-container:#ededed;--noir-accent-border:#ededed;--noir-accent-rgb:#ededed;--noir-accent-dim:rgb(237 237 237 / 0.177);--noir-accent-dim-subtle:rgb(237 237 237 / 0.102);--noir-accent-line:#ededed;--noir-accent-ring-outer:rgb(237 237 237 / 0.232);--noir-selection:#ededed;--noir-selection-foreground:#0a0a0a;--noir-danger:#ff4d42;--noir-danger-solid:#ff4d42;--noir-danger-on-solid:#0a0a0a;--noir-danger-container:#2b1613;--noir-danger-on-container:#ff4d42;--noir-danger-border:#ff4d42;--noir-danger-bg:#2b1613;--noir-success:#9fd08a;--noir-success-solid:#9fd08a;--noir-success-on-solid:#0a0a0a;--noir-success-container:#1e241c;--noir-success-on-container:#9fd08a;--noir-success-border:#9fd08a;--noir-warning:#e6c15c;--noir-warning-solid:#e6c15c;--noir-warning-on-solid:#0a0a0a;--noir-warning-container:#262217;--noir-warning-on-container:#e6c15c;--noir-warning-border:#e6c15c;--noir-info:#7fb2e8;--noir-info-solid:#7fb2e8;--noir-info-on-solid:#0a0a0a;--noir-info-container:#1a2027;--noir-info-on-container:#7fb2e8;--noir-info-border:#7fb2e8;--noir-terminal-foreground:#ededed;--noir-terminal-cursor:#ededed;--noir-terminal-selection:#333333;--noir-terminal-selection-foreground:#ffffff;--noir-terminal-ansi-0:#1a1a1a;--noir-terminal-ansi-1:#ff4d42;--noir-terminal-ansi-2:#9fd08a;--noir-terminal-ansi-3:#e6c15c;--noir-terminal-ansi-4:#7fb2e8;--noir-terminal-ansi-5:#d093d0;--noir-terminal-ansi-6:#74cfd1;--noir-terminal-ansi-7:#c9c9c9;--noir-terminal-ansi-8:#666666;--noir-terminal-ansi-9:#ff6e64;--noir-terminal-ansi-10:#b7e2a3;--noir-terminal-ansi-11:#f2d47c;--noir-terminal-ansi-12:#9dc7f2;--noir-terminal-ansi-13:#e0aede;--noir-terminal-ansi-14:#93e1e2;--noir-terminal-ansi-15:#ffffff;--noir-cursor:var(--noir-terminal-cursor);--noir-cursor-text:var(--noir-canvas);}/* The design the full-screen canvas pages keep on purpose (UI-13):
   /everglade, /druid, /grid and the Verse world. Coder Noir semantic tokens
   come from src/palette.rs. Every other page, /demo included, is styled by
   openagents-ui alone (/static/ui.css). */

*{box-sizing:border-box}
html{background:var(--noir-canvas);color:var(--noir-content);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%}
html,body{height:100%;overflow:hidden}
body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--noir-canvas)}
::selection{background:var(--noir-selection);color:var(--noir-selection-foreground)}
a{color:var(--noir-content);text-underline-offset:3px}
a:hover{background:var(--noir-control-hover)}
a:focus-visible{outline:1px solid var(--noir-accent);outline-offset:2px}
p{margin:0 0 1rem}

.unseen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

main{width:min(96ch,100% - 32px);margin-inline:auto;flex:1 0 auto;padding:2rem 0 3rem}
main:focus{outline:none}

/* /everglade: the Everglade web build's canvas fills the window
   (static/everglade.js), and the build sizes its drawing buffer from the
   canvas every frame. No header, footer, scrolling, or page zoom. */
html.stage,html.stage body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;touch-action:none}
html.stage body{display:block}
.glade{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;background:var(--noir-canvas);touch-action:none}
.glade canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}
.glade-status{position:absolute;inset:auto 0 0 0;margin:0;padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));color:var(--noir-content);background:var(--noir-surface)}
.glade-status:empty{display:none}
.glade-leave{position:absolute;top:0;left:0;margin:0;padding:calc(.5rem + env(safe-area-inset-top)) .75rem .5rem;background:var(--noir-surface)}

@media (max-width:640px){
  html{font-size:13px}
  main{width:calc(100% - 32px)}
}