:root{--bg:#f6f7f9;--card:#ffffff;--text:#15181e;--muted:#5d6675;--border:#dde1e8;--accent:#2457d6;--accent-text:#ffffff;--danger:#b3261e;--ok:#1b7a3d}@media (prefers-color-scheme:dark){:root{--bg:#101216;--card:#181b21;--text:#eceef2;--muted:#9aa3b2;--border:#2b303a;--accent:#6f93f5;--accent-text:#0b1020;--danger:#f2877f;--ok:#5cc98a}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}main{max-width:640px;margin:0 auto;padding:16px}h1{font-size:1.6rem;margin:.5em 0 .3em}h2{font-size:1.15rem;margin:1.4em 0 .5em}p{margin:.5em 0}.muted{color:var(--muted);font-size:.92rem}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin:12px 0}.stack{display:grid;grid-gap:12px;gap:12px}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}label{display:grid;grid-gap:4px;gap:4px;font-weight:600;font-size:.95rem}input,select{font:inherit;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);width:100%;min-height:44px}input[type=color]{padding:2px}.button,button{font:inherit;font-weight:600;min-height:44px;padding:10px 16px;border-radius:8px;border:1px solid transparent;background:var(--accent);color:var(--accent-text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}.button.secondary,button.secondary{background:transparent;color:var(--text);border-color:var(--border)}button:disabled{opacity:.55;cursor:not-allowed}.banner{background:#fff3cd;color:#5c4400;border-radius:8px;padding:10px 12px;font-size:.92rem}.badge{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--accent-text);letter-spacing:.03em;text-transform:uppercase}.error{color:var(--danger)}.ok{color:var(--ok)}.code{font:700 1.7rem ui-monospace,Menlo,monospace;letter-spacing:.12em}.swatch{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid var(--border);vertical-align:middle}ul.plain{list-style:none;margin:0;padding:0;display:grid;grid-gap:8px;gap:8px}