:root{--bg-primary:#fafbf9;--bg-secondary:#fff;--bg-tertiary:#f3f5f0;--bg-wash:linear-gradient(165deg,#fafbf9,#f5f7f3 50%,#f3f5f0);--text-primary:#2d3a2e;--text-secondary:#5a6b5d;--text-tertiary:#8b9a8d;--accent:#5b8a72;--accent-warm:#6b9a82;--accent-soft:rgba(91,138,114,.1);--accent-softer:rgba(91,138,114,.05);--accent-hover:#4a7b61;--accent-glow:rgba(91,138,114,.12);--secondary:#7ba4c4;--secondary-soft:rgba(123,164,196,.1);--tertiary:#d4a5a5;--tertiary-soft:hsla(0,35%,74%,.1);--border:#e4e8e0;--border-strong:#d0d6ca;--ink:#2d3a2e;--paper:#fff;--shadow-subtle:0 1px 3px rgba(45,58,46,.04),0 4px 12px rgba(45,58,46,.04);--shadow-medium:0 2px 8px rgba(45,58,46,.06),0 8px 24px rgba(45,58,46,.06);--shadow-elevated:0 4px 16px rgba(45,58,46,.08),0 16px 48px rgba(45,58,46,.08);--shadow-glow:0 0 40px rgba(91,138,114,.1);--radius:6px;--radius-lg:10px;--radius-xl:14px;--font-jp:"Noto Sans JP",sans-serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:"IBM Plex Mono",monospace;--ease-out-expo:cubic-bezier(0.16,1,0.3,1);--ease-out-back:cubic-bezier(0.34,1.56,0.64,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);--transition-fast:0.15s var(--ease-out-expo);--transition:0.25s var(--ease-out-expo);--transition-slow:0.4s var(--ease-out-expo)}[data-theme=dark]{--bg-primary:#1a1f1a;--bg-secondary:#232823;--bg-tertiary:#2a302a;--bg-wash:linear-gradient(165deg,#1a1f1a,#1e241e 50%,#232823);--text-primary:#e8ede8;--text-secondary:#a8b5a8;--text-tertiary:#6b7a6b;--accent:#7ba98d;--accent-warm:#8bbaa0;--accent-soft:rgba(123,169,141,.12);--accent-softer:rgba(123,169,141,.06);--accent-hover:#8fbaa0;--accent-glow:rgba(123,169,141,.15);--secondary:#8bb4d0;--secondary-soft:rgba(139,180,208,.12);--tertiary:#d4b5b5;--tertiary-soft:hsla(0,26%,77%,.12);--border:#3a423a;--border-strong:#4a524a;--ink:#e8ede8;--paper:#232823;--shadow-subtle:0 1px 3px rgba(0,0,0,.15),0 4px 12px rgba(0,0,0,.12);--shadow-medium:0 2px 8px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.15);--shadow-elevated:0 4px 16px rgba(0,0,0,.25),0 16px 48px rgba(0,0,0,.2);--shadow-glow:0 0 40px rgba(123,169,141,.12)}*{-webkit-tap-highlight-color:transparent;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-wash);color:var(--text-primary);margin:0;padding:0;min-height:100vh;transition:background var(--transition-slow),color var(--transition);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;overflow-x:hidden}header{position:-webkit-sticky;position:sticky;top:0;z-index:100;background:linear-gradient(to bottom,var(--bg-primary) 0,hsla(90,20%,98%,.95) 100%);border-bottom:1px solid var(--border);padding:16px 24px;transition:background var(--transition),border var(--transition);backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%)}[data-theme=dark] header{background:linear-gradient(to bottom,var(--bg-primary) 0,rgba(26,31,26,.95) 100%)}.header-content{max-width:640px;margin:0 auto;justify-content:space-between;position:relative}.header-content,.logo{display:flex;align-items:center}.logo{gap:12px}.logo-mark{width:40px;height:40px;background:var(--accent);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-jp);font-size:20px;font-weight:700;transition:transform var(--transition),box-shadow var(--transition)}.logo-mark:hover{transform:scale(1.05)}.logo-text{font-family:var(--font-jp);font-size:1.1rem;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}.logo-subtitle{font-family:var(--font-body);font-size:.65rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);margin-top:2px}.header-actions{display:flex;gap:10px}.icon-btn{width:44px;height:44px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);position:relative;overflow:hidden}.icon-btn:before{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;transition:opacity var(--transition)}.icon-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-medium)}.icon-btn:active{transform:translateY(0) scale(.96)}.icon-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px var(--accent-glow)}.icon-btn.active:hover{color:#fff;box-shadow:0 6px 20px var(--accent-glow)}.icon-btn svg{width:20px;height:20px;position:relative;z-index:1;transition:transform var(--transition)}.icon-btn:hover svg{transform:scale(1.1)}.icon-btn.active svg{animation:heartPulse .4s var(--ease-out-back)}@keyframes heartPulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.back-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all var(--transition);text-decoration:none}.back-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}.back-btn svg{width:20px;height:20px}.audio-btn{flex-shrink:0;width:38px;height:38px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-tertiary);cursor:pointer;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.audio-btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);transform:scale(1.05)}.audio-btn:active{transform:scale(.95)}.audio-btn svg{width:18px;height:18px;transition:transform var(--transition-fast)}.audio-btn:hover svg{transform:scale(1.1)}.audio-btn-small{flex-shrink:0;width:32px;height:32px;border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-tertiary);cursor:pointer;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.audio-btn-small:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.audio-btn-small svg{width:16px;height:16px}.search-container{max-width:640px;margin:0 auto;padding:24px 24px 8px;position:relative;z-index:1}.search-wrapper{position:relative}.search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none;transition:color var(--transition)}.search-icon svg{width:18px;height:18px}#search{width:100%;padding:18px 20px 18px 54px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-secondary);color:var(--text-primary);font-family:var(--font-body);font-size:15px;outline:none;transition:all var(--transition);box-shadow:var(--shadow-subtle)}#search::placeholder{color:var(--text-tertiary);font-style:italic}#search:hover{border-color:var(--border-strong);box-shadow:var(--shadow-medium)}#search:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-medium)}#search:focus+.search-icon,.search-wrapper:focus-within .search-icon{color:var(--accent)}.tabs-container{max-width:640px;margin:0 auto;padding:12px 24px 0;position:relative;z-index:1}.tabs{display:flex;gap:10px;overflow-x:auto;padding:16px 4px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent)}.tabs::-webkit-scrollbar{display:none}.tab{flex-shrink:0;padding:12px 22px;border-radius:100px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:all var(--transition);position:relative;overflow:hidden}.tab:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--accent) 0,var(--accent-hover) 100%);opacity:0;transition:opacity var(--transition)}.tab span{position:relative;z-index:1}.tab:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-subtle)}.tab:active{transform:translateY(0) scale(.97)}.tab.active{background:linear-gradient(135deg,var(--accent) 0,var(--accent-hover) 100%);color:#fff;border-color:transparent;box-shadow:0 4px 16px var(--accent-glow),inset 0 1px 0 hsla(0,0%,100%,.15);transform:translateY(-1px)}.tab.active:hover{color:#fff;box-shadow:0 6px 24px var(--accent-glow),inset 0 1px 0 hsla(0,0%,100%,.15)}main{padding:24px 24px 80px}.content,main{max-width:640px;margin:0 auto;position:relative;z-index:1}.content{padding:8px 24px 140px}.section{display:none}.section.active{display:block;animation:sectionReveal .5s var(--ease-out-expo)}@keyframes sectionReveal{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.section.active .category{animation:categorySlide .5s var(--ease-out-expo) backwards}.section.active .category:first-child{animation-delay:.05s}.section.active .category:nth-child(2){animation-delay:.1s}.section.active .category:nth-child(3){animation-delay:.15s}.section.active .category:nth-child(4){animation-delay:.2s}.section.active .category:nth-child(5){animation-delay:.25s}.section.active .category:nth-child(6){animation-delay:.3s}@keyframes categorySlide{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.category{margin-bottom:48px}.category-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);position:relative}.category-header:after{content:"";position:absolute;bottom:-1px;left:0;width:48px;height:2px;background:var(--accent);border-radius:1px}.category-title{font-family:var(--font-body);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-tertiary)}.tip-box{background:linear-gradient(135deg,var(--accent-soft) 0,var(--accent-softer) 100%);border-radius:var(--radius);border-left:3px solid var(--accent);padding:18px 20px;margin-bottom:20px;display:flex;gap:12px;align-items:flex-start;position:relative;overflow:hidden}.tip-box:before{content:"ヒント";position:absolute;top:8px;right:12px;font-family:var(--font-jp);font-size:10px;color:var(--accent);opacity:.5;letter-spacing:.1em}.tip-text{font-size:.875rem;color:var(--text-secondary);line-height:1.7;font-style:italic}.counter-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:14px;gap:14px;margin-bottom:16px}.counter-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;text-align:center;transition:all var(--transition);cursor:pointer;position:relative;overflow:hidden}.counter-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent) 0,var(--accent-warm) 100%);transform:scaleX(0);transform-origin:left;transition:transform var(--transition)}.counter-card:hover{box-shadow:var(--shadow-medium);transform:translateY(-3px);border-color:var(--border-strong)}.counter-card:hover:before{transform:scaleX(1)}.counter-card:active{transform:translateY(-1px) scale(.98)}.counter-num{font-family:var(--font-mono);font-size:1.6rem;font-weight:600;color:var(--accent);line-height:1}.counter-jp{font-family:var(--font-jp);font-size:1.15rem;color:var(--text-primary);margin-top:10px;letter-spacing:.02em}.card-grid{display:grid;grid-gap:16px;gap:16px}.phrase-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:24px 24px 24px 28px;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-subtle);position:relative;overflow:hidden;margin-bottom:12px}.phrase-card:before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent) 0,var(--accent-warm) 100%);transform:scaleY(0);transform-origin:top;transition:transform var(--transition)}.phrase-card:after{content:"コピー";position:absolute;top:12px;right:12px;font-family:var(--font-jp);font-size:9px;color:var(--accent);opacity:0;transform:translateY(4px);transition:all var(--transition);letter-spacing:.05em}.phrase-card:hover{box-shadow:var(--shadow-medium);transform:translateY(-3px);border-color:var(--border-strong)}.phrase-card:hover:before{transform:scaleY(1)}.phrase-card:hover:after{opacity:.6;transform:translateY(0)}.phrase-card:active{transform:translateY(-1px) scale(.995)}.phrase-card.copied{background:var(--accent-soft)}.phrase-card.copied:before{transform:scaleY(1)}.phrase-card.copied:after{content:"コピーしました";opacity:1}.phrase-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.phrase-content{flex:1 1}.japanese{font-family:var(--font-jp);font-size:1.2rem;font-weight:500;color:var(--text-primary);margin-bottom:10px;line-height:1.6;letter-spacing:.01em}.english{font-family:var(--font-body);font-size:.9rem;color:var(--text-secondary);line-height:1.6}.favorite-btn{flex-shrink:0;width:38px;height:38px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text-tertiary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition)}.favorite-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:scale(1.08)}.favorite-btn:active{transform:scale(.95)}.favorite-btn.active{background:linear-gradient(135deg,var(--accent) 0,var(--accent-hover) 100%);border-color:transparent;color:#fff;box-shadow:0 3px 10px var(--accent-glow)}.favorite-btn.active:hover{transform:scale(1.08);box-shadow:0 5px 16px var(--accent-glow)}.favorite-btn.active svg{animation:heartBeat .35s var(--ease-out-back)}@keyframes heartBeat{0%{transform:scale(1)}25%{transform:scale(.8)}50%{transform:scale(1.2)}to{transform:scale(1)}}.favorite-btn svg{width:18px;height:18px;transition:transform var(--transition-fast)}.favorite-btn-small{flex-shrink:0;width:28px;height:28px;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.favorite-btn-small:hover{background:var(--accent-soft);color:var(--accent)}.favorite-btn-small.active{color:var(--accent)}.favorite-btn-small svg{width:18px;height:18px}.vocab-grid{display:grid;grid-gap:16px;gap:16px}.vocab-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-subtle);display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative;overflow:hidden;margin-bottom:10px}.vocab-card:before{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent) 0,var(--accent-warm) 100%);transform:scaleY(0);transform-origin:center;transition:transform var(--transition)}.vocab-card:hover{box-shadow:var(--shadow-medium);transform:translateY(-2px);border-color:var(--border-strong)}.vocab-card:hover:before{transform:scaleY(1)}.vocab-card:active{transform:translateY(0) scale(.995)}.vocab-card.copied{background:var(--accent-soft)}.vocab-card.copied:before{transform:scaleY(1)}.vocab-content{flex:1 1;display:flex;flex-direction:column;gap:6px}.vocab-jp{font-family:var(--font-jp);font-size:1.15rem;font-weight:500;color:var(--text-primary);line-height:1.5;letter-spacing:.01em}.vocab-romaji{font-size:.75rem;color:var(--text-tertiary);font-style:italic}.vocab-en{font-family:var(--font-body);font-size:.875rem;color:var(--text-secondary);line-height:1.5}.vocab-actions{flex-shrink:0;display:flex;gap:8px;align-items:center}.empty-state{text-align:center;padding:100px 24px;color:var(--text-tertiary)}.empty-state svg{width:72px;height:72px;margin-bottom:24px;opacity:.25;color:var(--accent)}.empty-state p{font-family:var(--font-body);font-size:1rem;margin-bottom:8px;color:var(--text-secondary);line-height:1.7}.empty-state p:before{content:"お気に入りがありません";display:block;font-family:var(--font-jp);font-size:1.1rem;color:var(--text-primary);margin-bottom:12px;opacity:.7}.empty-state small{font-size:.85rem}#toast,.toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(120px) scale(.9);background:linear-gradient(135deg,var(--ink) 0,#2d2a26 100%);color:var(--paper);padding:16px 32px;border-radius:100px;font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:.02em;opacity:0;transition:all .4s var(--ease-out-expo);z-index:1000;box-shadow:0 12px 40px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.15);pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}[data-theme=dark] #toast,[data-theme=dark] .toast{background:linear-gradient(135deg,var(--paper) 0,#2a2825 100%);color:var(--ink)}#toast.show,.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}.hidden{display:none!important}.note{font-family:var(--font-body);font-size:.8rem;color:var(--accent);margin-top:10px;font-style:italic;line-height:1.6;padding-left:12px;border-left:2px solid var(--accent-soft);opacity:.9}@media (max-width:640px){header{padding:16px 20px}.header-content{max-width:100%}.logo-text:after{font-size:.6rem}.content,.search-container,.tabs-container{padding-left:20px;padding-right:20px}.phrase-card{padding:20px 20px 20px 24px}.vocab-card{padding:18px 20px}.counter-card{padding:20px 16px}.category-title{font-size:10px}.tab{padding:10px 18px;font-size:12px}.japanese,.vocab-jp{font-size:1.1rem}}@media (max-width:480px){.counter-grid{grid-template-columns:repeat(2,1fr);gap:10px}.logo-text{font-size:1.2rem}.logo-mark{font-size:20px;border-radius:12px}.icon-btn,.logo-mark{width:40px;height:40px}.japanese,.vocab-jp{font-size:1.05rem}.phrase-card:after{display:none}#toast,.toast{bottom:24px;padding:14px 24px;font-size:13px}}.tab:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@supports (-webkit-touch-callout:none){.tabs,body{-webkit-overflow-scrolling:touch}}::selection{background:var(--accent-soft);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-tertiary)}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}