@import "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap";
.shell{--color-violet:#6e56f7;--color-violet-light:#9f8cff;--color-indigo:#3d2daa;--color-coral:#ff7a59;--color-ink:#0f1124;--color-slate:#4a4d6b;--color-mist:#9ca0bc;--color-edge:#e5e7f2;--color-cloud:#f7f8fc;--color-paper:#fff;--gradient-signature:linear-gradient(135deg, #6e56f7 0%, #ff7a59 100%);--font-heading:"Geist", system-ui, -apple-system, sans-serif;--font-body:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"Geist Mono", "SF Mono", Menlo, monospace;--radius-subtle:6px;--radius-default:10px;--radius-medium:14px;--shadow-sm:0 1px 2px #0f11240f;--shadow-md:0 4px 12px #0f112414;--shadow-lg:0 12px 32px #0f11241a;--ease-brand:cubic-bezier(.16, 1, .3, 1);--focus-ring:0 0 0 3px #6e56f726;--community-top-bar-height:64px;--community-sidebar-width:480px;--community-column-width:224px;--community-sidebar-max:448px;--community-content-padding-x:48px;--community-content-padding-y:32px;--surface-sidebar:var(--color-cloud);--surface-canvas:var(--color-paper);--surface-hover:#6e56f70a;--surface-active:#6e56f714;--border-sidebar:1px solid var(--color-edge);--accent-active:3px solid var(--color-violet)}.shell *{box-sizing:border-box}.shell{background:var(--surface-canvas);color:var(--color-ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:15px;line-height:1.6}.shell svg{display:block}.shell a{color:inherit;text-decoration:none}.shell :focus-visible{box-shadow:var(--focus-ring);border-radius:6px;outline:none}.top-bar{height:var(--community-top-bar-height);background:var(--surface-canvas);border-bottom:1px solid var(--color-edge);z-index:100;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:fixed;top:0;left:0;right:0}.top-bar__left{align-items:center;gap:12px;display:flex}.hamburger{width:40px;height:40px;color:var(--color-ink);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;margin-left:-8px;display:none}.hamburger:hover{background:var(--surface-hover)}.brand-link{cursor:pointer;align-items:center;gap:12px;display:flex}.brand-mark{flex-shrink:0;width:28px;height:28px}.brand-wordmark{font-family:var(--font-heading);letter-spacing:-.01em;color:var(--color-ink);font-size:18px;font-weight:600}.top-bar__right{align-items:center;display:flex}.user-name{font-family:var(--font-heading);color:var(--color-ink);font-size:14px;font-weight:500}.member-tag{font-family:var(--font-heading);letter-spacing:.06em;text-transform:uppercase;color:var(--color-violet);background:#6e56f714;border-radius:999px;align-items:center;gap:4px;margin-left:6px;padding:3px 8px;font-size:10px;font-weight:600;display:inline-flex}.member-tag__mark{font-size:11px;line-height:1}.user-cluster{cursor:pointer;align-items:center;margin-left:12px;display:flex}.avatar{background:var(--color-cloud);border:1px solid var(--color-edge);width:36px;height:36px;font-family:var(--font-heading);color:var(--color-violet);border-radius:50%;justify-content:center;align-items:center;font-size:13px;font-weight:600;display:flex}.user-chevron{color:var(--color-slate);margin-left:4px}.sidebar{top:var(--community-top-bar-height);width:min(calc(var(--open-cols,1) * var(--community-column-width)), var(--community-sidebar-max));background:var(--surface-sidebar);border-right:1px solid var(--color-edge);z-index:90;flex-direction:column;padding:24px 16px;display:flex;position:fixed;bottom:0;left:0;overflow:hidden}.sidebar__back{font-family:var(--font-heading);letter-spacing:.04em;color:var(--color-slate);align-items:center;gap:6px;margin-bottom:24px;padding:0 8px;font-size:12px;font-weight:500;transition:color .12s;display:inline-flex}.sidebar__back:hover{color:var(--color-violet)}.sidebar__back svg{flex-shrink:0}.sidebar__program{font-family:var(--font-heading);letter-spacing:-.01em;color:var(--color-ink);margin-bottom:16px;padding:0 8px;font-size:17px;font-weight:600;line-height:1.25}.sidebar__divider{border:none;border-top:1px solid var(--color-edge);margin:0 0 16px}.menu{flex-direction:column;display:flex}.menu-item{font-family:var(--font-heading);color:var(--color-slate);cursor:pointer;border-left:3px solid #0000;border-radius:6px;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px;padding:9px 12px 9px 13px;font-size:14px;font-weight:500;line-height:1.4;transition:background .12s,color .12s;display:flex}.menu-item:hover{background:var(--surface-hover);color:var(--color-ink)}.menu-item.is-active{background:var(--surface-active);color:var(--color-violet);border-left:var(--accent-active);font-weight:600}.menu-item__label{min-width:0}.menu-item__right{flex-shrink:0;align-items:center;gap:8px;display:flex}.menu-item__chevron{color:var(--color-mist);flex-shrink:0;transition:transform .2s}.menu-item-expandable.is-expanded .menu-item__chevron{transform:rotate(90deg)}.menu-item__badge{font-family:var(--font-heading);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--gradient-signature);border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700;line-height:1.2;display:inline-block}.menu-children{margin:2px 0 8px;padding:0;list-style:none;overflow:hidden}.menu-item-expandable:not(.is-expanded)+.menu-children{display:none}.menu-child{font-family:var(--font-heading);color:var(--color-slate);border-left:3px solid #0000;border-radius:6px;align-items:center;padding:7px 12px 7px 29px;font-size:13px;font-weight:500;line-height:1.4;transition:background .12s,color .12s;display:flex;position:relative}.menu-child:before{content:"";background:var(--color-mist);border-radius:50%;width:4px;height:4px;transition:background .12s;position:absolute;top:50%;left:18px;transform:translateY(-50%)}.menu-child:hover{background:var(--surface-hover);color:var(--color-ink)}.menu-child:hover:before{background:var(--color-violet)}.menu-child.is-active{background:var(--surface-active);color:var(--color-violet);border-left:var(--accent-active);font-weight:600}.menu-child.is-active:before{background:var(--color-violet)}.shell .menu-item.is-admin-only,.shell .menu-child.is-admin-only{opacity:.5}.shell .sidebar-columns{flex:1;min-height:0;margin:0 -16px -24px;display:flex;overflow-x:auto}.shell .sidebar-column{width:var(--community-column-width);border-right:1px solid var(--color-edge);flex-shrink:0;padding:6px 8px;animation:.16s column-in;overflow-y:auto}.shell .sidebar-column:last-child{border-right:none}@keyframes column-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.shell .sidebar-col-item{text-align:left;width:100%;font-family:var(--font-heading);color:var(--color-slate);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px;padding:8px 10px;font-size:14px;font-weight:500;line-height:1.4;transition:background .12s,color .12s;display:flex}.shell .sidebar-col-item:hover{background:var(--surface-hover);color:var(--color-ink)}.shell .sidebar-col-item.is-selected,.shell .sidebar-col-item.is-active{background:var(--surface-active);color:var(--color-violet);font-weight:600}.shell .sidebar-col-label{white-space:normal;overflow-wrap:anywhere;min-width:0}.shell .sidebar-col-chevron{color:var(--color-mist);flex-shrink:0}.shell .sidebar-col-item.is-selected .sidebar-col-chevron{color:var(--color-violet)}.shell .sidebar-col-item.is-admin-only{opacity:.5}.shell .sidebar-col-empty{font-family:var(--font-body);color:var(--color-mist);padding:10px;font-size:13px}.content{margin-left:min(calc(var(--open-cols,1) * var(--community-column-width)), var(--community-sidebar-max));margin-top:var(--community-top-bar-height);min-height:calc(100vh - var(--community-top-bar-height));background:var(--surface-canvas);padding:var(--community-content-padding-y) var(--community-content-padding-x)}.breadcrumb{font-family:var(--font-body);color:var(--color-mist);flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;font-size:13px;font-weight:500;display:flex}.breadcrumb a{color:var(--color-slate);transition:color .12s}.breadcrumb a:hover{color:var(--color-violet)}.breadcrumb-sep{color:var(--color-mist)}.breadcrumb-current{color:var(--color-ink);font-weight:600}.page-title{font-family:var(--font-heading);letter-spacing:-.02em;color:var(--color-ink);margin:0 0 32px;font-size:36px;font-weight:600;line-height:1.15}.example-content-label{font-family:var(--font-mono);color:var(--color-mist);letter-spacing:.04em;text-transform:uppercase;background:var(--color-cloud);border-radius:6px;margin:0 0 24px;padding:8px 12px;font-size:11px;font-weight:500;display:inline-block}.template-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;display:grid}.template-card{border:1px solid var(--color-edge);background:#fff;border-radius:12px;transition:transform .18s,box-shadow .18s,border-color .18s;display:block;overflow:hidden}.template-card:hover{border-color:#6e56f74d;transform:translateY(-2px);box-shadow:0 8px 24px #0f11240f}.template-thumb{aspect-ratio:16/10;background:var(--color-cloud)}.template-thumb-gradient-1{background:linear-gradient(135deg,#c7bcff 0%,#ffb5a4 100%)}.template-thumb-gradient-2{background:linear-gradient(135deg,#b5d5ff 0%,#c7bcff 100%)}.template-thumb-gradient-3{background:linear-gradient(135deg,#ffb5a4 0%,#ffd9a4 100%)}.template-thumb-gradient-4{background:linear-gradient(135deg,#a4ffd9 0%,#b5d5ff 100%)}.template-thumb-gradient-5{background:linear-gradient(135deg,#d9a4ff 0%,#ffa4d9 100%)}.template-thumb-gradient-6{background:linear-gradient(135deg,#ffd9a4 0%,#a4ffd9 100%)}.template-card-title{font-family:var(--font-heading);color:var(--color-ink);letter-spacing:-.01em;margin:16px 16px 4px;font-size:15px;font-weight:600}.template-card-meta{font-family:var(--font-body);color:var(--color-mist);margin:0 16px 16px;font-size:13px}.backdrop{inset:0;top:var(--community-top-bar-height);z-index:89;background:#0f112480;display:none;position:fixed}@media (max-width:1023px){.shell{--community-sidebar-max:360px;--community-content-padding-x:24px}}@media (max-width:767px){.top-bar{height:56px;padding:0 16px}.shell{--community-top-bar-height:56px}.hamburger{display:inline-flex}.brand-wordmark,.user-name,.member-tag,.user-chevron{display:none}.top-bar__left{gap:8px}.sidebar{width:320px;max-width:86vw;transition:transform .24s var(--ease-brand);transform:translate(-100%)}#nav-toggle:checked~.sidebar{box-shadow:var(--shadow-lg);transform:translate(0)}#nav-toggle:checked~.backdrop{display:block}.content{margin-left:0;padding:24px 20px}.page-title{margin-bottom:24px;font-size:28px}.template-grid{grid-template-columns:1fr}}#nav-toggle{opacity:0;pointer-events:none;position:absolute}.page-meta{font-family:var(--font-body);color:var(--color-mist);flex-wrap:wrap;align-items:center;gap:10px;margin:-16px 0 32px;font-size:13px;font-weight:500;display:flex}.page-meta-item{align-items:center;gap:6px;display:inline-flex}.page-meta-sep{color:var(--color-edge)}.lesson-content{max-width:760px}.lesson-video{margin-bottom:32px}.lesson-video-thumb{aspect-ratio:16/9;cursor:pointer;background:linear-gradient(135deg,#0f1124 0%,#2a1f4d 100%);border-radius:12px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.lesson-video-play{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#ffffff26;border:2px solid #fff6;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;padding-left:4px;transition:all .2s;display:flex}.lesson-video-play:hover{background:#ffffff40;transform:scale(1.05)}.lesson-video-duration{color:#fff;font-family:var(--font-body);background:#0f1124cc;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:600;position:absolute;bottom:16px;right:16px}.lesson-intro{font-family:var(--font-body);color:var(--color-ink);margin:0 0 40px;font-size:19px;font-weight:400;line-height:1.55}.lesson-heading{font-family:var(--font-heading);letter-spacing:-.01em;color:var(--color-ink);margin:40px 0 16px;font-size:24px;font-weight:600;line-height:1.3}.lesson-subheading{font-family:var(--font-heading);color:var(--color-ink);margin:28px 0 10px;font-size:18px;font-weight:600;line-height:1.3}.lesson-content p{font-family:var(--font-body);color:var(--color-slate);margin:0 0 16px;font-size:16px;line-height:1.65}.lesson-list{margin:0 0 24px;padding:0;list-style:none}.lesson-list li{font-family:var(--font-body);color:var(--color-slate);margin-bottom:10px;padding-left:24px;font-size:16px;line-height:1.65;position:relative}.lesson-list li:before{content:"";background:var(--color-violet);border-radius:50%;width:6px;height:6px;position:absolute;top:11px;left:8px}.lesson-callout{border:1px solid #6e56f726;border-left:3px solid var(--color-violet);background:linear-gradient(135deg,#6e56f70a 0%,#ff7a5908 100%);border-radius:8px;margin:32px 0;padding:20px 24px}.lesson-callout-label{font-family:var(--font-heading);letter-spacing:.08em;text-transform:uppercase;color:var(--color-violet);margin-bottom:8px;font-size:11px;font-weight:700}.lesson-callout p{color:var(--color-ink);margin:0;font-weight:400}.lesson-downloads{flex-direction:column;gap:8px;margin:16px 0 40px;display:flex}.lesson-download{border:1px solid var(--color-edge);background:#fff;border-radius:10px;align-items:center;gap:16px;padding:16px 20px;text-decoration:none;transition:all .15s;display:flex}.lesson-download:hover{background:#6e56f705;border-color:#6e56f766;transform:translate(2px)}.lesson-download-icon{width:40px;height:40px;color:var(--color-violet);background:#6e56f71a;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.lesson-download-info{flex:1;min-width:0}.lesson-download-title{font-family:var(--font-heading);color:var(--color-ink);margin-bottom:2px;font-size:15px;font-weight:600}.lesson-download-meta{font-family:var(--font-body);color:var(--color-mist);font-size:13px}.lesson-download-arrow{color:var(--color-mist);flex-shrink:0;transition:color .15s}.lesson-download:hover .lesson-download-arrow{color:var(--color-violet)}.lesson-nav{border-top:1px solid var(--color-edge);grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;padding-top:32px;display:grid}.lesson-nav-link{border:1px solid var(--color-edge);background:#fff;border-radius:10px;flex-direction:column;gap:6px;padding:16px 20px;text-decoration:none;transition:all .15s;display:flex}.lesson-nav-link:hover{background:#6e56f705;border-color:#6e56f766}.lesson-nav-next{text-align:right}.lesson-nav-direction{font-family:var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:var(--color-mist);align-items:center;gap:6px;font-size:12px;font-weight:600;display:flex}.lesson-nav-prev .lesson-nav-direction{justify-content:flex-start}.lesson-nav-next .lesson-nav-direction{justify-content:flex-end}.lesson-nav-link:hover .lesson-nav-direction{color:var(--color-violet)}.lesson-nav-title{font-family:var(--font-heading);color:var(--color-ink);letter-spacing:-.01em;font-size:15px;font-weight:600;line-height:1.3}@media (max-width:767px){.page-meta{gap:8px;font-size:12px}.lesson-intro{font-size:17px}.lesson-heading{font-size:22px}.lesson-content p,.lesson-list li{font-size:15px}.lesson-nav{grid-template-columns:1fr;gap:12px}.lesson-nav-next{text-align:left}.lesson-nav-next .lesson-nav-direction{justify-content:flex-start}}.shell .locked-content{border:1px solid var(--color-edge);background:var(--color-cloud);border-radius:16px;justify-content:center;align-items:center;min-height:420px;margin-top:24px;padding:48px 24px;display:flex;position:relative;overflow:hidden}.shell .locked-content-backdrop{z-index:0;pointer-events:none;filter:blur(40px);opacity:.9;background:radial-gradient(600px 320px at 25% 15%,#6e56f738,#0000 60%),radial-gradient(520px 300px at 80% 85%,#ff7a5933,#0000 62%);position:absolute;inset:0}.shell .locked-content-card{z-index:1;text-align:center;-webkit-backdrop-filter:blur(16px);background:#ffffffb8;border:1px solid #fffc;border-radius:16px;width:100%;max-width:420px;padding:36px 32px;position:relative;box-shadow:0 12px 40px #0f11241f}.shell .locked-content-lock{color:#fff;background:var(--gradient-signature);border-radius:14px;justify-content:center;align-items:center;width:52px;height:52px;margin-bottom:18px;display:inline-flex;box-shadow:0 8px 22px #6e56f759}.shell .locked-content-title{color:var(--color-ink);letter-spacing:-.01em;margin:0 0 8px;font-size:22px;font-weight:700}.shell .locked-content-text{color:var(--color-slate);margin:0 0 24px;font-size:14px;line-height:1.6}.shell .locked-content-cta{color:#fff;background:var(--color-violet);border-radius:10px;align-items:center;gap:8px;padding:12px 22px;font-size:15px;font-weight:600;text-decoration:none;transition:background .16s,transform .12s,box-shadow .16s;display:inline-flex;box-shadow:0 8px 24px #6e56f74d}.shell .locked-content-cta:hover{background:var(--color-indigo);box-shadow:0 12px 30px #6e56f766}.shell .locked-content-cta:active{transform:scale(.98)}