@import "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@300;400;500&display=swap";:root{--bg-primary:#f9f8f6;--bg-secondary:#f0eeea;--surface-1:#fffdfae6;--surface-2:#fffdfa99;--surface-border:#00000012;--surface-border-strong:#00000024;--accent-primary:#f36f16;--accent-secondary:#ee2b6c;--accent-tertiary:#1aa1e6;--accent-gradient:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));--accent-gradient-3:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));--text-main:#1d1816;--text-muted:#6e635e;--text-on-accent:#fff;--success:#22a06b;--danger:#e84030;--warning:#f9a410;--shadow-sm:0 2px 8px #0000000f;--shadow-md:0 6px 20px #00000017;--shadow-lg:0 16px 40px #0000001f;--shadow-color:0 12px 40px #f36f1626;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:9999px;--transition:all .3s cubic-bezier(.4, 0, .2, 1);--spring:cubic-bezier(.34, 1.56, .64, 1)}.dark{--bg-primary:#110f0d;--bg-secondary:#1c1917;--surface-1:#1e1a16e6;--surface-2:#2d2823b3;--surface-border:#ffffff14;--surface-border-strong:#ffffff29;--text-main:#efebe7;--text-muted:#a19687;--shadow-sm:0 2px 8px #0006;--shadow-md:0 6px 20px #00000080;--shadow-lg:0 16px 40px #000000b3;--shadow-color:0 12px 40px #f36f1633}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--bg-primary);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;font-family:DM Sans,system-ui,sans-serif;line-height:1.6;transition:background-color .4s,color .4s;position:relative}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(60% 40% at 10% 20%,#f36f160f 0%,#0000 60%),radial-gradient(50% 60% at 90% 80%,#ee2b6c0d 0%,#0000 60%),radial-gradient(40% 40%,#1aa1e608 0%,#0000 70%);position:fixed;inset:0}.dark body:before{background:radial-gradient(60% 40% at 10% 20%,#f36f1614 0%,#0000 60%),radial-gradient(50% 60% at 90% 80%,#ee2b6c0f 0%,#0000 60%),radial-gradient(40% 40%,#1aa1e60a 0%,#0000 70%)}h1,h2,h3,h4{letter-spacing:-.02em;font-family:Syne,sans-serif;line-height:1.15}code,.mono{font-family:DM Mono,monospace}.glass{background:var(--surface-1);-webkit-backdrop-filter:blur(16px)saturate(150%);border:1px solid var(--surface-border)}.glass-hover{transition:var(--transition)}.glass-hover:hover{border-color:var(--surface-border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}.dark .glass-hover:hover{border-color:#ffffff2e}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#96826e40;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#96826e73}button{cursor:pointer;transition:var(--transition);background:0 0;border:none;font-family:inherit}button:active{transform:scale(.96)}.theme-toggle-btn{border-radius:var(--radius-full);background:var(--surface-1);border:1px solid var(--surface-border);width:42px;height:42px;color:var(--text-main);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);transition:all .3s var(--spring);justify-content:center;align-items:center;display:flex}.theme-toggle-btn:hover{box-shadow:var(--shadow-md);border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-2px)rotate(20deg)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}:root{--primary:var(--accent-primary);--primary-hover:var(--accent-secondary);--done:var(--success);--done-bg:linear-gradient(135deg, #22a06b14, #22a06b0a);--pending:var(--text-muted);--error:var(--danger);--card-bg:var(--surface-1);--border:var(--surface-border);--border-hover:var(--surface-border-strong);--text:var(--text-main);--text-muted:var(--text-muted);--space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;--space-lg:1rem;--space-xl:1.5rem;--space-2xl:2rem;--space-3xl:3rem}.dark{--done-bg:linear-gradient(135deg, #22a06b26, #22a06b0f)}.app-container{max-width:1040px;padding:var(--space-xl) var(--space-lg);z-index:1;min-height:100vh;margin:0 auto;position:relative}.top-nav{border-radius:var(--radius-full);margin-bottom:var(--space-3xl);z-index:100;box-shadow:var(--shadow-md);justify-content:space-between;align-items:center;padding:.6rem 1rem .6rem 1.25rem;display:flex;position:sticky;top:1rem}.nav-brand{color:var(--accent-primary);align-items:center;gap:.5rem;display:flex}.brand-icon{color:var(--accent-primary);transition:transform .5s var(--spring)}.nav-brand:hover .brand-icon{transform:rotate(30deg)}.brand-text{letter-spacing:-.03em;background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Syne,sans-serif;font-size:1.2rem;font-weight:800}.nav-right{align-items:center;gap:.75rem;display:flex}.nav-stats-pill{border-radius:var(--radius-full);background:var(--surface-2);border:1px solid var(--surface-border);color:var(--text-muted);align-items:center;gap:.5rem;padding:.375rem 1rem;font-size:.78rem;font-weight:600;display:flex}.nav-stat{align-items:center;gap:.3rem;display:flex}.nav-stat strong{color:var(--text-main);font-family:DM Mono,monospace}.nav-divider{background:var(--surface-border-strong);width:1px;height:14px}.app-header{text-align:center;margin-bottom:var(--space-3xl)}.header-eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--accent-primary);border-radius:var(--radius-full);background:#f36f161a;border:1px solid #f36f1633;align-items:center;gap:.4rem;margin-bottom:1rem;padding:.3rem .75rem;font-size:.72rem;font-weight:600;display:inline-flex}.app-header h1{background:var(--accent-gradient);-webkit-text-fill-color:transparent;letter-spacing:-.04em;-webkit-background-clip:text;background-clip:text;margin-bottom:.75rem;font-family:Syne,sans-serif;font-size:clamp(2.8rem,6vw,4.5rem);font-weight:800;line-height:1}.header-subtitle{color:var(--text-muted);max-width:500px;margin:0 auto 2rem;font-size:1.05rem;font-weight:400;line-height:1.65}.dashboard-stats{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.5rem;display:flex}.stat-box{border-radius:var(--radius-lg);text-align:left;align-items:center;gap:.6rem;min-width:130px;padding:.75rem 1.1rem;display:flex}.stat-icon-wrap{border-radius:var(--radius-md);width:36px;height:36px;color:var(--accent-primary);background:#f36f161a;flex-shrink:0;justify-content:center;align-items:center;display:flex}.stat-icon-wrap.success{color:var(--success);background:#22a06b1a}.stat-info{flex-direction:column;gap:1px;display:flex}.stat-value{color:var(--text-main);letter-spacing:-.03em;font-family:Syne,sans-serif;font-size:1.5rem;font-weight:800;line-height:1}.stat-label{color:var(--text-muted);letter-spacing:.02em;white-space:nowrap;font-size:.73rem;font-weight:500}.circular-progress-wrap{align-items:center;gap:.6rem;display:flex}.circular-progress{flex-shrink:0;width:36px;height:36px}.circular-progress svg{transform:rotate(-90deg)}.add-roadmap-container{margin-bottom:var(--space-2xl)}.section-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.6rem;font-size:.72rem;font-weight:700}.add-form{gap:.6rem;display:flex}.main-input{border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-1);color:var(--text-main);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex:1;padding:.8rem 1.1rem;font-family:DM Sans,inherit;font-size:.95rem;transition:all .25s}.main-input:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 4px #f36f161a}.main-input::placeholder{color:var(--text-muted)}.add-btn{background:var(--accent-gradient);color:#fff;border-radius:var(--radius-lg);letter-spacing:.01em;cursor:pointer;box-shadow:var(--shadow-color);transition:all .25s var(--spring);white-space:nowrap;border:none;align-items:center;gap:.4rem;padding:.8rem 1.4rem;font-family:Syne,sans-serif;font-size:.9rem;font-weight:700;display:flex}.add-btn:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 16px 40px #f36f164d}.add-btn:active{transform:translateY(0)}.roadmap-card{background:var(--card-bg);border-radius:var(--radius-xl);padding:var(--space-2xl);box-shadow:var(--shadow-md);margin-bottom:var(--space-xl);border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.roadmap-card:before{content:"";background:var(--accent-gradient);opacity:.8;height:3px;position:absolute;top:0;left:0;right:0}.roadmap-card:after{content:"";border-radius:var(--radius-xl);pointer-events:none;background:radial-gradient(80% 60% at 50% -20%,#f36f160a 0%,#0000 70%);position:absolute;inset:0}.roadmap-card:hover{box-shadow:var(--shadow-lg);border-color:var(--border-hover);transform:translateY(-3px)}.card-header{margin-bottom:var(--space-xl);justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.card-title-area{flex:1;min-width:0}.card-number{color:var(--accent-primary);letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-bottom:.25rem;font-family:DM Mono,monospace;font-size:.68rem;font-weight:500}.card-header h3{letter-spacing:-.025em;color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;margin:0;font-family:Syne,sans-serif;font-size:1.35rem;font-weight:700;overflow:hidden}.card-actions{flex-shrink:0;gap:.375rem;display:flex}.edit-title-form{align-items:center;gap:var(--space-sm);flex:1;display:flex}.edit-title-form .main-input{margin:0;padding:.5rem .85rem;font-family:Syne,sans-serif;font-size:1.2rem;font-weight:700}.btn-icon{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-md);cursor:pointer;width:34px;height:34px;color:var(--text-muted);transition:all .2s var(--spring);justify-content:center;align-items:center;display:flex}.btn-icon:hover{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;transform:scale(1.08);box-shadow:0 4px 12px #f36f164d}.btn-danger{color:var(--error)}.btn-danger:hover{background:var(--error);border-color:var(--error);color:#fff;box-shadow:0 4px 12px #e840304d}.btn-success{color:var(--done)}.btn-success:hover{background:var(--done);border-color:var(--done);color:#fff}.progress-container{margin-bottom:var(--space-xl)}.progress-info{color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.78rem;font-weight:600;display:flex}.progress-percent{color:var(--accent-primary);font-family:DM Mono,monospace;font-size:.82rem;font-weight:500}.pb-bg{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-full);width:100%;height:6px;overflow:hidden}.pb-fill{background:var(--accent-gradient);border-radius:var(--radius-full);height:100%;transition:width .7s cubic-bezier(.4,0,.2,1);position:relative}.pb-fill:after{content:"";background:linear-gradient(90deg,#0000,#ffffff59,#0000);animation:2.5s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.roadmap-flow-container{padding:var(--space-xl) 0;margin-bottom:var(--space-lg);scrollbar-width:thin;scrollbar-color:var(--border) transparent;overflow-x:auto}.roadmap-flow{align-items:center;gap:0;min-width:max-content;padding:.25rem 0;display:flex}.empty-steps{color:var(--text-muted);padding:var(--space-xl) 0;font-size:.875rem;font-style:italic}.step-item-wrapper{align-items:center;display:flex;position:relative}.step-card{border-radius:var(--radius-lg);background:var(--surface-1);border:2px solid var(--border);text-align:center;min-width:148px;max-width:200px;transition:all .3s var(--spring);cursor:pointer;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:1rem;position:relative}.step-card.done{border-color:var(--done);background:var(--done-bg)}.step-card:hover{box-shadow:var(--shadow-lg);border-color:var(--accent-primary);z-index:2;transform:translateY(-6px)scale(1.02)}.step-card:focus-visible{outline:3px solid var(--accent-primary);outline-offset:3px}.step-number{color:var(--text-muted);opacity:.7;letter-spacing:.05em;margin-bottom:.4rem;font-family:DM Mono,monospace;font-size:.62rem;font-weight:500}.step-content{flex-direction:column;align-items:center;gap:.4rem;min-height:44px;margin-bottom:.6rem;display:flex}.step-text{word-break:break-word;color:var(--text-main);font-size:.82rem;font-weight:600;line-height:1.4}.step-check-mark{color:var(--done)}.step-actions{opacity:0;justify-content:center;gap:.35rem;transition:all .2s;display:flex;transform:translateY(4px)}.step-card:hover .step-actions{opacity:1;transform:translateY(0)}.btn-step{border-radius:var(--radius-full);cursor:pointer;width:26px;height:26px;transition:all .2s var(--spring);border:none;justify-content:center;align-items:center;display:flex}.btn-step:hover{transform:scale(1.15)}.btn-step-done{background:var(--done);color:#fff}.btn-step-pending{background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted)}.btn-step-delete{background:var(--error);color:#fff}.flow-connector{background:var(--border);flex-shrink:0;width:48px;height:2px;transition:all .3s;position:relative}.flow-connector:after{content:"›";color:var(--text-muted);font-size:1.1rem;font-weight:300;line-height:1;position:absolute;top:50%;right:-6px;transform:translateY(-50%)}.flow-connector.active{background:var(--done)}.flow-connector.active:after{color:var(--done)}.add-step-form{margin-top:var(--space-md);gap:.5rem;max-width:360px;display:flex}.step-input{border:2px solid var(--border);border-radius:var(--radius-md);background:var(--surface-1);color:var(--text-main);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex:1;padding:.55rem .85rem;font-family:inherit;font-size:.85rem;transition:all .2s}.step-input:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 3px #f36f161a}.step-input::placeholder{color:var(--text-muted)}.empty-state{text-align:center;padding:var(--space-3xl) var(--space-2xl);border-radius:var(--radius-xl);margin-top:var(--space-2xl);align-items:center;gap:var(--space-md);border:2px dashed var(--border);flex-direction:column;display:flex}.empty-icon{color:var(--accent-primary);opacity:.4}.empty-state h3{color:var(--text-muted);font-family:Syne,sans-serif;font-size:1.1rem}.empty-state p{color:var(--text-muted);max-width:320px;font-size:.9rem}.roadmap-list-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.roadmap-count-badge{color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-full);align-items:center;gap:.3rem;padding:.2rem .6rem;font-family:DM Mono,monospace;font-size:.72rem;font-weight:500;display:inline-flex}@media (width<=768px){.app-container{padding:var(--space-lg) var(--space-md)}.add-form{flex-direction:column}.card-header{flex-direction:column;gap:.75rem}.nav-stats-pill{display:none}.step-card{min-width:130px;max-width:170px}}@media (width<=480px){.step-card{min-width:110px;padding:.75rem}.flow-connector{width:30px}.dashboard-stats{gap:.5rem}.stat-box{padding:.6rem .85rem}}@media (prefers-contrast:high){:root{--border:#0000004d}}