:root{--color-bg:#f5f3ef;--color-surface:#fff;--color-border:#e2ddd4;--color-text:#2b2620;--color-text-muted:#8a8378;--color-accent:#8a5a2b;--font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--space-sm:8px;--space-md:16px;--space-lg:24px;--radius:10px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--font-family);color:var(--color-text);background-color:var(--color-bg)}#root{height:100%}.app{flex-direction:column;min-height:100%;display:flex}.app__header{padding:var(--space-lg);border-bottom:1px solid var(--color-border);background-color:var(--color-surface)}.app__title{color:var(--color-accent);margin:0;font-size:28px}.app__subtitle{margin:var(--space-sm) 0 0;color:var(--color-text-muted)}.app__main{gap:var(--space-lg);padding:var(--space-lg);flex:1;grid-template-columns:320px 1fr;display:grid}@media (width<=768px){.app__main{grid-template-columns:1fr}}.panel,.preview{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-lg)}.panel__title,.preview__title{margin:0 0 var(--space-md);font-size:18px}.panel__hint,.preview__hint{color:var(--color-text-muted);margin:0}.app__footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:14px}