.studio{padding-bottom:120px}.studio-top{border-bottom:1px solid var(--border);background:#263238b3;backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}.studio-top-inner{display:flex;align-items:center;justify-content:space-between;height:56px}.studio-home{text-decoration:none;font-weight:700;color:var(--title)}.studio-home:hover{color:var(--accent)}.studio-topnav{display:flex;gap:20px}.studio-topnav a{text-decoration:none;color:var(--muted);font-size:.92rem}.studio-topnav a:hover{color:var(--text)}.studio-hero{padding:64px 0 40px;text-align:left}.studio-hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;margin:14px 0 16px;font-weight:800;letter-spacing:-.02em;color:var(--title)}.studio-hero .title-accent{color:var(--accent)}.studio-sub{max-width:62ch;margin:0;color:var(--text);font-size:1.08rem}.studio-grid{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:28px;align-items:start;margin-top:28px}.studio-side{position:sticky;top:72px;display:grid;gap:18px}@media(max-width:980px){.studio-grid{grid-template-columns:1fr}.studio-side{position:static}}.studio-options{display:grid;gap:18px}.opt-group{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}.opt-group h2{margin:0 0 4px;font-size:1rem;color:var(--title);letter-spacing:.01em}.opt-hint{margin:0 0 12px;font-size:.82rem;color:var(--muted)}.opt-cards{display:grid;gap:8px}.opt-card{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.opt-card:hover{border-color:#4a5f6a}.opt-card:has(input:checked){border-color:var(--accent);background:#80cbc412}.opt-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}.opt-card.is-locked{opacity:.75;cursor:default}.opt-card input{margin-top:3px;accent-color:var(--accent);flex:0 0 auto}.opt-card-body{display:grid;gap:2px;min-width:0}.opt-card-title{color:var(--title);font-weight:600;font-size:.92rem;display:flex;align-items:baseline;gap:8px}.opt-kb{font-size:.72rem;font-weight:500;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.opt-card-desc{font-size:.8rem;color:var(--muted);line-height:1.45}.opt-card-req{font-size:.74rem;color:var(--accent)}.opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:.88rem;color:var(--text)}.opt-row[hidden]{display:none}.opt-num{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem}.opt-num input{width:82px;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);font:inherit;font-variant-numeric:tabular-nums}.opt-num input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.seg{display:inline-flex;gap:3px;padding:3px;background:#ffffff0d;border:1px solid var(--border);border-radius:9px}.seg label{position:relative;cursor:pointer}.seg input{position:absolute;inset:0;opacity:0;cursor:pointer}.seg span,.seg button{display:inline-block;padding:5px 11px;border-radius:6px;border:0;background:none;color:var(--muted);font:inherit;font-size:.8rem;cursor:pointer;transition:background .15s ease,color .15s ease}.seg label:hover span,.seg button:hover{color:var(--text)}.seg input:checked+span,.seg button.is-active{background:#80cbc438;color:var(--accent)}.seg input:focus-visible+span,.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.opt-toggle{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:.88rem;cursor:pointer;width:fit-content}.opt-toggle input{position:absolute;opacity:0;width:1px;height:1px}.toggle-track{width:34px;height:20px;border-radius:999px;background:var(--border);position:relative;transition:background .18s ease;flex:0 0 auto}.toggle-track:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#cfd8dc;transition:transform .18s cubic-bezier(.16,1,.3,1)}.opt-toggle input:checked+.toggle-track{background:var(--accent)}.opt-toggle input:checked+.toggle-track:after{transform:translate(14px);background:#15252b}.opt-toggle input:focus-visible+.toggle-track{outline:2px solid var(--accent);outline-offset:2px}.studio-preview,.studio-export{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.preview-head h2{margin:0;font-size:1rem;color:var(--title)}.preview-shell{display:flex;justify-content:center;background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0 / 14px 14px,#1d262b;border:1px solid var(--border);border-radius:12px;padding:14px}.preview-stage{position:relative;width:100%;height:460px;overflow:hidden}.preview-stage iframe{position:absolute;top:0;left:0;width:100%;height:460px;border:0;border-radius:8px;background:#fff;box-shadow:0 24px 60px -24px #080c0ecc;transform-origin:top left}.preview-note{margin:10px 0 0;font-size:.8rem;color:var(--muted)}.export-size{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.export-kb{font-size:1.7rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.export-vs{font-size:.84rem;color:var(--muted)}.export-included{margin:6px 0 14px;font-size:.8rem;color:var(--muted);line-height:1.5}.export-btn{width:100%;justify-content:center;font-size:1rem;gap:10px;transition:transform .15s ease,box-shadow .15s ease,background .2s ease}.export-btn:hover{box-shadow:0 10px 30px -10px #80cbc48c}.export-btn:active{transform:translateY(0) scale(.98)}.export-btn.is-done{background:#34d399}.export-note{margin:10px 0 0;font-size:.76rem;color:var(--muted);text-align:center}.studio-code{margin-top:44px}.studio-code>h2{margin:0 0 4px;font-size:1.3rem;color:var(--title)}.code-file-block{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-top:16px;overflow:hidden}.code-file-block>h3,.code-file-block summary{margin:0;padding:12px 16px;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--title);display:flex;align-items:baseline;gap:12px}.code-file-block summary{cursor:pointer;list-style:none}.code-file-block summary::-webkit-details-marker{display:none}.code-file-block summary h3{margin:0;font-size:.9rem}.code-file-block summary:before{content:"▸";color:var(--muted);transition:transform .15s ease;display:inline-block}.code-file-block[open] summary:before{transform:rotate(90deg)}.code-file-block summary .opt-hint{margin:0}.code-file-block summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.code-file-block h3 code,.code-file-block summary code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--accent);background:none;font-size:.86rem}.code-file-block pre{margin:0;padding:16px;max-height:420px;overflow:auto;font-size:.82rem;line-height:1.6;background:var(--code-bg);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.code-file-block--long pre{max-height:360px}.code-file-block pre code{white-space:pre}.code-file-block--long pre code[data-code-js]{white-space:pre-wrap;word-break:break-all}.studio-code .code-block{position:relative;margin:0}.studio-code .code-block pre code.hljs{background:transparent;padding:0}.studio-code .copy-btn{position:absolute;top:10px;right:14px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font-size:.74rem;font-family:inherit;color:var(--muted);background:#1d262be6;border:1px solid var(--border);border-radius:7px;cursor:pointer;opacity:0;transition:opacity .15s ease,color .15s ease,border-color .15s ease}.studio-code .code-block:hover .copy-btn,.studio-code .copy-btn:focus-visible{opacity:1}.studio-code .copy-btn:hover{color:var(--text);border-color:var(--accent)}.studio-code .copy-btn.is-copied{color:#34d399;border-color:#34d399;opacity:1}.studio-code .copy-btn svg{display:block}@media(hover:none){.studio-code .copy-btn{opacity:1}}@media(max-width:640px){.studio-hero{padding-top:40px}.preview-shell iframe{height:420px}.preview-shell.is-phone iframe{width:100%;max-width:380px}}