:root{--background:#1b293d;--surface:#21324a;--viewport:#101a27;--orange:#ed6c39;--orange-hover:#ffb69a;--cream:#fff3cf;--text:#fafaf9;--muted:#a0b0c5;--line:#3b4d66;--green:#b0cf81;color:var(--text);background:var(--background);font-synthesis:none;font-family:Archivo,Arial,sans-serif}*{box-sizing:border-box}body{min-width:360px;margin:0}button,select,input{font:inherit}button{color:var(--text);border:1px solid var(--line);cursor:pointer;background:0 0;padding:9px 13px;font-size:12px;font-weight:700}button:hover{border-color:var(--orange);color:var(--orange-hover)}button:disabled{cursor:default;opacity:.45}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--cream);outline-offset:3px}button span{margin-left:12px}select{max-width:100%;color:var(--text);border:1px solid var(--line);background:var(--surface);border-radius:0;padding:9px 26px 9px 10px;font-size:12px}input[type=checkbox]{accent-color:var(--orange);margin:0}input[type=range]{accent-color:var(--orange);cursor:pointer;min-width:0}.app-header{border-bottom:7px solid var(--orange);align-items:center;gap:30px;height:104px;padding:18px 28px;display:flex}.brand{align-items:center;gap:17px;display:flex}.brand-mark{color:var(--orange);letter-spacing:-10px;width:55px;font:900 47px/.9 Archivo Black,Arial Black,sans-serif}.brand-mark span{font-size:40px}h1{letter-spacing:-1.8px;color:var(--orange);white-space:nowrap;margin:0;font:400 36px/.95 Archivo Black,Arial Black,sans-serif}.version{letter-spacing:0;border:1px solid var(--orange);vertical-align:top;margin-left:10px;padding:3px 5px;font:500 10px Archivo,sans-serif}.brand p{letter-spacing:2px;color:var(--cream);margin:10px 0 0;font:10px ui-monospace,monospace}.header-copy{border-left:1px solid var(--line);color:var(--muted);padding-left:28px;font-size:13px;line-height:1.5}.header-copy strong{color:var(--text);font-weight:500}.app-header nav{gap:8px;margin-left:auto;display:flex}.app-header nav button{padding:12px 17px}.app-header .square{padding:12px 16px}.project-bar{border-bottom:1px solid var(--line);background:#23344c;align-items:center;gap:10px;height:50px;padding:0 28px;font-size:13px;display:flex}.project-dot{background:var(--orange);width:7px;height:7px}#document-name{font-weight:700}#save-state{letter-spacing:.7px;color:var(--muted);margin-left:7px;font:9px ui-monospace,monospace}.example-picker{letter-spacing:1px;align-items:center;gap:14px;margin-left:auto;font:9px ui-monospace,monospace;display:flex}.example-picker select{padding-top:6px;padding-bottom:6px}.workbench{grid-template-columns:minmax(330px,.96fr) minmax(400px,1.65fr) 246px;height:calc(100dvh - 190px);min-height:530px;display:grid}.editor-panel,.preview-panel,.inspector{min-width:0;min-height:0}.editor-panel{border-right:1px solid var(--line);background:#19273b;flex-direction:column;display:flex}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;min-height:57px;padding:12px 16px;display:flex}h2{letter-spacing:1.3px;white-space:nowrap;margin:0;font-size:11px}h2>span{color:var(--orange);margin-right:8px;font:11px ui-monospace,monospace}.run-controls,.preview-actions{align-items:center;gap:10px;display:flex}.live-toggle{color:var(--muted);align-items:center;gap:6px;font-size:11px;display:flex}.primary{background:var(--orange);color:#182435;border-color:var(--orange);padding:8px 12px}.primary:hover{background:var(--orange-hover);color:#182435}.editor-file{color:var(--muted);border-bottom:1px solid #2b3c53;align-items:center;gap:8px;padding:13px 17px;font:10px ui-monospace,monospace;display:flex}.editor-file>span:first-child{color:var(--orange);font-size:8px}.editor-file>span:last-child{letter-spacing:1px;margin-left:auto;font-size:8px}#editor{flex:1;min-height:200px;overflow:hidden}.cm-editor{height:100%;font-size:12px}.cm-scroller{line-height:1.85;font-family:Cascadia Code,SFMono-Regular,Consolas,monospace!important}.cm-focused{outline:none!important}.cm-content{padding:20px 0!important}.cm-line{padding:0 16px 0 8px!important}.editor-bottom{color:var(--muted);border-top:1px solid var(--line);justify-content:space-between;gap:8px;padding:12px 15px;font:9px ui-monospace,monospace;display:flex}.diagnostic{min-height:48px;color:var(--green);background:#23384a;align-items:center;gap:9px;padding:14px 15px;font-size:11px;line-height:1.4;display:flex}.status-dot{background:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}.diagnostic.error{color:#ffbc99;background:#4a2b2a}.diagnostic.busy{color:var(--cream)}.preview-panel{flex-direction:column;display:flex}.preview-actions{gap:3px}.preview-actions button{color:var(--muted);border:1px solid #0000;padding:7px 8px;font-size:10px}.preview-actions button.selected{color:var(--cream);border-color:var(--line);background:var(--surface)}#frame{border-left:1px solid var(--line);margin-left:7px}.viewport-wrap{background:var(--viewport);flex:1;min-height:300px;position:relative;overflow:hidden}#viewport{touch-action:none;cursor:grab;width:100%;height:100%;position:absolute;inset:0}#viewport:active{cursor:grabbing}.viewport-label{letter-spacing:1.2px;color:var(--green);pointer-events:none;align-items:center;gap:7px;font:8px ui-monospace,monospace;display:flex;position:absolute;top:20px;left:20px}.viewport-title{pointer-events:none;max-width:calc(100% - 40px);position:absolute;top:56px;left:20px}.viewport-title>span{color:var(--muted);letter-spacing:1.2px;font:8px ui-monospace,monospace}.viewport-title h3{white-space:pre-line;letter-spacing:-1.4px;color:var(--cream);margin:10px 0;font:400 clamp(24px,2.6vw,40px)/.92 Archivo Black,Arial Black,sans-serif}.viewport-help{text-align:center;color:#99aabd;letter-spacing:.5px;pointer-events:none;font:8px ui-monospace,monospace;position:absolute;bottom:17px;left:0;right:0}.viewport-help span{color:var(--orange);padding:0 6px}.axis-label{color:#b1c4dd;pointer-events:none;flex-wrap:wrap;gap:9px;width:66px;font:9px ui-monospace,monospace;display:flex;position:absolute;top:20px;right:20px}.axis-y{color:var(--green);text-align:center;width:100%}.axis-x{color:var(--orange)}.preview-bottom{border-top:1px solid var(--line);min-height:48px;color:var(--muted);justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:10px;display:flex}.preview-bottom label{white-space:nowrap;align-items:center;gap:7px;display:flex}.preview-bottom input[type=range]{width:60px}.preview-bottom>span{font:8px ui-monospace,monospace}.muted{color:var(--line);padding:0 3px}.inspector{border-left:1px solid var(--line);background:var(--surface);overflow:auto}.inspector .panel-heading{z-index:2;background:var(--surface);position:sticky;top:0}.text-button{color:var(--muted);border:none;padding:6px 0;font-size:10px}.inspector-content{padding:18px}.section-kicker{color:var(--orange);letter-spacing:1px;margin:0 0 13px;font:8px ui-monospace,monospace}.inspector-intro{color:var(--muted);margin:0 0 16px;font-size:12px;line-height:1.6}.parameter{margin-bottom:16px}.parameter-top{justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;font-size:11px;display:flex}.parameter input[type=number]{border:1px solid var(--line);width:65px;min-width:0;color:var(--cream);text-align:right;background:#19273b;padding:5px;font:11px ui-monospace,monospace}.parameter input[type=range]{width:100%;margin:0;display:block}.parameter-limits{color:#8d9cb1;justify-content:space-between;margin-top:5px;font:8px ui-monospace,monospace;display:flex}.output-summary{border-top:1px solid #465973;border-bottom:1px solid #465973;margin:20px 0 18px;padding:15px 0 12px}.inspector h3{letter-spacing:1.3px;color:var(--cream);margin:0 0 18px;font-size:9px}dl{margin:0}dl>div{justify-content:space-between;gap:8px;padding:6px 0;display:flex}dt{color:var(--muted);font-size:11px}dd{margin:0;font:12px ui-monospace,monospace}.export-panel label{color:var(--muted);margin-bottom:8px;font-size:10px;display:block}.export-panel select{width:100%;font-size:10px}.export-button{background:var(--orange);border:1px solid var(--orange);color:#1b293d;justify-content:space-between;width:100%;margin-top:12px;padding:12px;display:flex;box-shadow:3px 3px #122034}.export-button:hover{background:var(--orange-hover);color:#1b293d}.export-panel p{color:var(--muted);margin:13px 0 22px;font-size:9px;line-height:1.5}.reference-link{text-align:left;color:var(--cream);border:0;padding:0;font-size:10px}.reference-link span{color:var(--orange)}.app-footer{letter-spacing:1px;height:36px;color:var(--muted);border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:15px;padding:0 28px;font:8px ui-monospace,monospace;display:flex}.app-footer b{color:var(--orange);font-weight:900}.gpu-error{border:1px solid var(--orange);background:#4a2b2a;padding:20px;font-size:12px;line-height:1.6;position:absolute;top:45%;left:10%;right:10%}dialog{color:var(--text);background:var(--background);border:2px solid var(--orange);width:calc(100% - 48px);max-width:920px;max-height:90dvh;padding:28px;box-shadow:12px 12px #101a27}dialog::backdrop{background:#08101bba}.dialog-header{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.dialog-header h2{white-space:normal;letter-spacing:-1px;color:var(--cream);font:400 36px/.95 Archivo Black,Arial Black,sans-serif}dialog p{color:var(--muted);font-size:12px;line-height:1.7}.reference-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.reference-grid section{border-top:1px solid var(--line);min-width:0;padding-top:12px}.reference-grid h3{letter-spacing:1px;color:var(--orange);font-size:10px}pre{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--cream);font:11px/1.7 ui-monospace,monospace}code{color:var(--cream)}.limits{border-top:1px solid var(--line);padding-top:15px}@media (width<=1150px){.workbench{grid-template-columns:minmax(300px,.95fr) minmax(340px,1.3fr) 218px}.header-copy{display:none}.panel-heading{padding-left:12px;padding-right:12px}.preview-actions button{padding:7px 5px}.preview-bottom>span{display:none}.viewport-help{letter-spacing:0;font-size:7px}}@media (width<=930px){.workbench{grid-template-columns:minmax(300px,1fr) minmax(350px,1.2fr);height:auto}.editor-panel,.preview-panel{height:650px}.inspector{border-top:1px solid var(--line);border-left:0;grid-column:1/-1}.inspector-content{grid-template-columns:1fr 1fr 1fr;gap:20px;display:grid}.inspector-intro,.inspector-content>.section-kicker{display:none}.output-summary{border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);margin:0;padding:0 20px}.reference-link{grid-column:1/-1}}@media (width<=680px){.app-header{gap:10px;height:92px;padding:15px}.brand-mark{display:none}h1{font-size:27px}.brand p{letter-spacing:1.3px;font-size:7px}.app-header nav{gap:5px}.app-header nav button{padding:9px;font-size:10px}.app-header nav button span{display:none}.app-header .square{padding:9px 12px}.project-bar{flex-wrap:wrap;height:auto;padding:10px 15px}.example-picker{width:100%;margin-top:6px}.example-picker select{flex:1}.workbench{flex-direction:column;display:flex}.editor-panel{border-right:0;height:490px}.preview-panel{height:510px}.inspector-content{grid-template-columns:1fr 1fr}.export-panel{grid-column:1/-1}.output-summary{border-right:0}.app-footer{height:auto;padding:12px 15px;font-size:7px}.app-footer>span:last-child{display:none}.reference-grid{grid-template-columns:1fr}.dialog-header h2{font-size:27px}dialog{padding:20px}}@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:500;src:url(./archivo-vietnamese-500-normal-k0drYPZA.woff2)format("woff2"),url(./archivo-vietnamese-500-normal-7W3lD2kQ.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:500;src:url(./archivo-latin-ext-500-normal-RFhg4CpD.woff2)format("woff2"),url(./archivo-latin-ext-500-normal-D7mXw3Kz.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:500;src:url(./archivo-latin-500-normal-CGugC8dq.woff2)format("woff2"),url(./archivo-latin-500-normal-pkzA7jw9.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:700;src:url(./archivo-vietnamese-700-normal-nuAQAQa7.woff2)format("woff2"),url(./archivo-vietnamese-700-normal-Bz2vkKqq.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:700;src:url(./archivo-latin-ext-700-normal-DD_nkw6b.woff2)format("woff2"),url(./archivo-latin-ext-700-normal-CgyfnKjw.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo;font-style:normal;font-display:swap;font-weight:700;src:url(./archivo-latin-700-normal-D9cHMWGj.woff2)format("woff2"),url(./archivo-latin-700-normal-lT5TFe7H.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Archivo Black;font-style:normal;font-display:swap;font-weight:400;src:url(./archivo-black-latin-ext-400-normal-DQAASfvW.woff2)format("woff2"),url(./archivo-black-latin-ext-400-normal--j5WRK12.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Archivo Black;font-style:normal;font-display:swap;font-weight:400;src:url(./archivo-black-latin-400-normal-BTVu2TQR.woff2)format("woff2"),url(./archivo-black-latin-400-normal-HW9MwEcM.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
