*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#17110c;color:#e9e1d3;font-family:Arial,sans-serif}#viewer{position:relative;width:100%;height:100%;min-height:320px;isolation:isolate;background:radial-gradient(ellipse at 50% 70%,#352316 0%,#17110c 68%)}#poster{position:absolute;width:100%;height:100%;object-fit:contain;transition:opacity .4s;z-index:1;pointer-events:none}#canvas,#canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#canvas canvas{touch-action:pan-y;outline:none}#status{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:12px 18px;background:#17110cdc;border:1px solid #c6a87c42;border-radius:30px;font-size:12px;white-space:nowrap}.toolbar,.caption{position:absolute;z-index:2;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}.toolbar{top:20px}.toolbar>span{font-size:9px;letter-spacing:2px;color:#c6a87c}.toolbar>div{display:flex;gap:7px;pointer-events:auto}button{appearance:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid #c6a87c50;background:#241a12c9;color:#e5cfac;font-size:23px;cursor:pointer}button:hover{background:#263143}button:focus-visible{outline:2px solid #edac56;outline-offset:3px}.caption{bottom:20px;font-size:10px;color:#a8aaa9}.hint{color:#d9b988}.ready #poster{opacity:0}.ready #status{display:none}#viewer:fullscreen{height:100dvh}.error #status{top:auto;bottom:55px;transform:translateX(-50%);font-size:11px;white-space:normal;text-align:center;max-width:85%;width:300px}@media(max-width:480px){.toolbar,.caption{left:17px;right:17px}.toolbar{top:14px}.caption{bottom:16px}button{width:34px;height:34px}}@media(prefers-reduced-motion:reduce){#poster{transition:none}}
@font-face{font-family:Josefin;src:url(fonts/josefin.ttf);font-display:swap}@font-face{font-family:Poppins;src:url(fonts/poppins.ttf);font-display:swap}
body[data-layout="wide"]{font-family:Poppins,Arial,sans-serif}body[data-layout="wide"] #viewer{min-height:0}body[data-layout="wide"] #viewer:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#17110ce8,transparent 40%,transparent 60%,#17110ce8)}.scene-copy{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:27%;max-width:365px;pointer-events:auto}.scene-left{left:max(40px,calc((100% - 1360px)/2))}.scene-right{right:max(40px,calc((100% - 1360px)/2));max-width:330px}.scene-copy .eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:2.4px;color:#c6a87c;margin-bottom:24px}.scene-copy h2{font:400 clamp(32px,3.2vw,50px)/1.13 Josefin,Arial,sans-serif;letter-spacing:-1.1px;margin:0 0 25px;color:#f5eee4}.scene-copy h2 em{font-style:normal;display:block;color:#d5ab79}.scene-copy p{font-size:13px;line-height:1.9;color:#c8bcb0;margin:0 0 18px}.scene-link{display:inline-flex;gap:20px;color:#e0b986;text-decoration:none;font-size:11px;border-bottom:1px solid #c6a87c50;padding:6px 0;margin-top:10px}.scene-link:hover{color:white}.scene-link:focus-visible{outline:2px solid #e0b986;outline-offset:5px}body[data-layout="wide"] .toolbar{left:38%;right:38%;top:22px;z-index:5}body[data-layout="wide"] .toolbar>span{font-size:8px}body[data-layout="wide"] .caption{left:39%;right:39%;bottom:16px;z-index:5;font-size:8px}body[data-layout="wide"] #poster{left:32%;width:36%;object-fit:contain}.correction-controls{display:flex;align-items:flex-start;gap:15px;flex-direction:column;margin-top:40px;width:100%}.desktop-transform{width:100%}.desktop-transform label{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#ead8c2;margin-bottom:20px}.desktop-transform output{color:#e4aa65;font-variant-numeric:tabular-nums}.desktop-transform input{width:100%;height:28px;cursor:ew-resize;margin:0;accent-color:#e29c4f;touch-action:pan-y}.desktop-transform input:focus-visible{outline:2px solid #e4aa65;outline-offset:5px}.range-labels{display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#a9957f;margin-top:9px}.correction-controls>span{color:#ab9680;font:400 9px Poppins,Arial,sans-serif;line-height:1.5}.correction-button{width:auto;height:auto;min-height:44px;padding:11px 22px;border-radius:24px;border:1px solid #d5a36d;background:#d89950;color:#21160c;font:500 12px Poppins,Arial,sans-serif;white-space:nowrap}.correction-button:hover{background:#efb76f}.correction-button[aria-pressed="true"]{background:transparent;color:#edbb80}.correction-button:disabled{cursor:wait;opacity:.65}body[data-layout="wide"] .correction-button{display:none}body:not([data-layout="wide"]) .correction-controls{position:absolute;left:24px;bottom:65px;z-index:5}
@media(max-width:1024px) and (min-width:761px){.scene-left{left:25px}.scene-right{right:25px}.scene-copy{width:28%}.scene-copy h2{font-size:34px}.scene-copy p{font-size:11px;line-height:1.8}.scene-copy .eyebrow{font-size:8px}.correction-controls{margin-top:25px}.desktop-transform label{font-size:11px}.range-labels{font-size:8px}}
@media(max-width:760px){body[data-layout="wide"] #viewer:after{background:none}.scene-left{left:22px;right:22px;top:21px;transform:none;width:auto;max-width:none}.scene-left .eyebrow{font-size:8px;margin-bottom:13px}.scene-left h2{font-size:clamp(25px,6.8vw,32px);max-width:440px;margin-bottom:12px;letter-spacing:-.7px}.scene-left h2 em{display:inline}.scene-left p{font-size:10px;line-height:1.7;max-width:460px;margin:0}.scene-right{left:0;right:0;top:auto;bottom:22px;transform:none;width:100%;max-width:none;text-align:center}.right-copy,.desktop-transform{display:none}.correction-controls{margin:0;align-items:center;gap:8px}body[data-layout="wide"] .correction-button{display:flex;align-items:center;justify-content:center;min-height:40px;padding:10px 24px;font-size:11px}.correction-controls>span{font-size:8px}body[data-layout="wide"] #canvas{top:190px;bottom:93px;height:auto}body[data-layout="wide"] #poster{top:190px;left:0;width:100%;height:calc(100% - 283px)}body[data-layout="wide"] .toolbar{top:200px;left:20px;right:20px}body[data-layout="wide"] .toolbar>span{font-size:7px}body[data-layout="wide"] .toolbar button{width:29px;height:29px;font-size:18px}body[data-layout="wide"] .caption{left:20px;right:20px;bottom:95px;font-size:7px}.hint{display:none}}
@media(max-width:760px) and (max-height:700px){.scene-left{top:15px}.scene-left .eyebrow{margin-bottom:8px}.scene-left h2{font-size:25px;margin-bottom:8px}.scene-left p{font-size:9px}body[data-layout="wide"] #canvas{top:165px;bottom:82px}body[data-layout="wide"] .toolbar{top:175px}body[data-layout="wide"] .caption{bottom:85px}.scene-right{bottom:16px}}