.dt-color-dot { width:26px; height:26px; border-radius:8px; border:1px solid #ad8cc9; flex-shrink:0; }
.dt-demo { background:var(--demo-background); color:var(--demo-text); border-radius:var(--demo-radius); padding:var(--demo-spacing); font-family:var(--demo-font); border:1px solid #9c82ae55; margin:22px 0; }
.dt-demo-nav { padding:15px 5px; font-size:14px; border-bottom:1px solid #8c759a33; }
.dt-demo-hero { padding:36px 8px; max-width:700px; }
.dt-demo-hero>small { color:var(--demo-brand); font-weight:750; letter-spacing:.12em; font-size:10px; }
.dt-demo-hero h2 { font-size:clamp(25px,3vw,38px); line-height:1.2; margin:16px 0; color:var(--demo-text); }
.dt-demo p { color:var(--demo-muted); font-size:14px; line-height:1.8; }
.dt-demo-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.dt-demo .aw-card { padding:var(--demo-spacing); border-radius:var(--demo-radius); background:var(--demo-surface); border-color:#8c759a44; color:var(--demo-text); }
.dt-demo .aw-card h3, .dt-demo label { color:var(--demo-text); }
.aw-page .dt-demo input:not([type=checkbox]) { color:var(--demo-text); background:var(--demo-background); border-color:#8c759a66; }
.dt-demo button { background:var(--demo-surface); color:var(--demo-text); border-radius:var(--demo-radius); border-color:var(--demo-brand); }
.dt-demo .dt-demo-primary { background:var(--demo-brand); color:var(--demo-onBrand); }
.dt-swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(65px,1fr)); gap:6px; }
.dt-swatch { min-height:95px; padding:12px 7px; border-radius:8px; display:flex; flex-direction:column; justify-content:space-between; font-size:10px; }
.dt-swatch strong { font-size:16px; }
.dt-contrast-sample { padding:25px; border-radius:10px; font-size:20px; }
@media(max-width:900px) { .dt-demo-cards { grid-template-columns:1fr; } }