@import"https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;700&family=Outfit:wght@300;400;500;600;700&display=swap";.font-gothic{font-family:Noto Sans JP,sans-serif!important}.font-mincho{font-family:"Noto Serif JP",serif!important}.font-handwriting{font-family:Klee One,sans-serif!important}:root{--bg-color: #0f0f15;--bg-gradient: radial-gradient(circle at 50% 0%, #1a1b26 0%, #0f0f15 100%);--surface-color: rgba(30, 30, 46, .65);--surface-hover: rgba(45, 47, 72, .8);--text-color: #cdd6f4;--subtext: #a6adc8;--primary-color: #89b4fa;--success-color: #a6e3a1;--warning-color: #f9e2af;--error-color: #f38ba8;--border-color: rgba(255, 255, 255, .08);--shadow-color: rgba(0, 0, 0, .4);--badge-bg: rgba(255, 255, 255, .08);--table-row-hover: rgba(255, 255, 255, .04);--hira-color: #f5c2e7;--kata-color: #89b4fa;--hira-highlight: rgba(245, 194, 231, .06);--kata-highlight: rgba(137, 180, 250, .06);--primary-btn-text: #11111b;--btn-single-rk-bg: #cba6f7;--btn-single-rk-text: #11111b;--btn-word-kr-bg: #a6e3a1;--btn-word-kr-text: #11111b;--btn-word-rk-bg: #f9e2af;--btn-word-rk-text: #11111b;--check-color: #11111b;--dropdown-bg: rgba(30, 30, 46, .95)}html[data-theme=light]{--bg-color: #edf0f5;--bg-gradient: linear-gradient(180deg, #f5f7fb 0%, #e2e6f0 100%);--surface-color: rgba(255, 255, 255, .8);--surface-hover: rgba(235, 240, 250, .9);--text-color: #4c4f69;--subtext: #6c6f85;--primary-color: #1e66f5;--success-color: #40a02b;--warning-color: #df8e1d;--error-color: #d20f39;--border-color: rgba(0, 0, 0, .08);--shadow-color: rgba(0, 0, 0, .06);--badge-bg: rgba(0, 0, 0, .05);--table-row-hover: rgba(0, 0, 0, .03);--hira-color: #c2185b;--kata-color: #1e66f5;--hira-highlight: rgba(194, 24, 91, .04);--kata-highlight: rgba(30, 102, 245, .04);--primary-btn-text: #ffffff;--btn-single-rk-bg: #8839ef;--btn-single-rk-text: #ffffff;--btn-word-kr-bg: #40a02b;--btn-word-kr-text: #ffffff;--btn-word-rk-bg: #df8e1d;--btn-word-rk-text: #ffffff;--check-color: #ffffff;--dropdown-bg: rgba(255, 255, 255, .98)}html{background-color:var(--bg-color)}body{font-family:Outfit,Noto Sans JP,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-color);color:var(--text-color);padding:0;margin:0;min-height:100vh;box-sizing:border-box}#root{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);isolation:isolate}.blob-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 80px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 80px),transparent 100%)}.blob-glow{position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--bg-gradient)}.blob{position:absolute;border-radius:50%;filter:blur(65px);opacity:.18;will-change:transform}html[data-theme=light] .blob{opacity:.07}.blob-1{width:260px;height:260px;background:radial-gradient(circle,#f4511e 0%,#e64a19 55%,transparent 80%);top:-80px;left:8%;animation:blobFloat1 19s ease-in-out infinite}.blob-2{width:200px;height:200px;background:radial-gradient(circle,#ec407a 0%,#e91e63 55%,transparent 80%);top:-50px;right:12%;animation:blobFloat2 14s ease-in-out infinite}.blob-3{width:170px;height:190px;background:radial-gradient(circle,#ff7043 0%,#e64a19 55%,transparent 80%);top:38%;left:-55px;animation:blobFloat3 21s ease-in-out infinite}.blob-4{width:230px;height:230px;background:radial-gradient(circle,#e53935 0%,#c62828 55%,transparent 80%);bottom:22%;right:-45px;animation:blobFloat4 16s ease-in-out infinite}.blob-5{width:150px;height:150px;background:radial-gradient(circle,#ff5722 0%,#ec407a 55%,transparent 80%);bottom:-40px;left:38%;animation:blobFloat5 23s ease-in-out infinite}@keyframes blobFloat1{0%,to{transform:translate(0) scale(1)}25%{transform:translate(55px,75px) scale(1.08)}50%{transform:translate(-25px,45px) scale(.93)}75%{transform:translate(75px,-15px) scale(1.05)}}@keyframes blobFloat2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-65px,55px) scale(1.11)}66%{transform:translate(35px,30px) scale(.9)}}@keyframes blobFloat3{0%,to{transform:translate(0) scale(1)}20%{transform:translate(75px,-25px) scale(1.06)}40%{transform:translate(35px,95px) scale(.94)}60%{transform:translate(95px,65px) scale(1.09)}80%{transform:translate(45px,-10px) scale(1.02)}}@keyframes blobFloat4{0%,to{transform:translate(0) scale(1)}30%{transform:translate(-55px,-75px) scale(1.07)}60%{transform:translate(30px,-45px) scale(.92)}}@keyframes blobFloat5{0%,to{transform:translate(0) scale(1)}25%{transform:translate(-75px,-55px) scale(1.1)}50%{transform:translate(55px,-75px) scale(.93)}75%{transform:translate(-35px,-30px) scale(1.06)}}.header-bar{position:relative;z-index:10;width:95%;max-width:1080px;display:flex;justify-content:space-between;align-items:center;padding:15px 30px;margin:20px auto 25px;background-color:var(--surface-color);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:16px;border:1px solid var(--border-color);box-shadow:0 4px 20px var(--shadow-color);box-sizing:border-box}.logo-container{display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer}.logo-img{height:54px;width:54px;object-fit:contain;border-radius:12px;transition:transform .4s cubic-bezier(.175,.885,.32,1.275)}.logo-container:hover .logo-img{transform:rotate(10deg) scale(1.1)}.logo-text{font-size:1.45rem;font-weight:700;letter-spacing:-.5px;background:linear-gradient(135deg,var(--primary-color),var(--hira-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-family:Outfit,sans-serif;margin:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.header-controls{display:flex;align-items:center;gap:12px}.container{position:relative;background-color:var(--surface-color);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:30px;border-radius:24px;border:1px solid var(--border-color);box-shadow:0 12px 40px var(--shadow-color);max-width:1080px;width:95%;box-sizing:border-box;transition:max-width .4s cubic-bezier(.4,0,.2,1);margin:0 auto 40px}.config-section{display:flex;flex-direction:column;gap:15px;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--subtext);border-radius:6px;background-color:transparent;outline:none;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);box-sizing:border-box}input[type=checkbox]:hover{border-color:var(--primary-color);transform:scale(1.08)}input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px #89b4fa66}input[type=checkbox]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.hira-table input[type=checkbox]:checked{background-color:var(--hira-color);border-color:var(--hira-color)}.kata-table input[type=checkbox]:checked{background-color:var(--kata-color);border-color:var(--kata-color)}#selectAllHira:checked{background-color:var(--hira-color);border-color:var(--hira-color)}#selectAllKata:checked{background-color:var(--kata-color);border-color:var(--kata-color)}input[type=checkbox]:checked:after{content:"";display:block;width:5px;height:10px;border:solid var(--check-color);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}.start-modes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.mode-card{background-color:var(--surface-hover);border:1px solid var(--border-color);border-radius:14px;padding:18px 15px;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;outline:none;box-sizing:border-box;min-height:95px}.mode-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px var(--shadow-color);border-color:var(--mode-accent)!important}.mode-card .mode-badge{font-size:.68rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(--subtext);transition:color .2s}.mode-card:hover .mode-badge{color:var(--mode-accent)}.mode-card .mode-title{font-size:.95rem;font-weight:600;color:var(--text-color)}.mode-card.single-kr{--mode-accent: var(--primary-color)}.mode-card.single-rk{--mode-accent: var(--btn-single-rk-bg)}.mode-card.word-kr{--mode-accent: var(--btn-word-kr-bg)}.mode-card.word-rk{--mode-accent: var(--btn-word-rk-bg)}.tables-container{display:flex;gap:25px;margin-bottom:12px;width:100%}.table-wrapper{flex:1;min-width:0;background-color:#ffffff04;border:1px solid var(--border-color);border-radius:18px;padding:20px;box-shadow:inset 0 2px 8px #0000000d}.table-wrapper h4{margin-top:0;margin-bottom:18px;text-align:center;font-size:1.25rem;font-weight:600;display:flex;justify-content:center;align-items:center;gap:8px}.table-wrapper h4.hira-title{color:var(--hira-color)}.table-wrapper h4.kata-title{color:var(--kata-color)}.count-badge{font-size:.78rem;padding:2px 8px;border-radius:20px;font-weight:700;letter-spacing:0}.hira-title .count-badge{background-color:var(--hira-highlight);color:var(--hira-color);border:1px solid rgba(245,194,231,.2)}.kata-title .count-badge{background-color:var(--kata-highlight);color:var(--kata-color);border:1px solid rgba(137,180,250,.2)}table.kana-table{width:100%;border-collapse:collapse}table.kana-table th,table.kana-table td{padding:10px 6px;text-align:center;border-bottom:1px solid var(--border-color)}table.kana-table th{color:var(--subtext);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}table.kana-table tr{cursor:pointer;transition:all .2s ease}table.kana-table td{transition:background-color .2s ease,border-color .2s ease,color .2s ease}table.kana-table tr:hover td{background-color:var(--table-row-hover)}table.kana-table.hira-table tr.selected-row td{background-color:var(--hira-highlight)}table.kana-table.kata-table tr.selected-row td{background-color:var(--kata-highlight)}table.kana-table.hira-table tr.selected-row td:first-child{border-left:3px solid var(--hira-color)}table.kana-table.kata-table tr.selected-row td:first-child{border-left:3px solid var(--kata-color)}table.kana-table td.group-label{color:var(--text-color);font-weight:700;text-align:left;padding-left:10px;font-size:.95rem;border-left:3px solid transparent}table.kana-table.hira-table td:not(.group-label){color:var(--hira-color);font-size:1.2rem;font-weight:500}table.kana-table.kata-table td:not(.group-label){color:var(--kata-color);font-size:1.2rem;font-weight:500}table.kana-table td .romaji-text{display:block;font-size:.72rem;color:var(--subtext);opacity:.75;margin-top:3px;font-weight:400}.quiz-section{text-align:center;animation:fadeIn .3s ease-out}.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.btn-small{background-color:var(--surface-hover);color:var(--text-color);border:1px solid var(--border-color);padding:7px 15px;border-radius:8px;cursor:pointer;font-size:.88rem;font-weight:500;transition:all .2s ease}.alphabet-badge{font-size:.78rem;padding:4px 10px;border-radius:20px;font-weight:600;background-color:var(--badge-bg);color:var(--subtext);border:1px solid var(--border-color);letter-spacing:.5px}.btn-small:hover{background-color:var(--primary-color);color:var(--primary-btn-text);transform:translate(-2px)}.hint-text{color:var(--warning-color);font-weight:500;font-size:.95rem}.hint-text:not(:empty){min-height:24px;margin-bottom:15px}.kana-display{font-size:7.5rem;margin:-25px 0 25px;font-weight:400;line-height:1;text-shadow:0 0 30px rgba(255,255,255,.05)}.display-kanji{font-size:.85em;opacity:.85;font-weight:500;color:var(--primary-color)}.word-translation{font-size:1.25rem;color:var(--subtext);margin:-8px 0 25px;font-weight:500;text-align:center;letter-spacing:.5px;opacity:.85}.controls{display:flex;justify-content:center;gap:12px;margin-bottom:20px}input[type=text]{font-size:1.4rem;padding:10px 18px;border-radius:12px;border:2px solid var(--border-color);background-color:#00000026;color:var(--text-color);text-align:center;width:180px;outline:none;transition:all .2s ease;font-weight:500}input[type=text]:focus{border-color:var(--primary-color);box-shadow:0 0 15px #89b4fa33}button.primary{background-color:var(--primary-color);color:var(--primary-btn-text);border:none;padding:11px 24px;font-size:1.05rem;border-radius:12px;cursor:pointer;font-weight:600;transition:all .2s ease;box-shadow:0 4px 12px #89b4fa33}button.primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px #89b4fa59}button.secondary{background-color:var(--surface-hover);color:var(--text-color);border:1px solid var(--border-color);padding:11px 20px;font-size:1rem;border-radius:12px;cursor:pointer;transition:all .2s ease}button.secondary:hover{background-color:var(--surface-color);border-color:var(--subtext)}.feedback{margin-top:20px;font-size:1.25rem;height:28px;font-weight:600}.stats{margin-top:25px;font-size:1rem;color:var(--subtext);border-top:1px solid var(--border-color);padding-top:20px;font-weight:500}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;max-width:440px;margin:0 auto 20px}.option-btn{position:relative;background-color:var(--surface-hover);color:var(--text-color);border:1px solid var(--border-color);padding:24px 15px 15px;font-size:2.1rem;font-weight:400;border-radius:14px;cursor:pointer;transition:all .2s cubic-bezier(.25,.8,.25,1);display:flex;align-items:center;justify-content:center;min-height:90px;box-sizing:border-box}.option-badge{position:absolute;top:8px;left:10px;font-size:.7rem;color:var(--subtext);background-color:var(--badge-bg);padding:2px 6px;border-radius:6px;font-weight:600;pointer-events:none}.option-btn:hover:not(:disabled){background-color:var(--surface-color);border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-color)}.option-btn.correct{background-color:#a6e3a126!important;border-color:var(--success-color)!important;color:var(--success-color)!important;box-shadow:0 0 15px #a6e3a11a!important}.option-btn.wrong{background-color:#f38ba826!important;border-color:var(--error-color)!important;color:var(--error-color)!important;box-shadow:0 0 15px #f38ba81a!important}.theme-toggle-btn,.dropdown-trigger,.reset-btn{background:none;border:1px solid transparent;color:var(--subtext);width:38px;height:38px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:all .2s cubic-bezier(.4,0,.2,1);outline:none;box-sizing:border-box}.theme-toggle-btn:hover,.dropdown-trigger:hover,.reset-btn:hover{background-color:var(--surface-hover);border-color:var(--border-color);color:var(--text-color);transform:translateY(-1px)}.custom-dropdown{position:relative}.dropdown-menu{position:absolute;top:46px;right:0;background-color:var(--dropdown-bg);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid var(--border-color);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:160px;box-shadow:0 10px 25px var(--shadow-color);animation:fadeInScale .18s cubic-bezier(.34,1.56,.64,1);z-index:100}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}.dropdown-item{background:none;border:none;color:var(--text-color);padding:8px 12px;font-size:.9rem;font-weight:500;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;transition:background-color .15s,color .15s;text-align:left}.dropdown-item:hover{background-color:var(--surface-hover)}.dropdown-item.active{background-color:#89b4fa26;color:var(--primary-color)}.dropdown-item .flag{font-size:1.1rem;display:inline-block;line-height:1}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box}.main-content.quiz-layout{justify-content:center}.main-content.quiz-layout .container{margin:0 auto}.footer{margin-top:auto;padding-top:20px;margin-bottom:10px;font-size:.88rem;color:var(--subtext);text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:6px}.footer-group{display:inline-flex;align-items:center;white-space:nowrap}.footer-group:not(.brand-text),.footer-version,.brand-muted,.footer-group:not(:last-child):after,.credit-divider,.footer a{opacity:.65;transition:opacity .2s ease}.footer:hover .footer-group:not(.brand-text),.footer:hover .footer-version,.footer:hover .brand-muted,.footer:hover .footer-group:not(:last-child):after,.footer:hover .credit-divider,.footer:hover .footer a{opacity:1}.footer-group:not(:last-child):after{content:"•";margin:0 10px}.credit-divider{margin:0 10px;display:inline-block}.footer a{color:var(--primary-color);text-decoration:none;font-weight:600}.footer a:hover{text-decoration:underline}@media (max-width: 992px){.start-modes-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){body{padding:0}.header-bar{padding:12px 20px;margin:10px auto 15px;border-radius:12px}.logo-img{height:32px;width:32px}.logo-text{font-size:1.25rem}.container{padding:16px;border-radius:18px;margin-bottom:25px}.tables-container{flex-direction:column;gap:20px}.table-wrapper{padding:10px;border-radius:14px}table.kana-table th,table.kana-table td{padding:6px 3px}table.kana-table.hira-table td:not(.group-label),table.kana-table.kata-table td:not(.group-label){font-size:1.05rem}table.kana-table td.group-label{padding-left:6px;font-size:.85rem}.mode-card{padding:14px 10px;min-height:85px}.mode-card .mode-title{font-size:.88rem}.kana-display{font-size:5.5rem;margin:-35px 0 20px}.display-kanji{font-size:.75em}.word-translation{font-size:1.1rem;margin-top:-8px}input[type=text]{font-size:1.25rem;padding:8px 14px;width:150px}}@media (max-width: 480px){.header-bar{padding:10px 12px}.theme-toggle-btn,.dropdown-trigger,.reset-btn{width:32px;height:32px;font-size:1rem}.container{padding:12px 10px}.table-wrapper{padding:8px}table.kana-table th,table.kana-table td{padding:5px 2px}table.kana-table td.group-label{padding-left:4px;font-size:.8rem}.start-modes-grid{grid-template-columns:1fr;gap:10px}.options-grid{grid-template-columns:1fr;max-width:300px}.option-btn{padding:20px 10px 10px;font-size:1.7rem;min-height:75px}}.hero-section{text-align:center;margin-bottom:8px;display:flex;flex-direction:column;align-items:center}.hero-banner{width:100%;max-width:810px;aspect-ratio:810 / 537;object-fit:cover;border-radius:16px;border:1px solid var(--border-color);box-shadow:0 8px 25px var(--shadow-color);transition:transform .3s ease;margin:0 auto 20px}.hero-banner:hover{transform:scale(1.005)}.hero-title{font-size:2.4rem;font-weight:700;margin:0 0 4px;font-family:Outfit,sans-serif}.hero-subtitle{font-size:.92rem;color:var(--subtext);text-transform:uppercase;letter-spacing:2px;font-weight:600;margin:0 0 15px}.hero-desc{font-size:.98rem;color:var(--subtext);max-width:760px;line-height:1.6;margin:0}.hero-divider{width:85%;max-width:680px;height:1px;border:none;background:linear-gradient(90deg,transparent,var(--border-color) 20%,var(--border-color) 80%,transparent);margin-top:25px;margin-bottom:10px;opacity:.8}.brand-highlight{background:linear-gradient(135deg,#e64a19,#ec407a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}.brand-muted{color:var(--subtext);opacity:.75;display:inline-block}html[data-theme=light] .brand-muted{opacity:.85}.virtual-keyboard{margin-top:25px;padding:16px;background-color:#00000026;border:1px solid var(--border-color);border-radius:18px;display:flex;flex-direction:column;gap:8px;animation:fadeIn .25s ease-out;box-shadow:inset 0 2px 10px #00000026;width:100%;box-sizing:border-box}.keyboard-row{display:flex;justify-content:center;gap:8px;flex-wrap:nowrap}.keyboard-key{background-color:var(--surface-hover);color:var(--text-color);border:1px solid var(--border-color);border-radius:10px;padding:10px;min-width:46px;height:46px;font-size:1.2rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px var(--shadow-color);-webkit-user-select:none;user-select:none;outline:none;box-sizing:border-box}.keyboard-key:hover{transform:translateY(-2px);background-color:var(--surface-color);border-color:var(--primary-color);box-shadow:0 4px 8px var(--shadow-color)}.keyboard-key:active{transform:translateY(1px);box-shadow:0 1px 2px var(--shadow-color)}.keyboard-key.control{font-size:.95rem;font-weight:700;min-width:65px;background-color:#ffffff0d}.keyboard-key.control.backspace{border-color:var(--error-color);color:var(--error-color)}.keyboard-key.control.backspace:hover{background-color:#f38ba81f}.keyboard-key.control.clear{border-color:var(--warning-color);color:var(--warning-color)}.keyboard-key.control.clear:hover{background-color:#f9e2af1f}@media (max-width: 768px){.hero-banner{border-radius:12px}.hero-title{font-size:1.8rem;margin-bottom:2px}.hero-subtitle{font-size:.82rem;margin-top:0;margin-bottom:12px}.hero-desc{font-size:.9rem;padding:0 10px}.virtual-keyboard{padding:10px;gap:6px;border-radius:14px}.keyboard-key{min-width:38px;height:38px;font-size:1.05rem;border-radius:8px;padding:6px}.keyboard-key.control{min-width:52px;font-size:.85rem}}@media (max-width: 480px){.hero-banner{border-radius:10px}.hero-title{font-size:1.5rem;margin-bottom:1px}.hero-subtitle{font-size:.76rem;margin-top:0;margin-bottom:10px}.footer{padding-top:10px;padding-left:12px;padding-right:12px;margin-bottom:8px;font-size:.75rem;flex-direction:column;row-gap:4px}.footer-group:not(:last-child):after{display:none}.hero-desc{font-size:.82rem}.virtual-keyboard{padding:6px;gap:4px;border-radius:10px}.keyboard-key{min-width:32px;height:32px;font-size:.92rem;border-radius:6px;padding:4px}.keyboard-key.control{min-width:44px;font-size:.72rem}}.unlock-progress-container{position:relative;background:rgba(0,0,0,.12);border:1px solid var(--border-color);border-radius:12px;padding:12px 16px;margin-bottom:12px;box-sizing:border-box;box-shadow:inset 0 2px 8px #0000001a;display:flex;flex-direction:column;gap:6px}html[data-theme=light] .unlock-progress-container{background:rgba(255,255,255,.5);box-shadow:inset 0 2px 8px #00000005}.unlock-progress-header{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600}.unlock-label{color:var(--primary-color);letter-spacing:.5px}.accuracy-label{color:var(--subtext)}.unlock-progress-bar-wrapper{background:rgba(255,255,255,.05);height:8px;border-radius:4px;overflow:hidden;width:100%}html[data-theme=light] .unlock-progress-bar-wrapper{background:rgba(0,0,0,.05)}.unlock-progress-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--primary-color),var(--hira-color));box-shadow:0 0 8px #89b4fa80;transition:width .4s cubic-bezier(.4,0,.2,1)}.unlock-progress-bar-fill.warning-fill{background:linear-gradient(90deg,var(--error-color),var(--warning-color));box-shadow:0 0 8px #f38ba880}.unlock-progress-footer{display:flex;justify-content:flex-start;align-items:center}.accuracy-warning-text{color:var(--error-color);font-size:.78rem;font-weight:600}.progress-detail-text{color:var(--subtext);font-size:.78rem;opacity:.8}@keyframes confetti-shoot{0%{transform:translate(0) rotate(0);opacity:1}75%{opacity:.9}to{transform:translate(var(--tx),var(--ty)) rotate(var(--rot));opacity:0}}.unlock-progress-bar-fill.level-up{width:100%!important;background:linear-gradient(90deg,var(--success-color),#2ed573)!important;box-shadow:0 0 15px var(--success-color)!important}.unlock-progress-bar-wrapper.level-up{animation:bar-level-up .7s cubic-bezier(.25,.8,.25,1) forwards}@keyframes bar-level-up{0%{transform:translate(0)}15%,35%,55%,75%{transform:translate(-1.5px)}25%,45%,65%,85%{transform:translate(1.5px)}to{transform:translate(0)}}