:root{color-scheme:dark;--bg: #0d0d0f;--panel: #16171b;--panel-2: #1d1f24;--border: #2a2c33;--text: #e7e8ec;--muted: #8f93a0;--accent: #ff4655;--accent-2: #ff8a3d;--good: #4ade80;--warn: #fbbf24;--bad: #ef4444;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;background:var(--bg);color:var(--text);min-height:100vh}.page{max-width:1100px;margin:0 auto;padding:56px 24px 80px}header h1{font-size:34px;letter-spacing:-.02em;margin:0 0 8px;font-weight:700}header h1 .arrow{color:var(--accent);margin:0 6px}header .sub{color:var(--muted);margin:0 0 28px;font-size:15px}header code{background:var(--panel-2);padding:2px 6px;border-radius:4px;font-size:13px}.direction-toggle{display:inline-flex;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:4px;margin-bottom:16px;gap:2px}.direction-toggle button{background:transparent;color:var(--muted);padding:8px 18px;border-radius:999px;font-size:13px;font-weight:500;transition:background .15s,color .15s}.direction-toggle button:hover{background:var(--panel-2);color:var(--text)}.direction-toggle button.on{background:var(--accent);color:#fff}.direction-toggle button.on:hover{background:var(--accent)}.input-row{display:flex;gap:8px;margin-bottom:20px}.input-row input{flex:1;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font:inherit;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.02em}.input-row input:focus{outline:none;border-color:var(--accent)}button{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:0 16px;font:inherit;font-weight:600;cursor:pointer;transition:background .15s}button:hover{background:#ff5e6c}button.ghost{background:var(--panel);color:var(--muted);border:1px solid var(--border)}button.ghost:hover{background:var(--panel-2);color:var(--text)}.error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#fca5a5;padding:12px 16px;border-radius:8px;font-size:14px}.result{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:20px;margin-top:8px}@media (max-width: 880px){.result{grid-template-columns:1fr}}.preview-card svg{width:100%;max-width:480px;height:auto}.preview-card,.output-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px}.preview-card{display:flex;flex-direction:column;align-items:center;gap:14px}.preview-label{align-self:stretch;display:flex;justify-content:space-between;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.zoom-badge{font-size:11px;letter-spacing:.05em;background:var(--panel-2);padding:2px 8px;border-radius:999px;color:var(--text);text-transform:none}.zoom-slider{width:100%;accent-color:var(--accent)}.output-card label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}.code-row{display:flex;gap:8px;margin-bottom:18px}.code-row input{flex:1;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:13px}details.cs2-detail{border-top:1px solid var(--border);padding-top:14px;margin-top:6px}details.cs2-detail summary{cursor:pointer;font-size:13px;color:var(--muted);-webkit-user-select:none;user-select:none;margin-bottom:12px}details.cs2-detail summary:hover{color:var(--text)}details.cs2-detail table{width:100%;border-collapse:collapse;font-size:13px}details.cs2-detail th{text-align:left;font-weight:500;color:var(--muted);padding:4px 12px 4px 0;width:110px}details.cs2-detail td{padding:4px 0;display:flex;align-items:center;gap:8px}.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--border)}.notes{margin-top:16px;display:flex;flex-direction:column;gap:6px}.note{font-size:12.5px;color:var(--muted);display:flex;align-items:flex-start;gap:8px;line-height:1.4}.note .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-top:6px;flex-shrink:0}.note.lost .dot{background:var(--bad)}.note.approx .dot{background:var(--warn)}footer{margin-top:48px;text-align:center;color:var(--muted);font-size:12px;display:flex;justify-content:center;gap:8px}footer a{color:var(--muted);text-decoration:underline dotted}footer a:hover{color:var(--text)}