:root{--accent: #f0d83a;--accent-ink: #1d1d1f;--accent-hover: #f5e45c;--blue: #3554af;--green: #1d9b54;--red: #e10328;--paper: #ffffff;--bg: #f5f5f7;--surface: #ffffff;--surface-hover: #f5f5f7;--ink: #1d1d1f;--ink-secondary: rgba(0, 0, 0, .8);--ink-dim: rgba(0, 0, 0, .48);--line: rgba(0, 0, 0, .08);--line-strong: #d2d2d7;--shadow-card: 0 1px 3px rgba(0, 0, 0, .04), 0 3px 12px rgba(0, 0, 0, .06);--radius-sm: 8px;--radius-md: 12px;--radius-pill: 980px;--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(--bg);color:var(--ink);letter-spacing:-.022em;-webkit-font-smoothing:antialiased}button{font-family:inherit;color:inherit}input,select{font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:6px 10px}input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #3554af33}input[type=radio],input[type=checkbox]{accent-color:var(--blue)}:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.app-header{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#ffffffb8;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);z-index:10}.logo{display:flex;gap:3px;align-items:center}.logo .bead{width:14px;height:14px}.brand{font-size:17px;font-weight:600;letter-spacing:-.022em;color:var(--ink)}.brand-sub{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink-dim);letter-spacing:.08em;text-transform:uppercase}.header-spacer{flex:1}.main{max-width:980px;margin:0 auto;padding:24px 16px 48px;display:flex;flex-direction:column;gap:16px}.card{background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:20px 24px}.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius-sm);padding:8px 16px;font-size:14px;color:var(--ink);cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .05s ease}.btn:hover{background:var(--surface-hover)}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}.btn-primary:hover{background:var(--accent-hover);border-color:transparent}.btn-pill{background:transparent;color:var(--blue);border:1px solid var(--blue);border-radius:var(--radius-pill);padding:6px 16px;font-size:14px;cursor:pointer;transition:background .15s ease}.btn-pill:hover{background:#3554af0f}.btn-danger{color:var(--red);border-color:var(--line-strong);background:var(--surface)}.btn-danger:hover{background:#e103280f}.params{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--ink-secondary)}.param-field{display:inline-flex;align-items:center;gap:6px}.param-field input[type=number]{width:64px;font-family:var(--font-mono)}.bead{position:relative;width:20px;height:20px;border-radius:6px;border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 2px 2px #ffffffbf,inset 0 -2px 3px #00000047,0 1px 2px #0000001f;padding:0}.logo .bead:after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:#0000004d}.canvas-wrap{overflow-x:auto;text-align:center}.canvas-wrap canvas{border-radius:var(--radius-sm);box-shadow:0 2px 8px #00000014;max-width:100%}.grid-meta{color:var(--ink-dim);font-size:12px;font-family:var(--font-mono);margin:12px 0 0}.counts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.counts-label{font-size:12px;font-weight:600;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase}.count-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:3px 12px 3px 5px;font-size:13px;color:var(--ink);cursor:pointer;transition:border-color .15s ease}.count-chip:hover{border-color:var(--blue)}.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-id{font-family:var(--font-mono)}.count-num{font-family:var(--font-mono);color:var(--ink-dim)}.sheet-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.save-row{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.save-row input{flex:1;max-width:240px}.workspace h3{margin:0 0 12px;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.022em}.work-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.work-row:last-child{border-bottom:none}.work-thumb{width:28px;height:28px;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface-hover);border:1px solid var(--line)}.work-open{flex:1;text-align:left;background:none;border:none;font-size:14px;color:var(--ink);cursor:pointer;padding:4px 0}.work-open:hover{color:var(--blue)}.empty{color:var(--ink-dim);font-size:15px;text-align:center;padding:16px 0;margin:0}.rename-row{display:flex;gap:8px;align-items:center}.rename-row input{flex:1;max-width:240px}@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,.btn-pill,.btn-danger{transition:none}}.crop-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}.crop-stage{position:relative;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-hover);touch-action:none}.crop-canvas{display:block}.crop-box{position:absolute;border:2px solid var(--accent);box-shadow:0 0 0 9999px #00000080;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}