:root{--ink: #4e4677;--ink-2: #6a6199;--ink-4: #8a81b8;--cream: #fdf2e0;--cream-1: #fbe3c8;--cream-2: #edd6b0;--leaf: #5fbb6e;--leaf-1: #469156;--leaf-light: #86cc93;--sky-1: #8fb6f0;--yellow: #f7c85c;--font: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Microsoft JhengHei", "PingFang TC", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--cream);color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}.play-button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:min(100%,320px);padding:16px 40px;border:3px solid var(--ink);border-radius:22px;background:var(--leaf);color:var(--cream);font-size:30px;font-weight:800;box-shadow:0 4px #4e467773}.play-button:active{transform:translateY(3px);box-shadow:0 1px #4e467773}.play-button__stage{font-size:16px;font-weight:700}.plain-button{padding:10px 22px;border:2.5px solid var(--ink);border-radius:16px;background:var(--cream);font-size:18px;font-weight:700}.start{min-height:100%;display:flex;flex-direction:column;align-items:center;gap:26px;padding:28px 16px 36px;background:linear-gradient(180deg,var(--sky-1) 0,var(--sky-1) 170px,var(--cream) 170px)}.start__top{display:flex;align-items:center;gap:14px;min-width:0}.start__logo{flex:none}.start h1{margin:0;font-size:clamp(28px,6vw,40px)}.start__game{margin:2px 0 0;font-weight:700;color:var(--ink-2)}.stages{width:min(100%,880px)}.stages h2{font-size:18px;margin:0 0 10px;color:var(--ink-2)}.stages ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.chip{width:100%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:2.5px solid var(--cream-2);border-radius:16px;background:var(--cream);text-align:left}.chip--current{border-color:var(--leaf);box-shadow:0 3px 0 var(--leaf-1)}.chip__name{font-weight:800;font-size:17px}.chip__hint{font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.chip__stars{display:flex;gap:4px;margin-top:4px}.pip{width:12px;height:12px;border-radius:50%;border:2px solid var(--cream-2)}.pip--on{background:var(--yellow);border-color:var(--ink)}.start__foot a{color:var(--ink-2);font-weight:700}.playfield{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--sky-1)}.playfield__canvas{display:block;touch-action:none}.playfield__buttons{position:absolute;top:10px;right:12px;display:flex;gap:8px}.round-button{width:46px;height:46px;border:2.5px solid var(--ink);border-radius:50%;background:var(--cream);font-size:18px;font-weight:800}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#4e467759}.overlay--page{position:fixed;z-index:10}.overlay__card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px;border:3px solid var(--ink);border-radius:24px;background:var(--cream)}.result{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:36px 16px;text-align:center}.result h1{margin:0;font-size:clamp(26px,5.5vw,40px)}.result__stars{display:flex;gap:12px;align-items:center;min-height:90px}.result__slot{width:64px;height:64px;border-radius:50%;border:4px dashed var(--cream-2)}.result__star{animation:star-in .45s cubic-bezier(.34,1.56,.64,1) both}.result__star:nth-child(2){animation-delay:.2s}.result__star:nth-child(3){animation-delay:.4s}@keyframes star-in{0%{transform:scale(0)}to{transform:scale(1)}}.result__saved{display:flex;align-items:center;gap:8px;margin:0;font-size:22px;font-weight:800}.result__faces{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;max-width:640px}.face{width:64px;height:64px;border-radius:50%;overflow:hidden;border:3px solid var(--ink);background:var(--cream)}.face img{display:block;width:168%;margin-left:-34%;margin-top:-12%}.result__numbers{margin:4px 0 0;font-weight:700;color:var(--ink-2)}.result__pace{margin:0;color:var(--ink-2)}.result__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}.hub{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:var(--sky-1)}.hub__canvas{display:block;touch-action:manipulation}.hub__top{position:absolute;top:12px;left:16px;right:16px;display:flex;align-items:center;gap:12px;min-width:0;pointer-events:none}.hub__top>*{pointer-events:auto}.hub__logo{flex:none}.hub__titles{min-width:0;flex:1}.hub__titles h1{margin:0;font-size:clamp(22px,4vw,32px)}.hub__titles p{margin:0;font-weight:700;color:var(--ink-2)}.hub__sound{flex:none}.hub__bottom{position:absolute;left:16px;right:16px;bottom:14px;display:flex;flex-direction:column;align-items:center;gap:8px}.hub__links{display:flex;flex-wrap:wrap;justify-content:center;column-gap:18px;row-gap:2px;align-items:center}.hub__links>*{white-space:nowrap}.hub__links a,.link-button{border:0;background:none;padding:4px 2px;color:var(--ink);font-weight:700;font-size:16px;text-decoration:underline}.overlay .stages{width:min(100% - 32px,880px);max-height:calc(100% - 48px);overflow:auto;align-items:stretch}.stages__toggle{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:700;color:var(--ink-2)}.stages__toggle input{width:20px;height:20px;accent-color:var(--leaf)}.gate{width:46px;height:46px;padding:0;border:0;background:none;flex:none;touch-action:none}.gate svg{width:100%;height:100%;display:block}.sheet{align-items:stretch;width:min(100% - 32px,620px);max-height:calc(100% - 48px);overflow:auto;gap:10px}.sheet h2{margin:0}.sheet h3{margin:10px 0 0;font-size:17px}.sheet__row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700}.sheet .stages__toggle{justify-content:flex-start;margin:0}.sheet__hint,.sheet__practice{margin:0;color:var(--ink-2);font-size:14px}.segs{display:flex;gap:6px}.segs button{padding:6px 14px;border:2.5px solid var(--ink);border-radius:14px;background:var(--cream);font-weight:700}.segs button[aria-pressed=true]{background:var(--leaf);color:var(--cream)}.mini-kb{--k: min(31px, calc((min(100vw, 620px) - 104px) / var(--n, 11.5) - 3px));display:flex;flex-direction:column;gap:3px;overflow-x:auto;padding-bottom:4px}.mini-kb__row{display:flex;gap:3px}.mini-kb__key{flex:none;width:var(--k);height:calc(var(--k) + 5px);border:2px solid var(--cream-2);border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;background:var(--cream)}.mini-kb__key b{font-size:min(14px,calc(var(--k) * .45))}.mini-kb__key small{font-size:10px;color:var(--ink-2);min-height:10px}.mini-kb__key--1{background:var(--yellow);border-color:var(--ink-4)}.mini-kb__key--2{background:var(--leaf-light);border-color:var(--ink-4)}.mini-kb__key--3{background:var(--leaf);border-color:var(--ink)}.sheet__stars{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:700}.sheet__buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:8px}@media (max-width: 480px){.hub__titles h1{font-size:20px;line-height:1.15}.hub__titles p{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hub__logo{width:40px;height:40px}}