:root{color-scheme:light;--paper:#fff;--ink:#111;--muted:#666;--line:#e5e5e5;--action:#111;--focus:#111;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-size:17px}
*{box-sizing:border-box}body{margin:0}main{max-width:480px;margin:0 auto;padding:56px 24px 24px;padding-bottom:max(24px,env(safe-area-inset-bottom))}header{margin-bottom:48px}h1{font-size:44px;letter-spacing:-.03em;line-height:1.1;margin:0;font-weight:650}h2{font-size:22px;line-height:1.25;margin:0 0 10px;font-weight:600}p{line-height:1.5;margin:0 0 20px}label{display:block;margin:28px 0 9px;font-weight:500}input{width:100%;font:inherit;border:1px solid #888;background:#fff;border-radius:12px;padding:15px;color:var(--ink);caret-color:var(--ink)}button{font:inherit;font-weight:600;cursor:pointer;touch-action:manipulation;border:0;border-radius:12px;background:var(--action);color:#fff;min-height:52px;padding:15px 18px}button:hover:not(:disabled){background:#333}button:disabled{cursor:default;background:#ddd;color:#777}button:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:5px}form button{width:100%;margin:16px 0 24px}.connection{display:flex;align-items:center;gap:9px;font-size:14px;min-height:24px;color:var(--muted)}.dot{width:7px;height:7px;border:1px solid #777;border-radius:50%;flex-shrink:0}.dot.online{background:#111;border-color:#111}.slider{position:relative;height:78px;margin:28px 0 36px;background:#f1f1f1;border-radius:16px;user-select:none;-webkit-user-select:none}.slider>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:60px;font-size:14px;font-weight:500;color:#444;pointer-events:none}.thumb{position:absolute;left:6px;top:6px;width:66px;height:66px;min-height:0;padding:20px;border-radius:12px;touch-action:none;transition:transform 180ms ease-out;-webkit-touch-callout:none}.thumb svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.dragging .thumb{transition:none;cursor:grabbing}.slider[data-disabled="true"]>span{color:#666}.result{min-height:92px;padding-bottom:24px;border-bottom:1px solid var(--line)}.result h2{font-size:17px;font-weight:500;margin:0}.result p{font-size:14px;margin:8px 0 0;color:var(--muted)}.result p:empty,.result h2:empty{display:none}time{display:block;font-size:13px;margin-top:8px;color:var(--muted);font-variant-numeric:tabular-nums}footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin-top:20px}.text-button{padding:10px 0;background:transparent;color:var(--muted);font-size:12px;font-weight:400;border-radius:4px;min-height:44px;text-decoration:underline;text-underline-offset:4px}.text-button:hover:not(:disabled){background:transparent;color:var(--ink)}#message{padding:20px 0;color:var(--ink);font-size:15px}#initial{color:var(--muted)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}::selection{background:#111;color:#fff}@media(max-width:360px){main{padding:36px 18px 20px}.slider>span{font-size:12px;padding-left:62px}h1{font-size:38px}}@media(min-width:800px){main{padding-top:88px}}@media(prefers-reduced-motion:reduce){.thumb{transition:none}}
/* Keep the action in thumb reach without fixing it over content or the keyboard. */
main{min-height:100svh;display:flex;flex-direction:column}header{margin-bottom:28px}#control{display:flex;flex-direction:column;flex:1}.action-area{margin-top:auto;padding-top:clamp(80px,22svh,240px)}.slider{--progress:0;--travel:250px;margin:24px 0 28px;background:color-mix(in srgb,#f1f1f1, #cce9d8 calc(var(--progress)*100%));transition:background-color 220ms ease,box-shadow 220ms ease}.slider>span{padding-left:60px;padding-right:62px;font-size:13px;line-height:1.3;text-align:center}.thumb,.thumb:hover:not(:disabled){background:color-mix(in srgb,#111,#187347 calc(var(--progress)*100%));transition:transform 260ms cubic-bezier(.2,.8,.2,1),background-color 160ms ease;color:#fff}.thumb:disabled{background:#ddd;color:#777}.dragging .thumb,.dragging .thumb:hover:not(:disabled){transition:background-color 100ms ease}.slider .target{position:absolute;right:6px;top:6px;width:66px;height:66px;border:1px dashed #b7b7b7;border-radius:12px;display:grid;place-items:center;pointer-events:none;transition:border-color 180ms ease}.target svg{width:21px;height:21px;fill:none;stroke:#a1a1a1;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}.docked .target{border-color:#187347}.docked .thumb:disabled{background:#187347;color:#fff}.guide{position:absolute;left:6px;top:6px;width:66px;height:66px;display:grid;place-items:center;border-radius:12px;border:1px solid #777;background:#fff;opacity:0;pointer-events:none;z-index:2}.guide svg{width:24px;height:24px;fill:none;stroke:#555;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.hinting .guide{animation:guide-slide 1400ms cubic-bezier(.35,0,.25,1) 2}.failed{background:#fae1e1!important;animation:shake 380ms ease-in-out}.failed .thumb{background:#b32626!important}.success-text{color:#187347}.error-text{color:#b32626}.result{min-height:86px}.result p{color:#b32626}footer{margin-top:12px}.slider[data-disabled="true"]:not(.docked){background:#f1f1f1}#message{color:#b32626}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes guide-slide{0%,12%{transform:translateX(0);opacity:0}24%{opacity:.35}72%{transform:translateX(var(--travel));opacity:.35}90%,100%{transform:translateX(var(--travel));opacity:0}}
@media(max-width:360px){.slider>span{font-size:12px;padding-left:68px;padding-right:68px}.action-area{padding-top:80px}}@media(min-width:800px){main{min-height:760px;max-height:960px}.action-area{padding-top:140px}}
@media(prefers-reduced-motion:reduce){.slider,.thumb{transition:none}.failed,.hinting .guide{animation:none}.hinting .target{border:2px solid #777}}

/* Separate the command log from the low, fixed-height gesture area. */
#control>.result{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:110px;padding:32px 0;border:0}
.action-area{margin-top:0;padding-top:0}
.slider{margin:24px 0 114px}
.slider>span{clip-path:inset(0 0 0 72px);transition:clip-path 260ms cubic-bezier(.2,.8,.2,1)}
.dragging>span{transition:none}
.thumb{z-index:3}
.slider .target{border:0;background:color-mix(in srgb,#e7e7e7,#b9ddc9 calc(var(--progress)*100%));overflow:hidden}
.target svg{width:40px;height:32px;stroke:#858d88;stroke-width:1.4;fill:none}
.target .gate-posts{stroke-width:2.8;stroke-linecap:round}
.target rect{fill:rgb(100 120 108 / 6%)}
.target .gate-left{transform-origin:6px 17px}
.target .gate-right{transform-origin:34px 17px}
.target .gate-left,.target .gate-right{transform:scaleX(var(--gate-scale,1));transition:transform 260ms cubic-bezier(.2,.8,.2,1)}
.dragging .target g{transition:none}
.little-car{position:absolute;left:12px;top:24px;width:46px;height:30px;fill:none;color:#236541;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:var(--car-opacity,0);transform:translateX(var(--car-x,0px));transition:opacity 180ms ease,transform 260ms cubic-bezier(.2,.8,.2,1)}
.car-body{transform:translateY(var(--suspension,0px))}
.car-shell{fill:currentColor;stroke:none}
.car-window{fill:#eff8f2;stroke:none}
.car-detail{stroke:#eff8f2;stroke-width:1;opacity:.75}
.car-wheel{transform-box:fill-box;transform-origin:center;transform:rotate(var(--wheel-angle,0deg))}
.car-wheel circle{fill:currentColor;stroke:none}
.car-wheel path{stroke:#eff8f2;stroke-width:1}
.dragging .little-car{transition:opacity 100ms ease}
.failed .little-car{opacity:0}
@media(prefers-reduced-motion:reduce){.slider>span,.target .gate-left,.target .gate-right{transition:none}.target .gate-left,.target .gate-right{transform:none}.hinting .target{border:0;background:#d7d7d7}.little-car{display:none}}