:root { color-scheme: light; --paper:#fff; --ink:#000; --line:#000; --muted:#5f6368; --soft:#eceef0; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Share Tech Mono",ui-monospace,monospace; font-size:14px; font-weight:400; }
[hidden] { display:none !important; }
#gate { min-height:100svh; display:grid; place-items:center; padding:1rem; }
form { width:min(280px,100%); display:grid; gap:.6rem; }
input,button { appearance:none; border:1px solid var(--line); border-radius:0; background:var(--paper); color:var(--ink); font:inherit; padding:.55rem .65rem; }
button { cursor:pointer; letter-spacing:.08em; }
button:hover,button:focus-visible { background:#000; color:#fff; outline:none; }
#gate-message { min-height:1rem; color:var(--muted); }
main { width:min(980px,calc(100% - 2rem)); margin:3rem auto 4rem; }
h1,h2,p { margin:0; }
h1,h2 { font-size:.78rem; letter-spacing:.14em; font-weight:400; }
p { color:var(--muted); line-height:1.55; margin-top:.55rem; }
.masthead { display:flex; justify-content:space-between; align-items:start; gap:1rem; margin-bottom:1.5rem; }
.mode { display:flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.1em; }
#mode-dot { width:.5rem; height:.5rem; border:1px solid #000; border-radius:50%; background:#fff; }
.mode.active #mode-dot { background:#000; animation:blink .8s steps(2,end) infinite; }
.flow-panel { border:1px solid var(--line); margin:0 0 2rem; overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.panel-head p { margin:0; font-size:.72rem; text-align:right; }
#flow { display:block; width:100%; height:390px; cursor:grab; touch-action:none; background:radial-gradient(ellipse at 50% 50%,rgba(115,221,255,.10),transparent 34%),linear-gradient(115deg,rgba(143,96,255,.035),transparent 32%,rgba(40,199,255,.045)); }
#flow.dragging { cursor:grabbing; }
.telemetry { display:flex; gap:1rem; justify-content:space-between; border-top:1px solid var(--line); padding:.55rem 1rem; color:var(--muted); font-size:.68rem; letter-spacing:.03em; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.card { display:block; min-height:7rem; padding:1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.card:hover,.card:focus-visible { background:#000; color:#fff; outline:none; }
.card small { display:block; color:inherit; opacity:.65; margin-top:.6rem; }
@keyframes blink { 50% { opacity:.15; } }
@media (max-width:560px) { main { width:min(100% - 1rem,980px); margin:1rem auto 2rem; } .masthead,.panel-head { display:block; } .mode { margin-top:1rem; } .panel-head p { text-align:left; } #flow { height:310px; } .telemetry { gap:.45rem; flex-wrap:wrap; } .grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; } }