h1{font-size:clamp(2.6rem,7vw,4.6rem)}
.strip{display:grid;gap:16px}
.strip.two{grid-template-columns:1fr 1fr}
.shot{margin:0}
.shot svg{display:block;width:100%;height:auto;border-radius:3px;background:#8fd0f0}
.shot.ano svg{outline:3px solid var(--wax);outline-offset:3px;border-radius:14px 6px 12px 5px / 6px 12px 5px 14px}
.shot figcaption{font-size:.95rem;line-height:1.35;margin-top:10px}
.shot figcaption strong{display:block;font-family:var(--display);font-size:1.1rem}
.shot.ne figcaption strong{color:var(--no-film)}
.shot.ne figcaption strong::before{content:"✗ "}
.shot.ano figcaption strong{color:var(--wax)}
.shot.ano figcaption strong::before{content:"✓ "}
.grid line{stroke:#fff;stroke-width:1.2;stroke-dasharray:5 4;opacity:.9}
.grid{display:none}
body.show-grid .grid,.always-grid .grid{display:inline}

.demo label{display:block;font-family:var(--display);font-size:1.15rem;margin-top:14px}
.demo output{display:block;min-height:1.6em;font-weight:600}

.head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:end;justify-content:space-between}

.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:32px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.duo p{margin-top:10px}
.duo .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.duo output{display:block;font-weight:600;min-height:3.1em;margin-top:12px}

.labs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-bottom:32px}
.lab h3{margin-bottom:12px}
.lab label,.crop label{display:block;font-family:var(--display);font-size:1.1rem;margin-top:12px}
.lab output{display:block;min-height:3.1em;font-weight:600}

.crop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"scene intro" "scene prev" "scene result";grid-template-rows:auto auto 1fr;gap:16px 32px;align-items:start;padding:28px 0 40px;border-top:1px solid var(--line)}
.c-intro{grid-area:intro}.c-scene{grid-area:scene}.c-prev{grid-area:prev}.c-result{grid-area:result}
.c-intro p{margin:10px 0 0}
.wide{display:block;width:100%;height:auto;border-radius:3px}
#cropSvg{touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.c-scene .strip{touch-action:none}
#cropRect{cursor:grab}
#cropRect:focus-visible{outline:none;stroke:#fff}
.cgrid line{stroke:#fff;stroke-width:1.5;stroke-dasharray:6 5;opacity:.85;pointer-events:none}

.quiz{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px;align-items:center;padding-bottom:44px}
.qnum{color:var(--soft);font-weight:600}
.qopts{display:grid;gap:10px;margin:12px 0}
.qopts button{border-radius:12px;text-align:left;padding:12px 16px}
.qopts button:disabled{cursor:default;color:var(--ink);opacity:1}
.qopts button.right{background:var(--yes);color:var(--bg);border-color:var(--yes)}
.qopts button.wrong{background:var(--no);color:var(--bg);border-color:var(--no)}

@media (max-width:760px){
  .labs,.quiz,.duo{grid-template-columns:1fr}
  .duo{gap:16px}
  .crop{grid-template-columns:1fr;grid-template-areas:"intro" "scene" "result" "prev";grid-template-rows:auto;gap:10px;padding-top:20px}
  .c-prev{display:none}
  .c-result .checks{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:0;font-size:.95rem}
  .c-result .checks li{padding:2px 0}
  .c-result .win{min-height:1.5em;font-size:1.15rem;margin-top:2px}
}
@media (max-width:440px){.strip.two{grid-template-columns:1fr}}