@import"https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;900&family=Outfit:wght@400;500;600&display=swap";.icon-wrapper{display:inline-flex;align-items:center;justify-content:center}.icon-svg{display:inline-block;color:currentColor}.icon-loading{transform-origin:center;animation:spin 1.2s cubic-bezier(.4,.15,.6,.85) infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.icon-circle{stroke-dasharray:63;stroke-dashoffset:0;transform-origin:center;animation:circle-draw 1.5s ease-in-out infinite}@keyframes circle-draw{0%{stroke-dashoffset:63}50%{stroke-dashoffset:0}to{stroke-dashoffset:63}}.toolbar{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:100;background:var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:24px;box-shadow:var(--card-shadow);padding:8px;border:1px solid var(--border-color)}.toolbar-container{display:flex;flex-direction:column;gap:2px}.toolbar-group{display:flex;flex-direction:column;gap:4px}.toolbar-group+.toolbar-group{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color)}.toolbar-button-wrapper{position:relative}.toolbar-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:16px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .2s;padding:0}.toolbar-button:hover{background:var(--bg-secondary);color:var(--text-primary)}.toolbar-button.active{background:#be123c;color:#fff}.toolbar-button svg{width:18px;height:18px}[data-theme=dark] .toolbar{background:var(--gray-dark-3);border-color:var(--gray-dark-7);box-shadow:0 4px 12px #0006}[data-theme=dark] .toolbar-button{color:var(--gray-dark-12)}[data-theme=dark] .toolbar-button:hover{background:var(--gray-dark-5);color:#fff}[data-theme=dark] .toolbar-button.active{background:#be123c;color:#fff}[data-theme=dark] .toolbar-group+.toolbar-group{border-top-color:var(--gray-dark-7)}[data-theme=dark] .toolbar-tooltip{background:var(--gray-dark-3);border-color:var(--gray-dark-7);box-shadow:0 4px 12px #00000080}[data-theme=dark] .tooltip-title{color:var(--gray-dark-12)}[data-theme=dark] .tooltip-description{color:var(--gray-dark-11)}.toolbar-tooltip{position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--card-shadow);padding:16px;width:200px;z-index:1100;pointer-events:none;animation:tooltipSlideIn .2s ease-out}.tooltip-title{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:4px}.tooltip-description{font-size:12px;color:var(--text-secondary);line-height:1.4}@media (max-width: 768px){.toolbar{position:fixed;top:auto;left:50%;bottom:16px;transform:translate(-50%);padding:6px;border-radius:12px;background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);box-shadow:var(--card-shadow);z-index:100}.toolbar-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .2s;padding:0}.toolbar-button:hover{background:var(--bg-hover)}.toolbar-button.active{background:#be123c;color:#fff}.toolbar-container,.toolbar-group{display:flex;flex-direction:row;align-items:center;gap:2px}.toolbar-separator{width:1px;height:16px;background:#00000014;margin:0 2px}[data-theme=dark] .toolbar-separator{background:#ffffff14}.toolbar-button svg{width:16px;height:16px}.toolbar-tooltip{bottom:calc(100% + 16px);left:50%;top:auto;transform:translate(-50%)}@keyframes tooltipSlideIn{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}[data-theme=dark] .toolbar{background:#000c}[data-theme=dark] .toolbar-group+.toolbar-group:before{background:#ffffff14}.size-slider-backdrop,.service-dropdown-backdrop{display:none}.size-slider-menu,.tooltip-style-dropdown{position:fixed;left:0;right:0;bottom:80px;margin:0 16px;background:var(--card-bg);border-radius:12px;box-shadow:var(--card-shadow);border:1px solid var(--border-color);z-index:1051;animation:mobileSlideIn .2s ease-out}.size-slider-menu{padding:16px}.tooltip-style-dropdown{padding:0;overflow:hidden}@keyframes mobileSlideIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@supports (padding-bottom: env(safe-area-inset-bottom)){.size-slider-menu,.tooltip-style-dropdown{bottom:calc(80px + env(safe-area-inset-bottom))}}[data-theme=dark] .size-slider-menu,[data-theme=dark] .tooltip-style-dropdown{background:var(--gray-dark-2);border-color:var(--gray-dark-6)}.toolbar.hidden{transform:translate(-50%) translateY(calc(100% + 32px));opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.4,0,.2,1) .1s,opacity .3s ease .1s}.toolbar{transition:transform .4s cubic-bezier(.4,0,.2,1) .15s,opacity .3s ease .15s}}@supports (padding-bottom: env(safe-area-inset-bottom)){@media (max-width: 768px){.toolbar{bottom:max(16px,env(safe-area-inset-bottom))}}}.label{color:var(--gray-12);font-size:14px;-webkit-user-select:none;user-select:none}.switch-root{width:42px;height:25px;background-color:var(--gray-6);border-radius:9999px;position:relative;box-shadow:0 2px 10px var(--black-a7);-webkit-tap-highlight-color:rgba(0,0,0,0)}.switch-root[data-state=checked]{background-color:var(--blue-9)}.switch-thumb{display:block;width:21px;height:21px;background-color:#fff;border-radius:9999px;box-shadow:0 2px 2px var(--black-a7);transition:transform .1s;transform:translate(2px);will-change:transform}.switch-thumb[data-state=checked]{transform:translate(19px)}.slider-root{position:relative;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none;width:120px;height:20px}.slider-track{background-color:var(--gray-6);position:relative;flex-grow:1;border-radius:9999px;height:3px}.slider-range{position:absolute;background-color:var(--blue-9);border-radius:9999px;height:100%}.slider-thumb{display:block;width:16px;height:16px;background-color:#fff;box-shadow:0 2px 10px var(--black-a7);border-radius:10px}.slider-thumb:hover{background-color:var(--gray-2)}.slider-thumb:focus{outline:none;box-shadow:0 0 0 2px var(--blue-7)}.font-size-menu{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#fff;border-radius:8px;padding:4px;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;gap:2px;z-index:101}.font-size-option{padding:6px 12px;border:none;background:transparent;color:#666;cursor:pointer;border-radius:4px;font-size:14px;white-space:nowrap;text-align:left;width:100%}.font-size-option:hover{background:#dcfce780}.font-size-option.active{background:#10b981;color:#fff}.text-size-button{background-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M9 11H3a1 1 0 0 0 0 2h2v5a1 1 0 0 0 2 0v-5h2a1 1 0 0 0 0-2m12-6H9a1 1 0 0 0 0 2h5v11a1 1 0 0 0 2 0V7h5a1 1 0 0 0 0-2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:20px}.size-slider-menu{position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);background:var(--card-bg);border-radius:8px;box-shadow:var(--card-shadow);padding:12px;width:220px;z-index:100;border:1px solid var(--border-color)}.size-slider-header{font-size:14px;font-weight:500;color:var(--text-secondary);margin-bottom:12px;text-align:center}.size-slider-container{padding:0 8px}.size-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:linear-gradient(to right,#be123c var(--value),var(--bg-secondary) var(--value));border-radius:2px;outline:none}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #be123c;cursor:pointer;box-shadow:0 2px 4px #0000001a}.size-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #be123c;cursor:pointer;box-shadow:0 2px 4px #0000001a}@keyframes fadeInUp{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}[data-theme=dark] .size-slider{background:linear-gradient(to right,#be123c var(--value),rgba(255,255,255,.1) var(--value))}[data-theme=dark] .size-slider::-webkit-slider-thumb,[data-theme=dark] .size-slider::-moz-range-thumb{background:#222}[data-theme=dark] .font-size-menu{background:var(--gray-dark-3);border:1px solid var(--gray-dark-7);box-shadow:0 4px 12px #00000080}[data-theme=dark] .font-size-option{color:var(--gray-dark-12)}[data-theme=dark] .font-size-option:hover{background:var(--gray-dark-5)}[data-theme=dark] .font-size-option.active{background:#10b981;color:#fff}[data-theme=dark] .size-slider-menu{background:var(--gray-dark-3);border-color:var(--gray-dark-7);box-shadow:0 4px 12px #00000080}[data-theme=dark] .size-slider-header{color:var(--gray-dark-11)}[data-theme=dark] .slider-track{background-color:var(--gray-dark-6)}[data-theme=dark] .slider-range{background-color:var(--blue-9)}[data-theme=dark] .slider-thumb{background-color:var(--gray-dark-3);border:2px solid var(--gray-dark-8)}[data-theme=dark] .slider-thumb:hover{background-color:var(--gray-dark-4)}[data-theme=dark] .slider-thumb:focus{box-shadow:0 0 0 2px var(--blue-7)}.toolbar-button.text-size-button:before{content:none}.toolbar-button[data-theme-toggle]{color:var(--gray-11);transition:all .2s ease}.toolbar-button[data-theme-toggle]:hover{color:var(--gray-12);background:var(--gray-3)}.toolbar-button-wrapper:hover .size-slider-menu{animation:none}.toolbar-separator{width:24px;height:1px;background:#00000014;margin:8px 4px}[data-theme=dark] .toolbar-separator{background:var(--gray-dark-8)}@media (max-width: 768px){.toolbar-separator{width:1px;height:16px;margin:0 4px}[data-theme=dark] .toolbar-separator{background:var(--gray-dark-8)}.toolbar-container{display:flex;flex-direction:row;align-items:center}.toolbar-group{display:flex;flex-direction:row;align-items:center;gap:4px}}.reset-confirm-content{padding:1rem;text-align:center}.reset-confirm-content p{margin-bottom:1.5rem;color:var(--text-primary)}.reset-confirm-buttons{display:flex;justify-content:center;gap:1rem}.reset-confirm-button{padding:.5rem 1.5rem;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.reset-confirm-button.cancel{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.reset-confirm-button.cancel:hover{background-color:var(--bg-hover)}.reset-confirm-button.confirm{background-color:var(--danger);color:#fff;border:none}.reset-confirm-button.confirm:hover{background-color:var(--danger-hover)}.translate-service-selector{position:relative;display:inline-block}.service-dropdown{position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--card-shadow);padding:0;min-width:200px;z-index:1100;animation:tooltipSlideIn .2s ease-out;overflow:hidden}.tooltip-header{padding:12px 16px;color:var(--text-secondary);font-size:12px;border-bottom:1px solid var(--border-color);background:var(--bg-hover)}.settings-service-options{display:flex;flex-direction:column;gap:4px}.service-option{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:none;background:transparent;border-radius:6px;cursor:pointer;transition:all .2s ease;color:var(--text-primary);text-align:left}.service-option:hover{background:var(--bg-hover)}.service-option.active{background:#be123c1a;color:#be123c}.service-option-content{flex:1;text-align:left;display:flex;flex-direction:column;gap:2px}.service-option-label{font-size:14px;font-weight:500}.service-option-description{font-size:12px;color:var(--text-secondary)}.service-option-check{color:#be123c}@keyframes tooltipSlideIn{0%{opacity:0;transform:translate(-8px,-50%)}to{opacity:1;transform:translateY(-50%)}}[data-theme=dark] .service-dropdown{background:var(--gray-dark-2);border-color:var(--gray-dark-6);box-shadow:0 4px 12px #0006}[data-theme=dark] .tooltip-header{background:var(--gray-dark-3);border-bottom-color:var(--gray-dark-6);color:var(--gray-dark-11)}[data-theme=dark] .service-option{color:var(--gray-dark-12)}[data-theme=dark] .service-option:hover{background:var(--gray-dark-4)}[data-theme=dark] .service-option.active{background:#be123c33;color:#ff6b9d}[data-theme=dark] .service-option-description{color:var(--gray-dark-11)}[data-theme=dark] .service-option-check{color:#ff6b9d}@media (max-width: 768px){.service-dropdown{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);width:calc(100vw - 32px);max-width:360px;background:var(--card-bg);border-radius:12px;animation:mobileSlideIn .2s ease-out;z-index:1051}.tooltip-header{text-align:center;font-size:14px;padding:16px;background:var(--card-bg)}.service-option{padding:16px;border-radius:8px}[data-theme=dark] .service-dropdown,[data-theme=dark] .tooltip-header{background:var(--gray-dark-2)}@keyframes mobileSlideIn{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}}@media (max-width: 768px) and (orientation: landscape){.service-dropdown{bottom:16px;max-height:calc(100vh - 120px);overflow-y:auto}}.mobile-menu-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1050;display:flex;align-items:flex-end;animation:fadeIn .2s ease-out}.mobile-menu-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.mobile-menu{position:relative;width:100%;max-height:85vh;margin:0;background:var(--bg-primary);border-radius:16px 16px 0 0;box-shadow:var(--card-shadow);overflow:hidden;animation:slideUp .3s ease-out;display:flex;flex-direction:column}.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border-color);background:var(--bg-primary);flex-shrink:0}.mobile-menu-header h3{margin:0;font-size:16px;font-weight:500;color:var(--text-primary)}.mobile-menu-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all .2s}.mobile-menu-close:hover{background:var(--bg-hover);color:var(--text-primary)}.mobile-menu-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,16px)}.mobile-menu-option{display:flex;align-items:center;width:100%;padding:12px;border:none;background:transparent;border-radius:8px;text-align:left;font-size:14px;color:var(--text-primary);cursor:pointer;transition:all .2s}.mobile-menu-option:hover,.mobile-menu-option:focus{background:var(--bg-hover)}.mobile-menu-option.active{background:#be123c1a;color:#be123c}.mobile-menu-option span{flex-grow:1;margin-left:12px}.mobile-menu-check{color:#be123c;margin-left:auto}.mobile-menu-slider-section{padding:16px;border-top:1px solid var(--border-color);margin-top:8px}.mobile-menu-slider-header{font-size:14px;color:var(--text-secondary);margin-bottom:16px;text-align:center}.mobile-menu-slider-container{display:flex;align-items:center;padding:0 8px}.mobile-menu-service-info{padding:8px 0}.service-info-item{margin-bottom:16px}.service-info-item:last-child{margin-bottom:0}.service-info-item h4{font-size:14px;font-weight:500;color:var(--text-primary);margin:0 0 4px}.service-info-item p{font-size:12px;color:var(--text-secondary);margin:0;line-height:1.5}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}[data-theme=dark] .mobile-menu{background:var(--gray-dark-2)}[data-theme=dark] .mobile-menu-header{background:var(--gray-dark-2);border-bottom-color:var(--gray-dark-6)}[data-theme=dark] .mobile-menu-header h3{color:var(--gray-dark-12)}[data-theme=dark] .mobile-menu-close{color:var(--gray-dark-11)}[data-theme=dark] .mobile-menu-close:hover{background:var(--gray-dark-4);color:var(--gray-dark-12)}[data-theme=dark] .mobile-menu-option{color:var(--gray-dark-12)}[data-theme=dark] .mobile-menu-option:hover,[data-theme=dark] .mobile-menu-option:focus{background:var(--gray-dark-4)}[data-theme=dark] .mobile-menu-option.active{background:#be123c33;color:#ff6b9d}[data-theme=dark] .mobile-menu-check{color:#ff6b9d}[data-theme=dark] .mobile-menu-slider-section{border-top-color:var(--gray-dark-6)}[data-theme=dark] .mobile-menu-slider-header{color:var(--gray-dark-11)}[data-theme=dark] .service-info-item h4{color:var(--gray-dark-12)}[data-theme=dark] .service-info-item p{color:var(--gray-dark-11)}@media (max-width: 768px){.mobile-menu{margin:0;border-radius:16px 16px 0 0}}:root{--jp-primary-text: #1F2937;--jp-secondary-text: #6B7280;--jp-accent-color: #be123c;--jp-background: #f9f9f9;--jp-border-color: #e5e7eb;--jp-hover-bg: rgba(190, 18, 60, .02);--jp-selected-bg: rgba(190, 18, 60, .05);--jp-furigana-size: 12px;--jp-kanji-size: 28px;--jp-romaji-size: 14px;--jp-translation-size: 16px;--jp-container-padding: 16px;--jp-word-gap: 24px;--jp-card-padding: 4px 8px}[data-theme=dark]{--jp-primary-text: #e5e7eb;--jp-secondary-text: #9ca3af;--jp-accent-color: #f87171;--jp-background: #1F2937;--jp-border-color: #374151;--jp-hover-bg: rgba(248, 113, 113, .05);--jp-selected-bg: rgba(248, 113, 113, .08)}.japanese-display-container{padding:var(--jp-container-padding);background:transparent;border-radius:12px;margin-bottom:16px;border:2px dotted var(--jp-border-color)}.word-container{display:flex;gap:var(--jp-word-gap);padding:var(--jp-container-padding) 0;justify-content:center;align-items:flex-end;flex-wrap:wrap}.word-card{display:flex;flex-direction:column;align-items:center;min-width:60px;position:relative;padding:var(--jp-card-padding);cursor:pointer;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--jp-border-color);background:transparent;overflow:hidden}.word-card:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:var(--jp-accent-color);opacity:0;transform:translate(-50%,-50%);transition:width .6s,height .6s,opacity .6s}.word-card:hover{transform:translateY(-3px) scale(1.02);border-color:var(--jp-accent-color);box-shadow:0 4px 12px #be123c26;background:var(--jp-hover-bg)}.word-card:active{transform:translateY(-1px) scale(.98);transition:all .1s ease}.word-card:active:before{width:100%;height:100%;opacity:.1;transition:0s}.word-card.selected{background:var(--jp-selected-bg);border-color:var(--jp-accent-color);box-shadow:0 0 0 2px #be123c33,0 4px 12px #be123c26;transform:translateY(-2px)}.furigana-text{font-size:var(--jp-furigana-size);font-family:Noto Sans JP,sans-serif;color:var(--jp-secondary-text);line-height:1;margin-bottom:2px;text-align:center;min-height:var(--jp-furigana-size);position:relative;white-space:nowrap}.kanji-text-container{display:flex;align-items:flex-end;position:relative;margin-bottom:4px}.kanji-with-furigana{display:flex;flex-direction:column;align-items:center;position:relative}.kanji-only{font-size:var(--jp-kanji-size);font-family:"Noto Serif JP",serif;line-height:1.2;color:var(--jp-primary-text);margin-right:1px}.kana-part{font-size:var(--jp-kanji-size);font-family:"Noto Serif JP",serif;line-height:1.2;color:var(--jp-primary-text);margin-bottom:0;display:flex;align-items:flex-end}.kanji-text{font-size:var(--jp-kanji-size);font-family:"Noto Serif JP",serif;line-height:1.2;color:var(--jp-primary-text);margin-bottom:4px}.romaji-text{font-size:var(--jp-romaji-size);font-family:sans-serif;color:#be123cbf;line-height:1}.translation-container{text-align:center;margin-top:20px;padding:8px 0;border-top:1px solid var(--jp-border-color)}.translation-text{font-size:var(--jp-translation-size);color:var(--jp-secondary-text)}.audio-button{position:absolute;right:-12px;top:4px;background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--jp-border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--jp-secondary-text);padding:4px;border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2;box-shadow:0 2px 4px #0000001a}.audio-button:hover{background:#fff;color:var(--jp-accent-color);transform:scale(1.15);box-shadow:0 4px 8px #be123c33;border-color:var(--jp-accent-color)}.audio-button:active{transform:scale(.95)}.audio-button.playing{color:var(--jp-accent-color);background:#be123c1a;border-color:var(--jp-accent-color);pointer-events:none}.audio-button.playing svg{animation:audioPlaying .8s ease-in-out infinite}.audio-element{display:none}@keyframes audioPlaying{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.8}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}[data-theme=dark] .japanese-display-container{background:transparent;box-shadow:none}[data-theme=dark] .kanji-text,[data-theme=dark] .kanji-only,[data-theme=dark] .kana-part{color:var(--jp-primary-text)}[data-theme=dark] .romaji-text{color:#f87171bf}[data-theme=dark] .furigana-text,[data-theme=dark] .translation-text{color:var(--jp-secondary-text)}[data-theme=dark] .translation-container{border-top:1px solid var(--jp-border-color)}[data-theme=dark] .audio-button{color:var(--jp-secondary-text);background:#0006;border-color:var(--jp-border-color);box-shadow:0 2px 4px #0000004d}[data-theme=dark] .audio-button:hover{color:var(--jp-accent-color);background:#0009;border-color:var(--jp-accent-color);box-shadow:0 4px 8px #f871714d}[data-theme=dark] .audio-button.playing{color:var(--jp-accent-color);background:#f8717126;border-color:var(--jp-accent-color)}[data-theme=dark] .word-card{border-color:var(--jp-border-color)}[data-theme=dark] .word-card:hover,[data-theme=dark] .word-card.selected{background:var(--jp-selected-bg);border-color:var(--jp-accent-color);box-shadow:none}.word-detail-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.japanese-display-container .word-card .romaji-text{font-size:var(--jp-romaji-size);font-family:sans-serif;color:#be123cbf!important;line-height:1}[data-theme=dark] .japanese-display-container .word-card .romaji-text{color:#f87171bf!important}:root{--gray-1: hsl(0, 0%, 99%);--gray-2: hsl(0, 0%, 97.3%);--gray-3: hsl(0, 0%, 95.1%);--gray-4: hsl(0, 0%, 93%);--gray-5: hsl(0, 0%, 90.9%);--gray-6: hsl(0, 0%, 88.7%);--gray-7: hsl(0, 0%, 85.8%);--gray-8: hsl(0, 0%, 78%);--gray-9: hsl(0, 0%, 56.1%);--gray-10: hsl(0, 0%, 52.3%);--gray-11: hsl(0, 0%, 43.5%);--gray-12: hsl(0, 0%, 9%);--gray-dark-1: hsl(0, 0%, 8.5%);--gray-dark-2: hsl(0, 0%, 11%);--gray-dark-3: hsl(0, 0%, 13.6%);--gray-dark-4: hsl(0, 0%, 15.8%);--gray-dark-5: hsl(0, 0%, 17.9%);--gray-dark-6: hsl(0, 0%, 20.5%);--gray-dark-7: hsl(0, 0%, 24.3%);--gray-dark-8: hsl(0, 0%, 31.2%);--gray-dark-9: hsl(0, 0%, 43.9%);--gray-dark-10: hsl(0, 0%, 49.4%);--gray-dark-11: hsl(0, 0%, 62.8%);--gray-dark-12: hsl(0, 0%, 93%);--blue-1: hsl(206, 100%, 99.2%);--blue-2: hsl(210, 100%, 98%);--blue-3: hsl(209, 100%, 96.5%);--blue-4: hsl(210, 98.8%, 94%);--blue-5: hsl(209, 95%, 90.1%);--blue-6: hsl(209, 81.2%, 84.5%);--blue-7: hsl(208, 77.5%, 76.9%);--blue-8: hsl(206, 81.9%, 65.3%);--blue-9: hsl(206, 100%, 50%);--blue-10: hsl(208, 100%, 47.3%);--blue-11: hsl(211, 100%, 43.2%);--blue-12: hsl(211, 100%, 15%);--blue-dark-1: hsl(212, 35%, 9.2%);--blue-dark-2: hsl(216, 50%, 11.8%);--blue-dark-3: hsl(214, 59.4%, 15.3%);--blue-dark-4: hsl(214, 65.8%, 17.9%);--blue-dark-5: hsl(213, 71.2%, 20.2%);--blue-dark-6: hsl(212, 77.4%, 23.1%);--blue-dark-7: hsl(211, 85.1%, 27.4%);--blue-dark-8: hsl(211, 89.7%, 34.1%);--blue-dark-9: hsl(206, 100%, 50%);--blue-dark-10: hsl(209, 100%, 60.6%);--blue-dark-11: hsl(210, 100%, 66.1%);--blue-dark-12: hsl(206, 98%, 95.8%);--amber-1: hsl(39, 70%, 99%);--amber-2: hsl(40, 100%, 96.5%);--amber-3: hsl(44, 100%, 91.7%);--amber-4: hsl(43, 100%, 86.8%);--amber-5: hsl(42, 100%, 81.8%);--amber-6: hsl(38, 99.7%, 76.3%);--amber-7: hsl(36, 86.1%, 67.1%);--amber-8: hsl(35, 85.2%, 55.1%);--amber-9: hsl(39, 100%, 57%);--amber-10: hsl(35, 100%, 55.5%);--amber-11: hsl(30, 100%, 34%);--amber-12: hsl(20, 80%, 17%);--amber-dark-1: hsl(36, 100%, 6.1%);--amber-dark-2: hsl(35, 100%, 7.6%);--amber-dark-3: hsl(32, 100%, 10.2%);--amber-dark-4: hsl(32, 100%, 12.4%);--amber-dark-5: hsl(33, 100%, 14.6%);--amber-dark-6: hsl(35, 100%, 17.1%);--amber-dark-7: hsl(35, 91%, 21.6%);--amber-dark-8: hsl(36, 100%, 25.5%);--amber-dark-9: hsl(39, 100%, 57%);--amber-dark-10: hsl(43, 100%, 64%);--amber-dark-11: hsl(39, 90%, 49.8%);--amber-dark-12: hsl(39, 97%, 93.2%);--purple-1: hsl(280, 65%, 99.4%);--purple-2: hsl(276, 100%, 99%);--purple-3: hsl(276, 83.1%, 97%);--purple-4: hsl(275, 76.4%, 94.7%);--purple-5: hsl(275, 70.8%, 91.8%);--purple-6: hsl(274, 65.4%, 87.8%);--purple-7: hsl(273, 61%, 81.7%);--purple-8: hsl(272, 60%, 73.5%);--purple-9: hsl(272, 51%, 54%);--purple-10: hsl(272, 46.8%, 50.3%);--purple-11: hsl(272, 50%, 45.8%);--purple-12: hsl(272, 66%, 16%);--purple-dark-1: hsl(284, 20%, 9.2%);--purple-dark-2: hsl(283, 30%, 11.8%);--purple-dark-3: hsl(281, 37.5%, 16.5%);--purple-dark-4: hsl(280, 41.2%, 20%);--purple-dark-5: hsl(279, 43.8%, 23.3%);--purple-dark-6: hsl(277, 46.4%, 27.5%);--purple-dark-7: hsl(275, 49.3%, 34.6%);--purple-dark-8: hsl(272, 52.1%, 45.9%);--purple-dark-9: hsl(272, 51%, 54%);--purple-dark-10: hsl(273, 57.3%, 59.1%);--purple-dark-11: hsl(275, 80%, 71%);--purple-dark-12: hsl(279, 75%, 95.7%);--green-dark-1: hsl(146, 30%, 7.4%);--green-dark-2: hsl(155, 44.2%, 8.4%);--green-dark-3: hsl(155, 46.7%, 10.9%);--green-dark-4: hsl(154, 48.4%, 12.9%);--green-dark-5: hsl(154, 49.7%, 14.9%);--green-dark-6: hsl(154, 50.9%, 17.6%);--green-dark-7: hsl(153, 51.8%, 21.8%);--green-dark-8: hsl(151, 51.7%, 28.4%);--green-dark-9: hsl(151, 55%, 41.5%);--green-dark-10: hsl(151, 49.3%, 46.5%);--green-dark-11: hsl(151, 50%, 53.2%);--green-dark-12: hsl(137, 72%, 94%);--black-a7: rgba(0, 0, 0, .07);color-scheme:light dark;--bg-gradient: #ffffff;--bg-primary: #ffffff;--bg-secondary: #ffffff;--text-primary: #333333;--text-secondary: #666666;--border-color: #eeeeee;--card-bg: #ffffff;--card-shadow: none;--danger: #dc2626;--danger-hover: #b91c1c}html{margin:0;padding:0;height:100%;overflow:hidden;background-image:url(/texture.png);background-repeat:repeat;background-size:300px;background-color:var(--bg-primary)}body{margin:0;padding:0;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-primary);transition:background-color .3s ease;background:transparent}[data-theme=light]{--bg-gradient: transparent;--bg-primary: #ffffff;--bg-secondary: transparent;--text-primary: #333333;--text-secondary: #666666;--border-color: #eeeeee;--card-bg: transparent;--card-shadow: none}[data-theme=dark]{--bg-gradient: transparent;--bg-primary: var(--gray-dark-1);--bg-secondary: var(--gray-dark-2);--text-primary: var(--gray-dark-12);--text-secondary: var(--gray-dark-11);--border-color: var(--gray-dark-4);--card-bg: var(--gray-dark-2);--card-shadow: none}*{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}*:not(button):not(a):not(.toolbar-button):not(.settings-button):not(.mobile-menu-close):not(.reset-button):not(.theme-button){transition:none}input[type=range],input[type=checkbox],button,a,.toolbar-button,.settings-button,.mobile-menu-close,.reset-button,.theme-button{transition:all .2s ease}:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-hover: #f1f3f5;--text-primary: #1a1b1e;--text-secondary: #868e96;--border-color: #e9ecef;--shadow-color: rgba(0, 0, 0, .1);--shadow-color-dark: rgba(0, 0, 0, .2);--overlay-color: rgba(0, 0, 0, .3);--transition-fast: .2s;--transition-normal: .3s;--transition-slow: .5s;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 24px;--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .5);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .15);--glass-blur: blur(12px);--glass-text: #1f2937}[data-theme=dark]{--bg-primary: #1a1b1e;--bg-secondary: #25262b;--bg-hover: #2c2e33;--text-primary: #ffffff;--text-secondary: #a1a1aa;--border-color: #2e2e35;--shadow-color: rgba(0, 0, 0, .3);--shadow-color-dark: rgba(0, 0, 0, .4);--overlay-color: rgba(0, 0, 0, .5);--glass-bg: rgba(20, 20, 25, .7);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .3);--glass-text: #f3f4f6}.app{height:100vh;background:transparent;display:flex;flex-direction:column;position:relative;padding-top:env(safe-area-inset-top);overflow:hidden}.main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:32px 20px;display:flex;flex-direction:column;gap:20px;box-sizing:border-box;position:relative;z-index:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.main::-webkit-scrollbar{display:none}.main{-ms-overflow-style:none;scrollbar-width:none}.input-area{position:sticky;top:48px;display:flex;flex-direction:column;gap:24px}.result-area{min-height:400px}.input-section{display:flex;gap:16px;margin-bottom:24px}.text-input{flex:1;padding:12px;border:2px solid var(--gray-6);border-radius:8px;font-size:16px;transition:border-color .2s}.text-input:focus{outline:none;border-color:var(--blue-9)}.translate-button{padding:12px 24px;background-color:var(--blue-9);color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:background-color .2s}.translate-button:hover{background-color:var(--blue-10)}.translate-button:disabled{background-color:var(--gray-6);cursor:not-allowed}.result-section{display:flex;flex-direction:column;gap:24px;width:100%;max-width:100%;background:transparent;border-radius:16px;padding:24px;border:2px dashed var(--border-color);transition:all .2s ease;box-sizing:border-box;color:var(--text-primary)}.japanese-content{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding:32px 20px;background:transparent;border-radius:12px;margin:0}.words-container{display:flex;flex-wrap:wrap;gap:2px;margin:32px 0;padding:32px 16px;background-color:#fff;border-radius:12px;justify-content:center;align-items:center;min-height:120px;line-height:1.8}.translation-text{color:var(--gray-11);font-size:14px;line-height:1.6;display:flex;flex-direction:column;gap:8px;padding:0 24px}.result-card{background:#fff;border-radius:16px;box-shadow:0 4px 24px #0000000a;padding:32px;transition:all .3s ease}.result-skeleton{background:#fff;border-radius:16px;box-shadow:0 4px 24px #0000000a;padding:32px;display:flex;flex-direction:column;gap:24px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.skeleton-line{height:24px;background:var(--gray-3);border-radius:4px}.content-container{width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:20px;min-height:200px;box-sizing:border-box;-webkit-box-sizing:border-box}@media (max-width: 768px){.main{width:100%;padding:24px 0;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:100px;overflow-x:hidden;-webkit-overflow-scrolling:touch}.content-container{width:100%;padding-left:16px;padding-right:16px;margin:0 auto}.input-area,.result-area{width:100%;max-width:100%;padding:0}.text-input{min-height:120px;font-size:16px;padding:12px}.result-section{padding:16px}}@supports (padding: max(0px)){@media (max-width: 768px){.content-container{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}}.result-container{flex:1;min-height:300px;position:relative}.content-expand{width:100%;opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}.content-expand.loading{opacity:.8}.loading-spinner{display:flex;justify-content:center;padding:32px;color:var(--crimson-9);animation:spin 1s linear infinite}@media (max-width: 640px){.main{padding:20px 16px}.text-input{min-height:60px;padding:16px;font-size:16px}}.page-title{text-align:center;margin-bottom:16px;color:var(--text-primary);font-size:24px;font-weight:500}.helper-text{text-align:center;color:var(--text-secondary);font-size:14px;margin-top:-8px}[data-theme=dark] .page-title{color:var(--gray-dark-12)}[data-theme=dark] .helper-text{color:var(--gray-dark-11)}.translation-info{display:flex;justify-content:center;gap:32px;margin-top:16px;padding:16px;background:var(--gray-1);border-radius:12px;font-size:14px}.info-item{display:flex;align-items:center;gap:8px}.info-label{color:var(--gray-11)}.info-value{color:var(--crimson-9);font-weight:500}.result-section:hover,.translate-form:hover{border-color:var(--text-secondary);box-shadow:none}@media (max-width: 640px){.main{padding:20px 16px}.page-title{font-size:20px}.helper-text{font-size:13px}.translation-info{flex-direction:column;align-items:center;gap:12px}}.word-detail-panel{position:fixed;top:50%;right:24px;transform:translateY(-50%) translate(calc(100% + 48px)) scale(.95);width:420px;max-height:85vh;background:#fffffff2;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 8px 32px #0000001a,0 0 0 1px #ffffff80;border-radius:16px;z-index:1000;transition:all .4s cubic-bezier(.4,0,.2,1);overflow:hidden;opacity:0;pointer-events:none}.word-detail-panel.visible{transform:translateY(-50%) translate(0) scale(1);opacity:1;pointer-events:auto}.word-detail-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--crimson-9),var(--violet-9),var(--blue-9));opacity:0;transition:opacity .3s ease}.word-detail-panel.visible:before{opacity:1}.word-detail-panel>*{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.word-detail-panel .deck-container,.word-detail-panel .deck-slide,.word-detail-panel .deck-wrapper,.word-detail-panel *{scrollbar-width:none!important;-ms-overflow-style:none!important}.word-detail-panel .deck-container::-webkit-scrollbar,.word-detail-panel .deck-slide::-webkit-scrollbar,.word-detail-panel .deck-wrapper::-webkit-scrollbar,.word-detail-panel *::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}.word-detail-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;z-index:999;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.word-detail-overlay.visible{opacity:1;visibility:visible}@media (max-width: 768px){.word-detail-panel{top:auto;bottom:0;right:0;left:0;width:100%;max-height:90vh;border-radius:24px 24px 0 0;transform:translateY(100%)}.word-detail-panel.visible{transform:translateY(0)}.word-detail-panel:before{height:3px}}[data-theme=dark] .word-detail-panel{background:#1a1b1ef2;box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff1a}[data-theme=dark] .word-detail-panel::-webkit-scrollbar-thumb{background:#fff3}[data-theme=dark] .word-detail-panel::-webkit-scrollbar-thumb:hover{background:#ffffff4d}[data-theme=dark] .word-detail-overlay{background:#0009}.settings-container{position:fixed;top:16px;right:16px;display:flex;gap:8px;z-index:1001;transition:opacity .3s ease,visibility .3s ease}.settings-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:#fffc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;color:var(--text-primary);cursor:pointer;transition:all .2s}.settings-button:hover{background:#ffffffe6;transform:translateY(-1px)}.settings-button:active{transform:translateY(0)}[data-theme=dark] .settings-button{background:var(--gray-dark-3);color:var(--gray-dark-12);border:1px solid var(--gray-dark-6)}[data-theme=dark] .settings-button:hover{background:var(--gray-dark-4);border-color:var(--gray-dark-7)}.word-detail-panel.visible~.settings-container{opacity:0;visibility:hidden;pointer-events:none}.translate-form{width:100%;box-sizing:border-box;background:var(--card-bg);border-radius:16px;box-shadow:var(--card-shadow);overflow:hidden;position:relative;border:1px solid var(--border-color);transition:all .2s ease}.translate-form:focus-within{border-color:var(--crimson-6);box-shadow:0 2px 4px #00000005,0 8px 24px #0000000f;transform:translateY(-1px)}.input-field{width:100%;margin:0;padding:0}.text-input{width:100%;min-height:56px;padding:16px 24px;font-size:16px;line-height:1.5;color:var(--text-primary);background:var(--card-bg);border:none;resize:vertical;transition:all .2s ease;box-sizing:border-box;margin:0;display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none}.text-input:hover{background:var(--bg-secondary)}.text-input:focus{outline:none;background:var(--card-bg)}.text-input:disabled{opacity:.7;background:var(--bg-secondary);cursor:not-allowed;color:var(--text-primary)}.text-input::placeholder{color:var(--text-secondary)}.text-input.loading{background:var(--gray-1);position:relative;overflow:hidden}.text-input.loading:after,.text-input.loading:before{display:none}.text-input.loading::placeholder{color:var(--gray-8)}.text-input.loading{cursor:wait}.text-input{transition:all .2s ease}.text-input:disabled{opacity:.8;background:var(--gray-2);border-color:var(--gray-6);cursor:not-allowed}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.text-input.loading::placeholder{animation:pulse 1.5s infinite}.loading-indicator,.char-count{display:none}.loading-overlay{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--crimson-9);pointer-events:none;z-index:10;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}.loading-overlay [class^=icon]{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.char-count{position:absolute;bottom:8px;right:12px;font-size:12px;color:var(--gray-9);background:#fff;padding:2px 8px;border-radius:4px;box-shadow:0 1px 2px #0000000d}@media (max-width: 768px){.translate-form{width:100%;margin:0;border-radius:12px}.text-input{min-height:100px;font-size:16px;padding:12px 16px}}[data-theme=dark] .translate-form{background:var(--gray-dark-2);border-color:var(--gray-dark-6)}[data-theme=dark] .text-input{background:var(--gray-dark-2);color:var(--gray-dark-12)}[data-theme=dark] .text-input:hover{background:var(--gray-dark-3)}[data-theme=dark] .text-input:focus{background:var(--gray-dark-2)}[data-theme=dark] .text-input::placeholder{color:var(--gray-dark-10)}[data-theme=dark] .text-input:disabled{background:var(--gray-dark-3);color:var(--gray-dark-11)}[data-theme=dark] .char-count{background:var(--gray-dark-3);color:var(--gray-dark-11)}.toast-viewport{position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:24px;gap:10px;width:390px;max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none}.toast-root{background:var(--card-bg);border:1px solid var(--border-color);box-shadow:var(--card-shadow);color:var(--text-primary);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:4px;border-left:4px solid}.toast-root.error{border-left-color:var(--crimson-9)}.toast-root.success{border-left-color:var(--green-9)}.toast-root.info{border-left-color:var(--blue-9)}.toast-title{color:var(--text-primary);font-size:15px;font-weight:500}.toast-description{color:var(--text-secondary);font-size:13px}.skeleton-container{width:100%;background:var(--card-bg);border:1px solid var(--border-color);box-shadow:var(--card-shadow);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:24px;box-sizing:border-box}.skeleton-content{display:flex;flex-direction:column;gap:16px;padding:24px;min-height:160px;background:var(--gray-1);border-radius:12px}.skeleton-row{display:flex;justify-content:center;gap:16px}.skeleton-char{width:24px;height:24px;background:var(--gray-3);border-radius:4px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.skeleton-row.furigana .skeleton-char{height:12px;width:20px}.skeleton-row.kanji .skeleton-char{height:32px;width:32px}.skeleton-row.romaji .skeleton-char{height:16px;width:28px}.skeleton-divider{height:1px;background:var(--gray-4);margin:16px 0}.skeleton-translation{display:flex;flex-direction:column;gap:12px;align-items:center}.skeleton-line{height:24px;background:var(--bg-secondary);border-radius:4px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.skeleton-line.short{width:60%}.skeleton-line.medium{width:80%}.skeleton-line.long{width:100%}.skeleton-chinese{margin-top:32px;padding-top:24px;border-top:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;gap:12px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}[data-theme=dark] .skeleton-container{background:var(--bg-primary)}[data-theme=dark] .skeleton-line{background:var(--bg-secondary)}@media (max-width: 640px){.skeleton-container{padding:20px 16px;border-radius:12px}.skeleton-line{height:20px}}.loading-progress{width:100%;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.loading-progress-bar{width:100%;height:4px;background:var(--gray-3);border-radius:2px;overflow:hidden}.loading-progress-fill{height:100%;background:var(--crimson-9);border-radius:2px;transition:width .3s ease}.loading-progress-message{font-size:14px;color:var(--gray-11);margin:0;text-align:center}[data-theme=dark] .loading-progress-bar{background:var(--gray-12)}[data-theme=dark] .loading-progress-fill{background:var(--crimson-8)}[data-theme=dark] .loading-progress-message{color:var(--gray-8)}:root{--font-serif: "Noto Serif JP", serif;--font-sans: "Outfit", sans-serif}.details-card.premium-glass{display:flex;flex-direction:column;height:100%;background:transparent;color:var(--glass-text);font-family:var(--font-sans);position:relative}.details-header{text-align:center;padding:24px 24px 16px;flex-shrink:0}@media (max-width: 768px){.details-header{padding-top:32px}}.details-title{font-family:var(--font-serif);font-size:48px;font-weight:900;background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;margin-bottom:4px;letter-spacing:-.02em}.details-subtitle{font-size:16px;color:var(--text-secondary);font-weight:500;opacity:.8;letter-spacing:.05em}.tabs-container{display:flex;justify-content:center;gap:8px;padding:0 16px 16px;border-bottom:1px solid rgba(0,0,0,.05);margin-bottom:8px}.tab-button{background:transparent;border:none;font-family:var(--font-sans);font-size:13px;font-weight:500;color:var(--text-secondary);padding:6px 12px;border-radius:20px;cursor:pointer;transition:all .2s;opacity:.7}.tab-button:hover{background:#00000008;opacity:1}.tab-button.active{background:var(--text-primary);color:var(--bg-primary);opacity:1;box-shadow:0 2px 8px #0000001a}.deck-wrapper{flex:1;position:relative;display:flex;align-items:center;overflow:hidden}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:#fffc;border:1px solid rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);z-index:10;box-shadow:0 2px 8px #0000000d;transition:all .2s}.nav-arrow:hover:not(.disabled){background:#fff;transform:translateY(-50%) scale(1.1);box-shadow:0 4px 12px #0000001a}.nav-arrow.disabled{opacity:0;pointer-events:none}.nav-arrow.left{left:8px}.nav-arrow.right{right:8px}.deck-container{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;height:100%}.deck-container::-webkit-scrollbar{display:none}.deck-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;overflow-y:auto;padding:0 48px 24px;box-sizing:border-box}.slide-content{display:flex;flex-direction:column;gap:16px}.section-title{font-size:11px;font-weight:600;letter-spacing:.15em;color:var(--text-secondary);opacity:.6;margin-bottom:12px;text-transform:uppercase}.info-grid{display:grid;grid-template-columns:1fr;gap:8px;background:#ffffff4d;padding:16px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.2)}.info-row{display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:center}.info-label{font-size:11px;color:var(--text-secondary);opacity:.7;text-align:right}.info-value{font-size:14px;font-weight:500;color:var(--text-primary)}.meanings-list{display:flex;flex-direction:column;gap:12px}.meaning-item{font-size:16px;line-height:1.6;color:var(--text-primary);padding-left:12px;border-left:2px solid var(--crimson-9)}.examples-list{display:flex;flex-direction:column;gap:16px}.example-quote{background:#fff6;padding:20px;border-radius:var(--radius-lg);font-family:var(--font-serif);font-size:15px;line-height:1.8;color:var(--text-primary);position:relative;border:1px solid rgba(255,255,255,.3)}.example-quote:before{content:"“";position:absolute;top:8px;left:8px;font-size:32px;color:var(--text-secondary);opacity:.2;font-family:serif;line-height:1}.conjugations-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.conjugation-cell{background:#ffffff4d;padding:12px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:4px}.conjugation-form{font-size:11px;color:var(--text-secondary)}.conjugation-value{font-size:14px;font-weight:600;color:var(--crimson-9)}.kanji-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.kanji-cell{aspect-ratio:1;background:#fff6;border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3)}.kanji-char{font-family:var(--font-serif);font-size:32px;color:var(--text-primary)}.kanji-reading{font-size:11px;color:var(--text-secondary);margin-top:4px}[data-theme=dark] .details-card.premium-glass{color:var(--gray-dark-12)}[data-theme=dark] .details-title{background:linear-gradient(135deg,var(--gray-dark-12) 0%,var(--gray-dark-11) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}[data-theme=dark] .details-subtitle{color:var(--gray-dark-11)}[data-theme=dark] .tabs-container{border-bottom-color:#ffffff1a}[data-theme=dark] .tab-button{color:var(--gray-dark-11)}[data-theme=dark] .tab-button:hover{background:#ffffff0d}[data-theme=dark] .tab-button.active{background:var(--gray-dark-12);color:var(--gray-dark-1)}[data-theme=dark] .nav-arrow{background:var(--gray-dark-3);border-color:var(--gray-dark-6);color:var(--gray-dark-12)}[data-theme=dark] .nav-arrow:hover:not(.disabled){background:var(--gray-dark-4)}[data-theme=dark] .info-grid{background:#ffffff0d;border-color:#ffffff1a}[data-theme=dark] .info-label{color:var(--gray-dark-11)}[data-theme=dark] .info-value,[data-theme=dark] .meaning-item{color:var(--gray-dark-12)}[data-theme=dark] .example-quote{background:#ffffff0d;border-color:#ffffff1a;color:var(--gray-dark-12)}[data-theme=dark] .example-quote:before{color:var(--gray-dark-11)}[data-theme=dark] .conjugation-cell{background:#ffffff0d;border-color:#ffffff1a}[data-theme=dark] .conjugation-form{color:var(--gray-dark-11)}[data-theme=dark] .conjugation-value{color:var(--crimson-9)}[data-theme=dark] .kanji-cell{background:#ffffff0d;border-color:#ffffff1a}[data-theme=dark] .kanji-char{color:var(--gray-dark-12)}[data-theme=dark] .kanji-reading{color:var(--gray-dark-11)}@media (max-width: 768px){[data-theme=dark] .popover-glass-container .details-card{background:var(--gray-dark-2)!important}[data-theme=dark] .popover-glass-container .details-card:before{background:#ffffff4d}}.deck-container,.deck-slide{scrollbar-width:none!important;-ms-overflow-style:none!important}.deck-container::-webkit-scrollbar,.deck-slide::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}@media (min-width: 769px){.deck-slide,.deck-container,.details-card *{scrollbar-width:none!important;-ms-overflow-style:none!important}.deck-slide::-webkit-scrollbar,.deck-container::-webkit-scrollbar,.details-card *::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}}.popover-glass-container{position:fixed;top:0;left:0;width:360px;height:auto;z-index:200;transition:opacity .3s ease,transform .1s linear;will-change:transform;filter:drop-shadow(0 20px 40px rgba(0,0,0,.2))}.popover-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000004d;z-index:100;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1)}.popover-overlay.visible,.popover-glass-container.visible{opacity:1}.popover-glass-container.dragging{cursor:grabbing;transition:none;transform:scale(1.02)}.popover-glass-container .details-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--glass-shadow);overflow:hidden;height:500px;cursor:grab}.popover-glass-container.dragging .details-card{cursor:grabbing;background:#fffc}[data-theme=dark] .popover-glass-container .details-card{background:var(--glass-bg);border-color:var(--glass-border)}@media (max-width: 768px){.popover-glass-container{width:100%!important;max-width:100%!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;transform:translateY(100%)!important;border-radius:24px 24px 0 0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease}.popover-glass-container.visible{transform:translateY(0)!important}.popover-glass-container .details-card{width:100%;height:50vh;border-radius:24px 24px 0 0;border-bottom:none;background:#fffffffa!important;backdrop-filter:blur(20px) saturate(180%)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;box-shadow:0 -4px 24px #00000026!important}.popover-glass-container .details-card:before{content:"";position:absolute;top:12px;left:50%;transform:translate(-50%);width:40px;height:4px;background:#0003;border-radius:2px;z-index:100}}@media (max-width: 360px){.popover-glass-container .details-card{height:60vh}}@media (max-height: 500px) and (orientation: landscape){.popover-glass-container .details-card{height:90vh}}.popover-glass-container .details-card *{scrollbar-width:none!important;-ms-overflow-style:none!important}.popover-glass-container .details-card *::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}.kana-card.premium-glass{display:flex;flex-direction:column;height:100%;max-height:500px;background:transparent;color:var(--glass-text);font-family:var(--font-sans);position:relative;padding:32px 24px;gap:24px;text-align:center;align-items:center}.kana-header{text-align:center;padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.05)}.kana-title{font-family:var(--font-serif);font-size:72px;font-weight:900;background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;margin-bottom:8px;letter-spacing:-.02em}.kana-subtitle{font-size:18px;color:var(--text-secondary);font-weight:500;opacity:.8;letter-spacing:.1em;text-transform:uppercase}.kana-info-grid{display:flex;flex-direction:row;justify-content:center;gap:32px;width:100%;background:transparent;padding:8px 0;border-radius:0;border:none}.kana-info-item{display:flex;flex-direction:column;align-items:center;gap:4px}.kana-info-label{font-size:12px;color:var(--text-secondary);opacity:.6;font-weight:500}.kana-info-value{font-size:18px;font-weight:600;color:var(--text-primary);font-family:var(--font-serif)}.kana-stroke-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:0}.section-title{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--text-secondary);opacity:.5;text-transform:uppercase;text-align:center}.stroke-gif-container{width:100%;max-width:240px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#00000008;border-radius:24px;border:1px solid rgba(0,0,0,.05);overflow:hidden;position:relative;margin:0 auto}.stroke-gif-container img{max-width:100%;max-height:100%;object-fit:contain}.loading-indicator,.error-message{font-size:13px;color:var(--text-secondary);opacity:.6}.kana-audio-section{display:flex;justify-content:center;margin-top:24px}.play-audio-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--text-primary);color:var(--bg-primary);border:none;border-radius:20px;font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #0000001a}.play-audio-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.play-audio-button:disabled{opacity:.5;cursor:not-allowed}.play-audio-button.playing{background:var(--crimson-9)}.play-audio-button.error{background:var(--text-secondary);opacity:.5}.close-button{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#0000000d;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:all .2s;z-index:10}.close-button:hover{background:#0000001a;color:var(--text-primary);transform:rotate(90deg)}[data-theme=dark] .kana-card.premium-glass{color:var(--gray-dark-12)}[data-theme=dark] .kana-header{border-bottom-color:#ffffff1a}[data-theme=dark] .kana-title{background:linear-gradient(135deg,var(--gray-dark-12) 0%,var(--gray-dark-11) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}[data-theme=dark] .kana-subtitle{color:var(--gray-dark-11)}[data-theme=dark] .kana-info-grid{background:transparent;border-color:transparent}[data-theme=dark] .kana-info-label{color:var(--gray-dark-11)}[data-theme=dark] .kana-info-value{color:var(--gray-dark-12)}[data-theme=dark] .section-title{color:var(--gray-dark-11)}[data-theme=dark] .stroke-gif-container{background:#ffffff0d;border-color:#ffffff1a}[data-theme=dark] .loading-indicator,[data-theme=dark] .error-message{color:var(--gray-dark-11)}[data-theme=dark] .close-button{background:#ffffff1a;color:var(--gray-dark-11)}[data-theme=dark] .close-button:hover{background:#fff3;color:var(--gray-dark-12)}[data-theme=dark] .play-audio-button{background:var(--gray-dark-12);color:var(--gray-dark-1)}[data-theme=dark] .play-audio-button:hover:not(:disabled){background:var(--gray-dark-11)}[data-theme=dark] .play-audio-button.playing{background:var(--crimson-9);color:#fff}[data-theme=dark] .play-audio-button.error{background:var(--gray-dark-8);color:var(--gray-dark-11)}.kana-sidebar-panel{position:absolute;top:0;right:0;bottom:0;width:380px;background:#fffffffa;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-left:1px solid rgba(0,0,0,.08);box-shadow:-4px 0 24px #00000014;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:10;overflow-y:auto;display:flex;flex-direction:column}.kana-sidebar-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:#0003;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:9;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.kana-sidebar-backdrop.visible{opacity:1;pointer-events:auto}.kana-sidebar-panel.visible{transform:translate(0)}.kana-sidebar-panel .kana-card{height:auto;width:100%;margin:auto;max-height:none;border:none;border-radius:0;box-shadow:none;background:transparent}[data-theme=dark] .kana-sidebar-panel{background:var(--gray-dark-2);border-left-color:var(--gray-dark-6);box-shadow:-4px 0 24px #0006}.kana-sidebar-panel{scrollbar-width:none!important;-ms-overflow-style:none!important}.kana-sidebar-panel::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}@media (max-width: 768px){.kana-sidebar-panel{display:none}}.mobile-kana-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:2000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.mobile-kana-overlay.visible{opacity:1;visibility:visible}.mobile-kana-sheet{position:fixed;left:0;right:0;bottom:0;height:50vh;background:var(--bg-primary);border-radius:20px 20px 0 0;box-shadow:0 -4px 24px #00000026;z-index:2001;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;overflow:hidden}.mobile-kana-sheet.visible{transform:translateY(0)}.sheet-handle{padding:12px 0 8px;display:flex;justify-content:center;align-items:center;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}.sheet-handle:active{cursor:grabbing}.handle-bar{width:40px;height:4px;background:var(--gray-7);border-radius:2px;opacity:.6;transition:opacity .2s ease}.sheet-handle:active .handle-bar{opacity:.8}.sheet-content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px 24px}.sheet-content::-webkit-scrollbar{width:4px}.sheet-content::-webkit-scrollbar-track{background:transparent}.sheet-content::-webkit-scrollbar-thumb{background:var(--gray-6);border-radius:2px}.mobile-kana-sheet .kana-card{background:transparent;box-shadow:none;border:none;max-height:none;height:auto}[data-theme=dark] .mobile-kana-overlay{background:#000000b3}[data-theme=dark] .mobile-kana-sheet{background:var(--gray-dark-2);box-shadow:0 -4px 24px #0006}[data-theme=dark] .handle-bar{background:var(--gray-dark-7)}[data-theme=dark] .sheet-content::-webkit-scrollbar-thumb{background:var(--gray-dark-6)}@media (prefers-reduced-motion: reduce){.mobile-kana-overlay,.mobile-kana-sheet{transition:none}}@media (max-width: 360px){.mobile-kana-sheet{height:60vh;border-radius:16px 16px 0 0}.sheet-content{padding:0 12px 20px}}@media (max-height: 500px) and (orientation: landscape){.mobile-kana-sheet{height:90vh}.sheet-handle{padding:8px 0 4px}.handle-bar{width:32px;height:3px}}:root{--glass-bg: rgba(255, 255, 255, .85);--glass-border: rgba(0, 0, 0, .08);--glass-shadow: 0 12px 40px rgba(0, 0, 0, .12);--glass-blur: blur(20px);--primary-color: var(--blue-9);--text-primary: var(--gray-12);--text-secondary: var(--gray-10);--cell-bg-seion: #ffffff;--cell-border-seion: var(--gray-12);--cell-bg-dakuon: #fff7ed;--cell-border-dakuon: #f97316;--cell-text-dakuon: #c2410c;--cell-bg-handakuon: #eff6ff;--cell-border-handakuon: #3b82f6;--cell-text-handakuon: #1d4ed8;--cell-bg-yoon: #faf5ff;--cell-border-yoon: #a855f7;--cell-text-yoon: #7e22ce;--cell-size-pc: 80px;--cell-size-mobile: 64px}[data-theme=dark]{--glass-bg: rgba(20, 20, 25, .85);--glass-border: rgba(255, 255, 255, .1);--cell-bg-seion: var(--gray-dark-3);--cell-border-seion: var(--gray-dark-11);--cell-bg-dakuon: rgba(249, 115, 22, .15);--cell-border-dakuon: #fb923c;--cell-text-dakuon: #fdba74;--cell-bg-handakuon: rgba(59, 130, 246, .15);--cell-border-handakuon: #60a5fa;--cell-text-handakuon: #93c5fd;--cell-bg-yoon: rgba(168, 85, 247, .15);--cell-border-yoon: #c084fc;--cell-text-yoon: #d8b4fe}.gojuon-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0003;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:998;animation:fadeIn .3s ease}.gojuon-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:92vw;max-width:1100px;height:88vh;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--glass-shadow);z-index:999;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}.gojuon-modal.sidebar-open .gojuon-content{margin-right:380px;transition:margin-right .3s cubic-bezier(.4,0,.2,1)}.gojuon-header{padding:20px 32px;background:#fff6;border-bottom:1px solid var(--glass-border);display:flex;flex-direction:column;gap:20px}[data-theme=dark] .gojuon-header{background:#0003}.header-top{display:flex;justify-content:space-between;align-items:center}.gojuon-title{font-size:24px;font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.02em}[data-theme=dark] .gojuon-title{color:var(--gray-dark-12)}[data-theme=dark] .romaji-switch{color:var(--gray-dark-11)}[data-theme=dark] .switch-label{color:var(--gray-dark-12)}[data-theme=dark] .mode-select{background:var(--gray-dark-3);color:var(--gray-dark-12);border-color:var(--gray-dark-6)}[data-theme=dark] .close-chart-btn{color:var(--gray-dark-11)}[data-theme=dark] .close-chart-btn:hover{background:var(--gray-dark-4);color:var(--gray-dark-12)}.gojuon-controls{display:flex;align-items:center;gap:16px}.control-group{display:flex;align-items:center}.romaji-switch{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--text-secondary);font-weight:500}.romaji-switch input{display:none}.switch-slider{width:40px;height:22px;background-color:var(--gray-6);border-radius:22px;position:relative;transition:.3s}.romaji-switch input:checked+.switch-slider{background-color:var(--primary-color)}.switch-slider:before{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.3s;box-shadow:0 1px 3px #0003}.romaji-switch input:checked+.switch-slider:before{transform:translate(18px)}.mode-select{padding:8px 12px;border-radius:10px;border:1px solid var(--glass-border);background:#fff9;color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;outline:none;transition:all .2s}.mode-select:hover{background:#ffffffe6}[data-theme=dark] .mode-select{background:#0000004d}.close-chart-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center}.close-chart-btn:hover{background:#0000000d;color:var(--text-primary)}.gojuon-tabs{display:flex;gap:6px;padding:4px;background:#0000000a;border-radius:14px;width:fit-content}[data-theme=dark] .gojuon-tabs{background:#ffffff0f}.tab-btn{padding:8px 20px;border-radius:10px;border:none;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.tab-btn.active{background:#fff;color:var(--primary-color);box-shadow:0 2px 8px #0000000a}[data-theme=dark] .tab-btn.active{background:var(--primary-color);color:#fff}.gojuon-content{flex:1;overflow-y:auto;padding:32px;scrollbar-width:none;-ms-overflow-style:none}.gojuon-content::-webkit-scrollbar{width:0;height:0;display:none}.gojuon-scroll-area{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:24px;max-width:1200px;margin:0 auto}.gojuon-group{background:transparent;padding:0}.gojuon-group-title{font-size:13px;font-weight:600;color:var(--text-secondary);margin:0 0 12px;padding-left:4px;text-transform:uppercase;letter-spacing:.05em;opacity:.7}[data-theme=dark] .gojuon-group-title,[data-theme=dark] .tab-btn{color:var(--gray-dark-11)}[data-theme=dark] .tab-btn:hover{background:var(--gray-dark-4);color:var(--gray-dark-12)}[data-theme=dark] .tab-btn.active{background:var(--gray-dark-12);color:var(--gray-dark-1)}.kana-subgroup-title{font-size:12px;color:var(--text-secondary);margin-bottom:8px;opacity:.8}[data-theme=dark] .kana-subgroup-title{color:var(--gray-dark-11)}.gojuon-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:calc(5 * var(--cell-size-pc) + 4 * 12px);margin:0 auto}.gojuon-row.yoon-grid{grid-template-columns:repeat(3,1fr);max-width:calc(3 * var(--cell-size-pc) + 2 * 12px)}.gojuon-cell{position:relative;width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.25,.8,.25,1);border:1px solid transparent;box-sizing:border-box;padding:4px;overflow:hidden}.gojuon-cell:hover{transform:translateY(-2px);box-shadow:0 8px 16px #00000014;z-index:10}.gojuon-cell.selected{box-shadow:0 0 0 3px var(--primary-color),0 12px 24px #0003;transform:translateY(-4px) scale(1.05);z-index:20;border-color:var(--primary-color)!important}.gojuon-cell.seion{background:var(--cell-bg-seion);border-color:var(--cell-border-seion);color:var(--text-primary)}.gojuon-cell.dakuon{background:var(--cell-bg-dakuon);border-color:var(--cell-border-dakuon);color:var(--cell-text-dakuon)}.gojuon-cell.handakuon{background:var(--cell-bg-handakuon);border-color:var(--cell-border-handakuon);color:var(--cell-text-handakuon)}.gojuon-cell.yoon{background:var(--cell-bg-yoon);border-color:var(--cell-border-yoon);color:var(--cell-text-yoon)}[data-theme=dark] .gojuon-cell.seion{background:var(--cell-bg-seion);border-color:var(--cell-border-seion);color:var(--gray-dark-12)}[data-theme=dark] .gojuon-cell.dakuon{background:var(--cell-bg-dakuon);border-color:var(--cell-border-dakuon);color:var(--cell-text-dakuon)}[data-theme=dark] .gojuon-cell.handakuon{background:var(--cell-bg-handakuon);border-color:var(--cell-border-handakuon);color:var(--cell-text-handakuon)}[data-theme=dark] .gojuon-cell.yoon{background:var(--cell-bg-yoon);border-color:var(--cell-border-yoon);color:var(--cell-text-yoon)}.atomic-number{position:absolute;top:4px;left:6px;font-size:10px;opacity:.6;font-weight:500}.kana-main{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);font-size:28px;font-weight:500;font-family:"Noto Serif JP",serif;line-height:1}.kana-sub-left{position:absolute;bottom:4px;left:6px;font-size:11px;opacity:.7}.kana-sub-right{position:absolute;bottom:4px;right:6px;font-size:11px;font-style:italic;opacity:.6;text-transform:lowercase}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}@media (max-width: 768px){.gojuon-modal{width:100vw;height:100vh;max-width:none;border-radius:0;top:0;left:0;transform:none;animation:slideUpMobile .4s cubic-bezier(.16,1,.3,1);background:var(--bg-primary);background:linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 100%)}@keyframes slideUpMobile{0%{transform:translateY(100%)}to{transform:translateY(0)}}.gojuon-header{padding:12px 16px;gap:16px;background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(0,0,0,.05)}[data-theme=dark] .gojuon-header{background:#141419d9;border-bottom-color:#ffffff0d}.gojuon-title{font-size:20px;background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.gojuon-controls{gap:12px}.switch-label{display:none}.gojuon-tabs{width:100%;overflow-x:auto;padding:4px;gap:0;background:#0000000d;border-radius:12px;display:flex;position:relative}[data-theme=dark] .gojuon-tabs{background:#ffffff1a}.tab-btn{flex:1;white-space:nowrap;padding:8px 0;font-size:13px;font-weight:600;border-radius:10px;color:var(--text-secondary);text-align:center;z-index:1}.tab-btn.active{background:#fff;color:var(--text-primary);box-shadow:0 2px 8px #00000014}[data-theme=dark] .tab-btn.active{background:var(--gray-dark-12);color:var(--gray-dark-1)}.gojuon-content{padding:24px 16px 120px;background:transparent}.gojuon-scroll-area{display:flex;flex-direction:column;gap:32px;align-items:stretch}.gojuon-group{background:transparent;border:none;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:12px}.gojuon-group-title{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--text-secondary);opacity:.6;margin:0 0 0 4px;text-transform:uppercase}.gojuon-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:100%}.gojuon-row.yoon-grid{grid-template-columns:repeat(5,1fr)}.gojuon-cell{position:relative;aspect-ratio:1;border-radius:16px;background:var(--bg-primary);border:1px solid rgba(0,0,0,.03);box-shadow:0 2px 4px #00000005,0 8px 16px #00000005;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.2,0,0,1);overflow:hidden}[data-theme=dark] .gojuon-cell{background:#ffffff0f;border-color:#ffffff0d;box-shadow:0 4px 12px #0003}.gojuon-cell:active{transform:scale(.94);box-shadow:0 1px 2px #00000005}.kana-main{position:static;transform:none;font-family:var(--font-serif);font-size:24px;font-weight:500;color:var(--text-primary);line-height:1.2;margin-bottom:2px}.kana-sub-right{position:static;font-family:var(--font-sans);font-size:10px;font-weight:500;color:var(--text-secondary);opacity:.6;letter-spacing:.02em;text-transform:uppercase}.atomic-number,.kana-sub-left{display:none}.gojuon-cell.seion{background:#fff}.gojuon-cell.dakuon{background:#fffbf7;border-color:#f973161a}.gojuon-cell.handakuon{background:#f7fbff;border-color:#3b82f61a}.gojuon-cell.yoon{background:#fbf7ff;border-color:#a855f71a}[data-theme=dark] .gojuon-cell.seion{background:var(--gray-dark-3)}[data-theme=dark] .gojuon-cell.dakuon{background:#7c2d1226}[data-theme=dark] .gojuon-cell.handakuon{background:#1e3a8a26}[data-theme=dark] .gojuon-cell.yoon{background:#581c8726}.gojuon-cell.selected{border-color:var(--primary-color)!important;box-shadow:0 0 0 2px var(--primary-color),0 8px 20px rgba(var(--primary-rgb),.2);z-index:2;transform:translateY(-2px)}}.settings-container{position:fixed;top:16px;right:16px;display:flex;gap:8px;z-index:1000}.settings-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;border-radius:8px;color:var(--text-primary);cursor:pointer;transition:all .2s}.settings-button:hover{background:#0000001a}[data-theme=dark] .settings-button{background:transparent}[data-theme=dark] .settings-button:hover{background:#ffffff1a}@media (max-width: 768px){.settings-container{display:none}}.settings-panel{display:flex;flex-direction:column;height:100%;background:var(--bg-primary)}.settings-content{flex:1;overflow-y:auto;padding:16px;padding-bottom:env(safe-area-inset-bottom,16px)}.settings-footer{padding:16px;border-top:1px solid var(--border-color);background:var(--bg-primary)}.settings-section{margin-bottom:24px;padding:16px;border-radius:8px}.settings-section:last-child{margin-bottom:0}.settings-section h3{margin:0 0 16px;font-size:14px;font-weight:500;color:var(--text-primary)}.settings-item{margin-bottom:12px}.settings-item:last-child{margin-bottom:0}.settings-label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s}.settings-label:hover{color:var(--text-secondary)}.settings-item input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border:2px solid var(--text-secondary);border-radius:4px;cursor:pointer;position:relative;transition:all .2s}.settings-item input[type=checkbox]:checked{background:#be123c;border-color:#be123c}.settings-item input[type=checkbox]:checked:after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.font-size-slider{display:flex;align-items:center;gap:12px}.font-size-value{font-size:14px;color:var(--text-secondary);min-width:48px;text-align:right}.size-slider{flex:1;height:4px;background:var(--gray-3);border-radius:2px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;position:relative}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#be123c;border:2px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:all .2s}.size-slider::-moz-range-thumb{width:16px;height:16px;background:#be123c;border:2px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:all .2s}.theme-switch{display:flex;gap:8px}.theme-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border:1px solid var(--border-color);border-radius:6px;background:transparent;color:var(--text-primary);font-size:14px;cursor:pointer;transition:all .2s}.theme-button.active{background:#be123c;color:#fff;border-color:#be123c}.reset-button{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:6px;background:transparent;color:var(--danger);font-size:14px;cursor:pointer;transition:all .2s}.reset-button:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.reset-confirm-content{padding:24px}.reset-confirm-content p{margin:0 0 24px;text-align:center}.reset-confirm-buttons{display:flex;gap:12px;justify-content:flex-end}.reset-confirm-button{padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s}.reset-confirm-button.cancel{background:transparent;border:1px solid var(--border-color);color:var(--text-primary)}.reset-confirm-button.cancel:hover{background:var(--bg-hover)}.reset-confirm-button.confirm{background:var(--danger);border:1px solid var(--danger);color:#fff}.reset-confirm-button.confirm:hover{background:var(--danger-hover);border-color:var(--danger-hover)}@media (max-width: 768px){.settings-container{display:none}.settings-content,.settings-footer{padding:12px}.settings-section{margin-bottom:24px}.theme-button{padding:10px}}@supports (padding-bottom: env(safe-area-inset-bottom)){@media (max-width: 768px){.settings-panel{padding-bottom:calc(16px + env(safe-area-inset-bottom))}}}[data-theme=dark] .settings-panel,[data-theme=dark] .settings-content{background:var(--gray-dark-1)}[data-theme=dark] .settings-footer{background:var(--gray-dark-1);border-top-color:var(--gray-dark-6)}[data-theme=dark] .settings-section h3,[data-theme=dark] .settings-label{color:var(--gray-dark-12)}[data-theme=dark] .settings-label:hover{color:var(--gray-dark-11)}[data-theme=dark] .settings-item input[type=checkbox]{border-color:var(--gray-dark-8);background:var(--gray-dark-3)}[data-theme=dark] .settings-item input[type=checkbox]:checked{background:#be123c;border-color:#be123c}[data-theme=dark] .font-size-value{color:var(--gray-dark-11)}[data-theme=dark] .size-slider{background:var(--gray-dark-6)}[data-theme=dark] .size-slider::-webkit-slider-thumb{border-color:var(--gray-dark-3)}[data-theme=dark] .size-slider::-moz-range-thumb{border-color:var(--gray-dark-3)}[data-theme=dark] .theme-button{border-color:var(--gray-dark-6);color:var(--gray-dark-12)}[data-theme=dark] .theme-button:hover{background:var(--gray-dark-3)}[data-theme=dark] .theme-button.active{background:#be123c;color:#fff;border-color:#be123c}[data-theme=dark] .reset-button{border-color:var(--gray-dark-6)}[data-theme=dark] .reset-confirm-content p{color:var(--gray-dark-12)}[data-theme=dark] .reset-confirm-button.cancel{border-color:var(--gray-dark-6);color:var(--gray-dark-12)}[data-theme=dark] .reset-confirm-button.cancel:hover{background:var(--gray-dark-3)}