@charset "UTF-8";
.startup-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#56c4e9;color:#fff;padding:24px;text-align:center;touch-action:none;overscroll-behavior:none}
.startup-overlay[hidden]{display:none}
.startup-content{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:360px}
.startup-wordmark{font-family:"Arial Black",Arial,sans-serif;font-size:clamp(38px,10vw,62px);font-weight:900;letter-spacing:-.07em}
.startup-wordmark>span{color:#083850}
.startup-rule{position:relative;width:160px;height:2px;background:#ffffff50;overflow:hidden}
.startup-rule::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:startup-pulse 1.8s ease-in-out infinite}
.startup-content p{font-size:12px;letter-spacing:.04em;line-height:1.7;margin:0}
.startup-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.startup-actions button{border:1px solid #ffffff90;border-radius:999px;background:transparent;color:#fff;padding:12px 18px;min-height:44px}
.startup-actions button[hidden]{display:none}
@keyframes startup-pulse{0%,100%{transform:scaleX(.12);opacity:.5}50%{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.startup-rule::after{animation:none;transform:scaleX(.4)}}
:root{--blue:#56c4e9;--ink:#083850;--white:#fff;--page:#f5fbfe;--gutter:clamp(24px,3.2vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid #123d63;outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{height:100svh;min-height:700px;position:relative;isolation:isolate;overflow:hidden;background:var(--blue);color:#fff;touch-action:pinch-zoom}
.mascot-stage{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.mascot-video,.mascot-poster,.look-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mascot-poster{z-index:1}.is-loaded .mascot-poster{display:none}
.video-backdrop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.mascot-video{visibility:hidden}.mascot-video.is-active{visibility:visible}
.look-frame{visibility:hidden}.is-decoded .look-frame{visibility:visible}.is-reaction .look-frame{visibility:hidden}
.mascot-hitarea{position:absolute;left:25%;top:4%;width:50%;height:91%;z-index:3;border:0;background:transparent;border-radius:45%;cursor:pointer;touch-action:pinch-zoom}
.mascot-hitarea:focus-visible{outline:2px dashed #fff;outline-offset:-12px}
.click-hint{position:absolute;right:4%;top:57%;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:11px;font-weight:500;line-height:1.3;white-space:nowrap;pointer-events:none;opacity:.4;animation:hint-glow 2.6s ease-in-out infinite}
.click-hint svg{width:28px;height:34px;overflow:visible}
.tap-hand{animation:hint-tap 2.6s ease-in-out infinite}
.tap-ripple{transform-box:fill-box;transform-origin:center;opacity:0;animation:hint-ripple 2.6s ease-out infinite}
.has-greeted .click-hint{display:none}
@keyframes hint-glow{0%,100%{opacity:.23}45%,65%{opacity:.6}}
@keyframes hint-tap{0%,25%,100%{transform:translateY(-2px)}45%,55%{transform:translateY(1px)}}
@keyframes hint-ripple{0%,40%,100%{opacity:0;transform:scale(.7)}52%{opacity:.65;transform:scale(1)}75%{opacity:0;transform:scale(1.45)}}
.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,45,72,.38),transparent 34%,transparent 70%,rgba(0,45,72,.34)),linear-gradient(180deg,rgba(0,45,72,.19),transparent 13%,transparent 86%,rgba(0,45,72,.09))}
.site-header{position:absolute;left:var(--gutter);right:var(--gutter);top:26px;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:28px;font-size:.875rem}
.wordmark{font-family:"Arial Black",Arial,sans-serif;font-size:1.4rem;letter-spacing:-.07em;font-weight:900;display:inline-flex;align-items:baseline;width:max-content}
.wordmark-dot{margin-left:2px;color:#0b4560}
.header-tools{display:flex;align-items:center;gap:10px}
.languages{display:flex;padding:3px;border:1px solid #ffffff80;border-radius:999px}
.languages button{border:0;border-radius:999px;min-width:39px;min-height:32px;background:transparent;color:#fff;font-size:.75rem;font-weight:700}
.languages button[aria-pressed=true]{background:#fff;color:var(--ink)}
.sound-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;min-width:68px;border:1px solid #ffffff80;border-radius:999px;background:transparent;color:#fff;font-size:.75rem;font-weight:700}
.sound-toggle[aria-pressed=true]{background:#fff;color:var(--ink)}
.sound-note{font-size:1.3rem;line-height:1}
.hero-title-block{position:absolute;z-index:5;left:var(--gutter);bottom:64px;max-width:39%;text-align:center}
h1{font-family:"Arial Black",Arial,sans-serif;font-size:clamp(60px,6.2vw,122px);line-height:.85;letter-spacing:-.085em;font-weight:900;margin:0;transform:scaleX(.94);transform-origin:center bottom}
.hero-description{position:absolute;z-index:5;right:var(--gutter);bottom:64px;width:clamp(235px,22vw,345px);text-align:center}
.hero-description p{font-size:1rem;line-height:1.65;margin:0 0 14px;font-weight:500;word-break:keep-all}
.hero-description .hero-invitation{font-weight:700;margin-bottom:0}
@media(min-width:1700px){.hero-title-block,.hero-description{bottom:88px}}
@media(max-width:1100px){.hero-description{width:250px}.hero-title-block{max-width:40%}h1{font-size:clamp(58px,6.8vw,80px)}}
@media(max-width:760px){
  :root{--gutter:22px}
  body{background:var(--blue)}
  .hero{height:100dvh;min-height:var(--mobile-min-height,calc(100vw * .91 + 234px))}
  .video-backdrop{display:block}
  .site-header{top:18px;gap:10px}
  .wordmark{font-size:1.25rem}
  .header-tools{gap:7px}
  .languages button{min-width:37px;min-height:38px}
  .sound-toggle{min-height:44px;min-width:62px}
  .hero-title-block{top:var(--mobile-title-top,80px);bottom:auto;right:var(--gutter);max-width:none}
  h1{font-size:clamp(25px,7.2vw,38px);letter-spacing:-.07em;line-height:1;transform:none}
  h1 br{display:none}
  .mascot-hitarea{left:8%;top:124px;width:84%;height:calc(100vw * .91)}
  .click-hint{right:0;top:57%;font-size:10px;gap:5px}
  .click-hint svg{width:25px;height:30px}
  .hero-shade{background:linear-gradient(90deg,rgba(0,45,72,.17),transparent 35%,transparent 65%,rgba(0,45,72,.15)),linear-gradient(180deg,rgba(0,45,72,.24),transparent 40%,transparent 70%,rgba(0,45,72,.29))}
  .hero-description{left:var(--gutter);right:auto;top:var(--mobile-copy-top,calc(100vw * .91 + 136px));bottom:auto;width:calc(100% - 44px)}
  .hero-description p{font-size:13px;line-height:1.45;margin-bottom:6px}
}
@media(max-width:350px){:root{--gutter:17px}.wordmark{font-size:1.07rem}.header-tools{gap:5px}.sound-toggle{min-width:52px}.languages button{min-width:32px}.hero-title-block{left:17px}.hero-description{left:17px;width:calc(100% - 34px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.click-hint{animation:none;opacity:.45}.tap-hand,.tap-ripple{animation:none}}