.demo-main { max-width:1100px; padding-top:50px; }
.demo-main section { margin-bottom:60px; }
.demo-main h1 { font-size:clamp(42px,6vw,70px); letter-spacing:-2px; }
.demo-main h2 { font-size:clamp(27px,4vw,38px); letter-spacing:-1px; }
.demo-main h3 { margin-top:32px; }
.demo-intro { font-size:19px; max-width:760px; color:var(--muted); }
.demo-notice { padding:18px 22px; border-left:3px solid var(--accent); background:var(--panel); }
.demo-inputs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:6px; margin-bottom:20px; }
.table-scroll:focus-visible, #results-title:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.table-scroll table { width:100%; border-collapse:collapse; font-size:14px; }
.table-scroll caption { text-align:left; padding:15px; font-weight:700; color:var(--accent); background:var(--panel); }
.table-scroll th,.table-scroll td { text-align:left; vertical-align:top; padding:12px; border-top:1px solid var(--line); }
.table-scroll th { color:var(--muted); font-size:12px; }
.table-scroll td { min-width:70px; }
.demo-actions { margin-top:12px; }
.demo-actions button { cursor:pointer; font-family:inherit; border:1px solid var(--accent); }
.demo-secondary { background:transparent; color:var(--ink); border-radius:5px; padding:14px 18px; font-size:13px; }
.demo-actions button:disabled { cursor:default; color:var(--muted); border-color:var(--line); }
#demo-status { margin-top:18px; color:var(--muted); }
.demo-total { display:flex; flex-direction:column; padding:24px; margin-bottom:24px; border:1px solid var(--accent); border-radius:8px; }
.demo-total strong { font-size:48px; color:var(--accent); line-height:1.3; }
.demo-total span { color:var(--muted); }
.demo-rules { padding-left:22px; }
.demo-rules li { margin-bottom:12px; }
@media(max-width:800px) { .demo-inputs { grid-template-columns:minmax(0,1fr); gap:0; } }