:root { color-scheme:dark; font:14px/1.6 system-ui,sans-serif; background:#121821; color:#e1e8ef; }
* { box-sizing:border-box; }
body { margin:0; }
main { display:grid; grid-template-columns:minmax(0,1fr) 350px; min-height:100svh; }
#stage { position:sticky; top:0; height:100svh; min-width:0; overflow:hidden; background:#141922; }
#stage.light { background:#d8d5cf; }
#stage.checker { background-color:#bcbec3; background-image:linear-gradient(45deg,#8e929b 25%,transparent 25%),linear-gradient(-45deg,#8e929b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#8e929b 75%),linear-gradient(-45deg,transparent 75%,#8e929b 75%); background-size:32px 32px; background-position:0 0,0 16px,16px -16px,-16px 0; }
canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
#loading { position:absolute; z-index:2; inset:40% 12% auto; text-align:center; padding:18px; background:#152030e8; border:1px solid #3e4e62; border-radius:5px; pointer-events:none; }
#loading[hidden] { display:none; }
#view-label,#comparison-label { position:absolute; z-index:3; bottom:16px; left:16px; padding:4px 9px; font-size:12px; background:#121821d9; color:#c1cfdd; pointer-events:none; }
#comparison-label { bottom:46px; }
aside { padding:24px; min-width:0; background:#1b2330; border-left:1px solid #344152; }
h1 { font-size:21px; line-height:1.3; margin:12px 0; }
p { color:#b0becc; margin:9px 0 16px; }
a { color:#aacbea; }
fieldset { margin:18px 0; padding:12px; border:1px solid #40516a; }
legend { padding:0 5px; }
.buttons { display:flex; flex-wrap:wrap; gap:7px; }
button,select { border:1px solid #506781; background:#29384b; color:inherit; font:inherit; border-radius:4px; padding:7px 9px; cursor:pointer; }
button[aria-pressed="true"] { background:#294b3d; border-color:#81c79c; }
button:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #b8d5ed; outline-offset:2px; }
label { display:block; margin:9px 0; }
select { max-width:100%; margin-left:8px; }
input[type="range"] { width:100%; accent-color:#81c79c; }
input[type="checkbox"] { accent-color:#81c79c; }
output { font-variant-numeric:tabular-nums; font-size:12px; display:block; color:#9dd9b3; }
label output { display:inline; float:right; margin-left:8px; }
#motion-value { height:6.4em; overflow:auto; margin-top:8px; scrollbar-width:thin; }
.small,.note,#assets,pre { font-size:12px; }
.small { margin:9px 0 0; }
.note { margin-top:18px; color:#c6b38f; }
#status { border-left:3px solid #7e9fb9; padding-left:10px; font-size:12px; }
#status.error { border-left-color:#dd8b83; color:#e9aaa4; }
details { margin-top:18px; }
summary { cursor:pointer; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; color:#afc1d5; }
#assets { padding-left:20px; color:#b7c4d1; }
@media(max-width:760px) { main { display:block; } #stage { position:relative; height:61svh; min-height:360px; } aside { border-left:0; border-top:1px solid #344152; padding:19px; } #loading { inset:32% 6% auto; font-size:12px; } #view-label { max-width:calc(100% - 32px); } }