.vocab-app-wrapper{--bg:#f7f8f3;--panel:#fff;--ink:#1f2937;--muted:#6b7280;--accent:#0f766e;--line:#d1d5db;flex-direction:column;align-items:center;gap:.65rem;width:100%;min-width:0;padding:0 1rem 1rem;display:flex}.vocab-app{background:var(--panel);border:1px solid var(--line);border-radius:16px;flex-direction:column;width:min(900px,100%);max-width:100%;display:flex;overflow:hidden;box-shadow:0 16px 40px #0f172a14}.vocab-header{color:#f0fdfa;text-align:center;background:linear-gradient(135deg,#0f766e,#0ea5a4);padding:1rem 1.25rem;position:relative}.study-title-row{text-align:left;justify-content:space-between;align-items:center;gap:1rem;display:flex}.study-title-copy{min-width:0}.vocab-header h1{margin:0;font-family:inherit;font-size:1.4rem}.vocab-header .sub{opacity:.95;margin:.35rem 0 0;font-size:.95rem}.vocab-options{z-index:6;position:relative}.vocab-options-toggle{width:2.25rem;height:2.25rem;color:var(--ink);cursor:pointer;background:#fff;border:1px solid #1f2b2a59;border-radius:8px;place-items:center;font-size:1.25rem;line-height:1;display:grid}.vocab-options-toggle:hover,.vocab-options-toggle[aria-expanded=true]{background:#ccfbf1}.vocab-options-menu{border:1px solid var(--line);background:#fff;border-radius:8px;flex-direction:column;gap:.15rem;width:min(13rem,100vw - 2rem);padding:.35rem;display:flex;position:absolute;top:calc(100% + .5rem);right:0;box-shadow:0 12px 28px #0f172a33}.vocab-options-menu button{color:var(--ink);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:5px;padding:.6rem .7rem;font-size:.9rem;font-weight:600}.vocab-options-menu button:hover,.vocab-options-menu button:focus-visible{color:#134e4a;background:#ccfbf1}.vocab-workspace{width:100%}.vocab-network-area{grid-template-columns:minmax(220px,230px) minmax(0,1fr);column-gap:1rem;min-width:0;display:grid}.writing-panel{border-top:1px solid var(--line);background:#fcfcfb;flex-direction:column;grid-column:1/-1;gap:.65rem;min-width:0;padding:0 1rem 1rem;display:flex}.writing-panel-header{justify-content:flex-start;align-items:center;gap:.35rem;display:flex}.writing-panel-header h2{color:var(--ink);margin:0;font-size:1rem}.writing-panel-header button{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;border-radius:8px;padding:.4rem .6rem;font-size:.78rem;font-weight:600}.writing-panel-header button:disabled{opacity:.5;cursor:not-allowed}.writing-canvas{aspect-ratio:1;border:1px solid var(--line);background-color:var(--panel);cursor:crosshair;touch-action:none;background-image:linear-gradient(90deg,#0000 calc(50% - .5px),#d1d5db calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),linear-gradient(#0000 calc(50% - .5px),#d1d5db calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px));background-position:50%;background-repeat:no-repeat;background-size:calc(100% - 10px) calc(100% - 10px);border-radius:8px;align-self:center;width:100%;height:8rem;display:block}.kana-panel{border-right:1px solid var(--line);background:#fcfcfb;flex-direction:column;gap:.8rem;padding:1rem;display:flex}.button-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;width:100%;display:flex}.button-row button{border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:10px;padding:.55rem .8rem;font-size:.88rem;font-weight:600}.button-row button:hover{background:#f8fafc}.button-row button.active-state{color:#fff;background:#dc2626;border-color:#b91c1c}.gojuon-wrap{width:100%}.kana-selector{flex-direction:row;align-self:center;gap:.65rem;width:min(100%,190px);display:flex}.kana-selector label{color:var(--muted);text-align:center;flex-direction:column;flex:1;gap:.3rem;font-size:.78rem;font-weight:700;display:flex}.kana-selector select{border:1px solid var(--line);background:var(--panel);width:100%;color:var(--ink);font:inherit;text-align:center;cursor:pointer;border-radius:8px;padding:.55rem .65rem;font-size:.9rem}.kana-selector select:focus{outline-offset:1px;outline:2px solid #2563eb}.network-container{background:#fff;min-width:0;min-height:0;overflow:visible}.vocabulary-word-list{overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;flex-direction:column;gap:.8rem;height:14rem;padding:1rem;display:flex;overflow-y:auto}.vocabulary-word-list::-webkit-scrollbar{display:none}.vocabulary-word-list.dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.vocabulary-entry{border:1px solid var(--line);text-align:center;background:#fcfcfb;border-radius:12px;flex-direction:column;flex:none;align-self:flex-start;align-items:center;gap:.2rem;width:fit-content;max-width:100%;height:auto;min-height:0;padding:.375rem .95rem;transition:transform .12s,box-shadow .12s,border-color .12s,background-color .12s;display:flex}.vocabulary-entry.selected{background:#fff;border-color:#0369a1}.vocabulary-entry.speaking .vocabulary-entry-word{color:#7c2d12;background:#fde68a;border-radius:999px;padding:.2rem .6rem}.vocabulary-entry-field{flex-direction:column;align-items:center;gap:0;width:100%;display:flex}.vocabulary-entry-definition-line{white-space:nowrap;justify-content:center;align-items:center;gap:.5rem;width:100%;display:flex}.vocabulary-entry-line{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;width:100%;display:flex}.vocabulary-entry-word{color:#0f766e;width:max-content;min-width:0;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;flex-direction:column;flex:none;align-items:center;gap:0;margin:0;padding:.2rem .45rem;font-size:1.35rem;font-weight:700;display:flex}.vocabulary-entry-word:hover,.vocabulary-entry-word:focus-visible{outline-offset:-2px;background:#e0f2fe;outline:2px solid #0284c7}.vocabulary-entry-word[aria-pressed=true]{outline-offset:-2px;background:#bae6fd;outline:2px solid #0369a1}.vocabulary-entry-romaji{color:#d97706;font-weight:600}.vocabulary-entry-meaning{color:#ca8a04;font-weight:600}@media (max-width:640px){.vocab-network-area{grid-template-columns:minmax(0,1fr)}}.tile-action:hover,.tile-show:hover{filter:brightness(1.06)}.letter-help{color:#374151;text-align:center;background:#fff;border:1px solid #d1d5db;border-radius:.5rem;width:100%;padding:.6rem .8rem;font-size:.84rem;line-height:1.35}.help-line{color:#1f2937;margin-top:.25rem;font-weight:600}.help-example{color:#4b5563;margin-top:.15rem}body.dark-mode .vocab-app{background:#111827;border-color:#334155}body.dark-mode .vocab-options-toggle,body.dark-mode .vocab-options-menu{color:#dbeafe;background:#111827;border-color:#334155}body.dark-mode .vocab-options-toggle:hover,body.dark-mode .vocab-options-toggle[aria-expanded=true],body.dark-mode .vocab-options-menu button:hover,body.dark-mode .vocab-options-menu button:focus-visible{color:#dbeafe;background:#172554}body.dark-mode .vocab-options-menu button{color:#dbeafe}body.dark-mode .kana-panel{background:#111827;border-right-color:#334155}body.dark-mode .writing-panel{background:#111827;border-top-color:#334155}body.dark-mode .writing-panel-header h2{color:#f9fafb}body.dark-mode .writing-panel-header button{color:#f9fafb;background:#1f2937;border-color:#374151}body.dark-mode .writing-canvas{background-color:#1f2937;background-image:linear-gradient(90deg,#0000 calc(50% - .5px),#4b5563 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),linear-gradient(#0000 calc(50% - .5px),#4b5563 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px));border-color:#374151}body.dark-mode .button-row button,body.dark-mode .kana-selector select{color:#f9fafb;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{color:#d1d5db;background:#1f2937;border-color:#374151}body.dark-mode .help-line{color:#f9fafb}body.dark-mode .help-example{color:#9ca3af}body.dark-mode .network-container{background:#111827}body.dark-mode .vocabulary-entry{background:#111827;border-color:#374151}body.dark-mode .vocabulary-entry.selected{background:#1f2937;border-color:#67e8f9}body.dark-mode .vocabulary-entry.speaking .vocabulary-entry-word{color:#7c2d12;background:#fde68a}body.dark-mode .vocabulary-entry-word:hover,body.dark-mode .vocabulary-entry-word:focus-visible{background:#1e3a5f}body.dark-mode .vocabulary-entry-word[aria-pressed=true]{color:#0f172a;background:#67e8f9;outline-color:#67e8f9}body.dark-mode .vocabulary-entry-romaji{color:#cbd5e1}body.dark-mode .vocabulary-entry-meaning{color:#eab308}