:root { color-scheme:light; --bg:#edf2f8; --panel:#fff; --text:#172b43; --muted:#53677f; --border:#c8d5e4; font:15px/1.5 system-ui,sans-serif; color:var(--text); background:var(--bg); } :root[data-theme=dark] { color-scheme:dark; --bg:#0b1625; --panel:#142132; --text:#e9f0f8; --muted:#b1c1d3; --border:#435770; } * { box-sizing:border-box; } body { margin:0; } main { max-width:1160px; padding:36px 24px; margin:auto; } header { display:flex; justify-content:space-between; gap:24px; align-items:center; } h1 { font-size:34px; margin:0 0 3px; letter-spacing:-1px; } h2 { font-size:18px; margin:0; } p { margin:5px 0; } header p,.evidence p { color:var(--muted); } .eyebrow { font-size:11px; letter-spacing:2px; font-weight:750; } .controls { display:flex; gap:12px; } label { display:flex; flex-direction:column; font-size:12px; gap:5px; color:var(--muted); } select { font:inherit; font-size:14px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:7px; padding:8px; } :focus-visible { outline:3px solid #3982ee; outline-offset:3px; } aside { border-left:3px solid #3982ee; margin:24px 0 12px; padding:10px 15px; font-size:13px; color:var(--muted); } #status { font-size:12px; margin:12px 0; } #mount { background:var(--panel); border:1px solid var(--border); border-radius:17px; overflow:hidden; box-shadow:0 8px 30px #10284009; } iframe { width:100%; border:0; display:block; height:900px; } .evidence { display:grid; grid-template-columns:2fr 1fr; gap:24px; margin:24px 0; font-size:13px; } pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:16px; background:var(--panel); border:1px solid var(--border); border-radius:9px; font-size:12px; max-height:280px; overflow:auto; } summary { cursor:pointer; font-weight:650; } @media(max-width:650px) { main { padding:22px 12px; } header { flex-direction:column; align-items:flex-start; } .evidence { grid-template-columns:1fr; } }