:root{--bg:#f4efe4;--panel:#fffbf4f0;--ink:#1d1a16;--muted:#6d6459;--accent:#d95d39;--edge:#1d1a161f}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{color:var(--ink);background:radial-gradient(circle at 0 0,#d95d392e,#0000 30%),linear-gradient(135deg,#f8f3ea,#efe5d4);font-family:Space Grotesk,Avenir Next,sans-serif}#app{grid-template-rows:auto 1fr;gap:20px;padding:24px;display:grid}.chrome,.panel{background:var(--panel);border:1px solid var(--edge);border-radius:20px;box-shadow:0 18px 60px #251f1614}.chrome{justify-content:space-between;align-items:center;gap:18px;padding:20px 24px;display:flex}.chrome h1,.eyebrow{margin:0}.eyebrow{color:var(--accent);letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}.chrome-actions{align-items:end;gap:12px;display:flex}.sample-picker{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;gap:6px;font-size:.72rem;display:grid}.sample-picker select{border:1px solid var(--edge);min-width:210px;min-height:44px;color:var(--ink);cursor:pointer;letter-spacing:0;background:#ffffffbd;border-radius:8px;padding:0 38px 0 12px;font:600 .92rem Space Grotesk,Avenir Next,sans-serif}.grid{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:20px;min-height:0;display:grid}.stack{gap:20px;min-height:0;display:grid}.panel{grid-template-rows:auto 1fr;min-height:0;display:grid;overflow:hidden}.panel-header{color:var(--muted);border-bottom:1px solid var(--edge);text-transform:uppercase;letter-spacing:.08em;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;font-size:.82rem;display:flex}.panel-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;min-width:0;display:flex}.panel-actions span{white-space:nowrap}.output-tabs{flex-wrap:wrap;flex:1;gap:6px;min-width:0;display:flex}.output-tab{border:1px solid var(--edge);min-height:32px;color:var(--muted);letter-spacing:0;background:#ffffff9e;border-radius:8px;padding:6px 9px;font-size:.7rem;font-weight:700}.output-tab[aria-pressed=true]{background:var(--ink);color:#fff}.output-tab:disabled{cursor:default;opacity:.45}#editor,#wgsl-output{height:100%;min-height:0}#wgsl-output{margin:0;padding:18px;font-family:IBM Plex Mono,ui-monospace,monospace;overflow:auto}#preview-canvas{border-right:1px solid var(--edge);width:100%;height:100%;min-height:260px}.preview-panel{min-height:360px}.preview-shell{grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);height:100%;min-height:0;display:grid}.uniforms{background:linear-gradient(#ffffff59,#ffffff14);align-content:start;gap:12px;padding:14px;display:grid;overflow:auto}.uniform-empty,.uniform-live{color:var(--muted);margin:0;font-size:.92rem;line-height:1.5}.preview-error{color:var(--ink);background:#d95d3914;border:1px solid #d95d3947;border-radius:8px;gap:10px;padding:12px;font-size:.9rem;line-height:1.45;display:grid}.preview-unavailable{color:var(--ink);background:#b9812814;border:1px solid #b9812847;border-radius:8px;gap:10px;padding:12px;font-size:.9rem;line-height:1.45;display:grid}.preview-error strong,.preview-error p,.preview-error ul,.preview-unavailable strong,.preview-unavailable p,.preview-unavailable ul{margin:0}.preview-error ul,.preview-unavailable ul{color:var(--muted);overflow-wrap:anywhere;gap:6px;padding-left:18px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.78rem;display:grid}.uniform-card{background:#ffffffa3;border:1px solid #1d1a1614;border-radius:14px;gap:10px;padding:12px;display:grid}.uniform-card-header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.uniform-card-header strong{font-size:.95rem}.uniform-card-header span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.uniform-field{grid-template-columns:32px minmax(0,1fr) 52px;align-items:center;gap:10px;font-size:.84rem;display:grid}.uniform-field input{width:100%}.uniform-color-field input[type=color]{border:1px solid var(--edge);background:0 0;border-radius:8px;min-height:32px;padding:0}.uniform-field output{text-align:right;color:var(--muted);font-family:IBM Plex Mono,ui-monospace,monospace}.texture-upload{color:var(--muted);grid-template-columns:48px minmax(0,1fr);align-items:center;gap:8px 10px;font-size:.84rem;display:grid}.texture-upload input{min-width:0;color:var(--muted)}.texture-upload output{text-overflow:ellipsis;white-space:nowrap;grid-column:2;font-family:IBM Plex Mono,ui-monospace,monospace;overflow:hidden}button{background:var(--ink);color:#fff;cursor:pointer;border:none;border-radius:999px;min-height:44px;padding:12px 18px}.toolbar-button{border:1px solid var(--edge);min-height:36px;color:var(--ink);letter-spacing:.04em;background:#ffffffbd;border-radius:8px;padding:7px 10px;font-size:.72rem;font-weight:700}.toolbar-button:hover:not(:disabled){background:#fffffff0}button:disabled{opacity:.55;cursor:not-allowed}button[aria-busy=true]:disabled{cursor:progress}.guide-panel{grid-template-rows:auto auto}.example-gallery{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:12px;display:grid}.example-card,.tutorial-step{min-height:0;color:var(--ink);text-align:left;background:#ffffffad;border:1px solid #1d1a161a;border-radius:8px;gap:5px;padding:10px;display:grid}.example-card:hover,.tutorial-step:hover{background:#f2faf9db;border-color:#15658052}.example-card[aria-pressed=true],.tutorial-step[aria-pressed=true]{background:#e1f4f1eb;border-color:#15658075}.example-card strong,.tutorial-step strong{font-size:.9rem}.example-card span,.example-card small,.tutorial-step small{color:var(--muted);font-size:.72rem;line-height:1.35}.tutorial-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px;display:grid}.tutorial-step{grid-template-columns:28px minmax(0,1fr);align-items:start}.tutorial-step span{color:#156580;background:#1565801f;border-radius:50%;grid-row:span 2;place-items:center;width:28px;height:28px;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.68rem;font-weight:700;display:grid}.tutorial-step small{grid-column:2}.compute-preview-state{color:var(--ink);background:#e1f4f1d1;border:1px solid #15658042;border-radius:8px;gap:8px;padding:12px;font-size:.9rem;line-height:1.45;display:grid}.compute-preview-state strong,.compute-preview-state p,.compute-preview-state ul{margin:0}.compute-preview-state p{color:var(--muted)}.compute-preview-state ul{gap:8px;padding-left:0;list-style:none;display:grid}.compute-preview-state li{gap:4px;display:grid}.compute-preview-state span{color:#156580;font-size:.78rem;font-weight:700}.compute-preview-state code{color:var(--muted);overflow-wrap:anywhere;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:.76rem}.learning-line-highlight{background:#15658014}.learning-glyph{background:#5ec4bd;border-radius:50%;margin-top:6px;margin-left:14px;width:8px!important;height:8px!important}.learning-inline-hint{color:#b3e6e2db;font-style:italic}@media (width<=960px){.chrome{flex-direction:column;align-items:stretch}.chrome-actions{align-items:stretch}.sample-picker{flex:1}.sample-picker select{width:100%}.panel-header{flex-direction:column;align-items:flex-start}.panel-actions{justify-content:flex-start;width:100%}.toolbar-button{min-height:44px}.grid{grid-template-columns:1fr}.tutorial-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-shell{grid-template-columns:1fr}#preview-canvas{border-right:0;border-bottom:1px solid var(--edge)}}