.shader-lab{--lab-accent:#91f5ce;border:1px solid color-mix(in srgb, var(--secondary) 40%, var(--lightgray));background:var(--light);border-radius:16px;margin:2rem 0;overflow:hidden;box-shadow:0 16px 48px #00000012}.shader-lab [hidden]{display:none!important}.shader-toolbar,.shader-actions,.shader-editor-label{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.shader-toolbar{border-bottom:1px solid var(--lightgray);padding:.8rem 1rem}.shader-badge{color:var(--secondary);font:.64rem/1.5 var(--codeFont);letter-spacing:.09em}.shader-lab button{border:1px solid var(--lightgray);color:var(--darkgray);font:.78rem var(--bodyFont);cursor:pointer;background:0 0;border-radius:6px;min-height:36px;padding:.3rem .65rem}.shader-lab button:hover{border-color:var(--secondary);background:var(--highlight)}.shader-lab :is(button,textarea,input,summary):focus-visible{outline:2px solid var(--secondary);outline-offset:3px}.shader-workbench{grid-template-columns:1fr;display:grid}.shader-preview{background:var(--render-background,var(--light));min-width:0;position:relative;overflow:hidden}.shader-preview canvas{border-radius:0;width:100%;height:390px;margin:0;display:block}.shader-preview-caption{color:var(--darkgray);background:color-mix(in srgb, var(--render-background) 90%, transparent);font:.65rem var(--codeFont);letter-spacing:.12em;pointer-events:none;border-radius:4px;padding:.2rem .4rem;position:absolute;inset:auto 1rem .8rem auto}.shader-editor{background:color-mix(in srgb, var(--lightgray) 22%, var(--light));min-width:0}.shader-editor label{display:block}.shader-editor-label{color:var(--secondary);font:.65rem var(--codeFont);border-bottom:1px solid var(--lightgray);padding:.65rem 1rem}.shader-editor-label>span{color:var(--gray);font:.72rem var(--bodyFont)}.shader-editor textarea{box-sizing:border-box;resize:vertical;width:100%;height:300px;min-height:180px;color:var(--darkgray);font:.76rem/1.7 var(--codeFont);tab-size:2;white-space:pre;background:0 0;border:0;border-radius:0;margin:0;padding:1rem;display:block;overflow:auto}.shader-controls{border-top:1px solid var(--lightgray);grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding:1rem;display:grid}.shader-controls label{color:var(--darkgray);font-size:.82rem;display:block}.shader-controls output{float:right;color:var(--secondary);font-family:var(--codeFont)}.shader-controls input{width:100%;accent-color:var(--secondary);cursor:pointer;min-height:24px;margin:.6rem 0 0;display:block}.shader-grammar{border-top:1px solid var(--lightgray);padding:.7rem 1rem;font-size:.8rem}.shader-grammar summary{cursor:pointer;color:var(--secondary)}.shader-grammar .shader-word{white-space:pre-wrap;overflow-wrap:anywhere;max-height:9rem;margin-top:.8rem;font-size:.72rem;display:block;overflow-y:auto}.shader-lab .shader-status{border-top:1px solid var(--lightgray);color:var(--gray);margin:0;padding:.65rem 1rem;font-size:.74rem}.shader-lab .shader-errors{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--darkgray);border-top:2px solid var(--pop);border-radius:0;margin:0;padding:1rem;font-size:.75rem}.shader-story-hero{border:1px solid var(--lightgray);background:radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--tertiary) 22%, transparent), transparent 65%), radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--pop) 15%, transparent), transparent 60%);border-radius:16px;margin:1.5rem 0;padding:2rem 1.5rem;position:relative;overflow:hidden}.shader-story-hero .shader-eyebrow{color:var(--secondary);font:.68rem var(--codeFont);letter-spacing:.16em;margin:0}.shader-story-hero .shader-hero-title{color:var(--dark);margin:1rem 0;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.4}.shader-story-hero .shader-hero-note{max-width:36em;color:var(--darkgray);margin:0}.shader-story-hero .shader-tags{flex-wrap:wrap;gap:.5rem;margin-top:1.3rem;display:flex}.shader-tags span{border:1px solid color-mix(in srgb, var(--secondary) 30%, transparent);color:var(--secondary);font:.65rem var(--codeFont);border-radius:99px;padding:.25rem .6rem}@media (min-width:1400px){.shader-workbench{grid-template-columns:1fr 1fr}.shader-editor{border-left:1px solid var(--lightgray)}.shader-editor textarea{height:352px}}@media (max-width:500px){.shader-toolbar{flex-wrap:wrap}.shader-preview canvas{height:320px}.shader-controls{gap:.65rem;padding:.8rem}.shader-controls label{font-size:.72rem}.shader-editor textarea{font-size:.75rem}.shader-story-hero{padding:1.3rem}}