*{box-sizing:border-box}body{margin:0;background:#080f16;color:#dce8ef;font:13px system-ui}a{color:inherit;text-decoration:none}button,select,input,textarea{font:inherit;color:#cbdde8;background:#142330;border:1px solid #314657;border-radius:5px}button,select{padding:8px 12px}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){border-color:#7bddc3}.primary{background:#9cefd2;color:#0c2c24;font-weight:700}header{height:65px;padding:0 24px;display:flex;align-items:center;gap:34px;border-bottom:1px solid #273746}.brand{color:#84e7d3;font-size:24px;font-weight:800}.brand span{font-size:10px;letter-spacing:1px;color:#d6e5ef;margin-left:12px}nav{display:flex;gap:24px}nav a{padding:23px 0;color:#8da8b9}nav [aria-current]{color:#b4f8df;border-bottom:2px solid #91efd0}#device{margin-left:auto;font:10px monospace;color:#8bd1bd}.toolbar{min-height:66px;display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid #273746}.toolbar>div{flex:1}.toolbar strong{font-size:17px}.hint{margin-left:18px;color:#829bab;font-size:12px}main{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 163px);min-height:640px}.source-pane{display:flex;flex-direction:column;min-width:0;border-right:1px solid #314351}.pane-title{height:39px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 15px;background:#101d27;color:#8eaabc;font:10px monospace;letter-spacing:1px}.pane-title button,.source-foot button{font-size:10px;padding:4px 8px}.pane-title>div{display:flex;align-items:center;gap:14px}#editor{flex:1;min-height:280px}.source-foot{height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#748fa3;font-size:10px}.right-pane{min-width:0;display:flex;flex-direction:column;overflow:hidden}#preview{position:relative;flex:1;min-height:240px;overflow:auto;background:radial-gradient(ellipse at center,#122633,#080f16 75%)}#preview>canvas{display:block;width:100%;height:100%}.placeholder{height:100%;display:grid;place-items:center;color:#7a98a9}#preview-info{padding:8px 14px;font-size:10px;color:#8ab6b1;border-top:1px solid #1f3340}details{border-top:1px solid #2b3e4d;padding:10px 15px;background:#0e1a24}summary{cursor:pointer;color:#b2ccda}summary span{float:right;color:#718c9f;font-size:11px}details[open]{max-height:330px;overflow:auto}details p{font-size:11px;color:#93adbd;line-height:1.5}.launch-fields{display:flex;gap:10px;align-items:end;margin-top:12px}.launch-fields label{min-width:0;font-size:10px;color:#89a5b8;flex:1}.launch-fields input{display:block;width:100%;padding:7px;margin-top:4px}#config{width:100%;height:145px;font:11px/1.5 Consolas,monospace;padding:10px;resize:vertical}#reset-config{font-size:10px;margin-top:5px}.log-pane{height:210px;min-height:135px;display:flex;flex-direction:column;border-top:1px solid #2b3e4d}#log{padding:12px 14px;overflow:auto;font:11px/1.8 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.log-row{display:flex;gap:12px}.log-time{color:#57768b;white-space:nowrap}.log-error{color:#ffae9f}.log-success{color:#a3f1d2}.log-info{color:#9cb7ca}footer{height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:10px;color:#7391a5;border-top:1px solid #2a3d4b}#drop-overlay{position:fixed;inset:12px;background:#102c36ee;border:2px dashed #99f3d6;z-index:1000;display:grid;place-items:center;font-size:26px;pointer-events:none}#drop-overlay[hidden]{display:none}.numeric{padding:20px}.numeric canvas{width:100%;height:110px;image-rendering:pixelated}.numeric table{font:12px monospace;border-collapse:collapse;width:100%;margin-top:15px}.numeric td{padding:5px 10px;border-bottom:1px solid #263a49}.numeric h3{margin-top:0}a:focus-visible,button:focus-visible{outline:2px solid #96f5d9;outline-offset:3px}@media(max-width:1000px){.hint{display:none}.toolbar{flex-wrap:wrap}.brand span{display:none}}@media(max-width:700px){header{padding:0 14px;gap:22px}nav{gap:16px}#device{font-size:8px}main{grid-template-columns:1fr;height:auto}.source-pane{height:480px;border-right:0}.right-pane{height:740px}footer{height:auto;min-height:40px;gap:10px}.toolbar{padding:12px}.toolbar>div{flex-basis:100%}.launch-fields{flex-wrap:wrap}}
@media(max-width:700px){#device{display:none}.source-foot>span{max-width:75%}footer>span{min-width:0}}
.code-tabs{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:7px 10px;border-bottom:1px solid #293d4d;background:#0d1923;flex-shrink:0}.code-tabs button{font-size:11px;padding:7px 10px}.code-tabs [aria-selected=true]{color:#b8ffe5;border-color:#73bea5;background:#173d33}#save-wgsl{margin-left:auto}#shader-status{padding:7px 12px;font:10px/1.4 Consolas,monospace;color:#83c5b1;border-bottom:1px solid #233947;min-height:29px}#shader-status.stale{color:#f3c483;background:#292315}#code-editors{display:grid;grid-template-columns:minmax(0,1fr);flex:1;min-height:0;overflow:hidden}.code-column{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}#wgsl-editor{flex:1;min-height:0}#code-editors #editor{min-height:0}.code-label{display:none;font:10px monospace;color:#779bad;padding:7px 12px;background:#10212c}#code-editors[data-view=cuda] #wgsl-column,#code-editors[data-view=wgsl] #cuda-column{display:none}#code-editors[data-view=compare]{grid-template-columns:repeat(2,minmax(0,1fr))}#code-editors[data-view=compare] .code-label{display:block}#code-editors[data-view=compare] #cuda-column{border-right:1px solid #3c5363}main.comparing{grid-template-columns:minmax(0,2fr) minmax(360px,1fr)}@media(max-width:950px){main.comparing{grid-template-columns:1fr}.comparing .source-pane{height:650px}.comparing .right-pane{height:700px}main.comparing{height:auto}.code-tabs button{padding:6px 8px}}@media(max-width:550px){#code-editors[data-view=compare]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.comparing .source-pane{height:850px}#code-editors[data-view=compare] #cuda-column{border-right:0;border-bottom:1px solid #3c5363}.code-tabs{gap:4px}.code-tabs button{font-size:10px}#shader-status{font-size:9px}}

#shader-pass{max-width:100%;min-width:0}

.image-output{display:grid;place-items:center;min-height:100%;padding:24px}.image-output canvas{width:100%;height:auto;image-rendering:pixelated;box-shadow:0 0 0 1px #314657}

.surface-slice{display:flex;align-items:center;gap:1rem;padding:1rem;color:#a2f5d3}.surface-slice input{flex:1;min-width:60px}.surface-slice span{white-space:nowrap}

.image-panels{width:100%}.image-panel-labels{display:grid;margin-bottom:8px;font-size:11px;color:#9ebdcb;text-align:center}.image-panel-labels span+span{border-left:1px solid #314657}