/* Frame-only adjustments. App, mesh, rig and approval styling comes from Desktop. */
body[data-showcase-desktop]{margin:0;overflow:hidden;background:#09090b;color:#edf0f4}
[data-showcase-desktop] .chat-app{height:calc(100dvh - 70px);min-height:0}
.showcase-titlebar{height:30px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #24242a;background:#101012;color:#81818e;font:9px Inter,system-ui,sans-serif;letter-spacing:1.2px}
.showcase-titlebar>span+span{font-size:9px;letter-spacing:0;color:#71717e}
.showcase-transport{position:relative;height:40px;padding:0 18px;display:flex;align-items:center;gap:12px;border-top:1px solid #24242a;background:#101012;font:10px Inter,system-ui,sans-serif;color:#9797a4}
.showcase-transport>span{margin-right:auto}.showcase-transport>button{background:#1b1b20;border:1px solid #34343d;border-radius:6px;padding:5px 10px;color:#d4d4df;font:10px inherit;cursor:pointer}
.showcase-transport>button:focus-visible{outline:2px solid #7bcfff;outline-offset:2px}.showcase-dots{display:flex;gap:5px}.showcase-dots i{width:4px;height:4px;border-radius:50%;background:#41414d}.showcase-dots i.active{background:#65c9ff}
.showcase-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#171720}.showcase-progress>i{display:block;width:100%;height:100%;background:#63c9ff;transform:scaleX(0);transform-origin:left}
.showcase-cursor{position:fixed;left:0;top:0;width:23px;height:29px;z-index:10000;pointer-events:none;opacity:0;transform:translate(-30px,-30px);transition:transform .42s cubic-bezier(.2,.75,.25,1),opacity .2s}
.showcase-cursor svg{width:23px;height:29px;filter:drop-shadow(0 2px 3px #0008)}.showcase-cursor.clicking svg{scale:.85}.showcase-cursor i{position:absolute;left:-8px;top:-8px;width:22px;height:22px;border:1px solid #a7def8;border-radius:50%;opacity:0}.showcase-cursor.clicking i{animation:showcase-click .35s ease-out}
.showcase-paused .motion-spark *,.showcase-paused .motion-spark::before{animation-play-state:paused!important}
.showcase-generation{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;z-index:3;background:#101215eb;color:#dce8f6;font-size:12px;pointer-events:none}.showcase-generation[hidden]{display:none}.showcase-generation .motion-spark{margin:0}.showcase-generation>span{font-size:10px;color:#94a2b6}
.showcase-playtest{margin:12px 0;padding:25px 18px;border:1px solid #34383d;border-radius:16px;background:#141619;text-align:center}.showcase-playtest>p{color:#b8c8da;font-size:12px;margin:0 0 15px}.showcase-playtest>small{display:block;color:#7b8b9f;font-size:9px;margin-top:14px}.showcase-keys{display:flex;flex-direction:column;align-items:center;gap:6px}.showcase-keys>div{display:flex;gap:6px}.showcase-keys kbd{display:grid;place-items:center;min-width:34px;height:32px;border:1px solid #455165;border-bottom:3px solid #354053;border-radius:6px;background:#202833;color:#bac4d3;font:11px Inter,system-ui,sans-serif;transition:transform .12s,background .12s,color .12s}.showcase-keys kbd.wide{min-width:74px}.showcase-keys kbd.pressed{background:#227baa;border-color:#8bceff;color:white;transform:translateY(2px)}
.showcase-current-input{min-height:18px;color:#aacde8;font-size:11px;margin-top:14px}.showcase-flash{position:absolute;inset:0;pointer-events:none;background:#f2faff;opacity:0}.showcase-flash.flashing{animation:showcase-flash .4s ease-out}
.showcase-scene-thumb{display:block;width:min(100%,320px);margin-top:14px;border:1px solid #34383d;border-radius:12px}
.showcase-inactive .showcase-cursor{opacity:0!important}
@keyframes showcase-click{0%{scale:.7;opacity:.8}100%{scale:1.9;opacity:0}}@keyframes showcase-flash{15%{opacity:.45}100%{opacity:0}}
@media(max-width:760px){.showcase-titlebar{padding-inline:12px;font-size:8px}.showcase-titlebar>span+span{font-size:7px}.showcase-transport{padding-inline:12px;font-size:9px;gap:8px}.showcase-dots{gap:4px}.showcase-transport>button{padding:5px 8px}}
@media(prefers-reduced-motion:reduce){.showcase-cursor,.showcase-cursor i,.showcase-cursor svg{transition:none;animation:none}.showcase-flash.flashing{animation:none}}

/* Website-only presentation: preserve the shared desktop components. */
[data-showcase-desktop] .chat-face-stage{height:166px!important;flex-shrink:0}
[data-showcase-desktop] .message-thread{margin-top:12px;margin-bottom:20px}
[data-showcase-desktop] .mesh-preview-body{height:320px;min-height:260px}
[data-showcase-desktop] .mesh-rig-open .mesh-preview-body{height:390px}
[data-showcase-desktop] .mesh-preview-heading strong{white-space:normal;line-height:1.45}
.showcase-mesh-generating canvas{animation:showcase-mesh-eyes 2.6s ease-in-out infinite}
.showcase-paused .showcase-mesh-generating canvas{animation-play-state:paused}
@keyframes showcase-mesh-eyes{0%,100%{opacity:1}28%{opacity:.32}48%{opacity:.86}64%{opacity:.46}82%{opacity:.94}}
@media(max-width:760px){
 [data-showcase-desktop] .chat-sidebar,[data-showcase-desktop] .mobile-sidebar-toggle{display:none}
 [data-showcase-desktop] .chat-topbar{height:76px;min-height:76px;padding:10px 12px}
 [data-showcase-desktop] .chat-face-stage{height:130px!important;padding:0 10px 8px}
 [data-showcase-desktop] .chat-face-stage canvas{width:260px;max-width:100%}
 [data-showcase-desktop] .message-thread{width:calc(100% - 20px);margin-top:10px}
 [data-showcase-desktop] .message{grid-template-columns:minmax(0,1fr);gap:5px}
 [data-showcase-desktop] .message-avatar{display:none}
 [data-showcase-desktop] .message-content>strong{font-size:11px}
 [data-showcase-desktop] .mesh-preview{margin-block:10px}
 [data-showcase-desktop] .mesh-preview header{gap:6px;padding:10px}
 [data-showcase-desktop] .mesh-review-badge{font-size:8px;padding:4px}
 [data-showcase-desktop] .mesh-preview-body{display:flex;flex-direction:column;height:350px;min-height:350px}
 [data-showcase-desktop] .mesh-viewport{flex:1;min-height:260px}
 [data-showcase-desktop] .mesh-review{flex:none;max-height:80px;padding:6px 10px;border-left:0;border-top:1px solid #292e35}
 [data-showcase-desktop] .mesh-review p{margin:3px 0;font-size:10px}
 [data-showcase-desktop] .mesh-position{display:none}
 [data-showcase-desktop] .mesh-rig-open .mesh-preview-body{height:380px}
 [data-showcase-desktop] .mesh-rig-editor{flex:none;max-height:120px;border-left:0;border-top:1px solid #303740}
 [data-showcase-desktop] .mesh-rig-editor label{margin:5px 0}
 [data-showcase-desktop] .mesh-actions{padding:8px 10px;gap:6px}
 [data-showcase-desktop] .mesh-approval-note{display:none}
 [data-showcase-desktop] .mesh-action-buttons{flex-wrap:wrap}
 [data-showcase-desktop] .mesh-viewport nav button{min-height:30px}
 [data-showcase-desktop] .composer-dock{padding:8px 10px 12px}
 [data-showcase-desktop] .chat-composer{padding:9px 10px}
 [data-showcase-desktop] .composer-toolbar{flex-wrap:nowrap;gap:4px}
 [data-showcase-desktop] .composer-actions{flex:initial;gap:4px}
 [data-showcase-desktop] .composer-tools{gap:4px}
 [data-showcase-desktop] .mode-button{font-size:9px;padding-inline:5px}
 [data-showcase-desktop] [data-attachment],[data-showcase-desktop] [data-deep-thinking],[data-showcase-desktop] .context-meter{display:none}
 [data-showcase-desktop] .model-picker-trigger{width:auto;max-width:155px;padding:0 4px;gap:5px}
 [data-showcase-desktop] .model-picker-trigger strong{display:block;font-size:9px}
 [data-showcase-desktop] .chat-app.animator-open{grid-template-rows:76px minmax(0,1fr)}
 [data-showcase-desktop] .animator-open .chat-main{grid-template-rows:76px}
 [data-showcase-desktop] .animator-viewer{height:330px;min-height:260px}
 .showcase-titlebar{padding-inline:10px;letter-spacing:.8px}
 .showcase-titlebar>span+span{max-width:62%;text-align:right}
 .showcase-transport{padding-inline:10px;gap:8px;height:40px}
 .showcase-transport>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
 .showcase-dots{display:none}
 .showcase-transport>button{min-height:32px;flex:none}
}
@media(prefers-reduced-motion:reduce){.showcase-mesh-generating canvas{animation:none;opacity:1}}