.studio-intro{padding-top:63px;padding-bottom:30px}.studio-intro h1{font:950 clamp(43px,5.3vw,77px)/1.03 system-ui;letter-spacing:-.075em;margin:12px 0}.studio-intro h1 em{font-style:normal;color:#91e9f0}.studio-intro>p{max-width:840px;color:#c6d7df}.studio-note{border:1px solid #446b80;background:#122637;border-radius:10px;padding:17px 19px;font-size:12px;color:#c7dae5;line-height:1.7;margin-top:16px}.editor-shell{padding-top:20px;padding-bottom:35px}.editor-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:13px;padding:17px;border:1px solid #34586e;border-radius:13px 13px 0 0;background:#112635}.editor-toolbar label{display:grid;gap:5px}.editor-toolbar input,.editor-toolbar select{min-width:170px}.editor-toolbar-buttons{display:flex;gap:7px;flex-wrap:wrap}.editor-toolbar-buttons .secondary,.import-label{min-height:42px;padding:8px 12px;font-size:10px;cursor:pointer}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid #31556b;border-top:0;border-radius:0 0 13px 13px;overflow:hidden}.editor-pane{min-width:0;background:#0b1826;padding:20px;border-right:1px solid #31556b}.editor-tabs{display:flex;gap:7px;flex-wrap:wrap;border-bottom:1px solid #34566b;padding-bottom:12px}.editor-tabs button,.viewport-tools button{border:1px solid #46677a;background:#102739;color:#d6eaf1;padding:9px 12px;border-radius:7px;font-size:11px;font-weight:800}.editor-tabs button[aria-selected=true],.viewport-tools button[aria-pressed=true]{background:#8bdfea;color:#07202a}.code-panel{padding-top:16px}.code-panel[hidden]{display:none}.code-panel label{display:block;margin-bottom:8px}.code-panel textarea{display:block;width:100%;height:420px;resize:vertical;background:#06131e;color:#c8f2fa;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;padding:16px;tab-size:2;white-space:pre;border:1px solid #385971;border-radius:8px}.editor-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.preview-pane{min-width:0;padding:20px;background:#10212f}.preview-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.viewport-tools{display:flex;gap:7px}.preview-frame{margin-top:14px;min-height:485px;border-radius:10px;background:#253748;display:flex;justify-content:center;align-items:stretch;padding:10px;overflow:auto}.preview-frame iframe{display:block;background:#fff;border:0;width:100%;min-height:460px;transition:width .2s}.preview-frame.mobile iframe{width:min(100%,375px)}.studio-after{padding-top:30px;padding-bottom:80px}.studio-after h2{font:900 clamp(28px,3vw,45px) system-ui;letter-spacing:-.055em}.after-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.after-grid>div{padding:23px;background:#102330;border:1px solid #34576b;border-radius:12px}.after-grid strong{font-size:17px}.after-grid p{color:#adc7d4;font-size:13px}@media(max-width:1050px){.workspace{grid-template-columns:1fr}.editor-pane{border-right:0;border-bottom:1px solid #31556b}}@media(max-width:670px){.editor-toolbar input,.editor-toolbar select{min-width:0;width:100%}.editor-toolbar label{flex:1 1 140px}.editor-toolbar-buttons{width:100%}.editor-toolbar-buttons .secondary,.import-label{flex:1}.editor-pane,.preview-pane{padding:14px}.code-panel textarea{height:370px;font-size:12px}.preview-frame{min-height:360px}.preview-frame iframe{min-height:340px}.after-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.preview-frame iframe{transition:none}}