@property --amb-elevation{syntax: "<number>"; inherits: false; initial-value: 0;}:root{--amb-light-x: -1;--amb-light-y: -1;--amb-key-light-intensity: .9;--amb-fill-light-intensity: .7;--amb-light-hue: 234;--amb-light-saturation: 15%;--amb-light-distance: 0px;--amb-chamfer: 0;--amb-fillet: 0;--amb-thickness: 0;--amb-elevation: 0;--amb-chamfer-width: 1;--amb-fillet-width: 1;--amb-highlight-color: coral;--amb-lume-hue: 17;--amb-mat-specular: 0;--amb-mat-roughness: 1;--amb-mat-opacity: 1;--amb-lume: color-mix( in oklab, hsl(var(--amb-lume-hue) 100% 74%) calc(max(0, min((.5 - var(--amb-key-light-intensity)) / .2, 1))*100%) , hsl( var(--amb-light-hue) var(--amb-light-saturation) calc((1 - sign(var(--amb-key-light-intensity) - .5))*50% + 25%) ) );--amb-label: hsl( var(--amb-light-hue) var(--amb-light-saturation) calc((1 - var(--amb-key-light-intensity)) * 60% + 20%) )}.amb-chamfer{--amb-chamfer: 1;--amb-thickness: 1}.amb-chamfer-2{--amb-chamfer: 1;--amb-chamfer-width: 2;--amb-thickness: 2}.amb-fillet{--amb-fillet: 1;--amb-thickness: 1}.amb-fillet-2{--amb-fillet: 1;--amb-fillet-width: 2;--amb-thickness: 2}.amb-groove{--amb-thickness: 1}.amb-thickness-0{--amb-thickness: 0}.amb-thickness-1{--amb-thickness: 1}.amb-thickness-2{--amb-thickness: 2}.amb-elevation-0{--amb-elevation: 0}.amb-elevation-1{--amb-elevation: 1}.amb-elevation-2{--amb-elevation: 2}.amb-elevation-3{--amb-elevation: 3}.ambient{--_amb-chamfer-w: max(-1 * var(--amb-thickness), min(var(--amb-chamfer-width), var(--amb-thickness)));--_amb-fillet-w: max(-1 * var(--amb-thickness), min(var(--amb-fillet-width), var(--amb-thickness)));--_amb-sh-gate: max(0, min(var(--amb-elevation) + var(--amb-thickness), 1));--_amb-body-gate: max(0, min(var(--amb-thickness), 1));--_amb-sweep-a: calc( var(--_amb-sh-gate) * var(--_amb-body-gate) * max(0, 1 - var(--amb-elevation) / 3) * (var(--amb-thickness) * .02 + .047) );box-shadow:hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc(var(--_amb-sh-gate) * ((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * .13 + var(--amb-elevation) * -.077 + .368 - var(--_amb-body-gate) * max(0,1 - var(--amb-elevation)) * .14))) calc(var(--amb-light-x) * (var(--amb-elevation) * 6.8px + var(--amb-thickness) * 3.8px) * -1) calc(var(--amb-light-y) * (var(--amb-elevation) * 6.8px + var(--amb-thickness) * 3.8px) * -1) calc(var(--amb-elevation) * 4.8px + var(--amb-thickness) * 2.7px) .8px,hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / var(--_amb-sweep-a)) calc(var(--amb-light-x) * (var(--amb-elevation) * 6.8px + var(--amb-thickness) * 2.85px) * -1) calc(var(--amb-light-y) * (var(--amb-elevation) * 6.8px + var(--amb-thickness) * 2.85px) * -1) calc(var(--amb-elevation) * 4.8px + var(--amb-thickness) * 2px) calc(var(--amb-thickness) * .9px),hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / var(--_amb-sweep-a)) calc(var(--amb-light-x) * (var(--amb-elevation) * 6.8px + var(--amb-thickness) * 1.9px) * -1) calc(var(--amb-light-y) * (var(--amb-elevation) * 6.8px + var(--amb-thickness) * 1.9px) * -1) calc(var(--amb-elevation) * 4.8px + var(--amb-thickness) * 1.35px) calc(var(--amb-thickness) * .6px),hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / var(--_amb-sweep-a)) calc(var(--amb-light-x) * (var(--amb-elevation) * 6.8px + var(--amb-thickness) * .95px) * -1) calc(var(--amb-light-y) * (var(--amb-elevation) * 6.8px + var(--amb-thickness) * .95px) * -1) calc(var(--amb-elevation) * 4.8px + var(--amb-thickness) * .7px) calc(var(--amb-thickness) * .3px),inset calc(var(--amb-light-x) * var(--_amb-chamfer-w) * -1px) calc(var(--amb-light-y) * var(--_amb-chamfer-w) * -1px) 0 0 hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-chamfer) * max(0,min(var(--amb-thickness),1)) * (var(--amb-key-light-intensity) * 1.57 + var(--amb-fill-light-intensity) * .85 - 1.03))),inset calc(var(--amb-light-x) * var(--_amb-chamfer-w) * 1px) calc(var(--amb-light-y) * var(--_amb-chamfer-w) * 1px) 0 0 hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc(var(--amb-chamfer) * max(0,min(var(--amb-thickness),1)) * ((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * .19 + .24))),inset calc(var(--amb-light-x) * var(--_amb-fillet-w) * -1.4px) calc(var(--amb-light-y) * var(--_amb-fillet-w) * -1.4px) 2px 0 hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-fillet) * max(0,min(var(--amb-thickness),1)) * (var(--amb-key-light-intensity) * 1.44 + var(--amb-fill-light-intensity) * .85 - .99))),inset calc(var(--amb-light-x) * var(--_amb-fillet-w) * 1.4px) calc(var(--amb-light-y) * var(--_amb-fillet-w) * 1.4px) 2px 0 hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc(var(--amb-fillet) * max(0,min(var(--amb-thickness),1)) * ((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * .23 + .3)))}.amb-surface{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 31.5% + var(--amb-fill-light-intensity) * 26.4% + 43.6%))}.amb-surface-darker{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 21% + var(--amb-fill-light-intensity) * 17.4% + 27.3%))}.amb-surface-darkest{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 10.6% + var(--amb-fill-light-intensity) * 8.8% + 11%))}.amb-surface-lighter{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 32.8% + var(--amb-fill-light-intensity) * 27.2% + 45.8%))}.amb-surface-lightest{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 33.4% + var(--amb-fill-light-intensity) * 27.7% + 46.7%))}.amb-groove{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 30.2% + var(--amb-fill-light-intensity) * 23.2% + 47.6%));box-shadow:inset calc(var(--amb-light-x) * var(--amb-thickness) * -3.6px) calc(var(--amb-light-y) * var(--amb-thickness) * -3.6px) calc(var(--amb-thickness) * 2.7px) 0 hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc(max(0,min(var(--amb-thickness),1)) * ((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * .24 + .31))),inset calc(var(--amb-light-x) * var(--amb-thickness) * 2.7px) calc(var(--amb-light-y) * var(--amb-thickness) * 2.7px) calc(var(--amb-thickness) * 5.1px) 0 hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(max(0,min(var(--amb-thickness),1))*max(0,min(var(--amb-key-light-intensity) * 1.5 + var(--amb-fill-light-intensity) * .72 - .96,1))))}.amb-mat-shiny{--amb-mat-specular: 1;--amb-mat-roughness: 0;--amb-mat-opacity: 1;--_shiny-angle: calc(atan2(var(--amb-light-y), var(--amb-light-x)) + 270deg) ;--_spec-peak: var(--amb-key-light-intensity);background-image:linear-gradient(var(--_shiny-angle),hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-key-light-intensity) * .09 + .07)) 0%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 10%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 24%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--_spec-peak) * .04 + .31)) 30%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 36%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 100%),linear-gradient(to bottom,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-fill-light-intensity) * .22)),hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 45%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / 0) 60%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc(var(--amb-fill-light-intensity) * .1)));filter:brightness(1.04) contrast(1.01)}.amb-mat-glass{--amb-mat-specular: .05;--amb-mat-roughness: .9;--amb-mat-opacity: 0;--_shiny-angle: calc(atan2(var(--amb-light-y), var(--amb-light-x)) + 270deg) ;--_spec-peak: var(--amb-key-light-intensity);background-image:linear-gradient(var(--_shiny-angle),hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--_spec-peak) * .12)) 0%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--_spec-peak) * .06)) 40%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 75%,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / 0) 100%);background-blend-mode:screen;--_glass-lightness: calc(var(--amb-key-light-intensity) * 100%);--_glass-alpha: calc(.05 + var(--amb-key-light-intensity) * .1);--_glass-blur: calc(8px + var(--amb-key-light-intensity) * 8px);background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_glass-lightness) / var(--_glass-alpha));backdrop-filter:blur(var(--_glass-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--_glass-blur)) saturate(160%);border:1px solid hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(.1 + var(--amb-key-light-intensity) * .15))}.amb-surface-concave{--_concave-y: max(-1, min(var(--amb-light-y), 1));--_surface-base: calc( var(--amb-key-light-intensity) * 31.5% + var(--amb-fill-light-intensity) * 26.4% + 43.6% );--_concave-delta: calc( var(--_concave-y) * ( (var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * 3.16% + 3.78% ) );background:linear-gradient(hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) + var(--_concave-delta))),hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) + var(--_concave-delta) * .33)) 35%,hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_surface-base)),hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) - var(--_concave-delta) * .33)) 65%,hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) - var(--_concave-delta))))}.amb-surface-concave-h{--_concave-h-x: max(-1, min(var(--amb-light-x), 1));--_surface-base: calc( var(--amb-key-light-intensity) * 31.5% + var(--amb-fill-light-intensity) * 26.4% + 43.6% );--_concave-h-delta: calc( var(--_concave-h-x) * ( (var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * 3.16% + 3.78% ) );background:linear-gradient(to right,hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) + var(--_concave-h-delta))),hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) + var(--_concave-h-delta) * .33)) 35%,hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_surface-base)),hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) - var(--_concave-h-delta) * .33)) 65%,hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) - var(--_concave-h-delta))))}.amb-surface-convex{--_convex-y: max(-1, min(var(--amb-light-y), 1));--_surface-base: calc( var(--amb-key-light-intensity) * 31.5% + var(--amb-fill-light-intensity) * 26.4% + 43.6% );--_convex-delta: calc( var(--_convex-y) * ( (var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * 3.16% + 3.78% ) );background:linear-gradient(hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) - var(--_convex-delta))),hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) - var(--_convex-delta) * .33)) 35%,hsl(var(--amb-light-hue) var(--amb-light-saturation) var(--_surface-base)),hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) + var(--_convex-delta) * .33)) 65%,hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--_surface-base) + var(--_convex-delta))))}.amb-light-tl{--amb-light-x: -1;--amb-light-y: -1}.amb-light-tr{--amb-light-x: 1;--amb-light-y: -1}.amb-light-bl{--amb-light-x: -1;--amb-light-y: 1}.amb-light-br{--amb-light-x: 1;--amb-light-y: 1}.amb-light-top{--amb-light-x: 0;--amb-light-y: -1}.amb-light-bottom{--amb-light-x: 0;--amb-light-y: 1}.amb-light-left{--amb-light-x: -1;--amb-light-y: 0}.amb-light-right{--amb-light-x: 1;--amb-light-y: 0}.amb-emit-red{--amb-emit-color: #ef4444}.amb-emit-green{--amb-emit-color: #4ade80}.amb-emit-amber{--amb-emit-color: #f59e0b}.amb-emit-cyan{--amb-emit-color: #22d3d3}.amb-emit-blue{--amb-emit-color: #3b82f6}.amb-emit-white{--amb-emit-color: #ffffff}.amb-rounded{border-radius:4px}.amb-rounded-md{border-radius:8px}.amb-rounded-lg{border-radius:12px}.amb-rounded-xl{border-radius:16px}.amb-rounded-full{border-radius:9999px}.amb-glow{box-shadow:0 0 6.2px var(--amb-lume)}@keyframes amb-bounce-elevation{0%,to{--amb-elevation: 0}15%{--amb-elevation: 3}30%{--amb-elevation: 0}42%{--amb-elevation: 2}54%{--amb-elevation: 0}64%{--amb-elevation: 1}74%{--amb-elevation: 0}}.amb-bounce{animation:amb-bounce-elevation 2s ease-in-out infinite}:root{--ambx-grid: 4px;--ambx-grid-half: calc(var(--ambx-grid) / 2);--ambx-grid-quarter: calc(var(--ambx-grid) / 4);--ambx-radius-sm: calc(var(--ambx-grid) * 1);--ambx-radius-md: calc(var(--ambx-grid) * 2);--ambx-radius-lg: calc(var(--ambx-grid) * 3);--ambx-radius-xl: calc(var(--ambx-grid) * 4);--ambx-radius-full: 9999px;--ambx-gap-tight: calc(var(--ambx-grid) * 3);--ambx-gap-normal: calc(var(--ambx-grid) * 5);--ambx-gap-loose: calc(var(--ambx-grid) * 8);--ambx-type-1-size: calc(var(--ambx-grid) * 8);--ambx-type-1-line: calc(var(--ambx-grid) * 10);--ambx-type-2-size: calc(var(--ambx-grid) * 6);--ambx-type-2-line: calc(var(--ambx-grid) * 8);--ambx-type-3-size: calc(var(--ambx-grid) * 3);--ambx-type-3-line: calc(var(--ambx-grid) * 4);--ambx-type-tracking: var(--ambx-grid-quarter);--ambx-label-size: calc(var(--ambx-grid) * 2 + var(--ambx-grid-half));--ambx-label-line: calc(var(--ambx-grid) * 3);--ambx-control-label-gap: calc(var(--ambx-grid) * 2);--ambx-knob-label-clearance: calc(var(--ambx-grid) * 2);--ambx-slider-label-clearance: calc(var(--ambx-grid) * 2);--ambx-fader-label-clearance: calc(var(--ambx-grid) * 4)}.amb-button,.amb-knob,.amb-switch,.amb-fader,.amb-slider,.ambx-panel,.ambx-stack,.amb-button *,.amb-knob *,.amb-switch *,.amb-fader *,.amb-slider *,.ambx-panel *,.ambx-stack *{box-sizing:border-box}.amb-heading-1{font-size:var(--ambx-type-1-size);line-height:var(--ambx-type-1-line);letter-spacing:var(--ambx-type-tracking)}.amb-heading-2{font-size:var(--ambx-type-2-size);line-height:var(--ambx-type-2-line);letter-spacing:var(--ambx-type-tracking)}.amb-heading-3{font-size:var(--ambx-type-3-size);line-height:var(--ambx-type-3-line);letter-spacing:var(--ambx-type-tracking)}.amb-button{cursor:pointer;border:none;padding:var(--ambx-grid-half);--amb-thickness: .27;background-color:var(--amb-lume);border-radius:calc(var(--ambx-radius-lg) + var(--ambx-grid-half));min-width:var(--ambx-button-size)}.amb-button-cap{display:grid;place-items:center;width:100%;padding:var(--ambx-button-cap-pad-y) var(--ambx-button-cap-pad-x);border-radius:var(--ambx-radius-lg);text-transform:uppercase;font-weight:600;color:var(--amb-label)}.amb-button:focus{outline-offset:var(--ambx-grid)}.amb-button:hover .amb-button-cap{color:var(--amb-highlight-color)}.amb-button:active .amb-button-cap{--amb-thickness: .84}.amb-button.amb-button-round{min-width:var(--ambx-button-size);aspect-ratio:1;border-radius:50%}.amb-button-round .amb-button-cap{height:100%;padding:var(--ambx-button-cap-inset);border-radius:50%}.amb-button.amb-button-square{min-width:var(--ambx-button-size);aspect-ratio:1;border-radius:var(--ambx-radius-md)}.amb-button-square .amb-button-cap{height:100%;padding:var(--ambx-button-cap-inset);border-radius:calc(var(--ambx-radius-md) - var(--ambx-grid-half));--amb-thickness: .8}.amb-button.amb-button-square:active .amb-button-cap{--amb-thickness: .64}.amb-knob{border-radius:50%;height:var(--ambx-knob-size);width:var(--ambx-knob-size)}.amb-knob-body{position:absolute;inset:calc(var(--ambx-grid) / 2);border-radius:50%}.amb-knob-face{position:absolute;top:0;right:0;bottom:0;left:0;background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 31.5% + var(--amb-fill-light-intensity) * 26.4% + 43.6%));background-image:radial-gradient(circle,hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 31.5% + var(--amb-fill-light-intensity) * 26.4% + 43.6%)) 0 60%,transparent 61%),repeating-conic-gradient(from 90deg,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-key-light-intensity) * .35)) 0deg 1.4deg,transparent 2.2deg 4.6deg,hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * .3 + .16)) 5deg 6.4deg,transparent 7.2deg 10deg)}.amb-knob-face-flute{background-image:radial-gradient(circle,hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 31.5% + var(--amb-fill-light-intensity) * 26.4% + 43.6%)) 0 60%,transparent 61%),repeating-conic-gradient(from 90deg,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-key-light-intensity) * .45)) 0deg 2.1deg,transparent 3.2deg 17.4deg,hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * .35 + .2)) 18.5deg 20.6deg,transparent 21.6deg 25.7143deg)}.amb-knob-face-fine{background-image:radial-gradient(circle,hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 31.5% + var(--amb-fill-light-intensity) * 26.4% + 43.6%)) 0 60%,transparent 61%),repeating-conic-gradient(from 90deg,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-key-light-intensity) * .35)) 0deg 1.05deg,transparent 1.65deg 3.45deg,hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * .3 + .16)) 3.75deg 4.8deg,transparent 5.4deg 7.5deg)}.amb-knob-face-cap{background-image:radial-gradient(circle,var(--amb-highlight-color) 0 65%,transparent 66%),repeating-conic-gradient(from 90deg,hsl(var(--amb-light-hue) var(--amb-light-saturation) 100% / calc(var(--amb-key-light-intensity) * .35)) 0deg 1.05deg,transparent 1.65deg 3.45deg,hsl(var(--amb-light-hue) var(--amb-light-saturation) 0% / calc((var(--amb-key-light-intensity) - var(--amb-fill-light-intensity)) * .3 + .16)) 3.75deg 4.8deg,transparent 5.4deg 7.5deg)}.amb-knob-indicator-dot{position:absolute;top:16%;left:50%;transform:translate(-50%);width:calc(var(--ambx-knob-size) * .125);height:calc(var(--ambx-knob-size) * .125);border-radius:50%;background:var(--amb-highlight-color)}.amb-knob-indicator-dot-center{top:50%;transform:translate(-50%,-50%);width:calc(var(--ambx-knob-size) * .28125);height:calc(var(--ambx-knob-size) * .28125)}.amb-knob-indicator-line{position:absolute;top:12%;left:50%;transform:translate(-50%);width:var(--ambx-knob-line-width);height:34%;border-radius:calc(var(--ambx-knob-line-width) / 2);background:var(--amb-highlight-color)}.amb-knob:hover .amb-knob-indicator-dot,.amb-knob:hover .amb-knob-indicator-line{background:color-mix(in oklab,var(--amb-highlight-color),white 25%)}.amb-fader{position:relative;width:var(--ambx-fader-track);height:calc(var(--ambx-grid) * 30);border-radius:var(--ambx-radius-full);background-color:var(--amb-lume)}.amb-fader-thumb{position:absolute;width:var(--ambx-fader-thumb-w);height:var(--ambx-fader-thumb-h);left:50%;top:50%;transform:translate(-50%,-50%);border-radius:var(--ambx-radius-md);display:grid;place-items:center;--amb-thickness: 1.5;--amb-elevation: .28}.amb-fader-gripline{width:70%;height:2px;border-radius:1px;background:var(--amb-lume)}.amb-slider{position:relative;height:var(--ambx-slider-track);width:calc(var(--ambx-grid) * 30);border-radius:var(--ambx-radius-full);background-color:var(--amb-lume);--amb-thickness: .22}.amb-slider-thumb{position:absolute;width:var(--ambx-slider-thumb);height:var(--ambx-slider-thumb);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;--amb-thickness: .7}.amb-led{width:calc(var(--ambx-grid) * 2);height:calc(var(--ambx-grid) * 2);border-radius:50%;background-color:var(--amb-led-color, #0f0);box-shadow:0 0 var(--ambx-grid-quarter) var(--amb-led-color, #0f0);transition:background-color .15s ease,box-shadow .15s ease}.amb-led-off{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 30%));box-shadow:none}.amb-switch{cursor:pointer;border:none;padding:0;background:none;display:inline-grid;justify-items:center;gap:var(--ambx-grid);margin:0}.amb-switch-track{position:relative;display:block;width:var(--ambx-switch-w);height:var(--ambx-switch-h);border-radius:calc(var(--ambx-switch-h) / 2);background-color:var(--amb-lume);--amb-thickness: .33}.amb-switch-pill{position:absolute;top:50%;left:0;width:calc(var(--ambx-switch-w) * .52);height:calc(var(--ambx-switch-h) * .78);border-radius:calc(var(--ambx-switch-h) * .39);transform:translate(calc(var(--ambx-switch-h) * .11),-50%);transition:transform .14s ease;--amb-thickness: .58}.amb-switch-on .amb-switch-pill{transform:translate(calc(var(--ambx-switch-w) - 100% - var(--ambx-switch-h) * .11),-50%)}.amb-switch:hover .amb-switch-pill{background-color:color-mix(in oklab,hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 31.5% + var(--amb-fill-light-intensity) * 26.4% + 43.6%)),var(--amb-highlight-color) 12%)}.ambx-panel{border-radius:var(--ambx-radius-xl);padding:calc(var(--ambx-grid) * 4)}.ambx-panel-device{padding:var(--ambx-gap-loose)}.ambx-rack{display:flex;align-items:center;gap:var(--ambx-gap-normal)}.ambx-rack-tight{gap:var(--ambx-gap-tight)}.ambx-rack-loose{gap:var(--ambx-gap-loose)}.ambx-rack-column{flex-direction:column}.ambx-button{line-height:var(--ambx-type-3-line);--ambx-button-size: calc(var(--ambx-grid) * 18);--ambx-button-cap-pad-x: calc(var(--ambx-grid) * 2);--ambx-button-cap-pad-y: calc(var(--ambx-grid) * 1.5);--ambx-button-cap-inset: var(--ambx-grid)}.ambx-button-sm{--ambx-button-size: calc(var(--ambx-grid) * 16);--ambx-button-cap-pad-x: calc(var(--ambx-grid) * 1.5);--ambx-button-cap-pad-y: var(--ambx-grid);--ambx-button-cap-inset: calc(var(--ambx-grid) * .75)}.ambx-button-md{--ambx-button-size: calc(var(--ambx-grid) * 18);--ambx-button-cap-pad-x: calc(var(--ambx-grid) * 2);--ambx-button-cap-pad-y: calc(var(--ambx-grid) * 1.5);--ambx-button-cap-inset: var(--ambx-grid)}.ambx-button-lg{--ambx-button-size: calc(var(--ambx-grid) * 20);--ambx-button-cap-pad-x: calc(var(--ambx-grid) * 2.5);--ambx-button-cap-pad-y: calc(var(--ambx-grid) * 2);--ambx-button-cap-inset: calc(var(--ambx-grid) * 1.25)}.amb-button-round.ambx-button-sm{--ambx-button-size: calc(var(--ambx-grid) * 10)}.amb-button-round.ambx-button-md{--ambx-button-size: calc(var(--ambx-grid) * 12)}.amb-button-round.ambx-button-lg{--ambx-button-size: calc(var(--ambx-grid) * 14)}.amb-button-square.ambx-button-sm{--ambx-button-size: calc(var(--ambx-grid) * 12)}.amb-button-square.ambx-button-md{--ambx-button-size: calc(var(--ambx-grid) * 14)}.amb-button-square.ambx-button-lg{--ambx-button-size: calc(var(--ambx-grid) * 16)}.ambx-button-sm .amb-button-cap{font-size:var(--ambx-label-size);line-height:var(--ambx-label-line)}.ambx-button-lg .amb-button-cap{font-size:calc(var(--ambx-grid) * 3.5);line-height:calc(var(--ambx-grid) * 5)}.ambx-switch{--ambx-switch-w: calc(var(--ambx-grid) * 12);--ambx-switch-h: calc(var(--ambx-grid) * 6)}.ambx-switch-sm{--ambx-switch-w: calc(var(--ambx-grid) * 10);--ambx-switch-h: calc(var(--ambx-grid) * 5)}.ambx-switch-md{--ambx-switch-w: calc(var(--ambx-grid) * 12);--ambx-switch-h: calc(var(--ambx-grid) * 6)}.ambx-switch-lg{--ambx-switch-w: calc(var(--ambx-grid) * 16);--ambx-switch-h: calc(var(--ambx-grid) * 8)}.ambx-stack{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ambx-control-label-gap)}.ambx-label{font-size:var(--ambx-label-size);line-height:var(--ambx-label-line);letter-spacing:var(--ambx-grid-quarter);text-transform:uppercase;color:var(--amb-label)}.ambx-slider+.ambx-label{margin-top:var(--ambx-slider-label-clearance)}.ambx-fader+.ambx-label{margin-top:var(--ambx-fader-label-clearance)}.ambx-knob+.ambx-label{margin-top:var(--ambx-knob-label-clearance)}.ambx-knob{position:relative;display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none;--ambx-knob-size: calc(var(--ambx-grid) * 16);--ambx-knob-line-width: calc(var(--ambx-knob-size) * .046875)}.ambx-knob-sm{--ambx-knob-size: calc(var(--ambx-grid) * 12)}.ambx-knob-md{--ambx-knob-size: calc(var(--ambx-grid) * 16)}.ambx-knob-lg{--ambx-knob-size: calc(var(--ambx-grid) * 20)}.ambx-knob-rotation{position:absolute;top:0;right:0;bottom:0;left:0}.ambx-fader{touch-action:none;-webkit-user-select:none;user-select:none;--ambx-fader-track: calc(var(--ambx-grid) * 2);--ambx-fader-thumb-w: calc(var(--ambx-grid) * 6);--ambx-fader-thumb-h: calc(var(--ambx-grid) * 9)}.ambx-fader-sm{--ambx-fader-track: calc(var(--ambx-grid) * 1.5);--ambx-fader-thumb-w: calc(var(--ambx-grid) * 5);--ambx-fader-thumb-h: calc(var(--ambx-grid) * 7.5)}.ambx-fader-md{--ambx-fader-track: calc(var(--ambx-grid) * 2);--ambx-fader-thumb-w: calc(var(--ambx-grid) * 6);--ambx-fader-thumb-h: calc(var(--ambx-grid) * 9)}.ambx-fader-lg{--ambx-fader-track: calc(var(--ambx-grid) * 3);--ambx-fader-thumb-w: calc(var(--ambx-grid) * 8);--ambx-fader-thumb-h: calc(var(--ambx-grid) * 12)}.ambx-fader-thumb{transform:translate(-50%,-50%)}.ambx-slider{touch-action:none;-webkit-user-select:none;user-select:none;--ambx-slider-track: calc(var(--ambx-grid) * 2);--ambx-slider-thumb: calc(var(--ambx-grid) * 6)}.ambx-slider-sm{--ambx-slider-track: calc(var(--ambx-grid) * 1.5);--ambx-slider-thumb: calc(var(--ambx-grid) * 5)}.ambx-slider-md{--ambx-slider-track: calc(var(--ambx-grid) * 2);--ambx-slider-thumb: calc(var(--ambx-grid) * 6)}.ambx-slider-lg{--ambx-slider-track: calc(var(--ambx-grid) * 3);--ambx-slider-thumb: calc(var(--ambx-grid) * 8)}.ambx-slider-thumb{transform:translate(-50%,-50%)}*,*:before,*:after{box-sizing:border-box}:root{--grid: 4px}html{scroll-behavior:smooth;scroll-snap-type:y proximity}body{font-family:Michroma,sans-serif;margin:0;padding:0;overflow-x:hidden;background:#000}.scene{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;scroll-snap-align:start;max-width:100vw;padding-bottom:6em}.scene-inner{width:100%;max-width:1200px;padding:80px 40px;margin:0 auto}.scene-label{font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--amb-lume);margin-bottom:48px;text-align:center}.scene-subtitle{font-size:9px;letter-spacing:.25em;text-transform:lowercase;color:var(--amb-lume);text-align:center;margin-top:-36px;margin-bottom:48px;opacity:.6}.scene-hint{font-size:9px;letter-spacing:.25em;text-transform:lowercase;color:var(--amb-lume);text-align:center;margin-bottom:32px}.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;max-width:100vw;overflow:hidden;padding-bottom:120px}.hero-title{font-size:clamp(36px,8vw,160px);letter-spacing:.3em;color:var(--amb-label);text-align:center;line-height:1.1;-webkit-user-select:none;user-select:none;padding:0 20px}.hero-sub{font-size:clamp(12px,1.8vw,20px);letter-spacing:.6em;color:var(--amb-lume);text-align:center;margin-top:24px;text-transform:lowercase}.hero-film{margin-top:48px;width:auto;height:auto;max-width:min(720px,84vw);max-height:38vh;overflow:hidden}.hero-scroll-hint{position:absolute;bottom:80px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--amb-lume);font-size:9px;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none}.hero-scroll-circle{width:48px;height:48px;display:grid;place-items:center}.hero-scroll-circle{background:var(--amb-highlight-color)}.hero-scroll-circle svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}.scroll-down-button{position:absolute;bottom:2em;left:50%;transform:translate(-50%);cursor:pointer;-webkit-user-select:none;user-select:none;z-index:10}.scroll-down-circle{width:40px;height:40px;display:grid;place-items:center;background:var(--amb-highlight-color)}.scroll-down-circle svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}.orbit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;justify-items:center;align-items:center;max-width:700px;margin:0 auto}.orbit-circle{width:clamp(60px,10vw,100px);height:clamp(60px,10vw,100px);border-radius:50%}.elevation-row{display:flex;justify-content:center;align-items:center;gap:clamp(24px,4vw,48px);flex-wrap:wrap}.elevation-item{display:flex;flex-direction:column;align-items:center;gap:16px}.elevation-circle{width:clamp(72px,12vw,110px);height:clamp(72px,12vw,110px);border-radius:50%;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s ease}.elevation-circle[data-visible=false]{opacity:0;transform:scale(.7)}.elevation-circle[data-visible=true]{opacity:1;transform:scale(1)}.elevation-label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--amb-lume)}.surface-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:800px;margin:0 auto}.surface-item{display:flex;flex-direction:column;align-items:center;gap:20px}.surface-swatch{width:clamp(80px,16vw,160px);height:clamp(80px,16vw,160px);border-radius:50%;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s ease}.surface-swatch[data-visible=false]{opacity:0;transform:scale(.8)}.surface-swatch[data-visible=true]{opacity:1;transform:scale(1)}.surface-label{font-size:9px;letter-spacing:.35em;text-transform:uppercase;color:var(--amb-lume)}.edge-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:32px;max-width:900px;margin:0 auto}.edge-item{display:flex;flex-direction:column;align-items:center;gap:16px}.edge-swatch{width:clamp(80px,12vw,120px);height:clamp(80px,12vw,120px);border-radius:var(--ambx-radius-xl);transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .6s ease}.edge-swatch[data-visible=false]{opacity:0;transform:translateY(30px)}.edge-swatch[data-visible=true]{opacity:1;transform:translateY(0)}.edge-label{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--amb-lume)}.component-stage{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:48px;max-width:900px;margin:0 auto}.component-cell{display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s ease}.component-cell[data-visible=false]{opacity:0;transform:translateY(40px) scale(.9)}.component-cell[data-visible=true]{opacity:1;transform:translateY(0) scale(1)}.component-cell:nth-child(1){transition-delay:0s}.component-cell:nth-child(2){transition-delay:.06s}.component-cell:nth-child(3){transition-delay:.12s}.component-cell:nth-child(4){transition-delay:.18s}.component-cell:nth-child(5){transition-delay:.24s}.component-cell:nth-child(6){transition-delay:.3s}.component-cell:nth-child(7){transition-delay:.36s}.comp-led-row{display:flex;justify-content:center;gap:24px;margin-top:48px;transition:opacity .7s ease .42s}.comp-led-row[data-visible=false]{opacity:0}.comp-led-row[data-visible=true]{opacity:1}.comp-led-row .amb-led{width:12px;height:12px;border-radius:50%}.theme-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:48px}.theme-playground{display:flex;flex-direction:column;gap:40px;max-width:1000px;margin:0 auto;align-items:center}.theme-controls{display:flex;flex-direction:column;gap:32px}.theme-controls-row{display:flex;justify-content:center;align-items:center;gap:40px}.finale{min-height:100vh;display:grid;place-items:center;max-width:100vw;overflow:hidden}.finale-text{font-size:clamp(32px,6vw,80px);letter-spacing:.3em;color:var(--amb-label);text-align:center;line-height:1.4;-webkit-user-select:none;user-select:none;display:flex;justify-content:center}.finale-letter{display:inline-block;opacity:0;transform:translateY(40px) scale(.5);filter:blur(8px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),filter .6s cubic-bezier(.22,1,.36,1)}.finale-text[data-visible=true] .finale-letter{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}.finale-sub{font-size:clamp(10px,1.5vw,14px);letter-spacing:.5em;text-transform:lowercase;color:var(--amb-lume);margin-top:16px;text-align:center;opacity:0;transform:translateY(20px);transition:opacity .8s ease .7s,transform .8s ease .7s}.finale-sub[data-visible=true]{opacity:1;transform:translateY(0)}.made-with{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(420px,84vw);margin:48px auto 0;padding:20px;text-decoration:none;opacity:0;transform:translateY(20px);transition:opacity .8s ease .8s,transform .8s ease .8s,box-shadow .3s ease}.made-with[data-visible=true]{opacity:1;transform:translateY(0)}.made-with-label{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--amb-lume)}.made-with-shot{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;object-position:top}.made-with-caption{font-size:13px;color:var(--amb-label)}.finale-links{display:flex;justify-content:center;gap:20px;margin-top:56px}.finale-link{display:inline-block;text-decoration:none}.finale-link .amb-button-cap{display:inline-flex;align-items:center;gap:10px}.finale-link-icon{width:18px;height:18px;flex-shrink:0}.finale-top-button{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:64px;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--amb-lume);font-size:9px;letter-spacing:.3em;text-transform:uppercase}.scroll-top-circle{width:48px;height:48px;display:grid;place-items:center}.scroll-top-circle svg{width:20px;height:20px;stroke:var(--amb-lume);fill:none;stroke-width:2}@media(max-width:768px){.surface-gallery,.edge-wall{grid-template-columns:repeat(3,1fr);gap:20px}.theme-playground{gap:20px}.theme-presets{margin-bottom:24px}.theme-controls{gap:20px}.theme-controls-row{gap:20px;flex-wrap:wrap}.scene-inner{padding:60px 20px}.scene-label{margin-bottom:32px}.scene-hint{margin-bottom:24px}.finale-links{flex-direction:column;align-items:center}.hero-scroll-hint{bottom:60px}}@keyframes slide-out{0%,to{transform:translate(0)}50%{transform:translate(150px)}}.moving-circle{animation:slide-out 3s ease-in-out infinite}.cordbar{position:fixed;top:0;left:50%;transform:translate(-50%);z-index:100;width:min(560px,calc(100vw - 16px))}.cord-assembly{--reveal: 212px;position:relative;transform:translateY(calc(-1 * var(--reveal)));transition:transform .52s cubic-bezier(.48,1.3,.5,1)}.cord-assembly.is-open{transform:translateY(0)}.cord-panel{--lip: 30px;position:relative;z-index:1;border-radius:0 0 14px 14px;padding:0 16px var(--lip)}.cord-console{height:212px;display:flex;flex-direction:column;justify-content:center;gap:10px}.cord-console-title{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--amb-lume)}.cord-console-preset{margin-left:auto;color:var(--amb-highlight-color);letter-spacing:.2em}.cord-console-well{--amb-thickness: 1;border-radius:var(--ambx-radius-lg);padding:14px 12px 12px}.cord-console-grid{--ambx-grid: 3px;display:grid;grid-template-columns:repeat(7,1fr);align-items:start;justify-items:center;gap:0 calc(var(--ambx-grid) * 2)}.cord-console-hint{font-size:7px;letter-spacing:.22em;text-transform:uppercase;color:var(--amb-lume);opacity:.6;text-align:center}.cords{position:relative;display:flex;justify-content:center;gap:clamp(10px,4vw,40px);padding:0 18px;margin-top:calc(-1 * var(--lip, 30px) + 4px)}.cord{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:var(--amb-label);cursor:pointer;display:flex;flex-direction:column;align-items:center}.cord-name{position:relative;z-index:2;font-size:9px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;margin-bottom:12px;transition:color .2s ease}.cord.is-active .cord-name{color:var(--amb-highlight-color)}.cord:focus-visible{outline:none}.cord:focus-visible .cord-name{color:var(--amb-highlight-color);text-decoration:underline}.cord-pull{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center}.cord-pull.is-tugging{animation:cord-tug .42s cubic-bezier(.4,0,.2,1)}@keyframes cord-tug{0%{transform:translateY(0)}44%{transform:translateY(20px)}to{transform:translateY(0)}}.cord-chain{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:-18px}.cord-bead{width:7px;height:7px}.cord-ball{width:26px;height:26px;margin-top:1px}@media(max-width:600px){.cordbar{width:calc(100vw - 8px)}.cords{gap:14px;padding:0 10px}.cord-name{font-size:8px;letter-spacing:.06em}.cord-console-grid{--ambx-grid: 2px}.cord-console-grid .ambx-label{font-size:max(6px,calc(var(--ambx-grid) * 2 + var(--ambx-grid) / 2));letter-spacing:calc(var(--ambx-grid) / 4)}}@media(prefers-reduced-motion:reduce){.cord-assembly{transition:none}.cord-line.is-tugging{animation:none}}.groove-wall{display:flex;gap:clamp(28px,5vw,56px);justify-content:center;align-items:center;flex-wrap:wrap;max-width:900px;margin:0 auto}.groove-item{display:flex;flex-direction:column;align-items:center;gap:20px}.groove-swatch{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}.groove-swatch[data-visible=false]{opacity:0;transform:translateY(28px)}.groove-swatch[data-visible=true]{opacity:1;transform:none}.groove-lume{background-color:var(--amb-lume)}.groove-darker{background-color:hsl(var(--amb-light-hue) var(--amb-light-saturation) calc(var(--amb-key-light-intensity) * 21% + var(--amb-fill-light-intensity) * 17.4% + 27.3%))}.groove-channel{width:clamp(150px,24vw,240px);height:28px;border-radius:var(--ambx-radius-full);--amb-thickness: .4}.groove-well{width:clamp(96px,15vw,140px);aspect-ratio:1;border-radius:50%;--amb-thickness: .5}.groove-inset{width:clamp(130px,20vw,180px);height:116px;border-radius:var(--ambx-radius-xl);--amb-thickness: .5}.groove-label{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--amb-lume)}
