*,*:before,*:after{box-sizing:border-box}:root{--paper: #faf9f7;--surface: #eae9e9;--cell: #fffdf2;--text: #201e1d;--divider: color-mix(in srgb, #201e1d 16%, transparent);--divider-soft: color-mix(in srgb, #201e1d 8%, transparent);--muted: #7d7979;--muted-2: #9b9797;--spot: #0088b0;--spot-deep: #006786;--spot-tint: #e9f8ff;--spot-text: #006786;--mag: #d6006c;--mag-text: #aa0b56;--mag-tint: #fff1f4;--press-yellow: #edbb00;--tone-1: #0088b0;--tone-2: #d6006c;--tone-3: #0a303e;--tone-4: #790e3d;--tone-5: #9b9797;--font-body: "Source Serif 4", georgia, serif;--font-heading: "Source Serif 4", georgia, serif;--font-cjk: "Noto Serif SC", "Songti SC", serif;--radius-sm: 1px;--radius-md: 2px;--radius-lg: 4px;--shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);--shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);--shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent)}body.dark{--paper: #161519;--surface: #222126;--cell: #1d1c21;--text: #e9e7e2;--divider: color-mix(in srgb, #e9e7e2 16%, transparent);--divider-soft: color-mix(in srgb, #e9e7e2 8%, transparent);--muted: #a5a19f;--muted-2: #8b8886;--spot-text: #62c5ee;--spot-tint: #0e3241;--mag-text: #ff90b1;--mag-tint: #3d1430;--tone-1: #62c5ee;--tone-2: #ff90b1;--tone-3: #cbeeff;--tone-4: #ffc0d0;--tone-5: #8b8886;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 3px 10px rgba(0, 0, 0, .55);--shadow-lg: 0 12px 32px rgba(0, 0, 0, .6)}body{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.55;background:var(--paper);color:var(--text);transition:background .2s,color .2s;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:600;line-height:1.12;letter-spacing:-.015em;margin:0 0 var(--space-2, 10px)}a{color:var(--spot-text);text-underline-offset:3px}::selection{background:color-mix(in srgb,var(--spot) 30%,transparent)}:focus{outline:none}:focus-visible{outline:2px solid var(--spot);outline-offset:2px}.kicker{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.cjk{font-family:var(--font-cjk)}.tone-1{color:var(--tone-1)}.tone-2{color:var(--tone-2)}.tone-3{color:var(--tone-3)}.tone-4{color:var(--tone-4)}.tone-5{color:var(--tone-5)}.app{max-width:1120px;margin:0 auto;padding:20px 24px 64px}.masthead-row{display:flex;align-items:center;gap:14px;padding-bottom:11px}.brand-mark{position:relative;width:34px;height:34px;flex:none}.brand-mark:before{content:"";position:absolute;left:0;top:15px;width:34px;height:6px;background:var(--text);clip-path:polygon(0 34%,100% 0,100% 100%,0 66%);transform:rotate(-1.5deg)}.brand-mark:after{content:"";position:absolute;left:13px;top:0;width:7px;height:34px;background:var(--spot);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}.brand-word{font-family:var(--font-heading);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1}.brand-word .hz{color:var(--spot-text)}.masthead-meta{margin-left:auto;font-size:12px;color:var(--muted);display:flex;align-items:baseline;gap:16px}.masthead-meta a{color:inherit}.masthead-meta .stat b{font-family:var(--font-heading);font-size:15px;color:var(--text)}.masthead-meta .stat.hot b{color:var(--spot-text)}.rule-heavy{border-top:3px solid var(--text)}.rule-light{border-top:1px solid var(--text);margin-top:3px}.tab-nav{display:flex;gap:24px;padding-top:11px;overflow-x:auto;scrollbar-width:none}.tab-nav::-webkit-scrollbar{display:none}.tab-btn{font-family:var(--font-heading);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text);background:none;border:none;border-bottom:2px solid transparent;border-radius:0;padding:0 0 4px;cursor:pointer;white-space:nowrap}.tab-btn:hover{color:var(--spot-text)}.tab-btn.active{color:var(--spot-text);border-bottom-color:var(--spot-text)}.nav-date{margin-left:auto;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-bottom:4px}button{font-family:var(--font-heading);font-size:14px;font-weight:600;line-height:1.2;color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;background:transparent;border:1px solid transparent;padding:9px 16px;border-radius:var(--radius-md)}button:disabled{cursor:not-allowed}button:disabled:not(.quiz-option.correct):not(.quiz-option.wrong){opacity:.45}button.btn-primary{background:var(--spot);border-color:var(--spot);color:#fff}button.btn-primary:hover:not(:disabled){background:#1186ac}button.btn-primary:active:not(:disabled){background:#006786}button.btn-secondary{border-color:var(--divider)}button.btn-secondary:hover:not(:disabled){background:color-mix(in srgb,var(--text) 7%,transparent)}button.btn-ghost{color:var(--spot-text);padding-inline:6px}button.btn-ghost:hover:not(:disabled){background:color-mix(in srgb,var(--spot) 10%,transparent)}.grade-again{border-color:var(--mag)!important;color:var(--mag-text)!important}.grade-good{border-color:var(--spot)!important;color:var(--spot-deep)!important}body.dark .grade-good{color:var(--spot-text)!important}.grade-key{display:inline-block;font-size:10px;font-family:var(--font-body);opacity:.75;border:1px solid currentColor;border-radius:var(--radius-sm);padding:0 4px;line-height:1.4}.tag{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:1px;font-family:var(--font-heading)}.tag-accent{background:var(--spot-tint);color:var(--spot-text)}.tag-accent-2{background:var(--mag-tint);color:var(--mag-text)}.tag-neutral{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}.tag-outline{border:1px solid var(--spot-text);color:var(--spot-text)}input,textarea,select{font:inherit;font-size:14px;color:var(--text);caret-color:var(--spot);background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius-md);padding:7px 10px}input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--text) 65%,transparent);opacity:1}input:hover,textarea:hover,select:hover{border-color:color-mix(in srgb,var(--text) 45%,transparent)}input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--spot);outline-offset:0}.banner{background:var(--mag-tint);border:1px solid var(--mag);border-radius:var(--radius-md);padding:8px 12px;margin-bottom:10px;color:var(--mag-text);font-size:14px}.skeleton{width:120px;height:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--text) 8%,transparent),color-mix(in srgb,var(--text) 16%,transparent),color-mix(in srgb,var(--text) 8%,transparent));animation:shimmer 1.2s infinite}@keyframes shimmer{to{background-position-x:-200%}}.pane-title{font-size:25px;margin:0 0 14px}main{display:flex;gap:48px;margin-top:26px;flex-wrap:wrap}.chat-pane{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;min-height:480px}.messages{flex:1;overflow-y:auto;padding:4px 0;display:flex;flex-direction:column;gap:16px;min-height:320px;max-height:55vh}.msg{max-width:85%;white-space:pre-wrap;font-size:15px}.msg.user{align-self:flex-end;background:var(--surface);padding:9px 14px;border-radius:var(--radius-md)}.msg.assistant{align-self:flex-start;border-left:2px solid var(--spot);padding-left:13px}.msg .img-tag,.img-tag{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}.msg-save-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.save-char-btn{font-size:13px;padding:3px 9px;border-color:var(--divider)}.save-char-btn:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}.composer{display:flex;gap:10px;margin-top:12px;align-items:flex-end}.composer textarea{flex:1;resize:vertical;min-height:46px}.paste-preview{position:relative;margin-top:8px;display:flex;align-items:center;gap:8px}.paste-preview img{max-height:100px;border:1px solid var(--divider)}.canvas-pane{flex:0 1 360px}.canvas-stack{position:relative;width:320px;max-width:100%}.canvas-stack canvas{touch-action:none;cursor:crosshair;display:block;border:1px solid var(--text);background:var(--cell);width:100%;height:auto}.writer-host{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.writer-host>div{width:320px!important;height:320px!important}.canvas-pane button{margin-top:10px}.flashcard-pane{flex:1 1 100%;max-width:860px}.srs-stats-mini{font-size:13px;color:var(--muted);margin-bottom:14px;display:flex;align-items:baseline;gap:10px}.undo-btn{font-size:12px;padding:2px 10px;border-color:var(--divider)}.flashcard{text-align:center;padding:46px 32px;border:1px solid var(--divider);border-radius:var(--radius-md);background:color-mix(in srgb,var(--paper) 60%,#ffffff);box-shadow:var(--shadow-sm);margin-bottom:16px;display:flex;flex-direction:column;align-items:center;gap:14px}body.dark .flashcard{background:var(--surface)}.flashcard-char{font-family:var(--font-cjk);font-weight:900;font-size:120px;line-height:1}.flashcard-pinyin{font-family:var(--font-heading);font-size:30px;line-height:1.1}.flashcard-meaning{font-size:20px;font-style:italic}.grade-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}.srs-done{text-align:center;padding:24px;color:var(--muted);font-style:italic}.add-card-form{margin-top:14px}.add-card-form summary,.deck-list summary{cursor:pointer;font-size:14px;color:var(--spot-text)}.add-card-fields{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.deck-list{margin-top:14px}.deck-list ul{list-style:none;padding:0;margin:10px 0 0}.deck-list li{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--divider-soft);font-size:14px}.deck-char{font-family:var(--font-cjk);font-weight:600;font-size:22px;width:34px;text-align:center}.deck-pinyin{min-width:64px}.deck-meaning{flex:1;color:var(--muted)}.deck-remove{font-size:13px;padding:2px 8px;border-color:var(--divider)}.insights-pane{flex:1 1 100%;max-width:860px}.daily-goal{margin-bottom:30px;max-width:420px}.goal-header{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.goal-label{font-weight:600}.goal-count{color:var(--muted)}.goal-bar{height:3px;background:color-mix(in srgb,var(--text) 15%,transparent)}.goal-fill{height:100%;background:var(--spot);transition:width .3s ease}.goal-done{font-size:12px;color:var(--spot-deep);margin-top:6px;font-weight:600}body.dark .goal-done{color:var(--spot-text)}.insights-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:24px;margin-bottom:34px}.insight-card{border-top:1px solid var(--text);padding-top:10px}.insight-value{font-family:var(--font-heading);font-weight:600;font-size:44px;line-height:.95}.insight-card:first-child .insight-value{color:var(--spot-text)}.insight-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}.weak-chars h3{font-size:16px;margin-bottom:10px}.weak-chars ul{list-style:none;padding:0;max-width:560px}.weak-chars li{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--divider-soft);font-size:14px}.weak-char{font-family:var(--font-cjk);font-weight:600;font-size:22px;width:34px;text-align:center}.weak-rate{margin-left:auto;color:var(--mag-text);font-family:var(--font-heading);font-weight:600}.explain-pane{flex:1 1 100%;max-width:720px}.explain-input{display:flex;gap:10px;margin-bottom:20px;max-width:460px}.explain-input input{flex:1}.explain-result{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:start}.explain-char{font-family:var(--font-cjk);font-weight:900;font-size:150px;line-height:.95;text-align:center;border:1px solid var(--divider);background:var(--cell);padding:8px 0 0}.explain-row{padding:9px 0;border-bottom:1px solid var(--divider-soft);font-size:15px;display:flex;gap:8px;align-items:baseline}.explain-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:90px}.explain-source{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:12px}.explain-detail{font-size:14px;font-style:italic;color:var(--muted);margin-top:6px}.explain-save{margin-top:14px}.quiz-pane{flex:1 1 100%;max-width:720px}.quiz-modes{display:flex;gap:0;flex-wrap:wrap;margin-bottom:16px;border:1px solid var(--divider);border-radius:var(--radius-md);width:fit-content;overflow:hidden}.quiz-modes .tab-btn{padding:7px 14px;border-bottom:none;border-left:1px solid var(--divider);font-weight:400;letter-spacing:.04em;text-transform:none;font-size:13px;font-family:var(--font-body)}.quiz-modes .tab-btn:first-child{border-left:none}.quiz-modes .tab-btn.active{background:var(--spot);color:#fff}.quiz-modes .tab-btn.active:hover{color:#fff}.quiz-score{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:16px}.quiz-score strong{font-family:var(--font-heading);font-size:16px;color:var(--text)}.quiz-loading,.quiz-empty{color:var(--muted);font-style:italic}.quiz-card{text-align:center;padding:34px 24px;border:1px solid var(--divider);border-radius:var(--radius-md);background:color-mix(in srgb,var(--paper) 60%,#ffffff);box-shadow:var(--shadow-sm)}body.dark .quiz-card{background:var(--surface)}.quiz-kind{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--spot-text);margin-bottom:14px}.quiz-prompt{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:20px;font-size:17px}.quiz-bigchar{font-family:var(--font-cjk);font-weight:900;font-size:110px;line-height:1}.quiz-pinyin{font-family:var(--font-heading);font-weight:600;font-size:22px}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:480px;margin:0 auto}.quiz-option{padding:12px 8px;font-size:15px;border-color:var(--divider)}.quiz-options.chars .quiz-option{font-family:var(--font-cjk);font-size:30px;font-weight:600;padding:14px 8px}.quiz-option.correct{background:var(--spot-tint);border-color:var(--spot);color:var(--spot-deep);opacity:1}body.dark .quiz-option.correct{color:var(--spot-text)}.quiz-option.wrong{background:var(--mag-tint);border-color:var(--mag);color:var(--mag-text);opacity:1}.quiz-option.muted{opacity:.55}.quiz-feedback{margin-top:16px;font-size:15px;border-left:2px solid var(--spot);padding-left:13px;text-align:left}.quiz-feedback.fail{border-left-color:var(--mag);color:var(--mag-text)}.quiz-card .btn-primary{margin-top:16px}.scenes-pane{flex:1 1 100%;max-width:640px}.scenes-sub{font-size:15px;font-style:italic;color:var(--muted);margin:-6px 0 16px}.scenes-input{display:flex;gap:10px;max-width:460px}.scenes-input input{flex:1;font-size:16px}.scenes-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.scenes-chips .save-char-btn{font-family:var(--font-cjk);font-size:18px;font-weight:600;padding:3px 10px}.scene-card{margin-top:24px;padding:26px;border-top:3px solid var(--text);text-align:center}.scene-title{margin:0 0 16px;font-size:22px}.scene-cache{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400}.scene-stage{position:relative;width:min(380px,100%);aspect-ratio:1;margin:0 auto;border:1px solid var(--text);background:var(--cell)}.scene-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-cjk);font-weight:900;font-size:96px;line-height:1}.scene-el{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;max-width:96px}.scene-el-emoji{font-size:34px;line-height:1}.scene-el-rotulo{font-size:12px;font-weight:600}.scene-el-papel{font-size:11px;color:var(--muted)}.scene-historia{margin:18px auto 10px;font-size:16px;white-space:pre-wrap;max-width:46ch;border-left:2px solid var(--spot);padding-left:13px;text-align:left}.scene-uso{margin:0 0 16px;font-size:14px;color:var(--muted);font-style:italic}.scene-actions{display:flex;justify-content:center}.scene-hint{font-size:13px;color:var(--muted);margin-top:10px}.options-pane{flex:1 1 100%;max-width:560px}.option-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--divider-soft);font-size:15px;cursor:pointer}.option-row select,.option-row input[type=number],.option-row input[type=text]{max-width:200px}.upgrade-pane{flex:1 1 100%;max-width:460px}.pro-pitch{font-size:15px;font-style:italic;color:var(--muted);margin:-6px 0 18px}.plan-list{display:flex;gap:10px;margin-bottom:14px}.plan-card{flex:1;display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border:1px solid var(--divider);border-radius:var(--radius-md);cursor:pointer}.plan-card.active{border-color:var(--spot);box-shadow:inset 0 0 0 1px var(--spot);background:var(--spot-tint)}.plan-card input[type=radio]{position:absolute;opacity:0}.plan-name{font-size:14px;font-weight:600}.plan-price{font-family:var(--font-heading);font-weight:600;font-size:18px}.subscribe-btn{width:100%;margin-top:10px}.pix-btn{width:100%;margin-top:8px;border-color:var(--divider)}.pix-btn:hover:not(:disabled){background:color-mix(in srgb,var(--text) 7%,transparent)}.pix-result{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:center}.pix-result img{border:1px solid var(--divider);background:#fff;padding:4px}.pix-result p{font-size:12px;color:var(--muted);margin:0}.pix-result textarea{width:100%;font-size:12px}.login-gate{min-height:80vh;display:grid;place-items:center}.login-card{width:min(380px,92vw);border-top:3px solid var(--text);padding-top:26px;display:grid;gap:12px}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}.login-card p{margin:0;color:var(--muted);font-size:14px}.login-error{color:var(--mag-text);font-size:14px;margin:0}@media (max-width: 760px){.app{padding:14px 16px 110px}.brand-word{font-size:19px}.masthead-meta{font-size:11px;gap:10px}.nav-date{display:none}.tab-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:20px;background:var(--surface);border-top:1px solid var(--text);scroll-padding-left:16px;-webkit-overflow-scrolling:touch}main{margin-top:20px;gap:32px}.chat-pane,.canvas-pane{flex:1 1 auto;width:100%}.canvas-pane{display:flex;flex-direction:column;align-items:center}.canvas-pane h2,.chat-pane h2{align-self:flex-start}.explain-result{grid-template-columns:1fr}.explain-char{font-size:110px;max-width:220px;margin:0 auto}.flashcard-char{font-size:96px}.grade-buttons .tab-btn{flex:1}}.pro-badge{font-size:.68rem;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:999px;border:1px solid currentColor;align-self:center}.pix-waiting{font-size:.8rem;opacity:.7;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.3}}.step-label{font-size:.8rem;font-weight:600;opacity:.7;margin:12px 0 4px}.otp-row{display:flex;gap:8px;margin-top:6px}.otp-row input{flex:1;padding:6px 8px;border-radius:6px;border:1px solid #ccc4ab;font:inherit;font-size:1rem;letter-spacing:.2em}.dark .otp-row input{background:#2a2a28;border-color:#444;color:#e5e5e0}.verified-ok{font-size:.82rem;color:#2e7d32;margin:4px 0}.dark .verified-ok{color:#81c784}.pro-card{margin-top:14px;border-top:3px solid var(--text);display:flex;flex-direction:column}.pro-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--divider);font-size:15px}.pro-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.pro-value{font-family:var(--font-heading);font-weight:600}.pro-ok{color:var(--spot-deep)}.pro-warn{color:var(--mag-text)}.manage-msg{margin:12px 0 0;font-size:14px;border-left:2px solid var(--spot);padding-left:12px;color:var(--text)}.manage-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}.confirm-box{border:1px solid var(--mag);border-radius:var(--radius-md, 4px);background:var(--mag-tint, rgba(214, 0, 108, .06));padding:14px;display:flex;flex-direction:column;gap:10px}.confirm-box p{margin:0;font-size:14px;color:var(--text)}.confirm-row{display:flex;gap:10px;flex-wrap:wrap}.pro-details{margin-top:18px}.pro-details summary{cursor:pointer;font-size:14px;color:var(--spot-text)}.pro-detail-note{font-size:13px;color:var(--muted);margin:8px 0}.otp-msg{font-size:.82rem;margin:6px 0 0;color:var(--muted)}.otp-msg.error{color:var(--mag-text)}.usage-bar{margin:10px 0 4px;height:8px;border:1px solid var(--divider);border-radius:999px;overflow:hidden}.usage-fill{height:100%;background:var(--spot);transition:width .4s ease}.usage-note{font-size:13px;color:var(--muted);margin:8px 0 0}.usage-note a{color:var(--spot-text)}