:root {
  color-scheme: dark light;
  --bg:#12151a; --panel:#181c23; --line:#2a303b;
  --fg:#e8eaed; --dim:#98a2b3; --accent:#7fd8e4;
  --pass:#5ac47f; --fail:#e2686a; --warn:#e0b24d;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f6f7f9; --panel:#fff; --line:#dfe3ea; --fg:#12151a; --dim:#5b6472; --accent:#0d7d8f; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color: var(--accent); }
code { font-family: ui-monospace,"Cascadia Code",monospace; font-size:.92em; }

header.site { padding:22px 20px 6px; }
header.site h1 { margin:0; font-size:26px; letter-spacing:.01em; }
.tag { margin:2px 0 0; color:var(--dim); }

.cards { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
         padding:20px; max-width:1000px; }
.card { display:block; padding:18px; background:var(--panel); border:1px solid var(--line);
        border-radius:10px; text-decoration:none; color:inherit; }
.card:hover { border-color:var(--accent); }
.card h2 { margin:0 0 8px; font-size:18px; color:var(--accent); }
.card p { margin:0 0 8px; color:var(--dim); }
.feat { color:var(--fg) !important; font-size:13px; }

.note { margin:8px 20px 24px; padding:14px 16px; max-width:1000px;
        border-left:3px solid var(--accent); background:var(--panel); border-radius:0 8px 8px 0; }
.note h3 { margin:0 0 6px; font-size:15px; }
.note p { margin:0; color:var(--dim); }

footer.site { padding:16px 20px 30px; color:var(--dim); font-size:13px; }
footer.site p { margin:2px 0; }

/* ---- dropzone ---- */
.dropzone { border:2px dashed var(--line); border-radius:12px; background:var(--panel);
            padding:34px 20px; text-align:center; transition:border-color .12s, background .12s; }
.dropzone.dz-over { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--panel)); }
.dz-title { margin:0 0 4px; font-size:17px; }
.dz-sub { margin:0 0 14px; color:var(--dim); font-size:13px; }
.dz-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.dz-actions button { padding:8px 16px; border-radius:7px; border:1px solid var(--line);
                     background:var(--bg); color:var(--fg); cursor:pointer; font-size:14px; }
.dz-actions button:hover { border-color:var(--accent); color:var(--accent); }

/* ---- report ---- */
.report { width:100%; border-collapse:collapse; margin-top:16px; }
.report th, .report td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line);
                         vertical-align:top; }
.report th { color:var(--dim); font-weight:600; font-size:13px; }
.report .measured { font-family:ui-monospace,monospace; font-size:13px; }
.s-pass { color:var(--pass); } .s-fail { color:var(--fail); } .s-warn { color:var(--warn); }
.detail { color:var(--dim); font-size:13px; }

/* ---- render stage ---- */
#stage { margin-top:18px; }
.bgbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.bglabel { color:var(--dim); font-size:13px; margin-right:2px; }
.bgbar button { padding:5px 11px; border-radius:6px; border:1px solid var(--line);
                background:var(--panel); color:var(--fg); cursor:pointer; font-size:13px; }
.bgbar button:hover { border-color:var(--accent); color:var(--accent); }
.bgbar input[type=color] { width:34px; height:28px; padding:0; border:1px solid var(--line);
                           border-radius:6px; background:none; cursor:pointer; }
#canvashost { border:1px solid var(--line); border-radius:10px; overflow:hidden;
              background:#12151a; }
/* Viewer size. Morning.star asked for "at least half more or double that size"
   as a low-vision accommodation -- the old min(62vh,560px) was too small to
   inspect a world in. Default is now roughly double the height, and the
   --viewer-h custom property lets the size buttons change it live. */
:root { --viewer-h: min(86vh, 1100px); }
x3d-canvas { display:block; width:100%; height:var(--viewer-h); min-height:420px; }
main { max-width:none !important; }
pre.bounds { background:var(--panel); border:1px solid var(--line); border-radius:8px;
             padding:12px 14px; overflow-x:auto; font-size:13px; margin:14px 0 4px; }
.bgbar select { padding:5px 8px; border-radius:6px; border:1px solid var(--line);
                background:var(--panel); color:var(--fg); font-size:13px; max-width:260px; }
.bgbar input[type=range] { width:110px; accent-color:var(--accent); }
.chk { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--dim); }
.chk input { accent-color:var(--accent); }
.mode-on { border-color:var(--accent) !important; color:var(--accent) !important; }


/* ---- low-vision accommodations ---------------------------------------------
   Raise contrast on the control strip. The dim grey used for secondary labels
   sat around 3:1 against the panel, which is under the WCAG AA 4.5:1 minimum
   for body text -- fine as decoration, not fine as the only label on a control. */
.bglabel { color: var(--fg); font-weight: 600; font-size: 13px; }
.chk { color: var(--fg); }
.bgbar button, .bgbar select { font-size: 14px; padding: 7px 13px; }
.bgbar button:focus-visible, .bgbar select:focus-visible,
.dz-actions button:focus-visible, .report a:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.viewer-size { display:inline-flex; gap:4px; }
.viewer-size button { min-width:34px; }
.report th { color: var(--fg); }
.detail { color: var(--dim); font-size: 13.5px; }

/* Fullscreen: the host element becomes the whole screen, so the canvas must
   fill it rather than keeping its --viewer-h height. */
#canvashost:fullscreen { background:#000; }
#canvashost:fullscreen x3d-canvas { height:100vh; }

/* ---- material previewer ------------------------------------------------------ */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden;
                   clip:rect(0 0 0 0); white-space:nowrap; }
.mat-layout { display:grid; grid-template-columns:minmax(240px,320px) 1fr;
              gap:18px; padding:0 20px 40px; align-items:start; }
@media (max-width:900px) { .mat-layout { grid-template-columns:1fr; } }
.mat-list { position:sticky; top:12px; display:flex; flex-direction:column; gap:8px; }
.mat-list input[type=search], .mat-list select {
  width:100%; padding:9px 11px; font-size:14px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel); color:var(--fg); }
.swatches { max-height:64vh; overflow-y:auto; display:flex; flex-direction:column;
            gap:2px; border:1px solid var(--line); border-radius:8px; padding:6px;
            background:var(--panel); }
.swatch { display:flex; align-items:center; gap:9px; padding:6px 8px; border:0;
          border-radius:6px; background:none; color:var(--fg); cursor:pointer;
          font-size:13.5px; text-align:left; width:100%; }
.swatch:hover, .swatch:focus-visible { background:color-mix(in srgb,var(--accent) 16%,transparent); }
.chip { width:22px; height:22px; border-radius:5px; border:1px solid var(--line);
        flex:0 0 auto; }
.sw-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mat-stage x3d-canvas { height:min(64vh,720px); }
.mat-controls { margin-top:14px; }
.mat-controls h2 { font-size:17px; margin:0 0 10px; color:var(--accent); }
.mat-controls h3 { font-size:14px; margin:18px 0 6px; color:var(--dim); }
.sliders { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; }
.ctl { display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:10px;
       font-size:13.5px; }
.ctl code { font-size:12.5px; color:var(--dim); min-width:112px; text-align:right; }
.ctl input[type=range] { width:100%; accent-color:var(--accent); }
.ctl input[type=color] { width:44px; height:28px; padding:0; border:1px solid var(--line);
                         border-radius:6px; background:none; cursor:pointer; }
#copy, #shot { padding:8px 15px; border-radius:7px; border:1px solid var(--line);
               background:var(--panel); color:var(--fg); cursor:pointer; font-size:14px; }
#copy:hover, #shot:hover { border-color:var(--accent); color:var(--accent); }