:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:monospace}body{color:#cfc9d8;background:#08060d;margin:0;overflow:hidden}:root{--phone-width:430px}#app{height:100dvh;display:flex}#view{min-width:0;max-width:var(--phone-width);flex:1;margin:0 auto;position:relative}#app:has(#debug:not(:empty)) #view{margin:0}.view-canvas{width:100%;height:50%;position:absolute;inset:40% 0 auto}#debug{border-left:1px solid #ffffff1f;flex:none;margin-left:auto;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}}@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 #status,.controls #latency,.controls #fps{color:#8a8496;font-size:12px}#debug canvas{display:block}.view-sliders{top:56px;left:calc(var(--phone-width) + 12px);z-index:10;background:#0a0a12d9;border:1px solid #ffffff1f;border-radius:6px;flex-direction:column;gap:6px;padding:10px 12px;display:flex;position:fixed}.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}.view-sliders .view-states{gap:6px;display:flex}.view-sliders input[type=color]{background:0 0;border:none;width:280px;height:22px;padding:0}