:root{font-family:ui-sans-serif,system-ui,sans-serif;color:#edf3ff;background:#0b1120;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(1000px 550px at 10% 0%,#263653,#0b1120 70%)}
button,select,input,textarea{font:inherit}button{cursor:pointer}a{color:#b9d8ff}a:hover{color:white}
.editor-header,main,footer{width:min(100% - 48px,1480px);margin-inline:auto}
.editor-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0;border-bottom:1px solid #3b4b66}
.identity{color:#f5f7ff;text-decoration:none;font-size:22px;font-weight:800;letter-spacing:-.04em}.identity small{display:block;color:#9cb7df;font-size:9px;letter-spacing:.19em}
nav,footer{display:flex;gap:24px;flex-wrap:wrap}nav a,footer a{font-size:13px;text-decoration:none}
main{padding:30px 0 90px}.editor-heading{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:23px}
.eyebrow{color:#9fc9ff;font:700 11px ui-monospace,monospace;letter-spacing:.18em}.editor-heading h1{margin:6px 0;font-size:clamp(30px,4vw,55px);line-height:1.07;letter-spacing:-.06em}
.editor-heading p:last-child{margin:9px 0 0;color:#b9c9e1;font-size:13px}.heading-actions{display:flex;gap:9px;flex-wrap:wrap}
button,select{padding:10px 12px;border:1px solid #5d7599;border-radius:8px;background:#1b2a43;color:#f7faff}button:hover{background:#314f79}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ffae81;outline-offset:2px}
.editor-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:20px;align-items:start}
.preview-column,.code-column{min-width:0;border:1px solid #354966;border-radius:14px;background:#121d30;overflow:hidden}
.screen{position:relative;aspect-ratio:16/9;background:#03060a;overflow:hidden}.screen canvas{position:absolute;inset:0;width:100%;height:100%}.screen #ui-overlay{pointer-events:none}
.hud{position:absolute;left:0;right:0;top:0;padding:12px 15px;display:flex;justify-content:space-between;gap:15px;color:#f3f8ff;background:linear-gradient(#08111bd9,transparent);font-size:12px;text-shadow:0 1px 3px #000}
.preview-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:17px}.preview-controls label{display:grid;gap:6px;color:#b8cae4;font-size:12px}.preview-controls output{float:right}.preview-controls select,.preview-controls input{width:100%}.preview-controls button{align-self:end}
.compile-status{margin:0 17px 12px;padding:11px 13px;border:1px solid #4f786e;border-radius:7px;background:#183a36;color:#a8f5df;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.compile-status.error{border-color:#b46868;background:#42252d;color:#ffd1d1}
.preview-note{margin:0 17px 17px;color:#aabbd5;font-size:12px;line-height:1.5}
.pass-tabs{display:flex;overflow:auto;gap:5px;padding:11px 12px 0;border-bottom:1px solid #364967}.pass-tabs button{white-space:nowrap;border-radius:7px 7px 0 0;border-bottom:0}.pass-tabs button[aria-selected=true]{background:#34517a}
.code-label{display:block;margin:11px 14px 7px;color:#aabbd5;font-size:12px}.CodeMirror{height:clamp(360px,42vw,650px);background:#0a1324;color:#e6edff;font:13px/1.48 ui-monospace,SFMono-Regular,monospace}.CodeMirror-gutters{background:#101d33;border-right:1px solid #345070}.CodeMirror-linenumber{color:#7193bc}.CodeMirror-cursor{border-color:#ffae81}.cm-comment{color:#8198aa}.cm-keyword{color:#dba9ff}.cm-number{color:#ffb882}.cm-variable,.cm-def{color:#a8d8ff}
.editor-actions{display:flex;align-items:center;gap:14px;padding:12px 14px;border-top:1px solid #364967}.editor-actions span{color:#aabbd5;font-size:12px}
details{border-top:1px solid #364967;padding:11px 14px}summary{cursor:pointer;font-size:13px;font-weight:700}.uniforms,.channels{display:grid;gap:10px;padding:12px 0}.uniform-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(120px,2fr);gap:8px;align-items:center;color:#bed0e8;font-size:12px}.uniform-row input{width:100%;padding:7px;border:1px solid #536a8a;border-radius:5px;background:#0c1628;color:#fff}.channels{color:#a9bfdc;font-size:12px;line-height:1.5}
.config-section{position:relative;margin-top:22px;padding:23px;border:1px solid #3c5271;border-radius:14px;background:#141f33}.config-section h2{margin:5px 0;font-size:25px}.config-section p:not(.eyebrow){color:#b6c8e2;font-size:12px}.config-section>button{position:absolute;top:25px;right:23px}.config-section pre{max-height:440px;overflow:auto;margin:20px 0 0;padding:18px;border:1px solid #304460;border-radius:9px;background:#08111f;color:#cfe8ff;font:12px/1.5 ui-monospace,monospace}
footer{padding:25px 0 40px;border-top:1px solid #3b4b66;color:#aabbd5}
.uniform-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.uniform-row input{flex:1 1 70px;min-width:55px;max-width:150px}
.uniform-row input[type=checkbox]{flex:0 0 20px}
@media(max-width:950px){.editor-layout{grid-template-columns:1fr}.editor-header{align-items:start;flex-direction:column}.CodeMirror{height:470px}}
@media(max-width:580px){.editor-header,main,footer{width:min(100% - 28px,1480px)}.editor-heading{align-items:start;flex-direction:column}.preview-controls{grid-template-columns:1fr}.config-section>button{position:static}.config-section pre{margin-top:13px}}