/* Fixed stage geometry keeps palette transitions from moving the surrounding page. */
.palette-stage{position:relative;height:clamp(227px,38svh,413px);border-radius:16px;overflow:hidden;isolation:isolate;--paint-0:#F5F1E8;--paint-1:#25344A;--paint-2:#F47735;--ink-0:#171717;--ink-1:#fff;--ink-2:#171717}
.palette-stage .palette-scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(28px);transition:opacity .45s ease-out,transform .6s cubic-bezier(.16,1,.3,1);contain:layout style}
.palette-stage .palette-scene.is-current{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;z-index:1}
.palette-stage .palette-scene.is-exiting{visibility:visible;opacity:0;transform:translateX(-28px);z-index:0}
.main-view .palette-stage .hero-swatches{height:100%;min-height:0;border:0}
.scene-mark{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;padding:0;pointer-events:none;text-align:left}
.scene-mark svg{display:block;width:100%;height:100%;fill:currentColor;pointer-events:none}
.scene-mark .paint{pointer-events:visiblePainted}
[data-role="0"]{color:var(--paint-0)}[data-role="1"]{color:var(--paint-1)}[data-role="2"]{color:var(--paint-2)}
.scene-mark:focus-visible{outline-color:currentColor;outline-offset:-6px}
.scene-hex{position:absolute;bottom:18px;left:20px;padding:7px 9px;border-radius:4px;font-size:15px;font-weight:600;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .15s}
[data-role="0"] .scene-hex{background:var(--paint-0);color:var(--ink-0)}[data-role="1"] .scene-hex{background:var(--paint-1);color:var(--ink-1)}[data-role="2"] .scene-hex{background:var(--paint-2);color:var(--ink-2)}
.scene-mark:hover .scene-hex,.scene-mark:focus-visible .scene-hex{visibility:visible;opacity:1}
.room-lines{fill:none;stroke:currentColor;stroke-width:1.5}.room-seams{fill:none;stroke:var(--paint-0);stroke-width:2;pointer-events:none}
.view-room,.view-paper,.view-type{background:var(--paint-0)}
.palette-view-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding-top:12px;min-height:48px;font-size:12px;color:var(--muted)}
.view-field{display:flex;align-items:center;gap:8px}.view-field select{font-size:12px;padding:6px 22px 6px 7px;background:var(--page);color:var(--ink);border:0;max-width:160px}
.view-play{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;background:none;padding:8px 4px;color:var(--ink);font-size:12px;min-width:70px}.view-play:hover{color:var(--purple)}.view-play svg.icon{width:14px;height:14px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.view-context{display:flex;justify-content:center}
.main-view .page-heading h1{white-space:nowrap}
.context-canvas{position:relative;width:min(100%,760px);height:100%;padding:18px 24px;display:flex;flex-direction:column;background:var(--paint-0);color:var(--context-ink);overflow:hidden;container-type:inline-size}
.context-base{position:absolute;inset:0;border:0;width:100%;height:100%;background:var(--paint-0)}
.context-top,.context-body,.context-bottom{position:relative;pointer-events:none}
.context-top{display:flex;align-items:center;gap:18px;padding-bottom:10px;border-bottom:1px solid currentColor;font-size:11px}.context-top b{font-size:20px;letter-spacing:-.03em}.context-top span:last-child{margin-left:auto}
.context-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;flex:1;min-height:0;align-items:center;padding-block:12px}
.context-copy{min-width:0}.context-heading{padding:0;background:none;border:0;color:inherit;text-align:left;pointer-events:auto}.context-heading span{display:block;font-size:17px}.context-heading strong{display:block;font-size:clamp(26px,4vw,40px);line-height:1.05;letter-spacing:-.035em;margin-top:3px}.context-copy p{font-size:11px;line-height:1.5;margin:12px 0}
.context-cta{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:3px;background:var(--paint-2);color:var(--ink-2);font-size:11px;padding:9px 11px}.context-cta svg{width:12px;height:12px}
.context-art{position:relative;height:100%;max-height:220px;aspect-ratio:1;width:auto;max-width:100%;justify-self:end}.context-art .scene-hex{font-size:12px;left:4px;bottom:4px;padding:5px}
.context-bottom{border-top:1px solid currentColor;padding-top:10px;display:flex;justify-content:space-between;gap:12px;font-size:11px}
@media(max-width:800px){.palette-stage{height:clamp(227px,37.333svh,360px)}}
@media(max-width:520px){.main-view .page-heading h1{font-size:clamp(32px,10vw,49px)}.palette-stage{height:clamp(213px,36.667svh,327px);border-radius:12px}.context-canvas{padding:14px}.context-top{gap:10px;font-size:10px}.context-top b{font-size:18px}.context-heading strong{font-size:27px}.context-heading span{font-size:14px}.context-copy p{font-size:11px;margin:8px 0}.context-cta{padding:8px 7px;font-size:11px;gap:5px}.context-art{width:100%;height:auto;max-height:180px}.context-bottom{font-size:11px;flex-wrap:wrap;gap:5px}.view-field select{min-height:40px;font-size:16px;max-width:155px}.view-play{min-height:44px}.palette-view-controls{padding-top:6px}.scene-hex{font-size:14px;left:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.palette-stage .palette-scene{transform:none!important;transition:none!important}}