:root{--yellow:#FCE300;--dark-bg:#0a0a0a;--card-bg:#1a1a1a;--text-primary:#ffffff;--text-secondary:#eeeeee;--text-muted:#888888;--font:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;scroll-padding-bottom:80px}body{background:var(--dark-bg);color:var(--text-primary);font-family:var(--font)}body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,.015) 60px,rgba(255,255,255,.015) 61px);pointer-events:none;z-index:0}.screen{display:none;min-height:100vh;position:relative;z-index:1}.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}#logo-main{width:120px;height:auto;margin-bottom:2rem}h1{font-size:clamp(1.8rem, 4vw, 2.8rem);font-weight:800;color:var(--text-primary);text-align:center;margin-bottom:2rem;letter-spacing:-.02em}#take-form{width:100%;max-width:600px;display:flex;flex-direction:column;gap:1rem}#take-input{background:var(--card-bg);color:var(--text-primary);border:none;border-left:3px solid var(--yellow);padding:1rem;font-size:1rem;font-family:var(--font);resize:vertical;min-height:120px;outline:0}#take-input:focus{border-left-color:#fff}#char-count{font-size:.75rem;color:var(--text-muted);text-align:right}#about-text{max-width:600px;margin-top:1.5rem;font-size:.75rem;color:var(--text-muted);text-align:center;line-height:1.5}#about-text a{color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}#about-text a:hover{color:var(--text-primary)}#credit{max-width:600px;margin-top:1.5rem;font-size:.75rem;color:var(--text-muted);text-align:center;line-height:1.5}#credit a{color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}#credit a:hover{color:var(--text-primary)}#submit-btn{background:var(--yellow);color:#000;font-weight:800;font-size:1rem;border:none;padding:1rem 2rem;cursor:pointer;letter-spacing:.02em;transition:opacity .2s}#submit-btn:hover{opacity:.85}#submit-btn:disabled{opacity:.4;cursor:not-allowed}#screen-transcript.active{align-items:flex-start;justify-content:flex-start;padding:2rem}#transcript-header{width:100%;max-width:700px;margin:0 auto 2rem;display:flex;align-items:center}#logo-small{height:100px;width:auto;opacity:.6;margin:auto}#transcript-lines{width:100%;max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.transcript-line{display:flex;opacity:0;transition:opacity .3s ease-in}.transcript-line.visible{opacity:1}.kareem-line{justify-content:flex-start}.you-line{justify-content:flex-end}.bubble{max-width:78%;padding:.75rem 1rem;border-radius:18px}.kareem-line .bubble{background:#2a2a2a;border-top-left-radius:4px}.you-line .bubble{background:#0d2137}.speaker{display:block;font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem}.speaker.kareem{color:var(--yellow)}.speaker.you{color:var(--text-muted);text-align:right}.dialogue{display:block;font-size:1.05rem;line-height:1.65;color:var(--text-secondary)}#cursor{font-size:1.1rem;color:var(--yellow);display:inline-block;width:100%;max-width:700px;margin:0 auto;padding-left:0}@keyframes blink{0%,50%{opacity:1}100%,51%{opacity:0}}.cursor{animation:blink 1s step-end infinite}#end-card{width:100%;max-width:700px;margin:2rem auto 0;text-align:left;opacity:0;transition:opacity .1s ease-in}#end-text{font-style:italic;color:var(--yellow);font-size:1rem;margin-bottom:1.5rem}#reset-btn{background:var(--yellow);color:#000;font-weight:800;font-size:1rem;border:none;padding:1rem 2rem;cursor:pointer;letter-spacing:.02em;transition:opacity .2s}#reset-btn:hover{opacity:.85}#error-message{color:var(--text-muted);font-size:1.1rem;margin-bottom:1.5rem;text-align:center}#retry-btn{background:var(--yellow);color:#000;font-weight:800;font-size:1rem;border:none;padding:1rem 2rem;cursor:pointer;letter-spacing:.02em;transition:opacity .2s}#retry-btn:hover{opacity:.85}@media (max-width:480px){h1{font-size:1.5rem}.dialogue{font-size:1rem}#logo-main{width:80px}}