:root{--bg: #f4f4f2;--panel: #ffffff;--text: #1c1c1c;--muted: #6b6b6b;--line: #e2e2df;--accent: #1c1c1c;--radius: 10px;--panel-w: 360px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--text)}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--bg)}.app{display:grid;grid-template-columns:1fr var(--panel-w);height:100%}.viewport{position:relative;min-width:0;min-height:0}.viewport canvas{display:block;touch-action:none}.panel{overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:20px 20px 40px}.panel-header h1{font-size:18px;margin:0 0 2px;letter-spacing:.02em}.panel-header p{margin:0 0 16px;color:var(--muted)}.panel-section{border-top:1px solid var(--line);padding:14px 0}.panel-section h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;flex:1}.field span{font-size:12px;color:var(--muted)}.field input,.field select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fafaf9}.row{display:flex;gap:10px}.hint{margin:-4px 0 8px;font-size:12px;color:var(--muted)}.notice{margin:8px 0 0;font-size:12px;color:var(--muted)}.choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.choice{font:inherit;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fafaf9;cursor:pointer}.choice.small{padding:6px 10px;font-size:12px}.choice.active,.choice.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.choice:hover:not(.active){border-color:#bdbdb8}.app.shot{display:block}.app.shot .viewport{width:1200px;height:800px}@media(max-width:860px){.app{grid-template-columns:1fr;grid-template-rows:1fr auto}.panel{max-height:46vh;border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0}}