:root{font-family:system-ui,sans-serif;color:#243b36;background:#f5f6f0;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{max-width:1320px;margin:auto;padding:28px 28px 50px}.back{color:#35674f;text-decoration:none;font-weight:600}header{margin:32px 0 24px}.eyebrow{font-size:12px;letter-spacing:.12em;color:#64756b}h1{font-family:Georgia,serif;font-size:clamp(28px,4vw,46px);margin:10px 0}header p{margin:0;color:#59685e}.viewer{position:relative;overflow:hidden;border-radius:20px;background:#1b2824;height:min(68vh,680px);min-height:340px;box-shadow:0 14px 40px #14362820}canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}canvas:active{cursor:grabbing}canvas:focus-visible{outline:4px solid #e8b55c;outline-offset:-4px}#status{position:absolute;top:65px;left:20px;right:20px;text-align:center;background:#203a32e8;color:white;padding:15px;border-radius:10px;pointer-events:none}#status:empty{display:none}.caption{position:absolute;top:20px;left:20px;padding:10px 16px;color:white;background:#18362dd9;border-radius:10px;pointer-events:none}.caption span{font-size:11px;margin-left:12px;color:#f6d294}.controls{position:absolute;bottom:20px;left:16px;right:16px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}button{font:inherit;font-weight:600;border:1px solid #d0dad2;background:#fff;color:#234c3a;min-height:44px;padding:10px 16px;border-radius:10px;cursor:pointer}button:hover{background:#eff4e9}button:focus-visible,a:focus-visible{outline:3px solid #ca8e25;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}.controls button{box-shadow:0 3px 12px #0002}.controls button[data-action="left"],.controls button[data-action="right"],.controls button[data-action="in"],.controls button[data-action="out"]{font-size:20px;min-width:44px;padding:7px 12px}#instructions{font-size:14px;color:#66746d;line-height:1.6}.comparison{display:flex;gap:24px;justify-content:space-between;align-items:center;padding:22px;background:white;border:1px solid #dfe6dc;border-radius:16px;margin-top:25px}.comparison h2{font-size:18px;margin:0 0 8px}.comparison p{font-size:14px;line-height:1.6;margin:0;max-width:750px}.versions{display:flex;gap:8px}.versions button[aria-pressed="true"]{background:#2e5b46;color:white;border-color:#2e5b46}.note{font-size:13px;color:#6b756f;line-height:1.7}.viewer:fullscreen{width:100vw;height:100dvh;max-height:none;border-radius:0}@media(max-width:600px){main{padding:20px 14px}header{margin:25px 0 20px}.viewer{height:60vh;min-height:380px;border-radius:12px}.comparison{align-items:stretch;flex-direction:column;gap:14px;padding:18px}.versions button{flex:1}.controls{gap:5px;bottom:14px}.controls button{font-size:12px;padding:8px 10px}}

body.embedded{background:#1b2824;overflow:hidden}body.embedded main{max-width:none;padding:0}body.embedded .back,body.embedded header,body.embedded #instructions,body.embedded .comparison,body.embedded .note{display:none}body.embedded .viewer{height:100dvh;min-height:0;border-radius:14px;box-shadow:none}body.embedded .caption{top:12px;left:12px;font-size:13px}body.embedded .controls{bottom:12px;left:10px;right:10px;gap:6px}body.embedded .controls button{font-size:12px;padding:8px 10px}body.embedded .controls button[data-action="left"],body.embedded .controls button[data-action="right"],body.embedded .controls button[data-action="in"],body.embedded .controls button[data-action="out"]{font-size:18px}body.embedded .viewer:fullscreen{border-radius:0}

.viewer:not(:fullscreen){max-width:820px;height:320px;min-height:0;margin-inline:auto}body.embedded .viewer:not(:fullscreen){max-width:none;height:100dvh}
.controls button,body.embedded .controls button{min-height:32px;padding:4px 9px;font-size:12px;line-height:1.4}
.controls button[data-action="left"],.controls button[data-action="right"],.controls button[data-action="in"],.controls button[data-action="out"],body.embedded .controls button[data-action="left"],body.embedded .controls button[data-action="right"],body.embedded .controls button[data-action="in"],body.embedded .controls button[data-action="out"]{min-width:34px;font-size:16px;padding:3px 9px;line-height:1.4}