@font-face{font-family:Grandstander;src:url('./assets/Grandstander.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Sunny UI';src:url('./assets/SunnyUI.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}
:root{color-scheme:light;--water:#709fcf;--cream:#fff9e9;--ink:#483158;--ui-scale:1;--u:calc(1px * var(--ui-scale));--logo-size:390;--tagline-size:26;--play-width:240;--play-height:80;--play-type:28;--footer-size:16;--note-width:760;--note-room:32;--note-padding:30;--note-title:32;--note-font:17}
:root[data-layout="portrait"]{--logo-size:270;--tagline-size:17;--play-width:200;--play-height:66.6667;--play-type:24;--footer-size:11;--note-width:760;--note-room:24;--note-padding:18;--note-title:26;--note-font:15}
html,body{margin:0;width:100%;height:100%;background:var(--water)}
body{font-family:Grandstander,'Sunny UI',sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
.landing{position:relative;isolation:isolate;width:100%;height:100svh;overflow:hidden}
.map{position:absolute;inset:0;z-index:-1;background:var(--water) url('./assets/menu-map.png') var(--map-focus,50%) center/cover no-repeat;image-rendering:pixelated;pointer-events:none}
.map-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--map-focus,50%) center;image-rendering:pixelated;pointer-events:none;user-select:none}
.map-actors{overflow:hidden;contain:strict;isolation:isolate}.map-stage{position:absolute;left:0;top:0;transform-origin:0 0}.map-actor{position:absolute;left:0;top:0;image-rendering:pixelated;will-change:transform}.map-actor[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.map-water{display:none}}
.identity{position:absolute;z-index:3;top:48%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:calc(16 * var(--u));width:calc(100% - 48 * var(--u));text-align:center}
.brand{position:relative;isolation:isolate;width:calc(var(--logo-size) * var(--u));max-width:100%;margin:0;line-height:0}
.logo-button{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.logo-button:focus-visible{outline:calc(4 * var(--u)) solid var(--cream);outline-offset:calc(10 * var(--u));border-radius:calc(10 * var(--u))}
.logo{position:relative;z-index:2;display:block;width:100%;height:auto;user-select:none;transform-origin:50% 60%;image-rendering:auto}
.announcement{margin:0;max-width:100%;color:var(--ink);font-size:calc(var(--tagline-size) * var(--u));font-weight:650;line-height:1.2;letter-spacing:0;-webkit-text-stroke:calc(3.3 * var(--u)) var(--cream);paint-order:stroke fill;text-shadow:0 calc(1.3 * var(--u)) var(--cream);text-wrap:balance}
.play-button{position:relative;display:block;width:calc(var(--play-width) * var(--u));height:calc(var(--play-height) * var(--u));padding:0;margin:calc(5 * var(--u)) 0 0;border:0;background:url('./assets/play-banner.png') center/100% 100% no-repeat;color:#543322;font-family:Grandstander,'Sunny UI',sans-serif;font-weight:750;line-height:1;image-rendering:pixelated;opacity:1}
.play-button{isolation:isolate;background:none}.play-button::before{content:'';position:absolute;inset:0;z-index:2;background:url('./assets/play-banner.png') center/100% 100% no-repeat;image-rendering:pixelated;pointer-events:none}.play-sparks{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}
.play-lettering{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none}.play-label{fill:#543322;font-family:Grandstander,'Sunny UI',sans-serif;font-size:calc(var(--play-type) * 96px / var(--play-width));font-weight:750}
.play-button{cursor:pointer;touch-action:manipulation;transition:transform 160ms cubic-bezier(.2,.8,.3,1);-webkit-tap-highlight-color:transparent}.play-button:is(:hover,:focus-visible){transform:scale(1.08)}.play-button:active{transform:scale(1.12)}.play-button:focus-visible{outline:calc(3 * var(--u)) solid var(--cream);outline-offset:calc(3 * var(--u))}
.play-label[data-play-caption="soon"]{opacity:0}.play-button:is(:hover,:focus-visible) .play-label[data-play-caption="default"]{opacity:0}.play-button:is(:hover,:focus-visible) .play-label[data-play-caption="soon"]{opacity:1}
footer{position:absolute;bottom:max(calc(24 * var(--u)),env(safe-area-inset-bottom));left:calc(21 * var(--u));right:calc(21 * var(--u));text-align:center;color:var(--cream);font-size:calc(var(--footer-size) * var(--u));font-weight:650;line-height:1.4;text-shadow:0 calc(1.3 * var(--u)) #334d50}
.site-tools{position:absolute;z-index:6;top:max(calc(20 * var(--u)),env(safe-area-inset-top));right:max(calc(20 * var(--u)),env(safe-area-inset-right));display:flex;align-items:center;gap:calc(8 * var(--u))}
.utility-button{position:relative;isolation:isolate;flex:none;width:calc(76 * var(--u));height:calc(40 * var(--u));padding:0;border:0;background:none;color:#000;font-family:Grandstander,'Sunny UI',sans-serif;font-weight:750;line-height:1;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;image-rendering:pixelated}.utility-button::before{content:'';position:absolute;inset:0;z-index:-1;border:calc(8 * var(--u)) solid transparent;border-image:url('./assets/paper-button.png') 8 fill / calc(8 * var(--u)) / 0 stretch;background:#ffcf80 padding-box;pointer-events:none}
.music-toggle{width:calc(112 * var(--u))}.utility-lettering{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.utility-caption,.music-state{fill:currentColor;font-family:Grandstander,'Sunny UI',sans-serif;font-weight:750;font-size:15px}.music-state{fill:#795633;font-size:10px}.music-toggle[aria-pressed="true"] .music-state{fill:#486841}.utility-button:active::before,.info-toggle[aria-expanded="true"]::before{border-image-source:url('./assets/paper-button-down.png')}.utility-button:focus-visible{outline:calc(3 * var(--u)) solid var(--cream);outline-offset:calc(3 * var(--u))}
.notice-note{position:fixed;inset:0;width:calc(var(--note-width) * var(--u));height:fit-content;max-width:calc(100vw - var(--note-room) * var(--u));max-height:calc(100svh - 32 * var(--u));margin:auto;padding:calc(var(--note-padding) * var(--u));color:#543322;background:#ffb480 padding-box;border:calc(12 * var(--u)) solid transparent;border-image:url('./assets/paper-frame.png') 12 fill / calc(12 * var(--u)) / 0 stretch;image-rendering:pixelated;font-family:Grandstander,'Sunny UI',sans-serif;overflow:auto;overscroll-behavior:contain;box-shadow:0 calc(6 * var(--u)) 0 #35231730}
.notice-note::backdrop{background:#22384366}
.notice-note:popover-open{animation:note-arrive 160ms ease-out}
.notice-note header{position:relative;display:grid;justify-items:center;text-align:center}
.notice-note h2{max-width:calc(100% - 48 * var(--u));margin:0;font-size:calc(var(--note-title) * var(--u));font-weight:750;line-height:1.18;text-wrap:balance}
.note-close{position:absolute;top:calc(-12 * var(--u));right:calc(-14 * var(--u));display:grid;place-items:center;width:calc(36 * var(--u));height:calc(36 * var(--u));padding:0;border:0;background:none;color:#543322;font-family:Grandstander,'Sunny UI',sans-serif;font-size:calc(30 * var(--u));font-weight:650;line-height:1;cursor:pointer}
.notice-intro{max-width:calc(540 * var(--u));margin:calc(14 * var(--u)) auto calc(30 * var(--u));font-size:calc(var(--note-font) * var(--u));font-weight:550;line-height:1.5;text-align:center;text-wrap:pretty}
.notice-activities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(26 * var(--u)) calc(28 * var(--u));margin:0;padding:0;list-style:none}
.notice-activity{display:grid;grid-template-columns:calc(64 * var(--u)) minmax(0,1fr);align-items:center;column-gap:calc(14 * var(--u));min-width:0}
.notice-art{display:grid;place-items:center;width:calc(64 * var(--u));height:calc(64 * var(--u))}.notice-art img{display:block;width:calc(48 * var(--u));height:auto;image-rendering:pixelated}
.notice-activity h3{margin:0 0 calc(6 * var(--u));font-size:calc(19 * var(--u));font-weight:750;line-height:1.2}.notice-activity p{margin:0;color:#714d30;font-size:calc(15 * var(--u));font-weight:550;line-height:1.4;text-wrap:pretty}
.notice-intro strong{font-weight:750}
.notice-bottom{display:grid;justify-items:center;gap:calc(14 * var(--u));margin-top:calc(28 * var(--u));padding-top:calc(22 * var(--u));border-top:calc(2 * var(--u)) solid #a36c4155}.notice-soon{margin:0;text-align:center;font-size:calc(16 * var(--u));font-weight:750;line-height:1.3}
.twitter-link{display:block;width:calc(190 * var(--u));height:calc(48 * var(--u));color:#543322;text-decoration:none}.twitter-link .utility-caption{font-size:16px}
:root[data-layout="portrait"] .notice-activities{grid-template-columns:minmax(0,1fr);row-gap:calc(16 * var(--u))}:root[data-layout="portrait"] .notice-activity{grid-template-columns:calc(56 * var(--u)) minmax(0,1fr);column-gap:calc(12 * var(--u))}:root[data-layout="portrait"] .notice-art{width:calc(56 * var(--u));height:calc(56 * var(--u))}:root[data-layout="portrait"] .notice-art img{width:calc(40 * var(--u))}:root[data-layout="portrait"] .notice-intro{margin-bottom:calc(22 * var(--u))}:root[data-layout="portrait"] .notice-activity h3{font-size:calc(18 * var(--u))}:root[data-layout="portrait"] .notice-activity p{font-size:calc(14 * var(--u))}
.note-close:focus-visible,.twitter-link:focus-visible{outline:calc(4 * var(--u)) solid #486841;outline-offset:calc(4 * var(--u))}
.logo-sparks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.logo-spark{position:absolute;pointer-events:none}
@keyframes note-arrive{from{opacity:0;transform:translateY(calc(8 * var(--u))) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.play-button{transition:none}.notice-note:popover-open{animation:none}.logo-sparks,.play-sparks{display:none}}