@import url('../tokens.css');
:root { font:100%/1.45 var(--font-body); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--fg); }
.top { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1.5rem; border-bottom:1px solid var(--edge); background:var(--surface); }
select { font:inherit; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:.35rem; padding:.3rem .5rem; min-height:2rem; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
main { max-width:76rem; margin:auto; padding:1.5rem; }
h1 { font-size:2rem; line-height:1.2; margin:.5rem 0; } h2 { font-size:1.25rem; margin:2.5rem 0 .25rem; } h3 { font-size:.8125rem; margin:0 0 .5rem; padding-bottom:.35rem; border-bottom:2px solid transparent; font-weight:600; }
.muted,.meta { color:var(--muted); } .meta { margin:0 0 .75rem; font-size:.875rem; } .lead { max-width:60ch; }
.index { display:flex; flex-wrap:wrap; gap:.5rem 1rem; padding:0; list-style:none; margin:1rem 0 0; } .index a { color:var(--fg); }
.win { background:var(--surface); border:1px solid var(--edge); border-radius:.5rem; overflow:hidden; font-size:.8125rem; max-width:54rem; }
.win.narrow { max-width:36rem; }
.bar { display:flex; align-items:center; gap:.5rem; padding:.4rem .75rem; border-bottom:1px solid var(--edge); background:var(--raised); min-height:2.25rem; } .sp { flex:1; }
.btn { display:inline-flex; align-items:center; min-height:1.75rem; padding:.15rem .65rem; border:1px solid var(--border); border-radius:.3rem; background:var(--raised); } 
.btn.primary { background:var(--action); border-color:var(--action); color:var(--action-foreground); font-weight:600; }
.chip { border:1px solid var(--border); border-radius:1rem; padding:.1rem .55rem; font-size:.75rem; }
.body { display:grid; gap:0; min-height:13rem; } .reg { padding:.6rem .75rem; border-right:1px solid var(--edge); border-bottom:1px solid var(--edge); min-width:0; } .reg:last-child { border-right:0; }
.reg.active h3 { border-bottom-color:var(--selection-indicator); }
.reg.sr h3,h3.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.status { padding:.3rem .75rem; font-size:.75rem; color:var(--muted); border-top:1px solid var(--edge); background:var(--raised); }
ul { margin:0; padding:0; list-style:none; } li { padding:.2rem .35rem; border-left:3px solid transparent; min-height:1.75rem; display:flex; align-items:center; gap:.5rem; } li.sel,.row.sel { background:var(--selected); border-left-color:var(--selection-indicator); }
dl { display:grid; grid-template-columns:auto 1fr; gap:.25rem .75rem; margin:0 0 .75rem; } dt { color:var(--muted); } dd { margin:0; }
.tbl .row { display:grid; grid-template-columns:.8fr 1.4fr 1fr .8fr; gap:.5rem; align-items:center; min-height:1.75rem; padding:0 .35rem; border-bottom:1px solid var(--edge); border-left:3px solid transparent; } .tbl .row.head { color:var(--muted); font-weight:600; }
.st { border:1px solid currentColor; border-radius:.25rem; padding:0 .35rem; font-size:.6875rem; width:fit-content; } .st.ok { color:var(--success); } .st.warn { color:var(--warning); } .st.bad { color:var(--danger); }
.mono { font-family:'Cascadia Mono',Consolas,monospace; } pre { margin:0; font:inherit; white-space:pre-wrap; }
.cols-65 { grid-template-columns:minmax(0,65fr) minmax(0,35fr); }
.ide { grid-template-columns:minmax(0,18fr) minmax(0,52fr) minmax(0,30fr); grid-template-areas:"a b c" "d d d"; } .ide .term { grid-column:1/-1; border-right:0; }
.media { grid-template-columns:3.75rem minmax(0,1fr) 11rem; } .media .tl { grid-column:1/-1; border-right:0; } .rail li { justify-content:center; padding:.2rem 0; font-size:.6875rem; }
.gridfield { background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:24px 24px; background-position:-1px -1px; }
.canvas { min-height:9rem; } .empty { display:grid; gap:.25rem; place-content:center; text-align:center; min-height:6rem; background:color-mix(in srgb,var(--surface) 88%,transparent); border:1px dashed var(--border); border-radius:.4rem; padding:.75rem; }
.track { height:1.25rem; background:var(--raised); border:1px solid var(--edge); margin:.25rem 0; position:relative; } .track i { position:absolute; inset:0 auto 0 var(--o,0%); width:var(--w); background:var(--selected); border:1px solid var(--border); }
.mon { grid-template-columns:minmax(0,58fr) minmax(0,42fr); } .mon .wide { grid-column:1/-1; border-right:0; } .big { font-size:2.5rem; line-height:1; font-weight:600; margin:.25rem 0; }
.spark { height:2.5rem; border-bottom:2px solid var(--selection-indicator); background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--grid) calc(10% - 1px) 10%); }
.wiz { grid-template-columns:9rem minmax(0,1fr); } .steps { margin:0; padding:.75rem; list-style:none; border-right:1px solid var(--edge); } .steps li { border-left-color:var(--edge); } .steps .done { color:var(--muted); } .steps .cur { background:var(--selected); border-left-color:var(--selection-indicator); font-weight:600; }
.prog { height:.75rem; margin:.75rem 0 .25rem; background:repeating-linear-gradient(90deg,var(--raised) 0 calc(10% - 3px),transparent calc(10% - 3px) 10%); border:1px solid var(--edge); }
.actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.75rem; } .field { display:block; margin-top:.25rem; padding:.35rem .5rem; border:1px solid var(--border); border-radius:.3rem; background:var(--bg); min-height:2rem; }
.comm { grid-template-columns:minmax(0,22fr) minmax(0,53fr) minmax(0,25fr); } .msg { margin:.25rem 0; padding:.4rem .6rem; background:var(--raised); border-radius:.4rem; width:fit-content; max-width:85%; } .msg.me { background:var(--selected); margin-left:auto; } .compose { display:flex; gap:.5rem; margin-top:.75rem; } .compose .field { flex:1; margin:0; color:var(--muted); }
.cad { grid-template-columns:minmax(0,17fr) minmax(0,60fr) minmax(0,23fr); } .viewport { min-height:11rem; } .box { width:6rem; height:6rem; margin:1.5rem auto 0; border:2px solid var(--fg); transform:skew(-20deg,10deg) rotate(0); opacity:.85; }
.sys { grid-template-columns:10rem minmax(0,1fr); } .form { display:grid; gap:.5rem; max-width:22rem; } label { display:block; color:var(--muted); font-size:.75rem; }
@media (max-width:640px) { .body { grid-template-columns:1fr !important; } .reg { border-right:0; } main { padding:1rem; } }
@media (forced-colors:active) { .btn.primary { background:ButtonFace; color:ButtonText; border:2px solid ButtonText; } .reg.active h3 { border-bottom-color:Highlight; } .gridfield { background-image:none; } }