:root{--paper:#faf9fb;--ink:#24232b;--muted:#83818e;--line:#dedce5;--lime:#e6e3ee}body{background:#faf9fb;color:var(--ink)}button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #777084;outline-offset:4px}.studio-header{max-width:1420px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:25px 42px;border-bottom:1px solid #eeecf2}.brand svg{stroke:var(--ink)}.brand{font-size:27px}.header-caption{font-size:9px;letter-spacing:2px;color:#92909a}.header-library{background:none;font-size:12px}.header-library span{background:#eeeaf2;border-radius:5px;padding:3px 7px;margin-left:7px}.studio{max-width:1320px;margin:auto;padding:0 42px}.studio-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:31px 0 27px}.studio-intro h1{font-size:32px;letter-spacing:-1.3px;line-height:1.2;font-weight:500;margin:0 0 9px}.studio-intro p{margin:0;font-size:12px;color:#8a8792}.primary{background:#292630;color:white}.primary:hover{background:#4a4355}.upload-main{font-size:12px;padding:13px 19px;background:#292630}.studio-game{border:1px solid #dedbe6;border-radius:12px;box-shadow:0 5px 20px #29263004;overflow:hidden}.scene{height:clamp(500px,70dvh,790px);background:#f0edf5;position:relative}.game-top{position:absolute;left:25px;right:25px;top:22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.game-top>*{pointer-events:auto}.source-badge{font:9px 'Manrope',Arial,sans-serif;letter-spacing:1.8px;color:#93909b;border:1px solid #d8d3e0;border-radius:4px;padding:5px 8px}.circle-button{width:49px;height:49px;border-radius:50%;background:#ffffff36;border:1px solid #dad5e3;color:#24232b;display:inline-grid;place-content:center;font:26px Arial,sans-serif;line-height:1;user-select:none;touch-action:none}.circle-button:hover,.circle-button:active,.circle-button.is-held{border-color:#aaa1bc;background:#e1dce9}.game-top .circle-button{width:36px;height:36px;border:0;color:#898393;font-size:25px}.game-timer{position:absolute;top:23px;left:17%;right:17%;display:flex;align-items:center;flex-direction:column;pointer-events:none;text-align:center}.game-timer strong{font-family:'DM Sans',Arial,sans-serif;font-size:30px;font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-1px}.game-timer>span{font-size:10px;color:#94909c;margin-top:4px;overflow:hidden;text-overflow:ellipsis;max-width:95%;white-space:nowrap}.onboarding{position:absolute;left:50%;top:23%;transform:translateX(-50%);text-align:center;color:#aca6b5;pointer-events:none;width:80%}.onboarding>span{font-family:Georgia,serif;font-style:italic;font-size:23px;color:#9992a5}.onboarding p{font-size:10px;line-height:1.8;margin-top:12px}.game-bottom{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);width:min(340px,80%)}.map-head{display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.2px;color:#9a94a5;margin-bottom:4px}#mapCanvas{display:block;height:37px;width:100%;margin:0;touch-action:none}.game-controls{display:flex;justify-content:space-between;gap:13px;margin:20px 0 10px}.play-circle{font-size:19px;padding-left:3px}.restart-circle{font-size:25px}.pedal-controls{display:flex;justify-content:space-between;gap:10px}.pedal-controls button{border-radius:20px;border:0;background:#fff6;font-size:9px;padding:8px 13px;color:#8a8198;touch-action:none;min-height:32px}.pedal-controls button.is-held{background:#ded6e9;color:#241c30}.ride-status{position:absolute;top:110px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#91889d;pointer-events:none;text-align:center;white-space:nowrap}.studio-toolbar{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #ddd8e7;background:#fcfbfd;min-height:63px}.route-geometry{display:flex;flex-direction:column;gap:5px}.route-geometry>span{font-size:8px;letter-spacing:1px;color:#77707f}.route-geometry button{font-size:9px;padding:0;background:none;text-align:left;color:#8b8396}.route-geometry button:disabled{opacity:.35}.toolbar-settings{display:flex;align-items:center;gap:17px}.toolbar-settings>select{font-size:10px;color:#6e657b;border:1px solid #e6e0ed;padding:7px 5px;border-radius:4px;background:transparent}.pace-label{font-size:9px;color:#8b8396}.pace-label select{font-size:10px}.toolbar-settings .icon-button{color:#8b8396;font-size:20px}.icon-button:hover{background:#e9e4ef}.export-button{font-size:10px}.export-menu{background:#fbf9ff;bottom:35px;border-color:#ded6e9}.export-menu button:hover{background:#eee8f5}.keyboard-guide{display:flex;align-items:center;gap:22px;font-size:9px;color:#a29aa9;padding:17px 0}.keyboard-guide kbd{font-size:8px;border-color:#e4dfe9}.local-indicator{margin-left:auto;font-size:8px}.route-picker{display:grid;grid-template-columns:1.2fr 1.1fr 1fr 1fr 1fr;gap:12px;padding:24px 0 31px;align-items:center;border-bottom:1px solid #eae6ef}.route-picker h2{font-size:13px;letter-spacing:-.2px;font-weight:600;margin:0 0 6px}.route-picker p{font-size:9px;color:#a098aa;line-height:1.7;margin:0}.mini-upload{padding:15px 10px;border:1px dashed #bcb3c9;border-radius:7px;background:#f6f3fa;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:90px}.mini-upload>span{font-size:20px}.mini-upload strong{font-size:9px}.mini-upload small{font-size:7px;color:#a298ae}.mini-upload:hover,.mini-upload.drag-over{background:#eae2f4;border-color:#8e7caa}.demo-card{padding:15px 10px;min-height:90px;border-color:#e7e1ed;position:relative}.demo-card.selected{background:#f0eaf7;border-color:#c7b7da}.demo-card:hover{background:#f5eff9}.demo-icon{width:25px;height:28px;background:#e9e1f0;color:#8e7f9e;font-size:16px}.demo-card strong{font-size:10px}.demo-card small{font-size:7px;color:#aa9eb6;white-space:normal;line-height:1.5}.demo-card svg{position:absolute;right:8px;bottom:8px;width:33px;height:13px;stroke:#b1a0c7;stroke-width:1}.flow-note{padding:28px 0 33px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.flow-note>div{position:relative;padding-left:32px}.flow-note>div>span{position:absolute;left:0;top:1px;color:#a59caf;font-size:10px}.flow-note h3{font-size:11px;font-weight:600;margin:0 0 7px}.flow-note p{margin:0;font-size:9px;color:#a098a9;line-height:1.8}footer{padding:18px 0 26px;font-size:8px;border-color:#eee9f2}.footer-brand{font-size:19px}.finish-overlay{background:#f3eff8da;color:#342d3e}.finish-overlay>span{color:#9b8aaf;font-size:39px}.finish-overlay h2{font-family:Georgia,serif;font-size:34px}.finish-overlay p{color:#8b7d9a;font-size:11px}.record-badge{left:18px;bottom:auto;top:80px;background:#46374f;font-size:9px}.record-badge button{color:white}.video-ready{background:#ece4f5;border-color:#cfc0dd}.toast{background:#30263b}.analysis-status.success{color:#66507f}.analysis-status.error{color:#ad645a}.secondary{background:#ebe4f3;border-color:#d3c6e0}.secondary:hover{background:#e0d4ed}.tool-button{background:#f7f3fc;border-color:#d6cbe3}.tool-button.active,.tool-button:hover{background:#e5d9f0;border-color:#bba5cd}.tool-button.subtle{color:#9482a6}.preview-area{background:#eae5ef;border-color:#ded4e8}.preview-hint{color:#9584a5}.field input:not([type=range]),.field select{background:#fcf9ff;border-color:#d8cbe4}.field input[type=range]{accent-color:#675675}dialog{background:#faf7fd;border-color:#d2c4df}dialog::backdrop{background:#23172fa6}#compareDialog{width:940px}#compareCanvas{max-width:100%;max-height:65dvh;width:auto;height:auto;display:block;margin:20px auto;border-radius:6px}.compare-toggle{display:flex;gap:8px;align-items:center;justify-content:center;font-size:11px;color:#84728f}.compare-toggle input{accent-color:#5e4774}.library-description,.saved-route small{color:#95869f}.empty-library{border-color:#cbbbd8;color:#9c8aa8}.saved-route svg path{stroke:#9780af}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.studio-game:fullscreen{display:block;background:#f0edf5}.studio-game:fullscreen .scene{height:calc(100dvh - 64px)}.studio-game:fullscreen .studio-toolbar{height:64px}.studio-game:fullscreen .game-bottom{bottom:28px}#previewCanvas{min-width:0}#smoothValue{color:#9584a5}
@media(min-width:1500px){.scene{height:72dvh;max-height:850px}.studio{max-width:1430px}.studio-intro{padding:32px 0}.studio-header{max-width:1530px}.studio-game:fullscreen .scene{max-height:none}}
@media(max-width:1000px){.studio,.studio-header{padding-left:27px;padding-right:27px}.route-picker{grid-template-columns:repeat(4,1fr)}.route-picker-title{grid-column:1 / -1}.route-picker-title h2,.route-picker-title p{display:inline-block;margin-right:15px}.keyboard-guide{gap:16px;font-size:8px}.toolbar-settings{gap:10px}.studio-intro h1{font-size:29px}.studio-intro p{font-size:10px}}
@media(max-width:700px){.studio-header{padding:18px 19px}.brand{font-size:24px}.brand svg{width:29px}.header-caption{display:none}.header-library{font-size:10px}.studio{padding:0 16px}.studio-intro{padding:23px 0 22px;gap:15px;align-items:start}.studio-intro h1{font-size:24px;letter-spacing:-.8px;margin-bottom:8px}.studio-intro p{font-size:9px;max-width:220px;line-height:1.7}.upload-main{font-size:10px;padding:10px 13px;max-width:140px;line-height:1.6}.scene{height:clamp(500px,68dvh,720px)}.game-top{left:16px;right:16px;top:18px}.game-timer{top:18px;left:18%;right:18%}.game-timer strong{font-size:27px}.game-timer>span{font-size:8px}.source-badge{font-size:7px;letter-spacing:1px;padding:4px 6px}.studio-toolbar{padding:12px;align-items:flex-start;gap:12px}.route-geometry>span{font-size:6px;letter-spacing:.5px}.route-geometry button{font-size:8px;line-height:1.5}.toolbar-settings{flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:240px}.toolbar-settings>select{font-size:8px;padding:5px 3px}.toolbar-settings .pace-label{font-size:0}.toolbar-settings .pace-label select{font-size:9px;max-width:41px}.toolbar-settings .icon-button{min-width:23px;min-height:27px;font-size:18px}.export-button{font-size:9px}.game-bottom{width:min(300px,80%);bottom:22px}.circle-button{width:49px;height:49px}.onboarding>span{font-size:20px}.onboarding p{font-size:9px}.keyboard-guide{gap:13px;flex-wrap:wrap;font-size:7px;line-height:1.8;padding:12px 0}.keyboard-guide .local-indicator{margin-left:0}.keyboard-guide kbd{font-size:7px}.route-picker{grid-template-columns:1fr 1fr;gap:10px;padding-top:17px}.route-picker-title h2{font-size:13px}.route-picker-title p{font-size:9px}.mini-upload,.demo-card{min-height:95px}.mini-upload strong{font-size:10px}.mini-upload small{font-size:8px}.demo-card{padding:14px;gap:9px}.demo-card strong{font-size:11px}.demo-card small{font-size:9px}.demo-card svg{display:block;width:36px;height:14px}.demo-icon{width:29px;height:32px}.flow-note{grid-template-columns:1fr;gap:23px;padding:27px 0}.flow-note h3{font-size:12px}.flow-note p{font-size:10px}.flow-note>div>span{font-size:11px}.flow-note>div{padding-left:35px}footer{font-size:7px;gap:10px}.footer-brand{font-size:18px}.ride-status{font-size:8px;top:93px}.studio-game:fullscreen .studio-toolbar{display:none}.studio-game:fullscreen .scene{height:100dvh}.studio-game:fullscreen .game-bottom{bottom:max(24px,env(safe-area-inset-bottom))}}
@media(max-width:420px){.studio-intro h1{font-size:22px}.studio-intro p{max-width:195px;font-size:8px}.upload-main{font-size:9px;max-width:120px;padding:9px 11px}.studio-toolbar{display:grid;grid-template-columns:1fr auto}.toolbar-settings{max-width:190px;gap:7px}.toolbar-settings>select{max-width:118px}.scene{height:520px}.source-badge{font-size:6px}.keyboard-guide{gap:10px}.keyboard-guide .local-indicator{display:none}.game-timer>span{font-size:7px}.studio-game{border-radius:9px}.studio-header{padding:17px}.studio-intro{padding:20px 0}}
.scene.is-recording .game-timer,.scene.is-recording #mapCanvas{opacity:0}
.recognition-options{margin:0 0 18px;color:#84728f;font-size:10px}.recognition-options summary{cursor:pointer;padding:8px 0}.recognition-options[open] summary{margin-bottom:10px}.recognition-options .field{margin-bottom:14px}.recognition-options .edit-tools{margin-top:0}.recognition-review{display:block;margin:18px auto 0;font-size:11px;color:#84728f}#uploadDialog .upload-settings{display:block}#uploadDialog .field{grid-column:auto;grid-row:auto}#uploadDialog{max-height:94dvh}.upload-settings .small-muted{line-height:1.7}.source-badge{max-width:155px}
@media(max-width:650px){#uploadDialog .upload-settings{display:flex;flex-direction:column}#uploadDialog .upload-settings>.field{width:100%}#uploadDialog .preview-area{min-height:180px}.recognition-options{width:100%}.recognition-options .edit-tools{display:grid}#compareDialog .modal-header h2{font-size:23px}}

/* Keep the main screen focused on the ride and its controls. */
.studio-intro h1{margin:0}.route-picker{display:flex;justify-content:flex-end;gap:0;border-bottom:0;padding:16px 0 28px}.route-picker .mini-upload{width:min(220px,100%);flex:0 1 220px}

/* A ride appears only after a personal route is available. */
.empty-state{position:absolute;inset:0;display:grid;place-items:center}.empty-state .primary{padding:15px 22px}.scene.is-empty{height:clamp(300px,48dvh,500px)}.scene.is-empty> :not(.empty-state){visibility:hidden}.studio-game:has(.scene.is-empty) .studio-toolbar,.studio-game:has(.scene.is-empty)+.keyboard-guide{display:none}