:root{--indigo: #4f46e5;--indigo-strong: #4338ca;--on-accent: #ffffff;--rt: #7c3aed;--bg: #fcfcfd;--surface: #ffffff;--surface-2: #f8f9fc;--ink: #1f2330;--muted: #6b7280;--line: #d8dbe3;--hl: #e9e7fb;--font-jp: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}:root[data-theme=dark]{--indigo: #818cf8;--indigo-strong: #a5b4fc;--on-accent: #10121a;--rt: #c4b5fd;--bg: #14161d;--surface: #1b1e27;--surface-2: #20242e;--ink: #e7e9f0;--muted: #9aa1b0;--line: #2c303b;--hl: #2e2b55}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-ui);color:var(--ink);background:var(--bg)}.app{height:100%;display:flex;flex-direction:column;padding:clamp(.75rem,2vw,1.5rem);gap:.85rem;max-width:1100px;margin:0 auto}.app-header{display:flex;align-items:center;justify-content:space-between}.app-header h1{margin:0;font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;letter-spacing:-.02em}.app-kanji{font-family:var(--font-jp);color:var(--indigo);font-weight:700}.menu{position:relative}.menu-button{font-size:1.4rem;line-height:1;padding:.4rem .6rem;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:10px;cursor:pointer}.menu-panel{position:absolute;z-index:20;right:0;top:calc(100% + .4rem);width:min(20rem,80vw);display:flex;flex-direction:column;gap:1rem;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px #0000002e}.menu-section h3{margin:0 0 .5rem;font-size:.95rem}.menu-section ol{margin:0;padding-left:1.1rem;font-size:.85rem;color:var(--muted);line-height:1.5}.theme-toggle{display:flex;gap:.5rem}.theme-toggle button{flex:1;padding:.5rem;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:.9rem}.theme-toggle button.active{background:var(--indigo);color:var(--on-accent);border-color:var(--indigo)}.search-area{position:relative}.searchbar{display:flex;gap:.5rem;align-items:stretch}.searchbar-input{flex:1;min-width:0;padding:.75rem 1.25rem;font-size:1rem;color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:999px;outline:none;transition:border-color .15s}.searchbar-input:focus{border-color:var(--indigo)}.searchbar-btn{padding:0 1.5rem;font-size:1rem;font-weight:600;color:var(--on-accent);background:var(--indigo);border:none;border-radius:999px;cursor:pointer;transition:background .15s}.searchbar-btn:hover:not(:disabled){background:var(--indigo-strong)}.searchbar-btn:disabled{opacity:.6;cursor:default}.demo-note{margin:.5rem 0 0;font-size:.8rem;color:var(--muted)}.error{margin:.5rem 0 0;color:#dc2626;font-size:.9rem}.now-playing-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.5rem}.now-playing{margin:0;font-weight:600;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.actions{display:flex;gap:.5rem;flex-shrink:0}.actions button{padding:.4rem .85rem;font-size:.85rem;font-weight:600;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;cursor:pointer}.actions button:hover{border-color:var(--indigo);color:var(--indigo)}.menu-credit{margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}.menu-credit p{margin:0;font-size:.8rem;color:var(--muted)}.results{position:absolute;z-index:10;left:0;right:0;margin:.4rem 0 0;padding:.25rem;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px #00000029;max-height:50vh;overflow-y:auto}.results li button{display:flex;flex-direction:column;gap:.15rem;width:100%;text-align:left;padding:.6rem .75rem;background:none;color:var(--ink);border:none;border-radius:10px;cursor:pointer}.results li button:hover{background:var(--surface-2)}.result-title{font-weight:600}.result-meta{font-size:.8rem;color:var(--muted)}.panes{flex:1;min-height:0;display:flex;gap:1rem}.pane{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;border:2px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}.pane-title{margin:0;padding:.6rem 1rem;font-size:1.05rem;font-weight:700;border-bottom:2px solid var(--line);background:var(--surface-2)}.pane-inner{flex:1;min-height:0;display:flex}.pane-body{flex:1;min-width:0;overflow-y:auto;padding:1rem 1.25rem;background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 2.25rem;background-position:0 1rem}.pane-scroll{display:flex;flex-direction:column;justify-content:space-between;border-left:2px solid var(--line);background:var(--surface-2)}.pane-scroll button{border:none;background:none;cursor:pointer;font-size:1rem;color:var(--muted);padding:.5rem .6rem}.pane-scroll button:hover{color:var(--indigo)}.empty{color:var(--muted);font-style:italic}.lyric-line{margin:0;line-height:2.25rem;font-family:var(--font-jp);font-size:1.15rem;white-space:pre-wrap}.lyric-blank{height:1.1rem}.lyric-word{cursor:pointer;border-radius:5px;padding:0 1px;transition:background .12s}.lyric-word:hover,.lyric-word.active{background:var(--hl)}ruby rt{font-size:.6em;color:var(--rt);font-weight:600}.g-word{border-bottom:1px solid var(--line);padding:.35rem 0;border-radius:6px;transition:background .15s,box-shadow .15s}.g-word.active{background:var(--hl);box-shadow:inset 3px 0 0 var(--indigo);padding-left:.5rem}.g-word>summary{display:flex;align-items:baseline;gap:.5rem;cursor:pointer;list-style:none;line-height:1.9rem}.g-word>summary::-webkit-details-marker{display:none}.g-word>summary:before{content:"▸";color:var(--muted);font-size:.8rem;transition:transform .15s}.g-word[open]>summary:before{transform:rotate(90deg)}.g-kanji{font-family:var(--font-jp);font-size:1.25rem;font-weight:700}.g-reading{font-family:var(--font-jp);color:var(--indigo);font-size:.95rem}.g-dash{color:var(--muted)}.g-meaning{color:var(--ink)}.g-breakdown{margin:.25rem 0 .4rem 1.4rem;padding:.4rem .6rem;border-left:2px solid var(--line);background:var(--surface-2);border-radius:0 8px 8px 0}.g-kanji-row{display:flex;align-items:baseline;gap:.5rem;line-height:1.8rem;font-size:.9rem}.g-kanji-char{font-family:var(--font-jp);font-weight:700;min-width:1.4em}.g-kanji-reading{font-family:var(--font-jp);color:var(--indigo);min-width:6em}.g-kanji-meaning{color:var(--muted)}@media (max-width: 640px){.panes{flex-direction:column}}@media print{.menu,.search-area,.actions,.pane-scroll{display:none!important}.app{height:auto;max-width:none;display:block}.app-header{margin-bottom:.5rem}.panes{display:block}.pane{border:none;border-radius:0;margin-bottom:1.5rem;break-inside:auto}.pane-title{border:none;border-bottom:2px solid #000;background:none;padding-left:0}.pane-inner{display:block}.pane-body{overflow:visible;background:none;padding:.5rem 0}.g-word>summary:before{content:""}.lyric-line,.g-word,.g-kanji-row{break-inside:avoid}}