:root{color-scheme:light dark;--bg: #fbfbfd;--fg: #1d1d1f;--muted: #6e6e73;--line: #d2d2d7;--card: #ffffff;--accent: #0066cc;--yes: #0a7f3f;--no: #a1a1a6}@media(prefers-color-scheme:dark){:root{--bg: #16161a;--fg: #f5f5f7;--muted: #a1a1a6;--line: #38383c;--card: #1f1f24;--accent: #4aa3ff;--yes: #46d17f;--no: #6e6e73}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:color-mix(in srgb,var(--accent) 12%,transparent);padding:.1em .35em;border-radius:4px}.app{max-width:860px;margin:0 auto;padding:40px 24px 80px}header h1{margin:0 0 8px;font-size:28px}header p{margin:0;color:var(--muted)}.panel{margin-top:28px;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:14px}.panel h2{margin:0 0 16px;font-size:17px;font-weight:600}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 24px;margin-bottom:24px}label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}label strong{color:var(--fg)}label.text{grid-column:1 / -1}input[type=range]{width:100%;accent-color:var(--accent)}select,textarea{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px}textarea{resize:vertical}.stage{display:flex;flex-wrap:wrap;align-items:center;gap:20px}.demo-box{padding:10px 12px;border:1px dashed var(--accent);border-radius:8px;background:color-mix(in srgb,var(--accent) 6%,transparent)}.demo-input{font:inherit;padding:10px 12px;width:240px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.readout{display:flex;gap:22px;margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.readout div{display:flex;flex-direction:column;gap:2px}.readout dt{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.readout dd{margin:0;font-size:15px}.readout dd.yes{color:var(--yes);font-weight:700}.readout dd.no{color:var(--no)}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.list-item{border-style:solid;border-color:var(--line);background:var(--bg)}.list-item[data-truncated]{border-color:var(--accent)}.hint{margin:14px 0 0;font-size:13px;color:var(--muted)}