@charset "UTF-8";
/* GROOVE / LAB: studio/editorial. Все роли берутся из design/tokens.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--line-base);font-weight:var(--weight-normal);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}button:disabled{cursor:not-allowed}
button,a,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:var(--focus-offset)}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:var(--weight-normal);letter-spacing:-.035em}
svg{display:block}
svg.icon{width:var(--icon-size);height:var(--icon-size);flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
button svg{pointer-events:none}
::selection{background:var(--accent);color:var(--on-accent)}
[hidden]{display:none!important}
.skip-link{position:fixed;top:var(--size-minus-100);left:var(--space-6);background:var(--accent);color:var(--on-accent);padding:var(--space-5) var(--space-7);z-index:100;font-size:var(--text-sm)}
.skip-link:focus{top:var(--space-6)}
.sidebar{width:var(--sidebar-width);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:var(--space-9) var(--space-7) var(--space-8);border-right:var(--border-width) solid var(--border);background:var(--bg);z-index:30;overflow-y:auto}
.brand{display:flex;align-items:center;gap:var(--space-5);font-size:var(--text-lg);letter-spacing:-.04em;white-space:nowrap;font-weight:var(--weight-bold);line-height:var(--line-lg)}
.brand em{font-style:normal;color:var(--accent);font-weight:var(--weight-normal)}
.brand-symbol{font-size:var(--text-xl);line-height:var(--line-xl);color:var(--text);letter-spacing:-.14em}
.brand-symbol>span{color:var(--accent);font-weight:var(--weight-normal)}
.brand-caption{font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin:var(--space-5) 0 var(--space-8) var(--space-10)}
.sidebar-progress{padding:var(--space-6) 0;border-top:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border);margin-bottom:var(--space-8)}
.progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5);font-size:var(--text-xs);color:var(--text-muted)}
.progress-top>span{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.progress-top strong{color:var(--accent);font-size:var(--text-xl);line-height:var(--line-xl);font-weight:var(--weight-normal)}
.progress-top strong small{font-size:var(--text-sm)}
.progress-track{height:var(--space-2);background:var(--surface-raised);margin:var(--space-5) 0;overflow:hidden}
.progress-track i{display:block;height:100%;background:var(--accent);transition:width var(--motion-base) var(--ease)}
.progress-bottom{font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim)}
.primary-nav{display:grid;margin:0 calc(var(--space-4)*-1) var(--space-8);gap:var(--space-1)}
.nav-item{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-4);font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);position:relative;transition:color var(--motion-fast),background var(--motion-fast)}
.nav-item.active{color:var(--accent);background:var(--surface)}
.nav-item.active:before{content:"";position:absolute;left:0;top:var(--space-5);bottom:var(--space-5);width:var(--space-1);background:var(--accent)}
.nav-item svg{width:var(--icon-small);height:var(--icon-small);margin-left:var(--space-2)}
.nav-item:hover{color:var(--text);background:var(--surface)}
.nav-tail{margin-left:auto;font-family:var(--font-mono);color:var(--text-dim);font-size:var(--text-xs)}
.nav-section-label{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.08em;color:var(--text-dim);display:flex;justify-content:space-between;margin-bottom:var(--space-6)}
.module-nav{display:grid;gap:var(--space-2)}
.module-link{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-4) 0;font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-muted)}
.module-index{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-dim);flex:none}
.module-link:hover,.module-link.active,.module-link.active .module-index{color:var(--accent)}
.module-done{margin-left:auto;color:var(--accent)}
.module-done svg{width:var(--icon-small);height:var(--icon-small)}
.sidebar-bottom{margin-top:auto;padding-top:var(--space-8)}
.resume-card{display:block;padding:var(--space-7) 0;border-top:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border)}
.resume-card>span{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.resume-card strong{display:block;font-weight:var(--weight-normal);font-size:var(--text-sm);line-height:var(--line-sm);margin:var(--space-4) 0 var(--space-5)}
.resume-card small{display:flex;align-items:center;gap:var(--space-4);color:var(--accent);font-size:var(--text-xs)}
.resume-card small svg{width:var(--icon-small);height:var(--icon-small)}
.offline-indicator{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-xs);color:var(--text-dim);margin-top:var(--space-7)}
.offline-indicator span,.local-badge span{height:var(--space-2);width:var(--space-2);background:var(--accent);flex:none}
.sidebar-bottom>p{font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-top:var(--space-4)}
.workspace{margin-left:var(--sidebar-width);min-width:0}
.topbar{height:var(--header-height);border-bottom:var(--border-width) solid var(--border);padding:0 var(--page-gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.topbar-breadcrumb{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.025em;color:var(--text-dim)}
.topbar-right{display:flex;align-items:center;gap:var(--space-9)}
.search-form{display:flex;align-items:center;gap:var(--space-5);color:var(--text-muted)}
.search-icon svg{width:var(--icon-small);height:var(--icon-small)}
.search-form input{width:var(--size-180);background:transparent;border:0;color:var(--text);font-size:var(--text-xs);padding:var(--space-4) 0;min-width:0}
.search-form input::placeholder{color:var(--text-dim)}
.search-form kbd{border:var(--border-width) solid var(--border);font-size:var(--text-xs);font-family:var(--font-mono);line-height:var(--line-xs);padding:0 var(--space-2);color:var(--text-dim)}
.local-badge{display:flex;align-items:center;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-muted);white-space:nowrap}
.icon-button{width:var(--button-sm);height:var(--button-sm);background:transparent;border:var(--border-width) solid var(--border-input);display:grid;place-items:center;border-radius:var(--radius-sm)}
.menu-toggle{display:none}
main{padding:var(--space-11) var(--page-gutter) var(--space-14);min-height:calc(100vh - var(--header-height)*2);max-width:var(--page-max);margin:auto}
main:focus{outline:none}
.page-kicker{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:var(--space-5)}
.page-kicker:before{content:"";width:var(--space-2);height:var(--space-2);background:var(--accent);flex:none}
.hero{position:relative;display:grid;grid-template-columns:1.1fr 1fr;column-gap:var(--space-7);padding:var(--space-7) 0 var(--space-11);min-height:var(--size-510);align-items:center;overflow:hidden}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:var(--text-display);line-height:var(--line-display);font-weight:var(--weight-normal);letter-spacing:-.065em;margin:var(--space-9) 0 var(--space-8)}
.hero h1>span{color:var(--text-dim)}
.hero-intro{max-width:var(--size-440);color:var(--text-muted);font-size:var(--text-base);line-height:var(--line-base)}
.hero-actions{display:flex;align-items:center;gap:var(--space-8);margin-top:var(--space-9)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-5);min-height:var(--button-md);padding:var(--space-5) var(--space-7);background:var(--text);border:var(--border-width) solid var(--text);color:var(--bg);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);font-weight:var(--weight-normal);transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.button svg{width:var(--icon-small);height:var(--icon-small)}
.button.primary,.button.blue{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.button:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.button.primary:hover,.button.blue:hover{background:var(--text);border-color:var(--text)}
.button.secondary{background:transparent;border-color:var(--border-input);color:var(--text)}
.button.secondary:hover{background:var(--surface-raised);border-color:var(--accent);color:var(--accent)}
.button:disabled{background:var(--surface);border-color:var(--border);color:var(--text-dim)}
.text-link{display:inline-flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.text-link svg{height:var(--icon-small);width:var(--icon-small)}
.text-link:hover{color:var(--accent)}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:var(--size-420)}
.device-image{width:118%;max-width:none;max-height:var(--size-450);object-fit:contain;position:relative;z-index:1;filter:none}
.hero-label{position:absolute;top:var(--space-7);right:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);letter-spacing:.04em;z-index:2}
.hero-device-label{position:absolute;bottom:var(--space-5);right:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);letter-spacing:.1em;z-index:2}
.hero-index{position:absolute;left:var(--space-10);top:var(--space-7);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim)}
.studio-specs{display:grid;grid-template-columns:repeat(4,1fr);border:var(--border-width) solid var(--border);margin-bottom:var(--space-14)}
.studio-spec{padding:var(--space-7) var(--space-8);border-left:var(--border-width) solid var(--border)}
.studio-spec:first-child{border-left:0}
.studio-spec>span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.1em;color:var(--text-dim);margin-bottom:var(--space-4)}
.studio-spec strong{font-size:var(--text-lg);line-height:var(--line-lg);font-weight:var(--weight-normal);letter-spacing:-.025em}
.studio-spec:last-child strong{color:var(--accent)}
.learning-path{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border);margin:var(--space-10) 0 var(--space-14)}
.path-stage{position:relative;display:block;padding:var(--space-8) var(--space-8) var(--space-9);border-left:var(--border-width) solid var(--border)}
.path-stage:first-child{border-left:0;padding-left:0}
.path-stage>span{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.1em;color:var(--text-dim)}
.path-stage h3{font-size:var(--text-xl);line-height:var(--line-xl);margin:var(--space-6) 0 var(--space-4)}
.path-stage p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);max-width:var(--size-250)}
.path-stage>svg{position:absolute;right:var(--space-8);top:var(--space-8);width:var(--icon-small);height:var(--icon-small);color:var(--text-dim)}
.path-stage:hover h3,.path-stage:hover>svg{color:var(--accent)}
.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-9)}
.section-header h2{font-size:var(--text-heading);line-height:var(--line-heading);letter-spacing:-.045em}
.section-header p{color:var(--text-muted);font-size:var(--text-sm);line-height:var(--line-sm);margin-top:var(--space-5);max-width:var(--size-450)}
.section-counter{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.1em;color:var(--text-dim)}
.curriculum-top{display:flex;align-items:center;gap:var(--space-6);padding-top:var(--space-4)}
.segmented{display:flex;border:var(--border-width) solid var(--border);padding:var(--space-2);gap:var(--space-2)}
.segmented button{border:0;background:transparent;color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);padding:var(--space-4) var(--space-5)}
.segmented button.active{background:var(--surface-raised);color:var(--accent)}
.segmented button:hover{color:var(--accent)}
.module-matrix{display:grid;grid-template-columns:1fr 1fr;border-top:var(--border-width) solid var(--border);border-left:var(--border-width) solid var(--border)}
.course-module{padding:var(--space-9);border-bottom:var(--border-width) solid var(--border);border-right:var(--border-width) solid var(--border);background:var(--bg);min-width:0}
.course-module-heading{display:grid;grid-template-columns:1fr var(--size-72);column-gap:var(--space-6);align-items:start;margin-bottom:var(--space-7)}
.course-module-overline{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.1em;color:var(--text-dim);display:flex;align-items:center;gap:var(--space-6);margin-bottom:var(--space-5)}
.course-module-overline>span{color:var(--accent)}
.course-module h3{font-size:var(--text-xl);line-height:var(--line-xl);letter-spacing:-.04em}
.module-screen{width:var(--size-72);height:var(--size-72);background:var(--image-bg);display:flex;align-items:center;justify-content:center;border:var(--border-width) solid var(--border)}
.module-screen img{width:var(--size-64);height:var(--size-64);image-rendering:pixelated}
.course-module-description{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);min-height:var(--space-11);margin-bottom:var(--space-7);max-width:var(--size-400)}
.course-module-lessons{display:grid;border-top:var(--border-width) solid var(--border)}
.module-lesson-row{display:grid;grid-template-columns:var(--size-24) 1fr auto;align-items:center;gap:var(--space-5);border-bottom:var(--border-width) solid var(--border);padding:var(--space-5) 0;font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);min-height:var(--button-md)}
.module-lesson-row>span:first-child{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-dim)}
.module-lesson-row .row-duration{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);display:flex;align-items:center;gap:var(--space-5);color:var(--text-dim);white-space:nowrap}
.module-lesson-row svg{height:var(--icon-small);width:var(--icon-small)}
.module-lesson-row:hover,.module-lesson-row:hover>span:first-child,.module-lesson-row:hover .row-duration{color:var(--accent)}
.module-lesson-row.done .row-duration{color:var(--accent)}
.course-module-progress{display:flex;align-items:center;gap:var(--space-5);color:var(--text-dim);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);margin-top:var(--space-6)}
.module-progress-track{width:var(--size-64);height:var(--space-1);background:var(--surface-raised);display:block}
.module-progress-track i{display:block;height:100%;background:var(--accent)}
.course-note{display:flex;align-items:flex-start;gap:var(--space-6);padding:var(--space-9) 0;margin-top:var(--space-8);border-bottom:var(--border-width) solid var(--border)}
.course-note svg{color:var(--accent);margin-top:var(--space-1)}
.course-note p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);max-width:var(--size-690)}
.course-note strong{font-size:var(--text-base);font-weight:var(--weight-normal);display:block;color:var(--text);margin-bottom:var(--space-4)}
.overview-bottom-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);margin-top:var(--space-7);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim)}
.overview-bottom-tools button{display:flex;align-items:center;gap:var(--space-4);border:0;background:transparent;padding:var(--space-4) 0;white-space:nowrap;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.overview-bottom-tools button svg{width:var(--icon-small);height:var(--icon-small)}
.overview-bottom-tools button:hover{color:var(--accent)}
.site-footer{border-top:var(--border-width) solid var(--border);padding:var(--space-8) var(--page-gutter);display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim)}
.footer-separator{padding:0 var(--space-4)}
.footer-links{display:flex;gap:var(--space-7);flex:none}
.site-footer a:hover{color:var(--accent)}
.page-heading{padding-bottom:var(--space-11);max-width:var(--size-850)}
.page-heading h1{font-size:var(--text-heading);line-height:var(--line-heading);margin:var(--space-7) 0 var(--space-6)}
.page-heading p{font-size:var(--text-base);line-height:var(--line-base);color:var(--text-muted);max-width:var(--size-650)}
.filter-row{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-9)}
.filter-pill{display:block;padding:var(--space-4) var(--space-5);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-muted);border:var(--border-width) solid var(--border)}
.filter-pill.active{border-color:var(--accent);color:var(--accent)}
.filter-pill:hover{border-color:var(--text-muted);color:var(--text)}
.results-label{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);margin-bottom:var(--space-8)}
.results-label .text-link{color:var(--accent);margin-left:var(--space-5)}
.lesson-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:var(--border-width) solid var(--border);border-left:var(--border-width) solid var(--border)}
.lesson-card{display:flex;flex-direction:column;border-right:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border);min-width:0;transition:background var(--motion-fast)}
.lesson-card:hover{background:var(--surface)}
.lesson-card-visual{position:relative;display:flex;align-items:center;justify-content:center;background:var(--image-bg);padding:var(--space-9);height:var(--size-200);overflow:hidden}
.lesson-card-visual img{width:var(--size-144);height:var(--size-144);object-fit:contain;image-rendering:pixelated}
.lesson-card-index{position:absolute;top:var(--space-5);left:var(--space-6);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim)}
.lesson-card-complete{position:absolute;right:var(--space-6);top:var(--space-5);color:var(--accent)}
.lesson-card-complete svg{height:var(--icon-small);width:var(--icon-small)}
.lesson-card-body{padding:var(--space-8);display:flex;flex-direction:column;flex:1}
.lesson-card-module{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);text-transform:uppercase;letter-spacing:.045em;color:var(--text-dim);margin-bottom:var(--space-5)}
.lesson-card h3{font-size:var(--text-lg);line-height:var(--line-lg);letter-spacing:-.02em}
.lesson-card-description{color:var(--text-muted);font-size:var(--text-sm);line-height:var(--line-sm);margin-top:var(--space-4);flex:1}
.lesson-card-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-top:var(--space-8);padding-top:var(--space-5);border-top:var(--border-width) solid var(--border)}
.lesson-card-footer>span{display:flex;align-items:center;gap:var(--space-4)}
.lesson-card-footer svg{width:var(--icon-small);height:var(--icon-small)}
.lesson-card-footer .card-open{color:var(--accent)}
.empty-state{padding:var(--space-12) var(--space-9);border:var(--border-width) solid var(--border);text-align:center;grid-column:1/-1}
.empty-state h2{font-size:var(--text-xl);line-height:var(--line-xl);margin-bottom:var(--space-5)}
.empty-state p{color:var(--text-muted);font-size:var(--text-sm);line-height:var(--line-sm);margin-bottom:var(--space-8)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-bottom:var(--space-11)}
.breadcrumb svg{width:var(--icon-small);height:var(--icon-small)}
.breadcrumb a:hover{color:var(--accent)}
.lesson-layout{display:grid;grid-template-columns:minmax(0,var(--article-width)) var(--rail-width);gap:var(--space-11);justify-content:space-between;align-items:start}
.lesson-article{min-width:0}
.lesson-heading{border-bottom:var(--border-width) solid var(--border);padding-bottom:var(--space-9)}
.lesson-overline{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-7);color:var(--text-dim);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);margin-bottom:var(--space-7)}
.lesson-overline>span:first-child{color:var(--accent);letter-spacing:.1em}
.completion-tag{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--accent)}
.completion-tag svg{height:var(--icon-small);width:var(--icon-small)}
.lesson-heading h1{font-size:var(--text-heading);line-height:var(--line-heading);margin-bottom:var(--space-6);letter-spacing:-.04em}
.lesson-heading p{font-size:var(--text-base);line-height:var(--line-base);color:var(--text-muted)}
.lesson-figure{margin:var(--space-9) 0}
.lesson-image-frame{background:var(--image-bg);padding:var(--space-9);display:flex;align-items:center;justify-content:center;border:var(--border-width) solid var(--border)}
.manual-screen{width:var(--size-240);height:var(--size-240);max-width:100%;object-fit:contain;image-rendering:pixelated}
.lesson-figure figcaption{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-top:var(--space-5);display:flex;justify-content:space-between;gap:var(--space-7)}
.lesson-figure figcaption a{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;color:var(--text-muted)}
.lesson-figure figcaption a:hover{color:var(--accent)}
.lesson-figure figcaption svg{height:var(--icon-small);width:var(--icon-small)}
.goal-block{display:grid;grid-template-columns:1fr 1fr;border-top:var(--border-width) solid var(--border);border-left:var(--border-width) solid var(--border);margin:var(--space-9) 0 var(--space-11)}
.goal-card{padding:var(--space-8);border-right:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border);background:var(--surface)}
.goal-card>span{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.08em;color:var(--accent)}
.goal-card.why>span{color:var(--text-dim)}
.goal-card p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);margin-top:var(--space-5)}
.article-section{margin-top:var(--space-11)}
.article-section>h2{font-size:var(--text-xl);line-height:var(--line-xl);margin-bottom:var(--space-8)}
.steps-list{list-style:none;margin:0;padding:0}
.lesson-step{display:grid;grid-template-columns:var(--space-10) minmax(0,1fr);gap:var(--space-6);padding:var(--space-8) 0;border-top:var(--border-width) solid var(--border)}
.lesson-step:last-child{border-bottom:var(--border-width) solid var(--border)}
.step-number{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--accent);padding-top:var(--space-2)}
.step-content h3{font-size:var(--text-lg);line-height:var(--line-lg);letter-spacing:-.025em;margin-bottom:var(--space-5)}
.step-content p{font-size:var(--text-base);line-height:var(--line-base);color:var(--text-muted);white-space:pre-line}
.practice-box{padding:var(--space-9);border:var(--border-width) solid var(--border);border-left:var(--space-1) solid var(--accent);background:var(--surface);margin-top:var(--space-11)}
.practice-label{display:flex;align-items:center;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.1em;color:var(--accent);margin-bottom:var(--space-6)}
.practice-label svg{height:var(--icon-small);width:var(--icon-small)}
.practice-box h3{font-size:var(--text-xl);line-height:var(--line-xl);margin-bottom:var(--space-5)}
.practice-box p{font-size:var(--text-base);line-height:var(--line-base);color:var(--text-muted);white-space:pre-line}
.checklist{display:grid;border-top:var(--border-width) solid var(--border)}
.checklist label{display:flex;align-items:flex-start;gap:var(--space-6);padding:var(--space-6) 0;border-bottom:var(--border-width) solid var(--border);cursor:pointer}
.checklist input{width:var(--icon-size);height:var(--icon-size);flex:none;margin:var(--space-2) 0 0;accent-color:var(--accent)}
.checklist span{font-size:var(--text-base);line-height:var(--line-base);color:var(--text-muted)}
.checklist input:checked+span{color:var(--accent)}
.quiz-box{border:var(--border-width) solid var(--border);padding:var(--space-9);background:var(--surface)}
.quiz-box>h3{font-size:var(--text-lg);line-height:var(--line-lg);margin-bottom:var(--space-8)}
.quiz-options{display:grid;gap:var(--space-4)}
.quiz-option{display:flex;align-items:flex-start;gap:var(--space-5);padding:var(--space-6);text-align:left;background:var(--surface-input);border:var(--border-width) solid var(--border-input);border-radius:var(--radius-sm);font-size:var(--text-base);line-height:var(--line-base);color:var(--text-muted)}
.option-letter{display:grid;place-items:center;width:var(--space-8);height:var(--space-8);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);flex:none;border:var(--border-width) solid var(--border)}
.quiz-option:hover{border-color:var(--text);color:var(--text)}
.quiz-option.selected{border-color:var(--accent);color:var(--text)}
.quiz-option.selected>.option-letter{color:var(--accent);border-color:var(--accent)}
.quiz-option.correct{background:var(--success-bg);border-color:var(--success)}
.quiz-option.incorrect{background:var(--danger-bg);border-color:var(--danger)}
.quiz-feedback{padding:var(--space-6) var(--space-7);margin-top:var(--space-7);background:var(--success-bg);border-left:var(--space-1) solid var(--success);color:var(--text-muted);font-size:var(--text-sm);line-height:var(--line-sm)}
.quiz-feedback strong{display:block;font-weight:var(--weight-normal);color:var(--success);margin-bottom:var(--space-4)}
.quiz-feedback.incorrect{background:var(--danger-bg);border-left-color:var(--danger)}
.quiz-feedback.incorrect strong{color:var(--danger)}
.quiz-box>.button{margin-top:var(--space-7)}
.tip-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-top:var(--space-11)}
.tip-panel{padding-top:var(--space-7);border-top:var(--border-width) solid var(--border)}
.tip-panel h3{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-base);line-height:var(--line-base);letter-spacing:-.02em;margin-bottom:var(--space-6)}
.tip-panel h3 svg{color:var(--accent);height:var(--icon-small);width:var(--icon-small)}
.tip-panel.pitfalls h3 svg{color:var(--warning)}
.tip-panel ul{padding-left:var(--space-7);margin:0;font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.tip-panel li+li{margin-top:var(--space-5)}
.notes-label{display:flex;justify-content:space-between;gap:var(--space-7);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-bottom:var(--space-5)}
.notes-input{width:100%;min-height:var(--size-160);resize:vertical;border:var(--border-width) solid var(--border-input);border-radius:var(--radius-sm);padding:var(--space-7);background:var(--surface-input);color:var(--text);font-size:var(--text-base);line-height:var(--line-base)}
.notes-input::placeholder{color:var(--text-dim)}
.source-list{margin:0;padding-left:var(--space-7);font-size:var(--text-sm);line-height:var(--line-sm);color:var(--accent)}
.source-list li+li{margin-top:var(--space-5)}
.source-list a:hover{text-decoration:underline}
.source-version{font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-top:var(--space-7)}
.completion-block{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);padding:var(--space-8);background:var(--surface);border:var(--border-width) solid var(--border);margin:var(--space-11) 0 var(--space-9)}
.completion-block strong{display:block;font-weight:var(--weight-normal);font-size:var(--text-base);line-height:var(--line-base);margin-bottom:var(--space-4)}
.completion-block p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.completion-block .button{flex:none}
.lesson-navigation{display:flex;justify-content:space-between;gap:var(--space-8);padding-top:var(--space-8);border-top:var(--border-width) solid var(--border)}
.lesson-navigation a{max-width:48%;font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text)}
.lesson-navigation a:last-child{text-align:right;margin-left:auto}
.lesson-navigation small{display:block;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-bottom:var(--space-4)}
.lesson-navigation a:hover{color:var(--accent)}
.lesson-sidebar{position:sticky;top:var(--space-9)}
.lesson-map{border-top:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border);padding:var(--space-7) 0 var(--space-8)}
.lesson-map>span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.1em;color:var(--text-dim);margin-bottom:var(--space-5)}
.lesson-map h3{font-size:var(--text-lg);line-height:var(--line-lg);margin-bottom:var(--space-8)}
.module-lesson-list{display:grid;gap:var(--space-6)}
.module-lesson-list a{display:flex;align-items:flex-start;gap:var(--space-5);font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.module-lesson-list a.active{color:var(--accent)}
.module-lesson-list a:hover{color:var(--text)}
.module-lesson-list .mini-number{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);padding-top:var(--space-1);color:var(--text-dim);flex:none}
.module-lesson-list svg{height:var(--icon-small);width:var(--icon-small);margin-left:auto;margin-top:var(--space-2);color:var(--accent)}
.lesson-tools{display:grid;gap:var(--space-2);margin-top:var(--space-8)}
.lesson-tools button,.lesson-tools>a{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border:0;background:transparent;text-align:left;color:var(--text-muted);font-size:var(--text-xs);line-height:var(--line-xs)}
.lesson-tools button svg{width:var(--icon-small);height:var(--icon-small)}
.lesson-tools button:hover,.lesson-tools>a:hover{color:var(--accent)}
.lesson-side-tip{font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);border-left:var(--space-1) solid var(--border);padding-left:var(--space-6);margin-top:var(--space-9)}
.lesson-side-tip strong{color:var(--text-muted);font-weight:var(--weight-normal);display:block;margin-bottom:var(--space-4)}
.trainer-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-width);gap:var(--space-9);align-items:start}
.trainer-layout>div{min-width:0}
.sequencer{background:var(--image-bg);border:var(--border-width) solid var(--border);overflow:hidden}
.sequencer-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-7);padding:var(--space-8);border-bottom:var(--border-width) solid var(--border)}
.sequencer-head h2{font-size:var(--text-xl);line-height:var(--line-xl);margin-top:var(--space-5)}
.sequencer-status{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.05em;color:var(--text-dim);display:flex;align-items:center;gap:var(--space-4)}
.sequencer-status:before{content:"";width:var(--space-2);height:var(--space-2);background:var(--text-dim)}
.sequencer-status.playing{color:var(--accent)}
.sequencer-status.playing:before{background:var(--accent)}
.sequencer-grid-wrap{padding:var(--space-9) var(--space-8) var(--space-7);overflow-x:auto}
.sequencer-numbers,.sequencer-lane{display:grid;grid-template-columns:var(--size-48) repeat(16,minmax(var(--size-18),1fr));gap:var(--space-2);min-width:var(--size-470);align-items:center}
.sequencer-numbers{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);text-align:center;color:var(--text-dim);margin-bottom:var(--space-5)}
.sequencer-numbers span:nth-child(4n+2){color:var(--text)}
.sequencer-lane{margin-top:var(--space-4)}
.lane-label{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-muted)}
.seq-step{position:relative;height:var(--space-10);border:var(--border-width) solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface);padding:0;transition:background var(--motion-fast),color var(--motion-fast)}
.seq-step:nth-child(4n+2){border-left:var(--space-1) solid var(--text-dim)}
.seq-step[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.seq-step[data-lane=snare][aria-pressed=true]{background:var(--text);border-color:var(--text)}
.seq-step[data-lane=hat][aria-pressed=true]{background:var(--text-dim);border-color:var(--text-dim)}
.seq-step.current:after{content:"";position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-2);height:var(--space-2);background:var(--text)}
.seq-step[aria-pressed=true].current:after{background:var(--on-accent)}
.seq-step.current{outline:var(--border-width) solid var(--text);outline-offset:var(--space-1)}
.seq-step:hover{border-color:var(--text)}
.seq-beat-lines{display:grid;grid-template-columns:var(--size-48) repeat(4,1fr);gap:var(--space-2);min-width:var(--size-470);margin-top:var(--space-7);text-align:center;color:var(--text-dim);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs)}
.seq-beat-lines span{border-top:var(--border-width) solid var(--border);padding-top:var(--space-4)}
.seq-beat-lines span:first-child{border:0}
.sequencer-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);flex-wrap:wrap;padding:var(--space-8)}
.transport{display:flex;gap:var(--space-4)}
.transport button{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-6);min-height:var(--button-md);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);background:var(--surface);border:var(--border-width) solid var(--border-input);border-radius:var(--radius-sm);color:var(--text)}
.transport button svg{height:var(--icon-small);width:var(--icon-small)}
.transport .play-button{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.transport button:hover{border-color:var(--text)}
.bpm-control{display:flex;align-items:center;gap:var(--space-5);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-muted)}
.bpm-control label small{display:block;color:var(--text-dim);font-size:var(--text-xs);margin-top:var(--space-2)}
.bpm-control input{width:var(--space-13);min-height:var(--button-md);text-align:center;background:var(--surface-input);border:var(--border-width) solid var(--border-input);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-lg);color:var(--text)}
.sequencer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-6) var(--space-8);border-top:var(--border-width) solid var(--border);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim)}
.sequencer-bottom button{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) 0;background:transparent;border:0;color:var(--text-muted);font-size:var(--text-xs)}
.sequencer-bottom button svg{width:var(--icon-small);height:var(--icon-small)}
.sequencer-bottom button:hover{color:var(--accent)}
.trainer-guide{border-top:var(--border-width) solid var(--border);padding-top:var(--space-8)}
.trainer-guide h3{font-size:var(--text-xl);line-height:var(--line-xl);margin:var(--space-6) 0 var(--space-7)}
.trainer-guide ol{padding-left:var(--space-6);margin:0;font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.trainer-guide li+li{margin-top:var(--space-6)}
.trainer-guide strong{font-weight:var(--weight-normal);color:var(--text)}
.trainer-guide .button{margin-top:var(--space-9)}
.audio-status{font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-top:var(--space-5);min-height:var(--line-xs)}
.trainer-warning{border-left:var(--space-1) solid var(--border);padding-left:var(--space-6);font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);margin-top:var(--space-9);max-width:var(--size-760)}
.trainer-patterns{margin-top:var(--space-12)}
.trainer-patterns .section-header h2{font-size:var(--text-xl);line-height:var(--line-xl)}
.pattern-grid{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:var(--border-width) solid var(--border);border-left:var(--border-width) solid var(--border)}
.pattern-card{padding:var(--space-8);text-align:left;background:transparent;border:0;border-right:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border)}
.pattern-card:hover{background:var(--surface)}
.mini-beats{display:flex;gap:var(--space-2);margin-bottom:var(--space-8)}
.mini-beats i{width:var(--space-4);height:var(--space-6);background:var(--surface-raised)}
.mini-beats i.on{background:var(--accent)}
.pattern-card h3{font-size:var(--text-lg);line-height:var(--line-lg);margin-bottom:var(--space-4)}
.pattern-card p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.glossary-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--size-280);gap:var(--space-9);align-items:start}
.glossary-search{width:100%;padding:var(--space-6) var(--space-7);border:var(--border-width) solid var(--border-input);background:var(--surface-input);border-radius:var(--radius-sm);font-size:var(--text-sm);line-height:var(--line-sm);margin-bottom:var(--space-8)}
.glossary-search::placeholder{color:var(--text-dim)}
.glossary-grid{display:grid;grid-template-columns:1fr 1fr;border-top:var(--border-width) solid var(--border);border-left:var(--border-width) solid var(--border)}
.term-card{padding:var(--space-8);border-right:var(--border-width) solid var(--border);border-bottom:var(--border-width) solid var(--border)}
.term-card h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-lg);line-height:var(--line-lg);margin-bottom:var(--space-5)}
.term-card h3 small{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);letter-spacing:0}
.term-card p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.controls-card{padding:var(--space-8);border:var(--border-width) solid var(--border);background:var(--surface)}
.controls-card h3{font-size:var(--text-xl);line-height:var(--line-xl);margin-bottom:var(--space-5)}
.controls-card>p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);margin-bottom:var(--space-8)}
.controls-card dl{margin:0 0 var(--space-7)}
.control-entry{padding:var(--space-6) 0;border-top:var(--border-width) solid var(--border)}
.control-entry dt{font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text)}
.control-entry kbd{display:inline-block;padding:var(--space-2) var(--space-4);border:var(--border-width) solid var(--border-input);border-radius:var(--radius-sm);background:var(--surface-input);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs)}
.control-entry dd{margin:var(--space-5) 0 0;font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.controls-card>a{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent)}
.data-tools{border-top:var(--border-width) solid var(--border);padding-top:var(--space-10);margin-top:var(--space-12)}
.data-tools h2{font-size:var(--text-xl);line-height:var(--line-xl);margin-bottom:var(--space-6)}
.data-tools>p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);max-width:var(--size-700)}
.data-tools-actions{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-8)}
.data-tools .danger-button{margin-left:auto;border-color:var(--danger);color:var(--danger)}
.data-tools .danger-button:hover{background:var(--danger-bg)}
.toast{position:fixed;bottom:var(--space-8);left:calc(50% + var(--sidebar-width)/2);transform:translateX(-50%);max-width:calc(100vw - var(--space-10));padding:var(--space-6) var(--space-8);background:var(--surface-raised);border:var(--border-width) solid var(--border-input);box-shadow:var(--shadow-pop);font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text);z-index:100}
.storage-warning{padding:var(--space-6) var(--space-7);border:var(--border-width) solid var(--warning);background:var(--warning-bg);color:var(--warning);font-size:var(--text-sm);line-height:var(--line-sm);margin-bottom:var(--space-8)}
.course-loaded-note{padding:var(--space-8);border:var(--border-width) solid var(--border);font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.screen-fallback{padding:var(--space-8);background:var(--image-bg);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim)}
.screen-fallback span{display:block;font-size:var(--text-lg);line-height:var(--line-lg);color:var(--accent);margin-bottom:var(--space-5)}
.design-section{border-top:var(--border-width) solid var(--border);padding-top:var(--space-9);margin-top:var(--space-12)}
.design-section>h2{font-size:var(--text-xl);line-height:var(--line-xl);margin-bottom:var(--space-8)}
.design-section>p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);margin-bottom:var(--space-8)}
.design-swatches{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--border-width) solid var(--border);border-left:var(--border-width) solid var(--border)}
.design-swatch{padding:var(--space-7);border-bottom:var(--border-width) solid var(--border);border-right:var(--border-width) solid var(--border)}
.design-swatch>i{display:block;height:var(--space-12);border:var(--border-width) solid var(--border);margin-bottom:var(--space-6)}
.design-swatch>strong{display:block;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);font-weight:var(--weight-normal)}
.design-swatch>span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-top:var(--space-2)}
.design-type-row{padding:var(--space-8) 0;border-top:var(--border-width) solid var(--border)}
.design-type-row>span{display:block;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.08em;color:var(--text-dim);margin-bottom:var(--space-7)}
.design-display{font-size:var(--text-display);line-height:var(--line-display);letter-spacing:-.06em}
.design-heading{font-size:var(--text-heading);line-height:var(--line-heading);letter-spacing:-.04em}
.design-body{font-size:var(--text-base);line-height:var(--line-base);color:var(--text-muted);max-width:var(--size-700)}
.design-mono{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.12em}
.design-row{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-8)}
.design-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.design-label{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-dim);margin-bottom:var(--space-5);display:block}
.design-focus{outline:var(--focus-width) solid var(--accent);outline-offset:var(--focus-offset)}
.design-hover{background:var(--surface-raised)!important;border-color:var(--accent)!important;color:var(--accent)!important}
.design-alert{padding:var(--space-7);border-left:var(--space-1) solid var(--success);background:var(--success-bg);font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);margin-bottom:var(--space-5)}
.design-alert strong{display:block;color:var(--success);font-weight:var(--weight-normal);margin-bottom:var(--space-4)}
.design-alert.danger{background:var(--danger-bg);border-color:var(--danger)}
.design-alert.danger strong{color:var(--danger)}
.design-alert.warning{background:var(--warning-bg);border-color:var(--warning)}
.design-alert.warning strong{color:var(--warning)}

@media(min-width:1700px){.hero-art{min-height:var(--size-510)}.device-image{max-height:var(--size-560)}.hero{padding-bottom:var(--space-12)}}
@media(max-width:1350px){
.hero h1{font-size:var(--space-13);line-height:var(--space-13)}.hero{min-height:var(--size-450)}.hero-art{min-height:var(--size-360)}.device-image{max-height:var(--size-400)}.curriculum>.section-header{flex-wrap:wrap}.curriculum-top{width:100%;justify-content:space-between}.lesson-layout{gap:var(--space-9);grid-template-columns:minmax(0,1fr) var(--size-210)}.trainer-layout{grid-template-columns:1fr}.trainer-guide{display:none}.site-footer{flex-wrap:wrap}.course-module{padding:var(--space-8)}
}
@media(max-width:1100px){
.sidebar{padding:var(--space-9) var(--space-6) var(--space-8)}.topbar-breadcrumb{display:none}.topbar-right{width:100%;justify-content:space-between}.hero h1{font-size:var(--space-12);line-height:var(--space-12)}.hero-art{min-height:var(--size-320)}.device-image{width:124%;max-height:var(--size-350)}.hero-intro{font-size:var(--text-sm);line-height:var(--line-sm)}.hero-actions{gap:var(--space-6);flex-wrap:wrap}.studio-spec{padding:var(--space-6)}.studio-spec strong{font-size:var(--text-base);line-height:var(--line-base)}.course-module-heading{grid-template-columns:1fr var(--size-64)}.module-screen{width:var(--size-64);height:var(--size-64)}.module-screen img{width:var(--size-56);height:var(--size-56)}.course-module h3{font-size:var(--text-lg);line-height:var(--line-lg)}.course-module-description{min-height:var(--space-12)}.module-lesson-row{font-size:var(--text-xs);line-height:var(--line-xs);gap:var(--space-4);grid-template-columns:var(--size-20) 1fr auto}.module-lesson-row .row-duration{gap:var(--space-4)}.lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-layout{grid-template-columns:1fr}.lesson-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9)}.lesson-tools{margin-top:var(--space-7)}.lesson-side-tip{display:none}.glossary-layout{grid-template-columns:1fr}.controls-card{margin-top:var(--space-8)}.controls-card dl{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-8)}.mini-beats{gap:var(--space-1)}.path-stage h3{font-size:var(--text-lg);line-height:var(--line-lg)}
}
@media(max-width:800px){
.sidebar{transform:translateX(-100%);visibility:hidden;transition:transform var(--motion-base) var(--ease),visibility var(--motion-base);padding:var(--space-9) var(--space-7) var(--space-8)}.sidebar.open{transform:translateX(0);visibility:visible}.sidebar-scrim{position:fixed;inset:0;background:var(--image-bg);opacity:.75;z-index:29}.workspace{margin-left:0}.topbar{height:var(--space-12);padding:0 var(--space-8);gap:var(--space-6)}.menu-toggle{display:grid;flex:none}.topbar-right{gap:var(--space-6)}.search-form input{width:var(--size-170)}.search-form kbd{display:none}main{padding:var(--space-10) var(--space-8) var(--space-12)}.hero{min-height:var(--size-440);padding-top:var(--space-5);padding-bottom:var(--space-10)}.hero h1{font-size:var(--space-12);line-height:var(--space-12)}.hero-art{min-height:var(--size-330)}.device-image{max-height:var(--size-350);width:124%}.studio-specs{margin-bottom:var(--space-12)}.studio-spec{padding:var(--space-6)}.learning-path{margin-bottom:var(--space-12)}.course-module h3{font-size:var(--text-xl);line-height:var(--line-xl)}.course-module-description{min-height:var(--space-11)}.module-lesson-row{font-size:var(--text-sm);line-height:var(--line-sm)}.site-footer{padding:var(--space-8)}.toast{left:50%}.glossary-layout{gap:var(--space-8)}.design-swatches{grid-template-columns:repeat(3,1fr)}.design-display{font-size:var(--space-12);line-height:var(--space-12)}
}
@media(max-width:640px){
.topbar{padding:0 var(--space-7);gap:var(--space-5)}.search-form{gap:var(--space-4)}.search-form input{width:var(--size-145)}.local-badge span{display:none}main{padding:var(--space-9) var(--space-7) var(--space-12)}.hero{grid-template-columns:1fr;min-height:0;padding-top:0;padding-bottom:var(--space-9);overflow:visible}.hero h1{font-size:var(--space-12);line-height:var(--space-12);margin-top:var(--space-8)}.hero-intro{font-size:var(--text-base);line-height:var(--line-base);max-width:var(--size-420)}.hero-actions{margin-top:var(--space-8);gap:var(--space-7)}.hero-art{min-height:var(--size-310);margin-top:var(--space-9)}.device-image{width:110%;max-height:var(--size-310)}.hero-label{top:0;right:0}.hero-index{left:0;top:0}.hero-device-label{bottom:0;right:0}.studio-specs{grid-template-columns:1fr 1fr;margin-top:var(--space-5);margin-bottom:var(--space-11)}.studio-spec{padding:var(--space-7)}.studio-spec:nth-child(3){border-left:0;border-top:var(--border-width) solid var(--border)}.studio-spec:nth-child(4){border-top:var(--border-width) solid var(--border)}.studio-spec strong{font-size:var(--text-lg);line-height:var(--line-lg)}.section-header{flex-wrap:wrap;gap:var(--space-6);margin-bottom:var(--space-8)}.learning-path{grid-template-columns:1fr;margin:var(--space-8) 0 var(--space-11)}.path-stage{padding:var(--space-7) 0;border-left:0;border-top:var(--border-width) solid var(--border)}.path-stage:first-child{border-top:0}.path-stage h3{margin-top:var(--space-5);font-size:var(--text-xl);line-height:var(--line-xl)}.path-stage p{max-width:90%}.path-stage>svg{right:0;top:var(--space-7)}.curriculum-top{padding:0;flex-wrap:wrap;gap:var(--space-6)}.segmented{width:100%}.segmented button{flex:1;padding:var(--space-4) var(--space-5)}.module-matrix{grid-template-columns:1fr}.course-module{padding:var(--space-8)}.course-module-heading{grid-template-columns:1fr var(--size-72)}.module-screen{width:var(--size-72);height:var(--size-72)}.module-screen img{width:var(--size-64);height:var(--size-64)}.course-module h3{font-size:var(--text-xl);line-height:var(--line-xl)}.course-module-description{min-height:0;margin-bottom:var(--space-8)}.module-lesson-row{font-size:var(--text-sm);line-height:var(--line-sm);grid-template-columns:var(--size-24) 1fr auto;gap:var(--space-5)}.course-note{padding:var(--space-8) 0;margin-top:var(--space-6)}.overview-bottom-tools{flex-direction:column;align-items:flex-start;gap:var(--space-5)}.site-footer{padding:var(--space-8) var(--space-7);gap:var(--space-6);align-items:flex-start;flex-direction:column}.footer-links{flex-wrap:wrap;gap:var(--space-6)}.page-heading{padding-bottom:var(--space-9)}.filter-row{gap:var(--space-4);margin-bottom:var(--space-8)}.filter-pill{padding:var(--space-4)}.lesson-grid{grid-template-columns:1fr}.lesson-card{display:grid;grid-template-columns:var(--size-120) minmax(0,1fr)}.lesson-card-visual{height:100%;padding:var(--space-5);min-height:var(--size-195)}.lesson-card-visual img{width:var(--size-96);height:var(--size-96)}.lesson-card-index{left:var(--space-5)}.lesson-card-complete{right:var(--space-5);top:auto;bottom:var(--space-5)}.lesson-card-body{padding:var(--space-7) var(--space-6)}.lesson-card-module{margin-bottom:var(--space-4)}.lesson-card-description{margin-top:var(--space-4)}.lesson-card-footer{margin-top:var(--space-6);padding-top:var(--space-4)}.breadcrumb{margin-bottom:var(--space-9)}.lesson-layout{gap:var(--space-10)}.lesson-heading{padding-bottom:var(--space-8)}.lesson-overline{gap:var(--space-5);margin-bottom:var(--space-6)}.lesson-figure{margin:var(--space-8) 0}.lesson-image-frame{padding:var(--space-8)}.lesson-figure figcaption{flex-direction:column;gap:var(--space-4)}.goal-block{grid-template-columns:1fr;margin:var(--space-8) 0 var(--space-10)}.goal-card{padding:var(--space-7)}.article-section{margin-top:var(--space-10)}.article-section>h2{margin-bottom:var(--space-7)}.lesson-step{grid-template-columns:var(--size-24) minmax(0,1fr);gap:var(--space-5);padding:var(--space-7) 0}.practice-box{padding:var(--space-7);margin-top:var(--space-10)}.quiz-box{padding:var(--space-7)}.quiz-option{padding:var(--space-5)}.tip-columns{grid-template-columns:1fr;gap:var(--space-8);margin-top:var(--space-10)}.notes-label{flex-direction:column;gap:var(--space-4)}.completion-block{flex-direction:column;align-items:flex-start;padding:var(--space-7);margin:var(--space-10) 0 var(--space-8)}.completion-block .button{width:100%}.lesson-navigation{gap:var(--space-6)}.lesson-sidebar{grid-template-columns:1fr;gap:var(--space-5)}.lesson-tools{grid-template-columns:1fr 1fr;margin-top:0;gap:var(--space-5)}.lesson-map h3{font-size:var(--text-xl);line-height:var(--line-xl)}.sequencer-head{padding:var(--space-7);gap:var(--space-5);flex-wrap:wrap}.sequencer-grid-wrap{padding:var(--space-8) var(--space-7) var(--space-6)}.sequencer-controls{padding:var(--space-7);gap:var(--space-6)}.transport button{padding:var(--space-5)}.bpm-control{width:100%;justify-content:space-between;border-top:var(--border-width) solid var(--border);padding-top:var(--space-6)}.sequencer-bottom{padding:var(--space-6) var(--space-7)}.sequencer-bottom>span{max-width:var(--size-190)}.trainer-warning{margin-top:var(--space-8)}.trainer-patterns{margin-top:var(--space-10)}.pattern-grid{grid-template-columns:1fr}.pattern-card{padding:var(--space-7)}.mini-beats{gap:var(--space-2);margin-bottom:var(--space-6)}.glossary-grid{grid-template-columns:1fr}.term-card,.controls-card{padding:var(--space-7)}.controls-card dl{grid-template-columns:1fr}.data-tools{margin-top:var(--space-10);padding-top:var(--space-9)}.data-tools .danger-button{margin-left:0}.toast{bottom:var(--space-7);width:max-content;max-width:calc(100vw - var(--space-10));padding:var(--space-5) var(--space-7)}.design-section{margin-top:var(--space-10);padding-top:var(--space-8)}.design-swatches{grid-template-columns:repeat(2,1fr)}.design-two{grid-template-columns:1fr}.design-display{font-size:var(--space-12);line-height:var(--space-12)}
}
/* REPLICA / black-2: геометрия референса пользователя в чёрной теме. */
.workspace{margin-left:0}
.sidebar{visibility:hidden;transform:translateX(-100%);width:min(var(--sidebar-width),85vw);transition:transform var(--motion-base) var(--ease),visibility var(--motion-base)}
.sidebar.open{visibility:visible;transform:translateX(0)}
.sidebar-scrim{position:fixed;inset:0;background:var(--image-bg);opacity:.35;z-index:29}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-9);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em}
.site-header{height:var(--header-height);padding:0 var(--page-gutter);position:relative;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);width:100%;height:100%;max-width:var(--page-max);margin:auto}
.header-brand-group{display:flex;align-items:center;gap:var(--space-8);white-space:nowrap}
.header-brand-group .brand{font-family:var(--font-mono);font-weight:var(--weight-normal);font-size:var(--header-brand-size);line-height:1;letter-spacing:.045em}
.header-brand-group .brand-symbol{display:none}
.course-badge{border:var(--border-width) solid var(--border-input);padding:var(--space-1) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.08em}
.header-nav{display:flex;align-items:center;gap:var(--space-9);margin-left:auto}
.header-nav a{display:inline-flex;align-items:center;height:var(--button-md);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--line-sm);letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);padding:0;white-space:nowrap}
.header-nav a.active{color:var(--text);box-shadow:0 var(--border-width) 0 var(--text)}
.header-nav a:hover{color:var(--text)}
.utility-bar{height:var(--utility-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--page-gutter);gap:var(--space-7);max-width:var(--page-max);margin:auto}
.topbar-breadcrumb{display:block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.035em}
.utility-right{display:flex;align-items:center;gap:var(--space-8);width:auto}
body[data-page="overview"] .utility-bar{display:none}
.search-form input{font-size:var(--text-xs);width:var(--size-190)}
.local-badge{display:none}
main{padding:var(--space-4) var(--page-gutter) var(--space-14);max-width:var(--page-max);overflow:clip}
.hero{display:block;min-height:var(--hero-height);padding:0 0 var(--space-11);position:relative;overflow:clip;margin-right:calc(var(--page-gutter)*-1)}
.hero-eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);letter-spacing:.055em;text-transform:uppercase;color:var(--text-dim);position:relative;z-index:2}
.hero-eyebrow:before{display:none}
.hero h1{position:relative;z-index:2;font-size:var(--hero-display);line-height:var(--hero-leading);letter-spacing:var(--hero-tracking);font-weight:var(--weight-normal);margin:var(--space-4) 0 var(--space-10)}
.hero h1>span{display:block;color:var(--text);white-space:nowrap}
.hero-lower{position:relative;z-index:1;display:block}
.hero-copy{position:relative;z-index:2;max-width:var(--hero-copy-width);min-width:var(--size-350)}
.hero-intro{font-size:var(--hero-intro-size);line-height:var(--hero-intro-line);color:var(--text);max-width:none}
.hero-actions,.hero-actions-vertical{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);margin-top:var(--space-10)}
.hero-actions .button{min-height:var(--hero-button-height);font-family:var(--font-sans);font-size:var(--hero-button-size);line-height:1.2;padding:var(--space-6) var(--space-8)}
.hero-actions .button svg{width:var(--icon-size);height:var(--icon-size)}
.hero-actions .text-link{font-size:var(--text-base);line-height:var(--line-base);margin-top:var(--space-2);border-bottom:var(--border-width) solid var(--border)}
.hero-note{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);margin-top:var(--space-7);max-width:var(--size-470)}
.hero-motion-toggle{border:0;border-bottom:var(--border-width) solid var(--border);padding:var(--space-2) 0;background:transparent;color:var(--text-dim);font-size:var(--text-xs);margin-top:var(--space-5)}
.hero-art{position:absolute;display:block;left:calc(var(--hero-art-left) - var(--page-gutter));top:calc(var(--hero-art-top) - var(--space-10) - var(--hero-display)*var(--hero-leading)*2 - var(--space-4) - var(--line-xs));width:var(--hero-art-width);aspect-ratio:var(--hero-image-ratio);min-height:0;margin:0;z-index:0;pointer-events:none}
.device-image{display:block;width:100%;height:auto;max-height:none;max-width:none;position:absolute;inset:0;filter:none;-webkit-mask-image:linear-gradient(to right,transparent,var(--image-bg) var(--hero-shadow-fade));mask-image:linear-gradient(to right,transparent,var(--image-bg) var(--hero-shadow-fade))}
.hero-device-label,.hero-label,.hero-index{display:none}
.hero-screen-record{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.button.primary:hover,.button.blue:hover{background:var(--hover-primary);border-color:var(--hover-primary);color:var(--on-accent)}
.button.secondary:hover{background:var(--surface-raised);border-color:var(--text);color:var(--text)}
.page-heading{max-width:none;padding-top:var(--space-9);padding-bottom:var(--space-11)}
.page-heading h1{font-size:var(--page-title-size);line-height:.95;letter-spacing:var(--hero-tracking);max-width:100%}
.section-header h2{font-size:var(--section-title-size);line-height:1;letter-spacing:var(--hero-tracking)}
.section-header p{font-size:var(--text-base);line-height:var(--line-base)}
.studio-specs{border-left:0;border-right:0;margin-top:var(--space-9);margin-bottom:var(--space-15)}
.studio-spec{padding:var(--space-8)}
.studio-spec:first-child{padding-left:0}
.module-matrix{margin-bottom:var(--space-15)}
.course-module{padding:var(--space-10);background:transparent}
.course-module h3{font-size:var(--text-heading);line-height:var(--line-heading)}
.course-module-description{font-size:var(--text-base);line-height:var(--line-base);max-width:var(--size-560);min-height:0}
.module-lesson-row{font-size:var(--text-base);line-height:var(--line-base)}
.lesson-card-index{color:var(--on-image)}
.lesson-card-complete{color:var(--on-image);border-color:var(--image-muted)}
.lesson-layout{max-width:var(--reading-max);margin:var(--space-8) auto 0;grid-template-columns:minmax(0,var(--article-width)) var(--rail-width)}
.lesson-heading h1{font-size:var(--text-heading);line-height:1.05}
.lesson-image-frame{background:var(--image-bg)}
.sequencer{background:var(--surface-input)}
.seq-step[data-lane=snare][aria-pressed=true]{background:var(--success);border-color:var(--success)}
.seq-step[data-lane=hat][aria-pressed=true]{background:var(--text-dim);border-color:var(--text-dim)}
.toast{left:50%}
.demo-section{margin-top:var(--space-15);padding-top:var(--space-11);border-top:var(--border-width) solid var(--border)}
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-9)}
.demo-card{margin:0;min-width:0;border-top:var(--border-width) solid var(--border);background:transparent}
.demo-media{display:flex;align-items:center;justify-content:center;position:relative;min-height:var(--demo-screen-size);padding:var(--space-10);background:var(--image-bg)}
.demo-animation{display:block;width:var(--size-240);height:var(--size-240);max-width:100%;object-fit:contain;image-rendering:pixelated}
.demo-copy{padding:var(--space-8) 0}
.demo-copy h3{font-size:var(--text-xl);line-height:var(--line-xl);margin:var(--space-5) 0 var(--space-6)}
.demo-copy p{font-size:var(--text-base);line-height:var(--line-base);color:var(--text-muted)}
.demo-overline{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
.demo-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6);margin-top:var(--space-7)}
.demo-source{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);border-bottom:var(--border-width) solid var(--border)}
.demo-toggle{position:absolute;right:var(--space-6);bottom:var(--space-6);border:var(--border-width) solid var(--image-muted);background:var(--image-bg);color:var(--on-image);font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-4) var(--space-5)}
.lesson-demo-strip{margin-top:var(--space-11)}
.lesson-demo-strip .demo-grid{grid-template-columns:1fr}
.lesson-demo-strip .demo-card{display:grid;grid-template-columns:var(--size-320) minmax(0,1fr);gap:var(--space-8)}
.lesson-demo-strip .demo-copy{padding-top:var(--space-7)}
.design-display{font-size:var(--hero-display);line-height:var(--hero-leading)}
@media(max-width:1100px){
  .header-nav{gap:var(--space-7)}.course-badge{display:none}
  .hero-copy{max-width:40%;min-width:var(--size-320)}.hero h1{font-size:var(--hero-display);line-height:var(--hero-leading)}
  .lesson-layout{grid-template-columns:1fr;max-width:var(--article-width)}.demo-grid{grid-template-columns:1fr 1fr}.lesson-demo-strip .demo-card{grid-template-columns:var(--size-280) minmax(0,1fr)}
  .course-module h3{font-size:var(--text-xl);line-height:var(--line-xl)}.course-module{padding:var(--space-8)}.module-lesson-row{font-size:var(--text-sm);line-height:var(--line-sm)}
}
@media(max-width:800px){
  .header-nav{display:none}.menu-toggle{display:grid;flex:none}.header-brand-group{gap:var(--space-5)}.header-inner{gap:var(--space-5)}.utility-right{gap:var(--space-5)}.search-form kbd{display:none}.topbar-breadcrumb{font-size:var(--text-xs)}
  main{padding:var(--space-4) var(--page-gutter) var(--space-12)}.hero{min-height:0;padding:0 0 var(--space-9)}.hero h1{font-size:var(--mobile-hero-display);line-height:1.02;margin:var(--space-8) 0 var(--space-8)}.hero h1>span{white-space:normal}.hero-copy{max-width:100%;min-width:0}.hero-intro{font-size:var(--text-lg);line-height:var(--line-lg);max-width:var(--size-470)}
  .hero-actions{margin-top:var(--space-8)}.hero-actions .button{min-height:var(--button-lg);font-size:var(--text-base)}.hero-actions .text-link{font-size:var(--text-sm)}.hero-art{position:relative;left:var(--mobile-art-offset);top:auto;width:var(--mobile-art-width);height:auto;aspect-ratio:var(--hero-image-ratio);margin-top:calc(var(--space-8)*-1);min-height:0}.device-image{width:100%;max-height:none}.hero-device-label{display:none}
  .studio-specs{margin-top:0;margin-bottom:var(--space-12)}.studio-spec strong{font-size:var(--text-base);line-height:var(--line-base)}.studio-spec{padding:var(--space-6)}.page-heading h1{font-size:var(--mobile-page-title-size);line-height:1;overflow-wrap:anywhere}.page-heading{padding-top:var(--space-7)}.section-header h2{font-size:var(--text-heading);line-height:1.05}.demo-grid{grid-template-columns:1fr}.demo-section{margin-top:var(--space-12)}.lesson-demo-strip .demo-card{display:block}.lesson-demo-strip .demo-copy{padding:var(--space-7) 0}.lesson-layout{margin-top:var(--space-6)}
}
@media(max-width:640px){
  .utility-bar{height:auto;min-height:var(--utility-height);flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-4);padding-bottom:var(--space-4)}.topbar-breadcrumb{font-size:var(--text-xs)}.utility-right{margin-left:auto}.search-form input{width:var(--size-145)}.header-brand-group .brand{font-size:var(--text-lg);letter-spacing:.015em}.hero-eyebrow{margin-top:var(--space-6);max-width:var(--size-280)}
  .hero h1{font-size:var(--mobile-hero-display)}.hero-art{margin-top:var(--space-6);margin-bottom:calc(var(--space-11)*-1)}.studio-specs{grid-template-columns:1fr 1fr}.studio-spec:nth-child(3){padding-left:0}.course-module{padding:var(--space-7)}.course-module h3{font-size:var(--text-xl);line-height:var(--line-xl)}.course-module-description{font-size:var(--text-sm);line-height:var(--line-sm)}.module-matrix{margin-bottom:var(--space-12)}.module-lesson-row{font-size:var(--text-sm)}.demo-media{padding:var(--space-8)}.demo-copy h3{font-size:var(--text-xl)}.site-footer{padding:var(--space-8) var(--page-gutter)}
}
.header-account{display:inline-flex;align-items:center;justify-content:center;flex:none;height:var(--button-md);padding:0 var(--space-7);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--line-sm);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;color:var(--text);background:transparent;border:var(--border-width) solid var(--border-input)}
.header-account:hover,.header-account:focus-visible{border-color:var(--text)}
.support-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:var(--space-5) var(--page-gutter);border-bottom:var(--border-width) solid var(--border);max-width:var(--page-max);margin:auto}
.support-open{display:flex;align-items:center;gap:var(--space-6);text-align:left;background:transparent;color:var(--text);border:0;padding:0;min-width:0}
.support-open img{width:var(--support-qr-size);height:var(--support-qr-size);padding:var(--space-2);background:var(--support-qr-bg);object-fit:contain;image-rendering:pixelated;flex:none}
.support-open strong{display:block;font-size:var(--text-sm);line-height:var(--line-sm);font-weight:var(--weight-medium)}
.support-open small{display:block;font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-muted);margin-top:var(--space-2)}
.support-action{white-space:nowrap;color:var(--text);border-bottom:var(--border-width) solid var(--border-input)}
.account-sync{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-muted);max-width:var(--size-280);text-align:right}
.donation-dialog{position:fixed;margin:auto;padding:var(--space-9);border:var(--border-width) solid var(--border-input);background:var(--bg);color:var(--text);width:calc(100% - var(--space-9));max-width:var(--account-width);max-height:calc(100% - var(--space-9));overflow:auto}
.donation-dialog::backdrop{background:var(--image-bg);opacity:.85}
.donation-dialog h2{font-size:var(--text-heading);line-height:1.05;margin:var(--space-6) 0}
.donation-dialog p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.donation-close{position:absolute;right:var(--space-5);top:var(--space-5)}
.donation-qr-frame{background:var(--support-qr-bg);padding:var(--space-8);width:fit-content;max-width:100%;margin:var(--space-8) auto}
.donation-qr-frame img{display:block;width:var(--donation-qr-size);height:auto;max-width:100%;image-rendering:pixelated}
.donation-note{margin-bottom:var(--space-6)}
.account-heading h1{max-width:var(--reading-max);font-size:var(--section-title-size);line-height:1.05}
.account-layout{display:grid;grid-template-columns:minmax(0,var(--account-width)) minmax(0,var(--size-400));gap:var(--space-13);max-width:var(--reading-max);margin:0 auto}
.account-panel,.account-aside{border-top:var(--border-width) solid var(--border);padding-top:var(--space-8);min-width:0}
.account-panel h2,.account-aside h2{font-size:var(--text-xl);line-height:var(--line-xl);margin-bottom:var(--space-7)}
.account-email{overflow-wrap:anywhere;margin-top:var(--space-6)}
.account-tabs{display:flex;gap:var(--space-5);margin-bottom:var(--space-8)}
.account-tabs [aria-pressed=true]{border-color:var(--text);color:var(--text)}
.account-form{display:grid;gap:var(--space-5)}
.account-form label{font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--line-xs);color:var(--text-muted);margin-top:var(--space-4)}
.account-form input{width:100%;min-height:var(--button-lg);padding:var(--space-5) var(--space-6);background:var(--surface-input);border:var(--border-width) solid var(--border-input);color:var(--text);font-size:var(--text-base)}
.account-form .button{justify-self:start;margin-top:var(--space-4)}
.account-help,.account-aside p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted)}
.account-feedback{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);min-height:var(--line-sm)}
.account-actions{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap;margin-top:var(--space-7)}
.account-aside ol{padding-left:var(--space-7);margin:var(--space-7) 0 var(--space-8)}
.account-aside li{padding-bottom:var(--space-6);font-size:var(--text-base);line-height:var(--line-base)}
.account-aside p+p{margin-top:var(--space-6)}
.account-conflict,.account-transfer,.account-password-change{border-top:var(--border-width) solid var(--border);padding-top:var(--space-8);margin-top:var(--space-9)}
.account-conflict h3,.account-transfer h3{font-size:var(--text-lg);line-height:var(--line-lg);margin-bottom:var(--space-5)}
.account-conflict p,.account-transfer p{font-size:var(--text-sm);line-height:var(--line-sm);color:var(--text-muted);margin-bottom:var(--space-6)}
.account-conflict .button{display:flex;margin-top:var(--space-5)}
.account-password-change summary{cursor:pointer;font-size:var(--text-sm);margin-bottom:var(--space-6)}
@media(max-width:800px){.account-layout{grid-template-columns:1fr;gap:var(--space-10)}.account-sync{display:none}.support-strip{padding-top:var(--space-4);padding-bottom:var(--space-4)}.support-open img{width:var(--support-qr-mobile-size);height:var(--support-qr-mobile-size)}.header-account{margin-left:auto;padding:0 var(--space-5);font-size:var(--text-xs)}}
@media(max-width:640px){.header-inner{gap:var(--space-5)}.support-open{gap:var(--space-5)}.support-open small{max-width:var(--size-220)}.donation-dialog{padding:var(--space-7)}.donation-dialog h2{font-size:var(--text-xl)}.donation-qr-frame{padding:var(--space-7)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{
.utility-bar,.demo-toggle,.hero-motion-toggle,.lesson-demo-strip,.support-strip,.donation-dialog{display:none!important}
body{background:white!important;color:black!important;font-size:11pt;line-height:1.5}.sidebar,.topbar,.site-footer,.sidebar-scrim,.toast,.lesson-sidebar,.lesson-navigation,.completion-block,.notes-label span,.button,.quiz-options,.quiz-feedback,.skip-link{display:none!important}.workspace{margin:0}main{padding:0;max-width:100%;min-height:0}.lesson-layout{display:block}.lesson-heading h1{font-size:27pt;line-height:1.2;color:black}.lesson-heading p,.step-content p,.goal-card p,.practice-box p,.tip-panel ul,.checklist span,.source-list,.step-content h3,.practice-box h3,.article-section>h2{color:black!important}.lesson-heading,.goal-card,.practice-box,.quiz-box,.checklist label,.lesson-image-frame{border-color:gray!important;background:white!important}.lesson-figure{break-inside:avoid}.lesson-image-frame{max-height:var(--size-220);padding:var(--size-12)}.lesson-image-frame img{max-height:var(--size-190)}.goal-block{grid-template-columns:1fr 1fr}.lesson-step,.practice-box,.tip-panel,.quiz-box{break-inside:avoid}.notes-input{border:var(--size-1) solid gray;background:white;color:black;height:var(--size-100);min-height:var(--size-100)}.source-list a{text-decoration:underline;font-size:9pt}.source-list a:after{content:" (" attr(href) ")";font-size:8pt;overflow-wrap:anywhere}.breadcrumb{font-size:9pt}.article-section>h2{font-size:18pt}.step-content h3{font-size:13pt}.lesson-overline{color:black}.checklist input{print-color-adjust:exact}.lesson-figure figcaption{font-size:8pt}.tip-columns{grid-template-columns:1fr 1fr}.step-content p,.goal-card p,.practice-box p{font-size:10pt}.goal-card>span,.practice-label,.step-number,.lesson-overline>span:first-child{color:black!important}.notes-label,.source-version,.lesson-figure figcaption a{color:black}
}