@font-face{font-family:Plex;src:url('/fonts/plex-latin-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#10130f;--text:#f3f3f3;--muted:#969a93;--line:#ffffff26;--send:#315efb;font-family:Plex,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{min-height:100svh}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;border:0;color:inherit;background:none}button:disabled{cursor:default}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;flex:none}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #a7b9ff;outline-offset:5px}::selection{background:#405bb5;color:#fff}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-shell{min-height:100svh;padding:24px;display:flex;justify-content:center}.studio,.recipient{width:100%;max-width:768px;padding:clamp(100px,calc(42svh - 85px),330px) 0 72px}.editor{width:100%}h1{font-size:32px;font-weight:400;line-height:1.3;letter-spacing:-1px;margin:0 0 36px;text-align:center}
.question-box,.lesson-composer{border:1px solid var(--line);border-radius:28px;padding:7px 10px;background:#212121;box-shadow:inset 0 0 1px #ffffff33;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;min-height:52px}.question-box{display:flex;align-items:flex-end;gap:8px}.question-box:focus-within{border-color:#ffffff40}.question-box textarea{display:block;flex:1;min-width:0;border:0;background:transparent;resize:none;height:36px;min-height:36px;max-height:204px;padding:6px 10px;color:#fff;font:17px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;outline:none;caret-color:#fff;overflow-y:auto;scrollbar-width:thin}.question-box textarea::placeholder{color:#aaa}.make-button{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:4px;margin:-4px;border-radius:50%;color:#fff}.send-face{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--send);transition:background .15s,transform .15s}.make-button:hover:not(:disabled) .send-face{background:#5278ff}.make-button:active:not(:disabled) .send-face{transform:scale(.92)}.make-button:disabled .send-face{background:#474747;color:#a8a8a8}.error{margin:12px 20px 0;color:#ffc5c0;font-size:13px;line-height:1.5}.error:empty{display:none}
.link-result{margin:22px 8px 0;animation:reveal .24s ease-out}.copy-row{display:flex;gap:12px;border-bottom:1px solid #ffffff1a;padding:8px 0 14px;align-items:center}.copy-row input{min-width:0;flex:1;background:none;border:0;color:#b8beb2;font-size:14px;text-overflow:ellipsis;padding:7px 0}.copy-button{white-space:nowrap;display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 0}.result-actions{display:flex;gap:20px;align-items:center;padding-top:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}.result-actions>span{flex:1;min-width:125px}.result-actions button{padding:0;font-size:12px}.result-actions a:hover,.result-actions button:hover{color:var(--text)}
.recipient h1{margin-bottom:36px}.lesson{margin-bottom:24px}.lesson-composer{position:relative;display:flex;align-items:center;padding:13px 64px 13px 20px;font-size:17px;line-height:24px;min-height:52px}.lesson-composer>span:first-child{white-space:pre-wrap;overflow-wrap:anywhere;max-height:204px;overflow:auto;display:block;width:100%}.lesson-send{position:absolute;right:10px;bottom:7px;width:36px;height:36px;display:grid;place-items:center;background:var(--send);color:#fff;border-radius:50%;transition:transform .15s}.lesson-cursor{display:none;position:absolute;width:24px;height:28px;left:28px;top:25px;filter:drop-shadow(0 2px 2px #0005);pointer-events:none}.lesson-composer.running .lesson-cursor{display:block;animation:pointer 2.7s ease both}.lesson-composer.sent .lesson-send{transform:scale(.89)}.lesson-caption{font-size:13px;color:var(--muted);margin:15px 20px 0;min-height:20px}.recipient-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:0 20px}.primary-link{display:inline-flex;align-items:center;gap:14px;font-size:15px;min-height:44px}.text-button{padding:5px 0;font-size:12px;color:#a4aa9f;min-height:32px}.text-button:hover,.primary-link:hover,.make-your-own:hover{color:#fff}.handoff-status{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--muted);margin:8px 20px 0;min-height:32px}.make-your-own{display:inline-block;margin:30px 20px 0;font-size:12px;color:var(--muted)}.no-script{color:var(--muted);font-size:12px;line-height:1.5}
@keyframes reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes pointer{0%{left:70%;top:140%;opacity:0}16%{left:28px;top:25px;opacity:1}62%{left:28px;top:25px;opacity:1}78%,95%{left:calc(100% - 30px);top:calc(100% - 24px);opacity:1}100%{left:calc(100% - 30px);top:calc(100% - 24px);opacity:0}}
@media(max-width:640px){.site-shell{padding:20px 16px}.studio,.recipient{padding-top:clamp(108px,calc(35svh - 65px),240px)}h1{font-size:28px;letter-spacing:-.8px;margin-bottom:28px}.recipient h1{margin-bottom:28px}.copy-row input{font-size:12px}.copy-button{font-size:13px;gap:5px}.copy-button svg{width:16px}.result-actions{gap:16px}.recipient-actions{gap:18px;padding:0 12px}.lesson-caption,.handoff-status{margin-left:12px;margin-right:12px}.make-your-own{margin-left:12px}.primary-link{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.lesson-cursor{display:none!important}}