/* Dev101 interactive studio shell: actual controls remain in DOM. */
:root{color-scheme:dark;--c:#71e6ff;--g:#ffd680;--panel:#09294cf2}
html{background:#06132b;color:#f4fbff;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
body{background:radial-gradient(ellipse at 75% 10%,#164d88,#071830 70%)!important;color:#f4fbff!important;min-width:320px}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,#06152deb,#0b3156aa),var(--studio-scene) center/cover no-repeat;opacity:.6}
.studio-header{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:18px clamp(14px,3vw,45px);background:#071a38ed;border-bottom:2px solid var(--c)}
.studio-header h1{font-size:clamp(26px,3vw,43px);margin:8px 0;color:#ffdb92}
.studio-header p{max-width:740px;line-height:1.6}
.studio-nav{display:flex;flex-wrap:wrap;gap:9px}
.studio-nav a{padding:12px 15px;border:1px solid var(--c);border-radius:12px;background:#0c3c6b;text-decoration:none;font-weight:750}
.studio-grid{display:grid;grid-template-columns:minmax(220px,310px) minmax(0,1fr);gap:16px;max-width:1600px;margin:20px auto;padding:0 18px}
.studio-sidebar,.studio-workspace{border:1px solid #55c8f1;border-radius:20px;background:var(--panel);padding:20px;box-shadow:0 12px 40px #0008;min-width:0}
.studio-sidebar h2{color:var(--g)}
.studio-sidebar a{display:block;min-height:45px;padding:12px;margin:10px 0;background:#0b4675;border:1px solid #469dcb;border-radius:10px;text-decoration:none}
.studio-sidebar a:hover{border-color:var(--g)}
.studio-workspace main{max-width:100%;padding:0;margin:0}
.studio-workspace section,.studio-workspace .panel,.studio-workspace .scene{border:1px solid #51a9d5;background:#0c3058e9;color:#fff;border-radius:16px;padding:18px;margin:12px 0}
.studio-workspace .scene{display:flex;flex-wrap:wrap;gap:15px}
.studio-workspace canvas{max-width:100%;touch-action:none}
.studio-workspace button{min-height:46px;border:1px solid var(--c);border-radius:11px;cursor:pointer}
.studio-workspace :is(input,select,textarea){max-width:100%;min-height:42px;border-radius:9px}
.studio-workspace :is(button,input,select,textarea,a):focus-visible,.studio-nav a:focus-visible{outline:3px solid var(--g)!important;outline-offset:3px}
.studio-workspace :is(h1,h2,h3){color:#ffdb92}
.studio-note{font-size:13px;color:#d6eafa;line-height:1.5}
@media(max-width:800px){.studio-grid{grid-template-columns:1fr;padding:0 10px}.studio-sidebar{display:none}.studio-workspace{padding:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}