@import "https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400&display=swap";:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*{box-sizing:border-box}body{color:#e5e7eb;background:#0f172a;margin:0;font-family:system-ui,sans-serif}.app{flex-direction:column;height:100vh;display:flex}.topbar{background:#111827;border-bottom:1px solid #1f2937;flex-direction:column;gap:8px;padding:10px 20px 8px;display:flex}.topbar-titlebar{align-items:center;display:flex}.topbar h1{text-align:center;flex:1;margin:0;font-size:20px}.profile-button{color:#9ca3af;cursor:pointer;background:#1f2937;border:1px solid #374151;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:flex}.profile-button:hover{color:#e5e7eb;background:#374151}@keyframes dropdown-sparkle{0%{border-color:#374151;box-shadow:0 8px 24px #00000080}25%{border-color:#60a5fa;box-shadow:0 0 16px 4px #60a5fa80}50%{border-color:#a78bfa;box-shadow:0 0 20px 6px #a78bfa80}75%{border-color:#60a5fa;box-shadow:0 0 16px 4px #60a5fa66}to{border-color:#374151;box-shadow:0 8px 24px #00000080}}.profile-dropdown-sparkle{animation:1s ease-in-out dropdown-sparkle}.profile-wrap{position:relative}.profile-dropdown{z-index:50;background:#1f2937;border:1px solid #374151;border-radius:10px;flex-direction:column;gap:2px;min-width:130px;padding:6px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 24px #00000080}.profile-dropdown-item{color:#e5e7eb;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;padding:9px 12px;font-size:14px}.profile-dropdown-item:hover{background:#374151}.topbar-controls{align-items:center;gap:12px;display:flex}.topbar-right{align-items:center;gap:10px;margin-left:auto;display:flex}.english-toggle{color:#9ca3af;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:13px;display:flex}.login-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.login-modal-close{color:#9ca3af;cursor:pointer;z-index:201;background:0 0;border:none;padding:4px;font-size:28px;line-height:1;position:fixed;top:24px;right:28px}.login-modal-close:hover{color:#f8fafc}.menu-wrap{position:relative}.hamburger{color:#e5e7eb;cursor:pointer;background:#1f2937;border:1px solid #374151;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:flex}.hamburger:hover{background:#374151}.menu-backdrop{z-index:49;position:fixed;inset:0}.menu-dropdown{z-index:50;background:#1f2937;border:1px solid #374151;border-radius:10px;flex-direction:column;gap:4px;min-width:180px;padding:8px;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 24px #00000080}.menu-item{color:#e5e7eb;cursor:pointer;white-space:nowrap;border-radius:6px;align-items:center;gap:8px;padding:8px 10px;font-size:14px;display:flex}.menu-item:hover{background:#374151}.menu-item input[type=number]{color:#e5e7eb;text-align:center;background:#111827;border:1px solid #4b5563;border-radius:6px;width:52px;margin-left:auto;padding:4px 6px;font-size:13px}.menu-difficulty{border-top:1px solid #374151;flex-direction:column;gap:8px;margin-top:4px;padding:8px 10px 4px;display:flex}.menu-difficulty-label{color:#6b7280;font-size:12px}.menu-difficulty-buttons{gap:6px;display:flex}.menu-difficulty-buttons .diff-btn{flex:1;width:auto;height:34px;font-size:14px}.diff-btn.active{color:#fff;background:#3b82f6;border-color:#3b82f6}.topbar-left{flex-direction:column;gap:6px;display:flex}.topbar-difficulty{align-items:center;gap:4px;display:flex}.topbar-difficulty-label{color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-right:2px;font-size:10px}.topbar-difficulty .diff-btn{width:22px;height:22px;padding:0;font-size:11px}.browse-button{color:#e5e7eb;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:#1f2937;border:1px solid #374151;border-radius:8px;max-width:260px;padding:8px 14px;font-size:14px;overflow:hidden}.browse-button:hover{background:#374151}.browser-overlay{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.browser-modal{background:#111827;border:1px solid #1f2937;border-radius:14px;flex-direction:column;width:860px;height:600px;display:flex;overflow:hidden;box-shadow:0 20px 60px #0009}.browser-diff-pick{flex-direction:column;height:100%;display:flex}.browser-diff-pick-header{border-bottom:1px solid #1f2937;flex-shrink:0;align-items:center;gap:12px;padding:14px 18px;display:flex}.browser-flow-x{color:#9ca3af;cursor:pointer;background:0 0;border:1px solid #374151;border-radius:6px;margin-left:auto;padding:5px 10px;font-size:13px}.browser-flow-x:hover{color:#e5e7eb;background:#1f2937}.browser-back{color:#9ca3af;cursor:pointer;background:0 0;border:1px solid #374151;border-radius:6px;padding:5px 10px;font-size:13px}.browser-back:hover{color:#e5e7eb;background:#1f2937}.browser-diff-pick-title{color:#e5e7eb;font-size:15px;font-weight:500}.browser-diff-pick-body{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;display:flex}.browser-diff-label{color:#6b7280;font-size:13px}.browser-diff-buttons{gap:10px;display:flex}.diff-btn{color:#9ca3af;cursor:pointer;background:0 0;border:1px solid #374151;border-radius:8px;width:48px;height:48px;font-size:18px;transition:background .15s,color .15s,border-color .15s}.diff-btn:hover:not(:disabled){color:#e5e7eb;background:#1f2937;border-color:#4b5563}.diff-btn:disabled{opacity:.3;cursor:not-allowed}.browser-body{flex:1;min-height:0;display:flex;overflow:hidden}.browser-sidebar{border-right:1px solid #1f2937;flex-direction:column;gap:4px;width:220px;min-width:220px;padding:12px 10px;display:flex;overflow-y:auto}.browser-new-btn{color:#86efac;cursor:pointer;background:#14532d;border:1px solid #166534;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:18px;line-height:1;display:flex}.browser-new-btn:hover{color:#bbf7d0;background:#166534}.browser-new-btn-locked{opacity:.4;cursor:not-allowed}.browser-new-teaser-wrap{flex-direction:row;align-items:center;gap:8px;padding-bottom:4px;display:flex}.browser-new-teaser-tip{color:#6b7280;word-wrap:break-word;white-space:normal;margin:0;font-size:11px;line-height:1.5}.browser-sidebar-divider{background:#1f2937;height:1px;margin:4px}.browser-cat{text-align:left;color:#9ca3af;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;border-radius:8px;padding:10px 14px;font-size:15px;overflow:hidden}.browser-cat:hover{color:#e5e7eb;background:#1f2937}.browser-cat.active{color:#fff;background:#1d4ed8}.browser-files{flex-direction:column;flex:1;gap:4px;padding:10px;display:flex;overflow-y:auto}.browser-file{text-align:left;color:#e5e7eb;cursor:pointer;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:13px 16px;font-size:15px}.browser-file:hover{color:#fff;background:#263348;border-color:#3b82f6}.new-flow-audio-overlay{background:#0f172ad9;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.new-flow-preview{flex-direction:column;flex:1;gap:10px;padding:16px 20px;display:flex;overflow-y:auto}.new-flow-bubble{background:#1e293b;border:1px solid #334155;border-radius:12px;max-width:75%;padding:10px 14px}.new-flow-bubble.right{background:#064e3b;border-color:#047857;align-self:flex-end}.new-flow-preview-footer{border-top:1px solid #1f2937;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.new-flow-create{color:#86efac;cursor:pointer;background:#14532d;border:1px solid #166534;border-radius:8px;padding:9px 20px;font-size:14px;font-weight:600}.new-flow-create:hover{color:#bbf7d0;background:#166534}.new-flow-body{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:32px;display:flex}.new-flow-label{color:#d1d5db;text-align:center;font-size:15px}.new-flow-input{resize:none;color:#e5e7eb;background:#1f2937;border:1px solid #374151;border-radius:10px;width:100%;max-width:440px;height:100px;padding:12px 14px;font-family:inherit;font-size:14px;line-height:1.5}.new-flow-input:focus{border-color:#3b82f6;outline:none}.new-flow-next{color:#fff;cursor:pointer;background:#1d4ed8;border:none;border-radius:8px;padding:10px 28px;font-size:14px;font-weight:600}.new-flow-next:hover:not(:disabled){background:#2563eb}.new-flow-next:disabled{opacity:.35;cursor:default}.generating-overlay{z-index:200;background:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.generating-box{flex-direction:column;align-items:center;gap:16px;display:flex}.generating-spinner{border:3px solid #1f2937;border-top-color:#3b82f6;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.generating-label{color:#9ca3af;font-size:14px}.raw-response-modal{background:#111827;border:1px solid #1f2937;border-radius:14px;flex-direction:column;width:720px;max-height:80vh;display:flex;overflow:hidden;box-shadow:0 20px 60px #0009}.raw-response-header{color:#9ca3af;border-bottom:1px solid #1f2937;flex-shrink:0;justify-content:space-between;align-items:center;padding:14px 18px;font-size:13px;font-weight:600;display:flex}.raw-response-body{color:#86efac;white-space:pre-wrap;word-break:break-all;background:#0d1117;flex:1;margin:0;padding:16px 20px;font-size:12px;overflow-y:auto}.global-controls{gap:8px;display:flex}.global-play-button,.global-stop-button{cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600}.global-play-button{color:#fff;background:#1d4ed8}.global-play-button:hover:not(:disabled){background:#2563eb}.global-stop-button{color:#e5e7eb;background:#374151}.global-stop-button:hover:not(:disabled){background:#4b5563}.global-play-button:disabled,.global-stop-button:disabled{opacity:.35;cursor:default}.message{cursor:pointer}.message.active>.bubble{outline-offset:2px;outline:2px solid #3b82f6}.content{flex-direction:row;flex:1;display:flex;overflow:hidden}.empty{color:#9ca3af;flex:1;padding:40px}.chat{background:#0f172a;flex:1;padding:20px;overflow-y:auto}.meta{color:#9ca3af;gap:12px;margin-bottom:20px;display:flex}.message{margin-bottom:14px;display:flex}.message.left{justify-content:flex-start}.message.right{justify-content:flex-end}.bubble{background:#1e293b;border:1px solid #334155;border-radius:16px;max-width:70%;padding:14px 16px;box-shadow:0 2px 10px #00000059}.message.right .bubble{background:#064e3b;border-color:#047857}.speaker{color:#94a3b8;margin-bottom:6px;font-size:12px;font-weight:700}.thai{color:#f8fafc;margin-bottom:8px;font-size:22px}.karaoke{color:#cbd5e1;margin-bottom:6px;font-size:15px}.english{color:#94a3b8;font-size:14px}.bubble-actions{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.play-button{color:#f8fafc;cursor:pointer;background:#334155;border:none;border-radius:999px;width:32px;height:32px;margin-left:auto;font-size:14px}.play-button:hover{background:#475569}.play-button.playing{color:#052e16;background:#22c55e}.copy-button{color:#f8fafc;cursor:pointer;white-space:nowrap;background:#334155;border:none;border-radius:999px;align-items:center;gap:5px;height:32px;padding:6px 12px;font-size:14px;display:flex}.copy-button:hover{background:#475569}.copy-button.copied{color:#052e16;background:#22c55e}.tutor-lock-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10;background:#0a0f1e80;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.tutor-lock-icon{font-size:32px}.tutor-lock-text{color:#e5e7eb;margin:0;font-size:14px;font-weight:600}.tutor-lock-login{color:#60a5fa;cursor:pointer;background:0 0;border:none;padding:0;font-size:14px;font-weight:600;text-decoration:underline}.tutor-panel{background:#0d1424;border-left:1px solid #1f2937;flex-direction:column;width:340px;min-width:260px;display:flex;position:relative}.tutor-header{color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #1f2937;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:13px;font-weight:700;display:flex}.tutor-info{color:#6b7280;cursor:default;letter-spacing:0;text-transform:none;background:#1f2937;border:1px solid #374151;border-radius:50%;justify-content:center;align-items:center;width:15px;height:15px;font-size:10px;font-weight:700;display:flex;position:relative}.tutor-info:hover .tutor-tooltip{opacity:1;pointer-events:auto}.tutor-tooltip{color:#d1d5db;white-space:normal;text-align:center;opacity:0;pointer-events:none;letter-spacing:0;text-transform:none;z-index:1000;background:#1f2937;border:1px solid #374151;border-radius:6px;max-width:180px;padding:6px 10px;font-size:12px;font-weight:400;transition:opacity .15s;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.tutor-messages{flex-direction:column;flex:1;gap:10px;padding:16px;display:flex;overflow-y:auto}.tutor-empty{color:#4b5563;text-align:center;margin-top:20px;font-size:13px}.tutor-msg{white-space:pre-wrap;word-break:break-word;border-radius:12px;padding:10px 13px;font-size:14px;line-height:1.5}.tutor-msg-user{color:#eff6ff;background:#1d4ed8;align-self:flex-end;max-width:85%}.tutor-msg-assistant{color:#e2e8f0;background:#1e293b;align-self:flex-start;max-width:92%}.tutor-thinking{color:#64748b;font-style:italic}.tutor-input-row{border-top:1px solid #1f2937;align-items:flex-end;gap:8px;padding:12px;display:flex}.tutor-input{resize:none;color:#e5e7eb;background:#1f2937;border:1px solid #374151;border-radius:8px;flex:1;padding:8px 10px;font-family:inherit;font-size:14px;line-height:1.4}.tutor-input:focus{border-color:#3b82f6;outline:none}.tutor-send{color:#fff;cursor:pointer;white-space:nowrap;background:#1d4ed8;border:none;border-radius:8px;padding:8px 14px;font-size:14px;font-weight:600}.tutor-send:hover:not(:disabled){background:#2563eb}.tutor-send:disabled{opacity:.35;cursor:default}.login-panel{background:linear-gradient(135deg,#1e293b 0%,#0f1f35 100%);border:1px solid #1f2937;border-radius:16px;flex-direction:column;gap:24px;max-width:400px;padding:40px;display:flex;position:relative}.login-panel-close{color:#6b7280;cursor:pointer;background:0 0;border:none;padding:4px;font-size:16px;line-height:1;position:absolute;top:14px;right:14px}.login-panel-close:hover{color:#e5e7eb}.login-panel-title{color:#f8fafc;margin:0;font-size:20px;font-weight:700}.login-panel-checkbox{color:#e5e7eb;cursor:pointer;align-items:center;gap:10px;font-size:14px;line-height:1.4;display:flex}.login-panel-checkbox input{appearance:none;cursor:pointer;background:#e5e7eb;border:2px solid #d1d5db;border-radius:6px;flex-shrink:0;width:30px;height:30px;margin-top:0;transition:background .15s,border-color .15s}.login-panel-checkbox input:checked{background:#3b82f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") 50%/18px no-repeat;border-color:#3b82f6}.login-panel-label{color:#9ca3af;flex-direction:column;gap:8px;font-size:13px;display:flex}.login-panel-input-wrap{align-items:center;display:flex;position:relative}.login-panel-input{color:#e5e7eb;letter-spacing:.06em;background:#1f2937;border:1px solid #374151;border-radius:8px;flex:1;width:100%;padding:10px 36px 10px 12px;font-family:Courier New,monospace;font-size:15px}.login-panel-input:focus{border-color:#3b82f6;outline:none}.login-panel-toggle{color:#6b7280;cursor:pointer;background:0 0;border:none;align-items:center;padding:0;display:flex;position:absolute;right:8px}.login-panel-toggle:hover{color:#e5e7eb}.login-panel-submit{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;background:#1d4ed8;border:none;border-radius:8px;padding:12px;font-size:15px;font-weight:700}.login-panel-submit:hover:not(:disabled){background:#2563eb}.login-panel-submit:disabled{opacity:.35;cursor:default}@keyframes lp-spin{to{transform:rotate(360deg)}}.login-panel-spinner{vertical-align:middle;border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite lp-spin;display:inline-block}.signup-page{background:#0f172a;justify-content:center;align-items:center;gap:80px;min-height:100vh;padding:60px 40px;display:flex}.signup-close{color:#6b7280;cursor:pointer;background:0 0;border:none;padding:4px;font-size:20px;line-height:1;position:fixed;top:20px;right:24px}.signup-close:hover{color:#e5e7eb}.signup-left{background:linear-gradient(135deg,#1e293b 0%,#0f1f35 100%);border:1px solid #1f2937;border-radius:16px;flex-direction:column;gap:24px;max-width:440px;padding:32px;display:flex}.signup-heading{color:#f8fafc;text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:28px;font-weight:800;line-height:1.3}.signup-number-box{border:2px dashed #374151;border-radius:12px;padding:28px 32px;overflow:hidden}.signup-number{color:#f8fafc;justify-content:space-between;width:100%;font-family:Courier Prime,monospace;font-size:26px;font-weight:400;display:flex}.signup-copy{color:#fff;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;background:#1d4ed8;border:none;border-radius:8px;align-self:flex-start;padding:14px 32px;font-size:16px;font-weight:700}.signup-copy:hover{background:#2563eb}.signup-right{flex-direction:column;gap:16px;max-width:320px;display:flex}.signup-warning-title{color:#f8fafc;margin:0;font-size:20px;font-weight:700}.signup-warning-body{color:#9ca3af;margin:0;font-size:15px;line-height:1.6}