@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@600;700&family=Noto+Sans+SC:wght@500;700;900&display=swap";:root{--paper:#fffaf0;--ink:#243034;--muted:#637071;--coral:#d85643;--grid:#edcfb8;--line:#e8dfcf;--white:#fffefd;--sky:#d6ebf6}*{box-sizing:border-box}body{margin:0;background:#fffaf0;color:var(--ink);font-family:DM Sans,sans-serif;min-height:100vh}button,textarea{font:inherit}button{cursor:pointer}.app-shell{margin:0 auto;max-width:1120px;padding:calc(28px + env(safe-area-inset-top)) clamp(16px,4vw,44px) calc(30px + env(safe-area-inset-bottom))}.workspace{background:var(--white);border:2px solid var(--line);border-radius:24px;box-shadow:0 4px #59482a14;padding:clamp(16px,3vw,28px)}.canvas-tools,.footer-tools{align-items:center;display:flex;justify-content:space-between;gap:16px}.canvas-tools{margin-bottom:14px}.tool-title{font-family:Noto Sans SC,sans-serif;font-size:22px;font-weight:900}.writing-canvas{background:linear-gradient(90deg,transparent 49.5%,var(--grid) 50% 50.8%,transparent 51%),linear-gradient(transparent 49.5%,var(--grid) 50% 50.8%,transparent 51%),#fffdf7;background-position:-38px -31px;background-size:132px 132px;border:3px solid #e9cdb5;border-radius:18px;min-height:360px;overflow:hidden;position:relative}.annotation-layer,.raw-input{font-family:Noto Sans SC,DM Sans,sans-serif;font-size:clamp(58px,8vw,88px);font-weight:700;height:354px;line-height:1.5;min-height:354px;padding:35px 28px;width:100%}.annotation-layer{pointer-events:none;position:absolute;inset:0}.raw-input{background:transparent;border:0;caret-color:transparent;color:transparent;-webkit-text-fill-color:transparent;outline:none;position:relative;resize:none;z-index:1}.raw-input::placeholder{color:#82908d;-webkit-text-fill-color:#82908d;font-size:clamp(32px,5vw,48px);font-weight:500}.raw-input:focus{box-shadow:inset 0 0 0 4px #fbd9d1}.annotated-line{align-items:flex-end;display:flex;flex-wrap:wrap;gap:6px 3px;width:100%}.word{align-items:center;display:inline-flex;flex-direction:column;justify-content:flex-end;min-height:132px;white-space:pre-wrap}.chinese-word{min-width:132px;position:relative}.punctuation-glyph{bottom:3px;font-size:.52em;position:absolute;right:5px;transform:translate(50%)}.pronunciation{color:var(--coral);font:900 26px/1.1 DM Sans,sans-serif;min-height:30px}.glyph{font:inherit;line-height:1.15}.visual-caret{align-self:flex-end;background:var(--coral);height:.9em;margin:0 0 8px 5px;opacity:0;width:3px}.writing-canvas:focus-within .visual-caret{animation:blink 1s steps(1,end) infinite;opacity:1}@keyframes blink{50%{opacity:0}}.footer-tools{margin-top:14px}.typing-tip{color:var(--muted);font-size:16px;line-height:1.4;margin:0}.soft-button,.text-button{border:0;border-radius:14px;font-weight:700;min-height:48px;padding:10px 17px}.soft-button{background:var(--sky);color:#244353;font-size:17px;white-space:nowrap}.text-button{background:transparent;color:var(--muted);text-decoration:underline}button:focus-visible{outline:4px solid #465bff;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.5}.sr-only{height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:820px),(max-height:850px){.app-shell{padding-block:14px}.workspace{padding:18px}.writing-canvas{background-position:-32px -26px;background-size:112px 112px;min-height:240px}.annotation-layer,.raw-input{font-size:min(9vw,72px);height:234px;min-height:234px;padding:30px 24px}.word,.chinese-word{min-width:112px;min-height:112px}.footer-tools{margin-top:10px}}@media(max-width:520px){.writing-canvas{background-position:-34px -24px;background-size:104px 104px;min-height:300px}.annotation-layer,.raw-input{font-size:56px;height:294px;min-height:294px;padding:28px 18px}.chinese-word{min-width:104px}.word{min-height:104px}.footer-tools{align-items:flex-start;flex-direction:column}.soft-button{width:100%}}