.demo-frame{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);margin-block:var(--space-5);overflow:hidden}.demo-bar{gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--sunken);border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.demo-shell{display:grid}.demo-nav{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);scrollbar-width:thin;flex-wrap:wrap;gap:6px;display:flex}.demo-nav button{min-height:var(--tap);border-radius:var(--radius);color:var(--ink);font:500 1rem var(--sans);cursor:pointer;text-align:left;background:0 0;border:0;flex:none;align-items:center;gap:10px;padding:0 14px;display:inline-flex}.demo-nav button:hover{background:var(--sunken)}.demo-nav button[aria-current=page]{background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--accent);font-weight:700}.demo-main{padding:var(--space-4);min-width:0;min-height:22rem}.demo-main h2{font-family:var(--sans);font-size:var(--step-2);margin:0 0 var(--space-2)}.demo-main h3{font-family:var(--sans);font-size:var(--step-1);margin:0 0 var(--space-3)}.demo-main section>.muted{margin-bottom:var(--space-4)}.demo-notice:empty{display:none}.demo-log{border:var(--border);border-radius:var(--radius);background:var(--bg);margin:0;padding:0;list-style:none}.demo-log li{gap:4px var(--space-4);padding:12px var(--space-4);border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;display:flex}.demo-log li:last-child{border-bottom:0}.demo-cols{gap:var(--space-4);display:grid}.demo-lang{min-inline-size:0;padding:var(--space-4);border:var(--border);border-radius:var(--radius);background:var(--bg);margin:0}.demo-lang legend{padding:0 6px;font-weight:700}.demo-add{padding:var(--space-4);margin-bottom:var(--space-4);border:var(--border);border-radius:var(--radius);background:var(--bg)}.demo-savebar{gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.demo-savebar .status{align-items:center;gap:8px;font-weight:600;display:flex}.demo-main .page-head-row{gap:var(--space-3);flex-wrap:wrap;justify-content:space-between;align-items:flex-start;display:flex}.demo-main .dirty-dot{background:var(--accent);border-radius:2px;flex:none;width:10px;height:10px;transform:rotate(45deg)}@media (min-width:720px){.demo-shell{grid-template-columns:200px minmax(0,1fr)}.demo-nav{padding:var(--space-3);border-bottom:0;border-right:1px solid var(--line);flex-flow:column}.demo-nav button[aria-current=page]{box-shadow:inset 3px 0 0 var(--accent)}.demo-main{padding:var(--space-5)}}@media (min-width:960px){.demo-cols{grid-template-columns:1fr 1fr}}.demo-bridge{margin-block:var(--space-5);padding-top:var(--space-4);border-top:2px solid var(--ink)}.demo-bridge h2{font-family:var(--sans);font-size:var(--step-2);margin:0 0 var(--space-2)}.demo-bridge h2:focus{outline:none}.demo-bridge p{max-width:60ch}.demo-bridge .form-narrow{margin-top:var(--space-4)}