/* Presentation only: the conversion grid, copied text and export sizes are independent. */
.studio-page { --bg:#0b0d10; --panel:#151a21; --panel-2:#1c232d; --text:#eceff4; --muted:#b1bac8; --accent:#ffb454; --border:#343e4b; --sans:system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Cascadia Mono","Fira Code",Consolas,monospace; background:#0b0d10; color:var(--text); }
.studio-page *,.studio-page *::before,.studio-page *::after { box-sizing:border-box; }
.studio-page a { color:var(--accent); }
.studio-page .brand { color:var(--text); }
.studio-page .eyebrow { color:var(--accent); }
.studio-page .badge { background:var(--accent); color:#171006; }
.studio-page .site-header { background:rgba(11,13,16,.95); backdrop-filter:none; }
.studio-page .brand-badge { border-radius:8px; background:var(--accent); color:#171006; box-shadow:none; }
.studio-page :is(h1,h2,h3) { letter-spacing:-.025em; text-wrap:balance; }
.studio-page :is(a,button,input,select,textarea,summary):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.studio-page .button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; max-width:100%; text-align:center; line-height:1.35; white-space:normal; box-shadow:none; border-radius:8px; background:#1b222c; color:var(--text); border-color:#455264; transition:background .16s,border-color .16s,transform .16s; }
.studio-page .button:hover { background:#293341; transform:translateY(-1px); }
.studio-page .button.primary,.studio-page .workbench-copy { background:var(--accent); color:#171006; border-color:transparent; }
.studio-page .button.primary:hover,.studio-page .workbench-copy:hover { background:#ffc77e; }
.studio-page .button.good { background:#1b222c; color:var(--text); border-color:#455264; }
.studio-page .card,.studio-page .panel { background:var(--panel); box-shadow:none; border-radius:10px; border-color:var(--border); }
.studio-page [hidden] { display:none!important; }
.studio-page .small { color:var(--muted); }
.studio-page :is(.container,.wrap) { max-width:1180px; }
.studio-section { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:48px 0; }
.studio-section > h2 { font-size:clamp(1.65rem,3vw,2.35rem); max-width:26ch; }
.studio-section > p { max-width:65ch; color:var(--muted); }
.studio-hero { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:44px; align-items:center; padding:44px 0 40px; }
.studio-hero h1 { max-width:12ch; font-size:clamp(2.5rem,4.65vw,4rem); line-height:1.03; margin:18px 0; }
.studio-hero .lead { max-width:42ch; font-size:1.05rem; }
.studio-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 14px; }
.studio-hero-links { display:flex; flex-wrap:wrap; gap:12px 20px; font-size:.9rem; }
.studio-showcase { min-width:0; }
.studio-showcase-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.studio-showcase-bar .button { min-height:40px; font-size:.85rem; padding:8px 12px; }
.studio-showcase-bar [aria-pressed=true] { background:#352719; border-color:var(--accent); }
.studio-showcase-bar .studio-replay { margin-left:auto; background:transparent; padding:6px 8px; font-size:.75rem; }
.studio-before-after { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--border); background:#0b0f14; overflow:hidden; border-radius:10px; }
.studio-before-after figure { margin:0; min-width:0; }
.studio-before-after figure + figure { border-left:1px solid var(--border); }
.studio-before-after img { display:block; width:100%; aspect-ratio:1/1; height:auto; object-fit:contain; }
.studio-before-after figcaption { padding:10px 14px; font:500 .75rem/1.4 var(--sans); color:var(--muted); border-top:1px solid var(--border); }
.studio-before-after figure:last-child figcaption { color:var(--accent); }
.studio-showcase-credit { font-size:.7rem; line-height:1.5; color:var(--muted); margin:10px 0; }
.studio-showcase > .button { width:100%; }
.studio-showcase.revealing figure:last-child img { animation:studio-reveal .75s ease-out both; }
@keyframes studio-reveal { from { clip-path:inset(0 0 100% 0); opacity:.3; } to { clip-path:inset(0); opacity:1; } }
.studio-quick { border-top:1px solid var(--border); }
.studio-quick-head { display:grid; grid-template-columns:1fr minmax(200px,350px); gap:28px; align-items:end; }
.studio-quick-head h2 { max-width:22ch; font-size:clamp(1.6rem,3vw,2.3rem); }
.studio-quick-head p { margin:8px 0 0; max-width:58ch; color:var(--muted); }
.studio-quick label { display:block; margin-bottom:8px; font-size:.85rem; font-weight:600; }
.studio-quick input { width:100%; font:600 1.2rem/1.4 var(--sans); padding:12px 14px; border:1px solid #536277; border-radius:8px; background:var(--panel); color:var(--text); }
.studio-quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px; }
.studio-font-preview { min-width:0; border-top:1px solid #536277; padding:16px 0 0; }
.studio-font-preview h3 { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; font-size:.95rem; }
.studio-font-preview h3 span { font-weight:400; font-size:.75rem; color:var(--muted); letter-spacing:0; }
.studio-font-preview pre { min-height:96px; margin:16px 0; font:10px/1.05 var(--mono); white-space:pre; overflow:auto; color:var(--accent); }
.studio-font-preview a { font-size:.82rem; }
.studio-live-status { margin:14px 0 0; min-height:1.5em; font-size:.8rem; color:var(--muted); }
.studio-result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 20px; margin-top:24px; }
.studio-result { min-width:0; margin:0; }
.studio-result > a { display:block; border-radius:8px; background:#10151c; overflow:hidden; border:1px solid var(--border); }
.studio-result img { width:100%; height:230px; object-fit:contain; padding:14px; }
.studio-result figcaption { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:12px; }
.studio-result h3 { font-size:1rem; margin:0; }
.studio-result figcaption a { font-size:.78rem; }
.studio-readme-example { padding:20px; min-height:230px; background:#f6f8fa; color:#1f2328; }
.studio-readme-example > span { display:block; border-bottom:1px solid #c6cdd5; padding-bottom:10px; font:600 .8rem var(--sans); }
.studio-readme-example pre { font:9px/1.2 var(--mono); white-space:pre; margin:18px 0; overflow:hidden; }
.studio-destinations { border-top:1px solid var(--border); }
.studio-destination-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:24px; }
.studio-destination { min-width:0; }
.studio-destination pre { min-height:110px; max-height:150px; overflow:auto; white-space:pre; font:10px/1.2 var(--mono); padding:18px 12px; background:#141b25; border-left:2px solid var(--accent); border-radius:0; color:#d9e3ef; }
.studio-destination p { color:var(--muted); font-size:.9rem; }
.studio-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; border-top:1px solid var(--border); }
.studio-benefits h2 { font-size:1.15rem; }
.studio-benefits p { font-size:.9rem; color:var(--muted); }
.studio-guides { border-top:1px solid var(--border); }
.studio-guide-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 28px; margin-top:24px; }
.studio-guide-links a { font-size:.9rem; padding:8px 0; border-bottom:1px solid var(--border); }
.studio-faq { border-top:1px solid var(--border); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 36px; }
.studio-faq h3 { font-size:1rem; }
.studio-faq p { color:var(--muted); font-size:.9rem; }
.studio-home .greeting-links { margin:0; padding:12px 0; border:none; font-size:.85rem; }
.studio-editor main > .section { padding-top:22px; }
.studio-editor .page-head { margin-bottom:20px; }
.studio-editor h1 { font-size:clamp(1.65rem,2.55vw,2.25rem); line-height:1.15; margin:6px 0 10px; }
.studio-editor .page-head .lead,.studio-editor h1 + .lead { font-size:.92rem; line-height:1.5; margin:0 0 18px; max-width:72ch; }
.studio-editor .growth-composer > h2,.studio-editor .growth-composer > p { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.studio-editor [data-workbench] { gap:18px; grid-template-columns:minmax(260px,.75fr) minmax(0,1.45fr); }
.studio-editor .workbench-result { padding:18px; }
.studio-editor .workbench-result :is(h2,h3) { font-size:1rem; }
.studio-result-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.studio-result-heading :is(h2,h3) { margin:0; }
.studio-result-heading .studio-compare-shortcut { font-size:.75rem; padding:8px 10px; min-height:36px; }
.studio-editor .workbench-essential { padding:16px; }
.studio-editor .workbench-essential label { font-size:.85rem; }
.studio-editor .workbench-result .ascii-output { padding:14px; background:#0e1319; border:1px solid var(--border); border-radius:8px; max-height:520px; }
.studio-editor .workbench-result pre#text-ascii-output { min-height:0; padding-top:18px; padding-bottom:18px; }
.studio-editor .workbench-result pre#ascii-output { min-height:0; }
.studio-editor .workbench-result :is(pre#text-ascii-output,pre#ascii-output)[data-state=empty] { min-height:160px; display:grid; place-content:center; text-align:center; color:var(--muted); }
.studio-editor .workbench-primary-actions .button { flex:0 1 auto; }
.studio-editor .workbench-primary-actions .button:not(.workbench-copy) { background:#1b222c; color:var(--text); border-color:#455264; }
.studio-editor .workbench-primary-actions #text-copy-markdown-button { background:#1b222c; color:var(--text); border-color:#455264; }
.studio-downloads { position:relative; }
.studio-downloads > summary { list-style:none; font-size:.85rem; padding:10px 14px; cursor:pointer; }
.studio-downloads > summary::-webkit-details-marker { display:none; }
.studio-downloads > summary::after { content:'⌄'; }
.studio-download-list { display:flex; flex-wrap:wrap; gap:8px; padding:10px 0 2px; }
.studio-download-list .button { min-width:90px; }
.studio-presets { border-top:1px solid var(--border); margin-top:12px; }
.studio-presets > summary { cursor:pointer; min-height:44px; padding:10px 0; font-size:.85rem; font-weight:600; }
.studio-presets > p { font-size:.75rem; }
.studio-readme .workbench-primary-actions #text-copy-markdown-button { background:var(--accent); color:#171006; border-color:transparent; }
.studio-readme .workbench-primary-actions .workbench-copy { background:#1b222c; color:var(--text); border-color:#455264; }
.studio-text-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; margin-top:10px; }
.studio-text-actions .button { margin:0!important; flex:1 1 10rem; font-size:.8rem; }
.studio-editor .workbench-readme-jump { display:flex; width:100%; margin-top:10px; }
.studio-editor .preview-view-controls { margin:8px 0; gap:6px; }
.studio-editor .preview-view-controls .button { font-size:.75rem; min-height:36px; padding:7px 10px; }
.studio-editor .preview-view-controls > p { font-size:.7rem; }
.studio-editor .growth-width-status { font-size:.75rem; }
.studio-essentials { border-top:1px solid var(--border); margin-top:16px; padding-top:12px; }
.studio-essentials h3 { font-size:.85rem; margin:0 0 12px; }
.studio-essentials-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:end; }
.studio-essentials-grid .field { margin:0!important; min-width:0; }
.studio-essentials-grid :is(select,input) { max-width:100%; }
.studio-essentials-grid select { font-size:.82rem; min-height:40px; padding:8px; }
.studio-essentials-grid #output-width,.studio-essentials-grid #contrast { width:100%; }
.studio-essentials-grid .field:has(#invert) { grid-column:1 / -1; }
.studio-essentials-grid .field:has(#invert) label { display:flex; align-items:center; gap:8px; margin:0; min-height:32px; }
.studio-essentials-grid #invert { width:auto; }
.studio-editor .workbench-essential #dropzone { padding:12px; }
.studio-editor .growth-image-examples > div { grid-template-columns:repeat(3,minmax(0,1fr)); }
.studio-editor .growth-image-example img { height:40px; }
.studio-editor .workbench-essential .clip-actions .button { min-height:36px; font-size:.75rem; padding:8px; }
.studio-editor .workbench-essential .clip-actions .small { font-size:.7rem; }
.studio-editor .workbench-essential .clip-actions { flex-direction:row; flex-wrap:wrap; align-items:center; }
.studio-looks { display:flex; flex-wrap:wrap; gap:6px; }
.studio-looks .button { flex:1 1 42%; padding:8px; font-size:.75rem; min-height:36px; }
.studio-looks .button[aria-pressed=true] { border-color:var(--accent); }
.studio-look-swatch { width:18px; height:18px; display:inline-grid; place-content:center; font:9px var(--mono); background:#101822; color:#d8f3ff; flex:none; border-radius:3px; }
.studio-looks [data-studio-look=retro] .studio-look-swatch { background:#171006; color:#ffbf66; }
.studio-looks [data-studio-look=logo] .studio-look-swatch { background:#fff; color:#111; }
.studio-looks [data-studio-look=terminal] .studio-look-swatch { background:#06110a; color:#62ff92; }
.studio-theme-grid { display:flex; flex-wrap:wrap; gap:8px; }
.studio-theme-grid .button { flex:1 1 85px; font-size:.75rem; padding:8px; }
.studio-theme-grid .button[aria-pressed=true] { border-color:var(--accent); }
.studio-theme-grid span { width:30px; height:26px; display:inline-grid; place-items:center; background:#0b0f14; color:#d8f3ff; font:12px var(--mono); border:1px solid #748197; }
.studio-theme-grid [data-theme=matrix] span { background:#06110a; color:#62ff92; }
.studio-theme-grid [data-theme=amber] span { background:#171006; color:#ffbf66; }
.studio-theme-grid [data-theme=light] span { background:#fff; color:#111; }
.studio-theme-grid [data-theme=transparent] span { color:#111; background:repeating-conic-gradient(#fff 0 25%,#bec7d1 0 50%) 0 / 8px 8px; }
.studio-context { border-top:1px solid var(--border); margin-top:14px; }
.studio-context > summary { min-height:44px; cursor:pointer; padding:12px 0; font-weight:600; }
.studio-context .field { max-width:18rem; }
.studio-context pre { max-height:220px; overflow:auto; white-space:pre; padding:16px; border-radius:6px; font:11px/1.3 var(--mono); background:#101722; color:#dce5f0; }
.studio-context[data-context=github] pre { background:#f6f8fa; color:#1f2328; }
.studio-context[data-context=discord] pre { background:#232428; color:#e5e6e9; }
.studio-context p { font-size:.75rem; color:var(--muted); }
.studio-font-role { display:block; font-size:.75rem; font-weight:500; color:var(--accent); padding-top:8px; }
.studio-gallery h1 { font-size:clamp(1.7rem,3vw,2.4rem); margin:6px 0 8px; }
.studio-gallery main > .section:first-child { padding-top:22px; padding-bottom:10px; }
.studio-gallery main > .section:first-child .lead { margin:0; font-size:.9rem; }
.studio-gallery .gallery-finder { padding-top:10px; padding-bottom:20px; margin:0 auto; }
.studio-gallery .gallery-finder > h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.studio-gallery .usability-filters { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; margin:6px 0 10px; }
.studio-gallery .usability-filters .field:first-child { grid-column:auto; }
.studio-gallery .usability-filters label { margin:0 0 4px; font-size:.8rem; }
.studio-gallery .usability-filters :is(input,select) { padding:10px; min-height:44px; font-size:.85rem; }
.studio-gallery .studio-gallery-options { margin:8px 0 10px; border-bottom:1px solid var(--border); }
.studio-gallery-options > summary { min-height:40px; padding:8px 0; cursor:pointer; font-size:.85rem; font-weight:600; }
.studio-gallery-options .usability-filters { grid-template-columns:repeat(3,minmax(0,1fr)); margin:10px 0; }
.studio-gallery .usability-actions { margin:8px 0; gap:8px; }
.studio-gallery .usability-actions .button { font-size:.75rem; padding:8px 10px; min-height:36px; }
.studio-gallery .usability-status { font-size:.8rem; margin:6px 0; }
.studio-gallery .usability-status:empty { display:none; }
.studio-gallery .usability-actions .check-label { display:flex; align-items:center; gap:6px; font-size:.8rem; margin:0; }
.studio-gallery .usability-actions input[type=checkbox] { width:18px; height:18px; }
.studio-gallery .gallery-curated h2 { font-size:1rem; margin:20px 0 12px; }
.studio-gallery .example-card { gap:8px; padding:14px; }
.studio-gallery .example-card h3 { font-size:.9rem; margin:0; }
.studio-gallery .example-card .code-preview { min-height:120px; display:grid; align-content:center; justify-content:center; border-radius:5px; padding:12px; }
.studio-gallery .example-card .code-preview pre { font-size:11px; }
.studio-gallery .example-card .button { justify-self:start; font-size:.75rem; min-height:36px; padding:8px 10px; }
.studio-gallery #gallery-storage-status { font-size:.72rem; margin:4px 0; }
.studio-page .privacy-panel { padding:14px 18px; grid-template-columns:minmax(0,1fr) auto; gap:4px 20px; margin:12px auto; border-radius:8px; box-shadow:none; }
.studio-page .privacy-panel h2 { font-size:1rem; margin:0 0 3px; }
.studio-page .privacy-panel p { font-size:.8rem; margin:0; max-width:65ch; }
.studio-page .privacy-panel a { font-size:.75rem; color:var(--accent); }
.studio-page .privacy-actions { grid-row:1 / span 4; gap:8px; }
.studio-page .privacy-button { min-height:44px; padding:8px 12px; font-size:.8rem; }
@media(max-width:980px) {
 .studio-editor [data-workbench] { grid-template-columns:minmax(0,1fr); }
 .studio-editor .workbench-essential { padding:14px; }
 .studio-editor .workbench-result .ascii-output { max-height:360px; }
 .studio-hero { gap:24px; }
 .studio-hero h1 { font-size:clamp(2.1rem,4.9vw,3rem); }
 .studio-theme-grid .button { flex-basis:70px; }
}
@media(max-width:700px) {
 .studio-section { padding:30px 0; }
 .studio-hero { grid-template-columns:minmax(0,1fr); padding-top:24px; gap:24px; }
 .studio-hero h1 { max-width:17ch; margin:10px 0 12px; }
 .studio-hero .lead { font-size:.95rem; margin:10px 0; }
 .studio-hero-actions { margin:18px 0 12px; }
 .studio-hero-actions .button { flex:1 1 45%; font-size:.85rem; padding:10px; }
 .studio-showcase-credit { font-size:.65rem; }
 .studio-quick-head { grid-template-columns:1fr; gap:16px; }
 .studio-quick-grid { grid-template-columns:minmax(0,1fr); gap:22px; }
 .studio-font-preview pre { min-height:0; margin:12px 0; }
 .studio-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
 .studio-result img { height:160px; padding:8px; }
 .studio-result h3 { font-size:.85rem; }
 .studio-readme-example { min-height:160px; padding:12px; }
 .studio-readme-example pre { font-size:6px; margin:12px 0; }
 .studio-destination-grid,.studio-benefits { grid-template-columns:1fr; gap:18px; }
 .studio-destination pre { min-height:0; }
 .studio-guide-links,.studio-faq { grid-template-columns:minmax(0,1fr); gap:12px; }
 .studio-editor h1 { font-size:1.7rem; }
 .studio-editor .page-head .lead,.studio-editor h1 + .lead { font-size:.85rem; }
 .studio-editor .workbench-result { padding:14px; }
 .studio-editor .workbench-essential #text-input { height:4rem; min-height:4rem; }
 .studio-editor .workbench-essential .clip-actions .button { width:auto; flex:1 1 auto; }
 .studio-editor .workbench-essential .clip-actions > button { width:auto; flex:0 1 auto; }
 .studio-editor .workbench-essential .clip-actions > button { order:0; flex:1 1 40%; min-height:44px; }
 .studio-editor .workbench-essential .clip-actions > span.small { order:1; flex-basis:100%; }
 .studio-editor #dropzone { min-height:0; }
 .studio-editor #dropzone { font-size:.82rem; line-height:1.35; }
 .studio-editor #dropzone p { margin:4px 0; font-size:.85rem; }
 .studio-editor #dropzone .hint { margin-top:8px; }
 .studio-editor .growth-image-examples > div { grid-template-columns:repeat(6,minmax(0,1fr)); }
 .studio-editor .growth-image-example { padding:4px; font-size:.6rem; }
 .studio-editor .growth-image-example img { height:30px; }
 .studio-editor .growth-image-example span { overflow-wrap:anywhere; }
 .studio-editor .studio-essentials { margin-top:10px; padding-top:10px; }
 .studio-editor .studio-essentials h3 { display:block; font-size:.85rem; }
 .studio-editor .studio-essentials-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .studio-editor .studio-essentials-grid label { font-size:.75rem; }
 .studio-editor .studio-essentials-grid .field:last-child { align-self:center; }
 .studio-editor .workbench-primary-actions .button { flex:1 1 calc(50% - 8px); font-size:.8rem; }
 .studio-editor .preview-view-controls .button { min-height:44px; }
 .studio-gallery .usability-filters { grid-template-columns:minmax(0,1fr); }
 .studio-gallery .studio-gallery-options .usability-filters { grid-template-columns:minmax(0,1fr); }
 .studio-gallery .gallery-curated .grid-3 { grid-template-columns:minmax(0,1fr); }
 .studio-gallery .example-card .button { min-height:44px; }
 .studio-gallery main > .section:first-child { padding-top:16px; }
 .studio-page .privacy-panel { display:block; padding:12px 14px; }
 .studio-page .privacy-panel h2 { font-size:.9rem; }
 .studio-page .privacy-actions { margin-top:8px; max-width:none; }
 .studio-page .privacy-actions .privacy-button { flex:1 1 40%; }
}
@media(prefers-reduced-motion:reduce) { .studio-page * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }