:root{--color-bg:#000;--color-fill:#ffffff0f;--color-fill-strong:#ffffff1f;--color-text-primary:#f4f4f7;--color-text-secondary:#a8a8b8;--color-text-muted:#a8a8b8;--color-text-disabled:#6f6f80;--color-surface:#0a0b10;--color-on-primary:#14161e;--color-primary:#5b8cff;--color-primary-soft:#5b8cff38;--color-primary-hover:#6e9bff;--color-border:#ffffff1a;--color-fill-raised:#ffffff17;--color-divider:#ffffff14;--color-foot-bg:#ffffff08;--color-select-bg:#15171f;--color-success:#4ade80;--color-danger:#e2564d;--color-danger-hover:#ef6a61;--color-on-danger:#14161e;--shadow-md:0 4px 8px #00000073;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--control-size:44px;--icon-size:16px;--track-size:4px;--thumb-size:12px;--border-width:1px;--focus-width:2px;--focus-offset:2px;--panel-max-width:24rem;--panel-min-width:22rem;--panel-scroll-height:28rem;--preview-min-height:20rem;--preview-mobile-height:clamp(20rem, 80vw, 36rem);--content-max-width:100rem;--name-max-width:28ch;--switch-width:48px;--switch-height:24px;--switch-knob-size:16px;--font-family:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs:12px;--font-size-sm:13px;--font-size-base:14px;--font-size-md:16px;--font-size-lg:20px;--font-size-xl:24px;--font-weight-medium:500;--font-weight-semibold:600;--line-height-tight:1.25;--opacity-disabled:.5;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--transition-fast:.15s ease;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}body{background:var(--color-bg);min-height:100dvh;color:var(--color-text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased;line-height:1.5}ul{list-style:none}canvas{display:block}[hidden]{display:none!important}.clipboard-copy{opacity:0;pointer-events:none;position:fixed;inset:0}button,input,select{font:inherit}button:disabled,input:disabled,select:disabled,[aria-disabled=true]{opacity:var(--opacity-disabled);cursor:not-allowed}:focus-visible{outline:var(--focus-width) solid var(--color-primary);outline-offset:var(--focus-offset)}.skip-link{top:var(--space-2);left:var(--space-2);z-index:20;opacity:0;pointer-events:none;min-height:var(--control-size);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-text-primary);background:var(--color-surface);position:fixed;transform:translateY(-200%)}.skip-link:focus{opacity:1;pointer-events:auto;transform:translateY(0)}.skip-link:hover,.skip-link:active{background:var(--color-fill-strong)}:root[data-theme=light]{--color-bg:#eceef4;--color-fill:#0c0e160f;--color-fill-strong:#0c0e1621;--color-text-primary:#14161e;--color-text-secondary:#4c5060;--color-text-muted:#4c5060;--color-text-disabled:#767b8c;--color-surface:#f5f6fa;--color-on-primary:#f4f4f7;--color-primary:#2f5fd8;--color-primary-soft:#2f5fd82e;--color-primary-hover:#2750ba;--color-border:#0c0e161a;--color-foot-bg:#0c0e1608;--color-select-bg:#fff;--color-success:#1f8f5b;--color-danger:#c0392f;--color-danger-hover:#a93127;--color-on-danger:#f4f4f7;--shadow-md:0 4px 8px #0c0e161f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.panel{background:var(--color-surface);border-radius:var(--radius-xl);flex-direction:column;width:100%;min-width:0;min-height:0;display:flex;overflow:hidden}.panel-head{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-4);display:flex}.panel-title{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}.panel-head-actions{gap:var(--space-2);display:flex}.ghost-button,.primary-button,.icon-button{min-height:var(--control-size);padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);background:var(--color-fill);border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;display:inline-flex}.ghost-button:hover,.icon-button:hover{color:var(--color-text-primary);background:var(--color-fill-strong)}.ghost-button:active,.icon-button:active{background:var(--color-primary-soft)}.reset-button{min-height:var(--control-size);padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);color:var(--color-text-secondary);background:var(--color-fill);align-self:flex-start}.reset-button:hover{color:var(--color-text-primary);background:var(--color-fill-strong)}.icon-button{width:var(--control-size);flex:none;padding:0}.icon-button svg{width:var(--icon-size);height:var(--icon-size)}.primary-button{color:var(--color-on-primary);background:var(--color-primary)}.primary-button:hover,.primary-button:active{background:var(--color-primary-hover)}.panel-body{min-height:0;max-height:var(--panel-scroll-height);gap:var(--space-2);padding:0 var(--space-4) var(--space-4);scrollbar-width:thin;scrollbar-color:var(--color-fill-strong) transparent;flex-direction:column;flex:auto;display:flex;overflow-y:auto}.panel-section{gap:var(--space-2);flex-direction:column;display:flex}.section-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.section-toggle{justify-content:space-between;align-items:center;gap:var(--space-3);width:100%;min-height:var(--control-size);padding:var(--space-2) 0;border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;display:flex}.section-toggle:hover .section-label,.section-toggle[aria-expanded=true] .section-label{color:var(--color-text-primary)}.section-toggle:active{background:var(--color-fill)}.panel-section+.panel-section{border-top:var(--border-width) solid var(--color-divider)}.section-chevron,.select-chevron{width:var(--space-2);height:var(--space-2);border-right:var(--border-width) solid var(--color-text-secondary);border-bottom:var(--border-width) solid var(--color-text-secondary);transition:transform var(--transition-fast);flex:none;transform:rotate(45deg)}.section-chevron[data-open=true]{transform:rotate(225deg)}.template-picker,.select-wrap{align-items:center;gap:var(--space-3);background:var(--color-fill);border-radius:var(--radius-md);display:flex;position:relative}.template-picker{padding-left:var(--space-3)}.template-picker:hover,.select-wrap:hover{background:var(--color-fill-strong)}.template-picker:active,.select-wrap:active{background:var(--color-primary-soft)}.template-picker:focus-within,.select-wrap:focus-within{outline:var(--focus-width) solid var(--color-primary);outline-offset:var(--focus-offset)}.template-select,.field-select{min-width:0;min-height:var(--control-size);padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-primary);border-radius:var(--radius-md);appearance:none;cursor:pointer;background:0 0;border:none;flex:1}.template-select option,.field-select option{color:var(--color-text-primary);background:var(--color-select-bg)}.select-chevron{right:var(--space-4);pointer-events:none;position:absolute}.template-swatch{width:var(--space-4);height:var(--space-4);border-radius:var(--radius-full);flex:none}.react-matrix{table-layout:fixed;border-collapse:collapse;width:100%}.react-matrix th,.react-matrix td{padding:var(--space-1) 0;text-align:left}.react-matrix thead th{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.react-matrix thead th:not(:first-child),.react-matrix td{padding-left:var(--space-2)}.react-matrix tbody th{font-size:var(--font-size-xs);color:var(--color-text-secondary);font-weight:400}.react-value,.field-value{font-size:var(--font-size-xs);font-variant-numeric:tabular-nums;color:var(--color-text-muted)}.react-value{display:block}.field{gap:var(--space-1);flex-direction:column;display:flex}.field-label{justify-content:space-between;align-items:baseline;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary);display:flex}.field-range{appearance:none;width:100%;min-width:var(--control-size);height:var(--control-size);cursor:pointer;background:0 0}.field-range::-webkit-slider-runnable-track{height:var(--track-size);border-radius:var(--radius-full);background:linear-gradient(to right, var(--color-primary) var(--fill,0%), var(--color-text-disabled) var(--fill,0%))}.field-range::-moz-range-track{height:var(--track-size);border-radius:var(--radius-full);background:var(--color-text-disabled)}.field-range::-moz-range-progress{background:var(--color-primary)}.field-range::-webkit-slider-thumb{appearance:none;width:var(--thumb-size);height:var(--thumb-size);margin-top:calc((var(--track-size) - var(--thumb-size)) / 2);border-radius:var(--radius-full);background:var(--color-text-primary);transition:transform var(--transition-fast);border:none}.field-range::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:var(--radius-full);background:var(--color-text-primary);border:none}.field-range:hover::-webkit-slider-thumb{transform:scale(1.2)}.field-range:active::-webkit-slider-thumb{background:var(--color-primary)}.field-range:hover::-moz-range-thumb{background:var(--color-primary)}.field-range:active::-moz-range-thumb{background:var(--color-primary)}.panel-foot{gap:var(--space-2);padding:var(--space-4);background:var(--color-foot-bg);flex-direction:column;flex:none;display:flex}.foot-row{gap:var(--space-2);flex-direction:column;display:flex}.foot-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.swatch-row{gap:var(--space-2);grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;display:grid}.swatch-dot{width:100%;min-height:var(--control-size);padding:var(--space-2);border-radius:var(--radius-md);cursor:pointer;appearance:none;background:0 0;border:none}.swatch-dot::-webkit-color-swatch-wrapper{padding:0}.swatch-dot::-webkit-color-swatch{border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm)}.swatch-dot::-moz-color-swatch{border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm)}.swatch-dot:hover{background:var(--color-fill)}.swatch-dot:active{background:var(--color-fill-strong)}.eye-color{width:var(--control-size)}.export-menu{position:relative}.export-trigger{justify-content:space-between;gap:var(--space-3);width:100%;list-style:none;display:flex}.export-trigger::-webkit-details-marker{display:none}.export-trigger .section-chevron{border-color:currentColor}.export-menu[open] .section-chevron{transform:rotate(225deg)}.export-options{bottom:calc(100% + var(--space-2));z-index:10;gap:var(--space-2);padding:var(--space-2);background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;display:flex;position:absolute;inset-inline:0}.export-options .ghost-button{justify-content:flex-start}.field-row{justify-content:space-between;align-items:center;gap:var(--space-3);flex-direction:row}.field-label-inline{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.switch{width:var(--space-12);height:var(--control-size);border-radius:var(--radius-full);cursor:pointer;background:0 0;border:none;flex:none;align-items:center;padding:0;display:flex}.switch-track{width:var(--switch-width);height:var(--switch-height);padding:var(--space-1);background:var(--color-fill-strong);border-radius:var(--radius-full);align-items:center;display:flex}.switch[aria-checked=true] .switch-track{background:var(--color-primary)}.switch:hover .switch-track{outline:var(--border-width) solid var(--color-text-secondary)}.switch:active{opacity:.8}.switch-knob{width:var(--switch-knob-size);height:var(--switch-knob-size);border-radius:var(--radius-full);background:var(--color-text-primary);transition:transform var(--transition-fast);display:block}.switch[aria-checked=true] .switch-knob{background:var(--color-on-primary);transform:translateX(calc(var(--switch-width) - var(--switch-knob-size) - var(--space-2)))}.unboxed-icon{background:0 0}.unboxed-icon:hover,.unboxed-icon:active{color:var(--color-primary);background:0 0}.panel-tabs{gap:var(--space-2);padding:0 var(--space-4) var(--space-4);grid-template-columns:.8fr 1fr 1.4fr;display:grid}.panel-tabs button{min-height:var(--control-size);padding:var(--space-2) var(--space-1);border:none;border-bottom:var(--focus-width) solid transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);cursor:pointer;background:0 0}.panel-tabs button[aria-selected=true]{border-bottom-color:var(--color-primary);color:var(--color-text-primary)}.panel-tabs button:hover{color:var(--color-primary)}.panel-tabs button:active{background:var(--color-fill)}.tab-content,.tab-section,.palette-suggestion,.template-library,.library-item{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.tab-content{gap:var(--space-6)}.tab-section+.tab-section{padding-top:var(--space-4);border-top:var(--border-width) solid var(--color-border)}.tab-section h3,.palette-suggestion h4{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}.support-copy,.status-message{font-size:var(--font-size-xs);color:var(--color-text-secondary);overflow-wrap:anywhere;max-width:65ch}.status-message:empty{display:none}.status-message:not(:empty){padding:var(--space-2) 0}.source-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-input{width:100%;min-width:0;min-height:var(--control-size);padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-fill);color:var(--color-text-primary);font-size:var(--font-size-sm)}.text-input:hover{border-color:var(--color-text-secondary)}.text-input:active{border-color:var(--color-primary)}.palette-row{grid-template-columns:repeat(6, minmax(var(--control-size), 1fr));align-items:center;gap:var(--space-1);list-style:none;display:grid}.palette-row li{width:100%;min-width:var(--control-size);max-width:var(--control-size);aspect-ratio:1;margin-inline:auto}.palette-row .swatch-dot{border-radius:var(--radius-full);width:100%;height:100%;min-height:0;box-shadow:0 0 0 var(--border-width) var(--color-border);padding:0}.palette-row .swatch-dot::-webkit-color-swatch{border-radius:var(--radius-full);border:none}.palette-row .swatch-dot::-moz-color-swatch{border-radius:var(--radius-full);border:none}.palette-row .swatch-dot:hover{box-shadow:0 0 0 2px var(--color-primary)}.palette-row .swatch-dot:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.toast{inset-inline:0;bottom:var(--space-6);z-index:20;pointer-events:none;justify-content:center;display:flex;position:fixed}.toast:empty{display:none}.toast-body{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background:var(--color-surface);box-shadow:var(--shadow-md);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);animation:.18s ease-out toast-in;display:inline-flex}.toast-body svg{color:var(--color-success)}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}}@media (prefers-reduced-motion:reduce){.toast-body{animation:none}}.palette-suggestion>summary{min-height:var(--control-size);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);align-items:center;display:flex}.palette-suggestion>summary:hover{color:var(--color-primary)}.upload-field{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--space-12);padding:var(--space-2) var(--space-3);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;display:flex;position:relative}.upload-field svg{width:var(--icon-size);height:var(--icon-size)}.upload-field input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.upload-field:hover{background:var(--color-fill)}.upload-field:active{background:var(--color-fill-strong)}.upload-field:focus-within{outline:var(--focus-width) solid var(--color-primary);outline-offset:var(--focus-offset)}.upload-field:has(:disabled){opacity:var(--opacity-disabled);cursor:not-allowed}.action-row{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.action-row>.primary-button,.action-row>.ghost-button{flex:1}.library-item{background:var(--color-fill);padding:var(--space-3);border-radius:var(--radius-md)}.library-item-head{justify-content:space-between;align-items:baseline;gap:var(--space-2);display:flex}.library-item-head h4{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);overflow-wrap:anywhere}.library-colors{gap:var(--space-1);display:flex}.library-colors li{height:var(--space-2);border-radius:var(--radius-sm);flex:1}.format-options-content{gap:var(--space-4);flex-direction:column;display:flex}.format-options .action-row{gap:var(--space-3)}.format-options .action-row>button{flex-basis:calc((100% - var(--space-3)) / 2)}.format-options summary{min-height:var(--control-size);padding:var(--space-3) 0;cursor:pointer;font-size:var(--font-size-sm)}.format-options summary:hover{color:var(--color-primary)}.format-options summary:active{background:var(--color-fill)}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.step-list{gap:var(--space-6);counter-reset:step;flex-direction:column;list-style:none;display:flex}.step{counter-increment:step}.step-list .step+.step{padding-top:var(--space-4);border-top:var(--border-width) solid var(--color-border)}.step>h3{align-items:center;gap:var(--space-2);display:flex}.step>h3:before{content:counter(step);width:var(--space-6);height:var(--space-6);border-radius:var(--radius-full);background:var(--color-fill-strong);color:var(--color-text-secondary);font-size:var(--font-size-xs);font-variant-numeric:tabular-nums;flex:none;place-items:center;display:grid}@media (width>=640px){.swatch-row{grid-template-columns:repeat(6,minmax(0,1fr))}.format-options .action-row>button{flex-basis:0}}@media (width<=374px){.panel-body,.panel-tabs,.panel-head{padding-inline:var(--space-2)}}@media (pointer:coarse){.text-input,.field-select,.template-select{font-size:var(--font-size-md)}}@media (width>=1024px){.panel-body{max-height:none}}.confirm-dialog{width:min(26rem, calc(100vw - var(--space-8)));border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text-primary);box-shadow:var(--shadow-md);border:none;margin:auto;padding:0}.confirm-dialog::backdrop{background:#0000008c}.confirm-body{gap:var(--space-3);padding:var(--space-5);flex-direction:column;display:flex}.confirm-body h2{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}.confirm-body p{font-size:var(--font-size-sm);color:var(--color-text-secondary);max-width:45ch}.confirm-actions{justify-content:flex-end;gap:var(--space-2);padding-top:var(--space-2);display:flex}.confirm-actions .ghost-button{background:var(--color-fill)}.confirm-actions .ghost-button:hover{color:var(--color-text-primary);background:var(--color-fill-strong)}.primary-button.destructive{color:var(--color-on-danger);background:var(--color-danger)}.primary-button.destructive:hover,.primary-button.destructive:active{background:var(--color-danger-hover)}.state-bar{min-width:0;max-width:100%}.state-list{gap:var(--space-2);flex-wrap:wrap;list-style:none;display:flex}.state-chip{min-height:var(--control-size);padding:0 var(--space-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);border-radius:var(--radius-full);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.state-chip:hover{color:var(--color-text-primary);background:var(--color-fill)}.state-chip:active{background:var(--color-fill-strong)}.state-chip[aria-pressed=true]{color:var(--color-text-primary);background:var(--color-fill-strong)}@media (width<=639px){.state-bar{width:100%}.state-list{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.state-chip{width:100%}}.stage{gap:var(--space-4);min-height:100dvh;max-width:var(--content-max-width);padding:var(--space-4);background:var(--color-bg);grid-template-rows:auto 1fr;margin-inline:auto;display:grid}.studio-head,.studio-identity,.preview-toolbar{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.studio-identity{justify-content:flex-start}.studio-head h1{font-size:clamp(var(--font-size-lg), 2vw, var(--font-size-xl));font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);text-wrap:balance}.studio-template{color:var(--color-text-secondary);font-size:var(--font-size-sm);max-width:var(--name-max-width);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (width<=374px){.stage{padding-inline:var(--space-2)}}.workspace{align-content:start;gap:var(--space-6);min-width:0;min-height:0;display:grid}.preview{gap:var(--space-4);flex-direction:column;min-width:0;min-height:0;display:flex}.preview-toolbar{gap:var(--space-3);padding-block:var(--space-1)}.canvas-slot,.canvas-host{display:contents}.orb-viewport{min-width:0;min-height:var(--preview-min-height);height:var(--preview-mobile-height);flex:none}.canvas{width:100%;height:100%}.preview-toolbar>.studio-context{margin-inline-start:auto}.preview-toolbar>.panel-toggle{margin-inline-start:var(--space-1)}.control-actions{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.control-actions>button{border-radius:var(--radius-full)}.controls{align-items:center;gap:var(--space-3);padding:var(--space-4) 0;flex-direction:column;display:flex}.mic-button{min-height:var(--control-size);padding:0 var(--space-3);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);background:var(--color-fill);border-radius:var(--radius-full);cursor:pointer;transition:transform var(--transition-fast);border:none;justify-content:center;align-items:center;display:inline-flex}.mic-button:hover{background:var(--color-fill-strong)}.mic-button:active{background:var(--color-primary-soft)}.mic-button:focus-visible{outline:var(--focus-width) solid var(--color-primary);outline-offset:var(--focus-offset)}.mic-button[data-live=true]{background:var(--color-primary-soft)}.hint{max-width:42ch;font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;text-wrap:balance}@media (width>=1024px){.stage{height:100dvh;min-height:0;padding:var(--space-6)}.workspace[data-controls=true]{grid-template-columns:minmax(0, 1fr) minmax(var(--panel-min-width), var(--panel-max-width))}.workspace{align-content:stretch}.orb-viewport{flex:1;height:auto;min-height:0}}.studio-context{align-items:center;gap:var(--space-2);min-width:0;display:flex}.studio-context label{font-size:var(--font-size-sm);color:var(--color-text-secondary);white-space:nowrap}.context-select{min-width:11rem}.scenario-select{min-width:9.5rem}.simulate-button{align-items:center;gap:var(--space-2);min-height:var(--control-size);min-width:4.5rem;padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);background:var(--color-fill);border-radius:var(--radius-full);cursor:pointer;transition:background-color var(--transition-fast);border:none;justify-content:center;display:inline-flex}.simulate-button:hover{background:var(--color-fill-strong)}.simulate-button:active{background:var(--color-primary-soft)}.simulate-button:focus-visible{outline:var(--focus-width) solid var(--color-primary);outline-offset:var(--focus-offset)}.simulate-button[aria-pressed=true]{color:var(--color-on-primary);background:var(--color-primary)}.device{gap:var(--space-3);min-width:0;min-height:var(--preview-min-height);height:var(--preview-mobile-height);padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);flex-direction:column;display:flex;overflow:hidden}.frame-stage{flex:1;min-width:0;min-height:14rem;display:flex}.frame-stage .orb-viewport{flex:1;height:auto;min-height:0;margin:0}.frame-caption{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center}.frame-heading{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.device-phone{border-radius:var(--radius-xl);width:100%;max-width:22rem;padding:var(--space-3);margin-inline:auto}.phone-status{font-size:var(--font-size-xs);color:var(--color-text-secondary);padding-inline:var(--space-2);justify-content:space-between;align-items:center;display:flex}.phone-battery{border:1px solid var(--color-fill-strong);background:linear-gradient(to right, var(--color-text-secondary) 60%, transparent 60%);border-radius:3px;width:20px;height:10px}.phone-title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);text-align:center}.phone-dock{justify-content:center;display:flex}.phone-key{border-radius:var(--radius-full);background:var(--color-fill-strong);width:40%;height:4px}.desktop-bar{align-items:center;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border);display:flex}.desktop-dots{border-radius:var(--radius-full);background:var(--color-fill-strong);width:40px;height:8px}.desktop-title{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.desktop-body{gap:var(--space-4);flex:1;grid-template-columns:minmax(0,8rem) minmax(0,1fr);min-height:0;display:grid}.desktop-rail ul{gap:var(--space-1);flex-direction:column;list-style:none;display:flex}.desktop-rail li{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-radius:var(--radius-md)}.desktop-rail li[aria-current=page]{color:var(--color-text-primary);background:var(--color-fill)}.desktop-main{gap:var(--space-2);flex-direction:column;min-width:0;min-height:0;display:flex}.device-duo{padding:var(--space-3);flex-direction:row;align-items:stretch;gap:0}.duo-screen{gap:var(--space-2);min-width:0;min-height:0;padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-lg);flex-direction:column;flex:1;display:flex}.duo-hinge{width:10px;margin-inline:var(--space-2);border-radius:var(--radius-full);background:var(--color-border);flex:none}.duo-side{overflow:hidden}.chat-head{align-items:center;gap:var(--space-3);display:flex}.device-chat{width:100%;max-width:48rem;margin-inline:auto;position:relative;container-type:size}.chat-orb-slot{flex:none;width:6rem;height:6rem}.chat-orb-layer{top:var(--space-4);left:var(--space-4);transform-origin:0 0;pointer-events:none;width:16.8rem;height:16.8rem;position:absolute;transform:scale(.3571)}.chat-orb-layer .orb-viewport{width:100%;height:100%;min-height:0;margin:0}.device-chat[data-phase=intro] .chat-orb-layer{transform-origin:0 0;transform:translate(calc(50cqw - var(--space-4) - 8.4rem), calc(44cqh - var(--space-4) - 8.4rem)) scale(1)}.device-chat[data-phase=intro] .chat-who,.device-chat[data-phase=intro] .transcript{opacity:0}.device-chat[data-phase=intro] .transcript-empty{text-align:center;align-self:flex-end}@media (prefers-reduced-motion:no-preference){.chat-orb-layer{transition:transform .42s cubic-bezier(.4,0,.2,1)}.chat-who,.transcript,.transcript-empty{transition:opacity .25s ease-in-out}.transcript-line{animation:.22s ease-out transcript-arrive}}@keyframes transcript-arrive{0%{opacity:0;transform:translateY(var(--space-2))}}.chat-who{gap:var(--space-1);flex-direction:column;min-width:0;display:flex}.chat-who .frame-caption{text-align:start}.chat-compose{align-items:center;gap:var(--space-2);display:flex}.chat-field{min-height:var(--control-size);padding-inline:var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-disabled);background:var(--color-bg);border-radius:var(--radius-full);flex:1;align-items:center;display:flex}.chat-send{width:var(--control-size);height:var(--control-size);border-radius:var(--radius-full);color:var(--color-on-primary);background:var(--color-primary);place-items:center;display:grid}.chat-send svg{width:18px;height:18px}.transcript{gap:var(--space-3);min-height:0;padding:var(--space-1);flex-direction:column;flex:1;list-style:none;display:flex;overflow-y:auto}.transcript-line{gap:var(--space-1);max-width:34ch;padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-primary);background:var(--color-bg);border-radius:var(--radius-lg);flex-direction:column;display:flex}.transcript-line[data-who=you]{color:var(--color-on-primary);background:var(--color-primary);align-self:flex-end}.transcript-who{font-size:var(--font-size-xs);opacity:.75}.transcript-empty{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-wrap:balance;flex:1}@media (width>=1024px){.device{flex:1;height:auto;min-height:0}}@media (width<=640px){.preview-toolbar>.studio-context{flex-wrap:wrap;width:100%;margin-inline-start:0}.context-select{flex:8rem;min-width:0}.device{height:auto;min-height:var(--preview-mobile-height)}.desktop-body{grid-template-columns:minmax(0,1fr)}.desktop-rail ul{flex-flow:wrap}.device-duo{flex-direction:column}.duo-hinge{width:auto;height:10px;margin-block:var(--space-2);margin-inline:0}.duo-side{min-height:10rem}.device-chat[data-phase=intro] .chat-orb-layer{transform:translate(calc(50cqw - var(--space-4) - 8.4rem), calc(44cqh - var(--space-4) - 8.4rem)) scale(.7143)}}