.demo-shell{max-width:1200px;margin:auto;padding:0 40px}
.demo-shell *{box-sizing:border-box}.demo-shell button,.demo-shell input,.demo-shell select{font:inherit}.demo-shell button,.demo-shell select,.demo-shell input[type=time]{min-height:44px}.demo-shell button{border:1px solid var(--border);border-radius:9px;padding:10px 17px;color:var(--ink);background:var(--surface);font-size:14px;font-weight:550;cursor:pointer;box-shadow:none}.demo-shell button:hover{background:var(--surface-muted)}.demo-shell button.primary{background:#0068d6;border-color:#0068d6;color:#fff}.demo-shell button.primary:hover{background:#0056b3}.demo-shell button.quiet{border-color:transparent;background:none;color:var(--ink-secondary)}.demo-shell button.text-button{border:0;background:none;color:var(--accent);padding:4px 0;text-align:left;font-size:14px}.demo-shell :is(button,input,select,a,summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}.demo-shell a{color:var(--accent)}
.demo-header{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100px;border-bottom:1px solid var(--border-soft)}.demo-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)!important;font-size:18px;font-weight:650;letter-spacing:-.03em}.demo-brand small{display:block;font-size:12px;letter-spacing:0;font-weight:400;color:var(--ink-secondary);line-height:1.3}.demo-logo{display:grid;place-items:center;width:38px;height:38px;background:var(--ink);color:var(--surface);border-radius:11px;font-weight:600;font-size:22px}.demo-header nav{display:flex;gap:8px}.demo-header nav button{background:none;border-color:transparent;color:var(--ink-secondary)}.demo-header nav button[aria-current=page]{background:var(--surface);color:var(--ink);border-color:var(--border)}.demo-header #demo-theme{width:44px;padding:0;font-size:24px}
#demo-main{outline:0;padding-top:40px;min-height:70vh}.demo-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:28px}.demo-eyebrow{color:var(--ink-secondary);font-size:14px;margin:0 0 8px}.demo-shell h1{font-size:clamp(27px,3vw,36px);letter-spacing:-.045em;line-height:1.2;font-weight:650;margin:0 0 12px}.demo-intro{color:var(--ink-secondary);max-width:680px;margin:0;line-height:1.7}.demo-heading>.quiet{flex-shrink:0}.demo-shell h2{font-size:20px;letter-spacing:-.02em;margin:0;line-height:1.4;font-weight:650}.demo-shell h3{font-size:17px;letter-spacing:-.015em}.demo-shell p{line-height:1.65}.demo-steps{display:flex;list-style:none;gap:32px;margin:0 0 32px;padding:0}.demo-steps li{display:flex;align-items:center;gap:9px;color:var(--ink-secondary);font-size:14px}.demo-steps li>span{display:grid;place-items:center;border:1px solid var(--border);width:25px;height:25px;border-radius:50%;font-size:12px}.demo-steps li[aria-current]{font-weight:600;color:var(--ink)}.demo-steps li[aria-current]>span{background:var(--ink);color:var(--surface);border-color:var(--ink)}.demo-steps li.completed>span{border:0;color:var(--success)}
.demo-situation{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.demo-panel{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;padding:28px;margin-bottom:24px}.demo-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}.demo-section-head>span{font-size:14px;color:var(--ink-secondary)}.demo-fields{display:grid;grid-template-columns:1fr 150px;gap:16px;margin-top:24px}.demo-fields label{display:flex;flex-direction:column;gap:8px;font-size:14px}.demo-fields select{width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink);padding:10px;font-size:14px}.demo-hint{font-size:14px;color:var(--ink-secondary);margin:16px 0 24px}.demo-options{border-top:1px solid var(--border-soft);padding-top:20px;display:flex;flex-direction:column;gap:22px}.demo-options label{display:flex;align-items:flex-start;gap:12px;font-size:15px;cursor:pointer}.demo-options input{margin:5px 0 0;width:18px;height:18px;accent-color:var(--accent)}.demo-options small{display:block;color:var(--ink-secondary);font-size:14px;line-height:1.6;margin-top:5px}.demo-bottom-action{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}.demo-roster{list-style:none;margin:0;padding:0}.demo-roster li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--border-soft)}.demo-roster li:first-child{border:0;padding-top:0}.demo-roster strong{font-size:15px;font-weight:600}.demo-roster li>div>span{display:block;font-size:13px;color:var(--ink-secondary)}.demo-credit{text-align:right;font-size:15px;font-weight:550}.demo-credit small{display:block;color:var(--ink-secondary);font-weight:400;font-size:12px}.demo-error{background:var(--danger-soft);color:var(--danger);padding:16px 20px;border-radius:10px;margin-bottom:24px}
.demo-ranking details{border-top:1px solid var(--border-soft)}.demo-ranking summary{list-style:none;display:flex;align-items:center;gap:20px;padding:15px 0;cursor:pointer}.demo-ranking summary::-webkit-details-marker{display:none}.demo-ranking summary>span:first-child{flex:1}.demo-ranking summary strong{display:block;font-size:15px;font-weight:600}.demo-ranking summary small{font-size:13px;color:var(--ink-secondary)}.demo-outcome{font-size:14px;color:var(--ink-secondary)}.demo-outcome.selected{color:var(--success);font-weight:600}.demo-disclosure{color:var(--ink-secondary);font-size:20px;width:20px;text-align:center}.demo-ranking details[open] .demo-disclosure{transform:rotate(45deg)}.demo-ranking details>p{background:var(--surface-muted);font-size:14px;padding:16px;border-radius:8px;margin:0 0 16px;color:var(--ink-secondary)}.demo-coverage>p{font-size:15px;max-width:800px;color:var(--ink-secondary)}.demo-moves{list-style:none;margin:24px 0;padding:0}.demo-moves li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--border-soft)}.demo-moves strong{font-size:15px}.demo-moves p{margin:4px 0;font-size:15px}.demo-moves small,.demo-moves p span{font-size:13px;color:var(--ink-secondary)}.demo-coverage-counts{display:flex;gap:20px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--border-soft);font-size:14px}.demo-coverage-counts strong{margin-left:8px;color:var(--success)}.demo-action-bar{display:flex;align-items:center;gap:16px;justify-content:space-between;margin:24px 0}.demo-action-bar p{flex:1;text-align:center;font-size:13px;color:var(--ink-secondary)}.demo-neutral-note{font-size:14px;color:var(--ink-secondary)}
.demo-confirm-list{margin:24px 0}.demo-confirm-list>div{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border-soft);padding:16px 0;gap:16px}.demo-confirm-list strong{font-size:15px}.demo-confirm-list label{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-secondary)}.demo-confirm-list input{width:135px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:8px}.demo-summary{max-width:820px;margin:0 auto 24px}.demo-success-mark{display:grid;place-items:center;width:40px;height:40px;background:var(--success-soft);color:var(--success);border-radius:50%;margin-bottom:20px}.demo-summary>h2{font-size:28px;letter-spacing:-.04em}.demo-summary>p{color:var(--ink-secondary)}.demo-summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-block:1px solid var(--border-soft);padding:24px 0;margin:28px 0}.demo-summary-stats dt{font-size:13px;color:var(--ink-secondary)}.demo-summary-stats dd{font-size:24px;letter-spacing:-.03em;margin:4px 0 0;font-weight:600}.demo-credit-changes>div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--border-soft);padding:12px 0;font-size:15px}.demo-credit-changes small{display:block;font-size:13px;color:var(--ink-secondary)}.demo-event{margin-top:20px;padding:16px;background:var(--surface-muted);border-radius:10px;font-size:14px}.demo-event summary{cursor:pointer;font-weight:550}.demo-footer{border-top:1px solid var(--border-soft);display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding:24px 0;font-size:12px;color:var(--ink-secondary)}
.demo-shell dialog{border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--ink);padding:32px;max-width:480px;width:calc(100% - 32px);box-shadow:var(--shadow-lg)}.demo-shell dialog::backdrop{background:rgba(0,0,0,.35)}.demo-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.demo-wiki-heading{margin-bottom:32px}.demo-wiki-heading p{max-width:780px;color:var(--ink-secondary)}.demo-wiki-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px}.demo-wiki-nav{display:flex;flex-direction:column;align-self:start;gap:4px;position:sticky;top:24px}.demo-wiki-nav button{text-align:left;background:none;border-color:transparent;color:var(--ink-secondary);font-size:14px}.demo-wiki-nav button[aria-current=page]{background:var(--surface);border-color:var(--border);color:var(--ink)}.demo-wiki-article{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;padding:36px;min-width:0}.demo-wiki-article h2{font-size:27px;letter-spacing:-.035em}.demo-wiki-article h3{margin:30px 0 8px}.demo-wiki-article p,.demo-wiki-article li{color:var(--ink-secondary);font-size:16px;line-height:1.8}.demo-wiki-article ul{padding-left:22px}.demo-wiki-status{display:inline-block;margin:0 0 18px;font-size:13px;color:var(--ink-secondary);border-bottom:1px solid var(--border);padding-bottom:6px}.demo-wiki-example{background:var(--surface-muted);border-left:3px solid var(--border);padding:18px 22px;border-radius:0 8px 8px 0;margin-top:24px}.demo-wiki-example p{margin:0;font-size:15px}.demo-wiki-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--border-soft);font-size:14px!important}.demo-wiki-next{display:flex;justify-content:space-between;gap:16px;margin-top:32px}
@media(max-width:900px){.demo-shell{padding:0 24px}.demo-fields{grid-template-columns:1fr}.demo-situation{gap:16px}.demo-panel{padding:24px}.demo-wiki-layout{grid-template-columns:190px minmax(0,1fr);gap:24px}.demo-wiki-article{padding:28px}}
@media(max-width:680px){.demo-shell{padding:0 16px}.demo-header{height:auto;min-height:88px;flex-wrap:wrap;gap:12px;padding:16px 0}.demo-header nav{gap:0}.demo-header nav button{padding:8px 10px;font-size:13px}.demo-brand{font-size:16px}#demo-main{padding-top:28px}.demo-heading{display:block}.demo-heading>.quiet{padding-left:0;margin-top:12px}.demo-steps{gap:12px;justify-content:space-between}.demo-steps li{flex-direction:column;gap:6px;font-size:12px}.demo-situation{grid-template-columns:1fr}.demo-fields{grid-template-columns:1fr 130px}.demo-panel{padding:20px}.demo-action-bar{flex-wrap:wrap}.demo-action-bar p{order:3;flex-basis:100%;margin:0}.demo-action-bar .primary{margin-left:auto}.demo-summary-stats{grid-template-columns:1fr;gap:16px}.demo-summary-stats>div{display:flex;align-items:center;justify-content:space-between}.demo-summary-stats dd{font-size:22px;margin:0}.demo-footer{flex-direction:column;gap:4px}.demo-wiki-layout{display:block}.demo-wiki-nav{position:static;display:flex;flex-direction:row;overflow-x:auto;margin-bottom:20px;gap:8px;padding-bottom:6px}.demo-wiki-nav button{white-space:nowrap;flex-shrink:0}.demo-wiki-article{padding:24px}.demo-wiki-article h2{font-size:24px}.demo-moves li{align-items:flex-start}.demo-confirm-list label{flex-direction:column;gap:4px;align-items:flex-end}}
@media(max-width:380px){.demo-fields{grid-template-columns:1fr}.demo-header nav{width:100%}.demo-steps{gap:5px}.demo-steps li{font-size:11px}.demo-ranking summary{gap:8px}}
@media(prefers-reduced-motion:reduce){.demo-shell *{animation:none!important;transition:none!important}html{scroll-behavior:auto}}