/* DetailX · 画质评测 — evaluation chapters. An opener (name, question, what good and bad look like, the numeral set large), then the
   picture for that dimension given most of the width, with one verdict card beside it and a distinct comparison toolbar.
   Narrow containers keep the same order: opener, picture, card. */
.quality-page{background:var(--bg);color:var(--text);min-height:100vh;overflow-x:clip}
.scroll-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:60;background:var(--lime);transform-origin:left;transform:scaleX(var(--scroll,0));box-shadow:0 0 10px var(--lime);pointer-events:none}

/* Sticky chapter directory */
.quality-anchor{position:sticky;top:0;z-index:30;background:rgba(10,12,10,.76);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-block:1px solid var(--line)}
.quality-anchor-inner{max-width:1360px;margin:auto;padding:0 var(--gutter);display:flex;align-items:center;gap:36px;min-height:66px}
.quality-anchor-label{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:550;white-space:nowrap;color:var(--text)}
.anchor-aperture{display:flex;color:var(--lime);transform:rotate(calc(var(--scroll,0)*720deg))}
.anchor-aperture svg{width:18px;height:18px}
.quality-anchor-links{display:flex;justify-content:space-between;min-width:0;flex:1;gap:6px}
.quality-anchor-links>a{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font-size:13px;color:var(--text-2);min-width:0;overflow-wrap:anywhere;text-align:center;line-height:1.35;transition:color .35s}
.quality-anchor-links>a small{font-family:var(--mono);font-size:10px;color:var(--text-3);transition:color .35s}
.quality-anchor-links>a:hover{color:var(--text)}
.quality-anchor-links>a[aria-current]{color:var(--lime)}
.quality-anchor-links>a[aria-current] small{color:var(--lime)}
.quality-anchor-links>.indicator{background:var(--lime-soft);border:1px solid var(--lime-line);border-radius:999px}
.anchor-progress{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--lime);transform-origin:left;transform:scaleX(var(--scroll,0));opacity:.7}

/* ---------- Chapter ---------- */
.quality-section{position:relative;scroll-margin-top:66px;border-bottom:1px solid var(--line);overflow:clip}
.quality-section.alt{background:var(--bg-2)}
.quality-section-inner{position:relative;max-width:1360px;margin:auto;padding:104px var(--gutter);container-type:inline-size}

/* Opener: the question on the left, the chapter numeral on the right, one hairline beneath */
.q-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding-bottom:34px;margin-bottom:40px;border-bottom:1px solid var(--line)}
.quality-eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-2);flex-wrap:wrap}
.quality-eyebrow>i{width:24px;height:1px;background:var(--lime)}
.quality-eyebrow>em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--text-3);margin-left:4px}
.q-title h2{overflow-wrap:anywhere;margin-top:20px;font-size:clamp(28px,3.6cqi,46px);font-weight:500;line-height:1.22;letter-spacing:-.035em}
.q-num{font-size:clamp(110px,17cqi,210px);font-weight:300;line-height:.74;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(var(--lime-rgb),.34);user-select:none;margin-right:-.04em}
.qgb{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px}
.qgb li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2)}
.qgb .icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex-shrink:0}
.qgb .icon svg{width:12px;height:12px}
.qgb .good .icon{background:var(--lime-soft);color:var(--lime)}
.qgb .bad .icon{background:rgba(255,141,118,.12);color:#ff9d88}
.qgb .bad span{color:var(--text-3)}

/* Body: the picture takes the width, the verdict card rides beside it */
.q-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,28cqi,340px);gap:clamp(20px,2.6cqi,32px);align-items:start}
.quality-section.alt .q-body{grid-template-columns:clamp(280px,28cqi,340px) minmax(0,1fr)}
.quality-section.alt .quality-visual{order:2}
.quality-visual{min-width:0}

/* Verdict card: the measured answer, the rank, the way into the Lab */
.qv{position:sticky;top:150px;display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:24px;border:1px solid var(--lime-line);background:radial-gradient(120% 80% at 0% 0%,rgba(var(--lime-rgb),.1),transparent 62%),var(--surface)}
.qv.pending{border:1px dashed var(--line-3);background:var(--surface)}
.qv-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--lime)}
.qv-head{display:block;margin-top:12px;font-size:clamp(23px,2.5cqi,30px);font-weight:550;line-height:1.28;letter-spacing:-.025em}
.qv-head span{display:inline-block}
.qv p{margin-top:10px;font-size:13px;line-height:1.75;color:var(--text-2)}
.qv-meta{display:flex;flex-direction:column;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3)}
.qv-lead{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:12px;color:var(--text-2)}
.qv-lead b{font-family:var(--mono);font-size:20px;font-weight:500;color:var(--lime);margin-right:2px}
.qv-progress{display:block;width:100%;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden}
.qv-progress i{display:block;height:100%;width:var(--p);background:var(--lime)}
.qv-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding:6px 6px 6px 20px;border-radius:999px;background:var(--lime);color:var(--lime-ink);font-size:14px;font-weight:600;min-width:0;overflow-wrap:anywhere;transition:transform .6s var(--ease),box-shadow .4s}
.qv-cta>.icon.arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--lime-ink);color:var(--lime);transition:transform .6s var(--spring)}
.qv-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(var(--lime-rgb),.6)}
.qv-cta:hover>.icon.arrow{transform:rotate(45deg)}
.qv-cta.is-returning,.qv-card.is-returning,.qx-look.is-returning,.quality-noise-visual.is-returning{animation:labReturn 1.2s var(--ease)}

/* Chart card: the whole card opens the Lab */
.qv-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.qv-card{margin:0;padding:22px 24px 20px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.012);cursor:pointer;transition:border-color .4s,background-color .4s}
.qv-card:hover{border-color:var(--lime-line);background:rgba(var(--lime-rgb),.025)}
.qv-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.qv-card-head strong{font-size:14px;font-weight:550}
.qv-card-head span{font-size:12px;color:var(--text-3);overflow-wrap:anywhere}

/* Scatter: clarity × fidelity */
.qs{display:block;width:100%;height:auto;overflow:visible}
.qs .grid line{stroke:rgba(226,238,214,.06)}
.qs .axis{fill:none;stroke:var(--line-3)}
.qs .zone{fill:rgba(var(--lime-rgb),.06);stroke:rgba(var(--lime-rgb),.18);stroke-dasharray:4 5}
.qs .zone-label{font-size:12px;fill:var(--lime)}
.qs .axis-label{font-size:11px;fill:var(--text-2)}
.qs .guide{fill:none;stroke:var(--lime);stroke-dasharray:3 5;opacity:0;transition:opacity .6s .9s}
.qv-card.is-in .qs .guide{opacity:.55}
.qs-dot{transform:scale(0);transition:transform .9s var(--spring);transition-delay:calc(var(--i)*120ms + .2s)}
.qv-card.is-in .qs-dot{transform:none}
.qs-dot .core{fill:var(--c);stroke:var(--bg);stroke-width:2}
.qs-dot.ours .core{stroke:none}
.qs-dot .halo{fill:rgba(var(--lime-rgb),.16);animation:qsPulse 2.6s ease-out infinite}
.qs-dot text{font-size:14px;font-weight:550;fill:var(--text)}
.qs-dot.ours text{fill:var(--lime)}
@keyframes qsPulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* Exact-frame evidence: one consistent language across all evaluation chapters. */
.q-definition{max-width:780px;margin-top:18px;color:var(--text-2);font-size:13px;line-height:1.9;text-wrap:pretty}
.qv .qv-limit{margin-top:18px;font-size:11px;color:var(--text-3);line-height:1.8}
.q-evidence{border:1px solid var(--line-3);border-radius:24px;overflow:hidden;background:var(--surface);box-shadow:0 12px 32px -24px rgba(0,0,0,.65)}
.q-evidence-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:12px 20px;border-bottom:1px solid var(--line-2);background:var(--surface-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);color:var(--text-2);font-size:12px}
.q-evidence-head>span:first-child{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:550}
.q-evidence-head i{width:5px;height:5px;background:var(--lime);border-radius:50%;box-shadow:0 0 10px var(--lime)}
.q-evidence-head .mono{flex-shrink:0;padding:4px 9px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);font-size:10px;line-height:1.4;font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap}
.q-frame{position:relative;aspect-ratio:16/9;background:#030403;isolation:isolate}
.q-frame-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.q-frame-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split))}
.q-frame-tag{position:absolute;top:14px;left:14px;padding:5px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(5,7,5,.72);backdrop-filter:blur(8px);font-size:11px;color:#fff;pointer-events:none}
.q-frame-tag.ours{left:auto;right:14px;color:var(--lime)}
.q-frame-line{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:rgba(255,255,255,.85);box-shadow:0 0 18px rgba(var(--lime-rgb),.3);pointer-events:none}
.q-frame-line>i{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transform:translate(-50%,-50%);background:#f4f6ef;color:#182011;box-shadow:0 0 0 5px rgba(255,255,255,.14);transition:background .3s,scale .5s var(--spring)}
.q-frame-line svg{width:17px;height:17px}
.q-frame:hover .q-frame-line>i{background:var(--lime);scale:1.08}
.q-frame-split{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:2}
.q-frame:has(:focus-visible){outline:2px solid var(--lime);outline-offset:-2px}
.q-frame-caption{position:absolute;bottom:12px;left:50%;translate:-50% 0;font-size:10px;color:rgba(255,255,255,.85);padding:5px 10px;border-radius:999px;background:rgba(5,7,5,.65);width:max-content;max-width:calc(100% - 16px);text-align:center;overflow-wrap:anywhere;pointer-events:none}
.q-observation{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:18px;padding:18px 20px}
.q-input{position:relative;display:block;aspect-ratio:16/10;border-radius:9px;overflow:hidden;border:1px solid var(--line-2);background:#030403}
.q-input img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease)}
.q-input:hover img{transform:scale(1.07)}
.q-input>span{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 7px 4px;background:linear-gradient(transparent,rgba(0,0,0,.9));color:#fff;font-size:9px}
.q-input svg{width:10px;height:10px}
.q-observation strong{display:block;font-size:13px;font-weight:550}
.q-observation p{font-size:12px;color:var(--text-3);line-height:1.8;margin-top:6px}
.q-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.q-metric header{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-bottom:12px;font-size:11px}
.q-metric header strong{font-weight:500;color:var(--text-2)}
.q-metric header span{font-size:9px;color:var(--text-3);white-space:nowrap}
.q-metric-row{display:grid;grid-template-columns:52px minmax(0,1fr) 72px;gap:10px;align-items:center;margin-top:10px;font-size:11px;color:var(--text-3)}
.q-metric-row.ours{color:var(--lime)}
.q-metric-row>i{display:block;height:5px;background:var(--line);border-radius:10px;overflow:hidden}
.q-metric-row b{display:block;height:100%;width:var(--value);background:var(--c);border-radius:10px;transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease) .2s}
.qv-card.is-in .q-metric-row b{transform:none}
.q-metric-row em{text-align:right;font-size:10px;font-style:normal}
.q-sequence{padding:18px 20px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.012)}
.q-sequence-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:11px;color:var(--text-2)}
.q-sequence-head span,.q-sequence-head a{display:inline-flex;align-items:center;gap:6px}
.q-sequence-head a{color:var(--lime)}
.q-sequence-head svg{width:12px;height:12px}
.q-sequence-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.q-sequence-frames>a{min-width:0;overflow:hidden;border-radius:9px;border:1px solid var(--line-2);background:var(--bg);transition:border-color .4s,transform .6s var(--ease)}
.q-sequence-frames>a:hover{transform:translateY(-3px);border-color:var(--lime-line)}
.q-sequence-frames>a.active{border-color:var(--lime-line)}
.q-sequence-frames img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#030403}
.q-sequence-frames span{display:block;padding:8px;font-size:10px;color:var(--text-3);text-align:center}
.q-sequence-frames .active span{color:var(--lime)}
.q-sequence.is-in .q-sequence-frames>a{animation:rise .8s var(--ease) backwards;animation-delay:calc(var(--i)*110ms)}
.q-input.is-returning,.q-sequence-frames>a.is-returning{animation:labReturn 1.2s var(--ease)}

/* ---------- Narrow container: header, then the picture full width, then the card as one row ---------- */
@container (max-width:860px){
  .q-head{padding-bottom:26px;margin-bottom:24px}
  .q-body,.quality-section.alt .q-body{grid-template-columns:minmax(0,1fr);gap:16px}
  .quality-section.alt .quality-visual{order:0}
  .qv{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center;padding:24px 26px}
  .qv>:not(.qv-cta){grid-column:1}
  .qv-head{margin-top:8px}
  .qv-meta{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:16px;padding-top:14px}
  .qv-progress{width:140px}
  .qv-cta{grid-column:2;grid-row:1/span 4;margin:0}
}
@container (max-width:560px){
  .q-head{align-items:start}
  .q-title h2{font-size:clamp(24px,7cqi,32px);margin-top:16px}
  .q-num{font-size:72px}
  .qgb{flex-direction:column;gap:8px;margin-top:20px}
  .qgb li{font-size:13px}
  .qv{grid-template-columns:minmax(0,1fr);padding:22px 20px 20px}
  .qv-cta{grid-column:1;grid-row:auto;margin-top:20px}
  .qv-card{padding:18px 16px 16px;border-radius:20px}
  .qv-card-head{flex-direction:column;gap:4px;margin-bottom:14px}
  .qs-dot text{font-size:15px}
  .q-definition{font-size:12px;line-height:1.85}
  .q-evidence-head{min-height:50px;padding:10px 14px}
  .q-observation{grid-template-columns:82px minmax(0,1fr);gap:12px;padding:14px}
  .q-observation strong{font-size:12px}
  .q-observation p{font-size:11px;line-height:1.7}
  .q-frame-tag{top:9px;left:9px;font-size:10px;padding:4px 8px}
  .q-frame-tag.ours{right:9px}
  .q-frame-caption{font-size:9px;bottom:8px;padding:3px 7px}
  .q-frame-line>i{width:30px;height:30px}
  .q-metrics{grid-template-columns:minmax(0,1fr);gap:22px}
  .q-metric header{padding-bottom:2px}
  .q-sequence{padding:16px 14px}
  .q-sequence-head{flex-wrap:wrap;gap:6px}
  .q-sequence-frames span{font-size:8px;padding:6px 3px}

}

@media(max-width:1080px){.quality-anchor-inner{gap:20px}.quality-anchor-links>a{padding:8px 10px;font-size:12px}}
@media(max-width:860px){
  .quality-anchor-label{display:none}
  .quality-anchor-inner{min-height:0;padding:10px 16px}
  .quality-anchor-links{flex-wrap:wrap;gap:4px}
  .quality-anchor-links>a{flex:1 1 30%;justify-content:center;padding:8px 6px}
  .quality-section{scroll-margin-top:96px}
}
@media(max-width:560px){.quality-section-inner{padding:56px 16px}}
@media(prefers-reduced-motion:reduce){.qs-dot .halo,.q-sequence.is-in .q-sequence-frames>a{animation:none}.q-metric-row b{transition:none;transform:none}}

/* ---------- Inside the workspace shell ---------- */
.content:has(.quality-page){max-width:none;padding:0}
.shell .quality-page{min-height:0}
.quality-head{max-width:1320px;margin:0 auto;padding:44px 44px 30px}
.quality-head .page-head{margin-bottom:0}
.quality-head-side{display:flex;align-items:flex-end;gap:28px;flex-shrink:0}
.shell .quality-anchor{top:68px}
.shell .scroll-progress{top:68px;left:var(--side)}
.shell .quality-section{scroll-margin-top:134px}
.shell .quality-section-inner{padding-top:88px;padding-bottom:96px}
.quality-next{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1232px;margin:72px auto 0;padding:32px 36px;border-radius:24px;border:1px solid var(--line-2);background:radial-gradient(80% 140% at 100% 0%,rgba(var(--lime-rgb),.1),transparent 60%),var(--surface)}
.quality-next .kicker{color:var(--lime)}
.quality-next h2{font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.025em;margin:10px 0 6px}
.quality-next p{font-size:13px;color:var(--text-2)}
.quality-foot{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;max-width:1320px;margin:0 auto;padding:24px 44px 44px}
.quality-foot a{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);transition:color .3s}
.quality-foot a:hover{color:var(--lime)}
.quality-foot .icon svg{width:12px;height:12px}
@media(max-width:1180px){.quality-head{padding:36px 32px 26px}.quality-foot{padding:24px 32px 40px}.quality-next{margin-left:32px;margin-right:32px}}
@media(max-width:860px){.shell .quality-section{scroll-margin-top:162px}.quality-head-side .page-number{display:none}}
@media(max-width:720px){.quality-head{padding:26px 20px 22px}.quality-head .page-head{flex-direction:column;align-items:flex-start}.quality-foot{padding:20px 20px 34px}.quality-next{flex-direction:column;align-items:flex-start;margin:48px 20px 0;padding:24px}.shell .quality-section-inner{padding-top:56px;padding-bottom:64px}}
@media(max-width:560px){.shell .quality-anchor{top:60px}.shell .scroll-progress{top:60px}.shell .quality-section{scroll-margin-top:156px}}