@font-face{font-family:'DM Sans';src:url('./assets/dm-sans.ttf') format('truetype');font-weight:100 1000;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('./assets/barlow-condensed-medium.ttf') format('truetype');font-weight:500;font-display:swap}
:root{color-scheme:dark;--paper:#181613;--ink:#f6ede0;--accent:#eeb06f;--muted:#b8a998;--line:#42382e;--soft:#241f1a;--display:'Barlow Condensed','Arial Narrow',sans-serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:wait}a{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}button{transition:background .18s,color .18s,border-color .18s}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.site-header{max-width:1600px;margin:auto;min-height:86px;padding:17px 4%;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-family:var(--display);font-size:34px;letter-spacing:6px;font-weight:500;line-height:1;text-decoration:none}.brand span{font-family:var(--sans);font-size:12px;letter-spacing:0;vertical-align:top;margin-left:3px}.header-center{color:var(--accent);font-size:12px;letter-spacing:2.4px}.text-button{background:none;border:0;padding:12px 0;font-size:14px;display:flex;align-items:center;gap:20px}.text-button:hover{color:var(--accent)}.text-button span{font-size:23px}main{max-width:1600px;margin:auto;padding:0 4%}.patterns-panel{display:flex;align-items:center;gap:36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.panel-label{font-size:12px;letter-spacing:1.6px;color:var(--muted);max-width:100px;line-height:1.7;flex-shrink:0}#patterns{display:flex;flex:1;min-width:0;justify-content:space-between;gap:12px}.pattern-card{display:flex;align-items:center;gap:12px;position:relative;text-align:left;border:0;border-bottom:2px solid transparent;background:none;padding:12px 10px;color:var(--muted);min-height:88px}.pattern-card img{width:60px;height:60px;object-fit:contain;border:4px solid #d5c9b8;border-radius:50%;box-shadow:0 2px 8px #0006;filter:brightness(.84);transition:filter .2s,transform .2s;flex-shrink:0}.pattern-card:hover img,.pattern-card.active img{filter:brightness(1);transform:translateY(-2px)}.pattern-card:hover{color:var(--ink)}.pattern-card.active{border-bottom-color:var(--accent);color:var(--accent)}.pattern-name,.pattern-level{display:block}.pattern-name{font-size:16px;white-space:nowrap}.pattern-level{font-size:12px;color:var(--muted);margin-top:5px}.pattern-check{display:none}
.studio{margin-top:14px}.studio-layout{display:grid;grid-template-columns:minmax(280px,32%) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:24px;position:relative;min-height:520px}.lesson-intro{grid-column:1;grid-row:1;padding:30px 0 24px;position:relative;z-index:1}.lesson-heading{display:flex;align-items:center;gap:22px;font-size:12px;letter-spacing:1.7px;color:var(--muted)}#lesson-number{color:var(--accent)}.eyebrow{font-size:12px;letter-spacing:1.5px;line-height:1.6}h1{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(64px,6.8vw,106px);line-height:.95;letter-spacing:-1.5px;margin:24px 0 20px;max-width:450px;text-wrap:balance}.lesson-description{font-size:16px;line-height:1.65;color:var(--muted);max-width:355px;margin:0 0 19px}.lesson-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}#difficulty{color:var(--accent);border:1px solid #eeb06f42;padding:5px 9px;border-radius:3px}.lesson-instruction{grid-column:1;grid-row:2;padding:10px 0 32px;align-self:end;position:relative;z-index:1}.pour-callout{border-left:2px solid var(--accent);padding-left:20px;max-width:370px}#callout-kicker{font-size:12px;line-height:1.6;letter-spacing:1.25px;color:var(--accent);display:block}.pour-callout h2{font-size:23px;line-height:1.3;font-weight:500;letter-spacing:-.4px;margin:11px 0}#step-detail{font-size:16px;line-height:1.65;color:var(--muted);margin:0}.step-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.step-facts span{border:1px solid var(--line);border-radius:3px;padding:5px 8px;font-size:12px;color:var(--muted)}
.stage{grid-column:2;grid-row:1/3;position:relative;min-height:520px;min-width:0;isolation:isolate;background:radial-gradient(ellipse at 55% 48%,#88603930,transparent 68%)}#scene{position:absolute;inset:24px 0 40px;width:100%;height:calc(100% - 64px);display:block;cursor:grab;touch-action:none}#scene:active{cursor:grabbing}.stage-top{position:absolute;top:17px;left:20px;right:0;display:flex;align-items:center;justify-content:space-between;gap:15px;z-index:2}.live-label{font-size:12px;color:var(--muted);letter-spacing:1.5px;white-space:nowrap}.camera-controls{display:flex;padding:4px;border:1px solid var(--line);border-radius:30px;background:#181613b3}.camera-controls button{background:none;border:0;border-radius:24px;padding:8px 12px;font-size:14px;color:var(--muted);min-height:36px}.camera-controls button:hover{color:var(--ink)}.camera-controls button.selected{background:#eeb06f;color:var(--paper)}.stage-bottom{position:absolute;bottom:18px;left:20px;right:0;display:flex;align-items:center;justify-content:space-between;z-index:2;color:var(--muted)}#orbit-hint{display:flex;align-items:center;gap:9px;font-size:13px}.icon-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:none;width:44px;height:44px;border-radius:50%;padding:10px;flex-shrink:0}.icon-button:hover{color:var(--accent);background:var(--soft)}#reset-view{border-color:var(--line)}.loading{position:absolute;inset:60px 0;display:flex;align-items:center;justify-content:center;gap:16px;flex-direction:column;background:var(--paper);z-index:3;color:var(--muted);font-size:14px;text-align:center;padding:24px}.loading button{background:var(--accent);color:var(--paper);padding:12px 20px;border:0}.loading-ring{height:26px;width:26px;border:1px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.player{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;display:flex;align-items:center;gap:30px}.playback-buttons{display:flex;align-items:center;gap:10px}.play-button{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--accent);color:var(--paper);border:0;border-radius:4px;min-width:174px;min-height:50px;padding:14px 18px;font-size:14px;font-weight:500}.play-button:hover{background:#ffd09a}.play-button svg{width:17px;height:17px;fill:currentColor;stroke:0}.progress-control{flex:1;min-width:0}.progress-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--muted);font-size:12px;letter-spacing:1px}.time-display{font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--ink);white-space:nowrap}.time-display span{color:var(--muted)}.timeline{--progress:0%;appearance:none;display:block;width:100%;height:24px;margin:8px 0 3px;background:transparent;cursor:pointer;accent-color:var(--accent)}.timeline::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--progress),var(--line) var(--progress))}.timeline::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;margin-top:-4px;background:var(--accent)}.timeline::-moz-range-track{height:3px;background:var(--line)}.timeline::-moz-range-progress{height:3px;background:var(--accent)}.timeline::-moz-range-thumb{height:11px;width:11px;border:0;border-radius:50%;background:var(--accent)}.timeline-labels{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);letter-spacing:.5px}.speed-control{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}.speed-control select{padding:10px 8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:3px;min-height:44px;cursor:pointer}.steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--line)}.step{display:flex;align-items:center;gap:18px;text-align:left;border:0;border-right:1px solid var(--line);border-top:2px solid transparent;background:none;padding:26px 20px;color:var(--muted);min-width:0}.step:last-child{border-right:0}.step-index{font-family:var(--display);font-size:38px;font-weight:500;line-height:1;color:#918171}.step-title{font-size:14px;line-height:1.5;max-width:145px}.step.active{color:var(--accent);border-top-color:var(--accent);background:#eeb06f06}.step.active .step-index{color:var(--accent)}.step:hover{background:var(--soft);color:var(--ink)}.coach-note{padding:28px 0;display:flex;align-items:baseline;gap:30px;border-bottom:1px solid var(--line)}.coach-note>.eyebrow{color:var(--accent);white-space:nowrap}.coach-note p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;max-width:800px}.studio-footer{display:flex;justify-content:space-between;gap:20px;padding:25px 0 30px;font-size:12px;letter-spacing:1px;color:var(--muted)}
#basics{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:8px;width:min(800px,calc(100% - 36px));max-height:85dvh;padding:30px 36px;box-shadow:0 20px 100px #0008}#basics::backdrop{background:#080705b8;backdrop-filter:blur(8px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;color:var(--accent)}#basics h2{font-family:var(--display);font-size:52px;font-weight:500;text-transform:uppercase;line-height:1.05;margin:20px 0 10px}.dialog-intro{color:var(--muted);line-height:1.7;margin:0 0 30px}.basics-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.basics-grid section>span{font-family:var(--display);font-size:26px;color:var(--accent)}#basics h3{font-size:18px;font-weight:500;margin:10px 0}.basics-grid p,.troubleshooting p{font-size:16px;color:var(--muted);line-height:1.75;margin:0}.troubleshooting{border-top:1px solid var(--line);margin-top:28px;padding:16px 0}.troubleshooting p{margin:8px 0}.troubleshooting b{color:var(--ink);font-weight:500}.source-note{border-top:1px solid var(--line);padding-top:20px;margin-top:10px;font-size:13px;line-height:1.7;color:var(--muted)}.source-note a{color:var(--accent);text-underline-offset:3px}
@media(min-width:1500px){.studio-layout,.stage{min-height:530px}}
@media(max-width:1100px){.panel-label{display:none}.pattern-card{padding:16px 4px;gap:9px}.pattern-card img{width:48px;height:48px}.studio-layout{grid-template-columns:minmax(260px,34%) minmax(0,1fr);gap:0 12px}.lesson-heading{gap:15px;letter-spacing:1px}.stage-top{left:10px}.live-label{display:none}.stage-top{justify-content:flex-end}.step{padding:22px 12px;gap:12px}.step-index{font-size:32px}.player{gap:20px}.speed-control>span{display:none}.lesson-instruction{padding-bottom:28px}}
@media(max-width:760px){.site-header{min-height:86px;padding:20px 5%;gap:14px}.header-center{display:none}main{padding:0 5%}.patterns-panel{margin:0 -5.56%;padding:0 5%;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}#patterns{gap:22px;justify-content:flex-start}.pattern-card{flex-shrink:0;padding:14px 0;min-height:88px}.pattern-card img{width:48px;height:48px}.pattern-name{font-size:14px}.pattern-level{font-size:12px}.studio{margin-top:0}.studio-layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0;gap:0}.lesson-intro{grid-column:1;grid-row:1;padding:28px 0 14px}.lesson-heading{gap:18px}h1{font-size:70px;max-width:none;margin:16px 0}.lesson-description{max-width:530px;margin-bottom:14px}.stage{grid-column:1;grid-row:2;min-height:400px;margin:0 -3%;}.stage-top{top:10px;left:10px;right:10px;justify-content:space-between}.stage-bottom{bottom:12px;left:10px;right:10px}.live-label{display:block}.lesson-instruction{grid-column:1;grid-row:3;padding:8px 0 28px;align-self:auto}.pour-callout{max-width:600px;min-height:165px}.player{display:grid;grid-template-columns:1fr auto;gap:20px 12px;padding:22px 0}.playback-buttons{grid-column:1;grid-row:1}.speed-control{grid-column:2;grid-row:1}.progress-control{grid-column:1/-1;grid-row:2}.progress-heading{font-size:12px}.timeline-labels{font-size:12px}.steps{overflow-x:auto;grid-auto-columns:minmax(150px,1fr);scrollbar-width:thin;scrollbar-color:var(--line) transparent}.step{padding:20px 12px}.step-index{font-size:30px}.coach-note{display:block;padding:24px 0}.coach-note p{margin-top:10px}.studio-footer{font-size:12px;letter-spacing:.5px;flex-wrap:wrap;gap:12px}.basics-grid{grid-template-columns:1fr}#basics{padding:24px}#basics h2{font-size:44px}}
@media(max-width:440px){.brand{font-size:30px;letter-spacing:5px}.text-button{font-size:13px;gap:10px}h1{font-size:62px}.lesson-description{font-size:15px;line-height:1.6}.stage{min-height:355px}.camera-controls button{font-size:13px;padding:7px 10px}.live-label{display:none}.pour-callout{padding-left:16px}.pour-callout h2{font-size:22px}#step-detail{font-size:15px}.play-button{min-width:166px}.playback-buttons{gap:4px}.timeline-labels{font-size:11px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.loading-ring{animation-duration:2s}}

.learn-note{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 0;border-bottom:1px solid var(--line)}.learn-note h2{font-size:18px;font-weight:500;margin:0 0 8px}.learn-note p{font-size:14px;line-height:1.8;color:var(--muted);max-width:730px;margin:0}.learn-note>a{color:var(--accent);font-size:14px;white-space:nowrap;text-underline-offset:4px;padding:10px 0}@media(max-width:760px){.learn-note{display:block}.learn-note>a{display:inline-block;margin-top:12px}}

@media(min-width:1000px) and (max-height:780px){.site-header{min-height:76px;padding-top:12px;padding-bottom:12px}.pattern-card{min-height:80px;padding-top:9px;padding-bottom:9px}.pattern-card img{width:54px;height:54px}.studio{margin-top:8px}.studio-layout,.stage{min-height:440px}.lesson-intro{padding-top:22px;padding-bottom:18px}h1{font-size:72px;margin-top:18px;margin-bottom:16px}.lesson-instruction{padding-bottom:22px}.pour-callout h2{font-size:21px}.step-facts{margin-top:12px}.player{padding-top:15px;padding-bottom:15px}}