/* The presentation stage is separate from the product inside each frame. */
html{overflow-x:clip}
.studio-symbols{position:absolute;width:0;height:0;overflow:hidden}
body{min-width:320px;background:var(--ground);overflow-x:clip}
.studio-header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 32px;border-bottom:1px solid #ffffff08;background:var(--ground)}
.studio-header .brand{font-size:32px;line-height:1}
.studio-header .brand svg{display:block}
.studio-header-tools{display:flex;align-items:center;gap:28px}
.studio-header-tools>a{display:flex;align-items:center;min-height:44px;font-size:12px;color:var(--text-3)}
.studio-header .demo-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;color:var(--text-2);background:var(--panel);border-color:var(--line)}
.demo-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px #a4ff2233}
main{padding:0 24px 10px}
.devices{position:relative;isolation:isolate;min-height:320px;margin:0 auto;overflow:visible;background:radial-gradient(ellipse at 50% 64%,#17221744,transparent 63%)}
.devices::before{content:"";position:absolute;z-index:-2;left:4%;right:4%;bottom:5%;height:24%;background:radial-gradient(ellipse,#64705c16,transparent 66%);transform:perspective(450px) rotateX(56deg);border-radius:50%}
.sync-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}
.sync-connector{stroke:var(--lime);stroke-width:1;stroke-opacity:.26;fill:none}
.sync-pulse{fill:var(--lime);filter:drop-shadow(0 0 6px var(--lime))}
.device{position:absolute;left:0;top:0;min-width:0;transition:transform 360ms cubic-bezier(.22,.8,.26,1),width 360ms cubic-bezier(.22,.8,.26,1);will-change:transform}
.device-label{height:56px;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 0 8px;position:relative;z-index:2;cursor:pointer;min-width:0}
.studio-avatar{position:relative;display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:2px solid var(--line-strong);border-radius:50%;background:var(--panel-2);color:var(--text-2);font-size:13px;font-weight:700;transition:border-color 360ms,box-shadow 360ms}
.studio-avatar>span{position:absolute}
.studio-avatar img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%}
.studio-avatar img[hidden]{display:none}
.device[data-active=true] .studio-avatar{border-color:var(--lime);box-shadow:0 0 0 4px #a4ff220b}
.persona-copy{min-width:0;max-width:310px;flex:1}
.device-label{width:max(100%,236px);left:50%;transform:translateX(-50%)}
.device-label h2{margin:0 0 3px;font-size:16px;font-weight:600;line-height:1.25;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-label p{margin:0;font-size:12px;line-height:1.5;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device[data-active=false] .device-label{gap:8px}
.device[data-active=false] .studio-avatar{width:36px;height:36px}
.device[data-active=false] .device-label h2{font-size:13px}
.device[data-active=false] .persona-copy{max-width:230px}
.device-hardware{position:relative;width:100%;padding:8px;background:linear-gradient(135deg,#333936,#171c19 30%,#111512 70%,#2c322f);border-radius:18px;box-shadow:inset 0 0 0 1px #69736b, inset 0 0 0 2px #0c100d,0 22px 40px #0009;isolation:isolate}
.devices:not([data-focus=all]) .device[data-active=false] .device-hardware{padding:4px}
.device-hardware::after{content:"";position:absolute;z-index:-1;left:6%;right:6%;top:100%;height:26px;pointer-events:none;background:linear-gradient(#46513b22,transparent);filter:blur(6px);transform:scaleY(.6);transform-origin:top}
.viewport{position:relative;overflow:hidden;background:var(--ground);border-radius:12px;outline:1px solid #000;transition:width 360ms cubic-bezier(.22,.8,.26,1),height 360ms cubic-bezier(.22,.8,.26,1)}
iframe{display:block;border:0;transform-origin:0 0;transition:transform 360ms cubic-bezier(.22,.8,.26,1)}
.device[data-surface=member] .device-hardware{border-radius:calc(44px * var(--frame-scale,1));background:linear-gradient(115deg,#424843,#161b17 24%,#0f1310 72%,#323932);box-shadow:inset 0 0 0 1px #7a827b,inset 0 0 0 3px #131714,0 22px 48px #000b}
.device[data-surface=member] .viewport{border-radius:calc(36px * var(--frame-scale,1))}
.device[data-surface=member] .hardware-detail{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:min(30%,82px);height:17px;border-radius:30px;background:#050706;box-shadow:inset 0 0 0 1px #262b27;pointer-events:none}
.device[data-surface=member] .hardware-detail::after{content:"";position:absolute;right:8px;top:5px;width:6px;height:6px;border-radius:50%;background:#122023;box-shadow:inset 0 0 0 1px #263238}
.device[data-surface=member] .device-hardware::before{content:"";position:absolute;left:-3px;top:24%;height:12%;width:3px;background:#475048;border-radius:2px;box-shadow:0 -35px #475048}
.device[data-surface=member] .device-hardware::after{left:auto;right:-3px;top:29%;width:3px;height:14%;background:#475048;border-radius:2px;transform:none;filter:none}
.device[data-surface=club] .device-hardware{border-radius:20px}
.device[data-surface=club] .viewport{border-radius:13px}
.device[data-surface=club] .hardware-detail{position:absolute;left:50%;top:100%;width:32%;height:22px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(100deg,#171c19,#424b44 48%,#171c19);clip-path:polygon(30% 0,58% 0,78% 68%,100% 82%,100% 100%,0 100%,0 82%,45% 66%);filter:drop-shadow(0 8px 8px #000)}
.device[data-surface=hq] .device-hardware{border-radius:12px;padding-bottom:8px}
.device[data-surface=hq] .viewport{border-radius:5px}
.device[data-surface=hq] .hardware-detail{position:absolute;left:50%;top:100%;width:34%;height:46px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(95deg,#161b18,#4e5950 50%,#171c19);clip-path:polygon(43% 0,57% 0,62% 78%,100% 92%,100% 100%,0 100%,0 92%,38% 78%)}
.device-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;opacity:0;transition:opacity 180ms;position:relative;z-index:2}
.device:hover .device-actions,.device:focus-within .device-actions{opacity:1}
.device-actions button,.device-actions a{width:28px;height:32px;min-height:32px;padding:5px;color:var(--text-3);border:0;display:grid;place-items:center;background:transparent;border-radius:6px}
.device-actions svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.device-actions button[aria-pressed=true]{color:var(--lime)}
.device-actions button:hover,.device-actions a:hover{background:var(--lime-dim);color:var(--lime)}
.presenter-dock{position:relative;z-index:5;display:flex;align-items:center;gap:8px;height:58px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:12px;background:linear-gradient(135deg,#19201be8,#101411e8);box-shadow:0 12px 40px #0005;backdrop-filter:blur(18px);max-width:1640px;margin:0 auto}
#shell-controls,#shell-toolbar,.studio-toolbar{display:contents}
.studio-scene{min-width:70px;flex:1;overflow:hidden}
.studio-scene strong{display:block;font-size:13px;line-height:1.5;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell-clock{display:flex;align-items:center;gap:6px;min-width:0;flex-shrink:0}
.shell-clock input{font-size:12px;height:38px;min-height:38px;width:192px;padding:6px 8px}
.presenter-dock button,.presenter-dock select{font-size:12px;height:38px;min-height:38px;padding:6px 8px}
.presenter-dock button{white-space:nowrap;font-weight:600;flex-shrink:0}
.studio-toolbar>label{width:112px;flex-shrink:0;display:block}
.studio-toolbar>label:has([data-change="control.role"]){width:156px}
.studio-toolbar select{width:100%;background:#101511;text-overflow:ellipsis}
#studio-plug,#studio-device{display:flex;align-items:center;justify-content:center;gap:6px;background:#101511}
#studio-device span{font-size:12px;color:var(--text-3)}
.studio-mode{font-size:12px;font-weight:600;line-height:1.25;color:var(--lime);border-radius:999px;background:var(--lime-dim);padding:3px 6px}
.studio-mode[data-mode=OFFLINE],.studio-mode[data-mode=DEGRADED],.studio-mode[data-mode=RECOVERING]{color:var(--amber);background:var(--amber-dim)}
#studio-device[aria-pressed=true]{border-color:var(--amber)}
#studio-presenter{background:var(--panel-2)}
@media(min-width:900px) and (max-width:1199px){
  main{padding-left:12px;padding-right:12px}.studio-header{padding:0 24px}
  .presenter-dock{display:grid;grid-template-columns:minmax(100px,1fr) 310px 166px 144px;height:100px;gap:6px;padding:8px 12px}
  .studio-scene{grid-column:1}.shell-clock{grid-column:2}.shell-clock input{width:192px}
  #studio-plug{grid-column:3}#studio-device{grid-column:4}
  .studio-toolbar>label{width:auto;grid-row:2}.studio-toolbar>label:has([data-change="control.role"]){width:auto}
  #studio-presenter{grid-column:4;grid-row:2}
  .device-label{gap:6px}.device[data-active=false] .studio-avatar{width:30px;height:30px}
  .device-label h2{font-size:14px}.device-label p{line-height:1.35}
}
@media(max-width:899px){
  .studio-header{height:68px;padding:0 16px;gap:16px}.studio-header-tools{gap:12px}.studio-header .brand svg{width:118px;height:auto}
  .devices:not([data-focus=all]) .device[data-active=false] .device-hardware{padding:8px}
  main{padding:0 12px 16px}.device[data-active=false] .device-label h2{font-size:16px}.device[data-active=false] .studio-avatar{width:44px;height:44px}
  .presenter-dock{display:flex;flex-wrap:wrap;height:auto;min-height:100px;padding:12px;gap:8px}.studio-scene{flex-basis:100%}
  .shell-clock{flex-basis:100%;flex-wrap:wrap}.shell-clock input{flex:1;min-width:150px}
  .studio-toolbar>label,.studio-toolbar>label:has([data-change="control.role"]){flex:1 1 145px;width:auto;min-width:120px}
  #studio-plug,#studio-device,#studio-presenter{flex:1}.device-actions{opacity:1}
}
@media(prefers-reduced-motion:reduce){.device,.viewport,iframe,.studio-avatar{transition:none;will-change:auto}.sync-pulse{display:none}}
/* Wings: the persona label stacks and stays within its own device so the centre device never covers it. */
.device[data-active=false] .device-label{width:100%;left:0;transform:none;height:auto;min-height:56px;flex-direction:column;gap:4px;text-align:center}
.device[data-active=false] .persona-copy{max-width:100%;width:100%}
.device[data-active=false] .device-label h2{font-size:13px;white-space:normal}
.device[data-active=false] .device-label p{white-space:normal;font-size:11px}