:root{--color-bg: #ffffff;--color-text: #000000;--color-border: #cccccc;--color-stressed: #d32f2f;--color-placeholder: #999999;--color-error: #d32f2f;--color-success: #2e7d32;--color-warning: #f57c00;--color-button-bg: #f5f5f5;--color-button-hover: #e0e0e0;--spacing-unit: 1rem}@media (prefers-color-scheme: dark){:root{--color-bg: #1e1e1e;--color-text: #ffffff;--color-border: #444444;--color-stressed: #ff6b6b;--color-placeholder: #888888;--color-error: #ff6b6b;--color-success: #66bb6a;--color-warning: #ffa726;--color-button-bg: #333333;--color-button-hover: #444444}}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:var(--color-bg);color:var(--color-text)}body{min-height:100vh}#app{max-width:800px;margin:0 auto;padding:var(--spacing-unit);min-height:100vh;display:flex;flex-direction:column}.container{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1.5);flex:1}.section-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem 1rem}.spinner{width:40px;height:40px;border:4px solid var(--color-border);border-top-color:var(--color-stressed);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-message{font-size:.95rem;color:var(--color-placeholder)}textarea{width:100%;min-height:120px;padding:.75rem;border:1px solid var(--color-border);border-radius:4px;background-color:var(--color-bg);color:var(--color-text);font-family:inherit;font-size:1rem;resize:vertical}textarea:focus{outline:none;border-color:var(--color-stressed);box-shadow:0 0 0 2px #d32f2f1a}textarea:disabled{opacity:.5;cursor:not-allowed}.output-section{display:flex;flex-direction:column;gap:1rem}.output-kana{font-size:2rem;line-height:1.5;font-weight:500;padding:1rem;border-radius:4px;background-color:var(--color-button-bg);word-break:break-word;min-height:3rem;display:flex;flex-wrap:wrap;align-items:center;gap:.2em}.mora{display:inline-block;position:relative;white-space:nowrap}.mora.stressed{font-weight:700;color:var(--color-stressed)}.mora.stressed:before{content:"＼";position:absolute;top:-.8em;left:0;font-size:.6em;color:var(--color-stressed);font-weight:400}.mora.unknown{border:2px solid var(--color-error);padding:0 .2em;border-radius:2px}.mora-gap{width:.3em}.details-toggle{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:none;border:1px solid var(--color-border);border-radius:4px;cursor:pointer;font-size:1rem;color:var(--color-text);transition:background-color .2s}.details-toggle:hover{background-color:var(--color-button-bg)}.details-toggle:before{content:"▼";display:inline-block;transition:transform .2s;transform-origin:center}.details-toggle.collapsed:before{transform:rotate(-90deg)}.details-content{display:flex;flex-direction:column;gap:.75rem;padding:0;max-height:1000px;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;opacity:1}.details-content.hidden{max-height:0;opacity:0;overflow:hidden}.word-entry{padding:.75rem;border-left:3px solid var(--color-border);border-radius:2px}.word-entry.unknown{border-left-color:var(--color-error);background-color:#d32f2f0d}.word-surface{font-weight:600;margin-bottom:.25rem}.word-phones{font-size:.85rem;color:var(--color-placeholder);margin-bottom:.25rem;font-family:monospace}.word-kana{font-size:1.1rem;color:var(--color-text)}.phrases-section{display:flex;flex-direction:column;gap:.75rem}.phrases-title{font-weight:600;font-size:.95rem}.phrases-search-row{display:flex;gap:.75rem;align-items:center}.phrases-search-input{flex:1;padding:.6rem .75rem;border:1px solid var(--color-border);border-radius:4px;background-color:var(--color-bg);color:var(--color-text);font-family:inherit;font-size:.9rem}.phrases-search-input:focus{outline:none;border-color:var(--color-stressed);box-shadow:0 0 0 2px #d32f2f1a}.phrases-search-input::placeholder{color:var(--color-placeholder)}.phrases-count{font-size:.85rem;color:var(--color-placeholder);min-width:50px;text-align:right}.phrases-chips-container{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;scroll-behavior:smooth}.phrase-chip{padding:.5rem .75rem;background-color:var(--color-button-bg);border:1px solid var(--color-border);border-radius:20px;cursor:pointer;font-size:.8rem;color:var(--color-text);font-family:inherit;white-space:nowrap;flex-shrink:0;transition:background-color .2s,border-color .2s}.phrase-chip:hover{background-color:var(--color-button-hover);border-color:var(--color-stressed)}.phrase-chip.active{background-color:var(--color-stressed);color:#fff;border-color:var(--color-stressed);font-weight:600}.phrases-list-container{max-height:50vh;overflow-y:auto;border:1px solid var(--color-border);border-radius:4px;background-color:var(--color-bg)}.phrases-list{display:flex;flex-direction:column}.phrase-row{display:flex;gap:1rem;padding:.75rem;background:none;border:none;border-bottom:1px solid var(--color-border);cursor:pointer;text-align:left;font-family:inherit;transition:background-color .2s}.phrase-row:last-child{border-bottom:none}.phrase-row:hover{background-color:var(--color-button-bg)}.phrase-row:active{opacity:.8}.phrase-en{flex:1;font-weight:500;color:var(--color-text);word-break:break-word}.phrase-ja{flex:0 0 auto;font-size:.85rem;color:var(--color-placeholder);text-align:right;min-width:100px}.phrases-random-btn{flex-shrink:0;white-space:nowrap;padding:.6rem .75rem;background-color:var(--color-button-bg);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;font-size:.9rem;color:var(--color-text);font-family:inherit;transition:background-color .2s,border-color .2s;font-weight:500}.phrases-random-btn:hover:not(:disabled){background-color:var(--color-button-hover);border-color:var(--color-stressed)}.phrases-random-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 480px){.examples-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.output-kana{font-size:1.8rem}textarea{font-size:16px}}@media (max-width: 375px){#app{padding:.75rem}.container{gap:1rem}.output-kana{font-size:1.6rem;padding:.75rem}.mora.stressed:before{top:-.6em;font-size:.5em}.phrases-search-row{flex-direction:column;gap:.5rem}.phrases-search-input{width:100%}.phrases-count{width:100%;text-align:left;min-width:none}.phrases-chips-container{gap:.4rem}.phrase-chip{padding:.4rem .6rem;font-size:.75rem}.phrases-list-container{max-height:40vh}.phrase-row{flex-direction:column;gap:.25rem;padding:.5rem}.phrase-ja{text-align:left;min-width:auto}.phrases-random-btn{padding:.5rem;font-size:.8rem}}.app-header h1{font-size:1.4rem;margin:0 0 .25rem}.app-header p{margin:0;font-size:.9rem;color:var(--color-placeholder);line-height:1.5}.tts-controls-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;padding:.75rem;background-color:var(--color-button-bg);border:1px solid var(--color-border);border-radius:4px}.tts-unavailable{font-size:.85rem;color:var(--color-placeholder);flex:1}.tts-speed-group{display:flex;align-items:center;gap:.5rem;font-size:.85rem}.tts-speed-group label{font-weight:500}.tts-speed-btn{padding:.4rem .6rem;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:3px;cursor:pointer;font-size:.8rem;color:var(--color-text);font-family:inherit;transition:background-color .2s,border-color .2s}.tts-speed-btn:hover{background-color:var(--color-button-hover)}.tts-speed-btn.active{background-color:var(--color-stressed);color:var(--color-bg);border-color:var(--color-stressed);font-weight:600}.tts-speak-btn{padding:.5rem .75rem;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:3px;cursor:pointer;font-size:.85rem;color:var(--color-text);font-family:inherit;transition:background-color .2s,border-color .2s;white-space:nowrap}.tts-speak-btn:hover:not(:disabled){background-color:var(--color-button-hover);border-color:var(--color-stressed)}.tts-speak-btn:disabled{opacity:.5;cursor:not-allowed}.tts-speak-btn:active:not(:disabled){opacity:.8}@media (max-width: 480px){.tts-controls-row{flex-direction:column;gap:.5rem}.tts-speed-group{width:100%;justify-content:center}.tts-speak-btn{flex:1;min-width:120px}}@media (max-width: 375px){.tts-controls-row{gap:.4rem;padding:.5rem}.tts-speed-group{font-size:.75rem}.tts-speed-btn{padding:.35rem .5rem;font-size:.75rem}.tts-speak-btn{padding:.4rem .6rem;font-size:.75rem}}.recognition-unavailable{font-size:.85rem;color:var(--color-placeholder);flex:1}.check-section{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;background-color:var(--color-button-bg);border:1px solid var(--color-border);border-radius:4px;min-height:0}.interim-result{font-size:.95rem;color:var(--color-placeholder);font-style:italic}.check-result{display:flex;flex-direction:column;gap:.75rem}.result-transcript{font-size:.9rem;color:var(--color-text)}.result-match-rate{font-size:1.8rem;font-weight:700;text-align:center;padding:.5rem}.result-words{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}.matched-word{padding:.3rem .6rem;background-color:var(--color-success);color:#fff;border-radius:3px;font-size:.9rem;font-weight:500}.unmatched-word{padding:.3rem .6rem;background-color:var(--color-error);color:#fff;border-radius:3px;font-size:.9rem;font-weight:700}.result-verdict{font-size:1rem;font-weight:600;text-align:center;color:var(--color-text);padding:.5rem}.error-message{font-size:.9rem;color:var(--color-error);padding:.5rem;text-align:center}.check-section:empty{display:none}