:root{color:var(--cad-ink);background:var(--cad-bg);font-family:var(--cad-type-body-font);font-size:var(--cad-type-body-size);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}html{scroll-behavior:smooth;min-width:20rem}body{min-width:20rem;min-height:100vh;color:var(--cad-ink);background:var(--cad-bg);margin:0}button,input,textarea,select{font:inherit}.demo-app{flex-direction:column;min-height:100vh;display:flex}.demo-skip-link{z-index:100;color:var(--cad-link);background:var(--cad-surface-raised);border:2px dashed;padding:.55rem .75rem;position:fixed;top:.5rem;left:.5rem;transform:translateY(-150%)}.demo-skip-link:focus{transform:translateY(0)}.demo-brand,.demo-header-actions,.demo-actions,.demo-footer-meta,.demo-meta-row,.demo-inline-heading,.demo-field-row{flex-wrap:wrap;align-items:center;gap:.7rem;display:flex}.demo-brand{color:inherit;letter-spacing:.13em;text-decoration:none}.demo-brand:focus-visible{outline:2px dashed var(--cad-focus-ring);outline-offset:4px}.demo-header-actions cad-button::part(base),cad-button[slot=user]::part(base){min-width:2.75rem;padding-inline:.55rem}cad-button[slot=user] cad-avatar::part(copy){display:none}.demo-main{flex:1;align-self:center;width:min(100%,78rem);padding:clamp(1.35rem,3vw,3rem) clamp(1rem,4vw,2.5rem) 5rem}.demo-page-heading{gap:.8rem;max-width:65rem;margin-bottom:clamp(1.75rem,4vw,3.5rem);display:grid}.demo-page-heading h1,.demo-section-heading h2,.demo-panel-heading h2,.demo-panel-heading h3{color:var(--cad-ink);margin:0}.demo-page-heading h1{max-width:22ch;font-family:var(--cad-type-display-font);font-size:var(--cad-type-display-size);letter-spacing:-.045em;line-height:.96}.demo-page-heading>p:not(.demo-eyebrow){max-width:58ch;color:var(--cad-ink-muted);margin:0;font-size:clamp(1rem,2vw,1.25rem);line-height:1.65}.demo-eyebrow,.demo-section-label,.demo-kicker{color:var(--cad-link);font-family:var(--cad-type-label-font);font-size:var(--cad-type-control-size);font-weight:var(--cad-hand-weight-strong);letter-spacing:.02em;margin:0}.demo-page-heading .demo-actions{margin-top:.5rem}.demo-section{gap:1.25rem;margin-top:clamp(2.25rem,5vw,4.5rem);display:grid}.demo-section-heading,.demo-panel-heading{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.75rem 1.5rem;display:flex}.demo-section-heading h2{font-family:var(--cad-type-heading-font);font-size:var(--cad-type-heading-size);line-height:var(--cad-type-heading-line-height)}.demo-section-heading p,.demo-panel-heading p{max-width:55ch;color:var(--cad-ink-muted);margin:0;line-height:1.55}.demo-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;display:grid}.demo-grid>*{grid-column:span 12;min-width:0}.demo-grid-metrics>*{grid-column:span 4}.demo-grid-split>:first-child{grid-column:span 7}.demo-grid-split>:last-child{grid-column:span 5}.demo-grid-halves>*{grid-column:span 6}.demo-card-copy{gap:.75rem;display:grid}.demo-card-copy p,.demo-card-copy h2,.demo-card-copy h3,.demo-card-copy ul{margin:0}.demo-card-copy h2,.demo-card-copy h3{color:inherit;font-size:inherit}.demo-card-copy ul{padding-left:1.15rem}.demo-metric-value{color:var(--cad-link);font-family:var(--cad-font-hand);font-size:clamp(2.4rem,7vw,4.25rem);font-weight:var(--cad-hand-weight-strong);letter-spacing:-.04em;margin-top:.15rem;line-height:.95;display:block}.demo-metric-detail{color:var(--cad-ink-muted);font-size:.95rem}.demo-panel{border-block:var(--cad-frame-border-subtle);gap:1rem;padding:clamp(1rem,3vw,1.5rem) 0;display:grid}.demo-toolbar{grid-template-columns:minmax(14rem,1fr) auto;align-items:end;gap:.9rem;display:grid}.demo-toolbar>*{min-width:0}.demo-note-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:1rem;display:grid}.demo-note-grid cad-note{width:100%;min-height:15rem}.demo-note-grid cad-note[hidden]{display:none}.demo-note-grid cad-note:nth-child(2n){transform:rotate(.45deg)}.demo-note-grid cad-note:nth-child(3n){transform:rotate(-.4deg)}.demo-note-footer,.demo-kanban-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem .75rem;display:flex}.demo-kanban-card{gap:.65rem;display:grid}.demo-kanban-card h3,.demo-kanban-card p{margin:0}.demo-kanban-card p{color:var(--cad-ink-muted);line-height:1.45}.demo-project-title{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;display:flex}.demo-project-title h1{max-width:20ch}.demo-tab-stack{gap:1.5rem;display:grid}.demo-tab-stack cad-note{width:min(100%,32rem)}.demo-form{gap:1.2rem;display:grid}.demo-form-section{border-bottom:var(--cad-frame-border-subtle);gap:1rem;padding-bottom:1.5rem;display:grid}.demo-form-section:last-child{border-bottom:0;padding-bottom:0}.demo-form-section h2,.demo-form-section h3,.demo-form-section p{margin:0}.demo-form-section>p{max-width:60ch;color:var(--cad-ink-muted);line-height:1.5}.demo-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.demo-setting-row{border-bottom:var(--cad-frame-border-subtle);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding-block:.9rem;display:grid}.demo-setting-row:last-child{border-bottom:0}.demo-setting-copy{gap:.25rem;display:grid}.demo-setting-copy strong{color:var(--cad-link);font-family:var(--cad-type-label-font);font-size:var(--cad-type-label-size)}.demo-setting-copy span{color:var(--cad-ink-muted);font-family:var(--cad-type-meta-font);font-size:var(--cad-type-meta-size);line-height:var(--cad-type-meta-line-height)}.demo-empty-results[hidden]{display:none}.demo-footer-brand{gap:.7rem;display:grid}.demo-footer-brand p,.demo-footer-meta{margin:0}.demo-footer-meta{justify-content:space-between}.demo-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (width<=56rem){.demo-grid-metrics>*{grid-column:span 6}.demo-grid-split>:first-child,.demo-grid-split>:last-child,.demo-grid-halves>*{grid-column:span 12}.demo-note-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=40rem){.demo-main{padding-inline:.85rem}.demo-grid-metrics>*,.demo-form-grid>*{grid-column:span 12}.demo-form-grid,.demo-note-grid,.demo-toolbar{grid-template-columns:1fr}.demo-page-heading h1{font-size:clamp(2.5rem,13vw,4rem)}.demo-setting-row{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-note-grid cad-note{transform:none}}