.stage{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 30px 70px #13203a24}.stage-canvas{position:relative;aspect-ratio:5 / 4;background:radial-gradient(80% 80% at 50% 30%,#fff,#ffeee3);cursor:grab}.stage-canvas:active{cursor:grabbing}.stage-canvas canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;touch-action:pan-y}.stage-still{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}.stage.live .stage-still{opacity:0;pointer-events:none}.stage-hint{position:absolute;top:14px;right:14px;padding:4px 12px;border-radius:999px;background:#13203abf;color:#fff;font:800 13px var(--body);opacity:0;transition:opacity .3s}.stage.live .stage-hint{opacity:1}.demo-play{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:48px}.demo-play.flip{grid-template-columns:1fr 1.05fr}.demo-side h2{margin-bottom:14px;font-size:clamp(30px,3.6vw,44px)}.demo-side>p:not(.demo-note):not(.eyebrow){color:var(--soft)}.demo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}.demo-open{display:inline-flex;align-items:center;padding:12px 22px;border-radius:14px;background:var(--violet);color:#fff;font:800 18px var(--display);text-decoration:none;box-shadow:0 10px 24px #ff6a2b47;transition:transform .12s,background .15s}.demo-open:hover{transform:translateY(-2px);background:#c9460f}.demo-more{color:#c9460f;font:800 16px var(--body);text-decoration:none}.demo-more:hover{text-decoration:underline}@media (max-width: 1000px){.demo-play,.demo-play.flip{grid-template-columns:1fr;gap:28px}.demo-play .demo-stage{order:-1}}.demo-controls{display:grid;gap:16px;margin:22px 0 14px}.demo-group{display:grid;gap:7px}.demo-label{color:var(--ink);font:800 15px var(--body)}.demo-choice{display:flex;flex-wrap:wrap;gap:6px}.demo-choice button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:800 15px var(--body);cursor:pointer;transition:border-color .15s,background .15s,color .15s}.demo-choice button[hidden]{display:none}.demo-choice button:hover{border-color:var(--violet)}.demo-choice button[aria-pressed=true]{border-color:var(--violet);background:var(--violet);color:#fff}.kind-dot{width:12px;height:12px;border-radius:4px}.kind-dot.solid{background:#f5b841}.kind-dot.hole{border:2px dashed currentColor}.demo-group input[type=range]{width:100%;max-width:320px;accent-color:var(--violet)}.demo-note{min-height:3.2em;color:var(--ink)!important;font-weight:700}.demo-stage .stage-canvas{aspect-ratio:1 / 1}.demo-align{display:grid;gap:6px}.demo-align-row{display:flex;align-items:center;gap:8px}.demo-align-row .axis-dot{width:9px;height:9px;border-radius:50%}.demo-align-row button{display:grid;place-items:center;width:58px;height:42px;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .12s}.demo-align-row button:hover{border-color:var(--violet);transform:translateY(-2px)}.demo-align-row button:active{background:var(--violet);color:#fff}.demo-align-row svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.demo-tag{position:absolute;z-index:1;padding:3px 10px;border-radius:999px;background:#13203a;color:#fff;font:800 13px var(--body);white-space:nowrap;pointer-events:none;transform:translate(-50%,-100%)}.try-here{margin-top:26px;padding:22px 24px 24px;border-radius:20px;background:var(--c-soft, #ffe5d6)}.try-here h3{margin:0 0 6px}.try-here .demo-play{gap:24px;margin-top:14px}.try-here .demo-play,.try-here .demo-play.flip{grid-template-columns:1fr 1fr}@media (max-width: 760px){.try-here{padding:18px 14px 20px}.try-here .demo-play,.try-here .demo-play.flip{grid-template-columns:1fr}}.practice-intro h1{margin-bottom:14px;font-size:clamp(36px,5vw,56px)}.practice-jump{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}.practice-jump a{display:inline-block;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:800 16px var(--body);text-decoration:none}.practice-jump a:hover{border-color:var(--violet)}.practice-head{margin-bottom:28px}.practice-head h2{margin-bottom:8px;font-size:clamp(28px,3.4vw,40px)}.practice-head p:not(.eyebrow){max-width:62ch;color:var(--soft)}.demo-slider{display:grid;grid-template-columns:9px 64px 1fr 110px;align-items:center;gap:10px;font:700 15px var(--body)}.demo-slider .axis-dot{width:9px;height:9px;border-radius:50%}.demo-slider input{width:100%;accent-color:var(--violet)}.demo-slider output{color:var(--soft);font-size:14px;text-align:right}.demo-swatches{display:flex;flex-wrap:wrap;gap:8px}.demo-swatches button{width:34px;height:34px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:transform .12s,box-shadow .15s}.demo-swatches button:hover{transform:scale(1.1)}.demo-swatches button[aria-pressed=true]{box-shadow:0 0 0 3px var(--violet)}.demo-count{align-self:center;margin-left:6px;color:var(--soft);font:800 15px var(--body)}