:root{--board: #2c2c2c;--panel: #3a3a3c;--ink: #fbfbfb;--ink-dim: #b4b4b4;--line: #55565a;--accent: #f0d83a;--accent-ink: #2c2c2c;--blue: #3554af;--green: #1d9b54;--red: #e10328;--paper: #ffffff;--font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace}*{box-sizing:border-box}html,body{margin:0}body{font-family:var(--font-body);background:var(--board);color:var(--ink);-webkit-font-smoothing:antialiased}button{font-family:inherit;color:inherit}input,select{font-family:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 8px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--board);z-index:10}.logo{display:flex;gap:3px;align-items:center}.logo .bead{width:14px;height:14px}.brand{font-weight:700;letter-spacing:.02em}.brand-sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-dim);letter-spacing:.08em;text-transform:uppercase}.header-spacer{flex:1}.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 14px;font-size:14px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .05s ease}.btn:hover{border-color:var(--ink-dim)}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}.btn-primary:hover{background:#f5e45c;border-color:transparent}.params{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:8px 16px;font-size:13px;color:var(--ink-dim)}.param-field{display:inline-flex;align-items:center;gap:6px}.param-field input[type=number]{width:64px;font-family:var(--font-mono)}.bead{width:20px;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 2px 2px #ffffff59,inset 0 -2px 3px #0000004d;padding:0}.canvas-wrap{padding:16px;overflow-x:auto;text-align:center}.canvas-wrap canvas{border-radius:4px;box-shadow:0 8px 32px #00000073;max-width:100%}.grid-meta{color:var(--ink-dim);font-size:12px;font-family:var(--font-mono);margin:8px 0 0}.counts{padding:10px 16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center}.counts-label{font-size:12px;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase}.count-chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 4px;font-size:13px;cursor:pointer;transition:border-color .15s ease}.count-chip:hover{border-color:var(--ink-dim)}.count-chip.highlight{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.count-chip .bead{width:14px;height:14px;border-radius:4px;cursor:default}.count-num{font-family:var(--font-mono);color:var(--ink-dim)}.sheet-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 16px;border-top:1px solid var(--line)}.save-row{display:flex;gap:8px;align-items:center;padding:10px 16px;border-top:1px solid var(--line)}.save-row input{flex:1;max-width:240px}.workspace{padding:6px 16px 24px}.workspace h3{margin:10px 0 6px;font-size:14px;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase}.work-row{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}.work-thumb{width:24px;height:24px;border-radius:4px;object-fit:cover;background:var(--panel);border:1px solid var(--line)}.work-open{flex:1;text-align:left;background:none;border:none;font-size:14px;cursor:pointer;padding:4px 0}.work-open:hover{color:var(--accent)}.empty{color:var(--ink-dim);font-size:14px;padding:12px 0}.rename-row{display:flex;gap:8px;align-items:center;padding:8px 16px}@keyframes bead-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.canvas-wrap canvas{animation:bead-in .25s ease}@media (prefers-reduced-motion: reduce){.canvas-wrap canvas{animation:none}.btn{transition:none}}.crop-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px}.crop-stage{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel);touch-action:none}.crop-canvas{display:block}.crop-box{position:absolute;border:2px solid var(--accent);box-shadow:0 0 0 9999px #1414148c;touch-action:none}.crop-handle{position:absolute;width:12px;height:12px;background:var(--accent);border:1px solid #fff;border-radius:2px}.crop-nw{left:0;top:0;cursor:nwse-resize}.crop-ne{right:0;top:0;cursor:nesw-resize}.crop-sw{left:0;bottom:0;cursor:nesw-resize}.crop-se{right:0;bottom:0;cursor:nwse-resize}.crop-actions{display:flex;gap:8px}