/* Shared studio chrome; selection and rehearsal behavior live in the original script. */
.studio-rail,.rail-caption,.rail-bottom,.studio-crumb,.local-badge{display:none}
.steps small{display:none}
body.setup{
  --ground:#F6F5F7;--surface:#FFF;--surface-2:#F8F7FA;--line:#E8E5EC;--line-strong:#D3CEDB;
  --ink:#29232F;--ink-2:#61596B;--ink-3:#766D80;--studio-accent:#BA267D;--studio-soft:#F9EBF3;
  --shadow:0 4px 20px -14px #35243D24;
  background:var(--ground);color:var(--ink);font-family:var(--font-ui);font-size:14px;line-height:1.6;
}
:root[data-theme="dark"] body.setup{--ground:#151219;--surface:#211C27;--surface-2:#292330;--line:#3B3244;--line-strong:#61526F;--ink:#F8F1FC;--ink-2:#CFC2D9;--ink-3:#B7A7C4;--studio-accent:#F28AC8;--studio-soft:#382435;background:var(--ground)}
body.setup .bg-orbs{display:none}
body.setup .studio-rail{display:block;position:fixed;inset:0 auto 0 0;width:220px;z-index:0;background:radial-gradient(ellipse at 10% 100%,#4E23484D,transparent 65%),#201B26;border-right:1px solid #ffffff0D}
body.setup .wrap{max-width:1580px;width:calc(100% - 220px);margin:0 0 0 220px;padding:24px 40px 24px}
body.setup header.top{position:relative;top:0;max-width:none;margin:0;padding:0 0 22px;gap:10px;min-height:64px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:left}
body.setup header.top .brand{position:fixed;z-index:25;top:34px;left:24px;max-width:172px;margin:0}
body.setup h1.logo .logo-light{display:none}
body.setup h1.logo .logo-dark{display:block;height:32px;max-width:172px;object-fit:contain}
body.setup .brand .eyebrow{display:none}
body.setup .studio-crumb{display:inline-flex;align-items:center;gap:12px;font-size:12px;color:var(--ink-3);margin-right:auto}
body.setup .studio-crumb>span{color:var(--line-strong)}
body.setup .studio-crumb strong{color:var(--ink);font-weight:600}
body.setup .local-badge{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--ink-3);margin-right:10px}
body.setup .local-badge i{width:5px;height:5px;border-radius:50%;background:#448F7D}
body.setup #soundBtn,body.setup #themeBtn{border-radius:8px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-size:11px;min-height:38px;padding:8px 12px;box-shadow:none}
body.setup .rail-caption{display:block;position:fixed;top:129px;left:26px;z-index:24;color:#9C8FA9;font-size:9px;font-weight:700;letter-spacing:.16em}
body.setup .steps{position:fixed;z-index:24;top:162px;left:14px;width:192px;max-width:none;margin:0}
body.setup .steps ol{display:flex;flex-direction:column;gap:10px}
body.setup .steps ol::before,body.setup .steps ol::after{display:none}
body.setup .steps li{display:block;position:relative;flex:none}
body.setup .steps button{display:flex;flex-direction:row;align-items:center;text-align:left;gap:12px;width:100%;padding:14px 12px;border:1px solid transparent;border-radius:9px;background:none;color:#C2B7CC;font-size:12px;min-height:64px;transition:background .2s,color .2s,border-color .2s}
body.setup .steps b{width:29px;height:29px;font-family:var(--font-ui);font-size:11px;flex:none;border:1px solid #5B4C67;border-radius:8px;color:#B3A3C1;background:transparent;box-shadow:none;transform:none}
body.setup .steps small{display:block;margin-top:3px;font-size:9px;font-weight:400;color:#9B8DA8}
body.setup .steps li.current button{background:#FFFFFF0C;border-color:#FFFFFF12;color:#fff;box-shadow:0 4px 10px #00000008}
body.setup .steps li.current b{background:#D94DA1;border-color:#E06DB4;color:#fff;box-shadow:0 0 20px #DB4EA12B}
body.setup .steps li.current small{color:#CDBFD8}
body.setup .steps li.done b{border-color:#A55C8F;color:#F3ACDA;background:#6B35532B}
body.setup .steps li.done button{color:#D0C4D9}
body.setup .steps button:hover{background:#FFFFFF08;color:#fff}
body.setup .rail-bottom{display:block;position:fixed;z-index:24;bottom:28px;left:26px;width:168px;color:#D8CBDF}
body.setup .rail-star{display:block;font-size:34px;font-weight:400;line-height:1;margin-bottom:18px;color:#E88BC3}
body.setup .rail-bottom strong{font-family:var(--font-display);font-size:17px;font-weight:500;line-height:1.35}
body.setup .rail-bottom p{font-size:10px;color:#9D8DAB;line-height:1.8;margin:12px 0 28px}
body.setup .rail-progress{display:flex;align-items:center;gap:7px;font-size:9px;color:#9D8DAB;position:relative;padding-bottom:14px}
body.setup #railStep{font-size:16px;color:#E4D7EC;font-weight:600}
body.setup .rail-progress::after,body.setup .rail-progress i{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:#FFFFFF15;border-radius:2px}
body.setup .rail-progress i{z-index:1;width:var(--studio-progress,25%);background:#E17DBB;transition:width .3s}
body.setup .step{max-width:1160px;min-width:0;animation:none;margin:32px auto 0}
body.setup .step[data-step="1"]{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);grid-template-areas:"intro intro" "editor preview" "tools preview" "actions actions";gap:18px 24px;align-items:start}
body.setup .step-intro{grid-area:intro;margin-bottom:12px}
body.setup .setup-eyebrow{display:flex;align-items:center;gap:7px;color:var(--studio-accent);font-size:9px;font-weight:800;letter-spacing:.16em;line-height:1.6}
body.setup .setup-eyebrow>span{width:5px;height:5px;background:currentColor;border-radius:50%}
body.setup .step-title{font-family:var(--font-display);font-size:36px;font-weight:700;letter-spacing:-.04em;line-height:1.12;text-align:left;color:var(--ink);margin:0 0 12px;overflow-wrap:anywhere}
body.setup .step[data-step="1"] .step-title{font-size:clamp(32px,3.5vw,49px);margin:12px 0 10px;text-wrap:balance}
body.setup .step[data-step="1"] .step-title em{font-style:normal;color:var(--studio-accent)}
body.setup .step[data-step="1"] .step-title::before{display:none}
body.setup .step-title::before{color:var(--studio-accent);font-size:9px;letter-spacing:.14em;margin-bottom:10px}
body.setup .step-title:focus{outline:none}
body.setup .intro-copy{font-size:12px;color:var(--ink-2);margin:0;line-height:1.7}
body.setup .step[data-step="1"]>.card{grid-area:editor}
body.setup .card{border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
body.setup .card:hover{box-shadow:var(--shadow);transform:none}
body.setup .step[data-step="1"] .card-body{padding:24px 26px}
body.setup .form-heading{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:20px}
body.setup .editor-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;border:1px solid color-mix(in srgb,var(--studio-accent) 20%,transparent);background:var(--studio-soft);color:var(--studio-accent);font-size:12px;font-weight:700}
body.setup .form-heading h3{font-family:var(--font-display);font-size:21px;color:var(--ink);line-height:1.2;letter-spacing:-.02em;margin:0 0 4px}
body.setup .form-heading p{margin:0;font-size:11px;color:var(--ink-3)}
body.setup .field-lbl{font-size:12px;margin:0 0 8px;color:var(--ink);font-weight:700}
body.setup .optional{float:right;font-size:9px;color:var(--ink-3);font-weight:400}
body.setup input[type="text"],body.setup textarea{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;box-shadow:none;color:var(--ink);font-size:13px;transition:border-color .2s,box-shadow .2s,background .2s}
body.setup #titleInput{font-size:12px;padding:12px 14px;margin-bottom:20px}
body.setup .input-help{font-size:11px;color:var(--ink-3);line-height:1.7;margin:-2px 0 10px}
body.setup #bulkInput{min-height:188px;font-size:13px;line-height:1.8;padding:14px 16px 35px;resize:vertical}
body.setup ::placeholder{color:var(--ink-3);opacity:.85}
body.setup input[type="text"]:focus,body.setup textarea:focus{outline:none;border-color:var(--studio-accent);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--studio-accent) 10%,transparent)}
body.setup .bulk-count{font-size:9px;right:12px;bottom:14px;background:var(--surface-2);padding:1px 6px;border-radius:4px;color:var(--ink-3);font-weight:400}
body.setup #bulkCount{font-weight:800;color:var(--studio-accent)}
body.setup .import-btn{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px dashed var(--line-strong);border-radius:8px;padding:13px 14px;margin:14px 0 10px;transition:background .2s,border-color .2s}
body.setup .import-btn small{display:block;font-size:9px;color:var(--ink-3);font-weight:400;margin-top:2px}
body.setup .import-btn>span:last-child{margin-left:auto;font-size:17px;color:var(--ink-3)}
body.setup .import-btn:hover,body.setup .import-btn.drag-over{background:var(--studio-soft);border-color:var(--studio-accent)}
body.setup #bulkStatus{font-size:10px;margin:0;min-height:17px}
body.setup .step-error{font-size:11px;line-height:1.7;color:#B72F49}
:root[data-theme="dark"] body.setup .step-error{color:#FFA5B8}
body.setup [aria-invalid="true"]{border-color:#C23C57!important}
body.setup .editor-tools{grid-area:tools;display:flex;justify-content:space-between;gap:10px;align-items:center;padding:0 2px;font-size:10px;color:var(--ink-3)}
body.setup .editor-tools p{margin:0;display:flex;align-items:center;gap:6px}
body.setup .editor-tools p>span{color:var(--studio-accent);font-size:16px}
body.setup #sampleBtn{font-size:10px;font-weight:600;padding:8px 0;border:0;border-radius:4px;background:none;color:var(--studio-accent);min-height:36px}
body.setup #sampleBtn span{margin-left:4px}
body.setup .step-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 0;padding-top:20px;border-top:1px solid var(--line)}
body.setup .step[data-step="1"] .step-actions{grid-area:actions}
body.setup .action-note{font-size:10px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
body.setup .action-note>span{font-size:18px;color:var(--studio-accent)}
body.setup button.primary{background:#B7297C;color:#fff;border:1px solid #B7297C;border-radius:8px;min-height:44px;font-size:12px;padding:12px 22px;box-shadow:0 4px 12px #A2226A20;transition:transform .2s,background .2s,box-shadow .2s}
body.setup button.primary:hover:not(:disabled){background:#A11C6A;transform:translateY(-2px);box-shadow:0 7px 18px #A2226A30}
body.setup button.primary:active:not(:disabled){transform:translateY(0)}
body.setup button.primary span{margin-left:24px}
body.setup button.ghost{min-height:40px;font-size:11px;color:var(--ink-2)}
body.setup :is(button,input,textarea):focus-visible,body.setup .import-btn:focus-within{outline:2px solid var(--studio-accent);outline-offset:4px}
body.setup footer.foot{font-size:9px;color:var(--ink-3);margin-top:28px;text-align:center}
body.setup footer.foot::before{content:""}
/* A separate illustrative preview never calls the draw engine. */
body.setup .live-preview{grid-area:preview;position:relative;align-self:stretch;overflow:hidden;isolation:isolate;min-height:565px;border:1px solid #513246;border-radius:14px;background:radial-gradient(ellipse at 80% 38%,#9C37635C,transparent 65%),radial-gradient(ellipse at 0% 95%,#5F38417A,transparent 60%),#291C2B;color:#F8EAF2;padding:22px 24px 0;box-shadow:0 18px 40px -24px #32132860;display:flex;flex-direction:column}
body.setup .live-preview::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#F7DBEA22 .65px,transparent .65px);background-size:5px 5px;opacity:.16;pointer-events:none}
body.setup .live-preview-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:8px;letter-spacing:.08em;color:#D6B6CC}
body.setup .live-preview-top>span:first-child{display:flex;align-items:center;gap:6px}
body.setup .live-preview-top i{width:4px;height:4px;border-radius:50%;background:#EDA0CD;box-shadow:0 0 8px #ED87C8}
body.setup .preview-example{font-size:8px;letter-spacing:0;background:#FFFFFF0C;border:1px solid #FFFFFF19;border-radius:20px;padding:3px 8px;white-space:nowrap}
body.setup #liveTitle{font-family:var(--font-display);font-size:clamp(25px,2.8vw,40px);font-weight:500;line-height:1.12;letter-spacing:-.035em;max-width:360px;overflow-wrap:anywhere;margin:28px 0 8px;color:#FFF0F8;text-wrap:balance}
body.setup .live-subtitle{font-size:10px;color:#D1B3C9;margin:0}
body.setup .live-wheel-scene{position:relative;width:100%;max-width:330px;aspect-ratio:1;margin:10px auto 0;flex:none;display:grid;place-items:center}
body.setup .orbit{position:absolute;border:1px solid #FFFFFF0B;border-radius:50%;width:98%;aspect-ratio:1;pointer-events:none}
body.setup .orbit-two{width:82%;border-color:#FFFFFF12}
body.setup .live-wheel-frame{position:relative;width:73%;aspect-ratio:1;border:7px solid #DFA6B7;border-radius:50%;background:#80375A;box-shadow:0 2px 0 2px #FCE3E5,0 0 0 5px #6C3655,0 0 0 7px #D198AF80,0 16px 0 #180E1F55,0 30px 40px -12px #150A19C0;animation:studio-turn 100s linear infinite}
body.setup #liveWheel{width:100%;height:100%;border-radius:50%}
body.setup .live-pointer{position:absolute;z-index:3;top:8%;left:50%;transform:translateX(-50%);width:22px;height:34px;background:linear-gradient(110deg,#FFF2CA,#DB9D55);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 2px #0007)}
body.setup .live-hub{position:absolute;width:23%;aspect-ratio:1;border-radius:50%;background:linear-gradient(130deg,#FFF8E7,#F0CF9D);color:#7C3D5B;border:4px solid #B77972;box-shadow:0 0 0 2px #FBE7C9,0 6px 12px #4D1B3B60;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px}
body.setup .live-hub>span{font-size:34px;line-height:1.1}
body.setup .live-hub small{font-size:5px;font-weight:800;letter-spacing:.13em}
body.setup .spark{position:absolute;color:#E9B6B4;line-height:1;pointer-events:none}
body.setup .spark-one{top:12%;left:10%;font-size:28px;animation:studio-breathe 4s ease-in-out infinite}
body.setup .spark-two{bottom:21%;right:1%;font-size:37px;animation:studio-breathe 5s ease-in-out infinite reverse}
body.setup .spark-three{top:25%;right:7%;font-size:13px;color:#DFA6B1}
body.setup .floating-name{position:absolute;z-index:4;bottom:1%;left:0;display:flex;align-items:center;gap:10px;padding:11px 15px 11px 10px;border:1px solid #E3C1D32E;border-radius:10px;background:#3F2C40F2;box-shadow:0 12px 22px -10px #120A1E90;transform:rotate(-4deg);animation:studio-float 7s ease-in-out infinite;font-size:9px;color:#DABFD4}
body.setup .mini-avatar{width:32px;height:32px;display:grid;place-items:center;border:1px solid #D9A1B3;border-radius:8px;background:#6A435A;color:#F1C5D4;font-size:22px}
body.setup .floating-name b{display:block;font-size:11px;color:#FBE9F5;font-weight:500;margin-top:1px}
body.setup .live-bottom{display:flex;align-items:center;gap:12px;position:relative;margin-top:auto;padding:22px 0 16px}
body.setup .live-avatars{display:flex;padding-left:3px;flex:none}
body.setup .live-avatars i{width:27px;height:27px;border:2px solid #352235;border-radius:50%;background:#D7A3B7;color:#4F2845;display:grid;place-items:center;font-size:9px;font-style:normal;margin-left:-4px}
body.setup .live-avatars i:nth-child(2){background:#F2D3B0}
body.setup .live-avatars i:nth-child(3){background:#AF97C2}
body.setup #liveCaption{font-size:10px;color:#E6CFE0;line-height:1.6;margin:0}
body.setup .live-bottom-arrow{margin-left:auto;width:30px;height:30px;border:1px solid #FFFFFF24;border-radius:50%;display:grid;place-items:center;color:#EACBDE;font-size:17px;flex:none}
body.setup .live-preview-note{margin:0 -24px;padding:11px 16px;font-size:8px;display:flex;align-items:center;justify-content:center;gap:6px;color:#C4A1BA;border-top:1px solid #FFFFFF12;background:#FFFFFF03;text-align:center}
@keyframes studio-turn{to{transform:rotate(360deg)}}
@keyframes studio-breathe{50%{opacity:.4;transform:scale(.85)}}
@keyframes studio-float{50%{transform:translateY(-7px) rotate(-2deg)}}
/* The configuration uses the same editor / stage hierarchy. */
body.setup .step[data-step="2"]{max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
body.setup .step[data-step="2"]>.step-title{grid-column:1/-1;margin-bottom:8px}
body.setup .step[data-step="2"]>.config:nth-of-type(1){grid-column:1;grid-row:2}
body.setup .step[data-step="2"]>.config:nth-of-type(2){grid-column:2;grid-row:2/4}
body.setup .step[data-step="2"]>#moreOptions{grid-column:1;grid-row:3}
body.setup .step[data-step="2"]>.step-actions{grid-column:1/-1}
body.setup .step[data-step="2"] .config,body.setup #moreOptions .card{margin:0;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
body.setup .step[data-step="2"] .config h3{font-family:var(--font-display);font-size:21px;color:var(--ink);text-align:left;margin:0 0 16px;letter-spacing:-.02em}
body.setup .step[data-step="2"] .stepper{border:1px solid var(--line);background:var(--surface-2);padding:6px;border-radius:9px;box-shadow:none}
body.setup .step[data-step="2"] .stepper output{font-size:28px;font-family:var(--font-display);color:var(--ink);font-weight:600}
body.setup .step[data-step="2"] .st-btn{width:42px;height:42px;min-height:42px;font-size:24px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--studio-accent);box-shadow:0 1px 2px #00000005;transition:transform .15s,background .15s}
body.setup .step[data-step="2"] .st-btn:hover:not(:disabled){transform:translateY(-1px);background:var(--studio-soft)}
body.setup .step[data-step="2"] .st-btn:disabled{color:var(--ink-3);opacity:.4}
body.setup .step[data-step="2"] .cfg-block.inset{padding:20px 0 0;margin-top:20px;border-top:1px solid var(--line);border-radius:0;background:none}
body.setup .step[data-step="2"] .cfg-block.inset p{text-align:left;font-size:11px;color:var(--ink-3);margin:-8px 0 14px;line-height:1.7}
body.setup .step[data-step="2"] .cfg-row{gap:16px;margin-top:20px}
body.setup .step[data-step="2"] .cfg-row h4,body.setup #moreOptions .opt label,body.setup #moreOptions .opt-label{font-family:var(--font-ui);font-size:12px;letter-spacing:0;font-weight:700}
body.setup .step[data-step="2"] .cfg-row p,body.setup #moreOptions .opt .sub{color:var(--ink-3);font-family:var(--font-ui);font-size:10px;line-height:1.7;margin-top:4px}
body.setup .switch,body.setup #moreOptions .switch{background:var(--line-strong);border:1px solid transparent}
body.setup .switch::after,body.setup #moreOptions .switch::after{background:#fff}
body.setup .switch[aria-checked="true"],body.setup #moreOptions .switch[aria-checked="true"]{background:#B7297C;border-color:#B7297C}
body.setup .switch[aria-checked="true"]::after,body.setup #moreOptions .switch[aria-checked="true"]::after{background:#fff}
body.setup #moreOptions .card{padding:0}
body.setup #moreOptions .card-head{justify-content:flex-start;padding:22px 24px 0}
body.setup #moreOptions .card-head h2::after{font-family:var(--font-display);font-size:20px;color:var(--ink);font-weight:600}
body.setup #moreOptions .card-body{padding:0 24px 24px}
body.setup #moreOptions .opt{margin-top:20px;gap:14px}
body.setup #moreOptions .pal{width:28px;height:28px;border:3px solid var(--surface);box-shadow:none;transition:transform .2s}
body.setup #moreOptions .pal[aria-checked="true"]{box-shadow:0 0 0 2px var(--studio-accent)}
body.setup .step[data-step="2"] .cfg-sub{text-align:left;font-size:11px;color:var(--ink-3);margin:-6px 0 18px;max-width:none;line-height:1.7}
body.setup .step[data-step="2"] .pv-wrap{background:radial-gradient(ellipse at 70% 50%,#9C37634D,transparent 70%),#2D2030;border:1px solid #513A50;border-radius:10px;padding:20px;margin:0 0 20px;overflow:hidden}
body.setup .step[data-step="2"] .anim-preview{width:200px;max-width:90%;border:1px solid #E9E4F0;border-radius:14px;box-shadow:0 16px 26px -10px #09040F66}
body.setup .step[data-step="2"] .pv-logo{height:22px;margin-top:24px}
body.setup .step[data-step="2"] .pv-mute{top:12px;right:12px;left:auto;width:34px;height:34px;background:#FFFFFF10;color:#EAD7E7;border:1px solid #FFFFFF26;box-shadow:none}
body.setup .step[data-step="2"] .pv-mute svg{width:19px;height:19px}
body.setup .step[data-step="2"] .anim-tabs{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:4px;gap:4px}
body.setup .step[data-step="2"] .anim-tabs button{min-height:48px;font-size:9px;letter-spacing:0;text-transform:none;color:var(--ink-2);border-radius:5px;padding:8px 5px;transition:background .2s,color .2s,box-shadow .2s}
body.setup .step[data-step="2"] .anim-tabs button[aria-selected="true"]{background:var(--surface);color:var(--studio-accent);box-shadow:0 1px 4px #0000000D}
body.setup .step[data-step="2"] .anim-tabs button[aria-selected="true"]::after{display:none}
body.setup .step[data-step="2"] .config h3.small{font-family:var(--font-ui);font-size:12px;font-weight:700;margin:22px 0 12px}
body.setup .step[data-step="3"]{max-width:900px}
body.setup .review-intro{font-size:12px;color:var(--ink-2);margin:0 0 22px}
body.setup .review-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 24px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
body.setup .review-summary div{padding:20px;border-right:1px solid var(--line)}
body.setup .review-summary div:last-child{border-right:0}
body.setup .review-summary dt{font-size:10px;color:var(--ink-3)}
body.setup .review-summary dd{font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin:6px 0 0;font-family:var(--font-display);overflow-wrap:anywhere}
body.setup .step[data-step="3"] .card-head{background:var(--surface-2);border-bottom:1px solid var(--line);padding:18px 22px}
body.setup .step[data-step="3"] .card-head h2,body.setup .step[data-step="3"] .card-head .count{color:var(--ink-2);font-size:10px}
body.setup .step[data-step="3"] .card-body{padding:10px 22px}
body.setup .step[data-step="3"] .pname{font-size:12px;font-weight:500}
body.setup .step[data-step="3"] ul.people{max-height:380px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
@media(min-width:1900px){body.setup .wrap{margin-left:calc(220px + (100vw - 1900px)/2)}}
@media(max-height:760px) and (min-width:1001px){body.setup .rail-bottom>.rail-star,body.setup .rail-bottom>strong,body.setup .rail-bottom>p{display:none}}
@media(max-width:1180px){
  body.setup .studio-rail{width:192px}
  body.setup .wrap{width:calc(100% - 192px);margin-left:192px;padding:22px 28px}
  body.setup header.top .brand{left:20px;max-width:152px}
  body.setup h1.logo .logo-dark{max-width:152px;height:28px}
  body.setup .steps{left:10px;width:172px}
  body.setup .steps button{padding:12px 10px;gap:10px}
  body.setup .rail-caption,body.setup .rail-bottom{left:22px}
  body.setup .rail-bottom{width:148px}
  body.setup .rail-bottom strong{font-size:16px}
  body.setup .step[data-step="1"]{gap:16px 18px}
  body.setup .step[data-step="1"] .card-body{padding:22px}
  body.setup .live-preview{padding:20px 20px 0;min-height:555px}
  body.setup .live-preview-top{font-size:7px}
  body.setup .live-preview-note{margin:0 -20px;font-size:7px}
  body.setup .editor-tools{align-items:flex-start;flex-direction:column;gap:0}
  body.setup .local-badge{display:none}
}
@media(max-width:1000px){
  body.setup .studio-rail,body.setup .rail-caption,body.setup .rail-bottom{display:none}
  body.setup .wrap{width:100%;max-width:100%;margin:0;padding:20px 28px}
  body.setup header.top{min-height:50px;padding-bottom:18px}
  body.setup header.top .brand{position:static;margin-right:auto;max-width:170px}
  body.setup h1.logo .logo-light{display:block;height:28px;max-width:170px}
  body.setup h1.logo .logo-dark{display:none}
  :root[data-theme="dark"] body.setup h1.logo .logo-light{display:none}
  :root[data-theme="dark"] body.setup h1.logo .logo-dark{display:block}
  body.setup .studio-crumb{display:none}
  body.setup .steps{position:static;width:auto;margin:24px auto 0;max-width:620px}
  body.setup .steps ol{flex-direction:row;gap:10px}
  body.setup .steps li{flex:1}
  body.setup .steps button{flex-direction:row;justify-content:center;min-height:44px;padding:0;gap:8px;color:var(--ink-3);font-size:10px;border:none;background:none}
  body.setup .steps b{width:26px;height:26px;font-size:10px;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-3);border-radius:7px}
  body.setup .steps small{display:none}
  body.setup .steps li.current button{box-shadow:none;background:none;color:var(--ink);border:0}
  body.setup .steps li.done button{color:var(--ink-2)}
  body.setup .steps li.done b{color:var(--studio-accent);border-color:var(--studio-accent);background:var(--studio-soft)}
  body.setup .steps button:hover{background:none;color:var(--ink)}
  body.setup .step{margin-top:28px}
}
@media(max-width:700px){
  body.setup .wrap{padding:18px 18px 106px}
  body.setup #soundBtn,body.setup #themeBtn{font-size:10px;min-height:38px;padding:8px 10px}
  body.setup .steps ol{gap:4px}
  body.setup .steps button{flex-direction:column;gap:6px;font-size:9px;min-height:54px}
  body.setup .steps b{width:27px;height:27px}
  body.setup .step[data-step="1"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "editor" "tools" "preview" "actions";gap:16px}
  body.setup .step-intro{margin:0 0 6px}
  body.setup .step[data-step="1"] .step-title{font-size:38px;max-width:360px;line-height:1.05}
  body.setup .intro-copy{font-size:11px;max-width:360px}
  body.setup .setup-eyebrow{font-size:8px}
  body.setup .step[data-step="1"] .card-body{padding:22px}
  body.setup .form-heading h3{font-size:21px}
  body.setup #bulkInput{font-size:16px;min-height:182px;line-height:1.7}
  body.setup #titleInput{font-size:16px}
  body.setup .field-lbl{font-size:12px}
  body.setup .editor-tools{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px}
  body.setup .editor-tools p,body.setup #sampleBtn{font-size:10px}
  body.setup .live-preview{min-height:0;padding:22px 22px 0;margin-top:4px}
  body.setup .live-preview-top{font-size:8px}
  body.setup #liveTitle{font-size:36px;max-width:290px;margin-top:24px}
  body.setup .live-wheel-scene{max-width:360px;margin-top:8px}
  body.setup .live-preview-note{margin:0 -22px;font-size:8px}
  body.setup .live-bottom{padding-top:24px}
  body.setup .live-hub small{font-size:5px}
  body.setup .step-actions{position:fixed;bottom:0;left:0;right:0;z-index:30;gap:10px;margin:0;padding:14px 18px calc(14px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);background:var(--surface);box-shadow:0 -6px 24px #1F102A0A}
  body.setup .action-note{font-size:9px;max-width:140px;line-height:1.7}
  body.setup .step-actions button.primary{font-size:11px;padding:12px 16px}
  body.setup button.primary span{margin-left:12px}
  body.setup .step[data-step="2"]{display:flex;flex-direction:column;gap:20px}
  body.setup .step[data-step="2"] .config{padding:24px}
  body.setup .step[data-step="2"]>#moreOptions{order:3}
  body.setup .step[data-step="2"]>.step-actions{order:4}
  body.setup .step-title{font-size:31px}
  body.setup .review-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.setup .review-summary div{border-bottom:1px solid var(--line);padding:16px 18px}
  body.setup .review-summary div:nth-child(2){border-right:0}
  body.setup .review-summary div:nth-child(3){border-bottom:0}
  body.setup .review-summary dd{font-size:23px}
  body.setup footer.foot{font-size:9px;line-height:1.8;margin-top:24px}
}
@media(max-width:370px){
  body.setup .wrap{padding:16px 14px 106px}
  body.setup h1.logo .logo-light,body.setup h1.logo .logo-dark{height:24px;max-width:120px}
  body.setup #soundBtn,body.setup #themeBtn{font-size:9px;padding:7px 8px}
  body.setup .step[data-step="1"] .card-body{padding:18px}
  body.setup .step[data-step="1"] .step-title{font-size:34px}
  body.setup .live-preview{padding:20px 18px 0}
  body.setup .live-preview-note{margin:0 -18px;font-size:7px}
  body.setup .live-preview-top{font-size:7px}
  body.setup .action-note{display:none}
  body.setup .step[data-step="1"] .step-actions{justify-content:flex-end}
  body.setup .step[data-step="1"] .step-actions button{width:100%}
  body.setup .step[data-step="2"] .config{padding:20px}
}
body.setup [hidden]{display:none!important}
/* Draw, results and winner dialog share the same studio surfaces and controls. */
body.setup:is([data-step="4"],[data-step="5"]) .steps{display:block!important}
body.setup:is([data-step="4"],[data-step="5"]) #soundBtn,
body.setup:is([data-step="4"],[data-step="5"]) #themeBtn{display:inline-block!important}
body.setup:is([data-step="4"],[data-step="5"]) footer.foot{display:block!important}
body.setup:is([data-step="4"],[data-step="5"]) header.top{position:relative;justify-content:flex-start;margin:0;min-height:64px;padding:0 0 22px;border-bottom:1px solid var(--line)}
body.setup:is([data-step="4"],[data-step="5"]) header.top .brand{margin:0}
body.setup:is([data-step="4"],[data-step="5"]) .step-actions{justify-content:space-between;gap:16px;margin-top:24px}
body.setup:is([data-step="4"],[data-step="5"]) .step-actions button{font-size:11px;color:var(--ink-2)}
body.setup .step[data-step="5"]{max-width:900px}
body.setup .step[data-step="4"]{max-width:1180px}
body.setup .step[data-step="4"] .step-title{text-align:center;font-size:clamp(28px,3vw,44px);margin:0 0 24px}
body.setup .step[data-step="4"] .step-title::before{display:none}
body.setup .step[data-step="5"] .step-title::before{content:"Sorteo finalizado · Resultados"}
body.setup .draw-intro{font-size:12px;color:var(--ink-2);margin:0 0 24px}
body.setup[data-step="4"] .stage{padding:28px 24px 20px;gap:12px;background:radial-gradient(ellipse at 75% 40%,#9C37634D,transparent 65%),#2D2030;border:1px solid #513A50;border-radius:14px;box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
body.setup[data-step="4"] .wheel-box{width:min(100%,clamp(240px,calc(100dvh - 300px),620px));max-width:620px;flex:none}
body.setup[data-step="4"] .status{display:block!important;color:#E7CCE0;font-size:10px;letter-spacing:.05em}
body.setup[data-step="4"] .stage-foot{display:flex!important;margin:0}
body.setup[data-step="4"] .stage-foot :is(button,p){font-size:10px;color:#D4B9CD}
body.setup[data-step="4"] .stage-foot kbd{background:#FFFFFF10;border-color:#FFFFFF30;color:#EBD2E2}
body.setup[data-step="4"] #goBtn{width:min(100%,400px);min-height:46px;padding:12px 22px;font:700 14px var(--font-ui);letter-spacing:0;border-radius:8px;background:#B7297C;border:1px solid #D358A0;box-shadow:0 4px 12px #160A1930;color:#fff}
body.setup[data-step="4"] #goBtn:hover:not(:disabled){background:#A11C6A}
body.setup[data-step="4"] .view-winners{width:min(100%,400px);font:600 12px var(--font-ui);border:1px solid #E2A5CE;color:#F4CCE8;border-radius:8px;padding:12px 20px;background:#FFFFFF08;margin:0}
body.setup[data-step="4"] .view-winners:hover{background:#FFFFFF12}
body.setup[data-step="4"] .alt-num{color:#F5C5E4}
body.setup[data-step="4"] .wheel-box.mode-countdown .alt-num{font-size:clamp(64px,16dvh,180px)}
body.setup[data-step="4"] .alt-pill{box-shadow:0 0 0 4px #50304C,0 0 0 6px #BF6DA150,0 14px 30px -10px #0005}
body.setup[data-step="5"] .results{max-width:none;margin:0;padding:26px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
body.setup[data-step="5"] .res-title{font-size:20px;color:var(--ink);text-align:left;letter-spacing:-.02em;margin:0 0 16px}
body.setup[data-step="5"] #resSubsTitle{margin-top:28px}
body.setup[data-step="5"] .res-item{border:1px solid var(--line);border-radius:9px;box-shadow:none;background:var(--surface-2)}
body.setup[data-step="5"] .res-item summary{padding:18px;gap:16px;border-radius:9px}
body.setup[data-step="5"] .res-rank{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--studio-accent) 20%,transparent);background:var(--studio-soft);color:var(--studio-accent);font-size:15px;border-radius:9px}
body.setup[data-step="5"] .res-name{font-size:18px;font-weight:600;color:var(--ink)}
body.setup[data-step="5"] .res-chev{color:var(--ink-3)}
body.setup[data-step="5"] .res-detail:empty{display:none}
body.setup[data-step="5"] .share-btn{background:#B7297C;color:#fff;font:700 13px var(--font-ui);border:1px solid #B7297C;border-radius:8px;padding:13px 22px;width:100%;margin:24px 0 0;box-shadow:0 4px 12px #A2226A20}
body.setup[data-step="5"] .share-btn:hover{background:#A11C6A}
body.setup .overlay{background:#160D20B3;backdrop-filter:blur(6px)}
body.setup .modal{background:radial-gradient(ellipse at 80% 20%,#9C37634D,transparent 65%),#2D2030;color:#F9E9F3;border:1px solid #865676;border-radius:14px;padding:36px;box-shadow:0 24px 80px #10071980;max-height:calc(100dvh - 32px);overflow:auto}
body.setup .modal::before{display:none}
body.setup .modal .trophy{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 20px;border:3px solid #B77972;border-radius:50%;background:linear-gradient(130deg,#FFF8E7,#F0CF9D);box-shadow:0 0 0 2px #FCE3E5,0 8px 24px #150A1940;color:#7C3D5B;animation:none;font-size:0}
body.setup .modal h3{color:#FFF0F8;background:none;animation:none;font-size:clamp(26px,4vw,48px);line-height:1.15;letter-spacing:-.035em;overflow-wrap:anywhere;margin:12px 0 16px}
body.setup .modal .eyebrow{color:#EDACD2;font-size:10px}
body.setup .modal .prize-line{color:#D8BED0;font-size:14px;line-height:1.5;overflow-wrap:anywhere;margin:0 0 24px}
@media(max-height:560px){body.setup .modal{padding:20px}body.setup .modal .trophy{width:48px;height:48px;margin-bottom:12px}body.setup .modal .trophy svg{width:28px;height:28px}body.setup .modal h3{font-size:30px;margin:8px 0 12px}}
body.setup.presenting .wrap{width:100%;max-width:none;margin:0;padding:16px}
body.setup.presenting :is(.studio-rail,.rail-caption,.rail-bottom,.steps,header.top,footer.foot){display:none!important}
@media(max-width:1000px){
  body.setup:is([data-step="4"],[data-step="5"]) header.top{min-height:50px;padding-bottom:18px}
  body.setup:is([data-step="4"],[data-step="5"]) header.top .brand{margin-right:auto}
}
@media(max-width:700px){
  body.setup:is([data-step="4"],[data-step="5"]) .step-actions{margin:0;gap:10px}
  body.setup[data-step="4"] .stage{padding:20px 16px;gap:18px}
  body.setup[data-step="4"] .wheel-box{max-width:100%}
  body.setup[data-step="4"] .stage-foot{flex-wrap:wrap;gap:8px}
  body.setup[data-step="5"] .results{padding:20px}
  body.setup[data-step="5"] .res-item summary{padding:14px;gap:12px}
  body.setup[data-step="5"] .res-name{font-size:16px}
  body.setup .modal{padding:26px 22px}
}
/* One wheel finish across the live illustration, configuration and actual draw. */
body.setup[data-step="4"] .wheel-box:not(.mode-alt) #wheel,
body.setup .pv-wheelbox .pv-canvas{border:7px solid #DFA6B7;border-radius:50%;box-shadow:0 2px 0 2px #FCE3E5,0 0 0 5px #6C3655,0 0 0 7px #D198AF80,0 16px 0 #180E1F55,0 30px 40px -12px #150A19C0;background:#80375A}
body.setup[data-step="4"] .wheel-box:not(.mode-alt){margin:14px 0 22px}
body.setup[data-step="4"] .hub,
body.setup .pv-hub{width:23%;height:auto;aspect-ratio:1;border-radius:50%;background:linear-gradient(130deg,#FFF8E7,#F0CF9D);color:#7C3D5B;border:4px solid #B77972;box-shadow:0 0 0 2px #FBE7C9,0 6px 12px #4D1B3B60;padding:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px}
body.setup[data-step="4"] .hub #hubText,body.setup .pv-hub{font-size:0;color:#7C3D5B}
body.setup[data-step="4"] .hub #hubText::before,
body.setup .pv-hub::before{content:"✳";display:block;font-size:clamp(22px,3vw,36px);line-height:1.1;font-weight:400}
body.setup[data-step="4"] .hub #hubText::after,
body.setup .pv-hub::after{content:"MUCHA SUERTE";display:block;font:800 5px var(--font-ui);letter-spacing:.13em;white-space:nowrap}
body.setup .pv-hub::before{font-size:20px}
body.setup[data-step="4"] .hub #hubText::before{font-size:clamp(24px,5vw,60px)}
body.setup .pv-hub::after{font-size:3px}
body.setup[data-step="4"] .pointer,body.setup .pv-wheelbox .pv-pointer{width:22px;height:34px;top:-14px;border:0;background:linear-gradient(110deg,#FFF2CA,#DB9D55);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 2px #0007)}
body.setup .pv-wheelbox .pv-pointer{width:14px;height:22px;top:-10px}
/* A scrollable rail keeps navigation and controls usable at every screen height. */
body.setup{--rail-size:220px}
body.setup.rail-collapsed{--rail-size:76px}
body.setup .wrap{width:calc(100% - var(--content-offset,var(--rail-size)));max-width:none;margin:0 0 0 var(--content-offset,var(--rail-size));padding:32px clamp(18px,3vw,48px) 28px}
body.setup .step{margin:0 auto;max-width:1180px}
body.setup .step[data-step="2"]{max-width:1180px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
body.setup .studio-rail{display:flex!important;position:fixed;inset:0 auto 0 0;width:var(--rail-size);height:100dvh;z-index:40;flex-direction:column;padding:24px 14px 20px;gap:12px;overflow:hidden}
body.setup .studio-rail .brand{position:static;width:172px;max-width:172px;min-height:32px;flex:none;margin:10px 10px 0;overflow:hidden}
body.setup .studio-rail .brand p{display:none}
body.setup .studio-rail h1.logo{justify-content:flex-start}
body.setup .studio-rail h1.logo .logo-light{display:none}
body.setup .studio-rail h1.logo .logo-dark{display:block;height:32px;width:auto;max-width:none;margin:0}
body.setup #railToggle{position:static;width:100%;min-height:36px;flex:none;padding:8px 12px;border:1px solid #FFFFFF17;border-radius:8px;background:#FFFFFF05;color:#C9B9D4;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:500;margin-top:6px}
body.setup #railToggle:hover{background:#FFFFFF10}
body.setup .studio-rail .rail-caption{display:block;position:static;margin:0 12px;font-size:9px;flex:none}
body.setup .studio-rail .steps{position:static;display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#6D5479 transparent;width:100%;margin:0;max-width:none}
body.setup .studio-rail .steps ol{flex-direction:column;gap:6px;padding:2px}
body.setup .studio-rail .steps li{flex:none}
body.setup .studio-rail .steps button{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 10px;font-size:12px;color:#C2B7CC;min-height:60px;border:1px solid transparent}
body.setup .studio-rail .steps b{width:29px;height:29px;flex:none;border:1px solid #5B4C67;border-radius:8px;color:#B3A3C1;background:transparent}
body.setup .studio-rail .steps small{display:block;color:#B4A5BF;font-size:10px}
body.setup .studio-rail .steps li.current button{background:#FFFFFF0C;border-color:#FFFFFF12;color:#fff}
body.setup .studio-rail .steps li.current b{background:#D94DA1;border-color:#E06DB4;color:#fff}
body.setup #railControls{position:static;width:100%;display:flex;flex:none;flex-direction:column;gap:8px;margin-top:auto}
body.setup #railControls :is(#soundBtn,#themeBtn){display:block!important;position:relative!important;width:100%;min-height:42px;border:1px solid #FFFFFF17;border-radius:8px;background:#FFFFFF05;color:#DFD0E7;font-size:0;text-align:left;padding:10px 10px 10px 42px}
body.setup #railControls button::after{content:attr(data-caption);font-size:11px}
body.setup #railControls button::before{content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:currentColor;mask:var(--rail-icon) center/contain no-repeat}
body.setup #soundBtn{--rail-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 5-5 4H3v6h3l5 4V5zM16 9a5 5 0 0 1 0 6m3-9a9 9 0 0 1 0 12'/%3E%3C/svg%3E")}
body.setup #themeBtn{--rail-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 15A9 9 0 0 1 9 4a9 9 0 1 0 11 11z'/%3E%3C/svg%3E")}
body.setup .studio-rail .rail-bottom{display:block;position:static;flex:none;width:100%;padding:0 12px;margin:0}
body.setup .studio-rail .rail-bottom>:not(.rail-progress){display:none}
body.setup .studio-rail .steps button:focus-visible,body.setup #railToggle:focus-visible,body.setup #railControls button:focus-visible{outline:2px solid #F3ACDA;outline-offset:1px}
body.setup.rail-collapsed .studio-rail .brand{width:32px;max-width:32px;margin:10px auto 0}
body.setup.rail-collapsed .studio-rail .rail-caption,body.setup.rail-collapsed .studio-rail .rail-bottom{display:none}
body.setup.rail-collapsed .studio-rail .steps button{padding:10px 4px;min-height:48px;justify-content:center}
body.setup.rail-collapsed .studio-rail .steps button>span,body.setup.rail-collapsed #railToggle>span{display:none}
body.setup.rail-collapsed .studio-rail .steps b{border:0;background:transparent;box-shadow:none}
body.setup.rail-collapsed #railToggle{justify-content:center;padding:8px}
body.setup.rail-collapsed #railControls :is(#soundBtn,#themeBtn){font-size:0;padding:0}
body.setup.rail-collapsed #railControls button::after{display:none}
body.setup.rail-collapsed #railControls button::before{left:13px;width:20px;height:20px}
body.setup.presenting .studio-rail{display:none!important}
body.setup.presenting .wrap{width:100%;margin-left:0}
body.setup.presenting .step[data-step="4"]>.step-title,body.setup.presenting .draw-intro{display:none}
body.setup.presenting[data-step="4"] .wheel-box{width:min(58dvh,520px);max-width:100%}
body.setup .step-actions{min-height:66px}
body.setup .input-help,body.setup #bulkStatus,body.setup .form-heading p{font-size:12px;line-height:1.7}
body.setup .field-lbl{font-size:13px}
body.setup .step[data-step="2"] .cfg-row p,body.setup #moreOptions .opt .sub,body.setup .step[data-step="2"] .cfg-block.inset p,body.setup .step[data-step="2"] .cfg-sub{font-size:12px;line-height:1.7}
body.setup #moreOptions .opt{align-items:center}
body.setup #moreOptions .opt:last-child{flex-direction:row;align-items:center}
body.setup .step[data-step="2"] .duration-field{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
body.setup .step[data-step="2"] .duration-field h3.small{margin:0 0 12px}
@media(max-width:1000px){body.setup{--content-offset:76px}body.setup .wrap{padding:26px 22px 28px}}
@media(max-width:700px){
  body.setup .wrap{padding:24px 14px 112px}
  body.setup .step-actions{left:76px;padding-left:14px;padding-right:14px}
  body.setup .step[data-step="1"] .card-body{padding:18px}
  body.setup .step[data-step="1"] .step-title{font-size:32px}
  body.setup .step[data-step="2"]{display:flex}
  body.setup .step[data-step="2"] .config{padding:18px}
  body.setup .live-hub>span{font-size:26px}
  body.setup[data-step="4"] .hub #hubText::before{font-size:24px}
  body.setup[data-step="4"] .hub #hubText::after{font-size:3px}
  body.setup .modal{max-width:calc(100vw - 32px)}
  body.setup .action-note{display:none}
  body.setup .step[data-step="1"] .step-actions button{width:100%}
}
@media(max-height:500px){
  body.setup .studio-rail{padding:12px 14px;gap:8px}
  body.setup .studio-rail .brand,body.setup.rail-collapsed .studio-rail .brand{margin-top:0;min-height:28px}
  body.setup .studio-rail .rail-caption,body.setup .studio-rail .rail-bottom{display:none}
  body.setup #railToggle{min-height:32px;margin-top:0}
  body.setup #railControls{gap:6px}
  body.setup #railControls :is(#soundBtn,#themeBtn){min-height:36px}
  body.setup .studio-rail .steps button{min-height:44px;padding-top:6px;padding-bottom:6px}
}

/* A common stage replaces the phone mockup for every animation. */
body.setup .step[data-step="2"]>.config:nth-of-type(2){display:flex;flex-direction:column;min-width:0}
body.setup .step[data-step="2"] .anim-tabs{order:0;margin-bottom:18px;flex:none}
body.setup .step[data-step="2"] .anim-tabs button{font-size:11px;line-height:1.4;min-height:48px}
body.setup .step[data-step="2"] .pv-wrap{flex:1;align-items:center;justify-content:center;margin:0;min-height:340px;padding:24px;border-radius:12px;overflow:hidden}
body.setup .step[data-step="2"] .anim-preview{width:100%;max-width:640px;aspect-ratio:1;margin:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;flex:none}
body.setup .step[data-step="2"] .pv-logo{display:none}
body.setup .step[data-step="2"] .pv-body{height:100%;flex:none;padding:0;display:flex;align-items:center;justify-content:center}
body.setup .step[data-step="2"] .pv-wheelbox{width:88%;flex:none}
body.setup .step[data-step="2"] .pv-mute{display:none}
body.setup .pv-mode-countdown .pv-ring,body.setup .wheel-box.mode-countdown .alt-ring{width:64%;border:8px solid #DFA6B7;background:linear-gradient(130deg,#FFF8E7,#F0CF9D);box-shadow:0 0 0 2px #FCE3E5,0 0 0 5px #6C3655,0 16px 32px #150A1950;align-items:center;justify-content:center}
body.setup .step[data-step="2"] .pv-mode-countdown .pv-num,body.setup .wheel-box.mode-countdown .alt-num{color:#7C3D5B;font:600 clamp(48px,7vw,104px)/1 var(--font-display);margin:0;letter-spacing:-.04em}
body.setup .pv-mode-countdown .pv-rays,body.setup .wheel-box.mode-countdown .alt-rays{color:#EDBED5}
body.setup .pv-body.pv-mode-names{flex-direction:column;gap:16px;padding:0}
body.setup .pv-drum{width:100%;min-height:220px;flex:1}
body.setup .pv-winners{width:100%;gap:8px;flex:none}
body.setup .pv-chip{background:#FFFFFF12;color:#EAD1E1;font-size:10px;border:1px solid #FFFFFF19;padding:4px 10px;border-radius:6px}
body.setup .pv-win{min-width:0;max-width:100%;background:#493047;border:1px solid #A46D8A70;box-shadow:none;color:#F9E9F3;border-radius:10px;padding:8px 14px;gap:10px;font-size:13px}
body.setup .pv-win b{max-width:220px;font-size:13px}
body.setup .drum-item{background:#443047;border:1px solid #88647F50;color:#E1CCDA;box-shadow:0 6px 14px #120A1B20;border-radius:10px}
body.setup .drum-item.is-center{background:linear-gradient(130deg,#B8638E,#844563);color:#FFF0F8;border:2px solid #E3ABBF;box-shadow:0 10px 24px #170A1C55;border-radius:12px}
body.setup .drum-av{background:linear-gradient(130deg,#FFF8E7,#F0CF9D);color:#7C3D5B;border-color:#DFA6B7}
body.setup[data-step="4"] .alt-pill{background:linear-gradient(130deg,#FFF8E7,#F0CF9D);color:#7C3D5B;border:1px solid #DFA6B7;box-shadow:0 0 0 4px #6C3655,0 12px 24px #150A1950;border-radius:12px;font-family:var(--font-display)}
body.setup[data-step="4"] .drum-wrap{inset:3% 2%}
body.setup .res-detail{font-size:12px;padding:0 18px 16px 70px;color:var(--ink-2)}
@media(max-width:700px){
  body.setup .step[data-step="2"] .pv-wrap{padding:18px;min-height:340px}
  body.setup .step[data-step="2"] .anim-preview{min-height:300px}
  body.setup .pv-hub::before{font-size:clamp(12px,3vw,20px)}
  body.setup .step[data-step="2"] .anim-tabs button{font-size:10px;padding:8px 4px}
  body.setup .pv-drum{min-height:160px}
  body.setup .pv-win b{max-width:120px}
  body.setup .pv-mode-countdown .pv-ring,body.setup .wheel-box.mode-countdown .alt-ring{border-width:6px}
}

/* Fit the draw to the usable viewport: title, flexible animation, controls and navigation. */
body.setup[data-step="4"] .wrap{height:100dvh;min-height:0;padding:12px clamp(12px,1.2vw,24px) max(12px,env(safe-area-inset-bottom))}
body.setup .step[data-step="4"]{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;height:100%;min-height:0;max-width:none;margin:0 auto}
body.setup .step[data-step="4"] .stage>.step-title{grid-row:1;color:#F9E9F3;font-size:clamp(20px,2.4vw,34px);line-height:1.15;margin:0;text-wrap:balance;overflow-wrap:anywhere}
body.setup[data-step="4"] #drawSlot{grid-row:1;height:100%;min-height:0}
body.setup[data-step="4"] .stage{height:100%;min-height:0!important;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:16px}
body.setup[data-step="4"] .draw-animation{width:100%;height:100%;min-width:0;min-height:0;container-type:size;display:grid;place-items:center;padding:20px}
body.setup[data-step="4"] .wheel-box,body.setup.presenting[data-step="4"] .wheel-box{width:min(100cqw,100cqh);height:auto;aspect-ratio:1;max-width:none;min-width:0;min-height:0;margin:0!important}
body.setup[data-step="4"] .draw-controls{display:grid;justify-items:center;width:100%;gap:8px;min-width:0}
body.setup[data-step="4"] #goBtn{width:min(100%,400px);min-width:0;min-height:44px;padding:10px 20px}
body.setup[data-step="4"] .stage-foot{gap:10px}
body.setup[data-step="4"] .stage-foot button{min-height:32px;padding:4px 8px}
body.setup[data-step="4"] .status{margin:0;font-size:10px;line-height:1.4}
body.setup .step[data-step="4"]>.step-actions{grid-row:2;position:static;min-height:40px;margin:0!important;padding:0;border:0;background:none;box-shadow:none;gap:8px}
body.setup[data-step="4"] footer.foot{display:none!important}
body.setup[data-step="4"] .hub #hubText::before{font-size:clamp(10px,10cqmin,60px)}
body.setup[data-step="4"] .wheel-box.mode-countdown .alt-num{font-size:22cqmin}
@container(max-height:200px){body.setup[data-step="4"] .hub #hubText::after{display:none}}
@media(max-height:600px){
  body.setup[data-step="4"] .wrap{padding-top:10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  body.setup .step[data-step="4"]{gap:6px}
  body.setup[data-step="4"] .stage{padding:6px 10px 10px;gap:4px}
  body.setup[data-step="4"] .draw-controls{gap:4px}
  body.setup[data-step="4"] .stage-foot{display:none!important}
  body.setup .step[data-step="4"]>.step-actions{min-height:36px}
  body.setup[data-step="4"] .draw-animation{padding:16px}
}
body.setup .example-panel{position:absolute;inset:0;display:grid;place-items:center}
body.setup .example-countdown{width:67%;aspect-ratio:1;display:grid;place-items:center;border:7px solid #DFA6B7;border-radius:50%;background:linear-gradient(130deg,#FFF8E7,#F0CF9D);box-shadow:0 0 0 2px #FCE3E5,0 0 0 5px #6C3655,0 16px 32px #150A1950;color:#7C3D5B}
body.setup .example-countdown b{font:600 clamp(48px,8vw,104px)/1 var(--font-display)}
body.setup .example-names{width:84%;display:grid;gap:12px;justify-items:center}
body.setup .example-names>div{max-width:100%;width:88%;padding:15px 12px;background:#443047;border:1px solid #88647F80;border-radius:10px;color:#D8BDCF;font-size:13px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.setup .example-names>div:nth-child(2){width:100%;padding:23px 14px;background:linear-gradient(130deg,#B8638E,#844563);border:2px solid #E3ABBF;color:#FFF0F8;font:600 21px var(--font-display);box-shadow:0 10px 24px #170A1C55}
body.setup .example-playback{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0 0;color:#DFC1D5;font-size:10px}
body.setup #exampleToggle{background:#FFFFFF08;border:1px solid #FFFFFF26;color:#F2DDEB;border-radius:6px;padding:7px 12px;font-size:10px;min-height:34px}
body.setup .example-paused :is(.live-wheel-frame,.spark,.floating-name){animation-play-state:paused}
body.setup .live-preview[data-example-mode="names"] .floating-name{visibility:hidden}
body.setup .example-panel .live-wheel-frame{animation:none;transform:none}
body.setup .example-result{position:absolute;bottom:1%;left:5%;max-width:90%;padding:7px 12px;border:1px solid #E3ABBF80;border-radius:8px;background:#493047;color:#F9E9F3;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 6px 20px #150A1940}
body.setup .live-preview[data-example-phase="finished"] .floating-name{visibility:hidden}
body.setup .pv-mode-countdown .pv-ring{transition:width .3s ease,border-radius .3s ease}
body.setup .pv-mode-countdown.is-result .pv-ring{width:92%;aspect-ratio:auto;min-height:90px;padding:20px 14px;border-radius:12px;border-width:2px;box-shadow:0 0 0 4px #6C3655,0 12px 24px #150A1950;flex-direction:column;gap:8px}
body.setup .pv-mode-countdown.is-result .pv-ring::before{content:"Ganador de ejemplo";font:600 10px var(--font-ui);color:#7C3D5B}
body.setup .step[data-step="2"] .pv-mode-countdown.is-result .pv-num{font:600 clamp(16px,2vw,28px)/1.3 var(--font-display);text-align:center;overflow-wrap:anywhere}
@media(max-width:700px){body.setup .example-names>div{padding:10px;font-size:11px}body.setup .example-names>div:nth-child(2){padding:16px 10px;font-size:16px}}
@media(prefers-reduced-motion:reduce){body.setup,body.setup *,body.setup *::before,body.setup *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Full names remain readable in the winner dialog and final results. */
body.setup .modal{max-width:600px;width:100%;scrollbar-width:thin;animation:studio-dialog-enter .22s ease both}
body.setup .overlay>.studio-confetti{z-index:0}
body.setup .overlay>.modal{z-index:1}
@keyframes studio-dialog-enter{from{opacity:0}to{opacity:1}}
/* File review and downloadable results use the existing studio tokens. */
body.setup #downloadResults{width:100%;margin-top:24px}
body.setup #downloadStatus{text-align:center;line-height:1.5}
body.setup .studio-dialog{width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-family:var(--font-ui)}
body.setup .studio-dialog::backdrop{background:#160D20B3;backdrop-filter:blur(6px)}
body.setup .studio-dialog h2{font:700 28px var(--font-display);letter-spacing:-.035em;margin:10px 0}
body.setup .dialog-heading p{font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
body.setup .import-options{display:grid;gap:16px;margin:24px 0 16px}
body.setup .import-options label{font-size:12px;font-weight:600}
body.setup .import-options select{display:block;width:100%;min-width:0;padding:10px;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);font:13px var(--font-ui)}
body.setup .import-options .header-option{display:flex;gap:10px;align-items:center;line-height:1.5}
body.setup .header-option input{accent-color:var(--studio-accent);flex:none;width:18px;height:18px}
body.setup .import-table-wrap{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:8px}
body.setup .import-dialog table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}
body.setup .import-dialog th,body.setup .import-dialog td{padding:12px;text-align:left;overflow-wrap:anywhere;border-bottom:1px solid var(--line)}
body.setup .import-dialog th{background:var(--surface-2);font-weight:700}
body.setup .import-dialog th:first-child{width:64px}
body.setup .dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
body.setup .dialog-actions button{min-height:44px;border:1px solid var(--line);border-radius:8px;padding:10px 16px;color:var(--ink);font:600 12px var(--font-ui)}
body.setup .dialog-actions button.primary{color:#fff}
@media(max-width:700px){body.setup .studio-dialog{padding:20px}body.setup .dialog-actions{flex-wrap:wrap}}

body.setup .modal .modal-actions .primary{min-height:48px;min-width:160px;border-radius:8px}
body.setup .modal .eyebrow:empty{display:none}
body.setup[data-step="5"] .res-name{white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.4}
body.setup[data-step="5"] .res-item summary{align-items:center}
body.setup .drum-item.is-center .drum-name{white-space:normal;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;line-height:1.2}
body.setup .alt-pill{overflow-wrap:anywhere}
@media(max-height:560px){
  body.setup .overlay{padding:12px}
  body.setup .modal{padding:16px 20px;max-height:calc(100dvh - 24px)}
  body.setup .modal .trophy{width:40px;height:40px;margin-bottom:8px}
  body.setup .modal h3{font-size:24px;margin:8px 0 12px}
  body.setup .modal .prize-line{margin-bottom:16px;font-size:13px}
}
/* The sidebar supplies step context; let every screen fill the workspace. */
body.setup .step[data-step] .step-title::before{content:none;display:none}
body.setup .step-intro>.setup-eyebrow{display:none}
body.setup .step[data-step]{width:100%;max-width:none}
body.setup:not([data-step="4"]) .wrap{padding-top:20px;padding-left:clamp(12px,1.5vw,24px);padding-right:clamp(12px,1.5vw,24px)}
body.setup .step[data-step="2"]>.config:nth-of-type(1){grid-row:1}
body.setup .step[data-step="2"]>.config:nth-of-type(2){grid-row:1/3}
body.setup .step[data-step="2"]>#moreOptions{grid-row:2}
body.setup .step[data-step="2"] .pv-wrap{flex-direction:column;gap:16px}
body.setup .step[data-step="2"] .pv-wrap>.step-title{flex:none;width:100%;margin:0;color:#F9E9F3;text-align:center;font-size:clamp(20px,2vw,30px);line-height:1.2;overflow-wrap:anywhere}
body.setup .step[data-step="2"] .pv-mode-countdown:not(.is-result) .pv-ring{width:80%}
body.setup .step[data-step="2"] .pv-mode-countdown:not(.is-result) .pv-num{font-size:clamp(56px,10vw,140px)}
/* Keep navigation outside the flexible configuration panels at every height. */
body.setup[data-step="2"] .wrap{height:100dvh;min-height:0;padding:16px clamp(12px,1.5vw,24px) max(12px,env(safe-area-inset-bottom))}
body.setup .step[data-step="2"]{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1fr) auto;gap:16px}
body.setup .configuration-fields{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:16px;min-height:0;min-width:0;overflow:auto;scrollbar-width:thin}
body.setup .configuration-fields>*{flex:none}
body.setup .step[data-step="2"] .configuration-fields>.config{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between}
body.setup .step[data-step="2"] .configuration-fields>#moreOptions{margin:0}
body.setup .step[data-step="2"]>.config.animation-config{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-height:0;min-width:0;padding:18px}
body.setup .step[data-step="2"]>.step-actions{grid-column:1/-1;grid-row:2;position:static;margin:0;padding:8px 0 0;min-height:52px;background:none;box-shadow:none;border:0}
body.setup[data-step="2"] footer.foot{display:none!important}
body.setup .step[data-step="2"] .configuration-fields .config{padding:18px}
body.setup .step[data-step="2"] .configuration-fields .config h3{margin-bottom:10px}
body.setup .step[data-step="2"] .cfg-block.inset{padding-top:12px;margin-top:12px}
body.setup .step[data-step="2"] .duration-field{margin-top:12px;padding-top:12px}
body.setup .step[data-step="2"] .duration-field h3.small{margin:0 0 10px}
body.setup .step[data-step="2"] .cfg-row{margin-top:12px}
body.setup .step[data-step="2"] #moreOptions .card-head{padding:16px 18px 0}
body.setup .step[data-step="2"] #moreOptions .card-body{padding:0 18px 16px}
body.setup .step[data-step="2"] #moreOptions .opt{margin-top:12px}
body.setup .step[data-step="2"] .pv-wrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-content:stretch;min-height:0;padding:16px;gap:12px}
body.setup .preview-animation-space{width:100%;height:100%;min-width:0;min-height:0;container-type:size;display:grid;place-items:center;padding:12px}
body.setup .step[data-step="2"] .anim-preview{width:min(100cqw,100cqh,640px);height:auto;min-height:0;max-width:none;aspect-ratio:1}
body.setup .step[data-step="2"] .pv-drum{min-height:0}
body.setup .step[data-step="2"] .pv-mode-countdown:not(.is-result) .pv-num{font-size:clamp(32px,22cqmin,140px)}
@media(max-width:700px){
  body.setup[data-step="2"] .wrap{padding:12px}
  body.setup .step[data-step="2"]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,.8fr) minmax(0,1.2fr) auto;gap:10px}
  body.setup .step[data-step="2"]>.config.animation-config{grid-column:1;grid-row:2;padding:12px}
  body.setup .step[data-step="2"]>.step-actions{grid-row:3}
  body.setup .step[data-step="2"] .anim-tabs{margin-bottom:8px}
  body.setup .step[data-step="2"] .animation-config>h3{font-size:18px;margin-bottom:8px}
  body.setup .step[data-step="2"] .animation-config>.cfg-sub{display:none}
  body.setup .step[data-step="2"] .anim-tabs button{min-height:40px;font-size:10px;padding:6px 4px}
  body.setup .step[data-step="2"] .pv-wrap{padding:10px;gap:6px}
  body.setup .step[data-step="2"] .pv-wrap>.step-title{font-size:18px}
  body.setup .step[data-step="2"] .pv-winners{gap:3px}
  body.setup .step[data-step="2"] .pv-chip{display:none}
  body.setup .step[data-step="2"] .pv-win{padding:4px 8px}
}
@media(max-width:700px) and (min-aspect-ratio:4/3){
  body.setup .step[data-step="2"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  body.setup .step[data-step="2"]>.config.animation-config{grid-column:2;grid-row:1}
  body.setup .step[data-step="2"]>.step-actions{grid-row:2}
}
@media(max-height:450px){
  body.setup .step[data-step="2"] .animation-config>h3,body.setup .step[data-step="2"] .animation-config>.cfg-sub{display:none}
  body.setup .step[data-step="2"] .pv-wrap{padding:8px;gap:4px}
  body.setup .step[data-step="2"] .pv-wrap>.step-title{font-size:14px;line-height:1.15}
  body.setup .step[data-step="2"] .preview-animation-space{padding:6px}
  body.setup .step[data-step="2"] .pv-mode-countdown.is-result .pv-ring{min-height:0;padding:8px;gap:4px}
}
/* Compact settings keep the complete desktop form in view. */
body.setup .configuration-fields{gap:8px}
body.setup .step[data-step="2"] .configuration-fields .config{padding:14px}
body.setup .step[data-step="2"] .configuration-fields .config h3{font-size:16px;line-height:1.3;margin-bottom:8px}
body.setup .step[data-step="2"] .configuration-fields .stepper{padding:4px}
body.setup .step[data-step="2"] .configuration-fields .stepper output{font-size:22px;line-height:1.2}
body.setup .step[data-step="2"] .configuration-fields .st-btn{width:36px;height:36px;min-height:36px;font-size:20px}
body.setup .step[data-step="2"] .configuration-fields .cfg-block.inset{padding-top:10px;margin-top:10px}
body.setup .step[data-step="2"] .configuration-fields .duration-field{padding-top:10px;margin-top:10px}
body.setup .step[data-step="2"] .configuration-fields .duration-field h3.small{font-size:11px;margin-bottom:8px}
body.setup .step[data-step="2"] .configuration-fields .cfg-row{margin-top:10px}
body.setup .step[data-step="2"] .configuration-fields .cfg-row h4,
body.setup .step[data-step="2"] #moreOptions .opt label{font-size:11px;line-height:1.4}
body.setup .step[data-step="2"] .configuration-fields .cfg-block.inset p,
body.setup .step[data-step="2"] .configuration-fields .cfg-row p,
body.setup .step[data-step="2"] #moreOptions .opt .sub{font-size:11px;line-height:1.4}
body.setup .step[data-step="2"] .configuration-fields .cfg-block.inset p{margin:0 0 8px}
body.setup .step[data-step="2"] #moreOptions .card-head{padding:12px 14px 0}
body.setup .step[data-step="2"] #moreOptions .card-head h2::after{font-size:16px;line-height:1.3}
body.setup .step[data-step="2"] #moreOptions .card-body{padding:0 14px 12px}
body.setup .step[data-step="2"] #moreOptions .opt{margin-top:10px}
/* Start directly in the editor, using the former introductory space. */
body.setup[data-step="1"] .wrap{padding-top:12px}
body.setup .step[data-step="1"]{grid-template-areas:"editor preview" "tools preview" "actions actions";gap:16px}
@media(min-width:701px){
  body.setup[data-step="1"] .wrap{height:100dvh;padding-bottom:12px;min-height:0}
  body.setup .step[data-step="1"]{height:100%;min-height:0;grid-template-rows:minmax(0,1fr) auto auto}
  body.setup .step[data-step="1"]>.card{height:100%;min-height:0;overflow:auto;scrollbar-width:thin}
  body.setup .step[data-step="1"] .card-body{height:100%;display:flex;flex-direction:column}
  body.setup .step[data-step="1"] .card-body>*{flex-shrink:0}
  body.setup .step[data-step="1"] .bulk-wrap{flex:1;min-height:120px;display:flex}
  body.setup .step[data-step="1"] #bulkInput{flex:1;min-height:120px;resize:none}
  body.setup .step[data-step="1"] .live-preview{min-height:0}
  body.setup .step[data-step="1"] .live-wheel-scene{width:min(100%,46dvh,480px);min-height:0}
  body.setup[data-step="1"] footer.foot{display:none}
}
@media(max-width:700px){body.setup .step[data-step="1"]{grid-template-areas:"editor" "tools" "preview" "actions"}}
/* Let the example grow with the panel rather than a fixed illustration cap. */
@media(min-width:701px){
  body.setup .step[data-step="1"] .live-preview{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto}
  body.setup .live-animation-space{width:100%;height:100%;min-width:0;min-height:0;container-type:size;display:grid;place-items:center;padding:12px}
  body.setup .step[data-step="1"] .live-wheel-scene{width:min(100cqw,100cqh);max-width:none;margin:0;aspect-ratio:1}
  body.setup .step[data-step="1"] #liveTitle{max-width:none;margin-top:20px}
  body.setup .step[data-step="1"] .example-countdown b{font-size:clamp(40px,24cqmin,160px)}
  body.setup .step[data-step="1"] .example-names>div{font-size:clamp(12px,3.5cqmin,22px);padding:clamp(6px,3cqmin,20px)}
  body.setup .step[data-step="1"] .example-names>div:nth-child(2){font-size:clamp(16px,5cqmin,34px);padding:clamp(8px,4cqmin,28px)}
  body.setup .step[data-step="1"] .live-bottom{margin-top:12px;padding-top:12px;padding-bottom:12px}
}
/* Choose on the left, preview on the right, without duplicating controls. */
body.setup .step[data-step="2"] .animation-choice{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;min-width:0}
body.setup .step[data-step="2"] .animation-choice .anim-tabs{margin:0;gap:4px}
body.setup .step[data-step="2"] .animation-choice .anim-tabs button{font-size:10px;min-height:40px;padding:6px}
body.setup .step[data-step="2"]>.config.animation-config{padding:14px}
body.setup .step[data-step="2"] .animation-config>.pv-wrap{width:100%;height:100%}
@media(min-width:701px) and (max-height:760px){
  body.setup .step[data-step="2"] .configuration-fields>.config{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-content:space-between}
  body.setup .step[data-step="2"] .configuration-fields .cfg-block{display:flex;flex-direction:column;min-width:0}
  body.setup .step[data-step="2"] .configuration-fields .cfg-block.inset{border:0;margin-top:0;padding-top:0}
  body.setup .step[data-step="2"] .configuration-fields .cfg-block .stepper{margin-top:auto}
  body.setup .step[data-step="2"] .configuration-fields :is(.duration-field,.cfg-row,.animation-choice){grid-column:1/-1}
}
@media(min-width:701px) and (max-height:650px){
  body.setup .step[data-step="2"] .configuration-fields .cfg-block.inset p,
  body.setup .step[data-step="2"] .configuration-fields .cfg-row p{display:none}
}
/* Keep related controls close instead of distributing empty space between them. */
body.setup .step[data-step="2"] .configuration-fields>.config{flex:0 0 auto;justify-content:flex-start;gap:10px;align-content:start}
body.setup .step[data-step="2"] .configuration-fields .cfg-block.inset,
body.setup .step[data-step="2"] .configuration-fields .duration-field,
body.setup .step[data-step="2"] .configuration-fields .animation-choice{margin-top:0;padding-top:10px}
body.setup .step[data-step="2"] #moreOptions .cfg-row{display:flex;justify-content:space-between;align-items:center}
body.setup .step[data-step="2"] #moreOptions .cfg-row h4{margin:0;font-size:11px;line-height:1.4}
body.setup .step[data-step="2"] #moreOptions .cfg-row p{margin:4px 0 0;font-size:11px;line-height:1.4}
/* Two aligned surfaces, with compact sections inside the settings panel. */
body.setup .step[data-step="2"] .configuration-fields{padding:14px;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
body.setup .step[data-step="2"] .configuration-fields>.config,
body.setup .step[data-step="2"] #moreOptions .card{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
body.setup .step[data-step="2"] #moreOptions{padding-top:12px;border-top:1px solid var(--line)}
body.setup .step[data-step="2"] #moreOptions .card-head{padding:0}
body.setup .step[data-step="2"] #moreOptions .card-body{padding:0}
@media(min-width:701px){body.setup .step[data-step="2"]{height:min(100%,720px)}}
/* Keep the first editor and illustration on the same row and baseline. */
body.setup .step[data-step="1"] .editor-tools{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);flex-wrap:wrap}
@media(min-width:701px){
  body.setup .step[data-step="1"]{height:100%;grid-template-areas:"editor preview" "actions actions";grid-template-rows:minmax(0,1fr) auto;gap:10px}
  body.setup .step[data-step="1"]>.step-actions{margin:0;padding-top:8px;min-height:52px}
}
/* The compact sidebar uses the eyes icon, never a cropped wordmark. */
body.setup .studio-rail .brand{width:172px;height:44px;min-height:44px}
body.setup .studio-rail h1.logo .logo-dark{width:172px;height:44px;object-fit:contain}
body.setup .studio-rail h1.logo .logo-mark{display:none}
body.setup.rail-collapsed .studio-rail .brand{width:36px;max-width:36px;height:36px;min-height:36px}
body.setup.rail-collapsed .studio-rail h1.logo .logo-dark{display:none}
body.setup.rail-collapsed .studio-rail h1.logo .logo-mark{display:block;width:36px;height:36px;object-fit:contain}
@media(max-width:700px){body.setup .step[data-step="1"]{grid-template-areas:"editor" "preview" "actions"}}
/* Fit the editor itself, including its empty-state placeholder, without an outer scrollbar. */
body.setup .step[data-step="1"] .card-body{padding:16px}
body.setup .step[data-step="1"] .form-heading{padding-bottom:12px;margin-bottom:12px}
body.setup .step[data-step="1"] .form-heading h3{font-size:18px}
body.setup .step[data-step="1"] .form-heading p{font-size:10px}
body.setup .step[data-step="1"] #titleInput{padding:10px 12px;margin-bottom:12px}
body.setup .step[data-step="1"] .field-lbl{margin-bottom:6px}
body.setup .step[data-step="1"] .input-help{margin-bottom:6px;line-height:1.5}
body.setup .step[data-step="1"] #bulkInput{font-size:13px;line-height:1.6;padding:12px 12px 28px}
body.setup .step[data-step="1"] .import-btn{padding:10px 12px;margin:10px 0 8px}
body.setup .step[data-step="1"] .editor-tools{margin-top:8px;padding-top:8px}
@media(min-width:701px){
  body.setup .step[data-step="1"] .bulk-wrap,body.setup .step[data-step="1"] #bulkInput{min-height:112px}
}
@media(min-width:701px) and (max-height:650px){
  body.setup .step[data-step="1"]{height:100%}
  body.setup .step[data-step="1"] .card-body{padding:12px}
  body.setup .step[data-step="1"] .form-heading{padding-bottom:8px;margin-bottom:8px}
  body.setup .step[data-step="1"] #titleInput{padding:8px 10px;margin-bottom:8px}
  body.setup .step[data-step="1"] .editor-tools{margin-top:6px;padding-top:6px}
}