:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#eaf7ff;background:#081017;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 10%,#173347,#081017 48%,#05090d);min-width:320px;min-height:100vh;margin:0;overflow:hidden}#demo{align-items:center;width:100vw;height:100vh;padding-left:min(620px,50vw);display:flex}.renderer-wrapper{border-left:1px solid #274653;width:50%;height:100%;position:relative}.renderer-wrapper:first-child{border-left:0;border-right:1px solid #274653}.renderer-wrapper>div{z-index:1;color:#a8d9e9;letter-spacing:.12em;text-transform:uppercase;font:700 .68rem ui-monospace,monospace;position:absolute;top:12px;left:14px}.renderer-wrapper canvas{width:100%;height:100%;display:block}.hud{z-index:2;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(145deg,#0e202be8,#09141bd9);border:1px solid #2b596b;border-radius:18px;width:min(570px,50vw - 36px);max-height:calc(100vh - 36px);padding:20px;position:absolute;top:18px;left:18px;overflow:auto;box-shadow:0 24px 80px #000b}.eyebrow{color:#71d8ff;letter-spacing:.16em;font:700 .68rem ui-monospace,monospace}h1{letter-spacing:-.06em;margin:9px 0 8px;font-size:clamp(2rem,4vw,3.7rem);line-height:.93}p{color:#b7cdd5;line-height:1.5}code,a{color:#8ee5ff}.status,.controls,.metrics{gap:10px;margin-top:16px;display:grid}.status{background:#0d1c25;border:1px solid #235163;border-radius:13px;padding:13px}.status-line{justify-content:space-between;gap:10px;font-weight:700;display:flex}#status-label{color:#71d8ff}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metrics div{background:#122632;border-radius:8px;min-width:0;padding:8px}dt{color:#82a6b2;text-transform:uppercase;font-size:.6rem}dd{font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;margin:4px 0 0;font-size:.78rem;overflow:hidden}.controls{grid-template-columns:1fr 1fr}label{color:#a9c4cd;letter-spacing:.08em;text-transform:uppercase;gap:6px;font-size:.68rem;display:grid}select,button{color:#eaf7ff;width:100%;font:inherit;background:#122b38;border:1px solid #35697a;border-radius:9px;padding:10px 11px}button{cursor:pointer}button:hover{border-color:#71d8ff}button:disabled,select:disabled{opacity:.45;cursor:default}.wide{grid-column:1/-1}.contract{background:#10232d;border:1px solid #2b596b;border-radius:12px;margin-top:14px;padding:12px}.contract strong{color:#d2f5ff;display:block}.contract span{color:#71d8ff;font:700 .7rem ui-monospace,monospace}.contract p{margin:6px 0 0;font-size:.8rem}.source{margin-bottom:0;font-size:.7rem}.error{color:#ffb8b8;white-space:pre-wrap}@media (width<=900px){body{overflow:auto}#demo{min-height:100vh;padding-left:0}.hud{width:min(470px,100vw - 20px);max-height:calc(100vh - 20px);padding:16px;top:10px;left:10px}}