*{box-sizing:border-box}html{background:#111612;color:#f2f1e9;font-family:Arial,sans-serif;scroll-behavior:auto}body{margin:0;height:41000px}a{color:inherit}button,input,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #dfc69e;outline-offset:5px}[hidden]{display:none!important}
.stage{position:fixed;inset:0;background:#111612;overflow:hidden}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#080e0b88,transparent 25%,transparent 58%,#080e0bbb)}canvas{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body.detail .stage:after{background:linear-gradient(#080e0b66,transparent 20%,transparent 70%,#080e0b88)}body.detail canvas{cursor:crosshair}
header{position:fixed;z-index:3;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 38px}.brand{text-decoration:none;font:29px Georgia,serif;letter-spacing:-1.2px;text-shadow:0 1px 20px #0009}.brand span{display:block;font:10px Arial,sans-serif;letter-spacing:2.7px;text-transform:uppercase;margin-top:10px;color:#cbd3c8}nav{display:flex;gap:6px;padding:5px;border:1px solid #ffffff26;background:#131b16b8;backdrop-filter:blur(12px);border-radius:30px}nav button{background:none;border:0;border-radius:23px;padding:12px 19px;font-size:12px;white-space:nowrap}nav button[aria-current=true]{background:#edeee4;color:#172016}nav button:hover{background:#ffffff1c}nav button[aria-current=true]:hover{background:#edeee4}
.intro{position:fixed;z-index:1;left:40px;bottom:225px;pointer-events:none;text-shadow:0 2px 35px #000b}.intro>p:first-child{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#e0d3bd}.intro h1{font:clamp(48px,6vw,94px)/1.02 Georgia,serif;letter-spacing:-3px;margin:20px 0}.invitation{font-size:14px;line-height:1.8;color:#e5e8df}.scrollmark{display:inline-block;font-size:25px;margin-top:10px}body.detail .intro{display:none}
footer{position:fixed;z-index:3;bottom:0;left:0;right:0;padding:25px 38px 20px}.footer-top{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px}.chapter-copy>span{font-size:10px;letter-spacing:2px;color:#d7b98f}.chapter-copy h2{font:27px Georgia,serif;margin:8px 0}.chapter-copy p{font-size:12px;color:#d0d7cb;margin:0;line-height:1.4}.tools{display:flex;align-items:center;gap:9px}.tools>button,summary{font:12px Arial,sans-serif;color:#e0e7da;border:1px solid #ffffff38;border-radius:25px;background:#18221cbe;padding:12px 17px;cursor:pointer;white-space:nowrap}.tools>button[aria-pressed=true]{background:#ecede2;color:#1c241c}summary{list-style:none}summary::-webkit-details-marker{display:none}summary span{padding-left:12px;color:#d7b98f}details{position:relative}.menu{position:absolute;right:0;bottom:55px;width:260px;padding:21px;border:1px solid #ffffff30;background:#18201bef;backdrop-filter:blur(15px);border-radius:15px;box-shadow:0 15px 55px #0007}.menu p{margin:0 0 15px;font-size:11px;color:#b8c4b5}.menu a,.menu>button{display:block;font:12px Arial,sans-serif;text-decoration:none;line-height:1.5;padding:14px 0;border:0;border-top:1px solid #ffffff20;background:none;width:100%;text-align:left;color:#e0e7da}.menu .steps{display:flex;gap:8px;margin-bottom:14px}.steps button{background:none;border:1px solid #ffffff3a;border-radius:20px;padding:9px 12px;font-size:11px;flex:1}.steps button:disabled{opacity:.35;cursor:default}
.progress{display:flex;align-items:center;gap:20px}#position{width:100%;accent-color:#d8bd94;cursor:pointer;height:14px;margin:0}#position:disabled{cursor:wait;opacity:.5}#percent{min-width:40px;text-align:right;font:11px Arial,sans-serif;font-variant-numeric:tabular-nums;color:#d4dacd}.footer-note{display:flex;justify-content:space-between;margin-top:15px;font-size:10px;letter-spacing:.4px;color:#bcc7b7}#status{position:fixed;z-index:5;top:112px;left:50%;transform:translateX(-50%);max-width:90vw;border:1px solid #ffffff33;border-radius:30px;padding:12px 19px;background:#142019eb;text-align:center;font-size:12px}#status button{border:0;background:none;text-decoration:underline;color:#dfc69e;font-size:12px}
@media(max-width:800px){header{padding:23px;align-items:flex-start}.brand{font-size:25px}nav{gap:0}nav button{font-size:11px;padding:11px 12px}.intro{left:25px;bottom:245px}.intro h1{letter-spacing:-2px}footer{padding:23px}.tools{gap:6px}.tools>button,summary{padding:11px 12px}.chapter-copy h2{font-size:23px}.chapter-copy p{max-width:220px}}
@media(max-width:590px){header{padding:20px;flex-direction:column;gap:20px}.brand{font-size:25px}.brand span{font-size:9px}nav{width:100%;justify-content:space-between}nav button{padding:10px 12px;flex:1;font-size:11px}.intro{left:22px;bottom:240px}.intro h1{font-size:48px}.invitation{font-size:12px}.footer-top{align-items:flex-start;gap:15px;flex-direction:column}.chapter-copy h2{font-size:25px}.chapter-copy p{max-width:none}.tools{width:100%;justify-content:flex-end}.tools>button,summary{font-size:11px}.footer-note span:last-child{display:none}footer{padding:20px}#status{top:169px}.menu{width:254px}}

@media(max-width:1100px){header{flex-wrap:wrap}nav{max-width:100%;overflow-x:auto}nav button{padding:10px 13px;flex:none}}
@font-face{font-family:Oswald;src:url('/oswald.woff2')}@font-face{font-family:Jost;src:url('/jost.woff2')}
:root{--header-height:90px}html{background:#fff;color:#191919;font-family:Jost,Arial,sans-serif}.stage{top:var(--header-height);background:#151515}.stage:after{background:linear-gradient(transparent 65%,#0007)}body.detail .stage:after{background:none}#transition{opacity:0;pointer-events:none;z-index:1}
header{background:#fff;color:#191919;padding:23px 4vw;gap:24px;flex-wrap:nowrap;border-bottom:1px solid #eee}.brand{font:25px Oswald,sans-serif;letter-spacing:0;text-shadow:none;white-space:nowrap}.brand span{display:none}nav{background:none;border:0;border-radius:0;backdrop-filter:none;padding:0;gap:24px;overflow-x:auto}nav button{font:15px Oswald,sans-serif;letter-spacing:1px;text-transform:uppercase;border-radius:0;padding:8px 0;border-bottom:1px solid transparent}nav button[aria-current=true],nav button:hover,nav button[aria-current=true]:hover{background:none;color:#111;border-bottom-color:#111}
.intro{left:4vw;bottom:160px;color:white}.intro h1{font:400 clamp(40px,5vw,76px)/1.12 Oswald,sans-serif;letter-spacing:0;margin:12px 0}.intro>p:first-child{font:12px Jost,sans-serif;color:#fff;letter-spacing:2px}.invitation,.scrollmark{display:none}
footer{color:#fff;padding:18px 4vw}.footer-top{margin-bottom:10px;align-items:flex-end;flex-direction:row}.chapter-copy>span{color:white}.chapter-copy h2{font:24px Oswald,sans-serif;margin:4px 0}.chapter-copy p,.footer-note{display:none}.tools{gap:18px;width:auto}.tools>button,summary{background:none;border:0;border-bottom:1px solid #ffffff70;border-radius:0;font:12px Jost,sans-serif;color:white;padding:8px 0}.tools>button[aria-pressed=true]{background:none;color:white;border-bottom-color:white}#zoom{display:none}.menu{background:#fff;color:#222;backdrop-filter:none;border-radius:0;border:1px solid #ddd;box-shadow:none}.menu p,.menu a,.menu>button{color:#222}.steps button{color:#222;border-color:#ccc;border-radius:0}.progress{gap:15px}#position{accent-color:white;height:5px}#percent{color:white}.tools summary span{color:white}#status{top:calc(var(--header-height) + 20px);background:#fff;color:#222;border:1px solid #ddd;border-radius:0}
@media(max-width:900px){header{flex-wrap:wrap;padding:15px 4vw;gap:10px}nav{gap:20px}nav button{font-size:13px}footer{padding:16px 4vw}.tools{gap:12px}.intro{bottom:140px}}
@media(max-width:590px){header{gap:8px}nav{width:100%;justify-content:flex-start}nav button{flex:none;font-size:12px}.brand{font-size:23px}.footer-top{flex-direction:row}.chapter-copy h2{font-size:20px}.tools{gap:9px}.tools>button,summary{font-size:11px}.intro h1{font-size:42px}.menu{width:250px}}
@media(prefers-reduced-motion:reduce){#transition{display:none}}
/* Responsive touch layout */
html{overflow-x:hidden}body{overflow-x:clip}.stage{bottom:auto;height:calc(100dvh - var(--header-height));touch-action:pan-y}header{padding-top:max(15px,env(safe-area-inset-top));padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}footer{padding-bottom:max(12px,env(safe-area-inset-bottom));pointer-events:none}footer .tools,footer .progress{pointer-events:auto}.tools>button,summary,.steps button{min-height:44px}#position{height:30px;min-width:0;touch-action:pan-x}.mobile-chapter{display:none}nav button{min-height:44px}.menu{max-height:60dvh;overflow:auto;max-width:calc(100vw - 32px)}button,summary,select{touch-action:manipulation}
@media(max-width:700px){header{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:12px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}.brand{font-size:21px}#chapters{display:none}.mobile-chapter{display:flex;flex-direction:column;gap:3px;font-size:9px;text-transform:uppercase;letter-spacing:1px;min-width:0}.mobile-chapter select{font:14px Oswald,sans-serif;background:#fff;color:#222;border:0;border-bottom:1px solid #bbb;border-radius:0;min-height:44px;max-width:160px;width:100%}.footer-top{gap:6px;flex-wrap:wrap}.tools{gap:14px}.tools>button,summary{font-size:13px}.chapter-copy h2{font-size:22px}footer{padding:8px 16px max(8px,env(safe-area-inset-bottom))}.progress{gap:12px}.intro{left:20px;bottom:170px}.intro h1{font-size:38px}#status{font-size:12px;max-width:calc(100vw - 32px)}}
@media(max-width:1100px) and (orientation:portrait){.stage{background:#f4f3ef}.stage:after{display:none}footer{background:#fff;color:#222}.tools>button,summary,.tools>button[aria-pressed=true],#percent{color:#222;border-color:#aaa}.tools summary span{color:#222}.chapter-copy>span{color:#555}#position{accent-color:#333}.intro{top:calc(var(--header-height) + 24px);bottom:auto;color:#222;text-shadow:none}.intro>p:first-child{color:#555}.intro h1{font-size:clamp(30px,5vw,48px)}.stage canvas{max-width:none}}
@media(max-height:500px) and (orientation:landscape){header{padding:5px 16px;min-height:50px;flex-wrap:nowrap}.brand{font-size:19px}nav{gap:15px}nav button{font-size:11px;padding:4px 0}.intro{bottom:95px}.intro h1{font-size:30px}.intro>p:first-child{display:none}footer{padding:4px 16px}.footer-top{margin:0}.chapter-copy h2{font-size:18px}.chapter-copy>span{display:none}.tools>button,summary{min-height:40px}#position{height:26px}}
@media(max-width:360px){.brand{font-size:18px}.mobile-chapter select{max-width:135px}.tools{gap:10px}.tools>button,summary{font-size:12px}}

/* Portrait: immersive vertical crop instead of a small landscape strip. */
@media(max-width:1100px) and (orientation:portrait){
 .stage{background:#151515}.stage:after{display:block;background:linear-gradient(transparent 55%,#0009)}
 footer{background:transparent;color:white}.tools>button,summary,.tools>button[aria-pressed=true],#percent{color:white;border-color:#ffffff80}.tools summary span,.chapter-copy>span{color:white}#position{accent-color:white}
 .intro{top:auto;bottom:170px;color:white;text-shadow:0 2px 20px #0007}.intro>p:first-child{color:white}.intro h1{font-size:clamp(34px,7vw,56px)}
}