.popomee-character-magnifier { color: #243638; font: inherit; line-height: 1.6; max-width: 760px; margin-inline: auto; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.popomee-character-magnifier, .popomee-character-magnifier * { box-sizing: border-box; }
.popomee-character-magnifier [hidden] { display: none !important; }
.popomee-character-magnifier p { margin: 8px 0 12px; }
.popomee-character-magnifier label { display: block; font-weight: 600; }
.popomee-character-magnifier :is(button, input, select, textarea) { font: inherit; color: #243638; background: #fff; border: 1px solid #768789; border-radius: 6px; min-height: 44px; margin: 0; padding: 8px; max-width: 100%; }
.popomee-character-magnifier :is(textarea, input[type="text"]) { display: block; width: 100%; }
.popomee-character-magnifier textarea { resize: vertical; }
.popomee-character-magnifier button { cursor: pointer; }
.popomee-character-magnifier button:disabled { opacity: 0.5; cursor: default; }
.popomee-character-magnifier button[aria-pressed="true"] { color: #fff; background: #31585b; border-color: #31585b; }
.popomee-character-magnifier :is(button, input, select, textarea, summary, a, [tabindex]):focus-visible { outline: 3px solid #31585b; outline-offset: 2px; }
.popomee-character-magnifier .cm-small { font-size: 0.875rem; }
.popomee-character-magnifier .cm-characters { min-width: 0; border: 0; margin: 16px 0; padding: 0; }
.popomee-character-magnifier .cm-characters legend { font-size: 1rem; padding: 0; margin-bottom: 6px; }
.popomee-character-magnifier .cm-character-list { display: flex; gap: 6px; flex-wrap: wrap; max-height: 180px; overflow-y: auto; padding: 4px; }
.popomee-character-magnifier .cm-character-list button { min-width: 44px; max-width: 100%; overflow-wrap: anywhere; font-size: 1.25rem; }
.popomee-character-magnifier .cm-view { background: #fff; color: #243638; min-width: 0; }
.popomee-character-magnifier .cm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 10px; }
.popomee-character-magnifier .cm-stage { height: clamp(220px, 42svh, 440px); overflow: auto; border: 1px solid #768789; border-radius: 6px; background: #fff; color: #111; overscroll-behavior: contain; }
.popomee-character-magnifier .cm-canvas { display: flex; align-items: center; justify-content: center; min-width: 100%; min-height: 100%; width: max-content; padding: 16px; }
.popomee-character-magnifier .cm-glyph { display: block; font-weight: 400; font-style: normal; font-synthesis: none; line-height: 1.5; white-space: pre; min-width: 1.5em; text-align: center; }
.popomee-character-magnifier .cm-glyph:empty { display: none; }
.popomee-character-magnifier .cm-stage[data-inverted="true"] { color: #fff; background: #111; }
.popomee-character-magnifier .cm-stage[data-inverted="true"]:focus-visible { outline-color: #768789; }
.popomee-character-magnifier .cm-size-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.popomee-character-magnifier input[type="range"] { width: 100%; min-width: 0; padding: 0; accent-color: #31585b; }
.popomee-character-magnifier details { border-top: 1px solid #b9c2c2; margin-top: 12px; padding-block: 6px; }
.popomee-character-magnifier summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.popomee-character-magnifier a { color: #31585b; text-decoration: underline; }
.popomee-character-magnifier .cm-view:fullscreen, .popomee-character-magnifier .cm-view[data-expanded="true"] { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow: auto; width: 100%; height: 100%; }
.popomee-character-magnifier .cm-view[data-expanded="true"] { position: fixed; inset: 0; z-index: 2147483647; height: 100dvh; }
.popomee-character-magnifier .cm-view:fullscreen .cm-stage, .popomee-character-magnifier .cm-view[data-expanded="true"] .cm-stage { height: max(180px, calc(100dvh - 300px)); }