@font-face{font-family:Cormorant;src:url('./assets/cormorant-garamond.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('./assets/nunito.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:dark;--cream:#fff0d9;--muted:#c7af97;--amber:#f1be7b;--ink:#342317;--menu:#302219;font-family:Nunito,system-ui,sans-serif;color:var(--cream);background:#211710;font-synthesis:weight}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--cream);outline-offset:5px}
button{cursor:pointer}
[hidden]{display:none!important}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:21px;height:21px;flex-shrink:0}
.page{min-height:100svh;position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:clip;background:#211710}
/* Keep the WebGL scene behind a permanent foreground stacking context, even
   after entrance animations release their temporary compositing layers. */
.scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:url('./assets/tavern-night.png') center bottom/cover no-repeat}
.header,.main,.footer{position:relative;z-index:1}
.main{z-index:2}
.scene::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,13,9,.12) 45%,rgba(16,10,7,.05) 70%,rgba(16,10,7,.4))}
.scene-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.scene-ready .scene-canvas{opacity:1}
/* Source-image coordinates keep the distant boat on the water at every crop. */
.lake-plane{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.scene-ready .lake-plane{opacity:1}
.lake-depth{position:absolute;inset:0}
.lake-vessel{position:absolute;left:320px;top:858px;width:72px;height:44px;opacity:0;animation:lake-crossing 210s linear -105s infinite}
.vessel-art{display:block;overflow:visible}
.vessel-hull{transform-origin:40px 28px;animation:vessel-rock 8s ease-in-out infinite}
.vessel-lamplight{animation:vessel-lamplight 5.7s ease-in-out infinite}
.vessel-reflection{opacity:.18;animation:vessel-reflection 6.3s ease-in-out infinite}
.scene-paused .lake-vessel,.scene-paused .lake-vessel *{animation-play-state:paused}
@keyframes lake-crossing{0%{transform:translateX(0);opacity:0}10%,84%{opacity:.8}100%{transform:translateX(710px);opacity:0}}
@keyframes vessel-rock{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(.35px) rotate(.5deg)}}
@keyframes vessel-lamplight{0%,100%{opacity:.72}43%{opacity:1}68%{opacity:.82}}
@keyframes vessel-reflection{0%,100%{opacity:.12;transform:translateX(-.3px)}50%{opacity:.22;transform:translateX(.4px)}}
.lantern-depth{width:100%;height:100%}
.header{display:flex;align-items:center;justify-content:space-between;padding:32px 4.5vw;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:1.45rem;letter-spacing:-.045em;font-weight:800}
.brand-mark{width:30px;height:34px;color:var(--amber)}
.beta-badge{display:flex;align-items:center;gap:18px;font-size:.8125rem;color:var(--muted)}
.beta-badge>span{border:1px solid #f1be7b44;border-radius:6px;color:#eaca9f;padding:4px 10px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.site-nav{display:flex;align-items:center;gap:26px;font-size:.8125rem;color:var(--muted)}
.site-nav>a{padding-block:10px;transition:color .2s;white-space:nowrap}
.site-nav>a:hover,.site-nav>a[aria-current=page]{color:var(--cream)}
@media(max-width:700px){.site-nav{gap:16px;font-size:.75rem}}
@media(max-width:390px){.page>.header{gap:14px}.page>.header .beta-badge{display:none}}
.main{display:flex;align-items:center;flex-direction:column;text-align:center;width:100%;padding:26px 24px 84px;flex:1}
.hero-lantern{width:132px;height:166px;position:relative;isolation:isolate;margin-bottom:24px;filter:drop-shadow(0 0 32px #e79c3533);pointer-events:none}
.hero-lantern::before{content:'';position:absolute;inset:-42px -72px;background:radial-gradient(ellipse,#f7ad3a33, #eeac4612 38%,transparent 68%);z-index:-1;opacity:.78}
.lantern-swing{position:relative;width:100%;height:100%;transform:rotate(-4deg);transform-origin:50% 5%}
.hero-lantern img{display:block;width:100%;height:100%;object-fit:contain}
.lantern-swing::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 28% 34% at 50% 60%,#fff5cdcc,#ffd58166 42%,transparent 76%);mask:url('./assets/lantern.png') center/contain no-repeat;mix-blend-mode:screen;opacity:.2;pointer-events:none}
.eyebrow{font-size:.6875rem;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#c5a47e;margin:0 0 21px}
h1{font-family:Cormorant,Georgia,serif;font-size:clamp(4rem,6.1vw,6rem);font-weight:400;line-height:.95;letter-spacing:-.04em;margin:0;text-wrap:balance;text-shadow:0 2px 20px #20140c22}
.intro{font-size:1rem;color:var(--muted);line-height:1.6;margin:24px 0 30px}
.downloads{display:flex;flex-direction:column;align-items:center;max-width:100%}
.download-controls{position:relative;max-width:100%;z-index:5}
.download-split{display:flex;align-items:stretch;border:1px solid #ffdda266;background:linear-gradient(110deg,#ffe0a9,#f4bf78);border-radius:10px;color:var(--ink);box-shadow:0 3px 6px #100b0526,0 0 32px #d48b2e12;transition:box-shadow .2s,transform .2s;min-height:57px}
.download-split:has(.download-button[href]:hover){transform:translateY(-2px);box-shadow:0 5px 14px #100b0533,0 0 35px #d48b2e26}
.download-button{display:flex;align-items:center;justify-content:center;gap:11px;padding:16px 24px;min-width:254px;font-size:1rem;font-weight:700;border-radius:9px 0 0 9px;line-height:1.5;cursor:pointer}
.download-button[aria-disabled=true]{cursor:default;color:#654829}
.download-button:focus-visible,.platform-toggle:focus-visible{outline-color:var(--amber)}
.platform-toggle{display:flex;align-items:center;justify-content:center;color:var(--ink);padding:0 13px;border:0;border-radius:0 9px 9px 0;background:transparent;position:relative;min-width:48px;transition:background .2s}
.platform-toggle:before{content:'';height:24px;width:1px;background:#78562e33;position:absolute;left:0;top:50%;transform:translateY(-50%)}
.platform-toggle:hover,.platform-toggle[aria-expanded=true]{background:#7d511f12}
.platform-toggle .icon{transition:transform .2s}
.platform-toggle[aria-expanded=true] .icon{transform:rotate(180deg)}
.platform-menu{position:absolute;top:calc(100% + 9px);left:0;right:0;text-align:left;padding:6px;background:var(--menu);border:1px solid #e2bb7f33;box-shadow:0 14px 38px #0d080b66;border-radius:12px}
.platform-menu button{width:100%;display:flex;gap:14px;align-items:center;text-align:left;color:var(--cream);background:none;border:0;padding:13px 14px;border-radius:7px;font-size:.9375rem;line-height:1.3}
.platform-menu button:hover,.platform-menu button:focus-visible{background:#f1be7b13;outline:0}
.platform-menu button[aria-checked=true]{background:#f1be7b0c}
.platform-menu small{display:block;font-size:.75rem;color:var(--muted);margin-top:4px}
.platform-menu .check{color:var(--amber);margin-left:auto;opacity:0;width:18px}
.platform-menu [aria-checked=true] .check{opacity:1}
.release-status{font-size:.75rem;color:#c2a68b;margin:12px 0 0;min-height:20px;line-height:1.65}
.release-link{font-size:.75rem;margin:4px 0 0;text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
.web-option{display:flex;align-items:center;gap:9px;color:#b5a698;background:transparent;border:0;padding:0;margin-top:24px;font-size:.8125rem;line-height:1.6;cursor:not-allowed}
.web-option>.icon{width:17px;height:17px;opacity:.72}
.coming-soon{font-size:.625rem;line-height:1;letter-spacing:.015em;border:1px solid #b5a69833;border-radius:4px;padding:5px 6px;color:#ae9c8e;margin-left:3px}
.footer{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 4.5vw 32px}
.maren-note{display:flex;align-items:center;gap:13px;text-align:left}
.maren-portrait{width:49px;height:49px;flex-shrink:0;border:1px solid #c3975d5e;background:#573919;overflow:hidden;border-radius:50%}
.maren-portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 16%;transform:scale(1.6);transform-origin:50% 24%}
.maren-note p{font-family:Cormorant,Georgia,serif;font-size:1.1875rem;color:#ddc8ad;margin:0 0 4px}
.maren-note span{font-size:.6875rem;letter-spacing:.015em;color:#ae967e}
.footer-note{font-size:.625rem;text-transform:uppercase;letter-spacing:.18em;color:#b19980;padding-bottom:7px}
.no-script{font-size:.8125rem;max-width:280px;color:var(--muted)}
.eyebrow,.coming-soon,.maren-note span,.beta-badge>span{font-size:.75rem}
/* Separate entrance and sway layers keep their transforms independent. */
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lantern-sway{0%,100%{transform:rotate(-5.4deg)}50%{transform:rotate(-2.6deg)}}
@keyframes candle-halo{0%,100%{opacity:.7;transform:scale(.98)}19%{opacity:.86;transform:scale(1.02)}37%{opacity:.76;transform:scale(1)}53%{opacity:.9;transform:scale(1.03)}71%{opacity:.73;transform:scale(.99)}86%{opacity:.83;transform:scale(1.01)}}
@keyframes candle-light{0%,100%{opacity:.16}14%{opacity:.25}32%{opacity:.19}47%{opacity:.29}58%{opacity:.22}76%{opacity:.28}89%{opacity:.18}}
@media(prefers-reduced-motion:no-preference){
  .header{animation:arrive .7s cubic-bezier(.2,.65,.3,1) both}
  .hero-lantern{animation:arrive .9s cubic-bezier(.2,.65,.3,1) .06s backwards}
  .lantern-swing{animation:lantern-sway 7s ease-in-out infinite}
  .hero-lantern::before{animation:candle-halo 5.3s ease-in-out infinite}
  .lantern-swing::after{animation:candle-light 3.7s ease-in-out infinite}
  .eyebrow{animation:arrive .75s cubic-bezier(.2,.65,.3,1) .12s backwards}
  h1{animation:arrive .85s cubic-bezier(.2,.65,.3,1) .2s backwards}
  .intro{animation:arrive .8s cubic-bezier(.2,.65,.3,1) .28s backwards}
  .downloads{position:relative;z-index:2;animation:arrive .75s cubic-bezier(.2,.65,.3,1) .36s backwards}
  .footer{animation:arrive .8s cubic-bezier(.2,.65,.3,1) .44s backwards}
}
@media(min-width:1500px){.header{padding-top:38px}.main{padding-top:38px}.hero-lantern{width:148px;height:186px;margin-bottom:30px}}
@media(max-height:850px) and (min-width:701px){.main{padding-top:4px;padding-bottom:54px}.hero-lantern{width:102px;height:128px;margin-bottom:17px}h1{font-size:4.6rem}.eyebrow{margin-bottom:16px}.intro{margin:20px 0 25px}.header{padding-top:25px;padding-bottom:25px}}
@media(max-width:700px){.header{padding:25px 25px}.brand{font-size:1.25rem}.brand-mark{width:26px;height:30px}.beta-badge{font-size:0;gap:0}.beta-badge>span{font-size:.625rem}.main{padding:34px 22px 74px}.hero-lantern{width:108px;height:136px;margin-bottom:28px}.eyebrow{font-size:.625rem;letter-spacing:.14em;margin-bottom:21px}h1{font-size:clamp(3.8rem,12vw,5rem)}.intro{max-width:290px;font-size:.9375rem;margin-top:22px;margin-bottom:30px}.download-button{min-width:241px;padding:15px 19px}.footer{padding:12px 25px 26px;justify-content:center}.footer-note{display:none}.maren-note p{font-size:1.0625rem}.maren-portrait{width:42px;height:42px}.page{background-position:64% bottom}.maren-note{gap:11px}}
@media(max-width:360px){.download-button{min-width:218px;padding:15px 14px;font-size:.9375rem}.header{padding-inline:20px}.main{padding-inline:16px}.maren-note p{font-size:1rem}.footer{padding-inline:16px}}
@media(max-width:700px){.eyebrow,.beta-badge>span{font-size:.75rem}}
@media(max-width:700px){.scene{background-position:64% bottom}}
@media(prefers-reduced-motion:reduce){.scene-canvas{display:none}.lantern-depth{transform:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}