*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#283b31;color:#fff8e9;font-family:-apple-system,BlinkMacSystemFont,'Noto Sans SC',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:1px solid #fff4;background:#1b312b85;border-radius:30px;padding:13px 20px;cursor:pointer;backdrop-filter:blur(16px)}button:focus-visible,a:focus-visible{outline:2px solid #fce6a1;outline-offset:4px}button:hover{background:#526b56aa}button:disabled{opacity:.4} [hidden]{display:none!important}#world,#still,.shade,#entry{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}#still,#entry{background:url('assets/waterside.jpg') center 53%/cover no-repeat}#still{transition:background-image .6s} .shade{pointer-events:none;background:linear-gradient(#122b294a,transparent 30%,transparent 65%,#10281b88)}header{position:fixed;top:calc(20px + env(safe-area-inset-top));left:25px;right:25px;display:flex;justify-content:space-between;align-items:flex-start;z-index:5;pointer-events:none}header>*{pointer-events:auto}.brand{color:inherit;text-decoration:none;font-family:serif;font-size:28px;letter-spacing:8px;text-shadow:0 2px 12px #0008}.brand span{display:block;font:8px sans-serif;letter-spacing:3px;margin-top:6px}#menu{width:44px;height:44px;padding:0;font-size:20px}#entry{z-index:3;background-image:linear-gradient(90deg,#0a2119bd,#10271e25),url('assets/waterside.jpg');display:flex;align-items:center;padding:10vh 8vw} .intro{max-width:440px}.eyebrow{letter-spacing:3px;font-size:12px;opacity:.8}.intro h1{font-family:serif;font-size:clamp(46px,7vw,76px);font-weight:400;letter-spacing:6px;line-height:1.4;margin:24px 0}.intro>p:not(.eyebrow){font-size:14px;line-height:2.1;letter-spacing:2px;margin-bottom:30px}.primary{background:#eee8d8;color:#253e31;border:0;display:block;padding:17px 27px}.primary:hover{background:#fff4dc}.primary span{margin-left:30px}.intro>button:not(.primary){margin-top:12px;background:transparent;border:0;padding-left:0;font-size:12px}.intro small{display:block;font-size:10px;opacity:.6;letter-spacing:1px;margin-top:16px}.entryfoot{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));font-size:10px;letter-spacing:4px;opacity:.7}#place{position:absolute;top:calc(105px + env(safe-area-inset-top));left:25px;font-family:serif;font-size:17px;letter-spacing:3px}#place span{display:block;font:10px sans-serif;letter-spacing:2px;opacity:.75;margin-top:10px}#hint{position:absolute;bottom:calc(140px + env(safe-area-inset-bottom));width:100%;text-align:center;font-size:10px;letter-spacing:1px;pointer-events:none;opacity:.8;transition:opacity 1s}#quote{position:absolute;bottom:calc(25px + env(safe-area-inset-bottom));width:100%;text-align:center;font-size:12px;letter-spacing:2px;pointer-events:none;padding:0 20px}#joystick{position:absolute;bottom:calc(75px + env(safe-area-inset-bottom));left:25px;width:96px;height:96px;border:1px solid #fff5;background:#f9f5df14;backdrop-filter:blur(5px);border-radius:50%;touch-action:none}#stick{position:absolute;top:29px;left:29px;width:36px;height:36px;border-radius:50%;background:#fff9;box-shadow:0 2px 15px #0002;pointer-events:none}.sit{position:absolute;right:25px;bottom:calc(97px + env(safe-area-inset-bottom));font-size:12px;padding:13px 22px}#exitStill{position:absolute;bottom:calc(85px + env(safe-area-inset-bottom));left:25px;font-size:11px}#drawer{position:fixed;z-index:6;right:18px;top:calc(80px + env(safe-area-inset-top));width:min(310px,calc(100vw - 36px));max-height:calc(100dvh - 125px - env(safe-area-inset-top));overflow:auto;background:#152d27ed;border:1px solid #fff2;border-radius:20px;padding:24px;backdrop-filter:blur(25px)}#drawer h2{font-family:serif;font-weight:400;letter-spacing:4px;font-size:22px}#drawer p{font-size:11px;opacity:.7;margin-bottom:22px}#drawer button{width:100%;display:flex;justify-content:space-between;background:transparent;border:0;border-top:1px solid #fff2;border-radius:0;padding:14px 0;font-size:13px;text-align:left}#drawer small{font-size:10px;line-height:1.9;opacity:.55;display:block;margin-top:20px}dialog{max-width:420px;width:calc(100% - 36px);border:1px solid #fff4;border-radius:22px;background:#f3f0e6;color:#2c483c;padding:28px}dialog::backdrop{background:#0f271ec9;backdrop-filter:blur(8px)}dialog h2{font-family:serif;font-weight:400}dialog p{font-size:12px;line-height:2}dialog button{color:#2c483c;background:transparent;border-color:#2c483c30;font-size:12px;margin-top:12px}dialog .primary{background:#294a3c;color:#fff}dialog textarea{width:100%;height:150px;resize:none;background:#fffc;border:1px solid #294a3c30;border-radius:12px;padding:15px;font:16px sans-serif;color:#294a3c}dialog .close{float:right;border:0;padding:0;margin:0;font-size:26px}.quiet #place,.quiet #quote,.quiet #joystick,.quiet .sit,.quiet #hint{display:none}@media(min-width:800px){#entry{background-position:center 58%}.intro{margin-left:7vw}#joystick{opacity:.6}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
