:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f8fafc;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#060816;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{background:radial-gradient(circle at 0 0,#38bdf83d,#0000 26%),linear-gradient(135deg,#030712 0%,#0f172a 100%);min-height:100vh;margin:0}button,input{font:inherit}#app{min-height:100vh;padding:24px}.shell{gap:20px;max-width:1200px;margin:0 auto;display:grid}.hero-card,.panel,.preview-card,.overview-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0f172ad6;border:1px solid #94a3b82e;border-radius:24px;box-shadow:0 20px 50px #0208176b}.hero-card{justify-content:space-between;align-items:flex-start;gap:20px;padding:24px;display:flex}.eyebrow,.section-label{text-transform:uppercase;letter-spacing:.24em;color:#38bdf8;margin:0 0 8px;font-size:.75rem}h1,h2,h3,p{margin:0}h1{max-width:700px;font-size:clamp(1.8rem,3vw,2.6rem)}.hero-copy{color:#94a3b8;max-width:640px;margin-top:8px}.tabs{flex-wrap:wrap;gap:10px;display:flex}.tab,.primary-btn,.secondary-btn,.icon-card{color:#f8fafc;cursor:pointer;background:#1e293bf2;border:1px solid #94a3b82e;border-radius:999px;padding:10px 14px;transition:transform .2s,border-color .2s}.tab:hover,.primary-btn:hover,.secondary-btn:hover,.icon-card:hover{border-color:#38bdf8;transform:translateY(-1px)}.tab.active,.primary-btn{color:#020617;background:linear-gradient(135deg,#38bdf8,#818cf8);font-weight:700}.secondary-btn{color:#f8fafc;background:#0f172ad1;font-weight:600}.panel{gap:16px;padding:20px;display:grid}.panel-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}input{color:#f8fafc;background:#020617cc;border:1px solid #94a3b833;border-radius:999px;flex:1;min-width:220px;padding:12px 14px}.pill{color:#bae6fd;background:#38bdf829;border-radius:999px;padding:8px 12px;font-size:.9rem}.icon-grid{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;display:grid}.icon-card{text-align:center;background:#0f172ad1;border:1px solid #94a3b81f;border-radius:24px;place-items:center;gap:10px;min-height:160px;padding:16px;display:grid;box-shadow:inset 0 1px #ffffff0a}.icon-card img{object-fit:cover;border-radius:18px;width:56px;height:56px}.icon-card strong{word-break:break-word;font-size:.92rem;line-height:1.2}.icon-card span{color:#94a3b8;text-transform:capitalize;font-size:.78rem}.preview-card{gap:12px;padding:16px;display:grid}.preview-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.preview-actions{flex-wrap:wrap;gap:10px;display:flex}.preview-title{font-weight:700}.preview-box{background:linear-gradient(135deg,#0f172af2,#1e293bf2);border:1px dashed #94a3b859;border-radius:24px;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;min-height:240px;padding:24px;display:flex}.preview-item-row{align-items:center;gap:12px;display:flex}.preview-item,.timeline-item{color:inherit;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:6px;padding:0;display:flex}.preview-item img,.timeline-item img{width:56px;height:56px}.arrow{width:38px!important;height:38px!important}.timeline-preview{justify-content:flex-start;min-height:260px;position:relative;overflow:hidden}.timeline-preview:before{content:"";background:linear-gradient(90deg,#38bdf8,#818cf8);border-radius:999px;height:4px;position:absolute;top:50%;left:24px;right:24px}.timeline-item{color:#e2e8f0;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%)}.preview-item:hover,.timeline-item:hover{opacity:.8}.timeline-item span{color:#bae6fd;font-size:.8rem}.empty-state{color:#94a3b8}.overview-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;display:grid}.overview-card{gap:8px;padding:16px;display:grid}.overview-card p{color:#94a3b8}@media (width<=720px){#app{padding:12px}.hero-card,.panel-header{flex-direction:column;align-items:flex-start}.tabs{width:100%}}