*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans,sans-serif;background:radial-gradient(1200px 600px at 30% -10%,#1f2a44,#0b1020 60%) fixed;color:#e9eefc}:root{--primary-1: #4f46e5;--primary-2: #2563eb;--card: rgba(233, 238, 252, .06);--border: rgba(233, 238, 252, .1);--border-strong: rgba(233, 238, 252, .16);--hover: rgba(233, 238, 252, .08);--text-link: #cfe0ff}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.95em}.app{min-height:100%;display:grid;grid-template-rows:auto 1fr}.topbar{position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(to bottom,#0b1020eb,#0b10208c);border-bottom:1px solid rgba(233,238,252,.08)}.topbar__inner{max-width:1100px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px}.brand__logo{height:34px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}.brand__name{font-weight:700;line-height:1.1}.brand__sub{opacity:.75;font-size:.9rem}.topbar__right{display:flex;align-items:center;gap:8px}.topbar__back{padding-left:0}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;opacity:.9}.crumbs__item{display:inline-flex;align-items:center;gap:6px}.crumbs__sep{opacity:.45}.crumbs__current{font-weight:600}.link{background:transparent;border:none;color:var(--text-link);cursor:pointer;padding:6px 8px;border-radius:10px}.link:hover{background:var(--hover)}.content{max-width:1100px;width:100%;margin:0 auto;padding:20px 16px 40px}.card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 24px 80px #00000059}.card__header{padding:18px 18px 12px;border-bottom:1px solid rgba(233,238,252,.08)}.card__title{font-size:1.15rem;letter-spacing:-.01em}.card__desc{margin-top:6px;opacity:.78;line-height:1.35}.card__body{padding:16px 18px 18px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}.tile{grid-column:span 6;text-align:left;background:linear-gradient(180deg,#4f46e529,#2563eb0f),var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;cursor:pointer;color:inherit;transition:transform .12s ease,background .12s ease,border .12s ease}.tile:hover{transform:translateY(-1px);background:linear-gradient(180deg,#4f46e533,#2563eb1a),var(--hover);border-color:var(--border-strong)}.tile__title{font-weight:700;letter-spacing:-.01em}.tile__meta{margin-top:6px;opacity:.72;font-size:.92rem}.stack{display:grid;gap:10px}.row{text-align:left;background:linear-gradient(90deg,#4f46e524,#2563eb0f 55%,#e9eefc0a),var(--card);border:1px solid var(--border);border-radius:14px;padding:12px;cursor:pointer;color:inherit;display:flex;align-items:center;gap:10px}.row:hover{background:linear-gradient(90deg,#4f46e52e,#2563eb1a 55%,#e9eefc0f),var(--hover);border-color:var(--border-strong)}.row__title{font-weight:650}.icon{flex:0 0 auto;color:#e9eefcd9}.lessonPage{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:10px 0 30px}.lessonPage__video{width:min(1100px,96vw);max-height:80vh;border-radius:18px;border:1px solid rgba(233,238,252,.14);background:#00000059;box-shadow:0 30px 100px #0000008c}.lessonPage__back{width:min(1100px,96vw);margin-bottom:10px}@media(max-width:720px){.tile{grid-column:span 12}}