.encoding-keyboard{--kb-accent:#fc5d35;margin:34px 0 26px;padding:clamp(18px,3vw,34px);border:1px solid var(--line);border-radius:22px;background:radial-gradient(ellipse at 92% 0%,color-mix(in srgb,var(--kb-accent) 11%,transparent),transparent 36%),var(--card);color:var(--ink);box-shadow:0 15px 45px #18242b0a}.encoding-keyboard-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;margin-bottom:24px}.encoding-kicker{margin:0 0 8px;color:var(--kb-accent);font-size:10px;font-weight:800;letter-spacing:.16em}.encoding-keyboard h2{margin:0;font-size:clamp(23px,3vw,32px);letter-spacing:-.04em}.encoding-intro{margin:7px 0 0;max-width:540px;color:var(--muted);font-size:14px;line-height:1.55}.encoding-controls{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap}.encoding-controls label{display:grid;gap:6px;color:var(--muted);font-size:11px;font-weight:700}.encoding-controls select{max-width:min(390px,55vw);min-height:40px;padding:8px 32px 8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:12px}.encoding-shift{height:40px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer}.encoding-shift.active{background:var(--kb-accent);border-color:var(--kb-accent);color:white}.keyboard-frame{padding:clamp(12px,2vw,24px);border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--paper) 96%,var(--kb-accent)),var(--paper));box-shadow:inset 0 1px #fff8,0 9px 24px #18242b0a;overflow-x:auto}.keyboard-row{display:flex;justify-content:center;gap:clamp(3px,.5vw,7px);margin:0 auto 8px;min-width:650px}.keyboard-row.row-2{padding:0 3%}.keyboard-row.row-3{padding:0 5%}.keyboard-row.row-4{padding:0 8%}.map-key{position:relative;display:flex;flex:1 1 0;min-width:0;height:clamp(65px,8vw,88px);flex-direction:column;justify-content:space-between;padding:7px 8px 6px;border:1px solid color-mix(in srgb,var(--line) 75%,#fff);border-radius:10px;background:linear-gradient(155deg,color-mix(in srgb,var(--card) 95%,#fff),var(--card));color:var(--ink);box-shadow:0 3px 0 color-mix(in srgb,var(--line) 65%,transparent),0 5px 10px #17232c0a;text-align:left;transition:transform .15s,border-color .15s,box-shadow .15s}.map-key.insertable{cursor:pointer}.map-key.insertable:hover,.map-key.insertable:focus-visible{transform:translateY(-3px);border-color:var(--kb-accent);box-shadow:0 4px 0 color-mix(in srgb,var(--kb-accent) 60%,transparent),0 8px 16px #17232c17;outline:none}.key-top{display:flex;justify-content:space-between;align-items:flex-start;gap:3px}.physical-key{font-size:10px;color:var(--muted);font-weight:800}.physical-key small{margin-left:3px;color:color-mix(in srgb,var(--muted) 66%,transparent);font-size:8px}.semantic-key{color:var(--kb-accent);font-family:InterfaceGeo,Georgia,serif;font-size:13px;font-weight:700}.mapped-key{align-self:center;max-width:100%;overflow:hidden;color:var(--ink);font-family:InterfaceGeo,Georgia,Arial,sans-serif;font-size:clamp(19px,2.3vw,28px);line-height:1;white-space:nowrap;text-overflow:clip}.codepoint-key{align-self:center;color:var(--muted);font-family:ui-monospace,Consolas,monospace;font-size:8px;letter-spacing:-.03em}.map-key.unmapped{opacity:.52}.keyboard-space{margin:12px auto 0;min-width:0}.space-key{flex:0 1 48%;height:39px;flex-direction:row;align-items:center;justify-content:space-between;padding:0 15px;cursor:default}.space-key .mapped-key{font-size:11px;color:var(--muted)}.keyboard-legend{display:grid;grid-template-columns:1fr auto;gap:9px 18px;margin-top:17px;color:var(--muted);font-size:11px;line-height:1.5}.keyboard-legend>span:first-child{grid-column:1/-1}.legacy-note{grid-column:1/-1;font-size:10px}.legend-dot{display:inline-block;width:7px;height:7px;margin:0 7px 1px 0;border-radius:50%;background:var(--kb-accent)}.dark .encoding-keyboard{box-shadow:0 15px 45px #0003}.dark .keyboard-frame{box-shadow:inset 0 1px #ffffff08,0 9px 24px #0002}.dark .map-key{background:linear-gradient(155deg,#2b2e34,var(--card));box-shadow:0 3px 0 #101215,0 5px 10px #0002;border-color:#41454e}.dark .map-key.insertable:hover,.dark .map-key.insertable:focus-visible{box-shadow:0 4px 0 color-mix(in srgb,var(--kb-accent) 60%,transparent),0 8px 16px #0005}.dark .encoding-shift.active{color:#fff}@media(max-width:760px){.encoding-keyboard-head{display:block}.encoding-controls{margin-top:17px}.encoding-controls label{flex:1;min-width:220px}.encoding-controls select{max-width:100%;width:100%}.keyboard-frame{padding:10px}.keyboard-row{min-width:620px}.keyboard-legend{grid-template-columns:1fr}.keyboard-legend>span:first-child,.legacy-note{grid-column:auto}}@media(prefers-reduced-motion:reduce){.map-key{transition:none}}
.encoding-picker{position:relative;flex:1;min-width:0}.encoding-picker-trigger{width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:13px!important;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px}.encoding-picker-trigger>span:first-child{flex:1}.encoding-picker strong,.encoding-picker small{display:block}.encoding-picker strong{font-size:13px}.encoding-picker small{font-size:11px;color:var(--muted);margin-top:4px}.encoding-badge{padding:5px 8px;border-radius:6px;background:var(--soft);color:var(--accent);font:600 11px monospace}.encoding-picker-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:25;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:7px;box-shadow:0 18px 48px #0003;max-height:460px;overflow:auto}.encoding-picker-menu button{display:flex;width:100%;gap:14px;padding:13px;text-align:left;color:var(--ink);border:1px solid transparent;background:transparent;border-radius:10px}.encoding-picker-menu button:hover,.encoding-picker-menu button:focus-visible,.encoding-picker-menu button[aria-selected=true]{background:var(--soft);border-color:var(--accent)}.encoding-choice-main{flex:1;min-width:0}.encoding-choice-main>span{display:block;font-size:10px;color:var(--muted);margin-top:7px}.encoding-choice-preview{display:flex;flex-direction:column;justify-content:center;gap:7px;text-align:right;min-width:70px}.encoding-choice-preview b{color:var(--accent);font:600 13px monospace}.encoding-choice-preview code{font:12px monospace;overflow-wrap:anywhere}.textpanel:has(.encoding-picker-menu){position:relative;z-index:26}@media(max-width:650px){.encoding-badge{display:none}.encoding-picker-menu{max-height:380px}.encoding-picker-menu button{gap:6px;padding:10px}.encoding-choice-preview{min-width:55px}.encoding-picker strong{font-size:12px}}
.textpanel:has(.encoding-picker-menu){overflow:visible}.encoding-picker-menu{scrollbar-gutter:stable}