.compare-section{background:radial-gradient(700px 500px at 20% 62%,#3d90ff13,#0000 72%),radial-gradient(680px 480px at 84% 40%,#e041d313,#0000 72%);position:relative;overflow:hidden}.compare-section:before{content:"";background:linear-gradient(90deg,#0000,#4fbdff33,#e143d333,#0000);width:min(88%,1420px);height:1px;position:absolute;top:0;left:50%;transform:translate(-50%)}.compare-wrap{z-index:1;position:relative}.compare-heading{margin-bottom:34px}.compare-badge{color:#a38df0;letter-spacing:.1em;text-transform:uppercase;background:#7d5beb13;border:1px solid #8d65ef29;border-radius:999px;align-items:center;gap:7px;padding:6px 10px;font-size:.58rem;font-weight:800;display:inline-flex}.compare-heading h2{color:#fff;letter-spacing:-.035em;margin:13px 0 9px;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1}.compare-heading p{color:#8c93aa;max-width:680px;margin:0 auto;font-size:.88rem}.compare-console{background:linear-gradient(145deg,#111631e0,#0a0d20db);border:1px solid #7a6bdd40;border-radius:25px;padding:clamp(18px,2.4vw,30px);transition:border-color .35s,box-shadow .35s;position:relative;box-shadow:0 34px 90px #0000004d,0 0 46px #664ce012,inset 0 1px #ffffff0b}.compare-console.show-after{border-color:#9e57f152;box-shadow:0 34px 90px #0000004d,0 0 54px #df43d214,inset 0 1px #ffffff0d}.compare-console-top{justify-content:space-between;align-items:center;gap:20px;margin-bottom:17px;display:flex}.compare-overline{color:#6f75a0;letter-spacing:.14em;font-size:.54rem;font-weight:800}.compare-console-top h3{color:#edf0fa;margin:3px 0 0;font-size:1rem}.compare-toggle{background:#050816b8;border:1px solid #ffffff12;border-radius:999px;gap:4px;padding:4px;display:flex}.compare-toggle button{color:#747d99;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:7px;min-width:105px;padding:8px 14px;font-size:.65rem;font-weight:700;transition:color .2s,background .2s,box-shadow .2s;display:flex}.compare-toggle button i{background:#596079;border-radius:50%;width:6px;height:6px}.compare-toggle button.active{color:#fff;background:linear-gradient(90deg,#3aa5ff2e,#7d51ea38,#e240d329);box-shadow:inset 0 1px #ffffff0f,0 0 15px #6f53e51f}.compare-toggle button.active i{background:#cb75ff;box-shadow:0 0 8px #cb75ffb3}.compare-wave-stage{background:linear-gradient(#080c1fc7,#0e0f26b8);border:1px solid #fff1;border-radius:18px;height:250px;padding:18px 16px 28px;position:relative;overflow:hidden;box-shadow:inset 0 0 45px #4853b90e}.compare-wave-stage:after{content:"";filter:blur(25px);opacity:.1;background:linear-gradient(90deg,#42c1ff,#815eff,#e747d4);border-radius:50%;height:40px;transition:opacity .35s;position:absolute;bottom:-22px;left:18%;right:18%}.show-after .compare-wave-stage:after{opacity:.25}.wave-stage-grid{opacity:.44;background-image:linear-gradient(#6b75b012 1px,#0000 1px),linear-gradient(90deg,#6b75b00e 1px,#0000 1px);background-size:100% 42px,10% 100%;position:absolute;inset:0}.compare-waveform{z-index:2;filter:drop-shadow(0 0 8px #6b66f43d);align-items:center;gap:clamp(1px,.2vw,3px);display:flex;position:absolute;inset:28px 16px 32px}.compare-waveform i{height:var(--wave-height);opacity:.72;transform-origin:50%;min-height:3px;animation:compare-wave-pulse 2.8s ease-in-out var(--wave-delay)infinite;background:linear-gradient(#e94bd8,#8765f1 48%,#46c7ff);border-radius:99px;flex:1;transition:height .42s cubic-bezier(.2,.8,.2,1),opacity .35s}.show-before .compare-waveform i{opacity:.48;filter:saturate(.74)}.compare-playhead{z-index:3;background:linear-gradient(#0000,#ffffff6b,#0000);width:1px;animation:8s linear infinite compare-playhead;position:absolute;top:22px;bottom:26px;box-shadow:0 0 7px #ffffff2e}.wave-axis{z-index:3;color:#4f5771;justify-content:space-between;font-family:monospace;font-size:.49rem;display:flex;position:absolute;bottom:8px;left:16px;right:16px}.wave-state-label{z-index:3;color:#666f8b;align-items:center;gap:6px;font-family:monospace;font-size:.48rem;display:flex;position:absolute;top:9px;right:12px}.wave-state-label i{background:#8265ee;border-radius:50%;width:5px;height:5px;box-shadow:0 0 7px #8265ee99}.show-after .wave-state-label i{background:#e34bd1;box-shadow:0 0 8px #e34bd1b3}.compare-lower-grid{grid-template-columns:.9fr .9fr 1.2fr;gap:13px;margin-top:13px;display:grid}.compare-meter-card,.compare-metrics{background:#ffffff06;border:1px solid #ffffff0f;border-radius:15px;min-width:0;height:174px;padding:14px}.compare-card-title{color:#b8becf;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.64rem;font-weight:700;display:flex}.compare-card-title i{color:#6d718c;background:#ffffff09;border-radius:4px;padding:2px 5px;font-family:monospace;font-size:.48rem;font-style:normal}.compare-loudness{grid-template-columns:repeat(3,1fr) 1.35fr;gap:6px;height:126px;display:grid}.compare-loudness-channel{color:#59627e;text-align:center;flex-direction:column;gap:4px;min-width:0;font:700 .48rem monospace;display:flex}.compare-loudness-channel>div{background:#040714b8;border-radius:4px;flex:1;position:relative;overflow:hidden}.compare-loudness-channel>div:after{content:"";background:repeating-linear-gradient(#0000 0 6px,#040714b3 6px 8px);position:absolute;inset:0}.compare-loudness-channel i{height:var(--meter-level);background:linear-gradient(#e84ad6,#7e66ed 38%,#48c8ff);transition:height .45s;position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 9px #7062ee3d}.compare-peak{color:#5c6681;border-left:1px solid #ffffff0e;flex-direction:column;justify-content:center;align-items:center;font-family:monospace;display:flex}.compare-peak span{letter-spacing:.05em;font-size:.42rem}.compare-peak strong{color:#69d2ff;margin-top:6px;font-size:.82rem}.compare-peak small{font-size:.44rem}.show-after .compare-peak strong{color:#e584ef;text-shadow:0 0 9px #e584ef33}.compare-dynamics{flex-direction:column;justify-content:flex-end;height:126px;display:flex}.dynamics-bars{align-items:flex-start;gap:3px;height:84px;display:flex}.dynamics-bars i{opacity:.68;background:linear-gradient(#dc4ed1,#7067e9 58%,#42c2fa);border-radius:2px;flex:1;min-height:6px;transition:height .42s cubic-bezier(.2,.8,.2,1)}.dynamics-readout{border-top:1px solid #ffffff0e;justify-content:space-between;align-items:center;margin-top:7px;padding-top:7px;font-family:monospace;display:flex}.dynamics-readout strong{color:#bba8f5;font-size:.7rem}.dynamics-readout span{color:#5d6680;font-size:.48rem}.compare-metrics{flex-direction:column;justify-content:center;gap:8px;display:flex}.compare-metric{grid-template-columns:28px minmax(48px,1fr) auto minmax(58px,1fr);align-items:center;gap:8px;display:grid}.metric-icon{color:#8f78dd;background:#825be514;border-radius:8px;place-items:center;width:27px;height:27px;display:grid}.compare-metric span:nth-child(2) small{color:#646d87;font-size:.48rem;display:block}.compare-metric span:nth-child(2) strong{color:#8f96aa;font-family:monospace;font-size:.68rem}.compare-metric>svg{color:#545d77}.metric-result{color:#64cfff;align-items:baseline;gap:4px;display:flex}.metric-result strong{font-family:monospace;font-size:.8rem}.metric-result small{color:#67718c;font-size:.48rem}.show-after .metric-result{color:#e182f1;text-shadow:0 0 10px #e182f129}.compare-example-note{color:#505870;text-align:right;border-top:1px solid #ffffff0d;padding-top:5px;font-size:.49rem}.compare-proof-strip{grid-template-columns:1fr 1fr auto;align-items:stretch;gap:10px;margin:14px 10px 0;display:grid}.compare-proof{background:#ffffff05;border:1px solid #ffffff0e;border-radius:13px;align-items:center;gap:11px;min-width:0;padding:12px 14px;display:flex}.compare-proof>span{color:#67cffc;background:#42c1ff13;border:1px solid #42c1ff1f;border-radius:9px;flex:0 0 32px;place-items:center;width:32px;height:32px;display:grid}.compare-proof div{flex-direction:column;gap:3px;min-width:0;display:flex}.compare-proof strong{color:#b9c0d4;font-size:.66rem}.compare-proof small{color:#626b85;font-size:.53rem;line-height:1.45}.compare-proof-strip>a{color:#d6c9ff;background:linear-gradient(135deg,#8b5cf617,#38bdf80e);border:1px solid #8b5cf633;border-radius:13px;justify-content:center;align-items:center;gap:7px;min-width:190px;padding:0 18px;font-size:.62rem;font-weight:750;text-decoration:none;transition:border-color .2s,transform .2s,background .2s;display:inline-flex}.compare-proof-strip>a:hover{background:linear-gradient(135deg,#8b5cf624,#38bdf814);border-color:#8b5cf661;transform:translateY(-1px)}@keyframes compare-wave-pulse{0%,to{transform:scaleY(.96)}50%{transform:scaleY(1.04)}}@keyframes compare-playhead{0%{left:16px}to{left:calc(100% - 16px)}}@media (prefers-reduced-motion:reduce){.compare-waveform i,.compare-playhead{animation:none}.compare-playhead{left:52%}}@media (max-width:850px){.compare-lower-grid{grid-template-columns:1fr 1fr}.compare-metrics{grid-column:1/-1;height:auto}.compare-proof-strip{grid-template-columns:1fr 1fr}.compare-proof-strip>a{grid-column:1/-1;min-height:44px}}@media (max-width:620px){.compare-console-top{flex-direction:column;align-items:flex-start}.compare-toggle{width:100%}.compare-toggle button{flex:1;min-width:0}.compare-wave-stage{height:210px}.compare-lower-grid{grid-template-columns:1fr}.compare-meter-card,.compare-metrics{height:auto;min-height:170px}.compare-metrics{grid-column:auto}.compare-proof-strip{grid-template-columns:1fr;margin-inline:0}.compare-proof-strip>a{grid-column:auto;min-height:46px}}
