*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{background:#fafafa;font-family:Pretendard Variable,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif}.app{--flavor-deep:#3a7a16;--flavor-mid:#54a228;--flavor-bright:#54b424;--flavor-accent:#7dbb38;--flavor-bg-center:#fff;--flavor-bg-mid:#fbfff6;--flavor-bg-edge:#edf0ea;--flavor-shadow:#3a7a161a;--progress-start:#b8ef65;--progress-mid:#8fdd4e;--progress-end:#54b424;--done-start:#8fdd4e;--done-end:#54b424;--done-shadow:#54b42473;--gray:#97978f;--surface:#ffffffeb;--shadow:0 2px 10px var(--flavor-shadow);background:radial-gradient(ellipse at 50% 35%, var(--flavor-bg-center) 0%, var(--flavor-bg-mid) 54%, var(--flavor-bg-edge) 100%);touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0}.app canvas{touch-action:none}.pill{background:var(--surface);color:var(--flavor-deep);box-shadow:var(--shadow);border:none;border-radius:999px;font-size:14px;font-weight:700;transition:transform .12s,color .12s,background .12s}.hud{top:max(20px, calc(env(safe-area-inset-top) + 8px));z-index:10;text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;position:absolute;left:50%;transform:translate(-50%)}.hud h1{color:var(--flavor-deep);text-shadow:0 2px #ffffffb3;margin:0;padding:0 12px;font-size:clamp(22px,5.5vw,28px)}.hud p{width:min(420px,100vw - 40px);color:var(--gray);margin:0 auto;line-height:1.35}.hud .random-note{color:var(--flavor-mid);margin-top:6px;font-size:13px;font-weight:800}.hud .control-note{margin-top:2px;margin-bottom:12px;font-size:12px}.progress-row{justify-content:center;align-items:center;gap:8px;display:flex}.progress-track{background:#0000000f;border-radius:999px;width:160px;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--progress-start), var(--progress-mid) 60%, var(--progress-end));border-radius:999px;height:100%;transition:width .25s}.progress-label{text-align:left;min-width:80px;color:var(--flavor-mid);font-size:12px;font-weight:700}.sound-hint{cursor:pointer;pointer-events:auto;align-items:center;gap:6px;width:fit-content;max-width:calc(100vw - 40px);margin:14px auto 0;padding:8px 16px;font-size:13px;display:flex}.sound-hint:hover{transform:scale(1.04)}.loading-note{z-index:11;text-align:center;pointer-events:none;justify-items:center;gap:4px;min-width:224px;max-width:calc(100vw - 48px);padding:12px 18px;line-height:1.35;animation:.24s ease-out loading-pop;display:grid;position:absolute;top:46%;left:50%;transform:translate(-50%,-50%)}.loading-note small{color:var(--gray);font-size:11px;font-weight:700}.loading-dot{background:var(--flavor-accent);width:8px;height:8px;box-shadow:-14px 0 0 var(--progress-start), 14px 0 0 var(--progress-mid);border-radius:50%;margin-bottom:2px;animation:.9s ease-in-out infinite loading-bounce}@keyframes loading-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes loading-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.reset-btn{bottom:max(28px, calc(env(safe-area-inset-bottom) + 16px));z-index:10;cursor:pointer;padding:12px 24px;position:absolute;left:50%;transform:translate(-50%)}.reset-btn:hover{transform:translate(-50%)scale(1.05)}.sound-btn{top:max(20px, calc(env(safe-area-inset-top) + 8px));z-index:10;width:44px;height:44px;color:var(--gray);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;right:20px}.sound-btn.on{color:var(--flavor-accent)}.sound-btn:hover{transform:scale(1.08)}.language-control{top:max(20px, calc(env(safe-area-inset-top) + 8px));left:max(20px, calc(env(safe-area-inset-left) + 8px));z-index:12;box-sizing:border-box;height:44px;color:var(--flavor-deep);cursor:pointer;touch-action:manipulation;align-items:center;gap:5px;padding:0 10px;display:flex;position:absolute}.language-control select{width:76px;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;outline:0;font-size:12px}.language-control option{color:#25251f;background:#fff}.version-label{bottom:max(10px, calc(env(safe-area-inset-bottom) + 6px));left:max(14px, calc(env(safe-area-inset-left) + 10px));z-index:10;color:var(--flavor-deep);opacity:.28;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:10px;font-weight:600;position:absolute}.finish-toast{bottom:max(88px, calc(env(safe-area-inset-bottom) + 76px));box-sizing:border-box;z-index:10;text-align:center;pointer-events:none;width:max-content;max-width:calc(100vw - 36px);padding:10px 20px;animation:.45s cubic-bezier(.18,.9,.3,1.2) toast-up;position:absolute;left:50%;transform:translate(-50%)}@keyframes toast-up{0%{opacity:0;transform:translate(-50%)translateY(14px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.reset-btn.done{background:linear-gradient(135deg, var(--done-start), var(--done-end));color:#fff;box-shadow:0 4px 14px var(--done-shadow);animation:1.6s ease-in-out infinite pulse}@keyframes pulse{0%,to{transform:translate(-50%)scale(1)}50%{transform:translate(-50%)scale(1.07)}}@media (width<=520px){.hud{top:max(76px, calc(env(safe-area-inset-top) + 64px))}.language-control{left:max(14px, calc(env(safe-area-inset-left) + 8px))}.sound-btn{right:max(14px, calc(env(safe-area-inset-right) + 8px))}}