*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0e1a;--bg2: #0f1629;--surface: #131929;--border: #1e2d4a;--accent: #00d4ff;--accent2: #7c3aed;--text: #e2e8f0;--text-dim: #64748b;--green: #00ff88;--radius: 16px;--joke-duration: 60s}html,body{height:100%;background:var(--bg);color:var(--text);font-family:Inter,sans-serif}#root{height:100%}.app{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,212,255,.06) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(124,58,237,.08) 0%,transparent 50%),var(--bg)}.particles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.particle{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);opacity:0;left:calc(var(--i) * 5.3% + 1%);animation:float-up calc(8s + var(--i) * .7s) linear infinite;animation-delay:calc(var(--i) * -.5s)}.particle:nth-child(odd){background:var(--accent2)}.particle:nth-child(3n){width:3px;height:3px}@keyframes float-up{0%{bottom:-5%;opacity:0;transform:translate(0)}10%{opacity:.4}50%{transform:translate(calc(sin(var(--i))*30px))}90%{opacity:.2}to{bottom:105%;opacity:0;transform:translate(calc(sin(var(--i))*50px))}}.header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 2rem;border-bottom:1px solid var(--border);background:#0f1629b3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.logo{display:flex;align-items:center;gap:.5rem;font-family:JetBrains Mono,monospace;font-weight:700;font-size:1.25rem;letter-spacing:-.02em}.logo-icon{font-size:1.5rem;display:inline-block;animation:spin-slow 8s linear infinite}@keyframes spin-slow{to{transform:rotate(360deg)}}.logo-accent{color:var(--accent)}.joke-count{font-family:JetBrains Mono,monospace;font-size:.75rem;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);padding:.3rem .75rem;border-radius:100px}.main{flex:1;position:relative;z-index:10;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem}.joke-card{max-width:780px;width:100%;background:#131929d9;border:1px solid var(--border);border-radius:var(--radius);padding:3rem 3.5rem;box-shadow:0 0 0 1px #00d4ff0d,0 24px 64px #00000080,0 0 80px #00d4ff0a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:relative;will-change:transform,filter,opacity}.joke-card:before{content:"";position:absolute;top:0;left:0;width:80px;height:80px;background:linear-gradient(135deg,rgba(0,212,255,.12) 0%,transparent 60%);border-radius:var(--radius) 0 0 0;pointer-events:none}.joke-card:after{content:"{ }";position:absolute;bottom:1rem;right:1.5rem;font-family:JetBrains Mono,monospace;font-size:.7rem;color:var(--border);letter-spacing:.1em}.joke-card.materializing{animation:materializing 1s cubic-bezier(.16,1,.3,1) forwards}@keyframes materializing{0%{opacity:0;filter:blur(24px) brightness(2);transform:scale(.88) translateY(16px);letter-spacing:.15em}60%{filter:blur(2px) brightness(1.1);transform:scale(1.02) translateY(-2px)}to{opacity:1;filter:blur(0) brightness(1);transform:scale(1) translateY(0);letter-spacing:0}}.joke-card.visible{opacity:1;filter:none;transform:none}.joke-card.vaporizing{animation:vaporizing 1.4s cubic-bezier(.4,0,.8,.8) forwards}@keyframes vaporizing{0%{opacity:1;filter:blur(0) brightness(1);transform:scale(1) translateY(0);letter-spacing:0}30%{opacity:.9;filter:blur(1px) brightness(1.3);transform:scale(1.03) translateY(-6px);letter-spacing:.03em}70%{opacity:.4;filter:blur(8px) brightness(1.6);transform:scale(1.12) translateY(-18px);letter-spacing:.12em}to{opacity:0;filter:blur(32px) brightness(2);transform:scale(1.3) translateY(-40px);letter-spacing:.35em}}.joke-card.loading{opacity:0}.joke-body{font-family:JetBrains Mono,monospace;line-height:1.8}.joke-text{font-size:clamp(1.1rem,2.5vw,1.4rem);color:var(--text);font-weight:300}.joke-setup{font-size:clamp(1rem,2.2vw,1.25rem);color:var(--text-dim);font-weight:300;margin-bottom:1.25rem}.joke-punchline{font-size:clamp(1.1rem,2.5vw,1.4rem);color:var(--accent);font-weight:400;padding-left:1rem;border-left:3px solid var(--accent2);font-style:italic}.joke-meta{margin-top:2rem;display:flex;justify-content:flex-end}.joke-id{font-family:JetBrains Mono,monospace;font-size:.7rem;color:var(--border);letter-spacing:.1em}.loading,.error{font-family:JetBrains Mono,monospace;font-size:.9rem;color:var(--text-dim)}.error{color:#ef4444}.blink{animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}.footer{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-top:1px solid var(--border);background:#0f1629b3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.footer-left{display:flex;align-items:center;gap:.75rem}.next-label{font-family:JetBrains Mono,monospace;font-size:.72rem;color:var(--text-dim);letter-spacing:.05em}.progress-ring{width:54px;height:54px}.skip-btn{font-family:JetBrains Mono,monospace;font-size:.8rem;padding:.5rem 1.25rem;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-dim);cursor:pointer;transition:color .2s,border-color .2s,background .2s;letter-spacing:.03em}.skip-btn:hover:not(:disabled){color:var(--accent);border-color:var(--accent);background:#00d4ff0f}.skip-btn:disabled{opacity:.3;cursor:not-allowed}@media (max-width: 640px){.header{padding:1rem}.joke-card{padding:2rem 1.5rem}.footer{padding:.75rem 1rem;flex-wrap:wrap;gap:.75rem}.logo-text{display:none}}