*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f8f9fc;--surface: #ffffff;--border: #e4e7ef;--text: #0f1623;--text-dim: #6b7280;--committed: #1d3461;--accent: #4f6ef7;--accent-soft: #eef1fe;--preview-fg: #374151;--error-bg: #fef2f2;--error: #b91c1c;--log-bg: #0f1117;--log-border: #1f2330;--log-time: #4b5563;--log-label: #6381f8;--log-text: #9ca3af;--landing-bg: #0c0e14;--landing-text:#dce0f0;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, "Cascadia Code", "SF Mono", monospace}@media(prefers-color-scheme:dark){:root{--bg: #0c0e14;--surface: #13161f;--border: #1f2330;--text: #dce0f0;--text-dim: #4b5263;--committed: #93b4ff;--accent: #6381f8;--accent-soft: #17203a;--preview-fg: #c7cde0;--log-bg: #080a0f;--log-border: #181c28;--log-text: #6b7280;--landing-bg: #070911}}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.page{display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100dvh;max-width:720px;width:100%;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.lang-row{display:flex;align-items:center;gap:6px}.lang-select{padding:6px 26px 6px 10px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--text);font-size:.875rem;font-weight:500;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border-color .15s}.lang-select:focus{border-color:var(--accent)}.swap-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text-dim);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,transform .2s;flex-shrink:0}.swap-btn:hover{color:var(--accent);border-color:var(--accent);transform:rotate(180deg)}.topbar-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.log-toggle--open{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.status-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:500;background:var(--accent-soft);color:var(--accent)}.spinner{display:inline-block;width:10px;height:10px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.icon-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--text-dim);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,background .15s}.icon-btn:hover{color:var(--text);border-color:var(--text-dim)}.error-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 20px;background:var(--error-bg);color:var(--error);font-size:.85rem;border-bottom:1px solid currentColor}.error-dismiss{border:none;background:none;color:currentColor;cursor:pointer;font-size:.9rem}.easter-egg-bar{padding:10px 20px;background:linear-gradient(90deg,#1a2a1a,#1f3a2f);border-bottom:1px solid #2d5a3d;color:#6ee7a0;font-size:.9rem;font-weight:500;animation:easterIn .4s cubic-bezier(.16,1,.3,1)}@keyframes easterIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.main-area{flex:1;overflow-y:auto;padding:28px 28px 20px;display:flex;flex-direction:column}.committed-area{margin-bottom:16px}.committed-sentence{font-size:1.4rem;line-height:1.65;color:var(--committed);font-weight:500;margin-bottom:4px}.committed-word{display:inline;opacity:0;animation:wordCommit .35s cubic-bezier(.16,1,.3,1) forwards}.committed-space{display:inline}@keyframes wordCommit{0%{opacity:0;filter:blur(6px);transform:translateY(5px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}.source-editor{font-size:1.4rem;line-height:1.65;color:var(--text);outline:none;min-height:1.65em;word-break:break-word;caret-color:var(--accent);animation:caretGlow 1.1s ease-in-out infinite}.source-editor:empty:before{content:attr(data-placeholder);color:var(--text-dim);pointer-events:none}@keyframes caretGlow{0%,to{caret-color:var(--accent)}50%{caret-color:color-mix(in srgb,var(--accent) 15%,transparent)}}.source--out{animation:sourceOut .2s ease forwards!important}@keyframes sourceOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}.char-new{display:inline;animation:charPop .18s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes charPop{0%{opacity:0;filter:blur(3px);transform:scale(.82) translateY(2px)}to{opacity:1;filter:blur(0);transform:scale(1) translateY(0)}}.preview-block{margin-top:12px}.preview-divider{display:flex;align-items:center;gap:10px;margin-bottom:6px}.preview-divider:before,.preview-divider:after{content:"";flex:1;height:1px;background:var(--border)}.preview-lang-label{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);white-space:nowrap}.preview-text{font-size:1.15rem;line-height:1.6;color:var(--preview-fg)}.preview-word{display:inline;opacity:0;animation:previewIn .22s cubic-bezier(.16,1,.3,1) forwards}@keyframes previewIn{0%{opacity:0;filter:blur(4px);transform:translateY(3px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}.preview-hint{margin-top:6px;font-size:.75rem;color:var(--text-dim);display:flex;align-items:center;gap:5px}.empty-hint{font-size:.9rem;color:var(--text-dim);line-height:1.6;margin-top:4px}kbd{display:inline-flex;align-items:center;padding:1px 6px;border:1px solid var(--border);border-radius:4px;background:var(--bg);font-family:var(--font);font-size:.7rem;color:var(--text);line-height:1.6}.scroll-arrow{margin-top:auto;padding:16px 8px 8px;border:none;background:none;color:var(--text-dim);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--font);transition:color .2s}.scroll-arrow:hover{color:var(--accent)}.scroll-arrow-icon{font-size:1.2rem;animation:arrowBounce 2s ease-in-out infinite}@keyframes arrowBounce{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.scroll-arrow-label{font-size:.72rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}.log-panel{border-top:1px solid var(--log-border);background:var(--log-bg);height:180px;display:flex;flex-direction:column;flex-shrink:0;font-family:var(--mono);font-size:.7rem}.log-header{padding:4px 12px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--log-label);border-bottom:1px solid var(--log-border);flex-shrink:0;display:flex;justify-content:space-between;align-items:center}.log-count{color:var(--log-time);font-weight:400}.log-body{flex:1;overflow-y:auto;padding:4px 0}.log-line{display:grid;grid-template-columns:90px 90px 1fr;gap:0 8px;padding:1px 12px;line-height:1.5;white-space:nowrap;overflow:hidden}.log-time{color:var(--log-time)}.log-label{color:var(--log-label);font-weight:600}.log-text{color:var(--log-text);overflow:hidden;text-overflow:ellipsis}.landing{background:var(--landing-bg);color:var(--landing-text);padding:80px 28px}.landing-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.landing-eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:12px}.landing-title{font-size:2.2rem;font-weight:700;line-height:1.2;margin-bottom:16px;color:#fff}.landing-desc{font-size:1rem;line-height:1.7;color:#9ca3af;margin-bottom:32px}.download-group{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.download-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--accent);color:#fff;border-radius:10px;text-decoration:none;font-size:.95rem;font-weight:600;transition:opacity .15s,transform .15s}.download-btn:hover{opacity:.88;transform:translateY(-1px)}.firefox-icon{width:18px;height:18px;flex-shrink:0}.download-note{font-size:.78rem;color:#6b7280;line-height:1.5;max-width:320px}.download-note code{font-family:var(--mono);font-size:.75rem;background:#1f2330;padding:1px 5px;border-radius:4px;color:#9ca3af}.demo-side{display:flex;justify-content:center}.demo-frame{background:#13161f;border:1px solid #1f2330;border-radius:14px;overflow:hidden;width:100%;max-width:380px;box-shadow:0 24px 60px #00000080}.demo-topbar{background:#0c0e14;padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #1f2330}.demo-dot{width:9px;height:9px;border-radius:50%;background:#2d3148;flex-shrink:0}.demo-dot:nth-child(1){background:#ff5f57}.demo-dot:nth-child(2){background:#febc2e}.demo-dot:nth-child(3){background:#28c840}.demo-url{margin-left:8px;font-size:.72rem;color:#4b5563;font-family:var(--mono)}.demo-body{padding:20px;min-height:140px;position:relative}.demo-website-copy{font-size:.9rem;line-height:1.7;color:#6b7280}.demo-highlight{color:#dce0f0;position:relative}.demo-caret{display:inline-block;width:2px;height:1.1em;background:var(--accent);margin-left:1px;vertical-align:text-bottom;animation:demoCaret .8s step-end infinite}@keyframes demoCaret{50%{opacity:0}}.demo-popup{position:absolute;bottom:16px;left:16px;right:16px;background:#1a1d2e;border:1px solid #2d3148;border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.demo-popup--visible{opacity:1;transform:translateY(0)}.demo-popup-lang{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);flex-shrink:0}.demo-popup-text{font-size:.9rem;color:#dce0f0}.landing-video-wrap{max-width:960px;margin:56px auto 0;border-radius:14px;overflow:hidden;border:1px solid #1f2330;box-shadow:0 24px 60px #00000080;background:#000}.landing-video{display:block;width:100%;height:auto;max-height:540px;object-fit:contain}.install-guide{max-width:680px;margin:64px auto 0;padding:40px 48px;background:#0f1117;border:1px solid #1f2330;border-radius:16px}.install-title{font-size:1.25rem;font-weight:700;color:var(--landing-text);margin-bottom:28px}.install-steps{list-style:none;display:flex;flex-direction:column;gap:16px}.install-step{display:flex;align-items:flex-start;gap:14px}.step-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#1f2330;border:1px solid #2d3148;color:#6381f8;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}.step-text{font-size:.95rem;color:#9ca3af;line-height:1.6}.step-text strong{color:var(--landing-text);font-weight:600}.step-text code{font-family:var(--mono);font-size:.85em;background:#1f2330;color:#6381f8;padding:1px 6px;border-radius:4px}.install-note{margin-top:24px;font-size:.8rem;color:#4b5263;line-height:1.6;border-top:1px solid #1f2330;padding-top:16px}@media(max-width:680px){.landing-inner{grid-template-columns:1fr;gap:40px}.landing-title{font-size:1.7rem}.demo-side{order:-1}}@media(max-width:520px){.main-area{padding:18px 18px 16px}.source-editor,.committed-sentence{font-size:1.15rem}.preview-text{font-size:1rem}.log-panel{height:140px}.landing{padding:50px 20px}}