.tpad{z-index:2;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:var(--head);--rs-x:142px;--rs-y:88px;display:none;position:absolute;inset:0}.tpad.on{pointer-events:auto;display:block}.tpad-btn{transition:opacity .25s}.tpad.idle:not(.editing) .tpad-btn{opacity:calc(.5 * var(--o,1))}.tpad.on[data-sticks=none]{pointer-events:none}.tpad.on[data-sticks=none] .tpad-btn{pointer-events:auto}.tpad-stick{width:144px;height:144px;opacity:calc(.3 * var(--o,1));pointer-events:none;background:#10121e4d;border-radius:50%;margin:-72px 0 0 -72px;position:absolute;box-shadow:inset 0 0 0 3px #f4efe299}.tpad-stick.held{opacity:calc(.9 * var(--o,1))}.tpad-stick.left{opacity:calc(.8 * var(--o,1))}.tpad-stick.left.held{opacity:calc(.95 * var(--o,1))}.tpad-stick{will-change:transform}.tpad-stick.left,.tpad-rest{left:calc(env(safe-area-inset-left) + var(--rs-x));top:calc(100% - var(--rs-y) - env(safe-area-inset-bottom))}.tpad-rest{position:absolute}.tpad-stick.right{left:calc(100% - var(--rs-x) - env(safe-area-inset-right));top:calc(100% - var(--rs-y) - env(safe-area-inset-bottom));opacity:calc(.8 * var(--o,1))}.tpad-stick.right.held{opacity:calc(.95 * var(--o,1))}.tpad[data-sticks=left] .tpad-stick.right,.tpad[data-sticks=none] .tpad-stick.right{visibility:hidden}.tpad[data-sticks=none] .tpad-stick.left{display:none}.tpad-knob{background:#f4efe2a6;border-radius:50%;width:54px;height:54px;margin:-27px 0 0 -27px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 3px #00000073}.tpad-stick.push .tpad-knob{background:var(--accent)}.tpad-buttons{pointer-events:none;position:absolute;inset:0}.tpad-btn{text-align:center;pointer-events:auto;color:var(--ink);text-shadow:1px 1px #000;white-space:pre-line;letter-spacing:.5px;opacity:var(--o,1);background:#10121e73;border-radius:50%;justify-content:center;align-items:center;line-height:1.25;display:flex;position:absolute;box-shadow:inset 0 0 0 2px #f4efe28c,0 3px #0006}.tpad-btn.inner{width:56px;height:56px;margin:-28px 0 0 -28px;font-size:8px}.tpad-btn.outer{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:7px}.tpad-btn.main{width:76px;height:76px;margin:-38px 0 0 -38px;font-size:10px}.tpad-btn.long{font-size:7px}.tpad-btn.outer.long{font-size:5px}.tpad-btn.main.long{font-size:8px}.tpad-btn.down{background:var(--accent);color:#1a1a24;text-shadow:none;translate:0 2px;box-shadow:inset 0 0 0 2px #1a1a24,0 1px #0006}.tpad-top{right:calc(12px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));gap:8px;display:flex;position:absolute}.tpad-top .tpad-btn{border-radius:20px;min-width:40px;height:40px;padding:0 10px;font-size:8px;position:relative}.tpad-top .tpad-btn.long{font-size:8px}.tpad-top .tpad-pause{width:40px;padding:0}.tpad-pause{letter-spacing:2px;font-size:11px}.tpad-top .tpad-pause.wide{letter-spacing:1px;border-radius:20px;width:auto;padding:0 14px;font-size:9px}.tpad.on.editing{z-index:4;pointer-events:auto;opacity:1;background:#080a124d}.tpad.editing .tpad-btn,.tpad.editing .tpad-stick{pointer-events:auto;cursor:grab}.tpad.editing .tpad-top{display:none}.tpad.editing .tpad-stick{opacity:calc(.7 * var(--o,1))}.tpad.editing:not([data-sticks=none]) .tpad-stick.left{display:block}.tpad-btn.picked,.tpad-stick.picked{outline:3px dashed var(--accent);outline-offset:3px}.screen.tedit{z-index:5;pointer-events:none;padding:10px calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));background:0 0;justify-content:flex-start;align-items:flex-start}.screen.tedit .card{pointer-events:auto}.screen.tedit.right{justify-content:flex-end}.screen .card.tedit-card{min-width:0;width:min(340px, calc(48 * var(--vw)));padding:8px 14px 10px}.screen .card.tedit-card .btns{background:0 0;margin:6px 0 0;padding:0;position:static}.tedit-head{justify-content:space-between;align-items:center;gap:8px;margin:0 0 4px;display:flex}.tedit-name{justify-content:space-between;align-items:baseline;display:flex}.tedit-name .tedit-reset{font-size:16px}.tedit-arrow{font-family:var(--head);color:var(--accent);cursor:pointer;padding:4px 10px;font-size:14px}.tedit-help{font-size:18px;line-height:1.1}.tedit-pick{margin-top:2px}.tedit-pick label{align-items:center;gap:10px;margin:2px 0;font-size:18px;display:flex}.tedit-pick label>span:first-child{width:72px}.tedit-pick input[type=range]{accent-color:var(--accent);pointer-events:auto;flex:1}.tedit-pick .val{text-align:right;width:44px}#ui.touch>.slot.bottom>.keys,#ui.fingers>.mute-btn{display:none}#ui.touch>.slot.tr{right:calc(var(--tpad-top,40px) + 18px + env(safe-area-inset-right))}#ui.compact{--cz:.62}#ui.compact>.slot{zoom:calc(var(--ui-scale,1) * var(--cz))}#ui.compact>.slot.tl{top:calc(10px / var(--cz));left:calc((12px + env(safe-area-inset-left)) / var(--cz))}#ui.compact>.slot.tr{top:calc(10px / var(--cz));right:calc((12px + env(safe-area-inset-right)) / var(--cz))}#ui.compact.touch>.slot.tr{right:calc((var(--tpad-top,40px) + 20px + env(safe-area-inset-right)) / var(--cz))}#ui.compact .instruments{grid-template-columns:repeat(3,auto);gap:2px 16px;display:grid}#ui.compact .instruments>.gauge{min-width:0}#ui.compact .instruments>:not(.gauge):not(.tape){grid-column:1/4}#ui.compact .instruments>.tape{grid-area:1/4/span 3;height:auto!important;margin:4px 2px 4px 0!important}#ui.compact>.slot.left{top:calc(78px / var(--cz));left:calc((12px + env(safe-area-inset-left)) / var(--cz));transform:none}#ui.compact>.slot.right{top:calc(62px / var(--cz));right:calc((12px + env(safe-area-inset-right)) / var(--cz));transform:none}#ui.compact>.slot.top{top:calc(10px / var(--cz))}#ui.compact>.slot.bl{bottom:auto;top:calc(78px / var(--cz));left:calc((150px + env(safe-area-inset-left)) / var(--cz));--cz:.5}#ui.compact:has(>.slot.left:empty)>.slot.bl{left:calc((12px + env(safe-area-inset-left)) / var(--cz))}#ui.compact>.slot.br{bottom:auto;top:calc(62px / var(--cz));right:calc((12px + env(safe-area-inset-right)) / var(--cz))}#ui.compact.touch>.slot.tl,#ui.compact.touch>.slot.left,#ui.compact.touch>.slot.bl,#ui.compact.touch>.slot.br,#ui.compact.touch[data-sticks=both]>.slot.right{left:calc((12px + env(safe-area-inset-left)) / var(--cz));align-items:flex-start;bottom:auto;right:auto;transform:none}#ui.compact.touch .hud-more,#ui.compact.touch .hud-brakes .meter{display:none}#ui.compact.touch .hud-brakes:not(:has(.accent)){display:none}#ui.compact.touch .lesson-goals>.lesson-head,#ui.compact.touch .lesson-goals>.row{display:none}#ui.compact.touch .lesson-goals>.lesson-say{margin-top:0!important}#ui.compact.touch .inst.device{flex-direction:column;align-items:stretch}#ui.compact.touch .ta{grid-template-columns:auto 1fr;align-items:center;column-gap:10px;display:grid}#ui.compact.touch .ta>:first-child{grid-column:1/3}#ui.compact.touch .ta .ta-map{width:64px;height:64px}#ui.compact.touch .nav .navarrow{width:24px;height:24px}#ui.compact.touch .nav .h.big{font-size:18px}#ui.compact.touch>.slot.top:has(>.lesson-goals.no-say){display:none}#ui.compact.touch>.slot.toast-out,#ui.compact.touch>.slot.stack-out{display:none}#ui.compact.touch>.slot.br,#ui.compact.touch[data-sticks=both]>.slot.right{text-align:left}#ui.compact>.slot.lane{bottom:calc(14px / var(--cz))}#ui.compact.touch>.slot.lane{bottom:calc(24px / var(--cz));max-width:calc((100vw - 460px) / var(--cz))}#ui.compact.screen-open>.title-map{display:none}#ui.compact .screen .card{padding:12px 18px}#ui.compact .card h1{margin-bottom:8px;font-size:18px}#ui.compact .card .row{padding:1px 0}#ui.compact .card .btns{margin-top:10px}#ui.compact .screen .card.results{flex-direction:column;display:flex}#ui.compact .card.results>h1{order:-3}#ui.compact .card.results>h1+.h.small{order:-2}#ui.compact .card.results>.row.total,#ui.compact .card.results>.row.total+.row{order:-1}#ui.compact .card.results>.row.total{border-top:0;margin-top:0;padding-top:0}#ui.compact .card.results>.row.total+.row{border-bottom:3px solid #f4efe24d;margin-bottom:4px;padding-bottom:6px}#ui.compact .screen .card>.btns:not(.list){background:var(--panel2);z-index:1;margin:8px -18px -12px;padding:8px 18px 12px;position:sticky;bottom:-12px}#ui.compact .screen .card>.btns.list>.btn.back{z-index:1;position:sticky;bottom:0;box-shadow:0 -6px #1c2034,0 14px #1c2034}#ui.compact .lesson-result .instr img{width:64px;height:64px}
