.sa{flex-direction:column;align-items:center;gap:10px;display:flex}.sa-stage{gap:6px;line-height:0;display:flex}.sa-status{color:var(--muted);margin:0;font-size:13px}.sa-controls{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.sa-btn{border-radius:var(--radius-md);border:1px solid var(--line);min-width:40px;height:40px;color:var(--text);font:600 13px var(--font-ui);cursor:pointer;background:0 0;place-items:center;padding:0 10px;transition:border-color .15s,background .15s;display:grid}.sa-btn:hover:not(:disabled){border-color:var(--accent)}.sa-btn:disabled{opacity:.35;cursor:default}.sa-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sa-btn svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.sa-main{background:var(--accent);border-color:var(--accent);color:#fff}.sa-main svg{fill:currentColor}.sa-main:hover:not(:disabled){background:var(--accent-2);border-color:var(--accent-2)}.sa-text.on{background:var(--surface2);border-color:var(--muted)}
.trc{flex-direction:column;align-items:center;gap:10px;display:flex}.trc-modes{border:1px solid var(--line);border-radius:var(--radius-md);gap:2px;padding:3px;display:inline-flex}.trc-mode{color:var(--muted);font:600 12.5px var(--font-ui);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:6px 12px}.trc-mode.on{background:var(--surface2);color:var(--text)}.trc-mode:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.trc-stage{gap:6px;line-height:0;display:flex}.trc-pad{touch-action:none;-webkit-user-select:none;user-select:none;opacity:.55}.trc-pad.done{opacity:1}.trc-pad.active{cursor:crosshair;opacity:1}.trc-pad.active .sd-grid rect{stroke:var(--muted)}.trc-guide path{stroke:color-mix(in oklab,var(--line),var(--text)12%)}.trc-start circle{fill:var(--accent)}.trc-start text{fill:#fff;font:700 6.5px var(--font-ui);text-anchor:middle;pointer-events:none}.trc-user{fill:none;stroke:var(--warm);stroke-width:4.5px;pointer-events:none}.trc-failed{stroke:var(--accent);animation:.7s ease-out forwards trc-fade}@keyframes trc-fade{0%{opacity:.9}to{opacity:0}}.trc-feedback{text-align:center;max-width:30ch;min-height:2.6em;color:var(--muted);margin:0;font-size:13.5px;line-height:1.35}.trc-feedback.ok{color:var(--green)}.trc-feedback.bad{color:var(--accent)}.trc-actions{gap:8px;display:flex}
.sp{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);flex-direction:column;gap:14px;padding:18px;display:flex}.sp-head{align-items:center;gap:8px;display:flex}.sp-char{align-items:center;gap:12px;margin-right:auto;display:flex}.sp-char b{font-family:var(--font-serif);color:var(--text);font-size:40px;line-height:1}.sp-char span{color:var(--muted);flex-direction:column;font-size:12.5px;display:flex}.sp-char strong{color:var(--text);font-size:16px}.sp-icon{border:1px solid var(--line);width:38px;height:38px;color:var(--text);cursor:pointer;background:0 0;border-radius:50%;place-items:center;display:grid}.sp-icon svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.sp-icon:hover,.sp-icon.on{border-color:var(--accent);color:var(--accent)}.sp-close{display:none}.sp-tabs{border:1px solid var(--line);border-radius:11px;grid-template-columns:1fr 1fr;padding:3px;display:grid}.sp-tabs button{color:var(--muted);font:600 14px var(--font-ui);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:8px}.sp-tabs button.on{background:var(--accent);color:#fff}.sp-body{flex-direction:column;justify-content:center;height:364px;display:flex}.sp-picker{border-top:1px solid var(--line-soft);flex-wrap:wrap;gap:5px;max-height:132px;padding-top:12px;display:flex;overflow-y:auto}.sp-picker button{border:1px solid var(--line);min-width:38px;height:36px;color:var(--text);font-family:var(--font-serif);cursor:pointer;background:0 0;border-radius:8px;padding:0 6px;font-size:17px}.sp-picker button:hover{border-color:var(--accent)}.sp-picker button.on{background:var(--accent);border-color:var(--accent);color:#fff}.sp button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sp-open-btn{border:1px solid var(--line);color:var(--text);font:600 13px var(--font-ui);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:7px 14px}.sp-open-btn:hover{border-color:var(--accent);color:var(--accent)}.sp-fab,.sp-backdrop{display:none}@media (max-width:959px){.sp{z-index:60;overscroll-behavior:contain;max-height:92dvh;padding-bottom:calc(18px + env(safe-area-inset-bottom));box-shadow:var(--shadow);visibility:hidden;border-radius:18px 18px 0 0;transition:transform .25s,visibility 0s linear .25s;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(105%)}.sp.open{visibility:visible;transition:transform .25s;transform:none}.sp-close{display:grid}.sp-backdrop{z-index:59;touch-action:none;background:#1d1a1673;display:block;position:fixed;inset:0}.sp-fab{z-index:55;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font:600 14px var(--font-ui);box-shadow:var(--shadow);cursor:pointer;border:0;align-items:center;gap:8px;padding:10px 18px;display:inline-flex;position:fixed;bottom:16px;right:16px}.sp-fab span{font-family:var(--font-serif);font-size:18px}}