/* A warm outer frame connects the live studio to the RadioBox site. */
.studio.minimal-mode{background:#eee8df;color:#193743;border:1px solid #cfcac1;border-radius:24px;box-shadow:0 24px 60px #17384712,0 2px 6px #1738470a;overflow:hidden}
.minimal-editor{padding:0 24px 18px}
.editor-chrome{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 -24px;padding:15px 24px;border-bottom:1px solid #d8d2c9;background:#faf7f1}
.editor-app{display:flex;gap:10px;align-items:center;font-size:.96rem;font-weight:800}.editor-app img{border-radius:10px}.editor-app small{display:block;font-size:.54rem;letter-spacing:.2em;font-weight:600;color:#68797e;margin-top:3px}
.editor-mode{display:flex;align-items:center;gap:7px;font-size:.7rem;color:#51656b;background:#ecefe8;border:1px solid #d7dfd5;padding:7px 10px;border-radius:7px}.editor-mode i{width:6px;height:6px;background:#5c8875;border-radius:50%}
.minimal-heading{align-items:center;margin:23px 0 18px;gap:25px}.minimal-heading>div:first-child{display:block}.minimal-heading h3{color:#173743;font-size:1.5rem;letter-spacing:-.035em}.minimal-help{max-width:660px;color:#597078;font-size:.8rem;line-height:1.6;margin:7px 0 0}.minimal-heading .editor-actions{display:flex;flex-shrink:0;gap:8px}
.studio.minimal-mode .editor-actions button,.studio.minimal-mode .minimal-inspector button{border:1px solid #c6cec9;background:#faf8f3;color:#23434e;border-radius:8px;min-height:40px;box-shadow:0 1px 2px #17384708;font-size:.73rem}
.studio.minimal-mode .editor-actions button:hover:enabled,.studio.minimal-mode .minimal-inspector button:hover:enabled{background:#e1e8e6}
.editor-workbench{background:#101823;border:1px solid #384653;border-radius:14px;box-shadow:0 8px 20px #10233116;overflow:hidden}
.editor-board-bar,.editor-board-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 17px;color:#aebccc;font-size:.66rem;background:#182330}.editor-board-bar{border-bottom:1px solid #35404e}.editor-board-bar>span:first-child{display:flex;gap:8px;align-items:center}.editor-live-dot{width:6px;height:6px;border-radius:50%;background:#ee9a54}.editor-board-footer{padding-block:10px;border-top:1px solid #35404e;background:#131e29;color:#8c9dab;font-size:.61rem}
.minimal-scroll{border-radius:0;scrollbar-color:#617282 #14202c}
.minimal-canvas{background:radial-gradient(circle,#7e91ac25 1px,transparent 1px) 12px 12px/18px 18px,#111a25;border:0;border-radius:0;min-width:600px;padding:14px;gap:10px;grid-template-rows:repeat(9,48px);grid-auto-rows:0}
.minimal-canvas.is-editing{background-color:#152231}
.minimal-tile{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0;border:1px solid #3c4d60;border-radius:10px;box-shadow:inset 0 1px 0 #ffffff08,0 3px 8px #00000015;background:linear-gradient(145deg,#223144,#172330);color:#eff4f9;position:relative;transition:border-color .12s,box-shadow .12s}
.minimal-tile.is-selected{border-color:#f1a365;box-shadow:0 0 0 1px #f1a36555,inset 0 1px 0 #ffffff08}.minimal-tile.is-moving{z-index:5;opacity:.78;box-shadow:0 16px 35px #0007;transition:none;cursor:grabbing}
.minimal-tile.is-drop-target{border:2px solid #8dcbe7;box-shadow:inset 0 0 0 3px #8dcbe72b;background:#254152}
.tile-title{display:flex;align-items:center;gap:7px;padding:9px 11px;color:#c0cbd8;min-width:0;background:#0d162225;border-bottom:1px solid #ffffff08;flex-shrink:0}
.tile-grip{font-size:1rem;line-height:1;color:#8ea1b8}.minimal-label{font-size:.7rem;font-weight:600;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-size{margin-left:auto;font-size:.55rem;white-space:nowrap;color:#8297ad}
.tile-content{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 18px;overflow:hidden}.tile-number{font-size:3.4rem;line-height:1;font-weight:700;color:#f2a264;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.tile-time{font-size:2rem}.tile-time>span{color:#8191a4}.tile-detail{font-size:.63rem;color:#9eafc1}.tile-history{display:flex;gap:15px;color:#9baec2;font-size:.63rem;letter-spacing:.05em}.tile-history span{color:#cfdae5}
.tile-pips{display:flex;gap:7px}.tile-pips i{width:6px;height:6px;background:#e8aa77;border-radius:50%}.tile-round-icon{width:37px;height:37px;display:grid;place-items:center;border:1px solid #f0a36b70;background:#f0a36b10;border-radius:10px;color:#f0a36b;font-size:1.5rem}.tile-content>strong:not(.tile-number){font-size:.9rem}.tile-progress-value{align-self:flex-start;color:#f0a36b}.tile-progress-value small{color:#859ab0;font-size:.65rem}.tile-progress{height:6px;background:#34465b;width:100%;border-radius:6px;overflow:hidden}.tile-progress i{display:block;width:17%;height:100%;background:#ee9c5f}.tile-matrix{width:100%;max-width:500px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.tile-matrix span{display:grid;place-items:center;min-height:24px;aspect-ratio:1.2;border:1px solid #3f536b;border-radius:4px;background:#24354a;font-size:.66rem;color:#b8c8d7}.tile-matrix span.lit{background:#eda062;color:#201d1a;border-color:#eda062}.tile-star{font-size:2.8rem;color:#f0a36b;line-height:1}.tile-lucky{display:flex;gap:9px}.tile-lucky span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid #c88e6180;color:#efbb8d;font-size:.75rem}
.minimal-tile[data-compact=true] .tile-content{gap:5px;padding:7px 12px}.minimal-tile[data-compact=true] .tile-number{font-size:2rem}.minimal-tile[data-compact=true] .tile-time{font-size:1.5rem}.minimal-tile[data-compact=true] .tile-history,.minimal-tile[data-compact=true] .tile-detail,.minimal-tile[data-compact=true] .tile-size{display:none}.minimal-tile[data-compact=true] .tile-round-icon{width:22px;height:22px;font-size:1rem}.minimal-tile[data-compact=true] .tile-content>strong:not(.tile-number){font-size:.7rem}
.minimal-tile[data-short=true]{flex-direction:row;padding:0;gap:0;align-items:center}.minimal-tile[data-short=true] .tile-title{max-width:55%;border:0;background:none;padding:6px}.minimal-tile[data-short=true] .tile-content{padding:3px 20px 3px 4px}.minimal-tile[data-short=true] .tile-number{font-size:1.3rem}.minimal-tile[data-short=true] .tile-history,.minimal-tile[data-short=true] .tile-pips,.minimal-tile[data-short=true] .tile-detail,.minimal-tile[data-short=true] .tile-star,.minimal-tile[data-short=true] .tile-round-icon{display:none}
.tile-drop-hint{display:none;position:absolute;inset:auto 8px 8px;padding:6px;background:#b4e1ef;color:#153640;font-size:.65rem;font-weight:700;text-align:center;border-radius:5px;pointer-events:none}.is-drop-target .tile-drop-hint{display:block}
.studio .minimal-resize{opacity:.75;width:25px;height:25px;min-height:25px;padding:5px;right:1px;bottom:1px;z-index:2;color:#b9c9d8;background:#162331bb;border-radius:5px 0 8px 0}.studio .minimal-resize:hover{background:#3e5269}.minimal-resize svg{pointer-events:none}
.minimal-inspector{display:grid;grid-template-columns:1fr auto 1.2fr;gap:22px;margin-top:18px;padding:17px 18px;border:1px solid #d3d1c9;border-radius:12px;background:#f9f6f0;color:#25434e;font-size:.74rem}.editor-selection{display:flex;flex-direction:column;gap:6px}.editor-selection>span,.editor-swap label{font-size:.63rem;color:#6b7c80}.minimal-inspector strong{font-size:.83rem;font-weight:700}.minimal-dimensions{gap:16px}.minimal-size{display:grid;grid-template-columns:30px 20px 30px;gap:5px}.minimal-size>span{grid-column:1/-1;color:#6b7c80;font-size:.63rem}.studio.minimal-mode .minimal-size button{width:30px;min-height:30px;padding:0}.minimal-size output{font-size:.73rem;text-align:center}.editor-swap{border-left:1px solid #d8ddd5;padding-left:20px}.editor-swap>div{display:flex;gap:7px;margin-top:6px}.editor-swap select{font:inherit;min-width:0;flex:1;width:120px;min-height:40px;background:#fffdf8;color:#25434e;border:1px solid #c6cec9;border-radius:7px;padding:7px}.studio.minimal-mode .editor-swap button{background:#244653;color:#fff;border-color:#244653;white-space:nowrap}.studio.minimal-mode .editor-swap button:hover:enabled{background:#365c69}.minimal-keys{color:#60757b;font-size:.68rem;margin-top:13px}.minimal-mobile{color:#60757b}.studio.minimal-mode :focus-visible{outline:3px solid #3283af;outline-offset:3px}.studio.minimal-mode .minimal-tile:focus-visible{outline-color:#f3b47f;outline-offset:-3px}
@media(max-width:1000px){.minimal-inspector{grid-template-columns:1fr auto}.editor-swap{grid-column:1/-1;border-left:0;border-top:1px solid #d8ddd5;padding:12px 0 0}.editor-swap select{width:auto}.minimal-heading{align-items:flex-start}.minimal-heading h3{font-size:1.3rem}}
@media(max-width:680px){.studio.minimal-mode{border-radius:17px}.minimal-editor{padding:0 12px 14px}.editor-chrome{margin:0 -12px;padding:12px}.editor-app{font-size:.83rem}.editor-mode{font-size:.6rem;padding:6px}.minimal-heading{display:block;margin-top:18px}.minimal-heading .editor-actions{margin-top:12px}.minimal-help{font-size:.75rem}.minimal-canvas{grid-template-rows:repeat(9,48px);gap:8px;padding:10px}.minimal-inspector{padding:13px;gap:15px;grid-template-columns:1fr}.minimal-dimensions{justify-content:space-between}.minimal-size{grid-template-columns:44px 26px 44px}.studio.minimal-mode .minimal-size button{width:44px;min-height:44px}.editor-swap{grid-column:auto}.editor-board-bar{padding:10px}.editor-board-footer{font-size:.55rem}.minimal-label{font-size:.65rem}.tile-size{display:none}.tile-title{padding:7px;gap:4px}.minimal-keys{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.minimal-tile{transition:none}}
.minimal-tile[data-compact=true] .tile-matrix{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.minimal-tile[data-compact=true] .tile-matrix span{min-height:15px;aspect-ratio:auto;font-size:.55rem}.minimal-tile[data-compact=true] .tile-matrix span:nth-child(n+11){display:none}
@media(pointer:coarse){.minimal-tile{touch-action:pan-x pan-y}.tile-grip{touch-action:none;display:grid;place-items:center;min-width:32px;min-height:32px;margin:-7px 0 -7px -5px}.minimal-resize{touch-action:none}}
/* One persistent studio shell across all three demo tabs. */
.studio,.studio.minimal-mode{--accent:#f2a264;--accent-ink:#201b17;background:#eee8df;color:#193743;border:1px solid #cfcac1;border-radius:24px;box-shadow:0 24px 60px #17384712,0 2px 6px #1738470a}
.studio>.studio-top,.studio.minimal-mode>.studio-top{display:flex!important;align-items:center;justify-content:space-between;gap:14px;padding:15px 24px;min-height:69px;background:#faf7f1;border-bottom:1px solid #d8d2c9;color:#193743}
.studio:not(.minimal-mode)>.studio-content{margin:24px;border:1px solid #384653;border-radius:14px;background:#101823;color:#eff4f9;box-shadow:0 8px 20px #10233116}
.studio:not(.minimal-mode) .number-stage,.studio:not(.minimal-mode) .board-stage,.studio:not(.minimal-mode) .viewer-screen{background:linear-gradient(145deg,#223144,#172330);border-color:#3c4d60}
.studio:not(.minimal-mode) .number-board>span{background:#24354a;border-color:#3f536b;color:#b8c8d7}
.studio:not(.minimal-mode) .number-board>.is-drawn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.studio>.studio-bottom{margin:0 24px 20px;padding:14px 18px;border:1px solid #d3d1c9;border-radius:12px;background:#f9f6f0;color:#60757b}
.studio>.studio-bottom button{background:#faf8f3;border-color:#c6cec9;color:#23434e}
.studio>.studio-bottom button:hover:enabled{background:#e1e8e6}
.studio-count{font-size:.68rem;color:#aebccc}
@media(max-width:680px){.studio,.studio.minimal-mode{border-radius:17px}.studio>.studio-top,.studio.minimal-mode>.studio-top{padding:12px;min-height:63px}.studio:not(.minimal-mode)>.studio-content{margin:16px 12px;padding:12px}.studio>.studio-bottom{margin:0 12px 14px;padding:12px}.studio>.studio-top .editor-mode{max-width:48%;font-size:.6rem}}

/* The surrounding page already identifies the product and selected tab. */
.studio>.studio-top,.studio.minimal-mode>.studio-top,.studio .editor-chrome{display:none!important}