.ngk{--ngk-bg: #0a0e14;--ngk-panel: #171c24;--ngk-key: rgba(31, 39, 51, .92);--ngk-key-hi: rgba(42, 52, 65, .98);--ngk-key-border: rgba(120, 140, 165, .16);--ngk-text: #e9f0f6;--ngk-muted: #8b97a6;--ngk-cyan: #22d3ee;--ngk-green: #34d399;--ngk-blue: #4f8cff;--ngk-gold: #e5c07b;--ngk-violet: #a78bfa;position:relative;display:inline-block;background:linear-gradient(180deg,#232c388c,#0d1117bf),var(--ngk-panel);border:1px solid var(--ngk-key-border);border-radius:20px;padding:20px 20px 18px;box-shadow:0 24px 60px #0000008c,0 2px #ffffff0a inset,0 0 0 1px #ffffff05 inset;font-family:Noto Sans,DejaVu Sans,system-ui,sans-serif;user-select:none;max-width:100%;box-sizing:border-box;overflow:visible}.ngk:before{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1px;background:linear-gradient(120deg,#22d3ee8c,#4f8cff26 35%,#34d39980 65%,#22d3ee8c);background-size:300% 300%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ngk-border 9s linear infinite;pointer-events:none;opacity:.7}@keyframes ngk-border{to{background-position:300% 0}}.ngk__group{position:relative;border-radius:14px;padding:8px 8px 6px;margin-bottom:12px}.ngk__group:after{content:"";position:absolute;inset:0;border-radius:14px;background:radial-gradient(120% 90% at 50% 120%,var(--glow, transparent) 0%,transparent 62%);opacity:.16;pointer-events:none;z-index:0}.ngk__group--vow{--glow: var(--ngk-cyan)}.ngk__group--tone{--glow: var(--ngk-green)}.ngk__group--cons{--glow: var(--ngk-blue)}.ngk__group--acc{--glow: var(--ngk-gold)}.ngk__group--num{--glow: var(--ngk-blue)}.ngk__group:last-of-type{margin-bottom:10px}.ngk__row{position:relative;z-index:1;display:flex;gap:9px;margin-bottom:9px;justify-content:center;flex-wrap:wrap}.ngk__row:last-child{margin-bottom:0}.ngk__grid{position:relative;z-index:1;display:grid;gap:9px;justify-items:stretch;align-items:stretch}.ngk__grid--vow{grid-template-columns:repeat(8,minmax(0,1fr))}.ngk__grid--cons{grid-template-columns:repeat(12,minmax(0,1fr))}.ngk__grid--acc{grid-template-columns:repeat(8,minmax(0,1fr))}.ngk__grid--num{grid-template-columns:repeat(10,minmax(0,1fr))}.ngk__grid--punc{grid-template-columns:repeat(8,minmax(0,1fr))}.ngk__grid--tone{grid-template-columns:repeat(4,minmax(0,1fr));max-width:470px;margin:0 auto}.ngk__group .ngk__grid+.ngk__grid{margin-top:9px}.ngk__key{position:relative;min-width:0;height:58px;padding:0 8px;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;color:var(--ngk-text);background:linear-gradient(180deg,#ffffff1a,#ffffff05 30%,#0000001a),var(--ngk-key);border:1px solid var(--ngk-key-border);border-radius:13px;cursor:pointer;box-shadow:0 3px 7px #00000073,0 1px #ffffff1a inset,0 -2px 5px #0000004d inset;transition:transform 90ms ease,background .14s ease,box-shadow .16s ease,border-color .14s ease;-webkit-tap-highlight-color:transparent}.ngk__key:before{content:"";position:absolute;left:8px;right:8px;top:3px;height:40%;border-radius:10px 10px 14px 14px;background:linear-gradient(180deg,#ffffff1f,#fff0);pointer-events:none;opacity:.7}.ngk__key:hover{background:linear-gradient(180deg,#ffffff24,#ffffff08 32%,#00000014),var(--ngk-key-hi);transform:translateY(-2px);box-shadow:0 8px 18px #00000080,0 1px #ffffff24 inset,0 -2px 5px #00000047 inset}.ngk__key:focus-visible{outline:2px solid var(--ngk-blue);outline-offset:2px}.ngk__key:active{transform:translateY(2px);box-shadow:0 1px 2px #00000080,0 3px 8px #0000008c inset}.ngk__key--vow{box-shadow:0 0 0 1px #22d3ee1a inset,0 2px 8px #00000059}.ngk__key--vow:hover{border-color:#22d3ee99;box-shadow:0 0 16px #22d3ee59,0 0 0 1px #22d3ee59 inset}.ngk__key--cons:hover{border-color:#4f8cff99;box-shadow:0 0 16px #4f8cff4d,0 0 0 1px #4f8cff4d inset}.ngk__key--acc{font-size:1.25rem}.ngk__key--acc:hover{border-color:#e5c07b99;box-shadow:0 0 16px #e5c07b4d,0 0 0 1px #e5c07b4d inset}.ngk__key--num{font-size:1.25rem;color:#cfd8e3}.ngk__key--num:hover{border-color:#4f8cff99;box-shadow:0 0 16px #4f8cff47,0 0 0 1px #4f8cff47 inset}.ngk__key--special{color:#fff;border-color:#e5c07b73;box-shadow:0 0 14px #e5c07b2e,0 0 0 1px #e5c07b4d inset}.ngk__key--special:after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);background-size:250% 100%;opacity:0;pointer-events:none}.ngk__key--special:hover{border-color:var(--ngk-gold);box-shadow:0 0 22px #e5c07b80,0 0 0 1px #e5c07b8c inset}.ngk__key--special:hover:after{animation:ngk-shimmer .9s ease}@keyframes ngk-shimmer{0%{background-position:120% 0;opacity:0}35%{opacity:.9}to{background-position:-120% 0;opacity:0}}.ngk__key--tone{color:var(--ngk-green);border-color:#34d39959;box-shadow:0 0 0 1px #34d39938 inset,0 2px 8px #00000059;font-size:1.55rem}.ngk__key--tone:hover{border-color:var(--ngk-green);box-shadow:0 0 18px #34d39973,0 0 0 1px #34d39980 inset}.ngk__key--tone .ngk__tone-name{position:absolute;bottom:4px;font-size:.55rem;color:var(--ngk-muted);letter-spacing:.02em}.ngk__key--action{color:var(--ngk-muted);font-size:.9rem;min-width:64px;height:56px}.ngk__key--action:before{content:none}.ngk__key--action{background:linear-gradient(180deg,#ffffff0d,#fff0 42%),var(--ngk-key);border-radius:12px;box-shadow:0 2px 6px #00000059,0 1px #ffffff0d inset}.ngk__key--action:hover{transform:translateY(-1px);border-color:#788ca547;background:linear-gradient(180deg,#ffffff12,#fff0 45%),var(--ngk-key-hi);box-shadow:0 4px 10px #0006,0 1px #ffffff0f inset}.ngk__key--action:active{transform:translateY(2px);box-shadow:0 1px 3px #00000080 inset}.ngk__key--space{min-width:250px;letter-spacing:.12em}.ngk__key--wide{min-width:92px}.ngk__key--shift.is-on{color:var(--ngk-blue);border-color:var(--ngk-blue);box-shadow:0 0 16px #4f8cff66,0 0 0 1px #4f8cff73 inset}.ngk__section-label{position:relative;z-index:1;color:var(--ngk-muted);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;margin:0 0 8px;text-align:center}.ngk__section-label .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:middle;box-shadow:0 0 8px 1px currentColor}.ngk__group--vow .dot{color:var(--ngk-cyan)}.ngk__group--tone .dot{color:var(--ngk-green)}.ngk__group--cons .dot{color:var(--ngk-blue)}.ngk__group--acc .dot{color:var(--ngk-gold)}.ngk__group--num .dot{color:var(--ngk-blue)}.ngk__tip{position:fixed;z-index:9999;min-width:150px;max-width:240px;background:#0a0e14f7;border:1px solid rgba(120,140,165,.28);border-radius:12px;padding:10px 12px;box-shadow:0 16px 40px #0009,0 0 0 1px #ffffff08 inset;color:#e9f0f6;pointer-events:none;font-family:Noto Sans,DejaVu Sans,system-ui,sans-serif;opacity:0;transform:translateY(4px) scale(.98);transition:opacity .12s ease,transform .12s ease}.ngk__tip.is-on{opacity:1;transform:translateY(0) scale(1)}.ngk__varpop{position:fixed;z-index:10000;display:flex;gap:5px;padding:6px;background:linear-gradient(180deg,#1b2230,#10151d);border:1px solid rgba(34,211,238,.35);border-radius:14px;box-shadow:0 18px 44px #000000a6,0 0 0 1px #22d3ee26 inset}.ngk__varkey{min-width:44px;height:48px;padding:0 8px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#e9f0f6;cursor:pointer;background:var(--ngk-key);border:1px solid var(--ngk-key-border);border-radius:10px;user-select:none;touch-action:manipulation;font-family:Noto Sans,DejaVu Sans,system-ui,sans-serif}.ngk__varkey:hover,.ngk__varkey.is-active,.ngk__varkey:active{color:#04121a;font-weight:700;background:#2fd3e8;border-color:#22d3ee;box-shadow:0 0 16px #22d3ee80}.ngk__key--hasvar:after{content:"\b7\b7\b7";position:absolute;top:1px;right:5px;font-size:.6rem;line-height:1;letter-spacing:.5px;color:#e9f0f673;pointer-events:none}.ngk__tip .tip-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}.ngk__tip .tip-glyph{font-size:1.6rem;line-height:1}.ngk__tip .tip-ipa{color:#34d399;font-size:.95rem;font-family:DejaVu Sans,sans-serif}.ngk__tip .tip-desc{color:#8b97a6;font-size:.74rem;line-height:1.35;margin-bottom:5px}.ngk__tip .tip-ex{font-size:.8rem}.ngk__tip .tip-ex b{color:#22d3ee;font-weight:600}.ngk__tip .tip-ex .arrow{color:#8b97a6;margin:0 5px}@media(prefers-reduced-motion:reduce){.ngk:before{animation:none}.ngk__key,.ngk__tip{transition:none}.ngk__key:hover,.ngk__key:active{transform:none}.ngk__key--special:hover:after{animation:none}}@media(max-width:680px){.ngk__grid--cons{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(max-width:560px){.ngk{padding:14px}.ngk__key{height:50px;font-size:1.2rem;padding:0 4px}.ngk__grid{gap:7px}.ngk__grid--vow{grid-template-columns:repeat(4,minmax(0,1fr))}.ngk__grid--cons{grid-template-columns:repeat(6,minmax(0,1fr))}.ngk__grid--acc{grid-template-columns:repeat(4,minmax(0,1fr))}.ngk__grid--num{grid-template-columns:repeat(5,minmax(0,1fr))}.ngk__grid--punc{grid-template-columns:repeat(4,minmax(0,1fr))}.ngk__key--space{min-width:150px}}.ngk--physique{--k: 42px;padding:14px 16px 12px;width:100%;max-width:100%;box-sizing:border-box}.ngk__legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-bottom:12px;position:relative;z-index:1}.ngk__leg{display:inline-flex;align-items:center;gap:6px;color:var(--ngk-muted);font-size:.62rem;letter-spacing:.03em}.ngk__leg i{width:10px;height:10px;border-radius:3px;display:inline-block;box-shadow:0 0 6px currentColor}.ngk__leg--vow i{background:#22d3ee;color:#22d3ee}.ngk__leg--cons i{background:#d6f3fb;color:#d6f3fb;box-shadow:none}.ngk__leg--special i{background:#f4d68a;color:#f4d68a}.ngk__leg--tone i{background:var(--ngk-green);color:var(--ngk-green)}.ngk__leg--acc i{background:var(--ngk-gold);color:var(--ngk-gold)}.ngk__leg--num i{background:#9aa6b4;color:#9aa6b4;box-shadow:none}.ngk__leg--punc i{background:#77c4c0;color:#77c4c0}.ngk__leg--sym i{background:var(--ngk-violet);color:var(--ngk-violet)}.ngk--physique .ngk__krow{position:relative;z-index:1;display:flex;gap:6px;justify-content:center;margin-bottom:6px;flex-wrap:wrap}.ngk--physique .ngk__krow--off1{padding-left:calc(var(--k) * .5)}.ngk--physique .ngk__krow--off2{padding-left:calc(var(--k) * 1)}.ngk--physique .ngk__krow--tones{margin-top:12px}.ngk--physique .ngk__krow--acc{margin-top:6px}.ngk--physique .ngk__krow--fn{margin-top:12px}.ngk--physique .ngk__key{width:var(--k);height:var(--k);min-width:var(--k);padding:0;font-size:1.15rem;border-radius:10px}.ngk--physique .ngk__key:before{left:5px;right:5px;top:3px}.ngk--physique .ngk__key--fn{width:calc(var(--k) * 1.35);font-size:.9rem}.ngk--physique .ngk__key--space{width:calc(var(--k) * 6);min-width:0;max-width:100%}.ngk--physique .ngk__key--tone{font-size:1.25rem}.ngk--physique .ngk__key--tone .ngk__tone-name{display:none}.ngk__key--nge{box-shadow:0 3px 7px #00000073}.ngk--physique .ngk__key--vow:not(.ngk__key--special){color:#fff;font-weight:700;background:linear-gradient(180deg,#22d3ee6b,#22d3ee24 60%),var(--ngk-key);border-color:#22d3eebf;box-shadow:0 0 14px #22d3ee59,0 0 0 1px #22d3ee80 inset,0 3px 7px #0006}.ngk--physique .ngk__key--vow:not(.ngk__key--special):hover{border-color:var(--ngk-cyan);box-shadow:0 0 22px #22d3ee8c,0 0 0 1px #22d3ee99 inset}.ngk--physique .ngk__key--cons:not(.ngk__key--special){color:#d6f3fb;border-color:#22d3ee33}.ngk--physique .ngk__key--cons:not(.ngk__key--special):hover{border-color:#22d3ee8c;box-shadow:0 0 14px #22d3ee42,0 0 0 1px #22d3ee4d inset}.ngk__key--nge.ngk__key--special{color:#f4d68a;font-weight:700;background:linear-gradient(180deg,#e5c07b42,#e5c07b0f 55%,#0000001a),var(--ngk-key);border-color:#e5c07bb3;box-shadow:0 0 16px #e5c07b6b,0 0 0 1px #e5c07b8c inset}.ngk__key--nge.ngk__key--special:hover{box-shadow:0 0 24px #e5c07b99,0 0 0 1px #e5c07bb3 inset}.ngk--physique .ngk__key--tone{color:var(--ngk-green);background:linear-gradient(180deg,#34d3991f,#34d39905 60%),var(--ngk-key);border-color:#34d39966}.ngk--physique .ngk__key--acc{color:var(--ngk-gold);background:linear-gradient(180deg,#e5c07b1a,#e5c07b05 60%),var(--ngk-key);border-color:#e5c07b57}.ngk--physique .ngk__key--num{color:#9aa6b4;border-color:#788ca529}.ngk--physique .ngk__key--punc{color:#77c4c0;background:linear-gradient(180deg,#77c4c01a,#77c4c005 60%),var(--ngk-key);border-color:#77c4c04d}.ngk--physique .ngk__key--sym{color:var(--ngk-violet);background:linear-gradient(180deg,#a78bfa1f,#a78bfa05 60%),var(--ngk-key);border-color:#a78bfa4d}.ngk--physique .ngk__key--sym:hover{border-color:#a78bfa99;box-shadow:0 0 14px #a78bfa47,0 0 0 1px #a78bfa4d inset}.ngk__page{position:relative;z-index:1}.ngk__key--mode{display:none}@media(max-width:560px){.ngk--physique{padding:1px 2px;border:none;border-radius:0;box-shadow:none}.ngk:before{content:none;display:none}.ngk__legend{display:none}.ngk--physique .ngk__krow{padding-left:0;margin-bottom:2px}.ngk--physique .ngk__page--letters{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.ngk--physique .ngk__page--letters .ngk__krow--letters{display:contents}.ngk--physique .ngk__krow--tones{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:2px}.ngk--physique .ngk__page--letters .ngk__krow--punc{grid-column:1 / -1;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin-top:2px}.ngk--physique .ngk__krow--num{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}.ngk--physique .ngk__krow--acc,.ngk--physique .ngk__krow--sym{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin-top:2px}.ngk--physique .ngk__key,.ngk--physique .ngk__key--fn,.ngk--physique .ngk__key--tone{width:auto;min-width:0;height:clamp(24px,5.6vw,33px);font-size:clamp(.9rem,3.3vw,1.12rem);border-radius:7px}.ngk--physique .ngk__key:before{top:2px;left:4px;right:4px}.ngk--physique .ngk__key--space{grid-column:1 / -1;width:auto;height:clamp(22px,5.2vw,31px)}.ngk--physique[data-page=letters] .ngk__page--symbols,.ngk--physique[data-page=symbols] .ngk__page--letters{display:none}.ngk--physique .ngk__key--mode{display:inline-flex}.ngk--physique[data-page=letters] .ngk__key--toabc,.ngk--physique[data-page=symbols] .ngk__key--tosym{display:none}.ngk--physique .ngk__krow--bottom{display:flex;gap:2px;margin-top:2px;align-items:stretch}.ngk--physique .ngk__krow--bottom .ngk__key{height:clamp(26px,6vw,32px)}.ngk--physique .ngk__krow--bottom .ngk__key--space{flex:1 1 auto;width:auto;grid-column:auto}.ngk--physique .ngk__krow--bottom .ngk__key--mode,.ngk--physique .ngk__krow--bottom .ngk__key--fn{flex:0 0 auto;min-width:54px;font-size:.9rem}}