.feature-demo-canvas{aspect-ratio:16/9;width:100%;height:auto;display:block;overflow:hidden}.feature-studio{margin:24px 0 40px}.demo-workspace{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px;display:grid}.demo-workspace>.demo-panel:first-child{width:100%;min-width:0}.demo-panel{border:1px solid var(--border);background:var(--card);border-radius:16px;min-width:0}.demo-panel-heading,.demo-preview-footer{color:var(--muted-foreground);justify-content:space-between;align-items:center;gap:12px;padding:16px;font-size:12px;display:flex}.demo-panel-heading{border-bottom:1px solid var(--border)}.demo-panel-heading>span:first-child{align-items:center;gap:8px;display:flex}.demo-live-dot{background:var(--color-signal-dim);border-radius:50%;width:6px;height:6px}.demo-preview-footer{border-top:1px solid var(--border)}.demo-controls{flex-direction:column;gap:20px;padding:20px;display:flex}.demo-tabs{border-bottom:1px solid var(--border);display:flex}.demo-tabs button{cursor:pointer;color:var(--muted-foreground);border-bottom:2px solid #0000;flex:1;padding:12px 4px;font-size:13px}.demo-tabs button[aria-pressed=true]{color:var(--foreground);border-color:var(--foreground)}.design-library{flex-direction:column;gap:20px;display:flex}.gallery-heading{justify-content:space-between;align-items:center;gap:20px;display:flex}.gallery-heading :is(h2,h3){margin-top:8px;font-size:18px;font-weight:800}.gallery-eyebrow{color:var(--muted-foreground);font-size:12px}.gallery-count{letter-spacing:-.06em;font-size:38px;font-weight:900}.gallery-count small{color:var(--muted-foreground);letter-spacing:0;font-size:13px}.gallery-selection{z-index:5;border:1px solid var(--border);background:var(--header-bg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 4px 25px var(--color-shade-soft);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font-size:12px;display:flex;position:sticky;bottom:12px}.gallery-selection a{white-space:nowrap;font-weight:800}.design-library>.demo-input{max-width:440px}.design-categories{flex-wrap:wrap;gap:4px;display:flex}.design-categories .demo-button{padding:8px;font-size:12px}.design-categories .demo-button[aria-pressed=true]{background:var(--foreground);color:var(--background)}.design-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.design-preset{border:1px solid var(--border);text-align:left;cursor:pointer;background:var(--surface);border-radius:12px;min-width:0;padding:12px}.design-preset[aria-pressed=true]{border-color:var(--foreground);box-shadow:inset 0 0 0 1px var(--foreground)}.design-preset:hover{border-color:var(--muted-foreground)}.design-preset strong{overflow-wrap:anywhere;margin-top:8px;font-size:12px;display:block}.design-swatch{border:2px solid;align-items:center;gap:8px;min-height:65px;padding:12px;display:flex;overflow:hidden}.design-swatch>span:first-child{font-size:20px}.design-swatch-line{opacity:.55;border-radius:4px;flex:1;height:4px}.swatch-ticket,.swatch-special-nana,.swatch-special-ddd{border-style:dashed}.swatch-paper,.swatch-special-omong{background-image:repeating-linear-gradient(0deg, transparent 0 13px, var(--color-rule-grey) 13px 14px)}.swatch-stripe{background-image:repeating-linear-gradient(135deg, transparent 0 10px, var(--color-rule-light) 10px 14px)}.swatch-split,.swatch-ribbon,.swatch-special-hina,.swatch-special-aya{border-top-width:9px}.swatch-polaroid{border-bottom-width:10px}.swatch-comic,.swatch-pixel,.swatch-stack{box-shadow:3px 3px 0 var(--color-offset-grey);border-width:3px}.swatch-minimal,.swatch-outline,.swatch-corner,.swatch-log{background:0 0!important}.swatch-underline,.swatch-log{border-width:0 0 2px}.swatch-hud{clip-path:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}.design-library :is(button,input):focus-visible{outline:2px solid var(--foreground);outline-offset:3px}.demo-controls fieldset{min-width:0}.demo-label{width:100%;color:var(--muted-foreground);flex-direction:column;gap:12px;font-size:12px;display:flex}legend.demo-label{margin-bottom:12px}.demo-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.demo-option,.demo-button{border:1px solid var(--border);background:var(--surface-subtle);color:var(--foreground);cursor:pointer;border-radius:9px;padding:12px 4px;font-size:12px;font-weight:700}.demo-option[aria-pressed=true]{border-color:var(--foreground);background:var(--foreground);color:var(--background)}.demo-option:hover,.demo-button:hover{border-color:var(--muted-foreground)}.demo-button{padding:8px 12px}.demo-input{border:1px solid var(--border);background:var(--surface-subtle);width:100%;color:var(--foreground);border-radius:9px;padding:12px;font-size:13px}.demo-label input[type=range]{width:100%;accent-color:var(--foreground);cursor:pointer}.demo-action{background:var(--color-signal);width:100%;color:var(--color-show-panel);cursor:pointer;border-radius:10px;padding:12px;font-size:12px;font-weight:800}.demo-action:hover{background:var(--color-signal-deep)}.demo-notice{min-height:16px;color:var(--muted-foreground);margin-top:-12px;font-size:12px;line-height:1.6}.feature-studio :is(button,input):focus-visible{outline:2px solid var(--foreground);outline-offset:4px}.cam-speaking .cam-border{animation:1.3s ease-in-out infinite alternate demo-frame}.cam-speaking .audio-bar{transform-box:fill-box;transform-origin:50%;animation:.65s ease-in-out infinite alternate demo-audio}.demo-confetti{transform-box:fill-box;transform-origin:50%;animation:3.5s ease-in-out infinite demo-confetti}.demo-glitch{animation:2.7s steps(2,end) infinite demo-glitch}.demo-danmaku{animation:6s linear infinite demo-danmaku}.demo-emoji{animation:4s linear infinite demo-fall}.demo-bubble{animation:3s ease-in-out infinite alternate demo-bubble}.demo-donation{transform-origin:50%;animation:3s ease-in-out infinite demo-alert}.demo-paused *,.demo-paused .cam-border,.demo-paused .audio-bar{animation-play-state:paused!important}@keyframes demo-frame{to{filter:drop-shadow(0 0 14px var(--frame-color))}}@keyframes demo-audio{to{transform:scaleY(.3)}}@keyframes demo-confetti{0%,to{transform:translateY(-35px)rotate(-25deg)}50%{transform:translateY(100px)rotate(100deg)}}@keyframes demo-glitch{0%,85%,to{transform:translate(0)}90%{transform:translate(22px)}95%{transform:translate(-20px)}}@keyframes demo-danmaku{0%{transform:translate(1250px)}to{transform:translate(-1450px)}}@keyframes demo-fall{0%{transform:translateY(-800px)rotate(-10deg)}to{transform:translateY(1000px)rotate(20deg)}}@keyframes demo-bubble{to{transform:translateY(-35px)}}@keyframes demo-alert{0%,to{transform:translateY(12px)scale(.98)}50%{transform:translateY(0)scale(1)}}@media (min-width:900px){.demo-workspace{--studio-height:clamp(460px, calc(100dvh - 245px), 650px);grid-template-columns:repeat(2,minmax(0,1fr))}.demo-workspace>.demo-panel{height:var(--studio-height)}.demo-workspace>.demo-panel:first-child{flex-direction:column;display:flex;position:sticky;top:80px;overflow-y:auto}.background-workspace{--studio-height:610px}.demo-workspace>.demo-panel:first-child>.feature-demo-canvas{flex-shrink:0;margin-block:auto}.demo-workspace .chat-stage{flex:1;min-height:240px}.demo-controls{overscroll-behavior:contain;scrollbar-gutter:stable;overflow-y:auto}.gallery-selection{margin-top:auto;bottom:0}}@media (max-width:899px){.demo-workspace>.demo-panel:first-child{z-index:10;box-shadow:0 8px 20px var(--color-shade-soft);position:sticky;top:64px}.demo-workspace>.demo-panel:first-child .chat-stage{height:240px}.demo-workspace>.demo-panel:first-child>.feature-demo-canvas{max-height:32dvh}.demo-workspace>.demo-panel:first-child .background-actions{gap:8px;padding:12px 16px}.demo-controls{overscroll-behavior:contain;max-height:65dvh;overflow-y:auto}.gallery-count{font-size:28px}}@media (prefers-reduced-motion:reduce){.feature-demo-canvas *{animation:none!important}}.screen-effect-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.screen-effect-card{text-align:left;border:1px solid var(--border);background:var(--surface-subtle);cursor:pointer;border-radius:12px;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;display:flex}.screen-effect-card[aria-pressed=true]{border-color:var(--foreground);box-shadow:inset 0 0 0 1px var(--foreground)}.screen-effect-symbol{align-items:center;height:44px;font-size:38px;display:flex}.screen-effect-card strong{font-size:14px}.screen-effect-card small{color:var(--muted-foreground);font-size:12px;line-height:1.6}.screen-test-form{flex-direction:column;gap:16px;display:flex}