:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:monospace}body{color:#cfc9d8;background:#08060d;margin:0;overflow:hidden}#app{height:100vh;display:flex}#view{flex:1;min-width:0;position:relative}.view-canvas{width:100%;height:100%;position:absolute;inset:0}#debug{border-left:1px solid #ffffff1f;flex:none;overflow-y:auto}#debug:empty{display:none}.controls{z-index:10;flex-wrap:wrap;align-items:center;gap:12px;max-width:calc(100vw - 24px);display:flex;position:fixed;top:12px;left:12px}button{font:inherit;color:inherit;cursor:pointer;background:#aa3bff1a;border:1px solid #aa3bff80;border-radius:6px;padding:8px 16px}button:hover{background:#aa3bff40}@media (pointer:coarse){button{touch-action:manipulation;min-height:44px;padding:10px 18px}.controls .volume input[type=range]{height:44px}}@media (width<=600px){.controls{gap:8px;max-width:none;top:8px;left:8px;right:8px}.controls button{white-space:nowrap;flex:auto;padding-left:8px;padding-right:8px}.controls .volume{flex:100%}.controls .volume input[type=range]{flex:1;width:auto}}.controls .volume{align-items:center;gap:6px;font-size:12px;display:flex}.controls .volume input[type=range]{accent-color:#aa3bff;width:100px}#debug canvas{display:block}.view-sliders{z-index:10;background:#0a0a12d9;border:1px solid #ffffff1f;border-radius:6px;flex-direction:column;gap:6px;padding:10px 12px;display:flex;position:absolute;bottom:12px;left:12px}.view-sliders label{color:#888;align-items:center;gap:8px;font-size:11px;display:flex}.view-sliders span{width:80px}.view-sliders span.value{text-align:right;color:#cfc9d8;width:42px}.view-sliders input[type=range]{accent-color:#aa3bff;width:280px}