:root{color-scheme:light;--bg: #f4f3ef;--surface: #ffffff;--surface-2: #f0efea;--surface-3: #e6e5df;--text: #0b0b0b;--text-2: #52514e;--border: rgba(11, 11, 11, .14);--border-strong: #8d8c86;--accent: #1f66bd;--accent-soft: #e3eefb;--on-accent: #ffffff;--link: #185aa8;--need-soft: #fde9df;--on-need: #8a3210;--vegan: #1b7a34;--on-vegan: #ffffff;--danger: #b92f2f;--radius: 18px;--radius-sm: 12px;--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--nav-h: 72px}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg: #0d0d0d;--surface: #1a1a19;--surface-2: #242423;--surface-3: #30302e;--text: #f0efec;--text-2: #c3c2b7;--border: rgba(255, 255, 255, .16);--border-strong: #7f7e78;--accent: #2a78d6;--accent-soft: #1c2a3d;--link: #8fbdf5;--need-soft: #3a2117;--on-need: #f7b79b;--vegan: #2c9c4b;--danger: #f08a8a}}:root[data-theme=dark]{color-scheme:dark;--bg: #0d0d0d;--surface: #1a1a19;--surface-2: #242423;--surface-3: #30302e;--text: #f0efec;--text-2: #c3c2b7;--border: rgba(255, 255, 255, .16);--border-strong: #7f7e78;--accent: #2a78d6;--accent-soft: #1c2a3d;--link: #8fbdf5;--need-soft: #3a2117;--on-need: #f7b79b;--vegan: #2c9c4b;--danger: #f08a8a}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:18px;line-height:1.35}button,input,textarea,select{font:inherit;color:inherit}h1,h2,h3{line-height:1.2}a{color:var(--link)}:focus-visible{outline:3px solid var(--link);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.muted{color:var(--text-2);margin:0}.loading{padding:32px 16px;text-align:center}.page{max-width:640px;margin:0 auto;min-height:100vh;min-height:100dvh}.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--border)}.bar .grow{flex:1;min-width:0;overflow-wrap:anywhere}.bar h1{font-size:20px;margin:0}.stack{display:flex;flex-direction:column;gap:16px;padding:16px 12px}.foot{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--surface);border-top:1px solid var(--border)}.foot>div{max-width:640px;margin:0 auto;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.foot .btn{flex:1}.foot-space{height:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom))}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-weight:600;text-align:center;text-decoration:none;cursor:pointer}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn.quiet{background:transparent;border-color:transparent;color:var(--link);padding-inline:8px}.btn.danger{color:var(--danger);border-color:var(--danger)}.btn.wide{width:100%}.card{display:grid;gap:10px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.card h2,.card h3{margin:0;font-size:20px}.field{display:grid;gap:4px;font-weight:600}.field small{font-weight:400;color:var(--text-2);font-size:15px}.input{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg);font-weight:400}.form{display:flex;flex-direction:column;gap:14px}.opts{display:flex;flex-wrap:wrap;gap:6px}.opt{flex:1 1 auto;min-height:48px;padding:6px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);font-weight:600;cursor:pointer}.opt[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-weight:600;cursor:pointer}.switch input{appearance:none;position:relative;flex:none;width:56px;height:32px;margin:0;border-radius:16px;background:var(--surface-3);border:2px solid var(--border-strong);cursor:pointer}.switch input:after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:var(--text-2)}.switch input:checked{background:var(--accent);border-color:var(--accent)}.switch input:checked:after{left:27px;background:var(--on-accent)}.warn{margin:0;padding:8px 12px;border-radius:var(--radius-sm);background:var(--need-soft);color:var(--on-need)}.v{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--vegan);color:var(--on-vegan);font-size:14px;font-weight:800;line-height:1;vertical-align:2px}.demo-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--accent-soft);font-size:16px}