@font-face{font-family:LabSans;src:url('./fonts/DejaVuSans.ttf')}@font-face{font-family:LabMono;src:url('./fonts/DejaVuSansMono.ttf')}
:root{color-scheme:dark;--bg:#10151d;--sidebar:#141b24;--panel:#171f2a;--raised:#1d2733;--line:#2a3544;--text:#e7edf5;--muted:#8e9eb3;--accent:#30deab;--active:#19382f;--canvas:#0e1823;--code:#111923;font-family:LabSans,Arial,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button,a,select,.upload-button{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.upload-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:inherit;text-decoration:none}button{color:var(--text);background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:9px 12px}button:hover{filter:brightness(1.16)}input,select{background:var(--bg);border:1px solid var(--line);border-radius:5px;color:var(--text);padding:9px 10px;min-width:0}input[type=range]{padding:0;accent-color:var(--accent);width:100%}.topbar{height:73px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:var(--sidebar)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:39px;height:36px;border:1px solid var(--accent);border-radius:9px;color:var(--accent);font-size:19px;line-height:34px;text-align:center;font-weight:bold}.brand strong{font-size:19px;letter-spacing:-.8px}.brand strong>span{font-weight:normal;color:var(--muted);margin-left:5px}.lab-label{color:var(--muted);font-size:11px;letter-spacing:1.8px;border-left:1px solid var(--line);padding-left:18px;margin-left:10px}.top-actions{display:flex;align-items:center;gap:20px;font-size:13px;color:var(--muted)}.top-actions button{border:none;background:transparent;font-size:22px;padding:0}.version{border:1px solid var(--line);padding:5px 9px;border-radius:5px;font-family:LabMono,monospace;font-size:11px}.workspace{display:grid;grid-template-columns:254px minmax(0,1fr);min-height:calc(100vh - 73px)}.sidebar{background:var(--sidebar);border-right:1px solid var(--line);padding:26px 15px 14px;display:flex;flex-direction:column}.sidebar-title{display:flex;justify-content:space-between;font-size:11px;font-weight:bold;letter-spacing:1.6px;color:var(--muted);padding:0 12px}.sidebar-title span{font-family:LabMono,monospace;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 5px;line-height:12px}.search{display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:6px;margin:20px 2px 14px;padding:0 10px;gap:5px}.search>span{font-size:23px;color:var(--muted)}.search input{border:0;background:transparent;min-width:0;width:100%;padding:11px 4px;font-size:12px}.search kbd{border:1px solid var(--line);padding:0 4px;color:var(--muted);font-size:10px}nav h2{font-size:11px;letter-spacing:1.25px;text-transform:uppercase;color:var(--muted);font-weight:normal;margin:24px 12px 10px}nav button{width:100%;display:flex;align-items:center;gap:11px;padding:11px 12px;margin:3px 0;text-align:left;border:1px solid transparent;background:none;font-size:13px;line-height:18px;color:var(--muted)}nav button i{font-style:normal;font-size:15px;width:17px;text-align:center}nav button.active{background:var(--active);border-color:#285746;color:var(--accent)}nav button .arrow{margin-left:auto;opacity:0}nav button.active .arrow{opacity:1}.sidebar-footer{margin-top:auto;border-top:1px solid var(--line);padding:26px 10px 8px;display:flex;align-items:center;gap:10px}.sidebar-footer strong{font-size:12px;display:block;font-weight:normal}.sidebar-footer small{font-size:10px;color:var(--muted);display:block;margin-top:6px}.sidebar-footer>span{font-size:26px;color:var(--muted)}.main{padding:26px 34px 16px;max-width:1600px;width:100%;margin:auto}.breadcrumb{font-size:12px;color:var(--muted);display:flex;gap:11px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:21px 0 26px}h1{font-size:29px;font-weight:normal;letter-spacing:-1px;margin:0 0 11px}.page-heading p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}.sample-index{font-family:LabMono,monospace;font-size:12px;color:var(--muted);white-space:nowrap}.render-toolbar{border:1px solid var(--line);border-bottom:none;background:var(--panel);padding:12px 14px;border-radius:8px 8px 0 0;display:flex;justify-content:space-between;gap:12px;align-items:center}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:12px}.live-label{font-size:10px;letter-spacing:1.1px;color:var(--accent);white-space:nowrap}.separator{height:19px;width:1px;background:var(--line)}.toolbar-left>label{font-size:12px;color:var(--muted)}.toolbar-left select{font-size:12px;padding:7px}.toolbar-right button{font-size:12px;padding:7px 10px;white-space:nowrap;background:transparent}#animate[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.stage{position:relative;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--canvas);min-height:200px}.canvas-wrap{max-width:1060px;margin:auto}canvas{width:100%;height:auto;display:block;aspect-ratio:8/5}#loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;justify-content:center;align-items:center;background:var(--canvas);font-size:14px}#loading small{color:var(--muted);font-size:12px}.spinner{width:26px;height:26px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error{position:absolute;inset:20px;background:#321f29;border:1px solid #a5586b;border-radius:8px;padding:25px;white-space:pre-wrap;line-height:1.7;color:#ffd7df}.statusbar{display:flex;align-items:center;gap:19px;border:1px solid var(--line);border-radius:0 0 8px 8px;background:var(--panel);padding:10px 15px;font-size:11px;color:var(--muted);font-family:LabMono,monospace}.status-spacer{flex:1}#backend-status{color:var(--accent)}.lower-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);gap:18px;margin-top:20px}.code-panel,.controls-panel{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:0 15px;height:47px;border-bottom:1px solid var(--line);font-size:14px}.panel-heading>strong{font-weight:normal}.panel-heading>span{color:var(--muted)}.tabs{height:100%;display:flex;gap:23px}.tabs button{background:none;border:none;border-radius:0;padding:0;color:var(--muted);font-size:12px}.tabs button.active{color:var(--text);border-bottom:2px solid var(--accent)}.quiet{background:none;border:none;font-size:12px;color:var(--muted);padding:5px}pre{margin:0;padding:22px 23px;min-height:270px;max-height:330px;overflow:auto;background:var(--code);font:12px/1.9 LabMono,monospace;color:#b5cddb;tab-size:2}#about{padding:15px 22px;font-size:14px;line-height:1.75;min-height:270px;color:var(--muted)}#about a{color:var(--accent)}.control-body{padding:17px 18px 13px;display:grid;gap:13px}.control-body label{display:grid;gap:8px;font-size:13px;color:var(--muted);position:relative}.control-body input,.control-body select{font-size:13px;width:100%}.control-body output{position:absolute;right:0;color:var(--text);font-family:LabMono,monospace}.control-body .upload-button{display:flex;justify-content:space-between;padding:10px 12px;border:1px dashed #3d5269;border-radius:5px;cursor:pointer;color:var(--text)}.upload-button span{font-size:11px;color:var(--muted)}#font-status{font-size:11px;color:var(--muted);margin:0;line-height:1.6}.main-footer{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted);padding:20px 0 5px}.main-footer a:hover{color:var(--accent)}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:14px 20px;border:1px solid var(--line);background:var(--raised);border-radius:7px;font-size:13px;box-shadow:0 5px 30px #0005;z-index:10}[hidden]{display:none!important}
html[data-theme=light]{color-scheme:light;--bg:#f2f5f9;--sidebar:#fff;--panel:#fff;--raised:#edf2f7;--line:#d7e0eb;--text:#192838;--muted:#586d83;--accent:#008960;--active:#e4f5ed;--canvas:#0e1823;--code:#f6f8fb}html[data-theme=light] pre{color:#325c71}html[data-theme=light] #loading{color:#e7edf5}
@media(min-width:1700px){.main{padding:35px 50px}.workspace{grid-template-columns:274px minmax(0,1fr)}}@media(max-width:1250px){.workspace{grid-template-columns:220px minmax(0,1fr)}.main{padding:25px 20px}.toolbar-left>label,.live-label,.separator{display:none}.lab-label{display:none}.lower-grid{grid-template-columns:minmax(0,1fr) 260px}.statusbar{gap:12px}#mode{max-width:180px;overflow:hidden;text-overflow:ellipsis}}@media(max-width:1000px){.workspace{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding:20px 8px}.main{padding:23px 16px}.lower-grid{grid-template-columns:1fr}.control-body{grid-template-columns:1fr 1fr}.control-body #font-status{grid-column:1/-1}nav button{font-size:12px;gap:6px;padding:9px 6px}nav button i{display:none}.topbar{padding:0 19px}.toolbar-left select{max-width:190px}.statusbar{flex-wrap:wrap;gap:8px}.sample-index{display:none}}@media(max-width:650px){.topbar{height:64px}.brand strong{font-size:17px}.top-actions>a,.version{display:none}.workspace{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:8px 12px}.sidebar-title,.search,.sidebar-footer,nav h2{display:none}nav{display:flex;overflow:auto;gap:5px;padding:3px 0}nav button{min-width:max-content;width:auto;padding:7px 10px;font-size:12px}nav button .arrow{display:none}.main{padding:18px 12px}.page-heading{margin:18px 0}h1{font-size:25px}.page-heading p{font-size:13px}.render-toolbar{padding:9px 8px;flex-wrap:wrap;gap:10px}.toolbar-left select{max-width:none;font-size:12px}.toolbar-right button{font-size:12px;padding:7px 8px}.toolbar-right{gap:5px}.stage{min-height:160px}.statusbar{font-size:10px;padding:8px}.lower-grid{margin-top:14px;gap:14px}.main-footer{font-size:11px;line-height:1.7}.control-body label{font-size:13px}.control-body input,.control-body select{font-size:13px}pre{font-size:11px}.topbar{position:sticky;top:0;z-index:4}}

.extra-controls{display:grid;gap:13px;grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:14px}.toolbar-right select{font-size:12px;padding:7px}.sidebar{max-height:calc(100vh - 73px);position:sticky;top:0}#navigation{overflow:auto;scrollbar-width:thin;min-height:150px}.sidebar-footer{flex-shrink:0;margin-top:24px}.control-body input,.control-body select{font-size:14px}.panel-heading .tabs button{font-size:14px}@media(max-width:650px){.sidebar{position:static;max-height:none}#navigation{min-height:0}.toolbar-right select{max-width:115px}.extra-controls{grid-column:1/-1}}