:root{--bg: #f5e6c8;--fg: #2b2214;--accent: #d97748;--card: #fff8ec;--radius: .75rem;--space-1: .5rem;--space-2: 1rem;--space-3: 1.5rem;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--fg);font-family:var(--font-body)}.studio{height:100%;display:grid;grid-template-rows:auto 1fr}header{padding:var(--space-2) var(--space-3);background:var(--card);border-bottom:1px solid #e5d7b8}header h1{font-size:1.25rem}header p{font-size:.875rem;color:#7a6d4f}main{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,24rem);gap:var(--space-2);padding:var(--space-2);min-height:0}.preview{background:var(--card);border-radius:var(--radius);overflow:hidden;min-height:0}.preview .preview-canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}.editor{background:var(--card);border-radius:var(--radius);padding:var(--space-2);overflow-y:auto}.editor h2{font-size:1rem;margin:var(--space-2) 0 var(--space-1)}.editor h2:first-child{margin-top:0}.hint{color:#7a6d4f;font-size:.875rem;margin-top:var(--space-2)}.persona-picker{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:var(--space-1)}.chip{border:1px solid #d9cba0;background:var(--bg);color:var(--fg);padding:.375rem .75rem;border-radius:999px;font:inherit;cursor:pointer}.chip-active{background:var(--accent);color:#fff;border-color:var(--accent)}.persona-desc{font-size:.875rem;color:#7a6d4f;line-height:1.35;min-height:2.4em}.slider{display:block;margin-top:var(--space-1)}.slider input[type=range]{width:100%;margin:.375rem 0}.slider-labels{display:flex;justify-content:space-between;font-size:.75rem;color:#7a6d4f;font-style:italic}.slider output{display:block;text-align:right;font-size:.75rem;color:#7a6d4f;font-variant-numeric:tabular-nums}@media (max-width: 720px){main{grid-template-columns:1fr;grid-template-rows:minmax(50vh,1fr) auto}}