:root{--ink:#151515;--paper:#fff8ec;--pink:#ff8cc6;--mint:#7debc1;--butter:#ffe07a;--lilac:#c3b5ff;--sand:#e9c9a0;--tiger:#ff9a3c;--muted:#ede6d8;--red:#e8473c;--stage:#241e35;--grey-text:#4a4a4a;--shadow:4px 4px 0 var(--ink);--font-tc:"Noto Sans TC", "Noto Sans KR", system-ui, sans-serif;--font-ko:"Noto Sans KR", "Noto Sans TC", system-ui, sans-serif;--font-ko-display:"Black Han Sans", "Noto Sans KR", sans-serif;--font-pixel:"Silkscreen", ui-monospace, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--lilac);color:var(--ink);font-family:var(--font-tc);-webkit-text-size-adjust:100%;margin:0}body{background-image:radial-gradient(var(--ink) 1px, transparent 1px);background-size:18px 18px;min-height:100dvh}#root{justify-content:center;min-height:100dvh;display:flex}.app{background:var(--paper);flex-direction:column;width:100%;max-width:480px;min-height:100dvh;display:flex;position:relative}@media (width>=520px){.app{border-left:3px solid var(--ink);border-right:3px solid var(--ink)}}button,input{font:inherit;color:inherit}a{color:inherit}:focus-visible{outline:3px solid var(--ink);outline-offset:3px}h1,h2,h3,p{margin:0}.ko{font-family:var(--font-ko)}.ko-display{font-family:var(--font-ko-display);font-weight:400}.pixel{font-family:var(--font-pixel);letter-spacing:.5px;font-weight:700}.muted{color:var(--grey-text)}.small{font-size:12px;font-weight:700}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.btn{appearance:none;border:3px solid var(--ink);box-shadow:var(--shadow);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#fff;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:8px 14px;font-size:15px;font-weight:900;text-decoration:none;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:active:not(:disabled){box-shadow:0 0 0 var(--ink);transform:translate(4px,4px)}.btn:disabled{box-shadow:none;background:var(--muted);cursor:default;color:#555}.btn-primary{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--pink);min-height:56px;font-size:16px}.btn-block{width:100%}.btn-round{border-radius:999px}.btn-icon{width:44px;height:44px;min-height:44px;box-shadow:3px 3px 0 var(--ink);border-radius:10px;flex:none;padding:0}.btn-choice{text-align:right;flex-direction:column;align-items:flex-end;gap:2px;min-height:64px}.btn-choice .ko{font-size:17px;font-weight:900}.btn-choice .zh{font-size:12px;font-weight:700}.btn.is-right{background:var(--mint)}.btn.is-wrong{background:var(--pink)}.card{border:3px solid var(--ink);box-shadow:var(--shadow);background:#fff;border-radius:12px;padding:12px 14px}.tag{border:2.5px solid var(--ink);background:#fff;border-radius:6px;align-items:center;padding:2px 8px;font-size:11px;font-weight:900;display:inline-flex}.pill{border:3px solid var(--ink);background:#fff;border-radius:999px;align-items:center;gap:6px;padding:5px 10px;font-size:12px;display:inline-flex}.meter{border:3px solid var(--ink);background:#fff;border-radius:999px;height:16px;overflow:hidden}.meter>div{background:var(--mint);height:100%;transition:width .12s linear}.dashed{border-top:2px dashed var(--ink)}.screen{flex-direction:column;flex:1;display:flex}.stack{flex-direction:column;gap:12px;display:flex}.row{align-items:center;gap:10px;display:flex}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.pad{padding:16px}.spacer{flex:1}.stage-header{border-bottom:3px solid var(--ink);z-index:5;align-items:center;gap:10px;padding:12px 16px;display:flex;position:sticky;top:0}.stage-header .title{flex-direction:column;flex:1;min-width:0;display:flex}.skill-badge{border:3px solid var(--ink);background:#fff;border-radius:8px;padding:4px 10px;font-size:18px;font-weight:900}.scene{border-bottom:3px solid var(--ink);flex:none;position:relative;overflow:hidden}.bubble{border:3px solid var(--ink);box-shadow:var(--shadow);background:#fff;border-radius:12px;padding:18px 14px 12px;position:relative}.bubble .name{border:3px solid var(--ink);background:var(--pink);border-radius:6px;padding:2px 10px;font-size:12px;font-weight:900;position:absolute;top:-14px;left:12px}@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.05)}to{transform:scale(1)}}.pop{animation:.3s ease-out both pop}@keyframes dance{0%,to{transform:rotate(-8deg)translateY(0)}50%{transform:rotate(8deg)translateY(-6px)}}.dance{transform-origin:50% 90%;animation:.5s ease-in-out infinite dance}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.shake{animation:.25s ease-in-out 2 shake}@keyframes wave{0%,to{transform:rotate(0)}50%{transform:rotate(-24deg)}}.wave{transform-origin:50% 100%;transform-box:fill-box;animation:.4s ease-in-out infinite wave}@keyframes pulse{0%,to{box-shadow:0 0 #15151566}50%{box-shadow:0 0 0 8px #15151500}}.listening{animation:1s ease-in-out infinite pulse}@media (prefers-reduced-motion:reduce){.pop,.dance,.shake,.wave,.listening{animation:none}.btn{transition:none}}