.tool-touch{--tc1:#ffe400;--tc2:#2fd18e;--tc3:#ff8a5c;--tc4:#62c4ff;--tc5:#d48cff;--tc6:#f2f2f2;--tc7:#ffb547;--tc8:#6ff0cf;--tc9:#ff7ab8;--tc10:#b8e45a}.touch-bay{justify-content:center;padding:2px 0 20px;display:flex}.touch-case{background:linear-gradient(#474747,#343434);border-radius:20px;width:100%;max-width:100%;padding:14px;position:relative;box-shadow:inset 0 1px #ffffff1a,inset 0 -2px #0006,0 2px #141414,0 22px 30px -14px #000c}.touch-screen{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:crosshair;background:radial-gradient(120% 80% at 20% 0,#ffffff0a,#0000 55%),#0b0b0b;border-radius:8px;width:100%;max-width:100%;height:min(60vh,520px);margin:0 auto;position:relative;overflow:hidden;box-shadow:inset 0 3px 12px #000000f2,inset 0 0 0 1px #050505,0 1px #ffffff12}.touch-screen canvas,.touch-lsurface canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.touch-idle{text-align:center;color:#e6e6e6;pointer-events:none;text-wrap:balance;place-content:center;justify-items:center;gap:12px;padding:24px;font-size:16.5px;font-weight:600;line-height:1.45;display:grid;position:absolute;inset:0}.touch-idle-txt{background:#0b0b0bb8;border-radius:10px;max-width:24em;padding:10px 14px}.touch-idle-btn{pointer-events:auto;margin-top:4px}.touch-idle-ic{width:54px;height:54px;color:var(--yellow);background:#ffe4001a;border-radius:50%;place-items:center;display:grid;box-shadow:0 0 0 1px #ffe40073,0 0 22px #ffe40033}.touch-idle-ic .ic{width:28px;height:28px}.touch-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 18px;padding:2px 4px 4px;display:flex}.touch-ghost{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.touch-verdict{text-align:center;justify-content:center;margin:18px 0 20px;padding:0 4px}.touch-verdict span{max-width:52em}.touch-sw{background:#1b1b1b;border-radius:3px;width:16px;height:13px;display:inline-block;box-shadow:inset 0 0 0 1px #3a3a3a}.touch-sw.ok{background:#14a76cb3;box-shadow:0 0 6px #14a76c80}.touch-sw.edge{background:#ffe40029;box-shadow:inset 0 0 0 1px #ffe40099}.touch-sw.miss{background:#ff652f59;box-shadow:inset 0 0 0 1px #ff652fe6}.touch-slots{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:16px;padding:4px 0;display:grid}.touch-slot{color:#6f6f6f;border-top:1px solid #1f1f1f;border-left:1px solid #1f1f1f;grid-template-columns:12px auto minmax(0,1fr);align-items:center;gap:8px;min-height:46px;padding:8px 14px;font-family:Barlow Semi Condensed,"Barlow SC Fallback",sans-serif;font-size:13.5px;font-weight:600;display:grid}.touch-slot:nth-child(-n+5){border-top:0}.touch-slot:nth-child(5n+1){border-left:0}.touch-slot b{color:#8a8a8a;font-size:15px}.touch-slot-v{text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden}.touch-dot{background:#2b2b2b;border-radius:50%;width:10px;height:10px;box-shadow:inset 0 0 0 1px #3d3d3d}.touch-slot.on{color:#f0f0f0}.touch-slot.on b{color:var(--c,#fff)}.touch-slot.on .touch-dot{background:var(--c);box-shadow:0 0 8px var(--c)}.touch-slot.over{opacity:.45}.touch-slot[data-slot="1"]{--c:var(--tc1)}.touch-slot[data-slot="2"]{--c:var(--tc2)}.touch-slot[data-slot="3"]{--c:var(--tc3)}.touch-slot[data-slot="4"]{--c:var(--tc4)}.touch-slot[data-slot="5"]{--c:var(--tc5)}.touch-slot[data-slot="6"]{--c:var(--tc6)}.touch-slot[data-slot="7"]{--c:var(--tc7)}.touch-slot[data-slot="8"]{--c:var(--tc8)}.touch-slot[data-slot="9"]{--c:var(--tc9)}.touch-slot[data-slot="10"]{--c:var(--tc10)}.touch-runs{margin-top:16px;padding:0 4px}.touch-runs>.label{margin-bottom:8px;display:block}.touch-run{color:#dcdcdc;background:#1b1b1b;border-radius:9px;grid-template-columns:10px auto auto minmax(0,1fr);align-items:center;gap:6px 12px;margin-bottom:8px;padding:10px 14px;font-size:15px;display:grid;box-shadow:inset 0 0 0 1px #2e2e2e}.touch-run b{color:#fff}.touch-run span:last-child{color:#bdbdbd}.touch-log{margin-top:16px}.touch-log summary{cursor:pointer;padding:4px 4px 10px;display:inline-block}.touch-log .log:empty:before{content:"Touch the area above to see each touch here.";color:#6f7f77}.touch-log .row.ghost span:last-child{color:#ffb08f}html.touch-locked,html.touch-locked body{overflow:hidden}.touch-layer{z-index:100;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#050505;position:fixed;inset:0}.touch-lsurface{touch-action:none;position:absolute;inset:0}.touch-layer.no-cursor,.touch-layer.no-cursor *{cursor:none}.touch-pill{color:#eee;white-space:nowrap;pointer-events:none;background:#111c;border-radius:999px;padding:6px 14px;font-family:Barlow Semi Condensed,"Barlow SC Fallback",sans-serif;font-size:14px;font-weight:600;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #333}.touch-pill:empty,.touch-layer[data-kind=ghost] .touch-pill{display:none}.touch-card{color:#e6e6e6;text-align:center;pointer-events:none;background:#202020ed;border-radius:14px;width:min(430px,100% - 32px);max-height:calc(100% - 32px);padding:22px 22px 20px;font-size:15.5px;line-height:1.5;position:absolute;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%);box-shadow:inset 0 1px #ffffff14,0 0 0 1px #3a3a3a,0 20px 50px #000000b3}.touch-card p{color:#cfcfcf;margin:10px 0 0}.touch-card button{pointer-events:auto}.touch-card-title{color:#fff;justify-content:center;align-items:center;gap:10px;font-size:20px;font-weight:800;line-height:1.25;display:flex}.touch-card-title .led{width:10px;height:10px}.touch-card-btns{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px;display:flex}.touch-big{color:var(--yellow);text-shadow:0 0 12px #ffe40073;font-family:DSEG7,monospace;font-size:54px;font-weight:700;line-height:1.1}.touch-card p.touch-big{color:var(--yellow);margin-top:16px}.touch-card p.touch-count{color:#2fd18e;font-weight:700}.touch-card p.touch-count.bad{color:#ff8a5c}.touch-card p.touch-small{color:#a9a9a9;font-size:14px}.touch-ghost-list{text-align:left;color:#ffcbb6;font-variant-numeric:tabular-nums;max-width:22em;margin:12px auto 0;padding:0;list-style:none}.touch-ghost-list li{border-bottom:1px solid #2c2c2c;padding:3px 0}.touch-hold{position:relative;overflow:hidden}.touch-hold>span:last-child{position:relative}.touch-hold-fill{transform-origin:0;background:#ff652f8c;position:absolute;inset:0;transform:scaleX(0)}.touch-hold.holding .touch-hold-fill{transition:transform 1s linear;transform:scaleX(1)}@media (max-width:1080px){.touch-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.touch-strip .lcd-cell:nth-child(3n+1){border-left:0}.touch-strip .lcd-cell:nth-child(n+4){border-top:1px solid #1f1f1f}}@media (max-width:760px){.touch-case{border-radius:16px;padding:9px}.touch-idle{gap:10px;padding:14px;font-size:15px}.touch-idle-ic{width:44px;height:44px}.touch-actions{justify-content:stretch}.touch-actions>.btn{flex:100%}.touch-ghost{flex:100%;justify-content:space-between}.touch-ghost .btn{flex:auto}.touch-verdict{text-align:left;justify-content:flex-start}.touch-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.touch-strip .lcd-cell{border-top:1px solid #1f1f1f;border-left:0}.touch-strip .lcd-cell:first-child,.touch-strip .lcd-cell:nth-child(2){border-top:0}.touch-strip .lcd-cell:nth-child(2n){border-left:1px solid #1f1f1f}.touch-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.touch-slot{border-top:1px solid #1f1f1f;border-left:0;padding:8px 10px}.touch-slot:nth-child(-n+5){border-top:1px solid #1f1f1f}.touch-slot:nth-child(-n+2){border-top:0}.touch-slot:nth-child(2n){border-left:1px solid #1f1f1f}.touch-run{grid-template-columns:10px auto minmax(0,1fr)}.touch-run span:last-child{grid-column:2/-1}.touch-big{font-size:44px}}