:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:oklch(100% 0 0);--text:oklch(14.5% 0 0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,Noto Sans KR,system-ui,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}main{min-height:100dvh;padding-block:max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-bottom));padding-inline:max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));place-items:center;display:grid}.stage{position:relative}h1{margin:0;font-size:1.25rem;font-weight:500;line-height:1.1}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.note{white-space:nowrap;opacity:0;filter:blur(4px);visibility:hidden;pointer-events:none;margin:0;font-size:.8125rem;font-weight:500;line-height:1.3;transition-property:opacity,filter,transform;transition-duration:.7s;transition-timing-function:cubic-bezier(.2,0,0,1);position:absolute;top:calc(100% + 1.5rem);left:50%;transform:translate(-50%)translateY(.12em)}.note.is-in{opacity:1;filter:blur();visibility:visible;pointer-events:auto;transform:translate(-50%)translateY(0)}.note a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px;transition-property:opacity,scale;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}.note a:hover{opacity:.5}.note a:active{scale:.96}.word{justify-content:center;align-items:center;column-gap:-.25px;display:flex}.cell{perspective:240px;justify-content:center;align-items:center;height:1.2em;transition-property:width;transition-duration:.65s;transition-timing-function:cubic-bezier(.2,0,0,1);display:inline-flex;overflow:hidden}.cell[data-kind=latin]{width:.68em}.cell[data-kind=hangul]{width:1.1em}.cell[data-kind=empty]{width:0}.glyph{transform-origin:50% 70%;transition-property:transform,filter,opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(.2,0,0,1);display:block}.cell.is-flipping .glyph{filter:blur(4px);opacity:0;will-change:transform, filter, opacity;transform:rotateX(-84deg)}@media (prefers-reduced-motion:reduce){.cell,.glyph,.note,.note a{transition:none}.cell.is-flipping .glyph{filter:none;opacity:1;will-change:auto;transform:none}}
