@layer properties,theme,base,components,utilities,site-patterns,site-components;@layer site-components{.tr-player{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius-md);border:1px solid var(--color-border-subtle);overflow:hidden;background:var(--surface-muted)}.tr-player-trigger{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}.tr-player-trigger:focus-visible{outline:2px solid var(--accent-purple-light);outline-offset:-2px}.tr-player-poster{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-medium)}.tr-player-trigger:hover .tr-player-poster{transform:scale(1.02)}.tr-player-badge{position:absolute;inset:0;margin:auto;width:68px;height:68px;display:grid;place-items:center;border-radius:var(--radius-full);background:color-mix(in srgb,var(--ink-0) 55%,transparent);border:1px solid color-mix(in srgb,var(--white) 30%,transparent);color:var(--white);backdrop-filter:blur(4px);transition:background-color var(--transition-medium),transform var(--transition-medium)}.tr-player-trigger:hover .tr-player-badge{background:color-mix(in srgb,var(--color-accent-brand) 90%,transparent);transform:scale(1.06)}.tr-player-frame{width:100%;height:100%;border:0;display:block}}@layer properties,theme,base,components,utilities,site-patterns,site-components;@layer site-components{.tr-lesson{padding-top:calc(var(--nav-height) + var(--space-10));padding-bottom:var(--space-16)}.tr-notfound{padding-top:calc(var(--nav-height) + var(--section-padding-lg));padding-bottom:var(--section-padding-lg);text-align:center}.tr-notfound-code{margin:0 0 var(--space-3);font-size:var(--text-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-green)}.tr-notfound-title{margin:0 auto var(--space-4);max-width:720px;font-size:clamp(40px,4.5vw,56px);font-weight:500;letter-spacing:var(--tracking-heading);line-height:1.08;text-wrap:balance;background:linear-gradient(to bottom,var(--white) 40%,color-mix(in srgb,var(--white) 55%,transparent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.tr-notfound-body{margin:0 auto var(--space-8);max-width:520px;font-size:var(--text-body);color:var(--color-text-secondary);text-wrap:pretty}.tr-notfound-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4)}.tr-lesson-inner{max-width:760px}.tr-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6);font-size:var(--text-small);color:var(--color-text-tertiary)}.tr-breadcrumb a{color:var(--accent-purple-light);text-decoration:none}.tr-breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}.tr-lesson-head{margin-bottom:var(--space-8)}.tr-lesson-eyebrow{margin:0 0 var(--space-2);font-size:var(--text-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-purple-light)}.tr-lesson-title{margin:0 0 var(--space-3);font-size:clamp(30px,4vw,44px);font-weight:500;letter-spacing:var(--tracking-heading);line-height:1.15;background:linear-gradient(to bottom,var(--white) 42%,color-mix(in srgb,var(--white) 55%,transparent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.tr-lesson-sub{margin:0;font-size:var(--text-body-lg);line-height:1.7;color:var(--color-text-secondary);text-wrap:pretty}.tr-lesson-body{margin-top:var(--space-10)}.tr-lesson .article-body h2{margin:40px 0 16px;font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1.25;color:var(--text-primary);scroll-margin-top:calc(var(--nav-height) + 24px)}.tr-lesson .article-body>h2:first-child{margin-top:0}.tr-lesson .article-body h3,.tr-lesson .article-body h4{margin:28px 0 12px;font-size:19px;font-weight:600;color:var(--text-primary)}.tr-lesson .article-body p{margin:0 0 20px;font-size:var(--text-body);line-height:1.75;color:var(--text-secondary)}.tr-lesson .article-body a{color:var(--accent-purple-light);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent-purple-light) 35%,transparent);text-underline-offset:3px;transition:text-decoration-color var(--transition-fast)}.tr-lesson .article-body a:hover{text-decoration-color:var(--accent-purple-light)}.tr-lesson .article-body strong{color:var(--text-primary)}.tr-lesson .article-body ul,.tr-lesson .article-body ol{margin:0 0 20px;padding-left:22px;font-size:var(--text-body);line-height:1.75;color:var(--text-secondary)}.tr-lesson .article-body ul{list-style:disc}.tr-lesson .article-body ol{list-style:decimal}.tr-lesson .article-body li{margin-bottom:8px}.tr-lesson .article-figure{margin:28px 0 8px}.tr-lesson .article-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.tr-lesson .article-figure figcaption{margin-top:10px;font-size:13px;color:var(--text-tertiary)}.tr-lesson .article-callout{background:color-mix(in srgb,var(--accent-blue) 6%,transparent);border:1px solid color-mix(in srgb,var(--accent-blue) 18%,transparent);border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 20px}.tr-lesson .article-body .article-callout-label{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-blue)}.tr-lesson .article-body .article-callout-text{margin:0;font-size:16px;line-height:1.6;color:var(--text-secondary)}.tr-pager{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--color-border-subtle)}.tr-pager-spacer{flex:1}.tr-pager-link{flex:1;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--bg-card);text-decoration:none;transition:transform var(--transition-medium),background-color var(--transition-medium),box-shadow var(--transition-medium)}.tr-pager-link:hover{transform:translateY(-2px);background:var(--bg-card-hover);box-shadow:var(--shadow-card)}.tr-pager-link:focus-visible{outline:2px solid var(--accent-purple-light);outline-offset:3px}.tr-pager-next{text-align:right}.tr-pager-label{font-size:var(--text-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-purple-light)}.tr-pager-title{font-size:var(--text-body);font-weight:600;line-height:1.4;color:var(--text-primary);text-wrap:pretty}@media(max-width:640px){.tr-lesson{padding-top:calc(var(--nav-height) + var(--space-8));padding-bottom:var(--space-12)}.tr-pager{flex-direction:column}.tr-pager-spacer{display:none}.tr-pager-next{text-align:left}}}