:root{--color-bg: #ffffff;--color-text: #111827;--color-text-muted: #4b5563;--color-border: #d1d5db;--color-border-focus: #2563eb;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-primary-text: #ffffff;--color-error-bg: #fee2e2;--color-error-text: #b91c1c;--font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-weight-medium: 500;--transition-speed: .2s;--color-deck-bg: #fafbfc}@media(prefers-color-scheme:dark){:root{--color-bg: #111827;--color-text: #f9fafb;--color-text-muted: #9ca3af;--color-border: #374151;--color-border-focus: #3b82f6;--color-primary: #3b82f6;--color-primary-hover: #60a5fa;--color-primary-text: #ffffff;--color-error-bg: #7f1d1d;--color-error-text: #fca5a5}}@media(prefers-reduced-motion:reduce){:root{--transition-speed: 0s}}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);line-height:1.5;display:flex;align-items:center;justify-content:center}.page{width:100%;max-width:28rem;padding:2rem}.page h1{margin:0 0 .5rem;font-size:2rem;font-weight:700;letter-spacing:-.025em}.supporting-message{margin:0 0 2rem;color:var(--color-text-muted);font-size:1.125rem}.unlock-form{display:flex;flex-direction:column;gap:.5rem}.unlock-form label{font-size:.875rem;font-weight:500}.input-group{display:flex;gap:.5rem}.input-group input{flex:1;padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:.375rem;font-family:inherit;font-size:1rem;background-color:transparent;color:inherit;transition:border-color var(--transition-speed)}.input-group input:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 2px #2563eb33}@media(prefers-color-scheme:dark){.input-group input:focus{box-shadow:0 0 0 2px #3b82f633}}.input-group button{padding:.75rem 1.5rem;background-color:var(--color-primary);color:var(--color-primary-text);border:none;border-radius:.375rem;font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color var(--transition-speed)}.input-group button:hover{background-color:var(--color-primary-hover)}.error-region{min-height:1.5rem;font-size:.875rem;color:var(--color-error-text);margin-top:.25rem}.error-region:not(:empty){padding:.5rem .75rem;background-color:var(--color-error-bg);border-radius:.375rem}.demo a,.lesson-stub a,.deck-resource{display:inline-block;margin-top:.25rem;color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-medium)}.demo a:hover,.lesson-stub a:hover,.deck-resource:hover{text-decoration:underline}.page.deck{display:grid;grid-template-rows:auto 1fr auto;width:100%;max-width:72rem;max-height:min(100dvh,52rem);height:min(100dvh,52rem);margin-inline:auto;padding:1.25rem 1.5rem 0;box-sizing:border-box;background:var(--color-deck-bg);font-weight:var(--font-weight-medium)}.page.lesson-stub{max-width:64rem;min-height:min(100vh,50rem);padding:2rem 2.5rem 1.5rem;background:var(--color-deck-bg);font-weight:var(--font-weight-medium)}@media(prefers-color-scheme:dark){.page.deck,.page.lesson-stub{background:var(--color-bg)}}.deck-brand{margin:0;font-size:1rem;font-weight:600;color:var(--color-text-muted)}.deck-stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:1rem 0}.deck-card{width:min(64rem,100%);height:min(32rem,calc(100% - .5rem));max-height:32rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,2.5vw,2rem);background:var(--color-bg);border:1px solid var(--color-border);border-radius:1rem;overflow:auto}.deck-layout{display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center;width:100%;max-width:58rem;margin:0 auto}@media(min-width:900px){.deck-layout{grid-template-columns:1.05fr .95fr;gap:2rem}}.deck-copy h1{margin:0 0 .75rem;font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:600;letter-spacing:-.03em;line-height:1.15}.deck-body{margin:0;color:var(--color-text-muted);font-size:1.0625rem;font-weight:var(--font-weight-medium);max-width:36rem}.deck-links{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem}.deck-diagram{color:var(--color-text);background:transparent;border:none;border-radius:0;padding:0;min-height:11rem;display:flex;align-items:center;justify-content:center}.deck-diagram-svg{width:100%;max-width:26rem;height:auto}.deck-chrome{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin:0;padding:.875rem 0 1.125rem;border-top:1px solid var(--color-border);background:var(--color-deck-bg);position:sticky;bottom:0;z-index:2}@media(prefers-color-scheme:dark){.deck-chrome{background:var(--color-bg)}}.deck-progress{display:flex;align-items:center;gap:.5rem}.deck-dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--color-border);display:inline-block;border:none;padding:0;cursor:pointer}.deck-dot:hover{background:var(--color-text-muted)}.deck-dot.is-active{background:var(--color-primary);transform:scale(1.2)}.deck-hint{margin-left:.75rem;font-size:.875rem;color:var(--color-text-muted);display:inline-flex;align-items:center;gap:.25rem}.deck-hint-btn{border:none;background:transparent;color:inherit;font:inherit;padding:.15rem .35rem;border-radius:.375rem;cursor:pointer;line-height:1}.deck-hint-btn:hover:not(:disabled){color:var(--color-text);background:var(--color-border)}.deck-hint-btn:disabled{opacity:.35;cursor:not-allowed}.deck-nav{display:flex;gap:.5rem}.deck-btn{box-sizing:border-box;width:8.5rem;min-width:8.5rem;padding:.75rem 1rem;border-radius:.625rem;border:1px solid var(--color-border);background:transparent;color:inherit;font-family:inherit;font-size:1rem;font-weight:600;text-align:center;cursor:pointer}.deck-btn:disabled{opacity:.4;cursor:not-allowed}.deck-btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-text)}.deck-btn.primary:hover{background:var(--color-primary-hover)}@keyframes deck-idle-pulse{0%,to{transform:scale(1);box-shadow:0 0 #2563eb59}50%{transform:scale(1.03);box-shadow:0 0 0 10px #2563eb00}}@keyframes deck-idle-dot{0%,to{transform:scale(1.2);opacity:1}50%{transform:scale(1.55);opacity:.75}}@keyframes deck-idle-hint{0%,to{opacity:.55}50%{opacity:1}}@keyframes deck-breathe{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.92}}@keyframes insight-pulse{0%,to{filter:brightness(1);opacity:.35}12%,22%{filter:brightness(1.25);opacity:1}30%,to{filter:brightness(1);opacity:.35}}@keyframes label-word-pulse{0%,to{opacity:.35;fill:currentColor}12%,22%{opacity:1;fill:var(--color-primary)}30%,to{opacity:.35;fill:currentColor}}@keyframes shoulder-L-shrug{0%,12%{transform:translate(2px,2px)}28%,40%{transform:translate(10px,-18px)}58%,to{transform:translate(2px,2px)}}@keyframes shoulder-R-shrug{0%,12%{transform:translate(-2px,2px)}28%,40%{transform:translate(-10px,-18px)}58%,to{transform:translate(-2px,2px)}}@keyframes screen-height{0%,12%{transform:translateY(42px)}22%,38%{transform:translateY(-32px)}48%,78%{transform:translateY(0)}90%,to{transform:translateY(42px)}}@keyframes mark-bad-vis{0%,40%{opacity:1}46%,80%{opacity:0}88%,to{opacity:1}}@keyframes mark-good-vis{0%,44%{opacity:0}48%,78%{opacity:1}86%,to{opacity:0}}@keyframes status-low{0%,14%{opacity:1}20%,to{opacity:0}}@keyframes status-high{0%,18%{opacity:0}22%,38%{opacity:1}44%,to{opacity:0}}@keyframes status-ok{0%,46%{opacity:0}50%,78%{opacity:1}86%,to{opacity:0}}@keyframes slant-row{0%,18%{transform:translate(0)}40%,72%{transform:translate(var(--slant-x, 0px))}90%,to{transform:translate(0)}}@keyframes finger-settle{0%,14%{transform:translateY(-16px)}40%,70%{transform:translateY(0)}90%,to{transform:translateY(-16px)}}@keyframes hand-enter{0%,8%{transform:translate(72px,12px);opacity:0}28%,to{transform:translate(0);opacity:1}}@keyframes thumb-tap{0%,35%{transform:translateY(-10px)}48%{transform:translateY(0)}58%,to{transform:translateY(-10px)}}@keyframes space-press{0%,45%{transform:translateY(0)}50%{transform:translateY(4px)}58%,to{transform:translateY(0)}}@keyframes one-hand-left{0%,to{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}@keyframes one-hand-right{0%,45%{opacity:.35}55%,75%{opacity:.85}85%,to{opacity:.35}}@keyframes assoc-story{0%,18%{opacity:1}24%,to{opacity:0}}@keyframes assoc-letter{0%,22%{opacity:0}26%,43%{opacity:1}49%,to{opacity:0}}@keyframes assoc-finger{0%,47%{opacity:0}51%,68%{opacity:1}74%,to{opacity:0}}@keyframes assoc-key{0%,72%{opacity:0}76%,94%{opacity:1}to{opacity:0}}@keyframes press-dip{0%,40%{transform:translateY(0)}55%{transform:translateY(10px)}70%,to{transform:translateY(0)}}.page.deck.is-idle .deck-btn.primary:not(:disabled){animation:deck-idle-pulse 2.2s ease-in-out infinite}.page.deck.is-idle .deck-dot.is-active{animation:deck-idle-dot 2.2s ease-in-out infinite}.page.deck.is-idle .deck-hint{animation:deck-idle-hint 2.2s ease-in-out infinite}.deck-diagram-svg .finger,.deck-diagram-svg .thumb-space,.deck-diagram-svg .hand-right,.deck-diagram-svg .slant-row,.deck-diagram-svg .press-finger,.deck-diagram-svg .space-bar,.deck-diagram-svg .welcome-mark,.deck-diagram-svg .ready-mark,.deck-diagram-svg .hand-panel,.deck-diagram-svg .screen-lift,.deck-diagram-svg .keyboard-flat{transform-box:fill-box;transform-origin:center center}.deck-diagram-svg .finger{transform-origin:center bottom}.diagram-home-row .finger-pinky,.diagram-home-row .finger-ring,.diagram-home-row .finger-middle,.diagram-home-row .finger-index{transform-box:fill-box;transform-origin:50% 100%}.deck-diagram-svg .thumb-space{transform-box:fill-box;transform-origin:left center}.diagram-thumbs .thumb-space{transform-box:fill-box;transform-origin:20% 80%}.diagram-thumbs .hand-right,.diagram-thumbs .space-bar{transform-box:fill-box;transform-origin:center center}.diagram-keys-slant .slant-row-1{--slant-x: 14px;transform:translate(14px)}.diagram-keys-slant .slant-row-2{--slant-x: 28px;transform:translate(28px)}.diagram-associative .assoc-beat{opacity:0}.diagram-associative .assoc-key{opacity:1}.page.deck.is-idle .diagram-welcome .welcome-mark,.page.deck.is-idle .diagram-links .ready-mark{animation:deck-breathe 2.6s ease-in-out infinite}.diagram-sit .shoulder-L,.diagram-sit .shoulder-R{transform-box:fill-box;transform-origin:center center}.diagram-sit .shoulder-L{transform:translate(2px,2px)}.diagram-sit .shoulder-R{transform:translate(-2px,2px)}.diagram-sit .label-word{opacity:.35}.page.deck.is-idle[data-slide=sit] .insight-feet{animation:insight-pulse 6s ease-in-out infinite}.page.deck.is-idle[data-slide=sit] .label-word.insight-feet{animation:label-word-pulse 6s ease-in-out infinite}.page.deck.is-idle[data-slide=sit] .insight-shoulders{animation:none;opacity:1;filter:none}.page.deck.is-idle[data-slide=sit] .shoulder-L,.page.deck.is-idle[data-slide=sit] .shoulder-R{transform-box:fill-box;transform-origin:center center}.page.deck.is-idle[data-slide=sit] .shoulder-L{animation:shoulder-L-shrug 6s ease-in-out infinite;animation-delay:-2s}.page.deck.is-idle[data-slide=sit] .shoulder-R{animation:shoulder-R-shrug 6s ease-in-out infinite;animation-delay:-2s}.page.deck.is-idle[data-slide=sit] .label-word.insight-shoulders{animation:label-word-pulse 6s ease-in-out infinite;animation-delay:-2s}.page.deck.is-idle[data-slide=sit] .insight-spine{animation:insight-pulse 6s ease-in-out infinite;animation-delay:-4s}.page.deck.is-idle[data-slide=sit] .label-word.insight-spine{animation:label-word-pulse 6s ease-in-out infinite;animation-delay:-4s}.diagram-keyboard .label-word{opacity:.35}.page.deck.is-idle[data-slide=keyboard] .insight-flat{animation:insight-pulse 5.5s ease-in-out infinite}.page.deck.is-idle[data-slide=keyboard] .label-word.insight-flat{animation:label-word-pulse 5.5s ease-in-out infinite}.page.deck.is-idle[data-slide=keyboard] .insight-wrists{animation:insight-pulse 5.5s ease-in-out infinite;animation-delay:-2.75s}.page.deck.is-idle[data-slide=keyboard] .label-word.insight-wrists{animation:label-word-pulse 5.5s ease-in-out infinite;animation-delay:-2.75s}.diagram-screen .mark-bad,.diagram-screen .status-low,.diagram-screen .status-high{opacity:0}.diagram-screen .mark-good,.diagram-screen .status-ok{opacity:1}.diagram-screen .screen-lift{transform:translateY(0)}.page.deck.is-idle[data-slide=screen] .screen-lift{animation:screen-height 6s ease-in-out infinite}.page.deck.is-idle[data-slide=screen] .mark-bad{animation:mark-bad-vis 6s ease-in-out infinite}.page.deck.is-idle[data-slide=screen] .mark-good{animation:mark-good-vis 6s ease-in-out infinite}.page.deck.is-idle[data-slide=screen] .status-low{animation:status-low 6s ease-in-out infinite}.page.deck.is-idle[data-slide=screen] .status-high{animation:status-high 6s ease-in-out infinite}.page.deck.is-idle[data-slide=screen] .status-ok{animation:status-ok 6s ease-in-out infinite}.page.deck.is-idle[data-slide=screen] .eyes-cue{animation:label-word-pulse 2.8s ease-in-out infinite}.page.deck.is-idle .diagram-keys-slant .slant-row-0{--slant-x: 0px;animation:slant-row 4.5s ease-in-out infinite}.page.deck.is-idle .diagram-keys-slant .slant-row-1{--slant-x: 14px;animation:slant-row 4.5s ease-in-out infinite}.page.deck.is-idle .diagram-keys-slant .slant-row-2{--slant-x: 28px;animation:slant-row 4.5s ease-in-out infinite}.page.deck.is-idle .diagram-home-row .home-hand{transform-box:fill-box;transform-origin:center center;animation:finger-settle 3.2s ease-in-out infinite}.page.deck.is-idle .diagram-thumbs .hand-right{animation:hand-enter 4.2s ease-in-out infinite}.page.deck.is-idle .diagram-thumbs .space-bar{animation:space-press 4.2s ease-in-out infinite}.page.deck.is-idle .diagram-one-hand .hand-panel-left{animation:one-hand-left 3.5s ease-in-out infinite}.page.deck.is-idle .diagram-one-hand .hand-panel-right{animation:one-hand-right 3.5s ease-in-out infinite}.page.deck.is-idle .diagram-associative .assoc-story{animation:assoc-story 8s linear infinite}.page.deck.is-idle .diagram-associative .assoc-letter{animation:assoc-letter 8s linear infinite}.page.deck.is-idle .diagram-associative .assoc-finger{animation:assoc-finger 8s linear infinite}.page.deck.is-idle .diagram-associative .assoc-key{animation:assoc-key 8s linear infinite}.page.deck.is-idle .diagram-associative .press-finger{animation:press-dip 8s linear infinite}@media(prefers-reduced-motion:reduce){.page.deck.is-idle .deck-btn.primary:not(:disabled),.page.deck.is-idle .deck-dot.is-active,.page.deck.is-idle .deck-hint,.page.deck.is-idle .diagram-welcome .welcome-mark,.page.deck.is-idle .diagram-links .ready-mark,.page.deck.is-idle[data-slide=sit] .insight,.page.deck.is-idle[data-slide=sit] .label-word,.page.deck.is-idle[data-slide=sit] .shoulder-L,.page.deck.is-idle[data-slide=sit] .shoulder-R,.page.deck.is-idle[data-slide=keyboard] .insight,.page.deck.is-idle[data-slide=keyboard] .label-word,.page.deck.is-idle[data-slide=screen] .screen-lift,.page.deck.is-idle[data-slide=screen] .mark-bad,.page.deck.is-idle[data-slide=screen] .mark-good,.page.deck.is-idle[data-slide=screen] .status,.page.deck.is-idle[data-slide=screen] .eyes-cue,.page.deck.is-idle .diagram-keys-slant .slant-row,.page.deck.is-idle .diagram-home-row .home-hand,.page.deck.is-idle .diagram-thumbs .hand-right,.page.deck.is-idle .diagram-thumbs .space-bar,.page.deck.is-idle .diagram-one-hand .hand-panel,.page.deck.is-idle .diagram-associative .assoc-beat,.page.deck.is-idle .diagram-associative .press-finger{animation:none!important}.diagram-associative .assoc-beat{opacity:0}.diagram-associative .assoc-key{opacity:1}.diagram-sit .label-word{opacity:.85;fill:var(--color-primary)}.diagram-sit .shoulder-L{transform:translate(2px,2px)}.diagram-sit .shoulder-R{transform:translate(-2px,2px)}.diagram-thumbs .hand-right{opacity:1;transform:none}}body:has(.page.deck){align-items:center;justify-content:center}body:has(.page.lesson-stub){align-items:stretch;justify-content:stretch}body:has(.page.deck) #app{width:100%;max-width:72rem;height:min(100dvh,52rem);max-height:min(100dvh,52rem);margin-inline:auto;display:flex;flex-direction:column}body:has(.page.lesson-stub) #app{width:100%;min-height:100dvh}body:has(.page.deck) #app>.page.deck{flex:1;width:100%;margin-inline:auto}