.td-page{--td-ink:var(--ink);--td-paper:#FFFCF6;--td-kraft:#E9D3B0;--td-shadow-paper:0 1px 1px rgba(80,60,30,0.12),0 6px 16px rgba(80,60,30,0.12)}.td-hero{text-align:center;margin:0 0 22px}.td-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,7vw,58px);margin:0;letter-spacing:.01em}.td-hero p{margin:4px 0 0;color:var(--ink-soft);font-weight:600}.td-wobbly span{display:inline-block;text-shadow:1px 2px 0 rgba(80,60,30,.18);animation:td-letter 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.23s)}@keyframes td-letter{0%,to{translate:0 0}50%{translate:0 -3px}}.td{position:relative;display:flex;flex-direction:column;gap:14px;padding:16px;background:var(--td-paper) var(--grain);border-radius:18px;box-shadow:var(--td-shadow-paper);font-family:var(--body);-moz-user-select:none;user-select:none;-webkit-user-select:none}.td.is-dragging,.td.is-dragging *{cursor:-webkit-grabbing!important;cursor:grabbing!important}.td-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;position:relative}.td-title{flex:1 1 220px;max-width:360px}.td-title input{width:100%;font-family:var(--display);font-weight:600;font-size:22px;padding:6px 16px;background:var(--td-kraft) var(--grain);border:0;border-radius:3px;transform:rotate(-1.2deg);-webkit-clip-path:polygon(0 6%,3% 0,97% 4%,100% 0,99% 94%,96% 100%,2% 96%,0 100%);clip-path:polygon(0 6%,3% 0,97% 4%,100% 0,99% 94%,96% 100%,2% 96%,0 100%);-moz-user-select:text;user-select:text;-webkit-user-select:text}.td-title input,.td-title input:focus{box-shadow:0 2px 3px rgba(80,60,30,.2)}.td-title input:focus{outline:3px solid var(--coral);outline-offset:3px}.td-top-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}.td-btn,.td-chip,.td-round{color:var(--td-ink);background:var(--paper);border:2px solid var(--td-ink);cursor:pointer;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.td-btn:hover,.td-chip:hover:not(:disabled),.td-round:hover{color:var(--td-ink);transform:translate(-1px,-1px);box-shadow:var(--print)}.td-btn:active,.td-chip:active:not(:disabled),.td-round:active{transform:translate(1px,1px);box-shadow:none}.td-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:4px 16px 4px 10px;font-family:var(--body);font-weight:800;font-size:15px;border-radius:999px}.td-btn:disabled{opacity:.6;cursor:progress}.td-save{background:var(--coral);box-shadow:var(--print)}.td-save:hover{box-shadow:4px 4px 0 var(--td-ink)}.td-save.is-saved{background:#CFE3D5;animation:td-cheer .5s cubic-bezier(.3,1.8,.5,1)}.td-demo{background:#FBE7B8}.td-btn.is-armed,.td-chip.is-armed{background:var(--coral);animation:td-shake .4s}.td-bubble{flex-basis:100%;margin:2px 0 0;padding:8px 14px;background:var(--paper) var(--grain);border-radius:4px;box-shadow:0 2px 4px rgba(80,60,30,.15);font-weight:700;font-size:15px;animation:td-cheer .35s ease-out}.td-bubble a,.td-bubble.is-error{color:var(--coral-deep)}.td-tray{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr)) minmax(0,1fr);grid-gap:8px;gap:8px;padding:12px 12px 16px;background:#D5E9F4 var(--grain);border-radius:6px 6px 0 0}.td-tray:after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;background:#D5E9F4;-webkit-mask:var(--deckle) left bottom /480px 12px repeat-x;mask:var(--deckle) left bottom /480px 12px repeat-x;transform:scaleY(-1)}.td-tray-btn{position:relative;width:100%;max-width:64px;aspect-ratio:4/5;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;background:var(--td-paper) var(--grain);border:0;border-radius:10px;box-shadow:0 1px 2px rgba(80,60,30,.18);cursor:-webkit-grab;cursor:grab;touch-action:none;transition:transform .15s ease,box-shadow .15s ease}.td-tray-btn .td-art{width:68%;height:auto}.td-tray-name{font-size:10.5px;font-weight:800;line-height:1;color:var(--ink-soft);pointer-events:none}.td-tray-btn.is-eraser{justify-self:end;--c:#F4A6B4}.td-tray-btn:hover{transform:translateY(-2px) rotate(-4deg);box-shadow:0 4px 8px rgba(80,60,30,.2)}.td-tray-btn:active{transform:translateY(1px)}.td-tray-btn.is-on{transform:translateY(-4px) rotate(-3deg);box-shadow:4px 4px 0 var(--c,var(--coral)),0 6px 10px rgba(80,60,30,.2)}.td-tray-btn.is-on .td-art{animation:td-wiggle 1.1s ease-in-out infinite}.td-art{display:block;overflow:visible;filter:drop-shadow(0 1.2px .6px rgba(70,50,20,.28)) drop-shadow(0 3px 4px rgba(70,50,20,.12))}.td-stage{position:relative;background:#FFFDF7 var(--grain);border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}.td-stage-in{display:flex;width:100%}.td-clef{flex:none;width:84px;border-right:1.5px dashed var(--line-strong)}.td-clef svg{display:block}.td-clef-mark{fill:none;stroke:var(--td-ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}.td-clef-dot{fill:var(--td-ink)}.td-scroll{flex:1 1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-color:var(--line-strong) transparent}.td-scroll::-webkit-scrollbar{height:10px}.td-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}.td-track{position:relative;touch-action:pan-x pan-y;cursor:pointer;outline:none}.td-track.tool-eraser{cursor:crosshair}.td-paper{position:absolute;inset:0;overflow:visible}.td-line{stroke:var(--td-ink);stroke-opacity:.42;stroke-width:1.6}.td-lane{opacity:.16}.td-beatline{stroke:var(--td-ink);stroke-opacity:.07;stroke-width:1.4}.td-beatline.is-down{stroke-opacity:.12}.td-ledger-guide{stroke:var(--td-ink);stroke-opacity:.16;stroke-width:1.4;stroke-dasharray:2 8;stroke-linecap:round}.td-ledger{stroke:var(--td-ink);stroke-opacity:.42;stroke-width:1.6}.td-barline{stroke:var(--td-ink);stroke-opacity:.8;stroke-width:2}.td-barline.is-end{stroke-width:5}.td-bar-shade{fill:rgba(201,168,124,.08)}.td-bar-num-bg{fill:var(--mustard)}.td-bar-num{font-family:var(--display);font-weight:600;font-size:14px;text-anchor:middle;fill:var(--td-ink)}.td-pad{fill:#EFE4D2}.td-pad.is-start{fill:#E4D3B8}.td-flag line{stroke:var(--td-ink);stroke-width:3;stroke-linecap:round}.td-flag path{fill:var(--coral);transform-origin:0 -48px;animation:td-flap 1.6s ease-in-out infinite}@keyframes td-flap{0%,to{transform:scaleX(1)}50%{transform:scaleX(.85) skewY(4deg)}}.td-pupil{transform-box:fill-box;transform-origin:center;animation:td-googly 2.6s ease-in-out infinite}.td-stamp:nth-child(3n) .td-pupil{animation-duration:2.1s;animation-delay:-.7s}.td-stamp:nth-child(3n+1) .td-pupil{animation-duration:3.1s;animation-delay:-1.4s}.td-drag .td-pupil,.td-stamp.is-hit .td-pupil,.td-tray-btn.is-on .td-pupil{animation:td-roll .5s ease-in-out infinite}.td-stamp.is-got .td-pupil{animation:none;translate:0 -2.4px}@keyframes td-googly{0%,to{translate:0 0}20%{translate:1.4px -1.2px}45%{translate:-1.3px .6px}70%{translate:.8px 1.4px}}@keyframes td-roll{0%{translate:2px 0}25%{translate:0 2px}50%{translate:-2px 0}75%{translate:0 -2px}to{translate:2px 0}}.td-stamp{position:absolute;width:46px;height:46px;z-index:2;touch-action:none;cursor:-webkit-grab;cursor:grab;animation:td-bob 2.8s ease-in-out infinite;animation-delay:calc(var(--k) * -.37s)}.td-track.tool-eraser .td-stamp{cursor:crosshair}.td-stamp-body{animation:td-pop .4s cubic-bezier(.3,1.6,.5,1) both}.td-stamp.is-hit{z-index:3}.td-stamp.is-hit .td-art{animation:td-boing .34s cubic-bezier(.3,1.5,.5,1);transform-origin:50% 90%}.td-stamp.is-hit:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2.5px dashed var(--mustard);animation:td-ring .45s ease-out forwards;pointer-events:none}.td-stamp.is-lifted{opacity:.25}.td-stamp.is-got .td-stamp-body{animation:td-got .35s cubic-bezier(.3,1.7,.5,1)}.td-stamp .td-note-name{z-index:1}@keyframes td-got{0%{transform:scale(1)}50%{transform:scale(1.3) rotate(-8deg)}to{transform:scale(1)}}.td-stamp:hover .td-art{transform:scale(1.08) rotate(-3deg)}.td-playcol{position:absolute;top:44px;bottom:16px;border-radius:4px;background:linear-gradient(rgba(242,181,68,0),rgba(242,181,68,.22) 30%,rgba(242,181,68,.22) 70%,rgba(242,181,68,0));pointer-events:none;z-index:1}.td-playcol.is-target{background:rgba(242,107,91,.1);outline:2.5px dashed var(--coral);outline-offset:-2px;animation:td-pulse 1.2s ease-in-out infinite}.td.is-learning .td-stamp,.td.is-learning .td-track{cursor:default}.td-deny{position:absolute;top:44px;bottom:16px;border-radius:4px;background:rgba(242,107,91,.12);pointer-events:none;z-index:4;animation:td-shake .4s}.td-deny span{position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(-2deg);white-space:nowrap;padding:2px 10px;background:var(--coral) var(--grain);color:var(--td-ink);border-radius:3px;font-weight:800;font-size:13px;box-shadow:0 2px 3px rgba(80,60,30,.2)}.td-ghost{position:absolute;width:46px;height:46px;opacity:.45;pointer-events:none;z-index:3}.td-note-name{position:absolute;right:-10px;bottom:-8px;min-width:22px;height:22px;display:grid;place-items:center;background:var(--td-ink);color:var(--cream);border-radius:999px;font-family:var(--display);font-weight:600;font-size:13px}.td-cursor{width:54px;height:54px;border:3px dashed var(--coral);border-radius:12px;z-index:4}.td-cursor,.td-hint{position:absolute;pointer-events:none}.td-hint{top:150px;padding:10px 16px;background:var(--td-kraft) var(--grain);border-radius:3px;transform:rotate(-1.5deg);box-shadow:0 2px 4px rgba(80,60,30,.18);font-weight:700;font-size:15px;color:var(--td-ink);z-index:1}.td-poof{position:absolute;width:0;height:0;pointer-events:none;z-index:6}.td-poof i{position:absolute;left:-5px;top:-4px;width:10px;height:8px;border-radius:1px;background:var(--c);box-shadow:0 1px 1px rgba(80,60,30,.25);animation:td-poof .6s ease-out forwards}@keyframes td-poof{0%{transform:rotate(var(--a)) translateX(0) rotate(0);opacity:1}to{transform:rotate(var(--a)) translateX(34px) rotate(160deg) scale(.4);opacity:0}}.td-bop{position:absolute;left:0;top:0;width:42px;height:56px;margin:-56px 0 0 -21px;z-index:5;pointer-events:none;will-change:transform}.td-bop,.td-bop-body{transform-origin:50% 100%}.td-bop-body{animation:td-idle 1.2s ease-in-out infinite}.td.is-playing .td-bop-body{animation:none}@keyframes td-idle{0%,to{transform:translateY(0) scale(1.05,.95)}50%{transform:translateY(-8px) scale(.97,1.04)}}.td-drag{position:fixed;z-index:1100;pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg) scale(1.1)}.td-drag .td-art{filter:drop-shadow(0 2px 1px rgba(70,50,20,.25)) drop-shadow(4px 10px 8px rgba(70,50,20,.22))}.td.is-cheer .td-bop-body{animation:td-bop-cheer .7s ease-in-out infinite}@keyframes td-bop-cheer{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-16px) rotate(-12deg)}50%{transform:translateY(0) rotate(0) scale(1.08,.92)}75%{transform:translateY(-16px) rotate(12deg)}}.td-learn{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 14px 10px;background:#DCE8DF var(--grain);border-radius:6px}.td-learn-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}.td-learn-says{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(17px,2.2vw,21px)}.td-learn-actions{display:flex;flex-wrap:wrap;gap:8px}.td-learn .lk-scroll{padding-top:10px}.td-learn-btn.is-on{background:#DCE8DF}.td-chords{padding-left:16px}.td-chords.is-on{background:var(--sky)}.td.is-full{position:fixed;inset:0;z-index:1000;border-radius:0;box-shadow:none;padding:clamp(10px,2vw,22px);overflow:auto;background:var(--cream) var(--grain)}.td.is-full .td-stage{flex:1 1;min-height:330px;display:flex;align-items:center}.td:-webkit-full-screen{background:var(--cream) var(--grain)}.td:fullscreen{background:var(--cream) var(--grain)}.td-controls{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 22px;padding:16px 16px 14px;margin-top:8px;background:#F8DFA0 var(--grain);border-radius:0 0 6px 6px}.td-controls:before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background:#F8DFA0;-webkit-mask:var(--deckle) left bottom /480px 12px repeat-x;mask:var(--deckle) left bottom /480px 12px repeat-x}.td-transport{display:flex;align-items:center;gap:10px}.td-round{display:grid;place-items:center;width:54px;height:54px;padding:0;border-radius:50%}.td-round.is-play{width:70px;height:70px;background:var(--coral);box-shadow:var(--print)}.td-round.is-play:hover{box-shadow:4px 4px 0 var(--td-ink)}.td-round.is-play svg{margin-left:4px}.td-round.is-play.is-on svg{margin-left:0}.td-round.is-play.is-on{animation:td-pulse .9s ease-in-out infinite}.td-round.is-loop.is-on{background:var(--sky);animation:td-spin-once .5s ease-out}.td-round .td-icon{overflow:visible}.td-speed{display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:420px}.td-slider{flex:1 1;position:relative;display:block}.td-slider input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:14px;padding:0;border:2px solid var(--td-ink);border-radius:999px;background:linear-gradient(90deg,var(--sage) 0,var(--coral) calc(var(--v) * 100%),var(--paper) calc(var(--v) * 100%));cursor:pointer;box-shadow:none}.td-slider input:focus{box-shadow:0 0 0 3px rgba(242,107,91,.4)}.td-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--paper);border:2px solid var(--td-ink);box-shadow:2px 2px 0 var(--td-ink)}.td-slider input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--paper);border:2px solid var(--td-ink);box-shadow:2px 2px 0 var(--td-ink)}.td-tempo{position:absolute;left:calc(var(--v) * (100% - 28px) + 14px);top:-26px;transform:translateX(-50%);padding:0 8px;background:var(--td-ink);color:var(--cream);border-radius:999px;font-family:var(--display);font-weight:600;font-size:13px;pointer-events:none}.td-shape{flex-wrap:wrap;gap:10px}.td-group,.td-shape{display:flex;align-items:center}.td-group{gap:6px;padding:4px;background:rgba(255,252,246,.55);border-radius:14px}.td-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:46px;height:46px;padding:0 8px;font-family:var(--display);font-weight:600;font-size:20px;line-height:1;border-radius:12px}.td-chip:disabled{opacity:.4;cursor:default}.td-chip span{font-family:var(--body);font-weight:800;font-size:14px}.td-chip.is-meter{flex-direction:column;gap:0}.td-bars small,.td-chip small{font-family:var(--body);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.td-chip.is-meter.is-on{background:var(--sky)}.td-chip.is-scale{flex-direction:column;gap:1px;min-width:64px;font-size:17px}.td-chip.is-scale.is-on{background:#F9D3DA}.td-chip.is-look{flex-direction:column;gap:1px;min-width:60px}.td-chip.is-look .td-art{filter:none}.td-chip.is-look.is-on{background:#DCE8DF}.td-bars{display:inline-flex;flex-direction:column;align-items:center;min-width:42px;font-family:var(--display);font-weight:600;font-size:22px;line-height:1}@keyframes td-bob{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}@keyframes td-pop{0%{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}@keyframes td-boing{0%{transform:scale(1)}30%{transform:scale(1.3,.72) translateY(4px)}60%{transform:scale(.85,1.22) translateY(-9px)}to{transform:scale(1)}}@keyframes td-ring{0%{transform:scale(.6) rotate(0);opacity:1}to{transform:scale(1.5) rotate(40deg);opacity:0}}@keyframes td-wiggle{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-2px)}}@keyframes td-shake{0%,to{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}@keyframes td-cheer{0%{transform:scale(.85)}60%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes td-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes td-spin-once{0%{transform:rotate(-180deg)}to{transform:rotate(0)}}@media (max-width:640px){.td{padding:10px;gap:12px}.td-tray{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px 6px;padding:8px 8px 14px}.td-tray-btn.is-eraser{justify-self:center}.td-clef{width:56px}.td-clef svg{width:56px;transform:translateX(-14px)}.td-speed{flex-basis:100%;max-width:none}}@media (prefers-reduced-motion:reduce){.td-page *,.td-page :after{animation:none!important;transition:none!important}}.td-songs{display:grid;grid-gap:22px;gap:22px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.td-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--td-paper) var(--grain);border-radius:4px;box-shadow:var(--td-shadow-paper);transition:transform .15s ease}.td-card:before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:20px;margin-left:-32px;background:rgba(233,211,176,.85) var(--grain);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(80,60,30,.15)}.td-card:nth-child(3n+1){transform:rotate(-.8deg)}.td-card:nth-child(3n+2){transform:rotate(.6deg)}.td-card:hover{transform:rotate(0) translateY(-3px)}.td-card h2{margin:0;font-family:var(--display);font-weight:600;font-size:21px;overflow-wrap:anywhere}.td-card .td-meta{margin:-6px 0 0;color:var(--ink-soft);font-size:13px;font-weight:700}.td-thumb{display:block;width:100%;height:auto;background:#FFFDF7;border-radius:3px;box-shadow:inset 0 0 0 1px var(--line)}.td-thumb line{stroke:var(--td-ink);stroke-opacity:.3;stroke-width:1}.td-thumb circle{stroke:none}.td-thumb .is-now{stroke:var(--coral);stroke-opacity:1;stroke-width:3}.td-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.td-card-actions .td-chip{height:40px;font-size:15px}.td-card-actions .td-chip.is-play{background:var(--coral)}.td-card-actions .td-chip.is-danger{margin-left:auto}.td-new-card{display:grid;place-items:center;align-content:center;grid-gap:8px;gap:8px;min-height:230px;text-decoration:none;background:#F3E7D3 var(--grain);font-family:var(--display);font-weight:600;font-size:20px}.td-new-card,.td-new-card:hover{color:var(--td-ink)}.td-games{display:grid;grid-gap:26px;gap:26px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.td-game{position:relative;display:flex;flex-direction:column;gap:8px;padding:0 0 20px;color:var(--td-ink);text-decoration:none;background:var(--td-paper) var(--grain);border-radius:6px;box-shadow:var(--td-shadow-paper);overflow:hidden;transition:transform .15s ease}.td-game:hover{color:var(--td-ink);transform:translateY(-3px) rotate(-.5deg)}.td-game-art{position:relative;height:170px;background:var(--bg,#D5E9F4) var(--grain);display:flex;align-items:center;justify-content:center;gap:4px}.td-game-art:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;background:var(--td-paper);-webkit-mask:var(--deckle) left bottom /480px 12px repeat-x;mask:var(--deckle) left bottom /480px 12px repeat-x}.td-game-art>*{animation:td-bob 2.8s ease-in-out infinite}.td-game-art>:nth-child(2n){animation-delay:-1.1s}.td-game-art>:nth-child(3n){animation-delay:-1.9s}.td-game h2{margin:6px 20px 0;font-family:var(--display);font-weight:600;font-size:24px}.td-game p{margin:0 20px;color:var(--ink-soft)}.td-game .td-game-go{margin:6px 20px 0;align-self:flex-start}.td-game.is-soon{cursor:default}.td-game.is-soon:hover{transform:none}.td-game.is-soon .td-game-art{filter:grayscale(.6);opacity:.8}.td-game-inst{display:block;width:84px}