/* AUTO-GENERATED from 04_V2_Experience/compare.html. Do not edit. */
/* establishing shot */
.q-hero{position:relative;min-height:86svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:radial-gradient(120% 90% at 50% 28%,#16191e 0%,#0c0e11 55%,#08090b 100%)}
.q-hero .bg{position:absolute;left:0;right:0;top:7%;height:50%;display:flex;align-items:flex-end;justify-content:center;padding:0 3vw}
.q-hero .bg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 26px 60px rgba(0,0,0,.55))}
.q-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(8,9,11,.72) 66%,#08090b 100%)}
.q-hero .inner{position:relative;z-index:2;padding-bottom:8vh}
.q-hero h1{font-family:var(--disp);font-weight:600;text-transform:uppercase;color:var(--white);font-size:clamp(38px,6.4vw,104px);line-height:.94;text-shadow:0 2px 28px rgba(0,0,0,.65)}
.q-hero h1 .thin{font-weight:300;color:var(--steel-2)}
.q-hero p{max-width:52ch;margin-top:22px;font-size:16px;font-weight:300;color:#cfd2d7;text-shadow:0 1px 14px rgba(0,0,0,.55)}

/* the machine stage + rail */
.q-stage{background:radial-gradient(120% 95% at 50% 20%,#1a1e24 0%,#101216 45%,var(--ink) 100%);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.q-stage .render{height:min(46vh,430px);display:flex;align-items:center;justify-content:center;padding:5vh 40px 0}
.q-stage .render img{max-height:100%;width:auto;max-width:min(860px,86vw);object-fit:contain;filter:drop-shadow(0 40px 70px rgba(0,0,0,.7));opacity:0;transform:scale(.97)}
.q-stage .rail{display:flex;justify-content:center;gap:0;flex-wrap:wrap;padding:4vh 22px 5vh}
.q-stage .rail button{appearance:none;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--steel);font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:12px;padding:16px 26px;cursor:pointer;transition:color .42s var(--ease),border-color .42s var(--ease)}
.q-stage .rail button:hover{color:var(--white)}
.q-stage .rail button.on{color:var(--white);border-bottom-color:var(--steel-2)}
.q-stage .rail button.pin{color:var(--white);border-bottom-color:#fff}
.q-stage .railhint{text-align:center;padding-bottom:4vh;font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--low)}

/* the instrument */
.q-axis .tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.q-axis .tabs button{appearance:none;background:transparent;border:1px solid var(--line);color:var(--steel);font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:11px;padding:12px 22px;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.q-axis .tabs button.on{color:var(--ink);background:var(--white);border-color:var(--white)}
.q-axis .track{padding:26px 0;border-bottom:1px solid var(--line-2);transition:opacity .42s var(--ease)}
.q-axis .track.dim{opacity:.25}
.q-axis .track.hidden{display:none}
.q-axis .track .top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}
.q-axis .track .tl{display:flex;align-items:center;gap:16px}
.q-axis .track .tthumb{height:44px;width:auto;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.q-axis .track .nm{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--white)}
.q-axis .track .cls{font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--muted)}
.q-axis .track .lane{position:relative;height:34px}
.q-axis .track .scale{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-2)}
.q-axis .track .range{position:absolute;top:50%;height:1px;background:var(--steel);transform:translateY(-50%);width:0}
.q-axis .track .range::before,.q-axis .track .range::after{content:"";position:absolute;top:50%;transform:translate(0,-50%);width:1px;height:14px;background:var(--steel-2)}
.q-axis .track .range::before{left:0}
.q-axis .track .range::after{right:0}
.q-axis .track .vmin,.q-axis .track .vmax{position:absolute;top:-4px;font-family:var(--disp);font-size:13px;color:var(--steel-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.q-axis .track .vmin{transform:translateX(-50%)}
.q-axis .track .vmax{transform:translateX(-50%)}
.q-axis .track .qual{position:absolute;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);font-weight:300}
.q-axis .note{margin-top:30px;font-size:13px;color:var(--low);max-width:70ch;line-height:1.7}

/* compare mode readout */
.q-duo{margin-top:50px;border:1px solid var(--line-2);background:var(--ink-2);padding:36px 34px;display:none}
.q-duo.on{display:block}
.q-duo .hd{font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted);margin-bottom:26px}
.q-duo .grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.q-duo .side .dimg{height:120px;width:auto;margin-bottom:18px;filter:drop-shadow(0 14px 20px rgba(0,0,0,.55))}
.q-duo .side .nm{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:18px;color:var(--white)}
.q-duo .side .one{margin-top:12px;font-size:14.5px;color:var(--txt);font-weight:300;line-height:1.7}
.q-duo .side .fig{margin-top:16px;font-family:var(--disp);font-size:12px;letter-spacing:.1em;color:var(--steel);text-transform:uppercase;line-height:2}
@media(max-width:760px){.q-duo .grid{grid-template-columns:1fr}}