:root{font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#35524f;--accent:#287e92}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100dvh;background:#a7d9d7;user-select:none;-webkit-user-select:none}
button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}
button:focus-visible,a:focus-visible{outline:3px solid #205852;outline-offset:4px}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.overlay{position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center}
.intro{justify-content:flex-start;padding:calc(clamp(24px,7vh,58px) + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(rgba(251,253,243,.18),transparent 65%)}
.intro-copy{width:min(100%,580px)}.eyebrow{margin:0 0 9px;font-size:12px;font-weight:800;letter-spacing:.13em;color:#416e74}
.intro h1{margin:0;font-size:clamp(30px,5.4vw,49px);line-height:1.25;letter-spacing:.035em;color:#2d5057;text-shadow:0 2px 12px rgba(255,255,255,.7)}
.kicker{font-size:clamp(13px,2vw,16px);font-weight:700;letter-spacing:.035em;color:#4c7277;margin:9px 0 0;min-height:1.5em}
.course-label{display:block;font-size:12px;color:#456b70;margin:20px 0 7px;font-weight:700}
.courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:445px;margin:auto}
.course{min-width:0;min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 6px;border:1.5px solid rgba(255,255,255,.72);border-radius:15px;background:rgba(255,255,247,.72);color:#43646c;font-size:13px;font-weight:800;box-shadow:0 3px 10px rgba(44,89,97,.035)}
.course[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:#fffdf2;color:#225b60}
.course-dot{width:10px;height:10px;flex:none;border-radius:50%;border:1px solid rgba(50,93,106,.11)}
.start{margin-top:20px;min-height:54px;min-width:170px;border:1px solid rgba(255,255,255,.75);border-radius:100px;background:var(--accent);padding:12px 30px;color:#fff;font-size:17px;font-weight:900;letter-spacing:.08em;box-shadow:0 10px 22px rgba(42,83,78,.16),inset 0 1px rgba(255,255,255,.22)}
.start:active,.secondary:active{transform:translateY(1px)}
.intro .back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:4px;color:#386770;text-decoration:none;font-size:12px;font-weight:700;padding:8px 16px}
.intro .back span{border-bottom:1px solid currentColor;padding-bottom:2px}
.loading{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:16px;right:16px;text-align:center;font-size:13px;font-weight:700;color:#35524f;pointer-events:none}
.reload{margin-top:10px;border:1px solid #7aa79f;background:#fffdf1;border-radius:20px;padding:10px 20px;color:#35524f;min-height:44px}
#hud{position:fixed;z-index:4;inset:0;pointer-events:none}
#end-journey{pointer-events:auto;position:absolute;top:calc(13px + env(safe-area-inset-top));right:calc(13px + env(safe-area-inset-right));border:1px solid rgba(255,255,255,.7);border-radius:100px;color:#355951;background:rgba(255,255,248,.88);box-shadow:0 3px 14px rgba(38,69,60,.09);min-width:74px;min-height:44px;padding:8px 15px;font-size:13px;font-weight:800;backdrop-filter:blur(8px)}
.hint{position:fixed;z-index:2;left:50%;top:calc(13% + env(safe-area-inset-top));transform:translateX(-50%);max-width:calc(100vw - 32px);min-width:240px;padding:12px 16px 13px;border:1px solid rgba(255,255,255,.8);border-radius:17px;color:#355951;background:rgba(255,255,245,.87);box-shadow:0 7px 25px rgba(58,93,75,.09);text-align:center;pointer-events:none;backdrop-filter:blur(8px);transition:opacity .4s,transform .4s}
.hint.is-gone{opacity:0;transform:translate(-50%,-8px)}.hint strong{display:block;font-size:13px;letter-spacing:.02em}
.gesture{display:block;width:86px;height:18px;margin:7px auto 0;position:relative;border-bottom:2px solid rgba(62,122,122,.4)}
.gesture::after,.gesture::before{content:"";position:absolute;bottom:-4px;width:6px;height:6px;border-right:2px solid rgba(62,122,122,.6);border-top:2px solid rgba(62,122,122,.6)}
.gesture::after{right:-1px;transform:rotate(45deg)}.gesture::before{left:-1px;transform:rotate(-135deg)}
.gesture i{position:absolute;left:8px;bottom:-6px;width:12px;height:12px;border-radius:50%;background:#e1a46d;box-shadow:0 0 0 3px rgba(255,255,255,.8);animation:guide 1.8s ease-in-out infinite}
@keyframes guide{50%{left:68px}100%{left:8px}}
.outro{justify-content:center;background:rgba(239,248,241,.76);backdrop-filter:blur(9px);padding:calc(20px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.outro-content{width:min(100%,480px);border:1px solid rgba(255,255,255,.9);border-radius:30px;background:rgba(255,255,248,.95);box-shadow:0 20px 60px rgba(58,84,68,.13);padding:clamp(24px,6vh,42px) 24px}
.outro h2{font-size:clamp(38px,9vw,68px);margin:0 0 9px;color:#44746c;letter-spacing:.06em}
.outro p{font-size:14px;font-weight:700;color:#577c71;margin:0 0 26px;line-height:1.8}
.outro-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.secondary,.home-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:30px;text-decoration:none;padding:11px 19px;font-weight:800;font-size:14px}
.secondary{border:0;background:var(--accent);color:#fff}.home-link{border:1px solid #b8d3c3;color:#436c61;background:#fff}
.outro-bottom{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:#567b70;font-size:12px;text-underline-offset:4px}
.noscript{position:fixed;inset:0;z-index:9;background:#f7faf9;padding:15vh 24px;text-align:center;line-height:1.9}
@media(max-height:540px){.intro{padding-top:calc(12px + env(safe-area-inset-top))}.eyebrow{margin-bottom:4px;font-size:11px}.intro h1{font-size:clamp(26px,4vw,34px)}.kicker{margin-top:5px;font-size:13px}.course-label{margin:10px 0 5px;font-size:11px}.course{min-height:44px}.start{min-height:48px;margin-top:12px;padding:10px 25px;font-size:16px}.intro .back{margin-top:0;min-height:36px}.hint{top:17%}.outro-content{padding:22px}.outro h2{font-size:40px}.outro p{margin-bottom:17px}}
@media(max-width:360px){.course{font-size:12px;gap:4px}.courses{gap:6px}.intro h1{font-size:29px}}
@media(max-height:540px) and (min-aspect-ratio:1/1){.intro{align-items:flex-start;text-align:left;padding-left:clamp(20px,4vw,42px)}.intro-copy{width:clamp(225px,42%,380px);max-width:380px}.intro h1{font-size:clamp(25px,3.8vw,32px)}.eyebrow{font-size:11px}.kicker{font-size:12px;line-height:1.5}.course-label{margin-top:12px}.courses{gap:7px}.course{font-size:12px;gap:4px;padding-left:3px;padding-right:3px;border-radius:13px}.start{min-width:160px}.intro .back{padding-left:0;padding-right:0}}
@media(max-height:540px) and (min-aspect-ratio:1/1) and (max-width:720px){.course-dot{display:none}.course{font-size:11px;white-space:nowrap}.course-label{margin-top:9px}.start{margin-top:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}