:root{--paper:#edf3fa;--ink:#17334d;--muted:#556b7d;--line:#c2d2e0;--green:#176090;--accent:#176090;--surface:#fff;--field:#f7fbff;--soft:#e3eff9;--focus:#91bfdc;--radius:4px;--mark:"▥";}

body{background:var(--paper);color:var(--ink)}.demo-header{max-width:none;padding:24px max(24px,calc((100vw - 1100px)/2));background:var(--surface);border-bottom:1px solid var(--line)}.demo-header .brand{font-size:23px;letter-spacing:-.8px}.demo-header nav a{font-size:13px;font-weight:600}.demo-main{margin-top:45px}.demo-main h1{max-width:850px}.panel{background:var(--surface);border-color:var(--line);border-radius:var(--radius,12px);box-shadow:var(--shadow,none)}.panel h2{letter-spacing:-.8px}.intro,.note{color:var(--muted)}input,select,textarea{background:var(--field);color:var(--ink);border-color:var(--line);border-radius:8px}input:focus,select:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:2px}button{background:var(--green);color:var(--button-ink,#fff);border-radius:8px;transition:transform .15s}button:hover:not(:disabled){transform:translateY(-1px)}button.secondary{background:var(--soft);color:var(--ink);margin-left:0;margin-right:8px}.result{background:var(--soft);border:1px solid var(--line);border-radius:8px;color:var(--ink)}.error{background:#ffe4e6;color:#881337}.tags span,.panel details,td,th{border-color:var(--line)}.metrics{margin:24px 0}.metrics>div{background:var(--soft);padding:18px 22px;border-radius:8px}.metrics strong{color:var(--green)}em{color:var(--accent);font-family:inherit}.workflow li{border-color:var(--accent)}summary:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.eyebrow{color:var(--accent)}.brand:before{content:var(--mark);display:grid;place-items:center;width:36px;height:36px;background:var(--green);color:var(--button-ink,#fff);border-radius:var(--radius,8px);font:700 16px monospace;flex-shrink:0}audio{border-radius:30px}@media(max-width:650px){.demo-header{padding:18px 20px;gap:20px;align-items:flex-start}.demo-header .brand{font-size:18px;gap:9px}.demo-header nav a{font-size:12px}.demo-main h1{font-size:38px}.demo-main{padding:0 20px 45px}.brand:before{width:30px;height:30px}.metrics>div{padding:12px}.panel{padding:20px}}

.demo-main{max-width:1200px}.demo-main h1{font-size:54px;font-weight:700}.demo-header{background:#17334d;color:#fff}.demo-header .brand:before{background:#badcf1;color:#17334d}.metrics strong{font-family:monospace;font-size:30px}.metrics>div{border-left:4px solid #176090}.feature-inputs input{font-family:monospace}.panel h2{font-size:24px}th{background:#e3eff9}
@media(max-width:650px){.demo-main h1{font-size:38px;letter-spacing:-1.5px}.demo-header{flex-wrap:wrap}.panel{padding:20px}.demo-header nav{margin-left:auto}.demo-main .metrics{gap:10px}.demo-main .metrics>div{flex:1 1 120px}}

.demo-main{max-width:1300px}.data-header{display:flex;align-items:center;justify-content:space-between;gap:25px}.dataset-label{font:10px monospace;color:#537a97}.data-header h1{margin:12px 0 25px}.model-tag{background:#d8e9f5;padding:15px 20px;font:10px/1.7 monospace;border-left:3px solid #176090}.model-tag b{font:600 13px 'DM Sans',sans-serif}.analysis-steps{display:flex;gap:20px;background:white;border:1px solid #c2d2e0;padding:17px 22px;margin:10px 0 25px;font:12px monospace;flex-wrap:wrap}.analysis-steps i{color:#6d98b8}.feature-inputs{background:#edf4fa;padding:18px;border-radius:5px}.feature-inputs label{font-size:12px}.metrics>div{flex:1}.metrics strong{font-size:34px}#housing .grid>div:nth-child(2){border-left:1px solid #c2d2e0;padding-left:24px}.demo-main>.intro{font-size:14px}#housing-result{font:600 23px/1.7 monospace}@media(max-width:700px){.data-header{display:block}.model-tag{display:inline-block;margin-bottom:20px}.analysis-steps{font-size:10px;gap:10px}#housing .grid>div:nth-child(2){border-left:0;padding-left:0}#housing-result{font-size:18px}}
