.vocab-app-wrapper{width:100%;align-items:center;gap:.65rem;padding:0 1rem 2rem;--bg:#f7f8f3;--panel:#ffffff;--ink:#1f2937;--muted:#6b7280;--accent:#0f766e;--line:#d1d5db}.vocab-app,.vocab-app-wrapper{display:flex;flex-direction:column}.vocab-app{width:min(980px,100%);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(15,23,42,.08);overflow:hidden}.vocab-header{padding:1rem 1.25rem;background:linear-gradient(135deg,#0f766e,#0ea5a4);color:#f0fdfa;text-align:center}.vocab-header h1{margin:0;font-size:1.4rem;font-family:inherit}.vocab-header .sub{margin:.35rem 0 0;font-size:.95rem;opacity:.95}.vocab-controls{flex-direction:column;gap:.65rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}.button-row,.vocab-controls{display:flex;align-items:center}.button-row{justify-content:center;gap:.5rem;flex-wrap:wrap;width:100%}.button-row button{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);padding:.55rem .8rem;font-weight:600;cursor:pointer;font-size:.88rem}.button-row button:hover{background:#f8fafc}.button-row button.active-state{background:#dc2626;color:#ffffff;border-color:#b91c1c}.gojuon-wrap{border:1px solid var(--line);border-radius:12px;background:#fcfcfb;padding:.8rem;overflow:auto;max-width:min(620px,94vw);width:100%;max-height:240px}.gojuon-table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:500px;background:#ffffff;border-radius:10px;overflow:hidden}.gojuon-table td{border:1px solid #e5e7eb;padding:0;width:20%}.gojuon-cell{width:100%;border:0;background:transparent;padding:.35rem .2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.06rem;cursor:pointer;color:#111827;font-family:inherit}.gojuon-cell:hover{background:#f8fafc}.gojuon-cell.active{background:#dbeafe;outline:2px solid #2563eb;outline-offset:-2px}.gojuon-kana{font-size:1rem;font-weight:700}.gojuon-roma{font-size:.7rem;color:#4b5563;text-transform:lowercase}.gojuon-empty{height:100%;min-height:2.35rem;background:#f8fafc}.letter-help{padding:.6rem .8rem;border:1px solid #d1d5db;border-radius:.5rem;background:#ffffff;color:#374151;font-size:.84rem;line-height:1.35;max-width:440px;width:100%;text-align:center}.help-line{margin-top:.25rem;font-weight:600;color:#1f2937}.help-example{margin-top:.15rem;color:#4b5563}.network-container{width:100%;height:480px;border-top:1px solid var(--line);background:#ffffff;position:relative}body.dark-mode .vocab-app{background:#111827;border-color:#334155}body.dark-mode .vocab-controls{border-bottom-color:#334155}body.dark-mode .button-row button{color:#f9fafb}body.dark-mode .button-row button,body.dark-mode .gojuon-wrap{background:#1f2937;border-color:#374151}body.dark-mode .gojuon-table td{border-color:#374151}body.dark-mode .gojuon-cell{color:#f9fafb}body.dark-mode .gojuon-cell:hover{background:#374151}body.dark-mode .gojuon-cell.active{background:#1e3a5f;outline-color:#3b82f6}body.dark-mode .letter-help{border-color:#374151;background:#1f2937;color:#d1d5db}body.dark-mode .help-line{color:#f9fafb}body.dark-mode .help-example{color:#9ca3af}body.dark-mode .network-container{border-top-color:#334155;background:#111827}