.visual{grid-template-rows:48px minmax(0,1fr)}
.viewport{display:flex;flex-direction:column;place-items:stretch}
.image-frame{position:relative;flex:1 1 auto;min-height:420px;overflow:hidden}
.image-frame>img,.before-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.before-clip{position:absolute;inset:0;width:auto;overflow:visible;z-index:3;clip-path:inset(0 50% 0 0)}
.image-frame>input{position:absolute;z-index:10;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.image-frame .divider{top:0;bottom:0}
.show-objects .objects,.show-material .material-lenses,.show-gaze .gaze,.show-composition .composition{display:block}
.channel-canvas{position:absolute;z-index:5;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}
.show-depth .channel-canvas{opacity:.92}
.material-lenses{z-index:12;pointer-events:auto;padding:12px}
.material-lenses>button{position:relative;z-index:13;border:1px solid rgba(255,255,255,.5);background:#111;color:white;padding:7px 9px;font-size:8px;margin-right:5px;cursor:pointer}
.lens{position:absolute;width:220px;height:220px;border-radius:50%;overflow:hidden;border:2px solid white;box-shadow:0 12px 35px rgba(0,0,0,.55);transform:translate(-50%,-50%) scale(.85);opacity:0;pointer-events:none;background:#222;transition:opacity .18s,transform .18s}
.lens.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.lens canvas{width:100%;height:100%}.lens span{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:8px;background:#111;color:white;padding:5px 7px}
.gaze{display:none;overflow:hidden}.gaze-blur{position:absolute;inset:-10%;backdrop-filter:blur(13px);background:rgba(8,8,8,.12);mask-image:radial-gradient(circle 30px at var(--gx,50%) var(--gy,50%),transparent 0 65%,black 100%)}
.gaze svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.58);stroke-width:.18;stroke-dasharray:1 1}.gaze circle{fill:white;stroke:none;filter:drop-shadow(0 0 5px white);animation:blink .8s ease-in-out infinite alternate}.gaze.run .gaze-blur{animation:gazeExpand 6s cubic-bezier(.2,.7,.2,1) forwards}.gaze.run svg{animation:gazeReveal 6s linear forwards}
.composition svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--acid);stroke-width:.18}.composition>span{position:absolute;right:14px;bottom:14px;background:var(--acid);color:#111;padding:5px 7px;font-size:8px}.third{position:absolute;background:rgba(255,255,255,.48)}.third.v1,.third.v2{top:0;bottom:0;width:1px}.third.v1{left:33.333%}.third.v2{left:66.666%}.third.h1,.third.h2{left:0;right:0;height:1px}.third.h1{top:33.333%}.third.h2{top:66.666%}
.channel-readout{height:116px;background:#ece9e3;color:#111;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:10px 13px;border-top:1px solid #bbb}.channel-readout>div>span{font-size:8px;letter-spacing:.1em}.channel-readout canvas{width:100%;height:82px;display:block}.channel-readout p{font-size:10px;line-height:1.5;margin:18px 0 0;padding-left:14px;border-left:1px solid #aaa}
.story{border-top:1px solid #cdc9c1;padding:12px 5px}.story>span{font-size:8px;font-weight:700;letter-spacing:.08em}.story p{font-family:Georgia,"Songti SC",serif;font-size:13px;line-height:1.45;margin:8px 0}.story small{font-size:8px;line-height:1.45;color:#777}
@keyframes gazeExpand{0%{clip-path:circle(4% at var(--gx) var(--gy));opacity:1}65%{clip-path:circle(24% at var(--gx) var(--gy));opacity:.9}100%{clip-path:circle(95% at 50% 50%);opacity:0}}
@keyframes gazeReveal{0%{opacity:0}16%{opacity:1}85%{opacity:1}100%{opacity:.15}}
@keyframes blink{to{opacity:.25}}
@media(max-width:560px){.channel-readout{height:auto;grid-template-columns:1fr}.channel-readout p{margin:0;border-left:0;border-top:1px solid #aaa;padding:10px 0}.lens{width:150px;height:150px}}

/* Romanjo analysis v3: deterministic saliency playback and professional overlays. */
.gaze-side{position:absolute;inset:0;overflow:hidden}.gaze-side.before{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0)}.gaze-side.after{clip-path:inset(0 0 0 var(--split,50%))}.gaze-blur-canvas{position:absolute;inset:0;width:100%;height:100%}.gaze-side svg{z-index:2}.gaze .gaze-path{stroke:rgba(255,255,255,.76);stroke-width:.24;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--path-progress,0));pathLength:1}.gaze .gaze-points circle{fill:white;stroke:none;opacity:.14;filter:drop-shadow(0 0 8px #fff);transition:opacity .25s}.gaze .gaze-points circle.seen{opacity:.96;animation:blink 1.2s ease-in-out infinite alternate}.gaze-side-label{position:absolute;z-index:3;top:14px;font-size:8px;letter-spacing:.1em;background:rgba(12,12,12,.75);padding:5px 7px}.gaze-side.before .gaze-side-label{left:14px}.gaze-side.after .gaze-side-label{right:14px}
.composition .golden-grid{stroke:rgba(215,255,63,.55);stroke-width:.18}.composition .golden-spiral{stroke:var(--acid);stroke-width:.45}.composition .third{display:none!important}.phi-labels b{position:absolute;color:var(--acid);font-size:7px;font-weight:500;background:#111;padding:3px 4px}.phi-labels b:first-child{left:38.2%;top:8px}.phi-labels b:last-child{left:61.8%;bottom:8px}
.gaze-player{position:absolute;z-index:16;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:auto 38px minmax(90px,1fr) 38px;gap:8px;align-items:center;padding:9px 10px 18px;background:rgba(10,10,10,.82);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.26);color:#fff;opacity:0;pointer-events:none;transition:opacity .2s}.show-gaze .gaze-player{opacity:1;pointer-events:auto}.gaze-play{border:1px solid rgba(255,255,255,.4);background:#fff;color:#111;font-size:8px;padding:6px 10px;min-width:54px;cursor:pointer}.gaze-time,.gaze-duration{font-size:8px;font-variant-numeric:tabular-nums;color:#bbb}.gaze-scrub{width:100%;accent-color:var(--acid);cursor:ew-resize}.gaze-stages{position:absolute;left:110px;right:52px;bottom:5px;display:flex;justify-content:space-between;font-size:6px;color:#999;letter-spacing:.08em}.gaze-stages i{font-style:normal}
.channel-readout p{line-height:1.72;letter-spacing:.012em}.story p{line-height:1.62}.story small{line-height:1.65}.analysis-panel{line-height:1.35}.model-note{line-height:1.62}.channel-canvas{image-rendering:auto;filter:contrast(1.14)}
.image-frame>img,.before-clip img{object-fit:fill}.before-clip{inset:0;clip-path:inset(0 50% 0 0)}
.objects{overflow:visible}.detected-region{position:absolute;border:1px solid var(--acid);color:var(--acid);font-style:normal;font-size:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}.detected-region b{position:absolute;left:-1px;top:-14px;background:#111;padding:3px 5px;font-size:7px;white-space:nowrap}.detected-region small{position:absolute;right:2px;bottom:2px;background:#111;padding:2px 3px}.detected-region.rhythm{border-style:dashed;border-color:#fff;color:#fff}.detected-region.face{border-color:#ff8d75;color:#ff8d75}
.lens canvas{display:block;width:100%;height:100%}.lens .lens-source{position:absolute;top:12px;right:12px;background:rgba(17,17,17,.78);color:#fff;padding:4px 6px;font-size:7px}.composition-anchor{position:absolute;width:14px;height:14px;border:1px solid var(--acid);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(215,255,63,.16)}.composition-anchor:after{content:"";position:absolute;inset:5px;background:var(--acid);border-radius:50%}
#verdict{transition:filter .12s,opacity .12s;filter:blur(calc((1 - var(--dissolve,1))*1.5px));opacity:calc(.72 + var(--dissolve,1)*.28)}
.grade{height:250px;flex:0 0 250px;align-content:start;overflow:hidden}
@media(min-width:901px){.workbench{min-height:790px}}
@media(max-width:560px){.gaze-player{left:7px;right:7px;bottom:7px;grid-template-columns:auto 32px 1fr 32px}.gaze-stages{left:98px}.gaze-play{min-width:46px;padding-inline:6px}}
@media(max-width:900px){.image-frame{min-height:500px}}
@media(max-width:560px){.image-frame{min-height:300px}}

/* Chinese workbench type and high-density chart controls. */
html[data-locale="zh"] body,
html[data-locale="zh"] button,
html[data-locale="zh"] input {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
    "Noto Sans CJK SC", sans-serif;
}

html[data-locale="zh"] .visual-tools {
  font-size: 20px;
  letter-spacing: 0.03em;
}

html[data-locale="zh"] .visual-tools button,
html[data-locale="zh"] .tag,
html[data-locale="zh"] .material-lenses > button {
  font-size: 19px;
  line-height: 1.75;
}

html[data-locale="zh"] .grade p,
html[data-locale="zh"] .story p {
  font-family: inherit;
  font-size: 19px;
  line-height: 2.1;
}

html[data-locale="zh"] .analysis-row span,
html[data-locale="zh"] .story > span,
html[data-locale="zh"] .grade small,
html[data-locale="zh"] .channel-readout > div > span {
  font-size: 19px;
  line-height: 1.9;
}

html[data-locale="zh"] .analysis-row small,
html[data-locale="zh"] .model-note {
  font-size: 19px;
  line-height: 2.05;
}

html[data-locale="zh"] .metrics span,
html[data-locale="zh"] .metrics b {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

html[data-locale="zh"] .channel-readout p {
  font-size: 20px;
  line-height: 2.1;
}

html[data-locale="zh"] .gaze-play,
html[data-locale="zh"] .gaze-time,
html[data-locale="zh"] .gaze-duration,
html[data-locale="zh"] .gaze-stages,
html[data-locale="zh"] .lens span,
html[data-locale="zh"] .lens-source,
html[data-locale="zh"] .composition > span,
html[data-locale="zh"] .phi-labels b {
  font-size: 16px;
}

html[data-locale="zh"] .visual-tools {
  min-height: 58px;
}

html[data-locale="zh"] .visual {
  grid-template-rows: 64px minmax(0, 1fr);
}

@media(min-width: 901px) {
  html[data-locale="zh"] .workbench {
    height: auto;
    min-height: 840px;
  }
}

html[data-locale="zh"] .analysis-row {
  padding-block: 15px;
}

.channel-readout {
  height: 170px;
}

.channel-readout canvas {
  height: 108px;
}

.divider span {
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
}

.divider svg {
  display: block;
  fill: none;
  height: 22px;
  stroke: #111;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 22px;
}

@media(max-width: 560px) {
  .channel-readout {
    height: auto;
  }
}