:root{font-family:Inter,Arial,sans-serif;color:#19212d;background:#edf1f5;font-size:16px;--gap:20px;--module-pad:18px;--line:#d9e0e8}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}
h1,h2,h3{margin:0;font-weight:650}h1,h2{font-size:19px}h3{font-size:15px}label{font-size:14px}
select{margin-top:9px;width:100%;font-size:14px;border:1px solid #cdd6e0;padding:11px 8px;border-radius:7px;background:white;color:inherit}

/* three modules: products | preview | tools */
.layout{display:grid;grid-template-columns:232px minmax(0,1fr) 340px;gap:var(--gap);padding:var(--gap);align-items:start;max-width:1900px;margin:0 auto}
.module{background:white;border:1px solid var(--line);border-radius:14px;padding:var(--module-pad);min-width:0}
.products,.tools{position:sticky;top:var(--gap);max-height:calc(100vh - 2*var(--gap));overflow-y:auto;scrollbar-width:thin}
.workspace{position:sticky;top:var(--gap);padding:20px 24px 24px}
.products>section,.tools>section{padding:16px 0;border-top:1px solid #e6ebf0}.products>section:first-child,.tools>section:first-child{border-top:0;padding-top:0}.products>section:last-child,.tools>section:last-child{padding-bottom:0}
.products section>h3,.tools section>h3{margin-bottom:12px}

.workspace-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 0 16px}.page-title{margin:0;font-size:16px;font-weight:400;color:#8d9399;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-top h2{font-size:22px;text-align:center}
.side-info{font-size:12px;color:#6c7b8d;margin:5px 0 0}
.hints-menu{position:relative;flex:none;justify-self:end}.hints-menu summary{list-style:none;cursor:pointer;font-size:13px;border:1px solid #cdd6e0;border-radius:7px;padding:8px 12px;color:#273346;background:#fff;user-select:none}.hints-menu summary::-webkit-details-marker{display:none}.hints-menu summary::before{content:"ⓘ ";color:#159777}.hints-menu[open] summary{background:#e8f7f2;border-color:#159777}
.hints-body{position:absolute;right:0;top:calc(100% + 8px);width:min(440px,80vw);max-height:60vh;overflow:auto;z-index:20;background:#fff;border:1px solid #cdd6e0;border-radius:10px;box-shadow:0 10px 30px #19212d33;padding:6px 14px}.hints-body p{font-size:13px;line-height:1.55;color:#4f5f72;margin:9px 0}

.stage{background:#e7edf3;border:1px solid #d7dfe7;border-radius:13px;height:clamp(420px,calc(100vh - 138px),900px);position:relative;overflow:hidden}
#threeView,#charmView{position:absolute;inset:0}#threeCanvas,#charmCanvas{width:100%;height:100%;display:block;touch-action:none}
.stage-tools{width:max-content;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 20px)}
.side-tabs,.zoom-tools{display:flex;background:#ffffffe6;border:1px solid #d3dbe4;padding:3px;border-radius:9px;box-shadow:0 2px 8px #19212d14}
.side-tabs button,.zoom-tools button{border:0;border-radius:6px;padding:8px 14px;background:transparent;font-size:14px;color:#66758a}.side-tabs [aria-pressed=true]{background:#19212d;color:#fff}
.zoom-tools button{width:36px;padding:8px 0;font-size:18px;line-height:1;color:#273346}.zoom-tools button:hover{background:#e8f7f2;color:#13765f}
.zoom-tools #viewReset,.zoom-tools #tableView{width:auto;padding:8px 12px;font-size:13px;line-height:1.2;border-left:1px solid #e1e6ec;border-radius:0 6px 6px 0;margin-left:2px}.zoom-tools #tableView[aria-pressed=true]{background:#19212d;color:#fff}
.orbit-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;color:#66758a;white-space:nowrap;pointer-events:none}
.model-warning{background:#fff2d8;border:1px solid #edd1a0;border-radius:10px;padding:12px 16px;color:#80531f;font-size:13px;line-height:1.5}.model-warning[hidden]{display:none}
#error,#charmError{background:#fff1f1;color:#a32c3d;border:1px solid #ecc3c8;padding:14px;border-radius:8px;font-size:14px;line-height:1.5;margin-top:12px}
.snap-label{position:absolute;z-index:3;left:12px;top:12px;background:#ffffffed;border:1px solid #159777;border-radius:6px;padding:8px 12px;font-size:14px;box-shadow:0 2px 8px #19212d0a;pointer-events:none}.snap-label[hidden]{display:none}.plastic-colors{position:absolute;z-index:4;left:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:6px;background:#ffffffed;border:1px solid #d7dfe7;border-radius:999px;box-shadow:0 2px 8px #19212d0a}.plastic-colors:empty{display:none}.plastic{width:24px;height:24px;padding:0;border:1px solid #19212d26;border-radius:50%;cursor:pointer;transition:transform .12s}.plastic:hover{transform:scale(1.12)}.plastic[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px #35cca0}.size-info{position:absolute;z-index:3;left:50%;bottom:34px;transform:translateX(-50%);font-size:12px;color:#4d5d70;white-space:nowrap;pointer-events:none}.size-info[hidden]{display:none}.size-info input[type=number]{width:52px;height:24px;margin:0 2px;padding:0 4px;border:1px solid #d7dfe7;border-radius:6px;background:#ffffffed;font-size:12px;vertical-align:middle;pointer-events:auto}.size-info input[type=number]:disabled{border-color:transparent;background:transparent}
.handles{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.handle3d{position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:#fff;border:1.5px solid #2875e3;box-sizing:border-box;pointer-events:all;touch-action:none;display:none}
.handle3d[data-corner=nw],.handle3d[data-corner=se]{cursor:nwse-resize}.handle3d[data-corner=ne],.handle3d[data-corner=sw]{cursor:nesw-resize}.handle3d[data-corner=n],.handle3d[data-corner=s]{cursor:ns-resize}.handle3d[data-corner=e],.handle3d[data-corner=w]{cursor:ew-resize}
.stage-alert{width:max-content;position:absolute;z-index:4;left:50%;bottom:56px;transform:translateX(-50%);max-width:calc(100% - 24px);background:#fff1f1;color:#a32c3d;border:1px solid #e4a3ab;border-radius:8px;padding:9px 14px;font-size:13.5px;line-height:1.4;text-align:center;box-shadow:0 2px 10px #a32c3d22;pointer-events:none}.stage-alert[hidden]{display:none}

/* products */
.search{width:100%;margin:0 0 10px;padding:10px 12px;font-size:14px;border:1px solid #cdd6e0;border-radius:8px;background:#fff;color:inherit}.search:focus{outline:2px solid #159777;outline-offset:1px}
.product-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:0;padding:2px}.product-gallery:empty{display:none}
.product-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;background:#f7f9fb;border:1px solid #dbe2ea;border-radius:9px;color:#273346;min-width:0;transition:border-color .15s,background .15s}.product-card:hover{border-color:#9fb0c0;background:white}.product-card.active{border-color:#35cca0;background:#e9f8f2;box-shadow:0 0 0 2px rgba(53,204,160,.35)}.product-card svg{width:100%;height:58px;display:block}.product-card-name{font-size:11px;font-weight:600;line-height:1.2;text-align:center;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;max-width:100%}.product-card-size{font-size:10.5px;color:#78909e}.product-card[hidden]{display:none}
/* card «Обвес»: the whole width of the gallery, name and size in one line under the drawing; as far from the search as from the next heading */
.product-card.wide{grid-column:1/-1;flex-flow:row wrap;justify-content:center;align-items:baseline;gap:6px;margin:8px 0 2px;padding:12px 12px 9px}.product-card.wide svg{flex:0 0 100%;height:auto}.gallery-group{grid-column:1/-1;margin:10px 0 0;font-size:12px;font-weight:600;color:#6c7b8d}.gallery-group:first-child{margin-top:0}.gallery-group[hidden]{display:none}

/* tools: alignment */
.alignment-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.alignment-heading button{font-size:13px;padding:6px 8px;border:1px solid #cdd6e0;border-radius:5px;color:#273346;background:white}
.two-buttons{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.two-buttons button{flex:1;white-space:normal;font-size:13px;padding:10px 6px}
.two-buttons .magic{background:#19212d;color:#fff;border-color:#19212d;font-weight:600}.two-buttons .magic:hover:enabled{background:#26384a}.two-buttons .magic:disabled{background:#19212d}.two-buttons #clipArea[aria-pressed=true]{background:#e9f8f2;border-color:#35cca0;color:#13765f;font-weight:600}
.secondary{background:white;border:1px solid #cdd6e0;border-radius:7px;padding:10px 12px;font-size:14px;color:#273346}
.art-colors{margin-top:14px}.art-colors[hidden]{display:none}.art-colors-title{display:block;font-size:14px;margin-bottom:8px}
.color-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px}.color-tabs{flex:1;display:flex;border:1px solid #cdd6e0;border-radius:7px;overflow:hidden}.color-tabs button{flex:1;height:34px;padding:0 6px;border:0;background:white;font-size:13px;color:#273346}.color-tabs button+button{border-left:1px solid #e6ebf0}.color-tabs button:hover:not([aria-selected=true]){background:#e8f7f2;color:#13765f}.color-tabs [aria-selected=true]{background:#19212d;color:#fff;font-weight:600}.color-bar .icon-btn{flex:none;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center}
.color-body{display:flex;gap:10px;align-items:flex-start}.color-swatches{flex:none;display:flex;flex-direction:column;gap:7px;max-height:149px;overflow-y:auto;padding:4px 0 4px}.swatch{flex:none;width:30px;height:30px;padding:0;border:1px solid #cdd6e0;border-radius:7px;background:white}.swatch.unknown{background:repeating-linear-gradient(45deg,#cdd6e0 0 3px,#fff 3px 6px)}.swatch[aria-pressed=true]{border:2px solid #2875e3;box-shadow:inset 0 0 0 2px #fff}
.cmyk-pane,.preset-pane{flex:1;min-width:0;border:1px solid #cdd6e0;border-radius:7px;overflow:hidden}.cmyk-pane[hidden],.preset-pane[hidden],.color-swatches[hidden]{display:none}.cmyk-row{display:flex;align-items:center;height:36px}.cmyk-row+.cmyk-row{border-top:1px solid #e6ebf0}.cmyk-row span{flex:none;width:34px;align-self:stretch;display:flex;align-items:center;justify-content:center;background:#edf1f5;font-size:14px;font-weight:600;color:#273346}
.cmyk-row input[type=number]{flex:none;width:50px;align-self:stretch;padding:0 2px;border:0;border-left:1px solid #e6ebf0;border-radius:0;background:white;text-align:center;font-size:14px;color:#19212d;appearance:textfield}.cmyk-row input[type=number]:disabled{background:transparent}.cmyk-row input[type=number]::-webkit-inner-spin-button,.cmyk-row input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cmyk-row input[type=number]:focus-visible{outline:none;background:#f4f7fa}
.cmyk-row input[type=range]{flex:1;min-width:0;height:100%;margin:0 12px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}.cmyk-row input[type=range]:focus-visible{outline:none}.cmyk-row input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--track,#cdd6e0);box-shadow:inset 0 0 0 1px #19212d1a}.cmyk-row input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--track,#cdd6e0)}
.cmyk-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:20px;margin-top:-8px;border:1px solid #cdd6e0;border-radius:4px;background:white;box-shadow:0 1px 3px #19212d33}.cmyk-row input[type=range]::-moz-range-thumb{width:10px;height:18px;border:1px solid #cdd6e0;border-radius:4px;background:white;box-shadow:0 1px 3px #19212d33}.cmyk-row input[type=range]:hover::-webkit-slider-thumb,.cmyk-row input[type=range]:focus-visible::-webkit-slider-thumb{border-color:#35cca0}.cmyk-row input[type=range]:hover::-moz-range-thumb,.cmyk-row input[type=range]:focus-visible::-moz-range-thumb{border-color:#35cca0}
.preset-pane{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px}.preset{display:flex;align-items:center;gap:8px;min-width:0;height:30px;padding:0 6px;border:1px solid transparent;border-radius:5px;background:none;font-size:13px;color:#273346;text-align:left}.preset span{flex:none;width:16px;height:16px;border:1px solid #cdd6e0;border-radius:4px}.preset:hover:enabled{background:#e8f7f2;color:#13765f}.preset[aria-pressed=true]{background:#e9f8f2;border-color:#35cca0;color:#13765f}.all-colors{grid-column:1/-1;display:flex;align-items:center;gap:8px;height:30px;padding:0 6px;font-size:13px;color:#273346;cursor:pointer;border-bottom:1px solid #e6ebf0;margin-bottom:2px}.all-colors input{margin:0}.all-colors[hidden]{display:none}
.color-info{margin:8px 0 0;font-size:12px;color:#6c7b8d;overflow-wrap:anywhere}

/* tools: layers (Illustrator-like) */
.layers-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}#layerCount{font-size:12px;font-weight:400;color:#6c7b8d}
.layer-groups{display:flex;flex-direction:column;gap:8px}.layer-groups:empty{display:none}
.layer-group-title{align-self:flex-start;border:0;background:#e6e8eb;color:#273346;border-radius:999px;padding:5px 16px;font-size:13px;margin-bottom:4px;cursor:pointer}.layer-group.current .layer-group-title{background:#19212d;color:#fff}
.layer-list{list-style:none;margin:0;padding:0;border:1px solid #d3dbe4;border-radius:8px;overflow:hidden;max-height:260px;overflow-y:auto;scrollbar-width:thin}.layer-list.drop-empty{outline:2px dashed #159777;outline-offset:-3px}
.layer-item{display:flex;align-items:center;gap:3px;padding:4px 6px;background:#fff;border-bottom:1px solid #e6ebf0;cursor:grab;position:relative}.layer-item:last-child{border-bottom:0}.layer-item:hover{background:#f5f8fb}.layer-item.active{background:#dbe9ff}.layer-item.off .layer-name span{opacity:.5}.layer-item.locked{cursor:default}.layer-item.dragging{opacity:.4}
.layer-item.drop-before::before,.layer-item.drop-after::after{content:"";position:absolute;left:0;right:0;height:3px;background:#159777;z-index:2}.layer-item.drop-before::before{top:-1px}.layer-item.drop-after::after{bottom:-1px}
.layer-item img{width:32px;height:24px;object-fit:contain;background:repeating-conic-gradient(#e8edf2 0 25%,#fff 0 50%) 0 0/8px 8px;border:1px solid #d3dbe4;border-radius:3px;flex:none}
.layer-icon{flex:none;width:26px;height:26px;border:0;background:transparent;color:#273346;border-radius:5px;display:grid;place-items:center;padding:0}.layer-icon:hover:enabled{background:#dfe8f3}.layer-icon.dim{color:#8a9aab}.layer-icon.on{color:#c2410c}.layer-icon.danger:hover:enabled{background:#fde4e7;color:#a32c3d}
.layer-name{flex:1;min-width:0;text-align:left;border:0;background:transparent;padding:3px 2px;font-size:13px;color:#273346}.layer-name span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-empty-row{padding:10px;font-size:12px;color:#78909e;text-align:center}
.layer-empty{font-size:12px;line-height:1.45;color:#78909e;margin:2px 0 0}.layer-empty[hidden]{display:none}

/* tools: import */
.upload{border:1px dashed #97a9bb;display:flex;align-items:center;flex-direction:column;padding:12px 10px;gap:4px;border-radius:9px;cursor:pointer;background:#f6f9fb;text-align:center}.upload:hover{border-color:#159777;background:#f0faf7}.upload strong{font-size:14px}.upload span:last-of-type{font-size:12px;color:#6c7b8d}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload:focus-within{outline:2px solid #159777}
.color-note{margin:6px 0 0;padding:3px 8px;border-radius:5px;font-size:12px;line-height:1.35;border-left:3px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}.color-note.cmyk{background:#e9f8f2;color:#1d6b52;border-color:#35cca0}.color-note.rgb{background:#fff4e5;color:#8a4b00;border-color:#f0a030}.color-note[hidden]{display:none}
body.dragging-file .upload{border-color:#35cca0;background:#e9f8f2;box-shadow:0 0 0 3px rgba(53,204,160,.25)}body.dragging-file .stage{outline:3px dashed #35cca0;outline-offset:-6px}

/* tools: export */
.export-actions{display:flex;gap:8px;flex-wrap:wrap}.export-actions button{flex:1;font-size:14px;width:100%}.primary{background:#19212d;color:white;border:0;border-radius:8px;padding:13px 16px;font-weight:600}.primary:hover:enabled{background:#26384a}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #159777;outline-offset:3px}

@media(max-width:1280px){.layout{grid-template-columns:200px minmax(0,1fr) 300px}}
/* export stays in sight at the bottom of the scrolling tools column; bottom offset outweighs the column padding so content does not show under it */
.tools>section.export-panel{position:sticky;bottom:calc(-1*var(--module-pad));z-index:2;margin:0 calc(-1*var(--module-pad)) calc(-1*var(--module-pad));padding:14px var(--module-pad) var(--module-pad);background:white;box-shadow:0 -8px 12px -10px #19212d40}
@media(max-width:1020px){.layout{grid-template-columns:minmax(0,1fr)}.products,.tools,.workspace{position:static;max-height:none;overflow:visible}.workspace{order:1}.products{order:2}.tools{order:3}.product-gallery{grid-template-columns:repeat(4,1fr)}.stage{height:min(560px,70vh)}.tools>section.export-panel{bottom:0}}
@media(max-width:620px){.layout{padding:12px;gap:12px}.workspace-top{grid-template-columns:1fr auto}.page-title{grid-column:1/-1;font-size:14px;text-align:center}.product-gallery{grid-template-columns:repeat(3,1fr)}.stage-tools{top:8px}.side-tabs button{padding:7px 10px}.orbit-hint{display:none}}

/* charm constructor (card «Обвес», obves.js): the preview takes the editor's and the tools' columns, its settings in a row under it;
   the gallery can be folded away (#toggleProducts), then the preview takes the whole width */
.workspace.charm-mode{grid-column:2/-1}.workspace.charm-mode:not([hidden]){display:flex;flex-direction:column;height:calc(100vh - 2*var(--gap))}.workspace.charm-mode .stage{flex:1;height:auto;min-height:260px}
.layout.no-products>.products{display:none}.layout.no-products>.workspace.charm-mode{grid-column:1/-1}
.title-row{display:flex;align-items:center;gap:10px;min-width:0}.title-row .icon-btn{flex:none;min-width:34px;height:34px;padding:0 7px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600}.title-row .icon-btn[aria-expanded=true] span{display:none}
.charm-title{font-size:22px;text-align:center;white-space:nowrap}#charmReset,#heartArt,#backToCharm:not([hidden]){display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:13px;white-space:nowrap}#heartArt{height:40px;padding:0 20px;gap:8px;font-size:14px}
.slots svg,.drag-ghost svg{display:block;width:20px;height:20px}.title-row .icon-btn[aria-expanded=false]{background:#e9f8f2;border-color:#35cca0;color:#13765f}
.charm-tools{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 0;margin-top:16px}.charm-tools>section{padding:0 24px;border-left:1px solid #e6ebf0}.charm-tools>section:first-child{padding-left:0;border-left:0}.charm-tools>section:last-child{padding-right:0}
.charm-tools h3{margin-bottom:10px}.charm-tools h3:not(:first-child){margin-top:14px}.charm-text{width:360px}.charm-tools .cord-type{display:inline-flex;margin-bottom:5px;padding:2px;border-radius:8px;box-shadow:none}.charm-tools .cord-type button{padding:3px 11px;font-size:13px;line-height:1.2}.charm-tools .swatches,.charm-tools .charm-note{max-width:248px}
@media(max-width:1020px){.layout .workspace.charm-mode{grid-column:auto}.workspace.charm-mode:not([hidden]){height:auto}.workspace.charm-mode .stage{flex:none;height:min(560px,70vh)}.charm-tools>section{border-left:0}}
.zoom-tools #charmViewReset{width:auto;padding:8px 12px;font-size:13px;line-height:1.2}
.charm-note{margin:8px 0 0;font-size:12px;line-height:1.45;color:#6c7b8d}.charm-note:empty{display:none}
.swatches{display:flex;flex-wrap:wrap;gap:8px;padding:2px}.swatches .plastic{width:28px;height:28px}
/* text of the charm: the input lies invisible over its cells (obves.js renderSlots) — a cell per bead, empty cells for what is left */
.word-field{position:relative;padding:5px;border:1px solid #cdd6e0;border-radius:8px;background:#fff;cursor:text}
.word-field input{position:absolute;inset:0;width:100%;opacity:0;pointer-events:none;font-size:16px}
.slots{display:flex;gap:3px}.slots .slot{position:relative;flex:1 1 0;min-width:0;height:32px;display:grid;place-items:center;border:1px dashed #cdd6e0;border-radius:5px;font-size:15px;font-weight:700;color:#19212d}
.slots .slot:not(:empty){border:1px solid #d7dfe7;background:#f3f6f9}.slots .slot.off{border-color:#e6ebf0;background:repeating-linear-gradient(135deg,#fff 0 3px,#eef2f5 3px 6px)}
.slots .gap{position:relative;flex:0 0 5px}.slots .sel{background:#cdeee3!important}
.slots .caret::before,.slots .caret-end::after{content:'';position:absolute;top:6px;bottom:6px;width:2px;border-radius:1px;background:#19212d;animation:caret 1s step-end infinite}
.slots .caret::before{left:-3px}.slots .caret-end::after{right:-3px}.slots .slot.caret:empty::before{left:calc(50% - 1px)}
/* a frame dragged from an empty spot of the panel picks the letters it touches (obves.js) */
.charm-tools{user-select:none}.pick-frame{position:fixed;z-index:50;border:1px solid #2875e3;background:rgba(40,117,227,.1);pointer-events:none}
/* letters and symbols are dragged into place (obves.js dragFrom): the marked cell is where it lands, the copy follows the pointer */
.slots .slot{user-select:none;touch-action:none}.slots .slot:not(:empty){padding-bottom:4px;cursor:grab}.slots .slot.picked{border-color:#2875e3;outline:1px solid #2875e3}.slots .slot.drop{border:1px dashed #35cca0;background:#e9f8f2;color:#13765f}
.drag-ghost{position:fixed;left:0;top:0;z-index:50;width:30px;height:32px;margin:-16px 0 0 -15px;display:grid;place-items:center;border:1px solid #d7dfe7;border-radius:5px;background:#f3f6f9;box-shadow:0 4px 12px rgba(25,33,45,.18);font-size:15px;font-weight:700;color:#19212d;pointer-events:none}
.charm-text-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.charm-tools .charm-text-head h3{margin:0}
.symbols{display:flex;align-items:flex-start;gap:40px;margin-top:12px}.symbols>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.symbol-buttons{display:flex;gap:8px}.symbols-title{white-space:nowrap;font-size:13px;color:#6c7b8d}.symbols [data-char]{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid #cdd6e0;border-radius:8px;background:#fff;color:#19212d;touch-action:none;user-select:none;cursor:grab}.symbols [data-char]:hover:enabled{background:#f3f6f9}
@keyframes caret{50%{opacity:0}}