body{margin:0;background:#07080A}
a{color:#F2F3F5;text-decoration:none}a:hover{color:#FFFFFF}
*{box-sizing:border-box}
button{font:inherit}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes eqc{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:.9}}
@keyframes drop{0%{transform:translateY(-46px) rotate(-6deg);opacity:0}25%{transform:translateY(0) rotate(0);opacity:1}65%{transform:translateY(0);opacity:1}85%{transform:translateY(34px) scale(.85);opacity:.6}100%{transform:translateY(44px) scale(.8);opacity:0}}
@keyframes trayglow{0%,60%{border-color:#1F232A}75%{border-color:#C8FF2E}100%{border-color:#1F232A}}
@keyframes type{0%{width:0}60%,100%{width:var(--w)}}
@keyframes pop{0%,8%{transform:scale(0);opacity:0}16%{transform:scale(1.12);opacity:1}22%,88%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:0}}
@keyframes blink{50%{opacity:0}}
@keyframes hl{0%,22%{background:rgba(200,255,46,.08)}26%,100%{background:transparent}}
@keyframes rowhl{0%,18%{background:#14171C}22%,100%{background:transparent}}
@keyframes shackle{0%,30%{transform:translateY(-7px)}45%,100%{transform:translateY(0)}}
@keyframes lockpulse{0%,40%{box-shadow:0 0 0 0 rgba(200,255,46,0)}55%{box-shadow:0 0 0 10px rgba(200,255,46,.18)}100%{box-shadow:0 0 0 18px rgba(200,255,46,0)}}
@keyframes travel{0%{left:0%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:100%;opacity:0}}
@keyframes node{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.05)}}
@keyframes strike{0%,40%{width:0}55%,100%{width:100%}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes reveal{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.eqb{transform-origin:top;animation:eq 1s ease-in-out infinite}
.eqc{transform-origin:center;animation:eqc 1.1s ease-in-out infinite}
.marq{display:flex;width:max-content;animation:marquee 44s linear infinite}
.cat:hover{border-color:#3A3F48}
.cat:focus-visible,.btn:focus-visible{outline:2px solid #C8FF2E;outline-offset:3px}
.tile{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
html{scroll-behavior:smooth}
.tile{transition:transform .6s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .6s cubic-bezier(.16,1,.3,1)}
.tile:hover{transform:perspective(1000px) rotateX(3deg) translateY(-6px);border-color:#2C313A;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.cat{transition:background-color .35s cubic-bezier(.16,1,.3,1),color .35s,border-color .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.cat:active{transform:scale(.96)}
.btn{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-2px)}
.bar{transition:height .7s cubic-bezier(.2,.8,.2,1),background-color .5s}
.faq{border-bottom:1px solid #1F232A}
.faqq{width:100%;background:none;border:none;cursor:pointer;min-height:64px;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:left;font-size:18px;font-weight:500;color:#F2F3F5}
.faqq:focus-visible{outline:2px solid #C8FF2E;outline-offset:4px;border-radius:6px}
.faqq:hover{color:#FFFFFF}
.faqa{margin:0 0 22px;max-width:620px;font-size:16px;line-height:1.65;color:#9EA3AD}
.plus{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:99px;border:1px solid #2C313A;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#F2F3F5}
.plus::after{transform:rotate(90deg)}
.tw{display:block;height:8px;border-radius:4px;overflow:hidden}
.tw > span{display:block;height:100%;width:100%;background:#3A3F48;border-radius:4px;transform-origin:left;animation:typex 5s steps(18) infinite}
.bento{grid-template-columns:repeat(4,minmax(0,1fr))}
.bento .tall{grid-row:span 2}
.bento .wide{grid-column:span 3}
@media (max-width:1100px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .wide,.bento .mid-wide{grid-column:span 2}}
.quad{grid-template-columns:repeat(4,minmax(0,1fr))}
.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.trio{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1100px){.quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.quad{grid-template-columns:minmax(0,1fr)}.bento .mid-wide{grid-column:auto}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr)}.bento .tall{grid-row:auto}.bento .wide{grid-column:auto}}
@keyframes fillA{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fillB{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes typex{0%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
@supports (animation-timeline: view()){.rv{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 25%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Keep deep-linked FAQ and final CTA content fully visible regardless of scroll position. */
#faq .rv,.final-cta .rv{animation:none!important;opacity:1!important;transform:none!important}
/* Browsers may throttle hidden tabs; explicitly pause ornamental CSS motion while hidden. */
.page-hidden *, .page-hidden *::before, .page-hidden *::after{animation-play-state:paused!important}

/* Full-screen brand reveal. The CSS fallback dismisses the cover if JavaScript fails. */
.fliq-intro{--intro-word-reveal-duration:.3s;--intro-word-reveal-easing:cubic-bezier(.2,.8,.2,1);--intro-letter-phrase-duration:.68s;--intro-letter-phrase-easing:cubic-bezier(.22,1,.36,1);--intro-dot-bounce-duration:.5s;position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:transparent;color:#F2F3F5;isolation:isolate;animation:fliq-intro-failsafe 3.8s ease forwards}
.fliq-intro-panel{position:absolute;top:0;bottom:0;width:50.2%;background:#07080A;will-change:transform;z-index:0}
.fliq-intro-panel-left{left:0;animation:fliq-panel-left 3.2s cubic-bezier(.76,0,.24,1) forwards}
.fliq-intro-panel-right{right:0;animation:fliq-panel-right 3.2s cubic-bezier(.76,0,.24,1) forwards}
.fliq-intro-center{position:relative;z-index:1;width:min(92vw,1000px);height:clamp(360px,58vh,560px);margin-top:calc(16vh - 83px - clamp(125px,26.6vw,min(399px,41.8vh)));display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fliq-brand-breathe 1.1s ease-in-out 1.6s 1 both}
.fliq-intro-soundline{position:absolute;left:2%;top:42%;width:96%;height:90px;overflow:visible;transform:translateY(-50%);transform-origin:center;animation:fliq-line-contract .86s cubic-bezier(.2,.8,.2,1) .7s forwards}
.fliq-intro-soundline path{fill:none;stroke:#C8FF2E;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 10px rgba(200,255,46,.32));animation:fliq-line-draw .7s ease .02s forwards}
.fliq-intro-bars{position:absolute;left:50%;top:42%;display:flex;align-items:center;gap:10px;height:82px;transform:translate(-50%,-50%);z-index:2}
.fliq-intro-bars i{display:block;width:9px;border-radius:9px;background:#C8FF2E;transform:scaleY(0);transform-origin:center;box-shadow:0 0 18px rgba(200,255,46,.2);animation:fliq-bars-rise .78s cubic-bezier(.2,.8,.2,1) .78s both}
.fliq-intro-bars i:nth-child(1){height:34px;animation-delay:.78s}
.fliq-intro-bars i:nth-child(2){height:76px;animation-delay:.88s}
.fliq-intro-bars i:nth-child(3){height:52px;animation-delay:.98s}
.fliq-intro-bars i:nth-child(4){height:66px;animation-delay:1.08s}
.fliq-intro-word{position:absolute;top:calc(42% + 62px);display:flex;align-items:center;justify-content:center;gap:clamp(.11em,1.4vw,.16em);margin:0;color:#F7F8FA;font:700 clamp(132px,28vw,min(420px,44vh))/.95 'Unbounded',sans-serif;letter-spacing:0;white-space:nowrap;opacity:0;transform:translateY(22px) scale(.94);animation:fliq-word-reveal var(--intro-word-reveal-duration) var(--intro-word-reveal-easing) 1.04s forwards}
.fliq-intro-letter{--note-rise:-14px;--note-tilt:3deg;--note-start-tilt:-4deg;position:relative;display:inline-block;transform-origin:50% 82%;animation:fliq-letter-phrase var(--intro-letter-phrase-duration) var(--intro-letter-phrase-easing) var(--letter-delay,1.34s) both}
.fliq-intro-letter-f{--letter-delay:1.34s;--note-rise:-17px;--note-tilt:4deg;--note-start-tilt:-5deg;--note-settle-tilt:-1deg}
.fliq-intro-letter-l{--letter-delay:1.45s;--note-rise:-11px;--note-tilt:-3deg;--note-start-tilt:4deg;--note-settle-tilt:1deg}
.fliq-intro-letter-i{--letter-delay:1.56s;--note-rise:-18px;--note-tilt:3deg;--note-start-tilt:-4deg;--note-settle-tilt:-1deg;display:inline-flex;flex-direction:column;align-items:center;line-height:.95}
.fliq-intro-i-stem{display:block}
.fliq-intro-i-dot{position:absolute;top:.08em;left:50%;width:.105em;height:.105em;border-radius:50%;background:currentColor;transform:translate(-50%,0);transform-origin:center;animation:fliq-dot-bounce var(--intro-dot-bounce-duration) var(--intro-letter-phrase-easing) 1.82s both}
.fliq-intro-letter-q{--letter-delay:1.67s;--note-rise:-13px;--note-tilt:-4deg;--note-start-tilt:5deg;--note-settle-tilt:1deg}
.fliq-intro-skip{position:absolute;z-index:3;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #343A43;border-radius:999px;background:#111419;color:#F2F3F5;font:500 13px 'Geist',sans-serif;text-decoration:none;transition:border-color .18s,background .18s}
.fliq-intro-skip:hover{border-color:#C8FF2E;background:#171C15;color:#FFFFFF}
.fliq-intro-skip:focus-visible{outline:2px solid #C8FF2E;outline-offset:4px}
@keyframes fliq-line-draw{to{stroke-dashoffset:0}}
@keyframes fliq-line-contract{0%,12%{opacity:1;transform:translateY(-50%) scaleX(1)}100%{opacity:0;transform:translateY(-50%) scaleX(0)}}
@keyframes fliq-bars-rise{to{transform:scaleY(1)}}
@keyframes fliq-word-reveal{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fliq-letter-phrase{0%{transform:translateY(8px) rotate(var(--note-start-tilt)) scale(.96)}35%{transform:translateY(var(--note-rise)) rotate(var(--note-tilt)) scale(1.035)}58%{transform:translateY(3px) rotate(var(--note-settle-tilt)) scale(.99)}78%{transform:translateY(-4px) rotate(1deg) scale(1.01)}100%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes fliq-dot-bounce{0%{opacity:1;transform:translate(-50%,0) scale(1)}34%{opacity:1;transform:translate(-50%,-.18em) scale(1.08)}66%{opacity:1;transform:translate(-50%,.025em) scale(.98)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes fliq-brand-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.012)}}
@keyframes fliq-panel-left{0%,81.25%{transform:translateX(0);opacity:1}100%{transform:translateX(-101%);opacity:0}}
@keyframes fliq-panel-right{0%,81.25%{transform:translateX(0);opacity:1}100%{transform:translateX(101%);opacity:0}}
@keyframes fliq-intro-failsafe{0%,84%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;pointer-events:none}}
@media (max-width:600px){.fliq-intro-center{width:94vw;height:240px;margin-top:-28px}.fliq-intro-soundline{width:98%;left:1%;height:72px}.fliq-intro-bars{gap:7px;height:70px}.fliq-intro-bars i{width:7px}.fliq-intro-bars i:nth-child(1){height:29px}.fliq-intro-bars i:nth-child(2){height:65px}.fliq-intro-bars i:nth-child(3){height:45px}.fliq-intro-bars i:nth-child(4){height:56px}.fliq-intro-word{top:calc(42% + 52px);font-size:clamp(96px,30vw,180px);gap:.13em}}
@media (max-height:560px){.fliq-intro-center{width:90vw;height:clamp(160px,48vh,220px);margin-top:-16px}.fliq-intro-soundline,.fliq-intro-bars{top:36%}.fliq-intro-bars{height:62px}.fliq-intro-bars i:nth-child(1){height:27px}.fliq-intro-bars i:nth-child(2){height:58px}.fliq-intro-bars i:nth-child(3){height:40px}.fliq-intro-bars i:nth-child(4){height:51px}.fliq-intro-word{top:calc(36% + 42px);font-size:clamp(88px,16vw,150px)}.fliq-intro-skip{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}}
@media (prefers-reduced-motion:reduce){.fliq-intro{animation:fliq-intro-reduced .16s ease-out forwards!important}.fliq-intro-panel{animation:none}.fliq-intro-center{animation:none}.fliq-intro-soundline{display:none}.fliq-intro-bars i{transform:scaleY(1);animation:none}.fliq-intro-word{opacity:1;transform:none;animation:none}.fliq-intro-letter{animation:none;transform:none}.fliq-intro-i-dot{animation:none;opacity:1;transform:translate(-50%,0)}}
@keyframes fliq-intro-reduced{to{opacity:0;visibility:hidden;pointer-events:none}}

/* Fit the sound-flow illustration to its card; retain its full labeled sequence on phones. */
.sound-flow-card,.sound-flow-viewport{min-width:0;max-width:100%}
.sound-flow-track{gap:clamp(8px,1.2vw,16px)}
.sound-flow-source,.sound-flow-mix,.sound-flow-separated{min-width:0}
.sound-flow-stage-label{max-width:100%;overflow-wrap:anywhere;line-height:1.35}
.sound-flow-captured .sound-flow-stage-label,.sound-flow-clean .sound-flow-stage-label,.sound-flow-learned .sound-flow-stage-label{left:-12px!important;right:auto!important;width:160px;max-width:160px;white-space:normal;overflow-wrap:normal;word-break:normal;transform:none}
.sound-flow-captured>span:first-child,.sound-flow-captured>span:nth-child(2),.sound-flow-clean>span:first-child{inset:0 32px 20px!important}
.sound-flow-clean>span:nth-child(2){inset:10px 42px 30px!important}
.sound-flow-learned>span:first-child{inset:-4px 8px auto!important;height:120px}
.sound-flow-learned>span:nth-child(2){inset:0 26px 28px!important}
.sound-flow-world .sound-flow-stage-label{white-space:nowrap}
@media(max-width:700px){
  .sound-flow-track{height:auto!important;width:100%;min-width:0;padding:20px 16px 30px!important;display:flex;flex-direction:column;gap:4px}
  .sound-flow-world{flex:none!important;width:100%!important;height:110px;grid-template-columns:repeat(3,44px)!important;justify-content:center;align-content:start;gap:8px 12px!important;padding-bottom:20px}
  .sound-flow-world .sound-flow-stage-label{top:auto!important;bottom:0;left:0;right:0;text-align:center}
  .sound-flow-source,.sound-flow-mix,.sound-flow-separated{flex:none!important;width:100%;height:112px!important;display:flex;align-items:center}
  .sound-flow-source svg,.sound-flow-mix svg,.sound-flow-separated svg{width:100%;height:82px!important;overflow:visible}
  .sound-flow-source .sound-flow-stage-label,.sound-flow-mix .sound-flow-stage-label,.sound-flow-separated .sound-flow-stage-label{bottom:0}
  .sound-flow-captured,.sound-flow-clean,.sound-flow-learned{flex:none!important;width:100%!important;height:96px!important;display:flex;align-items:center;justify-content:center}
  .sound-flow-captured .sound-flow-stage-label,.sound-flow-clean .sound-flow-stage-label,.sound-flow-learned .sound-flow-stage-label{top:auto!important;bottom:0;left:0!important;right:0!important;width:100%;max-width:100%;text-align:center}
  .sound-flow-captured>span:first-child,.sound-flow-captured>span:nth-child(2),.sound-flow-clean>span:first-child{inset:0 auto 20px calc(50% - 36px)!important;width:72px;height:72px}
  .sound-flow-clean>span:nth-child(2){inset:10px auto 30px calc(50% - 26px)!important;width:52px;height:52px}
  .sound-flow-learned>span:first-child{inset:-4px auto auto calc(50% - 60px)!important;width:120px;height:120px}
  .sound-flow-learned>span:nth-child(2){inset:0 auto 28px calc(50% - 42px)!important;width:84px;height:84px}
}

/* Browser-local sound microscope */
.sound-microscope{max-width:1240px;margin:0 auto;padding:112px 24px 40px;display:flex;flex-direction:column;gap:34px}
.sm-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.sm-heading>div{max-width:730px;display:flex;flex-direction:column;gap:14px}
.sm-kicker,.sm-plot-kicker{font:12px 'Geist Mono',monospace;letter-spacing:.04em;color:#C8FF2E}
.sm-heading h2{margin:0;font:600 clamp(32px,4.4vw,58px)/1.02 'Unbounded',sans-serif;letter-spacing:-.035em;color:#fff}
.sm-heading>p{max-width:400px;margin:0;color:#B5BAC3;font-size:16px;line-height:1.6}
.sm-panel{display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:26px;padding:24px;border:1px solid #252A33;border-radius:28px;background:linear-gradient(145deg,#101318,#0B0D10 65%);box-shadow:0 26px 70px rgba(0,0,0,.28)}
.sm-controls{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-width:0}
.sm-drop{min-height:176px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:20px;border:1px dashed #454D59;border-radius:18px;background:#11151A;transition:border-color .2s,background .2s}
.sm-drop.dragover{border-color:#C8FF2E;background:#171C15}
.sm-drop-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(200,255,46,.12);color:#C8FF2E;font-size:24px;line-height:1}
.sm-drop label{font-size:15px;font-weight:600;color:#F2F3F5;cursor:pointer}
.sm-drop-hint{font-size:12px;line-height:1.5;color:#B5BAC3}
#sm-file{width:100%;max-width:100%;color:#D6D8DD;font-size:12px}
#sm-file::file-selector-button{min-height:40px;margin-right:10px;padding:8px 12px;border:1px solid #3A414B;border-radius:999px;background:#1A1F26;color:#F2F3F5;font:600 12px 'Geist',sans-serif;cursor:pointer}
#sm-file:focus-visible,#sm-scrub:focus-visible,.sm-demo:focus-visible{outline:2px solid #C8FF2E;outline-offset:3px}
.sm-local-note{margin:0;color:#B5BAC3;font-size:12px;line-height:1.55}
.sm-demo{align-self:flex-start;min-height:44px;padding:10px 16px;border:1px solid rgba(200,255,46,.5);border-radius:999px;background:rgba(200,255,46,.1);color:#D9FF78;font:600 13px 'Geist',sans-serif;cursor:pointer}
.sm-demo:hover{background:rgba(200,255,46,.17)}
.sm-status,.sm-error{min-height:20px;margin:0;font-size:13px;line-height:1.5;color:#B5BAC3;overflow-wrap:anywhere}
.sm-error{color:#FFB58A}
#sm-audio{width:100%;min-height:44px;accent-color:#C8FF2E;color-scheme:dark}
.sm-analysis{min-width:0;display:flex;flex-direction:column;gap:14px}
.sm-plot-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.sm-plot-head>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sm-source{max-width:100%;padding:5px 10px;border:1px solid #343A44;border-radius:999px;background:#15191F;color:#D6D8DD;font:11px 'Geist Mono',monospace;overflow-wrap:anywhere}
.sm-energy-key{display:inline-flex;align-items:center;gap:7px;color:#B5BAC3;font:11px 'Geist Mono',monospace}
.sm-energy-key i{width:9px;height:9px;border-radius:50%;background:#C8FF2E;box-shadow:0 0 12px rgba(200,255,46,.55)}
.sm-plot-wrap{width:100%;min-width:0;overflow:hidden;border:1px solid #242A33;border-radius:16px;background:linear-gradient(180deg,#0A0C0F,#10141A)}
#sm-plot{display:block;width:100%;height:auto;min-height:220px;aspect-ratio:960/420}
.sm-grid{fill:none;stroke:#272D36;stroke-width:1;vector-effect:non-scaling-stroke}
.sm-axis-labels{fill:#9EA6B2;font:12px 'Geist Mono',monospace}
.sm-empty-plot{fill:#7F8997;font:15px 'Geist',sans-serif}
.sm-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #242A33;border-radius:14px;background:#0D1014}
.sm-metrics>div{min-width:0;display:flex;flex-direction:column;gap:7px;padding:13px 14px;border-right:1px solid #242A33}
.sm-metrics>div:last-child{border-right:0}
.sm-metrics span{color:#9EA6B2;font:10px 'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.035em}
.sm-metrics strong{color:#F2F3F5;font:600 14px 'Geist',sans-serif;overflow-wrap:anywhere}
.sm-measurement-note{margin:-4px 0 0;color:#9EA6B2;font-size:12px;line-height:1.5}
.sm-scrub-row{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:14px;color:#B5BAC3;font-size:13px}
#sm-scrub{width:100%;min-width:0;accent-color:#C8FF2E;cursor:pointer}
#sm-position{min-width:38px;text-align:right;color:#F2F3F5;font:12px 'Geist Mono',monospace}
@media(max-width:820px){.sm-panel{grid-template-columns:minmax(0,1fr)}.sm-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.sm-drop{grid-row:span 4}.sm-local-note,.sm-status,.sm-error,.sm-demo,#sm-audio{grid-column:2}.sm-local-note{align-self:end}}
@media(max-width:560px){.sound-microscope{padding:84px 18px 32px;gap:24px}.sm-panel{padding:15px;border-radius:22px;gap:20px}.sm-controls{display:flex}.sm-drop{min-height:150px}.sm-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.sm-metrics>div:nth-child(2){border-right:0}.sm-metrics>div:nth-child(-n+2){border-bottom:1px solid #242A33}.sm-scrub-row{grid-template-columns:1fr auto}.sm-scrub-row label{grid-column:1/-1}#sm-plot text{font-size:30px!important}}