:root{--bg: #ffffff;--fg: #0a0a0a;--muted: #8a8a8a;--line: #e2e2e2;--panel: #fafafa;--accent: #0a0a0a;--radius: 10px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg)}#app{height:calc(100vh - 94px)}.footer{height:36px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:12px;color:var(--muted)}.footer a{color:var(--fg);text-decoration:none;font-weight:600}.footer a:hover{text-decoration:underline}@media (max-width: 720px){.footer span{display:none}.footer{justify-content:center}}.topbar{height:56px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px}.brand{font-weight:700;letter-spacing:-.02em}.topbar nav{display:flex;gap:6px}.topbar nav a{text-decoration:none;color:var(--muted);padding:6px 12px;border-radius:var(--radius);font-weight:600;font-size:14px}.topbar nav a.active{color:var(--fg);background:var(--panel)}.topbar nav a:hover{color:var(--fg)}.editor,.simulate{display:grid;grid-template-columns:1fr 320px;height:100%}.stage{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,#fff,#f3f3f3);cursor:crosshair;-webkit-user-select:none;user-select:none;touch-action:none}.target,.ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:700;line-height:1;color:#000;pointer-events:none}.target{z-index:2}.ghost{z-index:1;color:#000}.ghost.preview{z-index:3;opacity:.2}.stage .hint{position:absolute;left:50%;bottom:18px;transform:translate(-50%);font-size:12px;color:var(--muted);background:#fffc;padding:6px 12px;border-radius:999px;pointer-events:none;white-space:nowrap}.panel{border-left:1px solid var(--line);background:var(--panel);padding:20px;overflow-y:auto}.panel h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px}.panel hr{border:none;border-top:1px solid var(--line);margin:22px 0}.field{display:block;margin-bottom:14px;font-size:13px}.field>span{display:block;margin-bottom:6px;color:#333}.field input[type=text],.field select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;background:#fff;color:var(--fg)}.field input[type=range]{width:100%;accent-color:var(--accent)}.checkbox{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:14px}.row{display:flex;gap:8px;margin-bottom:14px}.row>*{flex:1}button{font:inherit;font-weight:600;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--fg);cursor:pointer}button:hover{border-color:var(--fg)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--fg);color:#fff;border-color:var(--fg)}button.primary:hover{opacity:.85}button.danger:hover{border-color:#c00;color:#c00}.readout{font-size:13px;color:#333}.cta{display:block;margin-top:16px;text-align:center;text-decoration:none;font-weight:600;color:var(--fg);padding:10px;border:1px dashed var(--line);border-radius:var(--radius)}.cta:hover{border-color:var(--fg)}.note{font-size:12px;color:var(--muted);margin-top:14px}.viewer{position:relative;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;background:repeating-conic-gradient(#f6f6f6,#f6f6f6 25%,#fff 0%,#fff 50%) 50% / 24px 24px}.viewer.drag{outline:2px dashed var(--fg);outline-offset:-10px}.dropzone{border:2px dashed var(--line);border-radius:var(--radius);padding:60px 40px;text-align:center;color:var(--muted);cursor:pointer;background:#fff}.dropzone:hover{border-color:var(--fg);color:var(--fg)}.canvas-wrap{display:flex;gap:18px;max-width:100%}.canvas-wrap .pane{margin:0}.canvas-wrap figcaption{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.canvas-wrap canvas{max-width:100%;max-height:calc(100vh - 140px);border:1px solid var(--line);border-radius:6px;background:#fff}.canvas-wrap.split canvas{max-width:46vw}.panel-toggle{display:none}@media (max-width: 720px){.editor,.simulate{grid-template-columns:1fr;grid-template-rows:1fr auto}.panel{border-left:none;border-top:1px solid var(--line);padding-top:0;max-height:70vh}.panel-toggle{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;width:calc(100% + 40px);margin:0 -20px 14px;padding:14px 20px;border:none;border-bottom:1px solid var(--line);border-radius:0;background:var(--panel);font-weight:700;font-size:14px}.panel-toggle:hover{border-color:transparent;border-bottom-color:var(--line)}.panel-toggle .chev{color:var(--muted)}.panel.collapsed{max-height:none;overflow:visible}.panel.collapsed>:not(.panel-toggle){display:none}}