.design-container [hidden]{display:none!important}.docs-shell .design-container{max-width:1400px}.design-container .intro{font-size:1.15em;color:var(--gloaming-500);max-width:62ch;margin-bottom:var(--space-2xl)}.design-container .lab{display:grid;grid-template-columns:390px minmax(0,1fr);gap:var(--space-xl);align-items:start}.design-container .lab-stage{display:flex;flex-direction:column;gap:var(--space-xl);min-width:0}.design-container .lab-controls{position:sticky;top:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-lg);background:var(--limestone-600);border:1px solid var(--limestone-700);padding:var(--space-lg);border-radius:var(--border-radius-lg)}@media(max-width:860px){.design-container .lab{grid-template-columns:1fr}.design-container .lab-controls{position:static}}.design-container .control-group{display:flex;flex-direction:column;gap:var(--space-xs);padding-top:var(--space-md);border-top:1px solid var(--limestone-700)}.design-container .control-group:first-child{padding-top:0;border-top:none}.design-container .control-group h2{font-family:var(--font-heading);font-size:calc(.65em * var(--text-multiplier));text-transform:uppercase;letter-spacing:.06em;color:var(--gloaming-400);margin:0}.design-container .group-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm)}.design-container .group-head-value{font-family:var(--font-mono);font-size:calc(.72em * var(--text-multiplier));color:var(--gloaming-500)}.design-container .field{display:flex;flex-direction:column;gap:2px;flex:1}.design-container .lab select,.design-container .lab input,.design-container .lab button{font-family:var(--font-body)}.design-container .field span{font-family:var(--font-body);font-size:calc(.72em * var(--text-multiplier));color:var(--gloaming-500);display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap}.design-container .field select{width:100%;padding:4px 8px;font-size:calc(.78em * var(--text-multiplier));line-height:1.3;color:var(--gloaming-600);background:var(--limestone-500);border:1px solid var(--limestone-800);border-radius:var(--border-radius-sm)}.design-container .field-row{display:flex;gap:var(--space-sm)}.design-container .field--narrow{flex:0 0 76px}.design-container .grain-custom{padding-left:var(--space-sm);border-left:2px solid var(--limestone-700)}.design-container .mode-toggle{display:flex;gap:2px;background:var(--limestone-700);padding:3px;border-radius:var(--border-radius-md)}.design-container .mode-toggle button{flex:1;font-size:calc(.78em * var(--text-multiplier));line-height:1.3;padding:5px var(--space-sm);border:none;background:transparent;border-radius:calc(var(--border-radius-md) - 2px);cursor:pointer;color:var(--gloaming-500);transition:background-color .15s ease,color .15s ease}.design-container .mode-toggle button[aria-pressed=true]{background:var(--gloaming-600);color:var(--limestone-500)}.design-container .sr-only-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.design-container .swatch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.design-container .swatch,.design-container .swatch-all{height:32px;padding:0;border:1px solid var(--limestone-800);border-radius:4px;cursor:pointer}.design-container .swatch-all{background:linear-gradient(135deg,var(--fire-500) 0 20%,var(--sunshine-500) 20% 40%,var(--sapling-500) 40% 60%,var(--wave-500) 60% 80%,var(--coffee-500) 80% 100%);display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--limestone-100);text-shadow:0 1px 2px rgba(38,36,35,.5)}.design-container .swatch.is-selected,.design-container .swatch-all.is-selected{box-shadow:0 0 0 2px var(--limestone-600),0 0 0 3px var(--gloaming-700)}.design-container .shade-ramp{display:flex;gap:1px;margin-top:2px}.design-container .ramp-swatch{flex:1;height:28px;padding:0;border:none;cursor:pointer}.design-container .ramp-swatch:first-child{border-radius:3px 0 0 3px}.design-container .ramp-swatch:last-child{border-radius:0 3px 3px 0}.design-container .ramp-swatch.is-selected{box-shadow:inset 0 0 0 2px var(--limestone-600),inset 0 0 0 3px var(--gloaming-700)}.design-container .shade-ramp-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--gloaming-400)}.design-container input[type=range]{width:100%;margin:0 0 var(--space-sm);accent-color:var(--fire-550)}.design-container .presets{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.design-container .preset-btn{font-size:calc(.72em * var(--text-multiplier));line-height:1.3;padding:4px 10px;border:1px solid var(--limestone-800);background:var(--limestone-500);border-radius:999px;cursor:pointer;color:var(--gloaming-600);transition:background-color .15s ease,color .15s ease,border-color .15s ease}.design-container .preset-btn[aria-pressed=true]{background:var(--fire-550);border-color:var(--fire-550);color:var(--limestone-500)}.design-container .stage-card{background:var(--limestone-500);border:1px solid var(--limestone-700);border-radius:var(--border-radius-lg);padding:var(--space-3xl)}.design-container #stage-shape.stage-card{display:flex;align-items:center;justify-content:center;min-height:560px}.design-container .stage-card svg{width:100%;max-width:320px;height:auto}.design-container #stage-shape.stage-card svg{max-width:480px}.design-container .famgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-xl)}.design-container .famgrid .cell{margin:0;text-align:center}.design-container .famgrid .cell svg{width:100%;height:auto}.design-container .famgrid .cell figcaption{font-size:calc(.8em * var(--text-multiplier));color:var(--gloaming-500);margin-top:var(--space-sm)}.design-container .stage-card--section{padding:0;overflow:hidden}.design-container .lab-section{position:relative;padding:var(--space-5xl) var(--space-3xl);background-color:var(--sec-bg, var(--limestone-500));color:var(--sec-ink, var(--gloaming-500));overflow:hidden}.design-container .lab-section:before{content:"";position:absolute;inset:0;pointer-events:none;background-color:var(--sec-grain, var(--limestone-700));-webkit-mask-image:var(--tex-url);mask-image:var(--tex-url);-webkit-mask-size:var(--tex-size, 1500px auto);mask-size:var(--tex-size, 1500px auto);-webkit-mask-repeat:var(--tex-repeat, repeat);mask-repeat:var(--tex-repeat, repeat);mask-mode:luminance;opacity:var(--strength, .3)}.design-container .lab-section h2,.design-container .lab-section p{position:relative;max-width:60ch}.design-container .lab-section h2{font-family:var(--font-heading);font-size:calc(2.2em * var(--text-multiplier));color:var(--sec-heading, var(--gloaming-600));margin:0 0 var(--space-lg)}.design-container .lab-section p{color:var(--sec-ink, var(--gloaming-500));font-size:calc(1.1em * var(--text-multiplier));line-height:var(--line-height-normal);margin:0}.design-container .lab-output{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}@media(max-width:700px){.design-container .lab-output{grid-template-columns:1fr}}.design-container .output-block{background:var(--gloaming-700);border-radius:var(--border-radius-lg);overflow:hidden;display:flex;flex-direction:column}.design-container .output-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-lg);background:var(--gloaming-800)}.design-container .output-head h3{font-family:var(--font-heading);font-size:calc(.85em * var(--text-multiplier));color:var(--limestone-500);margin:0}.design-container .copy-btn{font-size:calc(.75em * var(--text-multiplier));line-height:1.3;padding:4px 10px;border:1px solid var(--gloaming-400);background:transparent;color:var(--limestone-400);border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .15s ease,color .15s ease}.design-container .copy-btn:hover{background:var(--gloaming-600);color:var(--limestone-500)}.design-container .output-block pre{margin:0;padding:var(--space-lg);overflow:auto;max-height:220px;flex:1}.design-container .output-block code{font-family:var(--font-mono);font-size:calc(.8em * var(--text-multiplier));color:var(--limestone-400);white-space:pre;line-height:1.6}.design-container .output-actions{grid-column:1 / -1;display:flex;gap:var(--space-sm)}.design-container .action-btn{font-size:calc(.85em * var(--text-multiplier));line-height:1.3;padding:var(--space-sm) var(--space-lg);border:1px solid var(--limestone-800);background:var(--limestone-500);color:var(--gloaming-600);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color .15s ease,color .15s ease}.design-container .action-btn--primary{background:var(--fire-550);border-color:var(--fire-550);color:var(--limestone-500)}.design-container .action-btn--primary:hover{background:var(--fire-600)}.design-container .output-hint{grid-column:1 / -1;font-size:calc(.85em * var(--text-multiplier));color:var(--gloaming-500);min-height:1.2em;margin:0}.design-container .lab-explainer{display:flex;flex-direction:column;gap:var(--space-2xl);max-width:65ch;margin-top:var(--space-4xl);padding-top:var(--space-2xl);border-top:1px solid var(--limestone-700)}.design-container .lab-explainer h2{font-family:var(--font-heading);font-size:calc(1.4em * var(--text-multiplier));font-weight:700;margin:0 0 var(--space-sm)}.design-container .lab-explainer p{font-size:calc(.95em * var(--text-multiplier));color:var(--gloaming-500);margin:0;line-height:1.6}.design-container .lab-note{margin-top:var(--space-3xl);color:var(--gloaming-500);font-size:calc(.9em * var(--text-multiplier))}