.as-sparkler-demo {
	background: #141b17;
	color: #e1dfd5;
	isolation: isolate;
}
.as-sparkler-demo .as-demo-heading { display: grid; grid-template-columns: 1fr minmax(15rem, 0.65fr); gap: 3rem; align-items: end; margin-bottom: 2.75rem; }
.as-sparkler-demo .as-eyebrow { color: #e2c697; }
.as-sparkler-demo h2 { max-width: 19ch; margin-bottom: 0; color: #fffdf9; font-size: clamp(2.25rem, 4.5vw, 4rem); }
.as-demo-heading > p { max-width: 27rem; margin-bottom: 0; color: #c7c6bc; }
.as-demo-stage { position: relative; height: clamp(24rem, 42vw, 34rem); overflow: hidden; border: 1px solid #e2c69729; border-radius: 0.3rem 0.3rem 0 0; background: radial-gradient(ellipse at center, #26271f, #111714); }
.as-demo-stage canvas { display: none; width: 100%; height: 100%; }
.as-sparkler-demo.is-ready .as-demo-stage canvas { display: block; }
.as-sparkler-demo.is-ready .as-demo-still { display: none; }
.as-demo-stage__label { position: absolute; bottom: 0.8rem; left: 1.25rem; color: #aaa997; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; }
.as-demo-still { display: flex; height: 100%; }
.as-demo-still__lane { position: relative; flex: 1; border-right: 1px solid #e2c69717; }
.as-demo-still__lane:last-child { border: 0; }
.as-demo-still__lane img { position: absolute; bottom: -1rem; left: 50%; width: clamp(5rem, 10vw, 8rem); transform: translateX(-50%); }
.as-demo-still__rod { position: absolute; bottom: 5rem; left: 50%; width: 2px; background: #b7b8a6; }
.as-demo-still__rod--20 { height: 43%; }
.as-demo-still__rod--28 { height: 60%; }
.as-demo-still__rod--36 { height: 77%; }
.as-demo-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #e2c69729; border-top: 0; border-radius: 0 0 0.3rem 0.3rem; }
.as-demo-model { min-width: 0; padding: 1.65rem 1rem; border-right: 1px solid #e2c69729; text-align: center; }
.as-demo-model:last-child { border: 0; }
.as-demo-model__size { color: #f8f0de; font-family: var(--as-font-serif); font-size: 3rem; line-height: 1; }
.as-demo-model__size small { color: #d8b783; font-size: 1.4rem; }
.as-demo-model__metric { display: block; margin-top: 0.3rem; color: #aeafa2; font-size: 0.7rem; }
.as-demo-model__handle { display: block; min-height: 2.7em; margin-top: 0.65rem; color: #c9cdbf; font-size: 0.68rem; }
.as-demo-legend { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; margin-bottom: 0.8rem; color: #bfc3b3; font-size: 0.66rem; }
.as-demo-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.as-demo-legend span::before { content: ""; display: inline-block; width: 1.4rem; background: #b7b8a6; height: 3px; }
.as-demo-legend .as-demo-legend__handle::before { height: 1px; background: #858f82; }
.as-demo-still__rod::before { content: ""; position: absolute; top: 0; left: -1px; width: 4px; background: #b7b8a6; }
.as-demo-still__rod--20::before { height: 60%; }
.as-demo-still__rod--28::before { height: 71.42857%; }
.as-demo-still__rod--36::before { height: 55.55556%; }
.as-demo-model__duration { margin: 1rem 0 0.5rem; color: #e2c697; font-size: 0.8rem; }
.as-demo-model__timer { display: block; color: #fffdf9; font-size: 1.5rem; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.3; }
.as-demo-model__state { display: block; margin: 0.3rem 0 1.2rem; color: #bdbfb1; font-size: 0.65rem; }
.as-demo-model > a { color: #e7d5b6; font-size: 0.7rem; text-underline-offset: 0.3em; }
.as-demo-model > a:hover { color: #fffdf9; }
.as-demo-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.as-sparkler-demo .as-button { min-height: 3rem; border: 1px solid #d7b580; border-radius: 0.2rem; background: #d7b580; color: #191c19; }
.as-sparkler-demo .as-button:hover { background: #ebcfa5; border-color: #ebcfa5; color: #191c19; }
.as-sparkler-demo .as-button--ghost { border-color: #e2c69766; background: transparent; color: #e7d5b6; }
.as-sparkler-demo .as-button--ghost:hover { background: #ffffff0d; color: #e7d5b6; }
.as-sparkler-demo .as-button:disabled { opacity: 0.45; cursor: default; transform: none; }
.as-demo-controls > label { display: flex; align-items: center; gap: 0.75rem; margin-left: 0.5rem; color: #bdbfb1; font-size: 0.75rem; }
.as-demo-controls select { width: auto; min-width: 6.5rem; min-height: 3rem; padding: 0.4rem 0.75rem; border: 1px solid #e2c69766; border-radius: 0.2rem; background: #1e251e; color: #fffdf9; font-size: 0.8rem; }
.as-demo-status { flex-basis: 100%; margin: 0.2rem 0 0; color: #c6c7bb; font-size: 0.75rem; }
.as-demo-note { max-width: 55rem; margin: 1rem 0 0; color: #b1b5a6; font-size: 0.74rem; line-height: 1.7; }
@media (max-width: 700px) {
	.as-sparkler-demo .as-demo-heading { grid-template-columns: 1fr; gap: 1rem; }
	.as-demo-stage { height: 24rem; }
	.as-demo-stage__label { left: 0.9rem; font-size: 0.5rem; }
	.as-demo-model { padding: 1.3rem 0.4rem; }
	.as-demo-model__size { font-size: 2.3rem; }
	.as-demo-model__handle { font-size: 0.57rem; }
	.as-demo-model__duration { min-height: 2.6em; font-size: 0.65rem; line-height: 1.5; }
	.as-demo-model > a { font-size: 0.6rem; }
	.as-demo-model__state { min-height: 2.6em; font-size: 0.58rem; }
	.as-demo-controls > label { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.as-sparkler-demo *, .as-sparkler-demo *::before, .as-sparkler-demo *::after { animation: none; transition: none; }
}