: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-bottom:var(--space-1)}.hint{color:#7a6d4f;font-size:.875rem}@media (max-width: 720px){main{grid-template-columns:1fr;grid-template-rows:minmax(50vh,1fr) auto}}