.container{max-width:640px;margin:0 auto;padding-top:60px}.wrapper{flex-direction:column;gap:10px;display:flex}.row{align-items:flex-start;gap:0 16px;display:flex}.axis-label{text-align:right;color:#0009;flex:0 0 80px;padding-top:10px;font-size:12px;line-height:1.3}.axis-label__en{text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;font-size:10px}.axis-label__cn{font-size:12px}.common-text{white-space:pre-wrap;word-break:break-word;font-variant-east-asian:full-width;font-feature-settings:"fwid";letter-spacing:.05em;background:0 0;border:none;outline:none;min-height:32px;line-height:32px}.input-container{box-sizing:border-box;padding:0;position:relative}.input-container:before{content:"";pointer-events:none;z-index:0;border-left:1px solid #5757574d;border-right:1px solid #3131314d;border-radius:8px;position:absolute;inset:0}.input-mirror{isolation:isolate;pointer-events:none;color:#000;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;z-index:1;font-size:32px;line-height:32px;position:relative}.mirror-char{vertical-align:middle;text-align:center;width:1em;display:inline-block}.mirror-char--selected{background:#00e5ff33}.textarea-char-highlight--hidden,.custom-caret--hidden{display:none}.input-area,.input-area::selection,.input-area::placeholder{resize:none;overflow-wrap:break-word;white-space:pre-wrap;box-sizing:border-box;z-index:2;color:#0000;caret-color:#0000;background:0 0;width:100%;height:100%;padding:0 8px;font-size:32px;position:absolute;top:0;left:0}textarea.input-area::-webkit-scrollbar{display:none}.textarea-char-highlight{pointer-events:none;z-index:-1;transform:translate(var(--caret-x,0px),var(--caret-y,0px));width:var(--caret-w,32px);height:var(--caret-h,32px);background:#00000014;border-radius:2px;transition:transform .1s ease-out,width .1s ease-out,height .1s ease-out;display:block;position:absolute}.textarea-char-highlight--end{width:.5em}.input-mirror__text{z-index:1;display:inline-block;position:relative}.custom-caret{pointer-events:none;z-index:2;width:2px;transform:translate(calc(var(--caret-x,0px) - 1px),var(--caret-y,0px));height:var(--caret-h,32px);background:#00e5ff;transition:transform .1s ease-out,height .1s ease-out;animation:1s step-end infinite blink;display:block;position:absolute;top:0}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.output-area{font-size:32px}.output-area.char-grid{min-height:100px;padding:0}.char-grid{--cell-size:32px;flex-wrap:wrap;gap:0;display:flex}.char-box{width:var(--cell-size);height:var(--cell-size);box-sizing:border-box;text-align:center;justify-content:center;align-items:center;line-height:1;display:inline-flex}.char-inner{display:block}.char-inner--jiaguwen{transform:translateY(.02em)}.char-inner--xiaozhuan{transform:translateY(.135em)}.char-box--empty{color:#0000}.char-box--interactive{cursor:pointer;border-radius:2px;transition:background .15s ease-out,box-shadow .15s ease-out;position:relative}.char-box--highlighted{background:linear-gradient(90deg,#0000 calc(50% - .5px),#dc505040 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),linear-gradient(#0000 calc(50% - .5px),#dc505040 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),linear-gradient(to bottom right,#0000 calc(50% - .5px),#dc505040 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px)),linear-gradient(to bottom left,#0000 calc(50% - .5px),#dc505040 calc(50% - .5px) calc(50% + .5px),#0000 calc(50% + .5px));box-shadow:inset 0 0 0 1px #dc505059}.placeholder{opacity:.3}.keyboard{--mouse-x:0px;--mouse-y:0px;--kb-width:600px;--kb-height:200px;flex-direction:column;align-items:center;width:100%;max-width:calc(100% - 104px);margin:auto;padding:16px 0;display:flex;position:relative}.keyboard-row{justify-content:center;gap:4px;margin-bottom:5px;display:flex}.keyboard-row:nth-child(2){padding-left:10px}.keyboard-row:nth-child(3){padding-left:20px}.keyboard-row:nth-child(4){padding-left:30px}.keyboard-row:last-child{margin-bottom:0}.keyboard-key{color:#00000080;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:0 0;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;width:26px;height:36px;padding:0;font-size:13px;font-weight:400;transition:background .15s ease-out,color .15s ease-out;display:flex;position:relative}.keyboard-key:after{content:"";background-image:radial-gradient(150px circle at calc(var(--mouse-x) - var(--key-x,0px))calc(var(--mouse-y) - var(--key-y,0px)),#00000038 0%,#00000014 45%,transparent 100%);-webkit-mask-composite:xor;pointer-events:none;border-radius:4px;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.keyboard-key:hover{color:#000c;background:#00000008}.keyboard-key:active{background:#0000000f}.keyboard-row--numbers{margin-bottom:12px;padding-bottom:8px;padding-left:0!important}.keyboard-row--bottom{align-items:flex-end;gap:12px;width:50%;max-width:420px;margin-top:8px;padding-left:0;display:flex}.keyboard-key--space{flex:1;height:32px;font-size:13px}.keyboard-arrows{align-items:center;gap:2px;display:flex}.keyboard-key--arrow{width:24px;height:32px;font-size:13px}.keyboard-key--delete{color:#00000080;width:32px;height:32px;font-size:16px}@media screen and (max-width:640px){.common-text{margin:0;padding:0 16px 0 0}.keyboard{max-width:100%;margin-left:0;padding:16px}.keyboard-row{gap:4px;margin-bottom:5px}.keyboard-row:nth-child(2){padding-left:8px}.keyboard-row:nth-child(3){padding-left:16px}.keyboard-row:nth-child(4){padding-left:24px}.keyboard-key{border-radius:4px;width:22px;height:32px;font-size:13px}.keyboard-row--bottom{max-width:100%}}