.studio-page { margin:0; background:var(--color-background); color:var(--color-text-primary); font-family:var(--font-family-body); line-height:var(--line-height-relaxed); color-scheme:dark; }
[data-theme="light"] .studio-page { color-scheme:light; }
.studio-page h1,.studio-page h2,.studio-page h3 { font-family:var(--font-family-heading); }
.studio-page [hidden] { display:none!important; }
.studio-wrap { max-width:1140px; margin:auto; padding:128px 24px 72px; }
.studio-page[data-companion=yes] .studio-wrap { padding-top:40px; }
.studio-local-header { position:static; display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:20px 28px; border-bottom:1px solid var(--color-border); background:var(--color-surface); font-size:var(--font-size-sm); }
.studio-intro { max-width:780px; margin-bottom:24px; }
.studio-eyebrow,.studio-step { text-transform:uppercase; letter-spacing:var(--letter-spacing-wide); font-size:var(--font-size-xs); font-weight:var(--font-weight-bold); color:var(--color-action-secondary); margin:0 0 10px; }
.studio-intro h1 { font-size:clamp(var(--font-size-2xl),5vw,var(--font-size-3xl)); line-height:var(--line-height-tight); letter-spacing:var(--letter-spacing-tight); margin:12px 0 20px; }
.studio-intro>p:not(.studio-eyebrow) { font-size:var(--font-size-lg); color:var(--color-text-secondary); }
.studio-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.studio-pills span { padding:5px 12px; border:1px solid var(--color-border); border-radius:20px; font-size:var(--font-size-xs); background:var(--color-surface); }
.studio-notice { border-left:3px solid var(--color-action-primary); padding:12px 18px; background:var(--color-surface); font-size:var(--font-size-sm); }
.studio-toolbar,.studio-result-head { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:20px; margin:28px 0 18px; }
.studio-toolbar>label { flex:1; min-width:200px; }
.studio-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.studio-columns { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.studio-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; padding:26px; margin-bottom:24px; box-shadow:var(--shadow-sm); min-width:0; }
.studio-card h2 { font-size:var(--font-size-xl); letter-spacing:var(--letter-spacing-tight); line-height:var(--line-height-tight); margin:0 0 16px; }
.studio-card p { color:var(--color-text-secondary); font-size:var(--font-size-sm); margin:12px 0; }
.studio-page label { display:block; font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); }
.studio-page input:not([type=checkbox]),.studio-page select { box-sizing:border-box; display:block; width:100%; padding:10px 12px; border:1px solid var(--color-border); border-radius:8px; font:inherit; color:var(--color-text-primary); background:var(--color-surface); margin:5px 0 14px; min-width:0; }
.studio-page .studio-wrap button,.studio-local-header button,.studio-page dialog button { border:1px solid var(--color-action-primary); border-radius:8px; background:var(--color-action-primary); color:var(--color-text-on-accent); padding:10px 16px; font:inherit; font-size:var(--font-size-sm); cursor:pointer; font-weight:var(--font-weight-semibold); }
.studio-page .studio-wrap button.studio-secondary,.studio-page dialog button.studio-secondary { background:var(--color-surface); border-color:var(--color-border); color:var(--color-text-primary); }
.studio-page button:disabled { opacity:.5; cursor:not-allowed; }
.studio-page button:focus-visible,.studio-page input:focus-visible,.studio-page select:focus-visible,.studio-page summary:focus-visible { outline:3px solid var(--color-action-primary); outline-offset:3px; }
.studio-page details { margin-top:20px; }
.studio-page summary { cursor:pointer; font-weight:var(--font-weight-semibold); font-size:var(--font-size-base); }
.studio-page details p,.studio-page details li { font-size:var(--font-size-sm); }
.studio-page details label { margin-top:14px; }
.studio-source-list { list-style:none; padding:0; }
.studio-source-list li { display:flex; align-items:center; gap:12px; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--color-border); }
.studio-source-list label { overflow-wrap:anywhere; flex:1; }
.studio-page .studio-source-list button { font-size:var(--font-size-xs); padding:5px 8px; }
.studio-source-list input { margin-right:8px; }
.studio-result-head { margin-top:0; }
.studio-result-head label { max-width:100%; }
.studio-finding { border-top:1px solid var(--color-border); padding:22px 0; }
.studio-finding h3 { margin:0 0 6px; font-size:var(--font-size-lg); }
.studio-finding .studio-tag { font-size:var(--font-size-xs); text-transform:uppercase; letter-spacing:var(--letter-spacing-wide); color:var(--color-text-secondary); margin-bottom:4px; }
.studio-finding blockquote { margin:12px 0 0; border-left:3px solid var(--color-action-primary); padding:10px 16px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--font-size-sm); background:var(--color-background); }
.studio-muted,#studio-selection { color:var(--color-text-secondary); font-size:var(--font-size-xs)!important; }
#studio-status { min-height:26px; font-size:var(--font-size-sm); }
#studio-status[data-error=yes],#studio-file-error { color:var(--color-danger); }
.studio-page code { overflow-wrap:anywhere; font-family:var(--font-family-mono); }
.studio-page input::placeholder { color:var(--color-text-muted); opacity:1; }
.studio-page input[type=checkbox] { accent-color:var(--color-action-primary); }
.studio-page input::file-selector-button { font:inherit; color:var(--color-text-primary); background:var(--color-surface-hover); border:1px solid var(--color-border); border-radius:var(--radius-small); padding:var(--space-xs) var(--space-sm); }
.studio-wrap a { color:var(--color-action-secondary); }
.studio-page dialog { margin:auto; box-sizing:border-box; width:min(560px,calc(100% - 32px)); max-height:90vh; overflow:auto; border:1px solid var(--color-border); border-radius:14px; padding:26px; background:var(--color-surface-sunken); color:var(--color-text-primary); }
.studio-page dialog::backdrop { background:var(--color-overlay); }
.studio-page dialog h2 { margin-top:0; }
@media(max-width:700px) { .studio-columns { grid-template-columns:1fr; gap:0; } .studio-wrap { padding:106px 16px 40px; } .studio-card { padding:20px; } .studio-toolbar { align-items:stretch; } .studio-toolbar .studio-buttons { width:100%; } .studio-result-head { display:block; } }