:root{--bg: #14110c;--panel: #1d1913;--ink: #f2e6d2;--muted: #b6a98a;--accent: #c0843a;--line: #3a3127}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.wrap{max-width:600px;margin:0 auto;padding:16px 12px 40px}header h1{margin:0;font-size:28px;letter-spacing:.5px;color:var(--accent)}header .sub{margin:4px 0 12px;color:var(--muted);font-size:13px}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.seg button{background:var(--panel);color:var(--muted);border:0;padding:7px 12px;font-size:13px;cursor:pointer}.seg button+button{border-left:1px solid var(--line)}.seg button.on{background:var(--accent);color:#1a1206;font-weight:600}.btn{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-size:13px;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#1a1206;border-color:var(--accent);font-weight:600}.principle{margin:6px 0 8px}.pname{display:inline-block;font-weight:700;color:var(--accent);margin-right:8px}.phint{color:var(--muted);font-size:13px}canvas{display:block;width:100%;max-width:540px;aspect-ratio:1 / 1;height:auto;margin:0 auto;border:1px solid var(--line);border-radius:10px;touch-action:none;background:#000;cursor:grab}canvas:active{cursor:grabbing}.szlabel{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.szlabel input[type=range]{width:140px;accent-color:var(--accent)}.status{margin:10px 0;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;font-size:14px;min-height:20px}.help{color:var(--muted);font-size:12px;line-height:1.5}