.theme-builder {

.topbar{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border)}.brand{font-size:1.3rem;font-weight:650;color:var(--color-text);text-decoration:none}.topbar small{color:var(--color-text-muted)}.docs-appearance-toggle{margin-left:auto;inline-size:var(--control-height-sm);block-size:var(--control-height-sm);min-block-size:var(--control-height-sm);padding:0;color:var(--color-text-muted)}.docs-appearance-toggle [hidden]{display:none}
main{max-width:100rem;margin:auto;padding:var(--space-xl) var(--space-lg)}.intro{display:flex;justify-content:space-between;align-items:end;gap:var(--space-md);margin-bottom:var(--space-xl)}h1{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.045em;margin:0}.intro p{color:var(--color-text-muted);margin:var(--space-xs) 0 0}.workspace{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:var(--space-xl);align-items:start}.controls{display:grid;gap:var(--space-lg)}.controls fieldset{padding:0;border:0;margin:0;min-width:0}.controls legend,.field-title{font-size:.8125rem;font-weight:600;margin-bottom:var(--space-xs)}.presets{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs)}.presets button{justify-content:start;gap:var(--space-xs);font-size:.8125rem}.presets button[aria-pressed=true]{background:var(--color-surface-raised);border-color:var(--color-text)}.theme-swatch{width:.8rem;height:.8rem;background:var(--swatch);border-radius:var(--radius-sm);flex-shrink:0}.control{display:grid;align-content:start;gap:var(--space-xs)}.control label{font-size:.8125rem;font-weight:600}.control select{width:100%}.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs)}.hint{font-size:.75rem;color:var(--color-text-muted);margin:0}.preview-shell{border:1px solid var(--color-border);min-width:0;background:var(--color-surface-raised)}.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);background:var(--color-surface)}.preview-bar p{margin:0;font-size:.8125rem}.preview-bar label{font-size:.75rem;display:flex;align-items:center;gap:var(--space-xs)}.canvas{padding:var(--space-lg);overflow:auto}iframe{display:block;width:100%;height:870px;margin:auto;border:1px solid var(--color-border);background:var(--color-surface)}.canvas[data-narrow=true] iframe{width:390px;max-width:100%}.footer-note{margin-top:var(--space-md);display:flex;justify-content:space-between;gap:var(--space-md);font-size:.75rem;color:var(--color-text-muted)}dialog{width:min(42rem,calc(100vw - 2rem));max-height:85svh;overflow:auto}dialog header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}dialog h2{margin:0}#css-output{width:100%;height:22rem;font-family:var(--font-mono);font-size:.8125rem;white-space:pre}#copy-status{min-height:1.5em;font-size:.8125rem}.actions{display:flex;gap:var(--space-xs);flex-wrap:wrap}
@media(max-width:850px){.workspace{grid-template-columns:1fr;gap:var(--space-lg)}.controls{grid-template-columns:1fr 1fr;gap:var(--space-md)}.controls>fieldset,.controls>.hint{grid-column:1/-1}.presets{grid-template-columns:repeat(4,1fr)}.canvas{padding:var(--space-xs)}.intro{align-items:start}.topbar small{display:none}}
@media(max-width:480px){main{padding:var(--space-lg) var(--space-md)}.intro{flex-direction:column}.presets{grid-template-columns:1fr 1fr}.topbar{padding:var(--space-sm) var(--space-md)}.footer-note{flex-direction:column;gap:var(--space-xs)}}


.recipe-toolbar{display:flex;justify-content:space-between;align-items:end;gap:var(--space-sm);margin-bottom:var(--space-md)}
.recipe-toolbar>div{display:grid;gap:var(--space-xs)}
.recipe-toolbar label{font-size:.75rem;color:var(--color-text-muted)}
.canvas{padding:var(--space-sm)}
#html-output{width:100%;height:24rem;font-family:var(--font-mono);font-size:.8125rem}
@media(max-width:600px){.recipe-toolbar{flex-wrap:wrap}}

.accent-custom{display:flex;align-items:center;gap:var(--space-sm)}
.accent-custom input[type="color"]{inline-size:var(--control-height);block-size:var(--control-height);padding:var(--space-2xs);flex:none;cursor:pointer}
.accent-custom label{display:grid;gap:var(--space-2xs);font-weight:400;cursor:pointer}
.accent-custom output{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-muted)}
}