@font-face{font-family:"Noto Serif TC (Medium)";src:url(/changjie/assets/NotoSerifTC-Medium-3Aji9Eek.woff2) format("woff2");font-display:fallback}:root{--font: "Noto Serif TC (Medium)", serif;--english-font: Arial, Helvetica, sans-serif;--key-height: 4.2rem;--keyboard-key-shadow: inset 0 0 .8125rem 0 var(--font-color);--region-select-shadow: inset 0 0 .625rem 0 var(--font-color);--bg-color: white;--font-color: black;--blink-bg-color: var(--font-color);--blink-font-color: var(--bg-color);--color-faded: gray;--key-correct: #44fc11;--key-incorrect: #ff0010;--link-hover: #1d75e0}[theme=light]{--bg-color: white;--font-color: black;--color-faded: gray;--key-correct: #44fc11;--key-incorrect: #ff0010;--link-hover: #1d75e0}[theme=dark]{--bg-color: black;--font-color: white;--color-faded: gray;--key-correct: #1ece2a;--key-incorrect: #ed0414;--link-hover: #1d75e0}[theme=forest]{--bg-color: #203a28;--font-color: #ADE25D;--color-faded: #3e774d;--key-correct: #152112 ;--key-incorrect: #6B0504;--link-hover: #3B7080}[theme=ocean]{--bg-color: #0153bf;--font-color: #05ddff;--color-faded: #0ea2cc;--key-correct: #43b245;--key-incorrect: #cc5d5b;--link-hover: #4074ce}[theme=apple]{--bg-color: #e01d33;--font-color: #2d070e;--color-faded: #b2172b;--key-correct: #406326;--key-incorrect: #ef737d;--link-hover: #60111e}[theme=ice]{--bg-color: #90e0ef;--font-color: #0077b6;--color-faded: #b5e7fc;--key-correct: #98c379;--key-incorrect: #e06c75;--link-hover: #0096c7}[theme=fire]{--bg-color: #e05504;--font-color: #ffbf00;--color-faded: #faa307;--key-correct: #527f33;--key-incorrect: #cc2a02;--link-hover: #990106}[theme=royalty]{--bg-color: #822ecc;--font-color: #240046;--color-faded: #9d4edd;--key-correct: #92cca4;--key-incorrect: #d3545f;--link-hover: #c77dff}[mode=layout]{--keyboard-display: block;--practice-mode-cursor-margin-size: 4vh;--practice-mode-border-bottom-width: 0;--practice-mode-border-bottom-style: solid}[mode=decomposition]{--keyboard-display: none;--practice-mode-cursor-margin-size: 10vh;--practice-mode-border-bottom-width: .0625rem;--practice-mode-border-bottom-style: solid}@keyframes shake{0%{transform:translate(0)}10%{transform:translate(-.5rem)}20%{transform:translate(.5rem)}30%{transform:translate(-.5rem)}40%{transform:translate(.5rem)}50%{transform:translate(-.5rem)}60%{transform:translate(.5rem)}70%{transform:translate(-.5rem)}80%{transform:translate(.5rem)}90%{transform:translate(-.5rem)}to{transform:translate(0)}}@keyframes key-blinking{0%{box-shadow:var(--keyboard-key-shadow)}50%{box-shadow:none}to{box-shadow:var(--keyboard-key-shadow)}}body{background-color:var(--bg-color);transition:background-color .2s ease;color:var(--font-color);font-family:var(--font)}.shake{animation:shake .2s ease-in-out}#input-box{opacity:0;height:.0625rem;width:.0625rem;overflow:hidden;clip-path:rect(0,0,0,0);border:none;padding:0;margin:0}#testing-section{margin-top:2vh;text-align:center;transition:margin-top .2s ease}#cangjie-select{appearance:none;background-color:var(--bg-color);color:var(--font-color);font-family:var(--english-font);border:.125rem solid var(--font-color);border-radius:.25rem;font-size:1.25rem;padding:.25rem .5rem;min-width:4.5rem;margin-bottom:.5rem;transition:background-color .2s ease,color .2s ease,border-color .2s ease;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--font-color) 50%),linear-gradient(135deg,var(--font-color) 50%,transparent 50%);background-position:calc(100% - .9rem) calc(50% - .0625rem),calc(100% - .52rem) calc(50% - .0625rem);background-size:.375rem .375rem;background-repeat:no-repeat}#cangjie-select:hover:not(:disabled){box-shadow:var(--region-select-shadow)}#cangjie-select:focus{outline:none;box-shadow:var(--region-select-shadow)}#cangjie-select:disabled{cursor:not-allowed;opacity:.5}#test-char{display:inline-block;border:.125rem solid var(--font-color);font-size:10.75rem;padding:0 1.875rem;will-change:transform}a{all:unset;cursor:pointer}a:hover{text-decoration:underline;color:var(--link-hover)}#decomposed-characters{text-align:center;margin-top:var(--practice-mode-cursor-margin-size);transition:margin-top .2s ease}.decomposed-character{display:inline-block;vertical-align:top;height:6.25rem;width:6.25rem;line-height:6.25rem;font-size:3.5rem;margin:0 .25rem;border-bottom-width:var(--practice-mode-border-bottom-width);border-bottom-style:var(--practice-mode-border-bottom-style);border-bottom-color:var(--font-color);transition:border-bottom-width .2s ease}[mode=decomposition] .decomposed-character:hover:not(.decomposed-character-faded){color:var(--blink-font-color)}[mode=decomposition] .decomposed-character:hover{background-color:var(--blink-bg-color);color:var(--color-faded)}.decomposed-character-faded{color:var(--color-faded);border-bottom-color:var(--font-color)}.decomposed-character-selected{background-color:var(--blink-bg-color);color:var(--blink-font-color)}#keyboard{margin:5vh auto;display:var(--keyboard-display);transition:opacity .2s ease;opacity:1}[mode=decomposition] #keyboard{opacity:0}.keyboard-row{text-align:center;height:calc(.375rem + var(--key-height));margin-bottom:.375rem}#keyboard-row-2{margin-left:2.8125rem}#keyboard-row-3{margin-left:1.5625rem}[kbVisibility] .keyboard-key{all:unset;text-align:center;color:var(--font-color);background-color:var(--bg-color);font-family:var(--font);display:inline-block;position:relative;font-size:2.5rem;border:.125rem solid var(--font-color);width:3.75rem;height:var(--key-height);line-height:var(--key-height);margin:0 .1875rem;-webkit-user-select:none;user-select:none}[kbVisibility=hidden] .keyboard-key{color:transparent}[kbVisibility] .keyboard-key:hover{box-shadow:var(--keyboard-key-shadow);animation:none}#keyboard-key-f:after,#keyboard-key-j:after{content:"";position:absolute;bottom:.25rem;left:50%;transform:translate(-50%);width:.375rem;height:.375rem;border-radius:50%;background:var(--font-color)}[kbVisibility=visible] .keyboard-key-blink{animation:key-blinking 1s infinite ease}[kbVisibility] .keyboard-key-activated-correct{background-color:var(--key-correct)}[kbVisibility] .keyboard-key-activated-incorrect{background-color:var(--key-incorrect)}.ui-toggle-row{fill:var(--font-color);display:block}.ui-toggle{position:fixed;bottom:.625rem;width:1.875rem;height:1.875rem}.settings-icon{display:inline-block}#theme-toggle{left:.625rem}#kb-toggle{display:var(--keyboard-display);left:calc(50vw - .9375rem)}#mode-toggle{right:.625rem}:root:not([theme=light]) #theme-dark{display:none}:root:not([theme=dark]) #theme-forest{display:none}:root:not([theme=forest]) #theme-ocean{display:none}:root:not([theme=ocean]) #theme-apple{display:none}:root:not([theme=apple]) #theme-ice{display:none}:root:not([theme=ice]) #theme-fire{display:none}:root:not([theme=fire]) #theme-royalty{display:none}:root:not([theme=royalty]) #theme-light{display:none}[kbVisibility=visible] #visibility-visible,[kbVisibility=hidden] #visibility-invisible,[mode=layout] #mode-layout,[mode=decomposition] #mode-decomposition{display:none}