:root{--bg: #0f1220;--card: #151a2e;--text: #f8fafc;--muted: #94a3b8;--accent: #7c3aed;--accent2: #22d3ee;--border: rgba(148, 163, 184, .2);--green: #22c55e;--yellow: #eab308;--red: #ef4444;--orange: #f97316;--blue: #3b82f6;--purple: #a855f7}*{box-sizing:border-box;margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:radial-gradient(circle at top left,#1f2440,#0b0d18 65%);color:var(--text);min-height:100vh;padding:40px 24px}.container{max-width:900px;margin:0 auto}header{margin-bottom:32px}.back{color:var(--muted);text-decoration:none;font-size:.9rem;display:inline-block;margin-bottom:16px}.back:hover{color:var(--accent2)}h1{font-size:2rem;margin-bottom:8px}.subtitle{color:var(--muted);font-size:1rem}.card{background:#151a2eb3;border:1px solid var(--border);border-radius:12px;padding:24px;margin-bottom:20px}.card h3{font-size:1rem;color:var(--muted);margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}.timeline{position:relative;padding-left:32px}.timeline:before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent2),var(--accent))}.timeline-item{position:relative;padding-bottom:24px}.timeline-item:last-child{padding-bottom:0}.timeline-dot{position:absolute;left:-32px;top:0;width:24px;height:24px;border-radius:50%;background:var(--card);border:3px solid var(--accent2);display:flex;align-items:center;justify-content:center;font-size:10px}.timeline-content{background:#0003;border-radius:8px;padding:16px}.timeline-date{font-size:.75rem;color:var(--muted);margin-bottom:4px}.timeline-title{font-weight:600;margin-bottom:8px}.timeline-type{display:inline-block;font-size:.7rem;padding:2px 8px;border-radius:12px;margin-right:8px}.timeline-type.github{background:#22d3ee33;color:var(--accent2)}.timeline-type.url{background:#a855f733;color:var(--purple)}.timeline-type.screenshot{background:#22c55e33;color:var(--green)}.timeline-type.demo{background:#f9731633;color:var(--orange)}.timeline-url{font-size:.8rem;color:var(--accent2);text-decoration:none;word-break:break-all}.timeline-url:hover{text-decoration:underline}.story-output{background:#0000004d;border-radius:8px;padding:24px;line-height:1.8}.story-output h2{font-size:1.5rem;margin-bottom:16px;color:var(--accent2)}.story-output p{margin-bottom:16px;color:var(--text)}.story-output ul{margin-left:24px;margin-bottom:16px}.story-output li{margin-bottom:8px;color:var(--muted)}.story-output strong{color:var(--accent2)}.input-section{margin-bottom:24px}.input-row{display:flex;gap:12px;margin-bottom:12px}.input-row input{flex:1;background:#0000004d;border:1px solid var(--border);border-radius:8px;padding:12px;color:var(--text);font-size:.9rem}.input-row input:focus{outline:none;border-color:var(--accent)}.btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px #7c3aed66}.btn-secondary{background:#ffffff1a}.btn-secondary:hover{box-shadow:0 4px 20px #0000004d}.btn-small{padding:8px 16px;font-size:.8rem}.templates{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.template-btn{background:#ffffff0d;border:1px solid var(--border);color:var(--muted);padding:10px 16px;border-radius:8px;font-size:.85rem;cursor:pointer;transition:all .15s}.template-btn:hover,.template-btn.active{background:#22d3ee1a;border-color:var(--accent2);color:var(--accent2)}.actions{display:flex;gap:12px;margin-top:16px}.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--muted)}.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--accent2);border-radius:50%;animation:spin 1s linear infinite;margin-right:12px}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:40px;color:var(--muted)}.empty-state-icon{font-size:3rem;margin-bottom:16px}@media(max-width:600px){.input-row,.templates,.actions{flex-direction:column}}