html,body{margin:0;height:100%;background:#bbdefb;overflow:hidden;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  font-family:system-ui,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#cap{position:fixed;left:50%;top:1.5vh;transform:translateX(-50%);max-width:56vw;padding:.5em 1.1em;
  background:rgba(255,255,255,.9);color:#263238;border-radius:999px;font-size:clamp(14px,3.4vh,26px);
  font-weight:700;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.12);opacity:0;pointer-events:none}
#cap.show{animation:capIn .35s ease-out forwards}
@keyframes capIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
#start{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(#90caf9,#e3f2fd);z-index:10}
#start .card{text-align:center;color:#0d47a1}
#start .logo{font-size:min(22vh,120px);animation:bounce 1.2s ease-in-out infinite}
#start h1{margin:.2em 0 .6em;font-size:clamp(24px,7vh,54px)}
#go{font:inherit;font-size:clamp(22px,6vh,44px);font-weight:800;padding:.5em 1.6em;border:0;border-radius:999px;
  background:#ff7043;color:#fff;box-shadow:0 8px 0 #d84315;cursor:pointer}
#go:active{transform:translateY(6px);box-shadow:0 2px 0 #d84315}
#start .tip{margin-top:1.2em;font-size:clamp(14px,3vh,22px);color:#1565c0}
#start .home{position:absolute;left:3vh;top:3vh;font-size:5vh;text-decoration:none}
#err{display:none;position:fixed;left:0;right:0;bottom:0;z-index:99;background:#b71c1c;color:#fff;font:16px/1.4 monospace;padding:10px;white-space:pre-wrap}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hint-bob{animation:bob .8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
.hint-bob.down{animation-name:bobDown}
@keyframes bobDown{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.flicker{animation:flick .35s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes flick{from{transform:scale(1,1)}to{transform:scale(1.1,.88)}}
.wiggle{animation:wig 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes wig{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-4deg)}}
.flowing{animation:flow .3s linear infinite}
@keyframes flow{to{stroke-dashoffset:-30}}