.app{max-width:640px;margin:0 auto;padding:5rem 1.5rem;min-height:100vh}.header{text-align:center;margin-bottom:3.5rem}.header h1{margin:0;font-size:3rem;font-weight:800;background:linear-gradient(135deg,#fff 0% 40%,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.04em}.header p{margin:1rem 0 0;color:#52525b;font-size:.95rem;font-weight:400;max-width:320px;margin-left:auto;margin-right:auto;line-height:1.5}.generator-machine{background:#ffffff05;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:3rem 2rem;border:1px solid rgba(255,255,255,.06);margin-bottom:2rem}.slot-machine{display:flex;flex-direction:column;align-items:center;gap:2.5rem}.slot-display{display:flex;gap:.5rem}.slot-window{background:#0000004d;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.875rem 1rem;min-width:100px;text-align:center;transition:all .2s ease}.slot-window.spinning{animation:slotSpin .08s infinite;border-color:#a78bfa80;box-shadow:0 0 20px #a78bfa33}@keyframes slotSpin{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.slot-prefix,.slot-core,.slot-suffix{font-weight:600;font-size:.8rem;letter-spacing:-.01em}.slot-prefix{color:#c4b5fd}.slot-core{color:#fafafa}.slot-suffix{color:#fb923c}.generated-title{text-align:center;min-height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem}.generated-title h2{margin:0;font-size:1.75rem;font-weight:700;color:#fafafa;letter-spacing:-.03em;line-height:1.2}.generated-title .placeholder{color:#3f3f46;font-weight:500;font-size:1.25rem}.copy-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:.5rem 1.25rem;border-radius:100px;color:#71717a;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s ease}.copy-btn:hover{background:#ffffff1a;color:#e4e4e7}.copy-btn.copied{background:#22c55e;border-color:#22c55e;color:#000}.generate-btn{background:linear-gradient(135deg,#a78bfa,#8b5cf6);border:none;padding:1rem 2.5rem;border-radius:100px;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 20px #8b5cf64d}.generate-btn:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 8px 30px #8b5cf666}.generate-btn:active:not(.disabled){transform:translateY(0)}.generate-btn.disabled{opacity:.5;cursor:not-allowed}.title-components{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.component-section h3{margin:0 0 .625rem;font-size:.65rem;color:#52525b;text-transform:uppercase;letter-spacing:.15em;font-weight:600}.component-tags{display:flex;flex-wrap:wrap;gap:.25rem}.component-tag{padding:.2rem .5rem;border-radius:6px;font-size:.65rem;font-weight:500;background:#ffffff08;border:1px solid rgba(255,255,255,.05)}.component-tag.prefix{color:#c4b5fd}.component-tag.core{color:#a1a1aa}.component-tag.suffix{color:#fb923c}.title-history{background:#ffffff05;border-radius:16px;padding:1.5rem;border:1px solid rgba(255,255,255,.05);margin-bottom:1.5rem}.title-history h3{margin:0 0 1rem;font-size:.75rem;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.1em}.history-list{display:flex;flex-direction:column;gap:.5rem}.history-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#0003;border-radius:10px;border:1px solid rgba(255,255,255,.04);gap:1rem;transition:all .15s}.history-item:hover{background:#0000004d;border-color:#ffffff14}.history-title{color:#d4d4d8;font-size:.85rem;flex:1}.history-actions{display:flex;gap:.375rem}.history-copy,.history-use{background:#ffffff0d;border:none;padding:.375rem .75rem;border-radius:6px;color:#71717a;font-size:.65rem;font-weight:500;cursor:pointer;transition:all .15s}.history-copy:hover,.history-use:hover{background:#ffffff1a;color:#e4e4e7}.history-copy.copied{background:#22c55e;color:#000}.title-tips{background:#ffffff05;border-radius:16px;padding:1.5rem;border:1px solid rgba(255,255,255,.05);margin-bottom:2rem}.title-tips h3{margin:0 0 1rem;font-size:.75rem;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.1em}.title-tips ul{margin:0;padding-left:1rem}.title-tips li{color:#52525b;font-size:.8rem;padding:.2rem 0;line-height:1.6}.title-tips li::marker{color:#a78bfa}.footer{text-align:center;padding:2rem 1rem;color:#27272a;font-size:.75rem}.footer p:first-child{color:#a78bfa;font-size:1rem;margin-bottom:4rem}.footer a{color:inherit;text-decoration:none;transition:color .15s}.footer a:hover{color:#8b5cf6}@media(max-width:640px){.app{padding:3rem 1rem}.header h1{font-size:2.25rem}.generator-machine{padding:2rem 1.25rem;border-radius:20px}.slot-display{flex-direction:column;gap:.375rem}.slot-window{min-width:auto}.generated-title h2{font-size:1.375rem}.title-components{grid-template-columns:1fr;gap:1.25rem}.history-item{flex-direction:column;align-items:stretch;text-align:center}.history-actions{justify-content:center}.generate-btn{width:100%}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#050508;background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(120,119,198,.15),transparent),radial-gradient(ellipse 60% 40% at 100% 100%,rgba(255,119,80,.08),transparent);min-height:100vh;color:#e4e4e7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}