.device-model{isolation:isolate;touch-action:pan-y pinch-zoom;width:100%;min-width:0;height:460px;margin:0;position:relative}.device-model[data-scene=studio-display]{aspect-ratio:1.38;width:100%;max-width:none;height:auto}.device-model[data-scene=studio-display] .device-model-shadow{bottom:6%;left:34%;right:34%}.device-model-interaction[data-slot=button]{cursor:crosshair;background:0 0;border:0;border-radius:16px;width:100%;height:100%;padding:0;position:absolute;inset:0;transform:none}.device-model-canvas{opacity:0;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.device-model-fallback{align-items:center;display:grid;position:absolute;inset:0}.device-model-fallback .remote-scene{max-width:none;height:100%}.device-model-fallback .remote{width:auto;height:82%;top:5%;left:50%}.device-model-fallback .remote-black{transform:translate(-88%)rotate(-13deg)}.device-model-fallback .remote-silver{transform:translate(-12%)rotate(12deg)}.device-model-shadow{filter:blur(9px);opacity:0;pointer-events:none;background:radial-gradient(#1d26351a,#1d263508 45%,#0000 72%);height:22px;position:absolute;bottom:5%;left:17%;right:17%}.device-model[data-render-state=ready] .device-model-fallback{visibility:hidden}.device-model[data-render-state=ready] .device-model-canvas,.device-model[data-render-state=ready] .device-model-shadow{opacity:1}@media (width<=700px){.device-model{max-width:420px;height:350px;margin-inline:auto}}.controls-demo{--demo-duration:6s;--pointer-travel:82px;--drag-travel:32px;--scroll-travel:-226px;width:min(100%,760px);margin:0}.controls-demo-stage{pointer-events:none;-webkit-user-select:none;user-select:none}.controls-demo-stage *{animation-duration:var(--demo-duration);animation-timing-function:cubic-bezier(.45,0,.25,1);animation-play-state:paused;animation-fill-mode:both}.controls-demo[data-playing=true] .controls-demo-stage *{animation-play-state:running}.controls-demo-stage{grid-template-columns:140px minmax(0,1fr);align-items:center;gap:40px;padding:8px 16px 0;display:grid}.controls-demo-remote{justify-content:center;align-items:center;min-width:0;height:370px;display:flex;position:relative}.controls-demo-remote img{object-fit:contain;filter:drop-shadow(0 12px 12px #16202a15);-webkit-user-select:none;user-select:none;pointer-events:none;flex-shrink:0;width:200px;max-width:none;height:414px;display:block}.controls-demo-touch{pointer-events:none;background:#0071e3;border:2px solid #fff;border-radius:50%;width:12px;height:12px;position:absolute;top:80px;left:calc(50% - 6px);box-shadow:0 0 0 9px #0071e326}.controls-demo-desktop{min-width:0}.controls-demo-surface{isolation:isolate;background:#f5f5f7;border:1px solid #e5e5e8;border-radius:18px;position:relative;box-shadow:0 10px 36px #1723390a}.controls-demo-toolbar{background:#f0f0f2;border-radius:18px 18px 0 0;align-items:center;gap:5px;height:40px;padding:0 14px;display:flex}.controls-demo-toolbar>span{background:#cccdd1;border-radius:50%;width:6px;height:6px}.controls-demo-toolbar strong{color:#74747b;margin-inline:auto;padding-right:28px;font-size:11px;font-weight:500}.controls-demo-viewport{border-radius:0 0 18px 18px;height:252px;position:relative;overflow:hidden}.controls-demo-content{min-height:510px;padding-top:1px;position:relative}.controls-demo-card{color:#252527;background:#fff;border:1px solid #ebebed;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:162px;height:144px;padding:16px;display:flex;position:absolute;top:34px;left:calc(50% - 81px);box-shadow:0 6px 20px #17233908}.controls-demo-card>svg:not(.controls-demo-selected){color:#0071e3;fill:#daebff;width:52px;height:52px;margin-bottom:4px}.controls-demo-card span{font-size:12px}.controls-demo-card small{color:#77777d;font-size:10px;font-weight:400}.controls-demo-selected{color:#0071e3;opacity:0;position:absolute;top:9px;right:10px}.controls-demo-scroll-cue{color:#8b8b92;justify-content:center;align-items:center;gap:6px;font-size:10px;display:flex;position:absolute;top:212px;left:0;right:0}.controls-demo-scroll-reveal{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:310px 24px 44px;display:flex}.controls-demo-scroll-reveal svg{color:#0071e3}.controls-demo-scroll-reveal strong{font-size:18px;font-weight:500}.controls-demo-scroll-reveal span{color:#74747b;max-width:24ch;font-size:12px}.controls-demo-pointer{z-index:2;fill:#111;stroke:#fff;stroke-width:1.5px;stroke-linejoin:round;filter:drop-shadow(0 1px 2px #0003);pointer-events:none;position:absolute;top:104px;left:50%}.controls-demo-feedback{color:#74747b;justify-content:center;align-items:center;gap:7px;height:44px;font-size:12px;display:flex}.controls-demo-status-dot{background:#0071e3;border-radius:50%;width:5px;height:5px}.controls-demo-mappings{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:28px;display:grid}.controls-demo-mapping[data-slot=button]{text-align:left;white-space:normal;border-radius:14px;justify-content:flex-start;align-items:flex-start;gap:10px;height:auto;min-height:76px;padding:14px}.controls-demo-mapping[aria-pressed=true]{background:#f0f6fe}.controls-demo-mapping svg{color:#0071e3;margin-top:2px}.controls-demo-mapping strong{font-size:13px;font-weight:500;display:block}.controls-demo-mapping small{color:#74747b;margin-top:5px;font-size:11px;font-weight:400;line-height:1.5;display:block}.controls-demo[data-mode=pointer] .controls-demo-pointer{animation-name:controls-pointer-glide}.controls-demo[data-mode=pointer] .controls-demo-touch{animation-name:controls-touch-glide}.controls-demo[data-mode=drag] .controls-demo-pointer{animation-name:controls-pointer-drag}.controls-demo[data-mode=drag] .controls-demo-card{animation-name:controls-folder-drag}.controls-demo[data-mode=drag] .controls-demo-selected{animation-name:controls-folder-select}.controls-demo[data-mode=drag] .controls-demo-touch{animation-name:controls-touch-drag}.controls-demo[data-mode=scroll] .controls-demo-pointer{animation-name:controls-pointer-scroll}.controls-demo[data-mode=scroll] .controls-demo-content{animation-name:controls-page-scroll}.controls-demo[data-mode=scroll] .controls-demo-touch{animation-name:controls-touch-scroll}@keyframes controls-pointer-glide{0%,to{transform:translate(calc(-1 * var(--pointer-travel)), 58px)}25%{transform:translate(-30px,-58px)}55%{transform:translate(var(--pointer-travel), -8px)}78%{transform:translate(26px,72px)}}@keyframes controls-touch-glide{0%,to{transform:translate(-11px,8px)}25%{transform:translate(-4px,-12px)}55%{transform:translate(12px,-2px)}78%{transform:translate(4px,10px)}}@keyframes controls-pointer-drag{0%,to{transform:translate(calc(-1 * var(--pointer-travel)), 58px)}24%,30%{transform:translate(calc(-1 * var(--drag-travel)), -4px)}58%,76%{transform:translate(var(--drag-travel), -24px)}90%{transform:translate(48px,48px)}}@keyframes controls-folder-drag{0%,24%,to{transform:translate(calc(-1 * var(--drag-travel)), 0);border-color:#ebebed}30%{transform:translate(calc(-1 * var(--drag-travel)), 0);border-color:#0071e3}58%,76%{transform:translate(var(--drag-travel), -20px);border-color:#0071e3}}@keyframes controls-folder-select{0%,24%,92%,to{opacity:0}30%,76%{opacity:1}}@keyframes controls-touch-drag{0%,24%,to{transform:translate(-8px,4px)scale(1)}30%{transform:translate(-8px,4px)scale(.78)}58%,76%{transform:translate(10px,-4px)scale(.78)}90%{transform:translate(10px,-4px)scale(1)}}@keyframes controls-pointer-scroll{0%,to{transform:translate(42px,26px)}25%,78%{transform:translate(42px,14px)}}@keyframes controls-page-scroll{0%,18%,to{transform:translateY(0)}48%,74%{transform:translateY(var(--scroll-travel))}}@keyframes controls-touch-scroll{0%,18%,to{transform:translateY(10px)}48%,74%{transform:translateY(-12px)}}@media (prefers-reduced-motion:reduce){.controls-demo-stage *{animation:none}.controls-demo[data-mode=drag] .controls-demo-card{transform:translate(var(--drag-travel), -20px);border-color:#0071e3}.controls-demo[data-mode=drag] .controls-demo-selected{opacity:1}.controls-demo[data-mode=scroll] .controls-demo-content{transform:translateY(var(--scroll-travel))}}@media (width<=600px){.controls-demo{--pointer-travel:46px;--drag-travel:16px;--scroll-travel:-244px}.controls-demo-stage{grid-template-columns:76px minmax(0,1fr);gap:12px;padding-inline:0}.controls-demo-remote{height:270px}.controls-demo-remote img{width:142px;height:294px}.controls-demo-touch{border-width:1px;width:8px;height:8px;top:58px;left:calc(50% - 4px);box-shadow:0 0 0 6px #0071e326}.controls-demo-viewport{height:218px}.controls-demo-card{width:138px;height:138px;top:24px;left:calc(50% - 69px)}.controls-demo-scroll-cue{font-size:9px;top:190px}.controls-demo-feedback{font-size:11px}.controls-demo-mappings{gap:4px;margin-top:16px}.controls-demo-mapping[data-slot=button]{flex-direction:column;gap:8px;padding:12px 8px}.controls-demo-mapping strong{font-size:12px}.controls-demo-mapping small{font-size:11px}}.presentation-demo{--demo-duration:12s;--demo-play-state:paused;min-width:0;margin:0}.presentation-demo[data-playback=playing]{--demo-play-state:running}.presentation-demo-art{width:100%;height:auto;font-family:inherit;display:block}.presentation-demo-caption{color:var(--foreground);flex-direction:column;align-items:center;gap:10px;margin:0;font-size:14px;font-weight:500;display:flex}.demo-mode-switch{background:#f5f5f7;border-radius:28px;gap:4px;padding:4px;display:flex}.demo-mode-switch [aria-pressed=true]{color:#0071e3;background:#fff;box-shadow:0 1px 5px #0000000d}.presentation-section .demo-interaction-hint{color:var(--muted-foreground);text-align:center;margin:0;font-size:12px}.presentation-demo[data-feature] .presentation-demo-spotlight{opacity:0;animation:none}.presentation-demo[data-feature] .presentation-demo-laser{opacity:0;animation-name:presentation-demo-laser-path}.presentation-demo[data-feature=spotlight] .presentation-demo-spotlight{opacity:.72}.presentation-demo[data-feature=laser] .presentation-demo-laser{opacity:1}.device-model[data-pointer-active=true] .presentation-demo-spotlight-target,.device-model[data-pointer-active=true] .presentation-demo-laser{transform:translate(var(--demo-pointer-x,0px), var(--demo-pointer-y,0px));animation:none}.presentation-demo-motion{animation-duration:var(--demo-duration);animation-iteration-count:infinite;animation-play-state:var(--demo-play-state)}.presentation-demo-spotlight{opacity:.72;animation-name:presentation-demo-spotlight-visible}.presentation-demo-spotlight-target{animation-name:presentation-demo-spotlight-path}.presentation-demo-laser{opacity:0;animation-name:presentation-demo-laser-visible,presentation-demo-laser-path}@keyframes presentation-demo-spotlight-visible{0%,44%,to{opacity:.72}48%,96%{opacity:0}}@keyframes presentation-demo-spotlight-path{0%,5%,to{transform:translate(0)}18%,23%{transform:translate(184px,-12px)}38%,50%{transform:translate(368px,10px)}51%,96%{transform:translate(0)}}@keyframes presentation-demo-laser-visible{0%,48%,96%,to{opacity:0}52%,94%{opacity:1}}@keyframes presentation-demo-laser-path{0%,51%,to{transform:translate(-12px,8px)}64%,67%{transform:translate(184px,-5px)}77%{transform:translate(360px,65px)}85%,88%{transform:translate(374px)}96%{transform:translate(200px,20px)}}@media (prefers-reduced-motion:reduce){.presentation-demo-motion{animation:none}}