:root{--paper:#f8f7f2;--ink:#242a22;--accent:#49643c;--split:100%}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;letter-spacing:-.045em}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.intro{max-width:1440px;margin:auto;padding:26px 32px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:25px;line-height:1.2;letter-spacing:-.07em;margin:0;font-weight:800}h1 span{color:var(--accent)}.intro-bottom p{font-size:13px;color:#697160;margin:0}.experience{max-width:1440px;margin:auto;padding:0 24px}.compare{width:100%;position:relative;overflow:hidden;aspect-ratio:1448/900;max-height:calc(100svh - 210px);min-height:320px;background:#5e3920;isolation:isolate}.scene{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none}.reveal{clip-path:inset(0 0 0 var(--split))}.photo-label{position:absolute;top:24px;color:white;font-size:24px;letter-spacing:-.06em;font-weight:800;pointer-events:none;text-shadow:0 2px 12px #24170f}.label-a{left:28px}.label-b{right:28px}.divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;transform:translateX(-50%);box-shadow:0 0 8px #0003;pointer-events:none}.handle{position:absolute;top:50%;left:clamp(64px,var(--split),calc(100% - 64px));transform:translate(-50%,-50%);display:flex;gap:10px;align-items:center;justify-content:center;width:128px;height:72px;border:1px solid #fff9;border-radius:4px;background:var(--paper);color:var(--ink);box-shadow:0 4px 25px #0003;pointer-events:none}.handle b{font-size:40px;line-height:1;font-weight:700;transition:color .15s,opacity .15s}.handle b:last-child{color:var(--accent)}.handle span{font-size:20px;color:#8a907f}.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}.compare:focus-within{outline:3px solid var(--accent);outline-offset:4px}.controls{display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border-bottom:1px solid #d5d7cd}.controls button{display:flex;gap:10px;align-items:center;border:0;background:none;font-size:15px;font-weight:700;padding:8px 0}.controls strong{font-size:24px;color:var(--accent)}.controls p{font-size:12px;color:#697160;margin:0}.story{max-width:1440px;margin:auto;padding:52px 24px 30px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}figure{margin:0}figure>img{display:block;width:100%;height:auto}figcaption{display:flex;gap:12px;align-items:center;padding:18px 0;border-bottom:1px solid #d5d7cd}.letter{font-size:28px;color:var(--accent);padding-right:12px;border-right:1px solid #d5d7cd}h3{font-size:20px;margin:0;letter-spacing:-.05em}.note{font-size:11px;color:#83897b;margin:18px 0 0;line-height:1.6}.ending{text-align:center;padding:55px 24px 62px}.ending p{font-size:28px;font-weight:700;line-height:1.5;letter-spacing:-.06em;margin:0 0 18px}.ending a{font-size:11px;color:#747b6b;border-bottom:1px solid #bfc5b5;padding-bottom:4px}footer{max-width:1392px;margin:auto;display:flex;justify-content:space-between;padding:22px 0;border-top:1px solid #d5d7cd;font-size:11px}footer span{font-size:10px;letter-spacing:.04em;color:#757c6c}@media(max-width:700px){.intro{padding:21px 20px 19px;display:block}h1{font-size:23px}.intro-bottom p{margin-top:8px;font-size:12px}.experience{padding:0}.compare{aspect-ratio:4/3;min-height:0;max-height:none}.photo-label{font-size:18px;top:18px}.label-a{left:20px}.label-b{right:20px}.handle{width:100px;height:62px;gap:6px;left:clamp(50px,var(--split),calc(100% - 50px))}.handle b{font-size:34px}.handle span{font-size:16px}.controls{padding:10px 20px;flex-wrap:wrap}.controls button{font-size:12px;gap:7px}.controls strong{font-size:23px}.controls p{order:3;text-align:center;flex-basis:100%;font-size:11px;margin:3px 0 7px}.story{padding:32px 20px 18px}.pair{grid-template-columns:1fr;gap:28px}figcaption{padding:13px 0}h3{font-size:19px}.letter{font-size:26px}.note{font-size:10px;margin-top:16px}.ending{padding:35px 20px 45px}.ending p{font-size:24px}footer{margin:0 20px;padding:18px 0}footer span{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.handle b{transition:none}}

footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}footer .byline{font-size:11px;letter-spacing:-.025em;color:var(--ink);text-align:center}footer .publisher{text-align:right}@media(max-width:700px){footer{gap:8px}footer .byline{font-size:10px}}