:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#17211f;background:#f7f3ea;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--matched: #16704e;--matched-bg: #e8f6ef;--approximate: #966200;--approximate-bg: #fff2c6;--target-only: #b13e35;--target-only-bg: #fde8e4;--japanese-only: #226390;--japanese-only-bg: #e7f1fa}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 10% 4%,rgba(232,195,81,.25),transparent 24rem),radial-gradient(circle at 88% 16%,rgba(42,151,162,.16),transparent 28rem),linear-gradient(180deg,#fffdf8,#f0e9dc)}button{font:inherit;cursor:pointer}.skip-link{position:absolute;left:-999px;top:10px}.skip-link:focus{left:10px;z-index:20;background:#fff;padding:8px 10px;border-radius:6px}.app{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:28px 0 34px}.app__header{min-height:250px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:26px;align-items:end;padding:28px 0 22px}.app__title{margin:0;font-size:clamp(2.8rem,7vw,5.7rem);line-height:1;letter-spacing:0;overflow-wrap:anywhere}.app__tagline{max-width:760px;margin:16px 0 0;color:#465651;font-size:1.04rem;line-height:1.7;overflow-wrap:anywhere}.app__scope{padding:18px;background:#ffffffad;border:1px solid rgba(23,33,31,.12);border-radius:8px}.app__scope-label,.app__scope-version{display:block}.app__scope-label{color:#253330;font-weight:900}.app__scope-version{margin-top:8px;color:#61706b;font-size:.86rem}.app__controls{position:sticky;top:0;z-index:5;padding:12px 0;background:#f7f3eae6;backdrop-filter:blur(14px);border-block:1px solid rgba(23,33,31,.08)}.app__controls-title{margin:0 0 10px;color:#53625d;font-size:.82rem;text-transform:uppercase}.app__scope-target{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;color:#465651;overflow-wrap:anywhere}.app__scope-target-label{font-weight:900;color:#1f2e2b}.segment-control{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}.segment-control__button{min-height:86px;text-align:left;display:grid;gap:5px;align-content:start;padding:12px;color:#24312f;background:#ffffffc2;border:1px solid rgba(23,33,31,.14);border-radius:8px}.segment-control__button.is-active{color:#fff;background:#20302d;border-color:#20302d}.segment-control__short{width:36px;min-height:26px;display:grid;place-items:center;border-radius:6px;background:#ebcb5a;color:#1f2d2a;font-size:.76rem;font-weight:950}.segment-control__label{font-weight:900;line-height:1.25}.legend{margin:20px 0;padding:16px;background:#ffffffa8;border:1px solid rgba(23,33,31,.1);border-radius:8px}.legend__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.legend__title{margin:0;font-size:1rem}.legend__toggle,.detail-panel__close{border:1px solid rgba(23,33,31,.14);background:#fff;border-radius:6px;min-height:34px;padding:0 10px;font-weight:850;white-space:normal}.legend__list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0;margin:14px 0 0}.legend__item{display:flex;gap:10px;padding:12px;border-radius:8px;background:var(--overlay-bg);border:1px solid color-mix(in srgb,var(--overlay) 42%,transparent)}.legend__label{color:var(--overlay)}.legend__desc{margin:4px 0 0;color:#4f5e59;font-size:.86rem;line-height:1.45;overflow-wrap:anywhere}.overlay-badge{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;color:var(--overlay);background:var(--overlay-bg);border:1px solid color-mix(in srgb,var(--overlay) 45%,transparent);border-radius:999px;font-weight:950}.overlay-badge--matched,.legend__item--matched,.phoneme-card--matched,.detail-panel--matched{--overlay: var(--matched);--overlay-bg: var(--matched-bg)}.overlay-badge--approximate,.legend__item--approximate,.phoneme-card--approximate,.detail-panel--approximate{--overlay: var(--approximate);--overlay-bg: var(--approximate-bg)}.overlay-badge--targetOnly,.legend__item--targetOnly,.phoneme-card--targetOnly,.detail-panel--targetOnly{--overlay: var(--target-only);--overlay-bg: var(--target-only-bg)}.overlay-badge--japaneseOnly,.legend__item--japaneseOnly,.phoneme-card--japaneseOnly,.detail-panel--japaneseOnly{--overlay: var(--japanese-only);--overlay-bg: var(--japanese-only-bg)}.phoneme-grid{display:grid;gap:22px}.phoneme-grid__category{padding:16px;background:#ffffff80;border:1px solid rgba(23,33,31,.08);border-radius:8px}.phoneme-grid__category-title{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 12px;font-size:1.08rem}.phoneme-grid__category-count{color:#62706b;font-size:.88rem}.phoneme-grid__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}.phoneme-card{min-height:128px;position:relative;display:grid;gap:8px;align-content:start;text-align:left;padding:12px;color:#1d2825;background:linear-gradient(180deg,#fff 0%,var(--overlay-bg) 100%);border:1px solid color-mix(in srgb,var(--overlay) 38%,rgba(23,33,31,.08));border-radius:8px}.phoneme-card.is-active{outline:3px solid color-mix(in srgb,var(--overlay) 45%,transparent)}.phoneme-card__badge{position:absolute;top:10px;right:10px}.phoneme-card__ipa{color:var(--overlay);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1.55rem;font-weight:950;line-height:1}.phoneme-card__kana{width:fit-content;min-width:38px;min-height:30px;display:grid;place-items:center;padding:0 8px;background:#ffffffbf;border:1px solid rgba(23,33,31,.1);border-radius:7px;font-weight:950}.phoneme-card__labels{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.phoneme-card__overlay-label,.phoneme-card__category{width:fit-content;max-width:100%;border-radius:999px;padding:3px 7px;font-size:.76rem;font-weight:900;line-height:1.25}.phoneme-card__overlay-label{color:var(--overlay);background:#ffffffc2;border:1px solid color-mix(in srgb,var(--overlay) 38%,transparent)}.phoneme-card__category{color:#52625d;background:#ffffff85;border:1px solid rgba(23,33,31,.08)}.app__footer{margin-top:24px;color:#55635f;font-size:.86rem;line-height:1.55}.app__meta{display:flex;flex-wrap:wrap;gap:6px}.detail-panel__backdrop{position:fixed;inset:0;z-index:30;display:grid;place-items:end;background:#0c121152}.detail-panel{width:min(520px,100%);max-height:100vh;overflow:auto;padding:20px;background:#fffdf8;border-left:6px solid var(--overlay);box-shadow:0 18px 56px #0000003d}.detail-panel__header{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center}.detail-panel__title{margin:0;font-size:1.4rem}.detail-panel__meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.detail-panel__meta div,.detail-panel__section,.detail-panel__examples>div{padding:12px;background:var(--overlay-bg);border-radius:8px}.detail-panel__meta dt{color:#566660;font-size:.78rem;font-weight:900}.detail-panel__meta dd{margin:4px 0 0;font-weight:900}.detail-panel__ipa{color:var(--overlay);font-family:SFMono-Regular,Consolas,monospace;font-size:1.3rem}.detail-panel__section h3,.detail-panel__examples h3{margin:0;font-size:.95rem}.detail-panel__section p,.detail-panel__example{color:#44534e;line-height:1.6}.detail-panel__examples{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}.detail-panel__example-text,.detail-panel__example-gloss{display:block}.detail-panel__example-text{font-weight:950;color:#1f2d2a}@media (max-width: 900px){.app__header{grid-template-columns:1fr;min-height:auto}.segment-control{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.segment-control__button{min-width:152px;scroll-snap-align:start}.legend__list{grid-template-columns:repeat(2,1fr)}}@media (max-width: 560px){.app{width:min(100% - 20px,1180px);padding-top:14px}.app__title{font-size:2.25rem;line-height:1.08}.app__tagline{font-size:.95rem}.legend__header{align-items:flex-start}.legend__toggle{max-width:9.5rem}.legend__list,.detail-panel__meta,.detail-panel__examples{grid-template-columns:1fr}.phoneme-grid__cards{grid-template-columns:repeat(2,minmax(0,1fr))}.phoneme-card{min-height:120px}}