@import"https://fonts.googleapis.com/css2?family=Micro+5&display=swap";.hero-tone-joystick.svelte-n2deuv{width:var(--hero-control-size, 56px);aspect-ratio:1/1;position:relative;overflow:visible;border-radius:999px;background:#e2e5eb;box-shadow:0 0 1px .5px #010b261a inset,1px 1px 1px .5px #ffffff85 inset,-.5px -.5px .5px .5px #5d65732e inset}.hero-tone-joystick-grid.svelte-n2deuv{display:none}.hero-tone-joystick-knob.svelte-n2deuv{width:clamp(40px,var(--hero-control-size, 56px) * .64,58px);height:clamp(40px,var(--hero-control-size, 56px) * .64,58px);border-radius:50%;background-color:#c9cfd8;cursor:grab;touch-action:none;box-shadow:7px 8px 9px -5px #20242561,3px 3px 3px #ffffff80 inset,-1.5px -1.5px 2px #545c6b47 inset;position:absolute;z-index:1}.hero-tone-joystick-knob.svelte-n2deuv:after{content:"";position:absolute;pointer-events:none;top:1px;left:1px;width:calc(100% - 2px);height:calc(100% - 2px);border-radius:calc(50% - 1px);box-sizing:border-box;border-style:inset;border:2px solid rgb(255,255,255);-webkit-mask-image:conic-gradient(from 135deg at 50% 50%,#0000,#0000 35%,#000000e6,#0000 65%,#0000);mask-image:conic-gradient(from 135deg at 50% 50%,#0000,#0000 35%,#000000e6,#0000 65%,#0000);filter:blur(.35px);background-blend-mode:multiply}.hero-tone-joystick-knob.is-dragging.svelte-n2deuv{cursor:grabbing}#landing.svelte-11kctks{height:70vh;position:relative;border-radius:var(--size-12);background-color:var(--color-background-tint);margin:0 auto;container-type:inline-size;container-name:landing;overflow:hidden}.hero-layout.svelte-11kctks{width:100%;height:100%;display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:stretch;padding:50px;box-sizing:border-box}@container landing (max-width: 900px){.hero-layout.svelte-11kctks{grid-template-columns:100%;grid-template-rows:min-content 1fr;gap:var(--size-32);padding:var(--size-48) 0}}.hero-text.svelte-11kctks{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;padding-top:var(--size-24);padding-left:var(--size-24)}.hero-text.svelte-11kctks h1:where(.svelte-11kctks){line-height:1;margin:0 0 20px;font-size:90px}.hero-text.svelte-11kctks p:where(.svelte-11kctks){font-size:1.1rem}@container landing (max-width: 900px){.hero-text.svelte-11kctks{padding:0 10%;justify-content:center;align-items:center;text-align:center}.hero-text.svelte-11kctks p:where(.svelte-11kctks){font-size:1rem}}.hero-card.svelte-11kctks{width:440px;align-self:end;justify-self:end;box-sizing:border-box;padding:var(--size-24)}.hero-card.svelte-11kctks #snap-canvas{width:100%;height:100%}.hero-synth-panel.svelte-11kctks{--hero-pad-gap: 4px;--hero-control-gap: var(--hero-pad-gap);--hero-control-size: calc((100% - (var(--hero-pad-gap) * 5)) / 4);width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;box-sizing:border-box}.hero-synth-top.svelte-11kctks{width:100%;display:flex;align-items:center;gap:var(--hero-pad-gap)}.hero-oled.svelte-11kctks{width:var(--hero-control-size);aspect-ratio:1/1;margin-left:var(--hero-pad-gap);flex:0 0 auto}.hero-waveform.svelte-11kctks{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;filter:blur(.18px)}.hero-transport-grid.svelte-11kctks{width:var(--hero-control-size);aspect-ratio:1/1;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:var(--hero-pad-gap);padding:5px;box-sizing:border-box}.hero-transport-button.svelte-11kctks{width:100%;height:100%;min-width:0;min-height:0;padding:0;display:grid;place-items:center;font-family:Geist Pixel Square,Geist Pixel Circle,monospace;font-size:.55rem;letter-spacing:0}.hero-transport-icon.svelte-11kctks{width:16px;height:16px;display:grid;place-items:center;flex:0 0 auto;font-size:16px;line-height:1;font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 20;transition:color .1s ease,filter .1s ease}.hero-button-bed.svelte-11kctks{--hero-pad-size: calc((100% - (var(--hero-pad-gap) * 3)) / 4);width:100%;aspect-ratio:1/1;position:relative;padding:var(--hero-pad-gap);border-radius:calc(var(--ui-radius) + 4px);background:#3c3f45;box-sizing:border-box}.hero-button-slots.svelte-11kctks{position:absolute;inset:var(--hero-pad-gap);z-index:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--hero-pad-gap);place-items:center;pointer-events:none}.hero-button-slot.svelte-11kctks{width:20%;height:20%;border-radius:calc(var(--ui-radius) * .5);background:#25282e;box-shadow:-6px -6px 8px #ffffff0f inset,2px 2px 6.1px -1px #00000080 inset,-1px -1px 1px #737c9024,1px 1px 1px #ffffff0f,8px 8px 20px -7px #00000073 inset}.hero-button-grid.svelte-11kctks{width:100%;height:100%;position:relative;z-index:1}.hero-button-grid.svelte-11kctks .snapsort-container{width:100%;height:100%;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:var(--hero-pad-gap)}.hero-button-grid.svelte-11kctks .hero-synth-item{width:var(--hero-pad-size);height:var(--hero-pad-size);min-width:0;min-height:0;padding:0;touch-action:none}.hero-synth-button.svelte-11kctks{--button-color: #fff;--button-dot-color: rgba(1, 11, 38, .32);--button-highlight-color: hsl(from var(--button-color) calc(h + 10) s calc(l + 20) );--button-shadow-color: hsl(from var(--button-color) calc(h - 10) s calc(l - 20) );width:100%;height:100%;min-width:0;min-height:0;padding:0;border:none;border-radius:var(--ui-radius);background:var(--button-color);color:var(--color-text);cursor:pointer;font-family:Lato,sans-serif;font-size:1rem;position:relative;display:grid;place-items:center;box-shadow:0 0 1px .5px #010b2628 inset,1px 1px 1px .5px hsl(from var(--button-highlight-color) h s l/.7) inset,-.5px -.5px .5px .5px hsl(from var(--button-shadow-color) h s l/.5) inset,2.5px 2.5px 3px -2px #0d22446e,5px 5px 6px -3px #061d3959;transition:all .1s ease-in-out}.hero-synth-button-bump.svelte-11kctks{width:calc(100% - 8px);height:calc(100% - 8px);border-radius:calc(var(--ui-radius) - 1px);background:var(--button-color);position:relative;box-shadow:1.75px 2px 2.25px -1.25px #20242542,.75px .75px .75px hsl(from var(--button-highlight-color) h s l/.42) inset,-.4px -.4px .65px hsl(from var(--button-shadow-color) h s l/.28) inset}.hero-synth-button-bump.svelte-11kctks:after{content:"";position:absolute;top:.4px;left:.4px;width:calc(100% - .8px);height:calc(100% - .8px);border-radius:calc(var(--ui-radius) - 1.4px);box-sizing:border-box;border:.7px solid rgb(255,255,255);-webkit-mask-image:linear-gradient(to bottom right,#000000b8,#0000007a 12%,#00000040 28%,#0000 48%);mask-image:linear-gradient(to bottom right,#000000b8,#0000007a 12%,#00000040 28%,#0000 48%);filter:blur(.15px)}.hero-synth-button-indent.svelte-11kctks{width:72%;aspect-ratio:1/1;border-radius:999px;background:radial-gradient(circle at 118% 118%,color-mix(in srgb,var(--button-color) 78%,#f0e8d4 22%) 0%,var(--button-color) 44%,color-mix(in srgb,var(--button-color) 92%,#2f2634 8%) 100%);box-shadow:1px 1px 1.5px #1f122624 inset,-.75px -.75px 1px #f2ead252 inset,0 0 0 .5px #010b2614;filter:blur(1px)}.hero-synth-button.pad-gray.svelte-11kctks{--button-color: #d8dde3}.hero-synth-button.pad-primary.svelte-11kctks{--button-color: var(--color-primary);--button-dot-color: rgba(255, 255, 255, .34);color:#fff}.hero-synth-button.pad-primary.svelte-11kctks .hero-synth-button-bump:where(.svelte-11kctks){--button-color: #d8dde3}.hero-synth-button.svelte-11kctks:before{content:"";position:absolute;top:8px;left:8px;z-index:2;width:12px;height:7px;background-image:radial-gradient(circle,var(--button-dot-color) 1px,transparent 1.15px);background-size:4px 4px;background-position:0 0;pointer-events:none}.hero-synth-button-number.svelte-11kctks{position:absolute;top:8px;right:8px;z-index:3;font-family:Zen Dots,Geist Mono,monospace;font-size:15px;line-height:1;color:var(--button-dot-color);text-align:right;pointer-events:none}.hero-synth-button.svelte-11kctks:after{content:"";position:absolute;top:.5px;left:.5px;width:calc(100% - 1px);height:calc(100% - 1px);border-radius:calc(var(--ui-radius) - .5px);box-sizing:border-box;border-style:inset;border:1.5px solid rgb(255,255,255);-webkit-mask-image:linear-gradient(to bottom right,#000000e6,#000c 8%,#0009 10%,#00000080 25%,#0000 50%);mask-image:linear-gradient(to bottom right,#000000e6,#000c 8%,#0009 10%,#00000080 25%,#0000 50%);filter:blur(.2px);pointer-events:none}.hero-synth-button.svelte-11kctks:hover{cursor:move;box-shadow:0 0 1px .5px #010b2628 inset,1px 1px 1px .5px hsl(from var(--button-highlight-color) h s l/.7) inset,-.5px -.5px .5px .5px hsl(from var(--button-shadow-color) h s l/.5) inset,2px 2px 3px -2px #0d22446e,4px 4px 6px -3px #061d3959}.hero-synth-button.is-active.svelte-11kctks{transform:scale(.97);filter:saturate(1.08)}@container landing (max-width: 900px){#landing.svelte-11kctks{height:auto}.hero-layout.svelte-11kctks{grid-template-columns:100%;grid-template-rows:min-content 1fr;gap:var(--size-32);padding:var(--size-48) 0;align-items:start}.hero-text.svelte-11kctks h1:where(.svelte-11kctks){text-align:center;font-size:clamp(2.5rem,10vw,5rem)}.hero-card.svelte-11kctks{width:min(440px,100% - var(--size-32));justify-self:center}}.input-handling-card.svelte-11f1qjf{--card-padding: var(--size-48);--card-top-padding: var(--card-padding);container-type:inline-size;container-name:input-handling-card;min-height:520px;height:100%;overflow:hidden;box-sizing:border-box;background:var(--color-background-tint);border-radius:var(--ui-radius)}@media(max-width:720px){.input-handling-card.svelte-11f1qjf{--card-padding: var(--size-24);--card-top-padding: var(--highlight-card-mobile-top-padding);grid-column:span 2}}.input-card-layout.svelte-11f1qjf{width:100%;min-height:inherit;height:100%;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);align-items:stretch;gap:var(--size-32);box-sizing:border-box}@container input-handling-card (max-width: 400px){.input-card-layout.svelte-11f1qjf{display:flex;flex-direction:column}}.input-card-heading.svelte-11f1qjf{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--size-16);padding:var(--card-top-padding) 0 var(--card-padding) var(--card-padding);min-width:0}.input-card-heading.svelte-11f1qjf h3:where(.svelte-11f1qjf){width:min(100%,min-content);margin:0;font-family:Geist Pixel Circle,Doto,sans-serif;font-size:var(--highlight-card-heading-size);line-height:.88}.input-card-heading.svelte-11f1qjf p:where(.svelte-11f1qjf){margin:0;max-width:18rem}@container input-handling-card (max-width: 400px){.input-card-heading.svelte-11f1qjf{justify-content:flex-start;gap:var(--size-12);padding:var(--card-top-padding) var(--card-padding) 0 var(--card-padding)}.input-card-heading.svelte-11f1qjf>:where(.svelte-11f1qjf){grid-column:auto}}.input-card-body.svelte-11f1qjf{min-width:0;min-height:360px;margin:var(--card-padding) var(--card-padding) var(--card-padding) 0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--size-24);padding:var(--size-24);box-sizing:border-box}@container input-handling-card (max-width: 400px){.input-card-body.svelte-11f1qjf{margin:0 var(--card-padding) var(--card-padding) var(--card-padding)}}.tap-display.svelte-11f1qjf{width:100%;display:grid;grid-template-columns:1fr;gap:0;padding:var(--size-16) var(--size-12);box-sizing:border-box;border-radius:var(--ui-radius);overflow:hidden}.display-row.svelte-11f1qjf{min-width:0;display:grid;grid-template-columns:10px max-content minmax(20px,max-content) minmax(7ch,1fr);align-items:center;gap:6px;min-height:13px;color:inherit;letter-spacing:0}.tap-display.glyph-panel-hidden.svelte-11f1qjf .display-row:where(.svelte-11f1qjf){grid-template-columns:10px max-content minmax(20px,max-content)}.display-bullet.svelte-11f1qjf{width:10px;justify-self:center;overflow:hidden;font-family:Bitcount Grid Single,monospace!important;font-size:10px;line-height:13px;color:#4b4b4b;opacity:.72;text-align:center;white-space:pre}.display-row.is-active.svelte-11f1qjf .display-bullet:where(.svelte-11f1qjf){font-size:12px;color:inherit;opacity:1}.display-value.svelte-11f1qjf{min-width:0;overflow:visible;font-family:Bitcount Grid Single,monospace!important;font-optical-sizing:auto;font-style:normal;font-size:12px;font-weight:300;line-height:13px;color:inherit;letter-spacing:0;margin:0;white-space:nowrap;text-overflow:clip}.display-arrow.svelte-11f1qjf{min-width:20px;overflow:hidden;font-family:Bitcount Grid Single,monospace!important;font-size:12px;line-height:13px;color:inherit;letter-spacing:0;margin:0;white-space:nowrap}.ascii-box-row.svelte-11f1qjf{display:inline-block;justify-self:end;overflow:hidden;font-family:Bitcount Grid Single,monospace!important;font-size:12px;line-height:13px;color:inherit;letter-spacing:0;margin:0;white-space:pre}.tap-surface.svelte-11f1qjf{width:100%;flex:1;min-height:180px;position:relative;overflow:hidden;touch-action:none;isolation:isolate;box-sizing:border-box;border-radius:var(--ui-radius);border:1px solid rgba(0,0,0,.14);background-color:var(--color-background-tint)}.touch-plus-grid.svelte-11f1qjf{position:absolute;top:10px;right:10px;bottom:10px;left:10px;z-index:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));grid-auto-rows:36px;overflow:hidden;pointer-events:none;color:#00000014;font-family:Bitcount Grid Single,monospace;font-size:10px;font-weight:300;line-height:1;place-items:center;-webkit-user-select:none;user-select:none}.touch-plus-grid.svelte-11f1qjf span:where(.svelte-11f1qjf){color:inherit;margin:0}.gesture-lines.svelte-11f1qjf{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;pointer-events:none}.drag-line.svelte-11f1qjf,.pinch-line.svelte-11f1qjf{vector-effect:non-scaling-stroke;stroke-linecap:round}.drag-line.svelte-11f1qjf{stroke:#ff753ae0;stroke-width:2;filter:drop-shadow(0 0 4px rgba(255,117,58,.48))}.pinch-line.svelte-11f1qjf{stroke:#ff1f1fcc;stroke-width:2.5;stroke-dasharray:5 4;filter:drop-shadow(0 0 5px rgba(255,31,31,.45))}.gesture-pin.svelte-11f1qjf{position:absolute;z-index:2;width:14px;height:14px;border-radius:999px;transform:translate(-50%,-50%);pointer-events:none}.start-pin.svelte-11f1qjf{background:var(--color-primary);box-shadow:0 0 0 5px #ff753a1f,0 0 12px #ff753a5c}.active-pin.svelte-11f1qjf{background:var(--color-primary);box-shadow:0 0 0 6px #ff753a29,0 0 14px #ff753a6b}.animation-card.svelte-1wup8kq{--card-padding: var(--size-48);--card-top-padding: var(--card-padding);container-type:inline-size;container-name:animation-card;height:100%;box-sizing:border-box;background:var(--color-background-tint);border-radius:var(--ui-radius);overflow:hidden}@media(max-width:720px){.animation-card.svelte-1wup8kq{--card-padding: var(--size-24);--card-top-padding: var(--highlight-card-mobile-top-padding);grid-column:span 2}}.animation-card-layout.svelte-1wup8kq{width:100%;min-height:inherit;height:100%;display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,.4fr);grid-template-areas:"visual heading";align-items:stretch;gap:var(--size-48);box-sizing:border-box}@container animation-card (max-width: 400px){.animation-card-layout.svelte-1wup8kq{display:flex;flex-direction:column;gap:var(--size-24)}}.animation-card-heading.svelte-1wup8kq{grid-area:heading;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--size-16);min-width:0}.animation-card-heading.svelte-1wup8kq h3:where(.svelte-1wup8kq){width:min(100%,min-content);margin-bottom:0;font-family:Geist Pixel Circle,Doto,sans-serif;font-size:var(--highlight-card-heading-size);line-height:.88}.animation-card-heading.svelte-1wup8kq p:where(.svelte-1wup8kq){margin:0;max-width:18rem}@container animation-card (max-width: 400px){.animation-card-heading.svelte-1wup8kq{justify-content:flex-start;gap:var(--size-12);padding:0 var(--card-padding) var(--card-padding) var(--card-padding)}}.animation-card-body.svelte-1wup8kq{grid-area:visual;min-width:0;margin:var(--card-top-padding) 0 var(--card-padding) var(--card-padding)}@container animation-card (max-width: 400px){.animation-card-body.svelte-1wup8kq{margin:var(--card-top-padding) var(--card-padding) 0 var(--card-padding)}}.animation-demo.svelte-1wup8kq{display:flex;flex-direction:column;gap:0;height:100%;width:100%}.preview-area.svelte-1wup8kq{position:relative;flex:1;border-radius:0 0 var(--ui-radius) var(--ui-radius);border:1px solid #d8dde0;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-background-tint);min-height:100px;isolation:isolate}.preview-plus-grid.svelte-1wup8kq{position:absolute;top:10px;right:10px;bottom:10px;left:10px;z-index:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));grid-auto-rows:36px;overflow:hidden;pointer-events:none;color:#00000014;font-family:Bitcount Grid Single,monospace;font-size:10px;font-weight:300;line-height:1;place-items:center;-webkit-user-select:none;user-select:none}.preview-plus-grid.svelte-1wup8kq span:where(.svelte-1wup8kq){color:inherit;margin:0}.preview-value-container.svelte-1wup8kq{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}.animated-value.svelte-1wup8kq{min-width:2.2ch;display:inline-flex;align-items:center;justify-content:center;color:#111;font-family:Bitcount Grid Single,monospace;font-size:56px;font-weight:300;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:0;transform:rotate(0) scale(1)}.value-readout.svelte-1wup8kq{color:#111}.timeline.svelte-1wup8kq{height:auto;box-sizing:border-box;padding:1rem}.timeline.grid-layout.svelte-1wup8kq{display:block}.timeline-content.svelte-1wup8kq{--timeline-label-width: 100px;display:grid;grid-template-columns:auto minmax(0,1fr);row-gap:.4rem;column-gap:.6rem;align-items:center}.timeline-label.svelte-1wup8kq{font-size:.7rem;text-transform:uppercase;color:#2f1f1a8c}.timeline-slider.svelte-1wup8kq{position:relative;margin:0 8px;box-sizing:border-box}.timeline-slider.svelte-1wup8kq input[type=range]:where(.svelte-1wup8kq){width:100%;margin:0;box-sizing:border-box}.timeline-slider.svelte-1wup8kq .playhead:where(.svelte-1wup8kq){position:absolute;top:100%;width:2px;border-radius:1px;height:100px;background:#ff602b;transform:translate(-50%);pointer-events:none;box-shadow:4px 4px 4px #1c262c27;z-index:0}.timeline-placeholder.svelte-1wup8kq{height:1px;width:100%}.timeline-header.svelte-1wup8kq{display:flex;color:#2f1f1a8c;justify-content:space-between;margin:0 8px}.timeline-header.svelte-1wup8kq span:where(.svelte-1wup8kq){font-size:.7rem}.timeline-header.svelte-1wup8kq span:where(.svelte-1wup8kq){text-align:right}.track-meta.svelte-1wup8kq{display:flex;flex-direction:column;gap:.15rem;color:#2f1f1ae6}.track-label.svelte-1wup8kq{font-family:Bitcount Grid Single,monospace;font-size:.8rem;font-weight:300}.track-lane.svelte-1wup8kq{--keyframe-size: 14px;--specular-angle: 130deg;--track-line-color: #aeb6ba;--keyframe-color: #aeb6ba;position:relative;z-index:1;height:20px;border:none;margin:0 8px;overflow:visible}.track-line.svelte-1wup8kq{position:absolute;top:50%;height:2px;border-radius:999px;transform:translateY(-50%);background-color:var(--track-line-color);box-shadow:none;pointer-events:none;z-index:0}.keyframe-point.svelte-1wup8kq{position:absolute;z-index:2;top:50%;width:var(--keyframe-size);height:var(--keyframe-size);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(hsl(from var(--keyframe-color) h calc(s + 5) calc(l + 15)),hsl(from var(--keyframe-color) h s calc(l + 10)) 50%,hsl(from var(--keyframe-color) h s l/0) 58%,hsl(from var(--keyframe-color) h s l/0),hsl(from var(--keyframe-color) h s calc(l - 5) /.4) 72%),conic-gradient(from var(--specular-angle) at center,hsl(from var(--keyframe-color) h calc(s + 20) calc(l + 5) /.1) 43%,#fff 57%,hsl(from var(--keyframe-color) h calc(s + 20) calc(l + 5) /.1) 70%),conic-gradient(from 120deg at center,hsl(from var(--keyframe-color) h calc(s - 5) calc(l - 10)),hsl(from var(--keyframe-color) calc(h + 10) calc(s + 10) calc(l + 20)),hsl(from var(--keyframe-color) h calc(s - 5) calc(l - 10)));box-shadow:2px 2px 2px #040e3018,4px 4px 4px -3px #07143524,6px 6px 6px -4px #0615286c;pointer-events:none}.playback-toggle.svelte-1wup8kq{border:none;border-radius:999px;padding:.4rem 1.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;background:var(--card-accent);color:#fffaf6;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.playback-toggle.svelte-1wup8kq:hover{transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb,var(--card-accent) 35%,rgba(0,0,0,.22))}.playback-toggle.svelte-1wup8kq:active{transform:translateY(0);box-shadow:none}.camera-control-card.svelte-nha340{--card-padding: var(--size-48);--card-top-padding: var(--card-padding);position:relative;display:flex;flex-direction:column;gap:var(--size-32);min-height:520px;height:auto;box-sizing:border-box;background:var(--color-background-tint);border-radius:var(--ui-radius);overflow:hidden;isolation:isolate;overscroll-behavior:contain;touch-action:none}@media(max-width:720px){.camera-control-card.svelte-nha340{--card-padding: var(--size-24);--card-top-padding: var(--highlight-card-mobile-top-padding);grid-column:span 2}}.camera-viewport.svelte-nha340{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;cursor:grab;overscroll-behavior:contain;touch-action:none;user-select:none;-webkit-user-select:none}.camera-viewport.svelte-nha340:active{cursor:grabbing}.camera-viewport.svelte-nha340 #snap-canvas{width:100%;height:100%;background:transparent;overscroll-behavior:contain;touch-action:inherit;user-select:inherit;-webkit-user-select:inherit}.camera-viewport.svelte-nha340 #snap-camera-control{position:relative!important;top:auto!important;left:auto!important;width:100%!important;height:100%!important;background:transparent;overscroll-behavior:contain;touch-action:inherit;transform-origin:0 0;user-select:inherit;-webkit-user-select:inherit}.camera-scene.svelte-nha340{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:visible}.camera-topo-map.svelte-nha340{position:absolute;top:50%;left:50%;z-index:0;display:flex;flex-direction:column;justify-content:center;color:#0000001b;font-family:Geist Mono,Courier New,monospace;font-size:39px;font-weight:300;letter-spacing:0;line-height:.92;margin:0;transform:translate(-50%,-50%);pointer-events:none;-webkit-user-select:none;user-select:none;white-space:pre}.camera-topo-map.svelte-nha340 span:where(.svelte-nha340){display:block;color:inherit;font:inherit;line-height:inherit;margin:0}.camera-card-heading.svelte-nha340{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--size-12);padding:var(--card-top-padding) var(--card-padding) var(--card-padding);box-sizing:border-box;text-align:center}.camera-card-heading.svelte-nha340 h3:where(.svelte-nha340){margin:0;font-family:Geist Pixel Circle,Doto,sans-serif;font-size:var(--highlight-card-heading-size);line-height:.88}.camera-card-heading.svelte-nha340 p:where(.svelte-nha340){margin:0}@media(max-width:720px){.camera-card-heading.svelte-nha340{gap:var(--size-12)}}.camera-controls.svelte-nha340{position:absolute;left:50%;bottom:var(--card-padding);z-index:1;display:flex;gap:var(--size-4);padding:var(--size-4);background-color:#ffffffad;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transform:translate(-50%)}.camera-controls.svelte-nha340 button:where(.svelte-nha340){width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--ui-radius);background:transparent;color:var(--color-text);cursor:pointer;transition:transform .16s ease}.camera-controls.svelte-nha340 button:where(.svelte-nha340):hover,.camera-controls.svelte-nha340 button:where(.svelte-nha340):focus-visible{background:transparent;outline:none}.camera-controls.svelte-nha340 button:where(.svelte-nha340):active{transform:translateY(1px)}.camera-controls.svelte-nha340 button:where(.svelte-nha340):hover .material-symbols-rounded:where(.svelte-nha340),.camera-controls.svelte-nha340 button:where(.svelte-nha340):focus-visible .material-symbols-rounded:where(.svelte-nha340){color:var(--color-primary)}.camera-controls.svelte-nha340 button:where(.svelte-nha340):active .material-symbols-rounded:where(.svelte-nha340){color:var(--color-secondary-1)}.material-symbols-rounded.svelte-nha340{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:0;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-feature-settings:"liga";transition:color .16s ease}.dom-optimization-card.svelte-1n59923{--card-padding: 40px;--card-top-padding: var(--card-padding);--operation-card-height: 23.35rem;container-type:inline-size;container-name:dom-optimization-card;position:relative;height:100%;min-height:0;box-sizing:border-box;padding:var(--card-top-padding) var(--card-padding) var(--card-padding);background:var(--color-background-tint);border-radius:var(--ui-radius);overflow:hidden}@media(max-width:720px){.dom-optimization-card.svelte-1n59923{--card-padding: var(--size-24);--card-top-padding: var(--highlight-card-mobile-top-padding);grid-column:span 2}}.dom-optimization-inner.svelte-1n59923{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--size-48);width:100%;height:100%}@media(max-width:720px){.dom-optimization-inner.svelte-1n59923{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--size-24)}}@container dom-optimization-card (max-width: 450px){.dom-optimization-inner.svelte-1n59923{grid-template-columns:1fr;align-items:start;gap:var(--size-24)}}.dom-optimization-copy.svelte-1n59923{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;align-self:start;max-width:14rem;min-width:0;text-align:left}.dom-optimization-copy.svelte-1n59923 h3:where(.svelte-1n59923){width:min-content;margin:0;font-family:Geist Pixel,sans-serif;font-size:var(--highlight-card-heading-size);line-height:.9}.dom-title-line.svelte-1n59923{display:block;font-family:inherit;font-size:inherit;line-height:inherit}.dom-title-mobile-line.svelte-1n59923{display:none}@container dom-optimization-card (max-width: 450px){.dom-optimization-copy.svelte-1n59923 h3:where(.svelte-1n59923){width:max-content}.dom-title-desktop-line.svelte-1n59923{display:none}.dom-title-mobile-line.svelte-1n59923{display:block}}.dom-optimization-copy.svelte-1n59923 p:where(.svelte-1n59923){margin:var(--size-12) 0 0;font-size:.92rem;line-height:1.35}.optimize-control.svelte-1n59923{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--size-12);width:100%;min-width:0;color:#202426;cursor:pointer;font-family:Bitcount Grid Single,monospace;font-size:.92rem;font-weight:450;line-height:1;-webkit-user-select:none;user-select:none}.optimize-control.svelte-1n59923:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}.optimize-label.svelte-1n59923{display:inline-flex;align-items:center;min-width:0;font-family:Bitcount Grid Single,monospace;font-optical-sizing:auto;font-style:normal;letter-spacing:0;text-transform:lowercase}.optimize-label-icon.svelte-1n59923{display:inline-block;font-family:Material Symbols Outlined;font-size:1.15rem;font-style:normal;font-weight:500;line-height:1;color:#000c;transition:color .18s ease,filter .18s ease;font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24}.optimize-label.is-active.svelte-1n59923 .optimize-label-icon:where(.svelte-1n59923){color:var(--color-primary);filter:drop-shadow(0 0 6px rgba(255,117,58,.58))}.optimize-label-left.svelte-1n59923{justify-content:flex-end;text-align:right}.optimize-label-right.svelte-1n59923{justify-content:flex-start;text-align:left}.mini-toggle-switch.svelte-1n59923{position:relative;width:36px;height:22px;flex:0 0 auto;border-radius:999px;--ui-radius: 999px;cursor:pointer;overflow:hidden;transition:background-color .3s ease}.mini-toggle-switch.svelte-1n59923:hover{background-color:#00000014}.mini-toggle-switch.enabled.svelte-1n59923{background-color:var(--color-primary)}.mini-toggle-knob.svelte-1n59923{position:absolute;top:3px;left:3px;width:16px;height:16px;padding:0;--ui-radius: 999px;--card-color: rgb(29, 29, 29);background-color:var(--color-primary);transition:transform .3s cubic-bezier(.175,.885,.32,1.275),background-color .3s ease}.mini-toggle-switch.enabled.svelte-1n59923 .mini-toggle-knob:where(.svelte-1n59923){transform:translate(14px);background-color:#fff}.dom-optimization-visual-column.svelte-1n59923{display:flex;flex-direction:column;align-self:end;justify-self:stretch;width:100%;min-width:0}@container dom-optimization-card (max-width: 450px){.dom-optimization-visual-column.svelte-1n59923{align-self:stretch}}.dom-optimization-visual.svelte-1n59923{container-type:inline-size;container-name:dom-optimization-visual;position:relative;box-sizing:border-box;width:100%;padding:var(--size-16);height:var(--operation-card-height);max-width:100%;overflow:hidden;display:flex;flex-direction:column;gap:var(--size-16)}.dom-optimization-visual.svelte-1n59923 #snap-canvas{width:100%;flex:1;min-height:0;background:transparent;display:flex;align-items:center;justify-content:center;pointer-events:none}.operation-stack.svelte-1n59923{position:relative;display:flex;flex-direction:column;gap:.2rem;width:100%;justify-content:center}.operation-stack.optimized.svelte-1n59923{gap:var(--size-8)}.operation-pill.svelte-1n59923{--operation-pulse: 0;position:relative;display:flex;flex-direction:column;gap:.15rem;min-width:0;padding:.32rem .5rem;border-radius:var(--size-4);background:linear-gradient(90deg,rgba(255,255,255,calc(.5 + var(--operation-pulse) * .32)),#ffffff8c);border:1px solid rgba(0,0,0,.08);box-shadow:0 0 0 calc(var(--operation-pulse) * 3px) #ffffff59;transform-origin:center;will-change:opacity,transform}.operation-pill.read.svelte-1n59923,.operation-pill.write.svelte-1n59923{flex-direction:row;align-items:center;gap:var(--size-8);padding:.22rem .45rem}.operation-pill.reflow.svelte-1n59923{background:var(--color-secondary-1);border-color:transparent;box-shadow:none}.operation-pill.svelte-1n59923 span:where(.svelte-1n59923){font-family:Bitcount Grid Single,monospace;font-size:.58rem;line-height:1;text-transform:uppercase}.operation-pill.read.svelte-1n59923 span:where(.svelte-1n59923),.operation-pill.write.svelte-1n59923 span:where(.svelte-1n59923){display:inline-flex;width:.9rem;height:.9rem;flex:0 0 auto;align-items:center;justify-content:center;border-radius:var(--size-4);background:#ffffffad;font-size:.58rem}.operation-pill.svelte-1n59923 strong:where(.svelte-1n59923){min-width:0;overflow:hidden;color:#222628;font-family:Bitcount Grid Single,monospace;font-optical-sizing:auto;font-size:clamp(.54rem,1.2vw,.64rem);font-style:normal;font-weight:360;letter-spacing:0;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.operation-pill.read.svelte-1n59923 span:where(.svelte-1n59923){color:var(--color-secondary-4)}.operation-pill.write.svelte-1n59923 span:where(.svelte-1n59923){color:var(--color-secondary-2)}.operation-pill.reflow.svelte-1n59923 span:where(.svelte-1n59923),.operation-pill.reflow.svelte-1n59923 strong:where(.svelte-1n59923){color:#fff}.collision-card.svelte-172tbjk{--card-padding: var(--size-48);--card-top-padding: var(--card-padding);--dot-gap: 0px;--title-description-gap: 36px;min-height:520px;height:auto;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;background-color:var(--color-background-tint);border-radius:var(--ui-radius);overflow:hidden;text-align:center}.collision-card.svelte-172tbjk #snap-canvas{width:100%;height:auto!important;min-height:inherit;flex:1 1 auto}@media(max-width:720px){.collision-card.svelte-172tbjk{--card-padding: var(--size-24);--card-top-padding: var(--highlight-card-mobile-top-padding);--title-description-gap: 30px;padding-block:var(--card-top-padding) 0;grid-column:span 2}}.collision-stage.svelte-172tbjk{position:relative;width:100%;height:100%;min-height:inherit;overflow:hidden}.collision-content.svelte-172tbjk{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--title-description-gap);pointer-events:none}.dot-title.svelte-172tbjk{width:min(75%,100% - var(--size-32) * 2);aspect-ratio:var(--dot-columns)/var(--dot-rows);display:grid;grid-template-columns:repeat(var(--dot-columns),minmax(0,1fr));grid-template-rows:repeat(var(--dot-rows),minmax(0,1fr));gap:var(--dot-gap)}.dot-cell.svelte-172tbjk{align-self:center;justify-self:center;width:100%;height:100%;border-radius:50%;background:#000;transform-origin:center}.collision-description.svelte-172tbjk{width:min(26rem,100% - var(--size-48));margin:0;color:#000;font-size:var(--font-size-16);line-height:1.35;text-align:center;white-space:normal}.collision-description-character.svelte-172tbjk{display:inline-block;transform-origin:center;white-space:pre}.collision-target.svelte-172tbjk{position:absolute;display:grid;place-items:center;box-sizing:border-box;padding:0;border:0;background:#00000009;box-shadow:none;color:#34383a;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.collision-target--square.svelte-172tbjk{left:18%;top:58%}.collision-target.svelte-172tbjk:active{cursor:grabbing}.collision-target--circle.svelte-172tbjk{right:18%;top:29%;border-radius:50%}.collision-target-handle.svelte-172tbjk{--ui-radius: var(--size-12);display:grid;place-items:center;box-sizing:border-box;padding:6px;width:var(--size-32);aspect-ratio:1/1;min-width:var(--size-32);min-height:var(--size-32);border-radius:var(--size-12)!important}.collision-target.svelte-172tbjk .material-symbols-rounded:where(.svelte-172tbjk){font-family:Material Symbols Rounded;font-size:var(--size-16);font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;line-height:1}.sr-only.svelte-172tbjk{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.visual-debugger-card.svelte-1qqc0sf{--card-padding: var(--size-48);--card-top-padding: var(--card-padding);display:flex;align-items:center;justify-content:center;height:100%;box-sizing:border-box;background:var(--color-background-tint);border-radius:var(--ui-radius);overflow:hidden}@media(max-width:720px){.visual-debugger-card.svelte-1qqc0sf{--card-padding: var(--size-24);--card-top-padding: var(--highlight-card-mobile-top-padding);grid-column:span 2}}.visual-debugger-card-heading.svelte-1qqc0sf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-24);padding:var(--card-top-padding) var(--card-padding) var(--card-padding);text-align:center}.visual-debugger-card-heading.svelte-1qqc0sf h3:where(.svelte-1qqc0sf){display:flex;flex-direction:column;width:min-content;margin:0;font-family:Geist Pixel Circle,Doto,sans-serif;font-size:var(--highlight-card-heading-size);line-height:1}@media(max-width:720px){.visual-debugger-card-heading.svelte-1qqc0sf{gap:var(--size-20);padding:var(--card-top-padding) var(--card-padding) var(--card-padding)}}.toggle-switch.svelte-1qqc0sf{width:80px;height:48px;border-radius:999px;position:relative;cursor:pointer;overflow:hidden;transition:background-color .3s ease}.toggle-switch.svelte-1qqc0sf:hover{background-color:#0000001f}.toggle-switch.enabled.svelte-1qqc0sf{background-color:var(--color-primary)}.toggle-switch.svelte-1qqc0sf:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.knob.svelte-1qqc0sf{width:40px;height:40px;--ui-radius: 20px;--card-color: rgb(29, 29, 29);background-color:var(--color-primary);position:absolute;top:4px;left:4px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);padding:0}.toggle-switch.enabled.svelte-1qqc0sf .knob:where(.svelte-1qqc0sf){transform:translate(32px);background-color:#fff}.highlight-card-list{--highlight-card-heading-size: 3rem;--highlight-card-mobile-top-padding: var(--size-48)}.interactivity-explainer.svelte-60qq6r{margin-top:clamp(2.5rem,5vw,5rem)}@media(max-width:900px){.interactivity-explainer.svelte-60qq6r{grid-template-columns:1fr!important}}.interactivity-intro.svelte-60qq6r{grid-column:1/-1;text-align:center;width:min(100%,760px);margin:clamp(3rem,7vw,6rem) auto clamp(2rem,4vw,3.5rem)}.interactivity-intro.svelte-60qq6r h2:where(.svelte-60qq6r){margin-bottom:var(--size-16)}.highlight-card-list.svelte-60qq6r{grid-column:1/-1;display:flex;flex-direction:column;gap:clamp(var(--size-24),4vw,var(--size-48));width:100%}.highlight-card-list.svelte-60qq6r>article{width:100%;height:auto}.snapsort-preview.svelte-uxyq3s{width:100%;max-width:24rem;margin:0 auto;pointer-events:none}.todo-example.svelte-uxyq3s{min-width:0;padding:var(--size-24);box-sizing:border-box;overflow:hidden}.todo-example.svelte-uxyq3s h6:where(.svelte-uxyq3s){margin:0 0 var(--size-12);color:#8f9497;font-family:Bitcount Grid Single,monospace;font-size:.82rem;font-weight:300;letter-spacing:0;line-height:1}.todo-list.svelte-uxyq3s{display:flex;flex-direction:column;gap:var(--size-8);width:100%}.todo-item.svelte-uxyq3s{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgb(219,219,219);border-radius:var(--ui-radius);background:#fff}.todo-checkbox.svelte-uxyq3s{width:14px;height:14px;flex:0 0 auto;border:2px solid #ddd;border-radius:4px}.todo-checkbox.checked.svelte-uxyq3s{background-color:#3a2a22;border-color:#3a2a22}.todo-text.svelte-uxyq3s{min-width:0;overflow:hidden;color:#222;font-size:.85rem;font-weight:600;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.todo-text.strikethrough.svelte-uxyq3s{text-decoration:line-through;opacity:.6}.preview-priority.svelte-uxyq3s{flex:0 0 auto}.assets-header.svelte-qdw0w{width:min(100%,760px);margin:0 auto;text-align:center}.eyebrow.svelte-qdw0w{margin:0 0 var(--size-16);text-align:center}.subhead.svelte-qdw0w{color:#5d6266;font-size:clamp(1rem,1.3vw,1.18rem);max-width:620px;margin:0 auto;line-height:1.7;text-align:center}.assets-showcase.svelte-qdw0w{--assets-content-gap: clamp(2rem, 4vw, 3rem);margin-bottom:clamp(3rem,6vw,6rem)}.assets-grid.svelte-qdw0w{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;text-align:left;margin-top:var(--assets-content-gap)}.asset-card.svelte-qdw0w{display:flex;flex-direction:column;align-items:stretch;gap:var(--size-24);padding:clamp(1.5rem,3vw,2.5rem);transition:transform .2s ease;text-decoration:none;color:inherit;background:var(--color-background-tint);border:1px solid rgba(0,0,0,.12);border-radius:var(--ui-radius);box-sizing:border-box}.asset-card.svelte-qdw0w h3:where(.svelte-qdw0w){margin:0;font-family:Geist Pixel Circle,Doto,sans-serif;font-size:clamp(1.75rem,3vw,2.75rem);font-weight:500;letter-spacing:0;line-height:.95}.asset-card.svelte-qdw0w p:where(.svelte-qdw0w){margin:0;color:#5d6266;font-size:clamp(.95rem,1.1vw,1.05rem);font-weight:400;line-height:1.6;max-width:22rem}.asset-card.svelte-qdw0w:hover{transform:translateY(-2px)}.planned-card.svelte-qdw0w{min-height:0}.drop-snap-card{position:relative;overflow:hidden}.asset-copy.svelte-qdw0w{position:relative;z-index:1;min-width:0}.asset-card-header.svelte-qdw0w{display:flex;flex-direction:column;align-items:flex-start;gap:var(--size-12);margin-bottom:var(--size-16)}.framework-list.svelte-qdw0w{display:flex;flex-wrap:wrap;gap:var(--size-8);margin-top:var(--size-16)}.framework-chip.svelte-qdw0w{background:#f0f2f2;color:#3f4548}.asset-preview.svelte-qdw0w{position:relative;flex:1 1 auto;min-width:0;min-height:180px}.pending-preview.svelte-qdw0w{display:flex;align-items:center;justify-content:center;min-height:180px;border-radius:var(--size-8)}.pending-preview.svelte-qdw0w>span:where(.svelte-qdw0w){position:relative;z-index:1;color:#2024263d;font-family:Bitcount Grid Single,monospace;font-size:clamp(2rem,4vw,3.5rem);font-weight:300;line-height:1;text-align:center}.pending-plus-grid.svelte-qdw0w{position:absolute;top:10px;right:10px;bottom:10px;left:10px;z-index:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));grid-auto-rows:36px;overflow:hidden;pointer-events:none;color:#00000014;font-family:Bitcount Grid Single,monospace;font-size:10px;font-weight:300;line-height:1;place-items:center;-webkit-user-select:none;user-select:none}.pending-plus-grid.svelte-qdw0w span:where(.svelte-qdw0w){color:inherit;margin:0}@media(max-width:900px){.assets-grid.svelte-qdw0w{grid-template-columns:1fr}.asset-card.svelte-qdw0w{flex-direction:column;align-items:stretch;min-height:0}.asset-copy.svelte-qdw0w,.asset-preview.svelte-qdw0w{flex-basis:auto;min-height:160px}}.landing-section-gap{margin-top:clamp(5rem,9vw,8rem)}@media(max-width:900px){.landing-section-gap{margin-top:clamp(4rem,12vw,6rem)}}.landing-section-heading{font-size:clamp(1.85rem,3.4vw,3.35rem);line-height:1.06}