:root{--accent:#6c63ff;--accent-bright:#8b83ff;--accent-dim:#6c63ff88;--accent-glow:#6c63ff33;--accent-bg:#15132a;--accent-hover:#1c1836;--gradient-brand:linear-gradient(135deg, #6c63ff, #e040fb);--gradient-hero-radial:radial-gradient(ellipse 80% 60% at 50% 0%, #15132a 0%, transparent 70%);--gradient-title:linear-gradient(135deg, #fff, #b8b0dd);--gradient-cta:linear-gradient(135deg, #5548d9, #a855f7);--gradient-cta-hover:linear-gradient(135deg, #6c63ff, #c084fc);--bg-body:#0b0b10;--bg-page:#0d0d14;--bg-panel:#0f0f18;--bg-surface:#111120;--bg-elevated:#141428;--bg-control:#131320;--bg-control-2:#1a1a22;--text-1:#e0e0f0;--text-2:#d0d0e0;--text-3:#b0b0cc;--text-4:#88a;--text-5:#555570;--text-6:#334;--border-subtle:#1a1a28;--border:#1e1e2e;--border-strong:#2a2a3a;--border-input:#222230;--color-forward:var(--accent);--color-backward:#fa3;--color-success:#0f8;--color-error:#f45;--color-warning:#fc0;--btn-primary-bg:#1a1540;--btn-primary-color:#a899ff;--btn-primary-border:#6c63ff33;--btn-primary-hover:#221c50;--btn-pause-bg:#2a0a28;--btn-pause-color:#f8e;--btn-pause-border:#f8e3;--btn-ghost-bg:#1a1a28;--btn-ghost-color:#888;--btn-ghost-border:#252535;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-panel);width:100%;height:100%;overflow:hidden}#root{flex-direction:column;width:100%;height:100%;display:flex}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.home{background:var(--bg-body);height:100%;color:var(--text-2);font-family:var(--font-sans);flex-direction:column;display:flex;overflow-y:auto}.home__hero{text-align:center;background:var(--gradient-hero-radial);border-bottom:1px solid var(--border-subtle);padding:80px 24px 64px}.home__hero-inner{max-width:680px;margin:0 auto}.home__logo-icon{flex-shrink:0;width:28px;height:28px;display:block;transform:translateY(1px)}.home__logo{letter-spacing:-.01em;background:var(--gradient-brand);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;align-items:center;gap:10px;margin-bottom:36px;font-size:22px;font-weight:800;display:inline-flex}.home__headline{color:var(--text-1);letter-spacing:-.02em;margin-bottom:20px;font-size:clamp(28px,6vw,52px);font-weight:800;line-height:1.15}.home__headline-accent{background:var(--gradient-brand);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.home__headline-accent--cycling{opacity:1;transition:opacity .4s,transform .4s;display:inline-block;transform:translateY(0)}.home__headline-accent--hidden{opacity:0;transform:translateY(6px)}.home__sub{color:var(--text-4);max-width:520px;margin:0 auto;font-size:17px;line-height:1.7}.home__grid-section{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:56px 24px 64px}.home__grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.tool-card__link{text-decoration:none;display:block}.tool-card{background:var(--bg-surface);border:1px solid var(--border-input);cursor:pointer;border-radius:14px;flex-direction:column;gap:12px;height:100%;padding:28px 24px;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex}.tool-card__link:hover .tool-card{border-color:var(--accent-glow);transform:translateY(-2px);box-shadow:0 8px 32px #00ccee14}.tool-card--soon{opacity:.45;cursor:default}.tool-card__emoji{background:var(--gradient-brand);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Inter,sans-serif;font-size:28px;font-weight:900;line-height:1}.tool-card__title{color:var(--text-1);font-size:17px;font-weight:700;line-height:1.3}.tool-card__desc{color:var(--text-5);flex:1;font-size:13px;line-height:1.65}.tool-card__tags{flex-wrap:wrap;gap:6px;display:flex}.tool-card__tag{letter-spacing:.06em;text-transform:uppercase;background:var(--border);color:var(--text-5);border:1px solid var(--border-strong);border-radius:4px;padding:3px 8px;font-size:10px;font-weight:600}.tool-card__cta{color:var(--accent);margin-top:4px;font-size:13px;font-weight:600}@media (width<=600px){.home__hero{padding:52px 20px 44px}.home__grid-section{padding:36px 16px 48px}.home__grid{grid-template-columns:1fr}}.learning-page{background:var(--bg-body);height:100%;color:var(--text-2);font-family:var(--font-sans);flex-direction:column;display:flex;overflow-y:auto}.learning-main{flex:1;padding:48px 24px 64px}.learning-container{max-width:720px;margin:0 auto}.learning-hero{border-bottom:1px solid var(--border-subtle);margin-bottom:48px;padding-bottom:36px}.learning-title{letter-spacing:-.02em;background:var(--gradient-title);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 12px;font-size:clamp(28px,5vw,44px);font-weight:800}.learning-subtitle{color:var(--text-4);margin:0;font-size:16px;line-height:1.6}.learning-list{flex-direction:column;gap:16px;display:flex}.lpost-link{text-decoration:none;display:block}.lpost-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:24px 28px;transition:border-color .18s,transform .18s,box-shadow .18s}.lpost-link:hover .lpost-card{border-color:var(--accent-glow);transform:translateY(-2px);box-shadow:0 8px 32px #00ccee0d}.lpost-card--soon{opacity:.45}.lpost-tag{text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:10px;font-size:11px;font-weight:600}.lpost-title{color:var(--text-1);letter-spacing:-.01em;margin:0 0 10px;font-size:20px;font-weight:700}.lpost-desc{color:var(--text-4);margin:0 0 18px;font-size:14px;line-height:1.65}.lpost-footer{justify-content:space-between;align-items:center;font-size:12px;display:flex}.lpost-demos{color:var(--text-5);font-weight:500}.lpost-coming{color:var(--text-6);font-weight:500}.lpost-cta{color:var(--accent);font-weight:600;transition:color .15s}.lpost-link:hover .lpost-cta{color:var(--accent-bright)}@media (width<=600px){.learning-main{padding:28px 14px 48px}.learning-hero{margin-bottom:32px;padding-bottom:24px}.learning-subtitle{font-size:14px}.lpost-card{padding:18px 16px}.lpost-title{font-size:17px}.lpost-desc{font-size:13px}}