@import"https://fonts.googleapis.com/css2?family=Nunito:wght@600;800&display=swap";:root{--blue: #bfe6ff;--blue-strong: #8fd4ff;--pink: #ffc7df;--orange: #ffd7a3;--ink: #2c3e50;--bg: #f7fcff}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,Hiragino Sans,Noto Sans JP,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg),#ffffff)}.container{max-width:960px;margin:0 auto;padding:20px}h1,h2{font-weight:800;letter-spacing:.5px}.tagline{color:#567;margin-top:-6px}.btn{padding:12px 18px;border-radius:999px;border:none;background:#e9f6ff;color:#134;font-weight:700;cursor:pointer;margin:4px}.btn:hover{filter:brightness(.98)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--blue)}.btn.start{background:var(--orange)}.btn.stop{background:var(--pink)}.btn.reset{background:#e8ecf1}.btn.danger{background:#ffd1d1}.btn:disabled{opacity:.6;cursor:not-allowed}.home header{text-align:center}.toolbar{text-align:center;margin:12px 0 20px}.list{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 6px 18px #0000000f}.card-title{font-weight:800}.card-meta{color:#567;margin:8px 0 10px}.card-actions{display:flex;gap:8px}.empty{color:#789;text-align:center;padding:16px}.panel{background:#fff;border-radius:20px;padding:16px;box-shadow:0 8px 24px #00000014}.form{display:grid;gap:12px}.form label{display:grid;gap:6px;font-weight:700}.form input{padding:12px 14px;border:2px solid #e3eef6;border-radius:12px;font-size:16px}.form-actions{display:flex;gap:8px;margin-top:8px}.audio-hint{margin-top:10px;background:#fff7d6;color:#5b4700;border:2px solid #ffeaa3;border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}.runner{display:grid;justify-items:center;gap:10px}.counter{text-align:center;margin:8px 0 6px}.counter .label{color:#345;font-weight:700}.counter .value{font-size:64px;font-weight:800;color:#123;background:var(--blue);border-radius:16px;padding:8px 22px;box-shadow:inset 0 -6px #ffffffb3}.meta{color:#567;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.controls{display:flex;gap:8px}.timebox{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}.timebox>div{background:#fff;border:2px solid #e3eef6;border-radius:14px;padding:10px;text-align:center}.tlabel{color:#456;font-weight:700;font-size:12px;opacity:.9}.tvalue{font-weight:800;font-size:20px;margin-top:4px;color:#123}.toko-wrap{position:relative;width:220px;height:160px;margin:10px 0}.drop{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);width:80px;height:100px;background:var(--blue-strong);border-radius:50% 50% 60% 60%/60% 60% 40% 40%;box-shadow:inset 0 -10px #ffffffa6,0 10px 20px #00000014}.eyes{position:absolute;top:38px;left:50%;width:46px;display:flex;justify-content:space-between;transform:translate(-50%)}.eyes span{width:8px;height:8px;background:#123;border-radius:50%}.legs{position:absolute;left:50%;bottom:26px;transform:translate(-50%);width:60px;display:flex;justify-content:space-between}.leg{width:10px;height:20px;background:#89bde0;border-radius:8px;transform-origin:top center}.walking .leg.left{animation:step-left .6s infinite ease-in-out}.walking .leg.right{animation:step-right .6s infinite ease-in-out}@keyframes step-left{0%,to{transform:rotate(10deg)}50%{transform:rotate(-18deg)}}@keyframes step-right{0%,to{transform:rotate(-10deg)}50%{transform:rotate(18deg)}}.footsteps{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:14px;justify-content:center;opacity:.8}.footsteps span{width:10px;height:14px;background:#cfe9fb;border-radius:50% 50% 40% 40%;transform:rotate(10deg);opacity:0}.walking .footsteps span{animation:footprint 1.2s linear infinite}.walking .footsteps span:nth-child(2){animation-delay:.2s}.walking .footsteps span:nth-child(3){animation-delay:.4s}.walking .footsteps span:nth-child(4){animation-delay:.6s}@keyframes footprint{0%{transform:translate(-40px) translateY(0) rotate(10deg);opacity:0}10%{opacity:1}80%{opacity:1}to{transform:translate(40px) translateY(-6px) rotate(10deg);opacity:0}}@media (max-width: 600px){.container{padding:16px}.counter .value{font-size:54px}.toko-wrap{transform:scale(.9)}}