.tp-lesson{--tp-ink:#183c40;--tp-blue:#276f90;color:var(--tp-ink);font-size:1.125rem;line-height:1.5}.tp-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 1.4rem}.tp-top a{font-size:1rem}.tp-heading{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:1.4rem}.tp-heading h1{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.2;margin:.3rem 0}.tp-heading .eyebrow{font-size:.9rem}.tp-progress{width:13rem;flex-shrink:0;font-size:1rem}.tp-progress [role=progressbar]{height:.65rem;border-radius:1rem;background:#d7e4e5;margin-top:.5rem;overflow:hidden}.tp-progress i{display:block;height:100%;background:#287d88}.tp-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.5rem;align-items:start}.tp-demo,.tp-work{background:#fff;border:1px solid #c4d5d8;border-radius:1rem;overflow:hidden;padding:1.4rem}.tp-demo{background:#edf4f6;position:sticky;top:1rem}.tp-section-label{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.9rem}.tp-section-label strong{font-size:1.1rem}.tp-section-label>span{font-size:.9rem;background:#fff;padding:.25rem .65rem;border-radius:1rem;border:1px solid #b5ccd3}.tp-demo p{margin:.6rem 0 1rem;font-size:1.125rem}.tp-demo-controls{display:flex;gap:.6rem;flex-wrap:wrap}.tp-lesson .quiet-button,.tp-lesson .primary-button,.tp-completion .quiet-button,.tp-completion .primary-button{font-size:1rem;min-height:2.9rem;padding:.65rem 1rem}.tp-finger-guide{display:flex;gap:.8rem;flex-wrap:wrap;border-top:1px solid #c4d5d8;padding-top:1rem;margin-top:1.1rem;font-size:.9rem}.tp-finger-guide b{display:block}.tp-work h2{font-size:1.4rem;line-height:1.4;margin:.5rem 0 1.2rem}.tp-work h2:focus{outline:none}.tp-practice{border:1px solid #c4d5d8;border-radius:.75rem;overflow:hidden;background:#f5f8f9;min-height:16rem}.tp-feedback{min-height:3.1rem;margin:1rem 0 .6rem;padding:.7rem .8rem;background:#eef4f5;border-radius:.5rem;font-size:1.05rem}.tp-feedback.tp-success{background:#e3f2dc;color:#24512c;border:1px solid #84ab76}.tp-help summary{cursor:pointer;font-size:1rem;text-decoration:underline;padding:.35rem 0}.tp-help p{font-size:1rem;margin:.5rem 0}.tp-help button{margin:.5rem 0}.tp-navigation{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}.tp-lesson button:disabled{opacity:.55;cursor:default}.tp-lesson .selected{background:#e1f0dc;border:2px solid #609258}.tp-demo-svg{display:block;width:100%;height:auto}.tp-demo-svg text{font:16px Arial,sans-serif}.tp-demo-svg .tp-demo-note{font-size:21px;font-weight:700}.tp-hand{fill:#efc6a7;fill-opacity:.64;stroke:#885d43;stroke-width:2;transform-box:fill-box;transform-origin:center}.tp-nail{fill:none;stroke:#b78163;stroke-width:1.5}.tp-contact{fill:#fff;fill-opacity:.2;stroke:#26728b;stroke-width:2;stroke-dasharray:3 3}.tp-ripple{fill:none;stroke:#227ca0;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}.tp-screen-menu,.tp-screen-selected{opacity:0}.tp-screen-zoom{transform-origin:445px 70px}.tp-demo-move .tp-hand-a,.tp-demo-single-drag .tp-hand-a{animation:tp-move 4s 2}.tp-demo-move .tp-screen-cursor,.tp-demo-single-drag .tp-screen-folder{animation:tp-result-move 4s 2}.tp-demo-tap .tp-hand-a,.tp-demo-right .tp-hand,.tp-demo-press .tp-hand-a{animation:tp-tap 3s 2}.tp-demo-tap .tp-ripple,.tp-demo-right .tp-ripple{animation:tp-tap-ring 3s 2}.tp-demo-tap .tp-screen-selected,.tp-demo-press .tp-screen-selected{animation:tp-select 3s 2}.tp-demo-press .tp-hand-a{animation:tp-press 3s 2}.tp-demo-double .tp-hand-a{animation:tp-double 3s 2}.tp-demo-double .tp-ripple{animation:tp-double-ring 3s 2}.tp-demo-double .tp-screen-folder{animation:tp-open 3s 2}.tp-demo-drag .tp-hand-a{animation:tp-drag 4s 2}.tp-demo-drag .tp-screen-folder{animation:tp-result-move 4s 2}.tp-demo-drag .tp-hold{animation:tp-hold 4s 2}.tp-demo-scroll .tp-hand{animation:tp-scroll 4s 2}.tp-demo-scroll .tp-screen-scroll{animation:tp-result-scroll 4s 2}.tp-demo-right .tp-screen-menu{animation:tp-select 3s 2}.tp-demo-zoom .tp-hand-a{animation:tp-pinch-a 4s 2}.tp-demo-zoom .tp-hand-b{animation:tp-pinch-b 4s 2}.tp-demo-zoom .tp-screen-zoom{animation:tp-zoom 4s 2}
@keyframes tp-move{0%,15%,100%{transform:translate(-35px,24px)}45%,65%{transform:translate(45px,-4px)}}@keyframes tp-result-move{0%,15%,100%{translate:-45px 0}45%,65%{translate:38px -10px}}@keyframes tp-tap{0%,20%,40%,100%{transform:translateY(-14px)}28%,34%{transform:translateY(0)}}@keyframes tp-press{0%,20%,100%{transform:translateY(-7px)}30%,55%{transform:translateY(7px) scaleY(.96)}}@keyframes tp-tap-ring{0%,20%,42%,100%{opacity:0;transform:scale(.8)}27%{opacity:1;transform:scale(1)}39%{opacity:0;transform:scale(1.8)}}@keyframes tp-double{0%,18%,31%,46%,100%{transform:translateY(-14px)}23%,27%,37%,41%{transform:translateY(0)}}@keyframes tp-double-ring{0%,18%,32%,48%,100%{opacity:0;transform:scale(.8)}24%,38%{opacity:1;transform:scale(1.1)}30%,45%{opacity:0;transform:scale(1.6)}}@keyframes tp-select{0%,27%,100%{opacity:0}35%,85%{opacity:1}}@keyframes tp-open{0%,40%,100%{opacity:1}48%,86%{opacity:.3;translate:14px 0}}@keyframes tp-drag{0%,12%,100%{transform:translate(-32px,16px)}55%,78%{transform:translate(58px,-8px)}}@keyframes tp-hold{0%,100%{fill-opacity:.4}20%,78%{fill-opacity:.85}}@keyframes tp-scroll{0%,10%,100%{transform:translateY(-8px)}45%,60%{transform:translateY(57px)}}@keyframes tp-result-scroll{0%,10%,100%{translate:0 0}45%,60%{translate:0 -76px}}@keyframes tp-pinch-a{0%,10%,100%{transform:translate(0,0)}45%,60%{transform:translate(-45px,28px)}}@keyframes tp-pinch-b{0%,10%,100%{transform:translate(0,0)}45%,60%{transform:translate(48px,-12px)}}@keyframes tp-zoom{0%,10%,100%{transform:scale(1)}45%,60%{transform:scale(1.5)}}
.tp-target-board{height:19rem;position:relative}.tp-target-board>span{position:absolute;top:.7rem;left:1rem;font-size:1rem}.tp-target{width:7rem;height:5rem;display:grid;place-items:center;position:absolute;transform:translate(-50%,-50%);background:#d5eaf5;border:3px solid #26728b;border-radius:.6rem;font-size:1.05rem;font-weight:700;user-select:none}.tp-target.tp-small{width:4.5rem;height:3.1rem;font-size:.9rem}.tp-target[hidden]{display:none}.tp-tiles,.tp-choices{display:grid;gap:1rem;padding:2rem 1.5rem}.tp-tiles{grid-template-columns:repeat(3,minmax(0,1fr));min-height:16rem;align-items:center}.tp-tile{border:2px solid #85a4af;border-radius:.6rem;padding:1rem .3rem;background:white;min-height:5rem;font-size:1.2rem;color:#183c40;font-weight:700}.tp-desktop{min-height:16rem;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:#edf3f6}.tp-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:.7rem;border:2px solid transparent;border-radius:.5rem;background:transparent;color:#183c40;min-width:8rem;max-width:13rem;font-size:1.125rem;text-align:center;user-select:none}.tp-item svg{width:5.5rem;height:5rem}.tp-item.selected{background:#d6eaf3;border-color:#2780a7}.tp-drag-board{height:20rem;position:relative;overflow:hidden}.tp-drop{position:absolute;right:5%;top:10%;width:45%;height:15rem;border:3px dashed #5990a4;border-radius:.8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:#e2eef3}.tp-drop svg{width:5rem;height:4rem}.tp-drop small{font-size:.9rem;text-align:center;padding:.2rem}.tp-drag-item{position:absolute;left:2%;top:48%;width:40%;min-width:0;cursor:grab;touch-action:none;font-size:1rem}.tp-drag-item.held{cursor:grabbing;background:#fff;z-index:3;box-shadow:0 5px 15px #183c4033}.tp-drag-item[hidden]{display:none}.tp-list-header{padding:.6rem 1rem;background:#dce8ed;font-weight:700}.tp-scroll-panel{height:17rem;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:.7rem;background:#fff}.tp-list-item{width:100%;min-height:4.5rem;text-align:left;border:1px solid #cbdbe0;border-radius:.5rem;background:white;color:#183c40;font-size:1.125rem;padding:.8rem;margin-bottom:.65rem;display:flex;align-items:center;gap:.8rem}.tp-list-item span{color:#276f90;font-size:1.5rem}#tp-scroll-goal{background:#e1eef8;border:2px solid #5896c1}.tp-context-area{position:relative;justify-content:flex-start;padding-left:9%;min-height:19rem}.tp-context-menu{position:absolute;left:43%;top:25%;width:53%;max-width:15rem;border:1px solid #b7c6cc;background:#fff;border-radius:.6rem;padding:.4rem;box-shadow:0 .4rem 1.2rem #183c4022}.tp-context-menu[hidden]{display:none}.tp-context-menu button{display:block;width:100%;text-align:left;min-height:3.2rem;border:0;background:#fff;border-radius:.35rem;color:#183c40;font-size:1.125rem;padding:.6rem .8rem}.tp-context-menu button:hover,.tp-context-menu button:focus{background:#e0eef5}.tp-rename{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:1rem;padding:2rem;min-height:16rem}.tp-rename strong{border:2px solid #86a4b0;background:#fff;padding:.75rem;overflow-wrap:anywhere}.tp-zoom-panel{height:19rem;display:grid;place-items:center;overflow:hidden;background:#e0e9ed;overscroll-behavior:contain}.tp-notice{width:12rem;min-height:9rem;background:white;border:1px solid #b9cbd1;box-shadow:0 .3rem .8rem #183c4022;padding:1rem;text-align:center;transform-origin:center}.tp-notice span{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}.tp-notice strong{font-size:1.5rem;display:block;margin:.5rem 0}.tp-notice p{font-size:1rem;margin:.5rem 0}.tp-notice small{font-size:.75rem}.tp-zoom-state{padding:.5rem 1rem;font-size:1rem;margin:0;background:white;min-height:3rem}.tp-choices .quiet-button{font-size:1.125rem;text-align:left;justify-content:flex-start;white-space:normal}.tp-checklist{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1rem 0 0;font-size:.9rem}.tp-checklist li{border:1px solid #c8d6d9;padding:.25rem .55rem;border-radius:.4rem}.tp-checklist li.done{background:#e3f2dc;border-color:#86aa77}.tp-completion{max-width:43rem;background:#fff;border:1px solid #c4d5d8;border-radius:1rem;padding:2rem;margin:1rem auto;font-size:1.125rem;line-height:1.5}.tp-completion h1{font-size:clamp(1.8rem,3vw,2.5rem)}.tp-completion ul{list-style:none;padding:0;margin:1.5rem 0}.tp-completion li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid #e1e9ea}.tp-completion li strong{font-size:1rem;color:#3a6c40}.tp-completion-note{background:#edf4f6;padding:1rem;border-radius:.5rem;font-size:1rem}.tp-completion-actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}.tp-home-art{background:#e3eef3;display:grid;place-items:center;padding:1rem}.tp-home-art>svg{max-height:220px;width:100%}
@media(max-width:850px){.tp-layout{grid-template-columns:1fr}.tp-demo{position:static}.tp-demo-svg{max-height:250px}.tp-heading{align-items:flex-start;flex-direction:column}.tp-progress{width:100%}.tp-demo,.tp-work{padding:1.1rem}.tp-tiles{padding:1.4rem .75rem;gap:.6rem}.tp-heading h1{font-size:2rem}}
@media(max-width:450px){.tp-context-area{padding-left:2%}.tp-context-menu{left:41%;width:57%}.tp-item{min-width:6rem;font-size:1rem}.tp-navigation{gap:.6rem}.tp-lesson .quiet-button,.tp-lesson .primary-button{padding:.6rem .7rem}.tp-completion{padding:1.2rem}.tp-demo-svg .tp-demo-note{font-size:23px}}
@media(prefers-reduced-motion:reduce){.tp-demo-svg *{animation:none!important}.tp-demo-move .tp-hand-a{transform:translate(30px,0)}.tp-demo-tap .tp-ripple,.tp-demo-double .tp-ripple,.tp-demo-right .tp-ripple{opacity:1}.tp-demo-tap .tp-screen-selected,.tp-demo-right .tp-screen-menu{opacity:1}.tp-demo-scroll .tp-hand{transform:translateY(35px)}.tp-demo-scroll .tp-screen-scroll{translate:0 -45px}.tp-demo-zoom .tp-hand-a{transform:translate(-30px,18px)}.tp-demo-zoom .tp-hand-b{transform:translate(30px,-10px)}.tp-demo-zoom .tp-screen-zoom{transform:scale(1.3)}}

.tp-screen-open{opacity:0}.tp-demo-double .tp-screen-open{animation:tp-open-window 3s 2}@keyframes tp-open-window{0%,41%,100%{opacity:0}48%,87%{opacity:1}}
@media(prefers-reduced-motion:reduce){.tp-demo-double .tp-screen-open{opacity:1}}