:root{--bg: #14151a;--panel: #1f2128;--ink: #e8e9ee;--muted: #9aa0ad;--accent: #c0533a;--accent-ink: #fff}*{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}#app{display:flex;justify-content:center;padding:16px}.ss-wrap{width:100%;max-width:540px;display:flex;flex-direction:column;gap:12px}.ss-header h1{margin:0;font-size:1.7rem;letter-spacing:.04em;background:linear-gradient(90deg,#c0533a,#d8a13a,#4aa3c0,#7a5ad8);-webkit-background-clip:text;background-clip:text;color:transparent}.ss-sub{margin:2px 0 0;color:var(--muted);font-size:.9rem}.ss-controls{display:flex;flex-wrap:wrap;gap:8px}.ss-btn{background:var(--panel);color:var(--ink);border:1px solid #343844;border-radius:8px;padding:8px 12px;font-size:.9rem;cursor:pointer;transition:background .15s,border-color .15s}.ss-btn:hover{background:#2a2d36;border-color:var(--accent)}.ss-btn.ss-next{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}.ss-status{display:flex;flex-wrap:wrap;gap:10px;font-size:.82rem;color:var(--muted);background:var(--panel);padding:8px 10px;border-radius:8px}.ss-status span{white-space:nowrap}.ss-canvas{width:100%;height:auto;aspect-ratio:1 / 1;background:#1b1d23;border-radius:10px;border:1px solid #2c2f38;touch-action:none}.ss-msg{min-height:1.2em;color:var(--accent);font-weight:600;font-size:.95rem}.ss-footer{color:var(--muted);font-size:.82rem}