:root{--paper:#f7f3e5;--ink:#073f2e;--green:#42743b;--wash:#e8ecd9;--line:#a8b89b;--muted:#45614b;--red:#9d3c26;--field:#fffdf5;color:var(--ink);background:var(--paper);font-family:Roboto,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible{outline:4px solid #ab4e1c;outline-offset:5px}button:disabled{cursor:default}::selection{background:#cadbb0;color:var(--ink)}header,footer{display:flex;justify-content:space-between;align-items:center;padding:20px 3.5vw;gap:18px}header{min-height:88px}.brand{display:flex;align-items:center;gap:12px;font-weight:700;line-height:1.15;font-size:18px}.tools{display:flex;gap:12px}.quiet{border:1px solid var(--line);background:transparent;border-radius:10px;min-height:44px;padding:10px 16px;font-size:15px}.quiet:hover{background:var(--wash)}footer{font-size:15px;color:var(--muted);margin-top:auto;padding-top:18px}main{width:min(1700px,93%);margin:auto;outline:none}.hero{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;padding:2vh 0}.hero h1{font-size:clamp(46px,5.4vw,88px);line-height:1.02;letter-spacing:-.03em;max-width:650px;margin:0 0 30px}.hero p{font-size:clamp(20px,1.8vw,28px);line-height:1.45;max-width:570px;margin:0 0 30px}.hero-art{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;transform:rotate(2deg)}.hero-art img{width:100%;border-radius:18px;display:block}.hero-art img:nth-child(2){transform:translateY(25px)}.hero-art img:nth-child(3){transform:translateY(-15px)}.primary{background:var(--ink);color:var(--field);border:0;border-radius:12px;min-height:62px;padding:16px 40px;font-weight:700;font-size:24px;box-shadow:0 7px 18px #073f2e17}.primary:hover{background:#1a583e}.primary:active{transform:translateY(2px)}.small-note{display:block;color:var(--muted);font-size:16px;margin-top:20px;line-height:1.5}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:8px 0 16px}.heading h1{font-size:clamp(30px,3.3vw,54px);letter-spacing:-.025em;line-height:1.07;margin:0 0 10px}.heading p{font-size:clamp(18px,1.6vw,24px);line-height:1.35;margin:0;max-width:1000px}.progress{display:flex;gap:8px;flex-shrink:0;align-self:flex-start;margin-top:10px}.step{width:42px;height:8px;border-radius:5px;background:#d9dfcc}.step.active{background:var(--green)}.scenes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:26px 0}.scene{padding:0;background:var(--field);border:3px solid transparent;border-radius:16px;overflow:hidden;position:relative;text-align:left;transition:transform .2s ease,border-color .2s,background .2s;box-shadow:0 6px 20px #073f2e0a}.scene:hover:not(:disabled){transform:translateY(-5px)}.scene img{width:100%;aspect-ratio:1.14;object-fit:cover;display:block;transition:filter .25s}.caption{display:flex;gap:10px;align-items:center;padding:18px 14px;min-height:100px;font-size:clamp(18px,1.55vw,25px);font-weight:700;line-height:1.2}.number{background:var(--wash);border-radius:50%;flex:0 0 36px;height:36px;display:grid;place-content:center;font-size:20px}.scene.excluded{border-color:var(--red);background:#f5e8dc}.scene.excluded img{filter:grayscale(.9) brightness(.75)}.mark{position:absolute;top:12px;right:12px;background:var(--red);color:white;padding:8px 12px;border-radius:8px;font-size:16px;font-weight:700}.scene.excluded .number{background:var(--red);color:white}.controls{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:18px}.instruction{font-size:clamp(18px,1.6vw,25px);max-width:1050px;line-height:1.45}.instruction strong{display:block;font-size:clamp(22px,1.9vw,30px);margin-bottom:6px}.feedback .scenes{grid-template-columns:repeat(2,minmax(0,390px));justify-content:center}.feedback .scene{border-color:var(--green)}.feedback .scene img{aspect-ratio:1.55}.feedback .caption{min-height:75px}.feedback .mark{background:var(--green)}.feedback .number{display:none}.result{padding:2vh 0}.result .hero-art{transform:none}.result .hero-art img{transform:none}.score{display:block;font-size:clamp(28px,3vw,44px);font-weight:700;margin-bottom:22px}.mirror .tools,.mirror footer{visibility:hidden}.mirror button{pointer-events:none}.mirror .scene{cursor:default}.mirror #hint{display:none}@media(min-width:1400px){.scene img{aspect-ratio:1.2}.scenes{gap:28px}.caption{min-height:110px}.controls{margin-top:28px}}@media(max-width:850px){header{padding:18px 4vw}.brand{font-size:15px}.tools{gap:6px}.quiet{font-size:12px;padding:7px 10px}.hero{grid-template-columns:1fr;padding:30px 0;gap:35px}.hero-art{max-width:550px}.hero h1{max-width:600px}.hero p{max-width:650px}.scenes{grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}.scene img{aspect-ratio:1.35}.caption{font-size:18px;min-height:85px;padding:12px 10px;gap:8px}.number{flex-basis:28px;height:28px;font-size:16px}.heading{align-items:flex-start}.heading h1{font-size:34px}.progress{gap:4px}.step{width:20px}.controls{align-items:stretch;flex-direction:column;gap:15px}.primary{font-size:22px;min-height:60px}.hero .primary{width:100%}.mark{font-size:13px;right:7px;top:7px;padding:6px 8px}.feedback .scenes{grid-template-columns:1fr 1fr}.feedback .scene img{aspect-ratio:1}.feedback .caption{min-height:90px}.instruction{font-size:18px}footer{font-size:12px;padding:24px 4vw;gap:12px}footer span:last-child{text-align:right}.hero-art img{border-radius:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.clear-choice{background:var(--wash);display:flex;flex-direction:column;justify-content:space-between}.clear-symbol{flex:1;display:grid;place-content:center;min-height:180px}.clear-choice .caption{background:#dce4cd}.round-count{font-size:24px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}.single-answer .scenes{grid-template-columns:minmax(0,440px)}.single-answer .scene img{aspect-ratio:1.65}.single-answer .caption{min-height:80px}@media(max-width:850px){.clear-symbol{min-height:130px}.round-count{font-size:19px}.single-answer .scenes{grid-template-columns:minmax(0,390px)}.single-answer .scene img{aspect-ratio:1.45}}