/* Demo-only styles are scoped so examples cannot alter the documentation shell. */
.cheat-grid:has([data-kind="layout"]), .cheat-grid:has([data-kind="token"]), .cheat-grid:has([data-kind="svg"]) { grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.reference-demo { padding:20px; min-height:260px; display:flex; flex-direction:column; justify-content:center; gap:16px; color:var(--text); background:radial-gradient(ellipse at 85% 10%,#62a0ff33,transparent 65%); }
.reference-demo * { box-sizing:border-box; min-width:0; }
.reference-demo h3 { font-size:17px; line-height:1.3; margin:0 0 8px; }
.reference-demo p { font-size:12px; line-height:1.6; margin:6px 0; }
.reference-demo small { font-size:11px; color:var(--muted); }
.reference-demo button,.reference-demo select { font:inherit; font-size:12px; border:1px solid var(--glass-border); background:var(--glass-panel); color:var(--text); border-radius:10px; padding:7px 10px; cursor:pointer; }
.reference-demo button:hover { background:#2f7df622; }
.reference-demo button:focus-visible,.reference-demo input:focus-visible,.reference-demo select:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.reference-demo button[aria-pressed="true"] { background:#2f7df624; color:var(--brand); border-color:var(--brand); }
.sample-card { padding:12px; background:var(--glass-panel); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 #ffffffaa,0 6px 14px #2a62a60c; border-radius:12px; }
.sample-card strong,.sample-card b { font-size:12px; }
.sample-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; background:#2f7df61a; border-radius:10px; font-size:10px; }
.sample-content { padding:8px; }
.holy { display:grid; grid-template:36px 145px 25px / 52px 1fr 54px; gap:6px; }
.holy header,.holy footer { grid-column:1/-1; }
.holy aside,.sample-sidebar aside { padding:10px 6px; background:#2f7df616; border-radius:10px; font-size:10px; line-height:2.2; }
.holy footer { text-align:center; font-size:10px; color:var(--muted); }
.sample-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
.sample-stack { display:grid; gap:8px; }
.sample-stack .sample-card { display:flex; align-items:center; gap:10px; }
.sample-stack p { flex:1; }
.sample-sidebar { display:grid; grid-template-columns:75px 1fr; gap:14px; min-height:208px; }
.sample-sidebar section { padding-top:12px; }
.sample-split { display:grid; grid-template-columns:1fr 1fr; gap:4px; min-height:175px; background:#2f7df64a; border-radius:12px; overflow:hidden; }
.sample-split section { padding:14px 10px; background:var(--glass-panel); }
.sample-split b { font-size:12px; }
.demo-control { display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; flex-wrap:wrap; }
.demo-control input[type="range"] { width:125px; accent-color:var(--brand); }
.sample-listdetail { display:grid; grid-template-columns:88px 1fr; gap:12px; min-height:208px; }
.sample-listdetail > div { display:flex; flex-direction:column; gap:7px; }
.sample-listdetail article { padding:12px; border-left:1px solid var(--glass-border); }
.sample-dashboard { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sample-dashboard > :first-child { grid-column:span 2; }
.chart-card { grid-column:span 2; }
.sample-bars { display:flex; gap:6px; align-items:end; height:90px; padding-top:10px; }
.sample-bars i { flex:1; background:linear-gradient(#2f7df6,#8ecaff); border-radius:5px 5px 0 0; }
.sample-hero { position:relative; isolation:isolate; overflow:hidden; padding:25px 15px; border:1px solid var(--glass-border); border-radius:20px; min-height:210px; }
.sample-hero h3 { font-size:24px; max-width:180px; margin-top:15px; }
.sample-hero a { display:inline-block; font-size:12px; margin-top:12px; color:var(--brand); }
.hero-orb { position:absolute; z-index:-1; right:-25px; top:10px; width:130px; height:130px; border-radius:50%; background:radial-gradient(at 30% 25%,#fff,#9ed7ff 30%,#2f7df6); box-shadow:0 15px 40px #2f7df62a; opacity:.6; }
.sample-masonry { columns:2; column-gap:10px; }
.sample-masonry .sample-card { break-inside:avoid; margin-bottom:10px; }
.sample-centered { display:grid; place-items:center; min-height:220px; background:linear-gradient(90deg,#2f7df60a 15%,transparent 15% 85%,#2f7df60a 85%); }
.sample-centered article { width:80%; text-align:center; }
.sample-pill { display:inline-block; padding:5px 14px; border-radius:99px; background:#2f7df622; color:var(--brand); font-size:11px; }
.sample-media { display:grid; grid-template-columns:100px 1fr; gap:16px; align-items:center; }
.media-art { height:155px; border-radius:18px; background:linear-gradient(145deg,#b9ecff,#74a7f1); display:grid; place-items:center; }
.media-art i { width:60px; height:60px; border-radius:17px; transform:rotate(-25deg); background:#ffffff88; border:1px solid white; box-shadow:8px 16px 25px #174fa644; }
.token-colors { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.token-colors div { display:flex; flex-direction:column; gap:5px; }
.token-colors i { height:40px; border-radius:12px; border:1px solid #98abc344; }
.token-colors b,.token-colors code { font-size:11px; }
.type-scale { display:flex; flex-direction:column; gap:12px; }
.type-scale strong { font-size:28px; }
.type-scale b { font-size:20px; }
.type-scale p { font-size:16px; }
.type-scale small { font-size:12px; }
.space-scale { display:grid; gap:9px; }
.space-scale > div { display:flex; align-items:center; gap:16px; }
.space-scale code { width:40px; font-size:12px; }
.space-scale i { height:14px; background:linear-gradient(90deg,#2f7df6,#8fc8ff); border-radius:3px; }
.radius-scale,.shadow-scale { display:flex; justify-content:space-around; gap:12px; text-align:center; }
.radius-scale i,.shadow-scale i { display:block; width:48px; height:58px; background:var(--glass-panel); border:1px solid var(--glass-border); margin-bottom:20px; }
.radius-scale code,.shadow-scale b { font-size:12px; }
.shadow-scale i { border-radius:12px; }
.breakpoint-stage { padding:10px; border:1px dashed var(--glass-border); border-radius:12px; }
[data-breakpoint-cards] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
[data-breakpoint-cards] .sample-card { padding:8px; }
[data-breakpoint-cards] strong { font-size:10px; }
[data-breakpoint-cards] p { font-size:9px; }
.demo-svg { align-items:center; }
.demo-svg svg { width:100%; max-width:280px; height:185px; color:var(--brand); overflow:visible; }
.demo-svg svg text { font-family:inherit; font-size:16px; font-weight:600; text-anchor:middle; fill:var(--text); }
.demo-source { margin:0 20px 20px; border-top:1px solid var(--glass-border); padding-top:12px; }
.demo-source summary { cursor:pointer; color:var(--brand); font-size:13px; font-weight:600; }
.demo-source p { font-size:12px; line-height:1.7; }
.demo-source pre { max-height:260px; overflow:auto; padding:12px; border-radius:12px; background:#10284c0a; font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; }
.draw-path { stroke-dasharray:100; animation:reference-draw 4s ease-in-out infinite; }
.signature-path { animation-duration:6s; }
.march-path { animation:reference-march 1s linear infinite; }
.goo-left { animation:reference-goo-left 3s ease-in-out infinite; }
.goo-right { animation:reference-goo-right 3s ease-in-out infinite; }
.is-paused * { animation-play-state:paused !important; }
@keyframes reference-draw { 0%,10% {stroke-dashoffset:100;} 70%,100% {stroke-dashoffset:0;} }
@keyframes reference-march { to {stroke-dashoffset:-30;} }
@keyframes reference-goo-left { 50% {transform:translateX(-33px);} }
@keyframes reference-goo-right { 50% {transform:translateX(33px);} }
@media(max-width:400px) { .sample-media {grid-template-columns:1fr;} .media-art {height:90px;} .reference-demo {padding:16px;} }
@media(prefers-reduced-motion:reduce) { .draw-path,.march-path,.goo-left,.goo-right {animation:none;} }