.gallery .gallery-navigation{grid-template-columns:44px minmax(100px,1fr) 44px 44px;gap:12px;max-width:620px}.gallery-prev{grid-area:1/1}.gallery .project-info{flex-direction:column;grid-area:1/2;gap:8px}.gallery-next{grid-area:1/3}.gallery-autoplay{grid-area:1/4}.gallery-demo-trigger{min-height:44px;color:inherit;text-underline-offset:5px;background:0 0;border:0;grid-area:2/1/auto/-1;justify-self:center;align-items:center;gap:12px;padding:7px 15px;font-size:14px;text-decoration:underline;display:inline-flex}.gallery-demo-trigger span{transition:transform .16s}@media (hover:hover){.gallery-demo-trigger:hover span{transform:translate(2px,-2px)}}.gallery .dock-anchor{width:700px;max-width:calc(100% - 32px);margin-top:8px}.gallery .hero-dock{width:min(100%,432px);margin-inline:auto}.gallery .customizer{overscroll-behavior:auto;width:100%;max-height:none;margin:16px auto 0;padding:14px 20px;position:relative;inset:auto;overflow:visible}.gallery .customizer-heading{margin-bottom:10px}.gallery .customizer-group{grid-template-columns:70px 1fr}.gallery .customizer .color-options{justify-content:start;gap:18px}.gallery .customizer .choice-options{max-width:470px}.gallery-card-controls{z-index:2;pointer-events:none;position:absolute;inset:0}.gallery-card-select{pointer-events:auto;cursor:pointer;touch-action:pan-y pinch-zoom;background:0 0;border:0;padding:0;position:absolute}.gallery-card-select:focus-visible{outline:3px solid var(--chapter-text);outline-offset:-4px;background:color-mix(in srgb, var(--chapter-text) 8%, transparent)}.gallery-card-select[hidden]{display:none}.gallery .gallery-stage{cursor:grab}.gallery[data-state=dragging] .gallery-stage{cursor:grabbing}.gallery[data-demo-open=true] .gallery-stage,.gallery[data-demo-open=true] .gallery-navigation{display:none}.interactive-demo-host{width:min(1160px,100% - 40px);margin:24px auto 0}.gallery svg [data-visible=false]{display:none}@media (width<=767px){.gallery .gallery-navigation{gap:6px;width:calc(100% - 32px);height:auto}.gallery .hero-dock{max-width:350px}.gallery .project-info{gap:1px;font-size:13px}.gallery .project-info p{white-space:normal;width:100%;min-height:2.5em;line-height:1.25}.gallery .gallery-demo-trigger{font-size:13px}.gallery .customizer{padding:10px 12px}.gallery .customizer-group{display:block}.gallery .customizer-group:not(.is-active-category){display:none}.gallery .customizer .color-options{justify-content:space-between;gap:4px}.interactive-demo-host{width:calc(100% - 24px);margin-top:16px}}@media (prefers-reduced-motion:reduce){.gallery-demo-trigger span{transition:none}}.stack-preview{aspect-ratio:312/675;isolation:isolate;outline-offset:-1px;background:#050b17;outline:1px solid #7dc1e929;position:relative}.stack-preview .stack-preview-poster,.stack-preview-canvas{width:100%;height:100%;position:absolute;inset:0}.stack-preview .stack-preview-poster{object-fit:cover}.stack-preview-canvas{opacity:0;pointer-events:none}.stack-preview[data-stack-ready=true] .stack-preview-canvas{opacity:1}.stack-preview-steer{z-index:1;border-radius:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y;background:0 0;border:0;position:absolute;inset:0}.stack-preview-caption{z-index:2;pointer-events:none;position:absolute;inset:0}.stack-preview-label{color:#e1edff;letter-spacing:.01em;max-width:calc(100% - 24px);font-size:10px;font-weight:650;line-height:1.4;position:absolute;top:14px;left:12px}.stack-preview-pause{color:#f1f7ff;pointer-events:auto;cursor:pointer;touch-action:manipulation;background:#122236;border:1px solid #82b5da45;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;transition:background .16s,border-color .16s;display:grid;position:absolute;bottom:8px;right:8px}.stack-preview-pause[hidden],.stack-preview-steer[hidden],.stack-preview-label[hidden]{display:none}.stack-preview-pause svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.stack-preview-play-icon,.stack-preview-pause[aria-pressed=true] .stack-preview-pause-icon{display:none}.stack-preview-pause[aria-pressed=true] .stack-preview-play-icon{display:block}.stack-preview-steer:focus-visible{outline-offset:-4px;outline:3px solid #93dcff}.stack-preview-pause:focus-visible{outline-offset:3px;outline:3px solid #93dcff}@media (hover:hover){.stack-preview-pause:hover{background:#1d3651;border-color:#8ecfff}}@media (prefers-reduced-motion:reduce){.stack-preview-pause{transition:none}}.responsive-playground{--playground-ink:#152028;--playground-muted:#56616a;--playground-silver:#e5e9ed;--playground-paper:#f8f9fa;--playground-accent:var(--studio-coral);padding-block:calc(var(--studio-chapter-space) / 2) calc(var(--studio-chapter-space) * .75);color:var(--playground-ink)}.responsive-playground__heading{gap:var(--studio-column-gap);margin-bottom:var(--studio-chapter-gap);grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);align-items:end;display:grid}.responsive-playground__heading h2{max-width:20ch;font:650 var(--chapter-title) / 1.04 Manrope, Arial, sans-serif;letter-spacing:-.025em;margin:0}.responsive-playground__heading h2 span{color:var(--playground-muted)}.responsive-playground__heading>p{max-width:35ch;color:var(--playground-muted);margin:0 0 4px;font-size:18px;line-height:1.6}.responsive-playground__workbench{background:var(--playground-silver);border-radius:var(--studio-radius-panel);border:1px solid #cbd2d8;overflow:clip}.responsive-playground__toolbar{border-bottom:1px solid #cbd2d8;justify-content:space-between;align-items:center;gap:16px;min-height:84px;padding:18px 28px;display:flex}.responsive-playground__toolbar>p{flex-wrap:wrap;align-items:center;gap:12px;margin:0;display:flex}.responsive-playground__toolbar strong{letter-spacing:-.07em;font:800 24px/1 Manrope,sans-serif}.responsive-playground__toolbar p span{color:var(--playground-muted);font-size:12px}.responsive-playground__devices{gap:4px;display:flex}.responsive-playground__devices button{min-height:44px;color:var(--playground-ink);cursor:pointer;transition:background-color var(--motion-feedback) var(--motion-ease), transform var(--motion-feedback) var(--motion-ease);background:0 0;border:1px solid #0000;border-radius:999px;padding:10px 18px;font:650 14px/1.2 Inter,sans-serif}.responsive-playground__devices button[aria-pressed=true]{background:var(--playground-accent)}.responsive-playground__devices button:active{transform:scale(.97)}.responsive-playground__devices button:disabled,.responsive-playground input:disabled{opacity:.55;cursor:default}.responsive-playground__devices button:focus-visible,.responsive-playground input:focus-visible{outline:3px solid var(--playground-ink);outline-offset:3px}.responsive-playground__stage{background-image:linear-gradient(#cbd2d86b 1px,#0000 1px),linear-gradient(90deg,#cbd2d86b 1px,#0000 1px);background-size:40px 40px;height:clamp(350px,45vw,540px);padding:16px;position:relative;overflow:hidden}.responsive-playground__preview{background:var(--playground-paper);border-radius:12px;width:100%;height:100%;overflow:hidden;box-shadow:0 18px 36px #15202820,0 0 0 1px #15202828;container:responsive-preview/inline-size}[data-playground-ready=true] .responsive-playground__preview{left:50%;top:var(--playground-top,16px);width:var(--playground-width);height:var(--playground-height);transform:translateX(-50%) scale(var(--playground-scale));transform-origin:50% 0;position:absolute}.responsive-playground__browser{height:38px;color:var(--playground-muted);background:#f0f2f4;border-bottom:1px solid #d8dce0;justify-content:space-between;align-items:center;gap:14px;padding:0 18px;font:450 10px/1 Inter,sans-serif;display:flex}.responsive-playground__browser-dots{gap:5px;display:flex}.responsive-playground__browser-dots i{background:#7d858c;border-radius:50%;width:5px;height:5px;display:block}.responsive-playground__site{flex-direction:column;height:calc(100% - 38px);padding:24px 30px 18px;display:flex}.responsive-playground__site-header{justify-content:space-between;align-items:center;margin-bottom:22px;display:flex}.responsive-playground__site-header strong{letter-spacing:-.08em;font:850 38px/1 Manrope,sans-serif}.responsive-playground__site-header strong span{vertical-align:top;margin:3px 0 0 5px;font-size:11px;display:inline-block}.responsive-playground__site-header>span{color:var(--playground-muted);text-align:right;font-size:10px;line-height:1.35}.responsive-playground__composition{flex:1;grid-template-columns:1fr 1.15fr;align-items:stretch;gap:26px;min-height:0;display:grid}.responsive-playground__copy{align-self:center}.responsive-playground__edition{text-transform:uppercase;letter-spacing:.11em;margin-bottom:20px;font-size:10px;font-weight:650;display:block}.responsive-playground__copy h3{letter-spacing:-.065em;margin:0 0 18px;font:700 clamp(26px,5cqw,54px)/1.04 Manrope,sans-serif}.responsive-playground__copy p{max-width:27ch;color:var(--playground-muted);margin:0;font-size:13px;line-height:1.6}.responsive-playground__signature{border-bottom:3px solid var(--playground-accent);margin-top:22px;padding-bottom:5px;font-size:12px;font-weight:700;display:inline-block}.responsive-playground__image{background:#e9e2d6;border-radius:3px;grid-template-rows:minmax(0,1fr) auto;min-height:0;margin:0;display:grid;position:relative;overflow:hidden}.responsive-playground__image img{object-fit:contain;object-position:center;width:100%;height:100%;min-height:0;display:block}.responsive-playground__image figcaption{color:#152028;justify-content:space-between;gap:10px;padding:9px 12px;font-size:9px;font-weight:650;display:flex}.responsive-playground__site-footer{color:var(--playground-muted);border-top:1px solid #d8dce0;justify-content:space-between;gap:12px;margin-top:22px;padding-top:12px;font-size:9px;display:flex}.responsive-playground__scale-note{color:var(--playground-muted);text-align:center;margin:0;font-size:11px;position:absolute;inset:auto 16px 12px}.responsive-playground__adjustment{background:#f0f2f4;border-top:1px solid #cbd2d8;padding:22px 28px 18px}.responsive-playground__range-label{justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:4px;font-size:13px;font-weight:600;display:flex}.responsive-playground__range-label output{font-variant-numeric:tabular-nums}.responsive-playground input[type=range]{width:100%;height:44px;accent-color:var(--playground-ink);cursor:ew-resize;background:0 0;margin:0;padding:0;display:block}.responsive-playground__range-ends{color:var(--playground-muted);justify-content:space-between;font-size:11px;display:flex}.responsive-playground__instruction{color:var(--playground-muted);margin:12px 0 0;font-size:11px}.responsive-playground__footer{justify-content:space-between;align-items:center;gap:16px;padding-top:18px;display:flex}.responsive-playground__footer p{color:var(--playground-muted);margin:0;font-size:13px}.responsive-playground__footer a{color:var(--playground-ink);white-space:nowrap;gap:10px;font-size:14px}.responsive-playground [hidden]{display:none!important}@container responsive-preview (width<=619px){.responsive-playground__site{padding:24px 22px 18px}.responsive-playground__composition{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr;gap:24px}.responsive-playground__copy h3{font-size:clamp(28px,10.5cqw,56px)}.responsive-playground__copy p{max-width:33ch}.responsive-playground__edition{margin-bottom:14px}.responsive-playground__signature{margin-top:16px}.responsive-playground__site-header{margin-bottom:26px}.responsive-playground__site-footer{margin-top:18px}}@media (hover:hover){.responsive-playground__devices button:hover{background:#d1d8df}.responsive-playground__devices button[aria-pressed=true]:hover{background:var(--studio-coral-hover)}}@media (width<=1023px){.responsive-playground__heading{grid-template-columns:1fr;gap:18px}}@media (width<=767px){.responsive-playground__heading>p{max-width:36ch;font-size:16px}.responsive-playground__toolbar{flex-wrap:wrap;padding:16px}.responsive-playground__toolbar>p{justify-content:space-between;width:100%}.responsive-playground__devices{width:100%}.responsive-playground__devices button{flex:1}.responsive-playground__adjustment{padding:18px 16px}.responsive-playground__footer{flex-direction:column;align-items:start;gap:4px}.responsive-playground__footer a{min-height:44px}}@media (prefers-reduced-motion:reduce){.responsive-playground__devices button{transition:none}}@media (forced-colors:active){.responsive-playground__workbench{border-color:canvastext}.responsive-playground__devices button{border-color:buttontext}.responsive-playground__devices button[aria-pressed=true]{color:highlighttext;background:highlight}}
