:root{--accent:#3d5a80;--accent-light:#5d7a9e;--accent-lighter:#e8eef4;--accent-dark:#2c4460;--accent-soft:rgba(61,90,128,.08);--accent-softer:rgba(61,90,128,.04);--vermillion:#c73e3a;--vermillion-light:#f5e8e8;--vermillion-soft:rgba(199,62,58,.08);--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#f1f3f4;--bg-wash:#f8f9fa;--text-primary:#1a1d21;--text-secondary:#4a5568;--text-tertiary:#718096;--text-muted:#a0aec0;--border:#e1e4e8;--border-strong:#d0d4d9;--ink:#1a1d21;--paper:#fff;--shadow-subtle:0 1px 2px rgba(0,0,0,.04);--shadow-medium:0 2px 8px rgba(0,0,0,.06);--shadow-elevated:0 4px 16px rgba(0,0,0,.08);--radius:3px;--radius-lg:4px;--radius-xl:4px;--font-jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;--font-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"SF Mono","Consolas",monospace;--text-xs:0.64rem;--text-sm:0.8rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.563rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--ease-out-expo:cubic-bezier(0.16,1,0.3,1);--transition-fast:0.15s ease;--transition:0.2s ease;--transition-slow:0.3s ease}[data-theme=dark]{--bg-primary:#0d1117;--bg-secondary:#161b22;--bg-tertiary:#21262d;--bg-wash:#0d1117;--text-primary:#e6edf3;--text-secondary:#8b949e;--text-tertiary:#6e7681;--text-muted:#484f58;--accent:#58a6ff;--accent-light:#79b8ff;--accent-lighter:rgba(88,166,255,.15);--accent-dark:#388bfd;--accent-soft:rgba(88,166,255,.1);--accent-softer:rgba(88,166,255,.05);--vermillion:#f85149;--vermillion-light:rgba(248,81,73,.15);--vermillion-soft:rgba(248,81,73,.1);--border:#30363d;--border-strong:#484f58;--ink:#e6edf3;--paper:#161b22;--shadow-subtle:0 1px 2px rgba(0,0,0,.2);--shadow-medium:0 2px 8px rgba(0,0,0,.3);--shadow-elevated:0 4px 16px rgba(0,0,0,.4)}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*{-webkit-tap-highlight-color:transparent;box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-secondary);color:var(--text-primary);margin:0;padding:0;min-height:100vh;font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.skip-link{position:absolute;top:-100%;left:0;background:var(--accent);color:#fff;padding:var(--space-2) var(--space-4);z-index:1001;text-decoration:none;font-weight:500}.skip-link:focus{top:0}header{position:-webkit-sticky;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);padding:var(--space-4) var(--space-6)}[data-theme=dark] header,header{background:var(--bg-primary)}.header-content{max-width:640px;margin:0 auto;justify-content:space-between}.header-content,.logo{display:flex;align-items:center}.logo{gap:var(--space-3)}.logo-mark{width:40px;height:40px;background:var(--accent);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--text-lg);font-weight:700}.logo-mark,.logo-text{font-family:var(--font-jp)}.logo-text{font-size:1.1rem;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}.logo-subtitle{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);margin-top:2px}.header-actions{display:flex;gap:var(--space-2)}.icon-btn{width:36px;height:36px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-primary);color:var(--text-tertiary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast)}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.icon-btn:active{background:var(--bg-secondary)}.icon-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.icon-btn.active:hover{background:var(--accent-dark)}.icon-btn svg{width:18px;height:18px}.audio-btn{flex-shrink:0;width:32px;height:32px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-tertiary);cursor:pointer;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.audio-btn:hover{border-color:var(--accent);color:var(--accent)}.audio-btn:active{background:var(--bg-secondary)}.audio-btn svg{width:16px;height:16px}.audio-btn-small{flex-shrink:0;width:28px;height:28px;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-tertiary);cursor:pointer;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.audio-btn-small:hover{border-color:var(--accent);color:var(--accent)}.audio-btn-small svg{width:14px;height:14px}.search-container{max-width:640px;margin:0 auto;padding:var(--space-5) var(--space-6) var(--space-3)}.search-wrapper{position:relative}.search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.search-icon svg{width:16px;height:16px}#search{width:100%;padding:var(--space-3) var(--space-4);padding-left:42px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-base);outline:none;transition:var(--transition-fast)}#search::placeholder{color:var(--text-muted)}#search:hover{border-color:var(--border-strong)}#search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-lighter)}.tabs-container{max-width:640px;margin:0 auto;padding:0 var(--space-6);border-bottom:1px solid var(--border)}.tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabs::-webkit-scrollbar{display:none}.tab{flex-shrink:0;padding:var(--space-3) var(--space-4);background:transparent;border:none;color:var(--text-tertiary);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:var(--transition-fast);position:relative}.tab:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .25s var(--ease-out-expo)}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--accent);font-weight:600}.tab.active:after{transform:scaleX(1)}main{padding:var(--space-6) var(--space-6) 80px}.content,main{max-width:640px;margin:0 auto}.content{padding:var(--space-4) var(--space-6) 120px}.section{display:none}.section.active{display:block;animation:sectionReveal .3s ease}@keyframes sectionReveal{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes cardReveal{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.section.active .counter-grid,.section.active .phrase-card,.section.active .tip-box,.section.active .vocab-card{opacity:0;animation:cardReveal .4s var(--ease-out-expo) forwards}.section.active .counter-grid:first-child,.section.active .phrase-card:first-child,.section.active .tip-box:first-child,.section.active .vocab-card:first-child{animation-delay:0ms}.section.active .counter-grid:nth-child(2),.section.active .phrase-card:nth-child(2),.section.active .tip-box:nth-child(2),.section.active .vocab-card:nth-child(2){animation-delay:40ms}.section.active .counter-grid:nth-child(3),.section.active .phrase-card:nth-child(3),.section.active .tip-box:nth-child(3),.section.active .vocab-card:nth-child(3){animation-delay:80ms}.section.active .phrase-card:nth-child(4),.section.active .vocab-card:nth-child(4){animation-delay:.12s}.section.active .phrase-card:nth-child(5),.section.active .vocab-card:nth-child(5){animation-delay:.16s}.section.active .phrase-card:nth-child(6),.section.active .vocab-card:nth-child(6){animation-delay:.2s}.section.active .phrase-card:nth-child(n+7),.section.active .vocab-card:nth-child(n+7){animation-delay:.24s}.category{margin-bottom:var(--space-8)}.category-header{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}.category-title{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-tertiary)}.tip-box{background:var(--vermillion-soft);border:1px solid var(--vermillion);border-radius:var(--radius);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);display:flex;align-items:flex-start;gap:var(--space-2)}.tip-box:before{content:"注";font-family:var(--font-jp);font-size:var(--text-sm);font-weight:600;color:var(--vermillion);flex-shrink:0}.tip-text{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.7}.counter-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:1px;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-4)}.counter-card{background:var(--bg-primary);padding:var(--space-4) var(--space-2);text-align:center;cursor:pointer;transition:var(--transition-fast)}.counter-card:hover{background:var(--accent-lighter)}.counter-card:active{background:var(--accent-soft)}.counter-num{font-family:var(--font-body);font-size:var(--text-xl);font-weight:600;color:var(--accent);line-height:1}.counter-jp{font-family:var(--font-jp);font-size:var(--text-sm);color:var(--text-primary);margin-top:var(--space-2)}.card-grid{display:grid;grid-gap:var(--space-3);gap:var(--space-3)}.phrase-card{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);cursor:pointer;transition:border-color var(--transition-fast);margin-bottom:var(--space-2)}.phrase-card:hover{border-color:var(--accent)}.phrase-card:active{background:var(--bg-secondary)}.phrase-card.copied{border-color:var(--accent);background:var(--accent-soft)}.phrase-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}.phrase-content{flex:1 1}.japanese{font-family:var(--font-jp);font-size:var(--text-lg);font-weight:500;color:var(--text-primary);margin-bottom:var(--space-2);line-height:1.6}.english{font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6}.favorite-btn{flex-shrink:0;width:32px;height:32px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-primary);color:var(--text-tertiary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast)}.favorite-btn:hover{border-color:var(--vermillion);color:var(--vermillion)}.favorite-btn:active{background:var(--vermillion-light)}.favorite-btn.active{background:var(--vermillion);border-color:var(--vermillion);color:#fff}.favorite-btn.active:hover{background:#b53835}.favorite-btn svg{width:16px;height:16px}.favorite-btn-small{flex-shrink:0;width:28px;height:28px;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.favorite-btn-small:hover{background:var(--vermillion-light);color:var(--vermillion)}.favorite-btn-small.active{color:var(--vermillion)}.favorite-btn-small svg{width:16px;height:16px}.vocab-grid{display:grid;grid-gap:var(--space-2);gap:var(--space-2)}.vocab-card{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);cursor:pointer;transition:border-color var(--transition-fast);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-2)}.vocab-card:hover{border-color:var(--accent)}.vocab-card:active{background:var(--bg-secondary)}.vocab-card.copied{border-color:var(--accent);background:var(--accent-soft)}.vocab-content{flex:1 1;display:flex;flex-direction:column;gap:4px}.vocab-jp{font-family:var(--font-jp);font-size:var(--text-base);font-weight:500;color:var(--text-primary);line-height:1.5}.vocab-romaji{font-size:var(--text-xs);color:var(--text-muted)}.vocab-en{font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}.vocab-actions{flex-shrink:0;display:flex;gap:var(--space-2);align-items:center}.empty-state{text-align:center;padding:80px var(--space-6);color:var(--text-tertiary)}.empty-state svg{width:64px;height:64px;margin-bottom:var(--space-4);opacity:.3;color:var(--accent)}.empty-state p{font-family:var(--font-body);font-size:var(--text-base);margin-bottom:var(--space-2);color:var(--text-secondary);line-height:1.7}.empty-state small{font-size:var(--text-sm);color:var(--text-muted)}#toast,.toast{position:fixed;bottom:var(--space-8);left:50%;transform:translateX(-50%) translateY(100px);background:var(--text-primary);color:var(--bg-primary);padding:var(--space-3) var(--space-6);border-radius:var(--radius);font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;opacity:0;transition:all .3s ease;z-index:1000;box-shadow:var(--shadow-elevated);pointer-events:none}#toast.show,.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.hidden{display:none!important}.note{font-family:var(--font-body);font-size:var(--text-xs);color:var(--accent);margin-top:var(--space-2);font-weight:500}@media (max-width:640px){header{padding:var(--space-4) var(--space-4)}.content,.search-container,.tabs-container{padding-left:var(--space-4);padding-right:var(--space-4)}.phrase-card{padding:var(--space-4)}.vocab-card{padding:var(--space-3)}.counter-grid{grid-template-columns:repeat(5,1fr)}.counter-card{padding:var(--space-3) var(--space-1)}.counter-num{font-size:var(--text-lg)}.counter-jp{font-size:var(--text-xs)}.category-title{font-size:10px}.tab{padding:var(--space-3);font-size:var(--text-xs)}.japanese,.vocab-jp{font-size:var(--text-base)}}@media (max-width:480px){.logo-text{font-size:1rem}.logo-mark{width:36px;height:36px;font-size:var(--text-base)}.icon-btn{width:32px;height:32px}.icon-btn svg{width:16px;height:16px}#toast,.toast{bottom:var(--space-6);padding:var(--space-3) var(--space-5);font-size:var(--text-xs)}}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tab:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--accent-lighter);color:var(--text-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}