/* Scoped component studio: shares main navigation, not a separate site. */
.studio-root{color-scheme:dark;--bg:#101113;--card:#1c1e21;--raised:#272a2e;--ink:#f0f1ec;--muted:#a0a49e;--line:#303338;--accent:#c9fa72;--stage:#1c1e21}
.studio-root *{box-sizing:border-box}
.studio-root{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 "Segoe UI Variable Text","Microsoft YaHei UI",sans-serif;-webkit-font-smoothing:antialiased}
.studio-root{color-scheme:light;--bg:#f5f5f1;--card:#e9ebe5;--raised:#fff;--ink:#202520;--muted:#656c62;--line:#d4d8ce;--accent:#50732d;--stage:#e9ebe5}
.studio-root button,.studio-root input{font:inherit;color:inherit}
.studio-root button,.studio-root a{touch-action:manipulation}
.studio-root button{cursor:pointer;background:var(--raised);border:1px solid transparent;border-radius:9px;padding:9px 13px}
.studio-root a{color:inherit;text-decoration:none}
.studio-root button:hover{border-color:var(--muted)}
.studio-root button:focus-visible,.studio-root a:focus-visible,.studio-root input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.studio-root [hidden]{display:none!important}
.studio-root .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.studio-root .lab-nav{height:80px;display:flex;align-items:center;gap:30px;padding:0 36px;border-bottom:1px solid var(--line)}
.studio-root .lab-brand{display:flex;align-items:center;gap:12px;font-size:33px;font-weight:800;letter-spacing:-2px}
.studio-root .lab-brand span{font-size:13px;font-weight:500;letter-spacing:-.3px}
.studio-root .lab-nav nav{display:flex;gap:8px;align-items:center;margin:auto}
.studio-root .lab-nav nav a,.studio-root .lab-nav nav button{padding:8px 14px;background:transparent;color:var(--muted)}
.studio-root .lab-nav nav button[aria-pressed=true]{background:var(--raised);color:var(--ink)}
.studio-root #bench-count{font:11px monospace;padding-left:4px;color:var(--muted)}
.studio-root #theme{font-size:12px;background:transparent;border:1px solid var(--line)}
.studio-root .studio-body{max-width:1600px;margin:auto;padding:0 36px}
.studio-root .lab-intro{text-align:center;padding:67px 0 50px}
.studio-root .eyebrow{font:11px/1.8 Consolas,monospace;letter-spacing:2px;color:var(--muted)}
.studio-root .eyebrow span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px}
.studio-root .lab-intro h1{font-size:clamp(40px,5vw,70px);line-height:1.15;letter-spacing:-3px;font-weight:550;margin:25px 0}
.studio-root .lab-intro h1 br{display:none}
.studio-root .lab-intro h1 span{color:var(--accent)}
.studio-root .lab-intro>p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.9}
.studio-root .intro-links{display:flex;justify-content:center;gap:18px;font-size:11px;color:var(--muted);margin-top:25px}
.studio-root .intro-links a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.studio-root .lab-toolbar{display:flex;align-items:center;gap:14px;margin:15px 0 20px}
.studio-root .lab-toolbar h2{font-size:17px;font-weight:500;margin-right:auto}
.studio-root .lab-toolbar h2 span{font:11px monospace;color:var(--muted);margin-left:10px}
.studio-root .lab-toolbar input{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:transparent;width:250px}
.studio-root .lab-toolbar button{font-size:12px}
.studio-root .blocks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.studio-root .block-card{min-width:0}
.studio-root .block-stage{height:290px;background:var(--card);border-radius:22px;overflow:hidden;border:1px solid #ffffff05;position:relative}
.studio-root .block-stage iframe{width:100%;height:100%;border:0}
.studio-root .block-meta{display:flex;align-items:center;gap:8px;padding:17px 2px 27px}
.studio-root .block-meta h3{font-size:14px;font-weight:500;margin:0 auto 0 0}
.studio-root .block-meta h3 span{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:3px}
.studio-root .block-meta button{padding:6px 10px;background:transparent;border:1px solid var(--line);font-size:11px}
.studio-root .block-meta button:hover{color:var(--accent);border-color:var(--accent)}
.studio-root .lab-note{font-size:12px;color:var(--muted);margin:35px 0 55px;max-width:850px}
.studio-root footer{border-top:1px solid var(--line);padding:28px 36px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
.studio-root dialog{background:var(--bg);color:var(--ink);width:min(1200px,calc(100vw - 48px));height:min(780px,calc(100dvh - 48px));border:1px solid var(--line);border-radius:24px;padding:0;max-width:none;max-height:none}
.studio-root dialog::backdrop{background:#000b;backdrop-filter:blur(9px)}
.studio-root .editor-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:100%}
.studio-root .editor-preview{background:var(--card);display:flex;flex-direction:column;min-width:0}
.studio-root .preview-label{padding:27px;color:var(--muted);font:10px Consolas,monospace;letter-spacing:2px}
.studio-root .preview-label span{float:right;font:11px "Segoe UI",sans-serif;letter-spacing:0}
.studio-root .editor-preview iframe{border:0;width:100%;flex:1;min-height:200px}
.studio-root .editor-preview>p{text-align:center;color:var(--muted);font-size:12px;padding:20px}
.studio-root .editor-panel{padding:24px;overflow:auto;border-left:1px solid var(--line)}
.studio-root .editor-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font:10px Consolas,monospace;letter-spacing:1px}
.studio-root .editor-top button{font:24px sans-serif;background:transparent;padding:0 7px}
.studio-root .editor-panel h2{font-size:23px;letter-spacing:-.5px;margin:18px 0 5px;font-weight:550}
.studio-root .editor-panel>p,.studio-root .how p,.studio-root #code-panel>p{font-size:12px;color:var(--muted);line-height:1.8}
.studio-root .editor-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:25px 0 20px}
.studio-root .editor-tabs button{background:transparent;border-radius:0;padding:10px 20px;color:var(--muted)}
.studio-root .editor-tabs button[aria-selected=true]{color:var(--ink);border-bottom:2px solid var(--accent)}
.studio-root .control-row,.studio-root .slider-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:20px 0 8px}
.studio-root .control-row input[type=color]{width:38px;height:27px;padding:0;border:0;background:none}
.studio-root .control-row input[type=checkbox]{accent-color:var(--accent)}
.studio-root input[type=range]{width:100%;accent-color:var(--accent)}
.studio-root output{color:var(--muted);font:11px monospace}
.studio-root .subtle-button{font-size:11px;margin-top:14px;background:transparent;border:1px solid var(--line)}
.studio-root .how{border-top:1px solid var(--line);margin-top:25px;padding-top:12px}
.studio-root .how h3{font-size:12px;font-weight:500;margin-bottom:0}
.studio-root .editor-bottom{margin-top:24px}
.studio-root .solid-button{width:100%;background:var(--accent);color:var(--bg);font-weight:600}
.studio-root .editor-bottom p{color:var(--muted);font-size:10px;text-align:center}
.studio-root .code-buttons{display:flex;gap:7px;font-size:12px}
.studio-root pre{white-space:pre;overflow:auto;background:var(--card);padding:15px;border:1px solid var(--line);border-radius:10px;font:10px/1.8 Consolas,monospace;max-height:320px}
.studio-root #copy-prompt{width:100%;font-size:12px}
.studio-root .bench-heading{display:flex;align-items:center;justify-content:space-between;padding:30px 0 15px;gap:15px}
.studio-root .bench-heading h1{font-size:28px;font-weight:500;letter-spacing:-1px;margin:10px 0}
.studio-root .bench-heading p:not(.eyebrow){font-size:12px;color:var(--muted)}
.studio-root .bench-heading>button{background:var(--accent);color:var(--bg);white-space:nowrap}
.studio-root .bench-tools{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:10px 0}
.studio-root .bench-tools button{font-size:12px}
.studio-root .bench-tools output{width:50px;text-align:center}
.studio-root #bench-viewport{height:650px;max-height:70dvh;min-height:400px;border:1px solid var(--line);background:radial-gradient(var(--line) 1px,transparent 1px) 0 0/22px 22px;border-radius:20px;overflow:auto;position:relative;margin-bottom:40px}
.studio-root #bench-canvas{width:1800px;height:1300px;position:relative;transform-origin:0 0}
.studio-root .bench-item{position:absolute;width:330px;height:310px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;box-shadow:0 12px 30px #0002}
.studio-root .bench-handle{display:flex;align-items:center;gap:6px;height:43px;padding:8px 12px;cursor:grab;touch-action:none;background:var(--raised)}
.studio-root .bench-handle:active{cursor:grabbing}
.studio-root .bench-handle span{margin-right:auto;font-size:12px}
.studio-root .bench-handle button{padding:3px 6px;font-size:10px;background:transparent}
.studio-root .bench-item iframe{border:0;width:100%;height:265px}
.studio-root #bench-empty{position:absolute;left:5%;top:35%;width:90%;text-align:center;color:var(--muted);line-height:2;pointer-events:none}
.studio-root .bench-item:focus-within{outline:2px solid var(--accent)}
.studio-root #lab-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--bg);border-radius:12px;padding:11px 20px;font-size:12px;z-index:100;opacity:0;pointer-events:none}
.studio-root #lab-toast.show{opacity:1}
@media(max-width:1000px){.studio-root .blocks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.studio-root .lab-nav{gap:12px;padding:0 22px}
.studio-root .lab-brand span{display:none}
.studio-root .studio-body{padding:0 22px}
.studio-root .editor-shell{grid-template-columns:minmax(0,1fr) 300px}
.studio-root .editor-panel{padding:20px}
}
@media(max-width:650px){.studio-root .lab-nav{padding:12px 16px;height:auto;flex-wrap:wrap}
.studio-root .lab-brand{font-size:25px}
.studio-root .lab-nav nav{order:3;width:100%;justify-content:center}
.studio-root .lab-nav nav a,.studio-root .lab-nav nav button{font-size:12px;padding:8px 12px}
.studio-root #theme{margin-left:auto}
.studio-root .lab-intro{padding:40px 0 25px}
.studio-root .lab-intro h1{font-size:48px;letter-spacing:-2px}
.studio-root .lab-intro h1 br{display:block}
.studio-root .lab-intro>p:not(.eyebrow){font-size:13px}
.studio-root .intro-links{flex-direction:column;gap:8px}
.studio-root .lab-toolbar{flex-wrap:wrap;gap:8px}
.studio-root .lab-toolbar label{order:3;width:100%}
.studio-root .lab-toolbar input{width:100%}
.studio-root .blocks-grid{grid-template-columns:1fr;gap:10px}
.studio-root .block-stage{height:270px}
.studio-root .block-meta{padding-bottom:18px}
.studio-root .studio-body{padding:0 16px}
.studio-root dialog{width:100vw;height:100dvh;border-radius:0;border:0}
.studio-root .editor-shell{display:flex;flex-direction:column;height:auto}
.studio-root .editor-preview{height:310px}
.studio-root .editor-preview>p{display:none}
.studio-root .editor-panel{overflow:visible;border:0}
.studio-root .editor-top{position:sticky;top:0;background:var(--bg);padding:10px 0;z-index:2}
.studio-root .editor-preview iframe{min-height:220px}
.studio-root .preview-label{padding:20px}
.studio-root .bench-heading h1{font-size:24px}
.studio-root .bench-heading{align-items:flex-start}
.studio-root .bench-heading>button{margin-top:25px;font-size:11px}
.studio-root footer{gap:20px;padding:20px 16px;font-size:10px}
.studio-root .lab-note{font-size:11px}
.studio-root .bench-heading .eyebrow{font-size:9px}
.studio-root #bench-viewport{min-height:440px}
}
@media(prefers-reduced-motion:reduce){.studio-root *{scroll-behavior:auto!important;transition:none!important}
}