:root{--stage:#e7e4e0;--surround:#f2f0ed;--page:#faf7f2;--ink:#000;--word:#37291d;--headword:#1f1a17;--accent:#b5532a;--ipa:#7a6c62;--example:#5a4e46;--muted:#8a8580;--ghost:#efedea;--dot:#cbc8c4;--display:"Inter", "Segoe UI", system-ui, sans-serif;--body:"Montserrat", "Segoe UI", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--stage);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--word);outline-offset:3px}.stage{justify-content:center;height:100%;display:flex}.phone{background:var(--surround);flex-direction:column;width:100%;max-width:440px;height:100%;display:flex;position:relative;overflow:hidden}@media (width>=600px){.stage{padding-block:24px}.phone{border-radius:24px;max-width:min(600px,80dvh - 144px);box-shadow:0 24px 60px #37291d1f}}.topbar{z-index:5;padding:calc(env(safe-area-inset-top,0px) + 12px) 44px 8px;--track:#37291d12;--thumb:#fff;--thumb-shadow:0 1px 2px #37291d1f, 0 4px 12px #37291d1a;--tab-on:#37291d;--tab-idle:#8a8580;flex:none;justify-content:center;align-items:center;display:flex;position:relative}.tabs{background:var(--track);border-radius:999px;padding:4px;display:flex;position:relative}.thumb{width:var(--w,0px);translate:var(--x,0px) 0;background:var(--thumb);box-shadow:var(--thumb-shadow);border-radius:999px;position:absolute;top:4px;bottom:4px;left:0}.tabs[data-ready] .thumb{transition:translate .4s cubic-bezier(.3,1.35,.5,1),width .4s cubic-bezier(.3,1.35,.5,1),background .3s}.tab{z-index:1;letter-spacing:.02em;white-space:nowrap;color:var(--tab-idle);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:8px 13px;font-size:13px;font-weight:700;transition:color .3s;display:flex;position:relative}.tab[aria-current=page]{color:var(--tab-on)}.tab svg{transition:rotate .4s}.tab[aria-current=page] svg{rotate:-10deg}@media (prefers-reduced-motion:reduce){.thumb,.tab svg{transition:none}}.account{right:max(12px, env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 18px);position:absolute}.me{background:var(--page);cursor:pointer;border:0;border-radius:50%;place-items:center;width:28px;height:28px;padding:0;display:grid;overflow:hidden}.avatar{object-fit:cover;color:#fff;background:#37291d;border-radius:50%;flex:none;place-items:center;font-size:13px;font-weight:700;display:grid}.me .avatar{width:100%;height:100%}.account-card{color:#1f1a16;transform-origin:100% 0;background:#fff;border-radius:16px;flex-direction:column;gap:10px;width:248px;padding:14px;display:flex;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 0 0 1px #37291d14,0 16px 40px #140e0838}@media (prefers-reduced-motion:no-preference){.account-card{animation:.18s ease-out pop}}@keyframes pop{0%{opacity:0;scale:.94}}.account-who{align-items:center;gap:10px;min-width:0;display:flex}.account-text{min-width:0}.account-name,.account-email,.account-note{margin:0}.account-name{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;overflow:hidden}.account-email{color:#8a8580;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.account-note{color:#8a8580;border-top:1px solid #efedea;padding-top:10px;font-size:12px}.signout{color:#a7362c;cursor:pointer;background:#fbf3f2;border:1px solid #ecd2cf;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px;font-size:13px;font-weight:700;display:flex}.signout:hover{background:#f7e6e4}.viewer{flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;container-type:size}.track{scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;width:100%;display:flex;overflow:auto hidden}.track::-webkit-scrollbar{display:none}.slide{scroll-snap-align:center;scroll-snap-stop:always;flex:0 0 100%;place-items:center;display:grid}.below{flex-direction:column;flex:none;align-items:center;gap:12px;min-height:56px;padding-top:14px;display:flex}.pagedots{align-items:center;gap:6px;display:flex}.pagedots span{background:var(--dot);border-radius:50%;width:6px;height:6px;transition:background .2s}.pagedots span.small{width:4px;height:4px}.pagedots span.on{background:var(--word)}.hint{letter-spacing:.12em;color:var(--muted);margin:0;font-size:12px;font-weight:500}.post{aspect-ratio:1;background:var(--page);width:min(100cqw,100cqh - 70px);position:relative;overflow:hidden;container-type:inline-size}.entry{flex-direction:column;width:78.33cqw;display:flex;position:absolute;left:11.38cqw}.entry-1{top:11.85cqw}.entry-2{top:54.78cqw}.entry:before{content:"";background:var(--accent);width:max(1px,.37cqw);height:31.47cqw;position:absolute;top:.89cqw;left:-2.95cqw}.word{font-family:var(--display);letter-spacing:0;color:var(--headword);white-space:nowrap;z-index:1;margin:0;font-size:8.61cqw;font-weight:700;line-height:1.15;position:relative}.word button,.example button{all:unset;cursor:pointer}.ipa,.pos,.meaning,.example{margin:0;line-height:1.45}.ipa{letter-spacing:.14em;color:var(--ipa);margin-top:1.95cqw;font-size:2.68cqw}.pos{color:var(--accent);margin-top:1.2cqw;font-size:2.22cqw;font-weight:600;line-height:1.4}.meaning{letter-spacing:.04em;color:var(--word);margin-top:.6cqw;font-size:2.78cqw}.example{color:var(--example);letter-spacing:.04em;text-align:justify;margin-top:.75cqw;font-size:2.54cqw;font-style:italic;font-weight:300}.ghost .entry:before{background:var(--ghost)}.bar{background:var(--ghost);border-radius:99px;height:2.2cqw;margin-block:.75cqw;display:block}.bar.tall{border-radius:2cqw;height:7.5cqw;margin-bottom:1.8cqw}.w30{width:30%}.w35{width:35%}.w50{width:50%}.w55{width:55%}.w65{width:65%}.w90{width:90%}.locked{place-items:center;display:grid}.locked>*{grid-area:1/1}.end{place-items:center;display:grid}.note{text-align:center;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:300px;display:flex}.gate{z-index:1;background:var(--page);width:calc(100% - 40px);box-shadow:0 0 0 1px var(--ink);border-radius:4px;padding:26px 18px;position:relative}.note-eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0;font-size:12px;font-weight:600}.note-title{font-family:var(--display);letter-spacing:-.015em;color:var(--word);text-wrap:balance;margin:0;font-size:26px;font-weight:700;line-height:1.15}.note-text{letter-spacing:.03em;color:#4a4642;text-wrap:balance;margin:0 0 8px;font-size:14px}.note-error{color:#b3392f;margin:0;font-size:13px}.google{max-width:100%;min-height:44px;overflow:hidden}.btn{background:var(--ink);color:var(--page);letter-spacing:.04em;cursor:pointer;border:0;border-radius:999px;padding:11px 22px;font-weight:600}.topic{aspect-ratio:4/5;color:#1f1a17;--round:"Baloo 2", "Be Vietnam Pro", sans-serif;background:#faf7f2;width:min(100cqw,80cqh - 56px);font-family:Be Vietnam Pro,Segoe UI,system-ui,sans-serif;position:relative;overflow:hidden;container-type:inline-size}.topic-tag{color:#b5532a;height:4.07cqw;font-family:var(--round);white-space:nowrap;border:max(1px,.19cqw) solid #b5532a;border-radius:99px;align-items:center;margin:0;padding:0 2.5cqw;font-size:2.72cqw;font-weight:800;line-height:1;display:flex;position:absolute;top:10.09cqw;left:10cqw}.topic-title{width:57.4cqw;font-family:var(--round);white-space:nowrap;margin:0;font-weight:800;line-height:1.05;position:absolute;top:15.28cqw;left:9.63cqw}.topic-sub{flex-direction:column;align-items:flex-end;display:flex;position:absolute;top:13.61cqw;right:6.3cqw}.topic-sub-bar{background:#b5532a;width:5.56cqw;height:.74cqw;margin-bottom:.83cqw}.topic-sub-main{color:#b5532a;font-size:3.15cqw;font-weight:800;line-height:1.2}.topic-sub-note{color:#8a8178;margin-top:.75cqw;font-size:2.35cqw;line-height:1.2}.t-head{color:#b5532a;border-bottom:max(1px,.19cqw) solid #1f1a17;height:6.85cqw;font-size:3.77cqw;font-weight:800;line-height:1.4;position:absolute;top:27.34cqw;left:6.44cqw;right:6.44cqw}.t-head span{position:absolute;top:0}.t-head span:first-child{left:3.65cqw}.t-head span:last-child{left:39.3cqw}.t-row{left:0;right:0;top:calc((394.4 + var(--i) * 180.35) * 1cqw / 10.8);position:absolute}.cell-en{flex-direction:column;width:34cqw;display:flex;position:absolute;top:.99cqw;left:10.09cqw}.t-word{all:unset;cursor:pointer;font-family:var(--round);color:#37291d;white-space:nowrap;font-size:5.24cqw;font-weight:800;line-height:1.1}.t-ipa{color:#7a7068;margin-top:.13cqw;font-size:2.51cqw;line-height:1.3}.cell-vi{flex-direction:column;display:flex;position:absolute;top:0;left:46.04cqw;right:2.5cqw}.cell-vi:before{content:"";border-left:max(1px,.19cqw) dashed #d9d2c7;height:11.73cqw;position:absolute;top:-.3cqw;left:-2.12cqw}.t-meaning{white-space:nowrap;font-size:3.42cqw;font-weight:700;line-height:1.2}.t-example{all:unset;cursor:pointer;color:#3d3631;white-space:nowrap;margin-top:.6cqw;font-size:2.51cqw;font-style:italic;line-height:1.3}.t-example-vi{color:#8a8178;white-space:nowrap;margin-top:.62cqw;font-size:2.28cqw;line-height:1.3}.t-line{background:#1f1a172e;height:1px;position:absolute;top:13.83cqw;left:6.32cqw;right:6.32cqw}
