:root{--ui:"General Sans", system-ui, -apple-system, sans-serif;--display:"General Sans", system-ui, sans-serif;--zh:"Noto Sans SC", "General Sans", system-ui, sans-serif;--paper:#fff;--ink:#111213;--soft:#6d6e70;--faint:#a6a7a9;--line:#ededee;--accent:#ff5a0a}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--paper);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55}.orb{place-items:center;display:grid;position:relative}.orb canvas{display:block}.room{background:var(--paper);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:26px;min-height:100dvh;padding:72px 24px 40px;display:flex;overflow-y:auto}.room-exit{width:38px;height:38px;color:var(--faint);cursor:pointer;background:0 0;border:none;border-radius:50%;place-items:center;transition:color .15s,background .15s;display:grid;position:fixed;top:22px;right:22px}.room-exit:hover{color:var(--ink);background:#f5f5f5}.room-orb{place-items:center;display:grid}.room-caption{color:var(--faint);letter-spacing:.01em;margin:0;font-size:14px}.room-gloss{max-width:460px;color:var(--faint);margin:-12px 0 0;font-size:11.5px;line-height:1.5}.room-error{color:#b4231b;max-width:440px;margin:0;font-size:13px}.room-controls{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.room-input{border:1px solid var(--line);border-radius:9px;align-items:center;gap:6px;width:min(460px,100%);padding:5px 5px 5px 14px;display:flex}.room-input input{font-family:var(--ui);color:var(--ink);background:0 0;border:none;outline:none;flex:1;font-size:14.5px}.room-input input::placeholder{color:var(--faint)}.subtitle{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 10px;max-width:760px;max-height:42vh;margin:0;display:flex;overflow-y:auto}.subtitle-word{flex-direction:column;align-items:center;line-height:1.2;display:inline-flex}.subtitle-word b{font-family:var(--zh);letter-spacing:.02em;color:var(--ink);font-size:36px;font-weight:400}.subtitle-word i{color:var(--soft);margin-top:5px;font-size:12.5px;font-style:normal}.subtitle-word small{color:var(--faint);margin-top:1px;font-size:11px}.subtitle-plain b{color:var(--soft)}.subtitle-es{color:var(--soft);font-size:16px}.subtitle-hanzi .subtitle-word b{font-size:40px}.subtitle-l .subtitle-word b{font-size:36px}.subtitle-m .subtitle-word b{font-size:29px}.subtitle-s .subtitle-word b{font-size:24px}.subtitle-xs .subtitle-word b{font-size:20px}.subtitle-s .subtitle-word i,.subtitle-xs .subtitle-word i{margin-top:3px;font-size:11.5px}.subtitle-s .subtitle-word small,.subtitle-xs .subtitle-word small{font-size:10px}.subtitle-s .subtitle-es{font-size:14px}.subtitle-xs .subtitle-es{font-size:13px}.subtitle-hanzi.subtitle-s .subtitle-word b{font-size:27px}.subtitle-hanzi.subtitle-xs .subtitle-word b{font-size:23px}.phrase{border:1px solid var(--line);background:var(--paper);text-align:left;border-radius:10px;width:min(430px,100%);padding:20px 22px 18px;animation:.3s cubic-bezier(.2,.7,.3,1) phrase-in;position:relative;box-shadow:0 14px 40px #11121317}@keyframes phrase-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.phrase-close{position:absolute;top:10px;right:10px}.phrase-label{letter-spacing:.13em;color:var(--faint);margin-bottom:9px;font-size:10px;font-weight:500;display:block}.phrase-hanzi{font-family:var(--zh);margin:0 0 6px;font-size:27px;font-weight:400;line-height:1.3}.phrase-pinyin{color:var(--soft);margin:0 0 8px;font-size:14px}.phrase-es{margin:0;font-size:14px}.phrase-context{color:var(--soft);margin:8px 0 0;font-size:13px}.phrase-beyond{border-top:1px solid var(--line);color:var(--faint);margin:12px 0 0;padding-top:10px;font-size:11.5px}.primary{background:var(--ink);color:#fff;font-family:var(--ui);cursor:pointer;border:none;border-radius:7px;align-items:center;gap:8px;padding:12px 22px;font-size:14.5px;font-weight:500;transition:opacity .15s;display:inline-flex}.primary:hover{opacity:.85}.primary:disabled{opacity:.3;cursor:not-allowed}.ghost{color:#2a2b2c;font-family:var(--ui);cursor:pointer;background:#ededed;border:1px solid #0000;border-radius:7px;align-items:center;gap:6px;padding:8px 13px;font-size:13px;font-weight:500;transition:color .15s,border-color .15s;display:inline-flex}.ghost:hover{color:#000;background:#e3e3e3}.ghost:disabled{opacity:.4;cursor:not-allowed}.ghost.on{background:var(--ink);color:#fff}.icon-button{width:34px;height:34px;color:var(--soft);cursor:pointer;background:0 0;border:none;border-radius:50%;place-items:center;transition:color .15s,background .15s;display:grid}.icon-button:hover{color:var(--ink);background:#f5f5f5}.icon-button:disabled{opacity:.3;cursor:not-allowed}.text-button{color:var(--soft);font-family:var(--ui);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;align-items:center;gap:5px;padding:0;font-size:13px;text-decoration:underline;display:inline-flex}.text-button:hover{color:var(--ink)}.page{background:var(--paper);flex-direction:column;min-height:100vh;display:flex}.bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:18px 26px;display:flex}.bar>div{align-items:center;gap:8px;display:flex}.wordmark{font-family:var(--display);color:var(--ink);letter-spacing:-.01em;cursor:pointer;background:0 0;border:none;padding:0;font-size:15px;font-weight:300}.wordmark b{font-weight:500}.count{color:var(--soft);background:#f2f2f2;border-radius:999px;margin-left:2px;padding:1px 6px;font-size:11px}main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:0 24px 64px}.start{text-align:center;flex-direction:column;align-items:center;gap:18px;padding-top:46px;display:flex}.start-orb{margin-bottom:4px}.start h1,.notebook h1{font-family:var(--display);letter-spacing:-.026em;margin:0;font-size:38px;font-weight:300}.start h1 em,.notebook h1 em{color:var(--faint);font-style:normal}.start-copy{max-width:430px;color:var(--soft);margin:0;font-size:14.5px}.start-picks{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.start-picks label,.modal label{letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:left;flex-direction:column;gap:5px;font-size:11px;display:flex}.start-picks select,.modal input{border:1px solid var(--line);background:var(--paper);font-family:var(--ui);color:var(--ink);border-radius:7px;outline:none;padding:9px 12px;font-size:14px}.start-picks select:focus,.modal input:focus{border-color:var(--ink)}.microcopy{max-width:430px;color:var(--faint);margin:0;font-size:11.5px;line-height:1.5}.error{color:#b4231b;max-width:440px;margin:0;font-size:13px}.start-words{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;width:100%;max-width:480px;margin-top:10px;padding-top:20px;display:flex}.start-words span{letter-spacing:.13em;color:var(--faint);font-size:10px}.start-words i{color:var(--soft);font-size:12px;font-style:normal}.start-words i b{font-family:var(--zh);color:var(--ink);font-size:15px;font-weight:400}.after{border-top:1px solid var(--line);text-align:left;width:100%;margin-top:30px;padding-top:26px}.notebook{padding-top:40px}.notebook-head{justify-content:space-between;align-items:center;gap:16px;display:flex}.notebook .start-copy{margin:8px 0 26px}.session-list{flex-direction:column;display:flex}.session-list button{border:none;border-bottom:1px solid var(--line);font-family:var(--ui);color:var(--ink);text-align:left;cursor:pointer;background:0 0;grid-template-columns:58px 1fr auto auto;align-items:center;gap:14px;padding:15px 4px;display:grid}.session-list button:hover{background:#fafafa}.session-list .date{letter-spacing:.05em;color:var(--faint);text-transform:uppercase;font-size:11px}.session-list b{font-size:14.5px;font-weight:500;display:block}.session-list small{color:var(--faint);font-size:11.5px}.session-list .count-words{color:var(--soft);font-size:13px}.session-list svg{color:var(--faint)}.empty{color:var(--faint);text-align:center;flex-direction:column;align-items:center;gap:12px;padding:60px 0;display:flex}.empty p{color:var(--soft);margin:0}.notebook-detail{flex-direction:column;gap:18px;display:flex}.notebook-detail h2,.after h2{font-family:var(--display);letter-spacing:-.022em;margin:0;font-size:26px;font-weight:300}.summary{grid-template-columns:1fr 1fr;gap:30px;margin-top:18px;display:grid}.summary h3{letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:0 0 6px;font-size:10px;font-weight:500}.summary>div>:not(h3)+h3{margin-top:22px}.summary p{margin:0 0 4px;font-size:14px}.summary p[lang=zh]{font-family:var(--zh);font-size:17px}.summary b[lang=zh]{font-family:var(--zh);font-weight:400}.summary small{color:var(--faint);margin-top:16px;font-size:11.5px;display:block}.feedback{border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:14px 16px}.feedback p:last-of-type{color:var(--soft);font-size:13.5px}.feedback small{color:var(--faint);margin-top:6px;font-size:11.5px;display:block}details summary{cursor:pointer;color:var(--soft);font-size:13px}.line{border-bottom:1px solid var(--line);padding:9px 0}.line span{letter-spacing:.12em;color:var(--faint);font-size:10px}.line p{margin:3px 0 0;font-size:14px}.backdrop{z-index:20;background:#11121347;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal{background:var(--paper);border-radius:12px;flex-direction:column;gap:12px;width:min(410px,100%);padding:28px;display:flex;position:relative;box-shadow:0 20px 56px #11121329}.modal-close{position:absolute;top:12px;right:12px}.modal h2{font-family:var(--display);letter-spacing:-.022em;margin:0;font-size:24px;font-weight:300}.modal p{color:var(--soft);margin:0;font-size:13.5px}.modal a{color:var(--accent);font-size:13px;text-decoration:none}.modal a:hover{text-decoration:underline}.modal .primary{align-self:flex-start}@media (width<=640px){.room{gap:20px;padding:60px 18px 32px}.subtitle-l .subtitle-word b{font-size:28px}.subtitle-m .subtitle-word b{font-size:24px}.subtitle-s .subtitle-word b{font-size:20px}.subtitle-xs .subtitle-word b{font-size:17px}.subtitle{max-height:38vh}.start h1,.notebook h1{font-size:30px}.summary{grid-template-columns:1fr;gap:22px}main{padding:0 18px 48px}.bar{padding:14px 18px}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}