.studio { padding-block: clamp(35px,6vw,88px) 70px }
.intro { max-width: 730px; margin-bottom: 32px }
.intro h1 { font: 760 clamp(2.8rem,6vw,5.25rem)/.98 Outfit,sans-serif; letter-spacing: -.065em }
.intro h1 em { color: var(--purple); font-style: normal }
.intro p, .install p { margin-top: 16px; max-width: 66ch }
.bench { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,1fr); border: 1px solid var(--line); border-radius: 24px; overflow:hidden; background: #fffdf7 }
.source { padding: 24px; border-right:1px solid var(--line) }
.editor-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.editor-bar label, .tryout h2 { font:650 1.1rem Outfit,sans-serif }
.editor-bar select { padding:7px 15px; border-radius:10px; background:var(--paper); border:1px solid var(--line); color:var(--ink); font:inherit }
.file-label { display:block; margin:18px 0 6px; font:600 .85rem monospace; color:var(--purple) }
#file-picker:not([hidden]) { display:flex; gap:6px; margin:16px 0 4px }
#file-picker button { background:transparent; border:1px solid var(--line); padding:6px 12px; border-radius:8px; font:600 .85rem ui-monospace,monospace }
#file-picker button[aria-pressed="true"] { color:var(--purple); background:#e9e3fa; border-color:var(--purple) }
.reference pre { white-space:pre-wrap; background:#eeeaf6; padding:12px 16px; border-radius:10px }
.source textarea { display:block; width:100%; min-height:325px; resize:vertical; padding:14px; background:#f7f5ee; color:#2c2940; border:1px solid var(--line); border-radius:12px; font: .88rem/1.55 ui-monospace,monospace; tab-size:2 }
.tryout { display:grid; align-content:center; justify-items:center; padding:24px; background:#e9e3fa }
.tryout h2 { margin:0 0 12px }
.preview-theme { display:flex; gap:14px; align-items:center; padding:0; border:0; margin:0 0 12px; font-size:.84rem }
.preview-theme legend { padding:0; margin-bottom:3px; font-size:.84rem; font-weight:600 }
.preview-theme label { display:inline-flex; align-items:center; gap:4px; cursor:pointer }
.preview-theme input { accent-color:var(--purple) }
.mini-display { width:min(100%,300px); min-height:200px; border:7px solid #484457; border-radius:18px; background:var(--widget-background); color:var(--widget-text); padding:12px; text-align:center; display:flex; flex-direction:column; gap:8px }
#screen-title { align-self:stretch; border-left:3px solid var(--widget-accent); padding-left:8px; text-align:left; font-weight:600; overflow-wrap:anywhere }
.mini-card { flex:1; background:var(--widget-surface); border:1px solid var(--widget-edge); border-radius:7px; padding:9px; display:flex; flex-direction:column; align-items:center; justify-content:center }
.readout { font:700 clamp(1.45rem,3.2vw,2.4rem)/1.05 Outfit,sans-serif; color:var(--widget-accent); overflow-wrap:anywhere; max-width:100% }
#subtitle { margin-top:4px; font-size:.82rem; color:var(--widget-muted); overflow-wrap:anywhere }
#subtitle:empty, #actions:empty { display:none }
#actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:center }
#actions button { flex:1; border:1px solid var(--widget-accent); background:var(--widget-surface); color:var(--widget-text); border-radius:8px; padding:4px 8px; font-size:.88rem; overflow-wrap:anywhere }
#calendar-grid:not([hidden]) { align-self:stretch; display:grid; grid-template-columns:repeat(7,1fr); gap:1px; font-size:.75rem; margin:6px 0 }
#calendar-grid b { color:var(--widget-muted) } #calendar-grid .today { background:var(--widget-accent); color:var(--widget-background); border-radius:4px }
#theme-note { font-size:.82rem; max-width:32ch; text-align:center; margin:8px 0 0 }
.tryout #feedback { font-size:.85rem; margin:12px 0; min-height:1.5em; overflow-wrap:anywhere; text-align:center }
#feedback.invalid { color:#86152b }
.tryout .button { border:0 }.tryout .button:disabled { opacity:.55 }
.widget-rights { width:min(100%,300px); margin-bottom:12px; font-size:.84rem }.widget-rights summary { cursor:pointer }.widget-rights label,.widget-rights small { display:block;margin-top:8px }.widget-rights textarea { width:100%;border:1px solid var(--line);border-radius:8px;padding:6px;resize:vertical }
.install { display:flex; align-items:center; gap:22px; justify-content:space-between; padding:30px 0; border-bottom:1px solid var(--line) }
.studio .install h2,.reference h2 { font:700 clamp(1.6rem,3vw,2.5rem)/1.06 Outfit,sans-serif; letter-spacing:-.044em }
.sdk { background:var(--lime); white-space:nowrap; text-decoration:none }
.reference { max-width:870px; margin:36px 0 0 }.reference h2 { margin-bottom:20px }
.reference details { border-bottom:1px solid var(--line); padding:14px 0 }.reference summary { cursor:pointer; font-weight:650 }
.reference p,.reference dl { margin:12px 0 }.reference code { font-size:.91em; color:var(--purple); overflow-wrap:anywhere }
.reference dt { font-weight:650 }.reference dd { margin:0 0 10px }
@media(max-width:760px){.bench{grid-template-columns:1fr}.source{border-right:0;border-bottom:1px solid var(--line)}.install{align-items:flex-start;flex-direction:column}.source textarea{min-height:245px}.studio{padding-top:34px}}