/* ── App mockups (pure CSS/SVG, animated) ─────────────────────────── */
.mocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin:40px 0 8px;justify-items:center}
.mock{width:100%;max-width:230px;text-align:center}
.mock figcaption{margin-top:12px;font-size:.9rem;color:var(--dim)}
.mock figcaption strong{display:block;color:var(--text);font-size:.95rem;margin-bottom:2px}
.phone{position:relative;aspect-ratio:390/844;width:100%;border-radius:38px;background:#000;padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px #2a2f36 inset}
.phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:34%;height:22px;background:#000;border-radius:14px;z-index:3}
.screen{position:absolute;inset:8px;border-radius:32px;overflow:hidden;background:#284BA6}
.screen svg{display:block;width:100%;height:100%}
.ui{position:absolute;inset:0;text-align:left;font-family:Prompt,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC",sans-serif;color:#fff;pointer-events:none}
.chip{position:absolute;top:44px;left:12px;background:#284BA6;border:1px solid #FFFFFF47;border-radius:999px;padding:5px 10px;font-size:9px;font-weight:700;display:flex;align-items:center;gap:5px}
.chip i{width:6px;height:6px;border-radius:50%;background:#94BD39}
.tabs{position:absolute;left:0;right:0;bottom:0;height:46px;background:#284BA6;border-top:1px solid #252B33;display:flex;justify-content:space-around;align-items:center;font-size:7px;color:#FFFFFFCC}
.tabs span{display:flex;flex-direction:column;align-items:center;gap:3px}
.tabs b{width:12px;height:12px;border-radius:3px;background:#FFFFFF66}
.tabs .on{color:#E34809}.tabs .on b{background:#E34809}
.cta{position:absolute;left:10px;right:10px;bottom:56px;display:flex;gap:6px}
.cta .b{flex:1;background:#E34809;color:#FFFFFF;font-weight:800;font-size:10px;border-radius:999px;padding:9px 0;text-align:center}
.cta .g{flex:0 0 38%;background:#284BA6;color:#fff;font-weight:700;font-size:10px;border-radius:999px;padding:9px 0;text-align:center;border:1px solid #FFFFFF47}
/* run HUD */
.hud{position:absolute;top:44px;left:10px;right:10px;background:rgba(40,75,166,.96);border:1px solid #FFFFFF47;border-radius:16px;padding:10px 12px}
.hud .big{font-size:30px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1}
.hud .unit{font-size:8px;color:#FFFFFFD9;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.hud .row{display:flex;gap:14px;margin-top:8px}
.hud .row div{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.hud .row small{display:block;font-size:7px;color:#FFFFFFD9;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.runctl{position:absolute;left:10px;right:10px;bottom:56px;display:flex;gap:6px}
.runctl .p{flex:1;background:#284BA6;border:1px solid #FFFFFF47;color:#fff;border-radius:999px;padding:9px 0;text-align:center;font-size:10px;font-weight:700}
.runctl .s{flex:0 0 32%;background:#E5484D;color:#fff;border-radius:999px;padding:9px 0;text-align:center;font-size:10px;font-weight:700}
/* radar list */
.list{position:absolute;top:40px;left:10px;right:10px;bottom:52px;overflow:hidden}
.list h4{font-size:13px;font-weight:800;margin:0 0 2px}
.list .sub{font-size:8px;color:#FFFFFFD9;margin-bottom:8px}
.list .sec{font-size:8px;color:#FFFFFFD9;font-weight:700;margin:8px 0 5px;text-transform:uppercase;letter-spacing:.06em}
.mock .card{background:#284BA6;border:1px solid #FFFFFF47;border-radius:12px;padding:8px;display:flex;gap:8px;align-items:center;margin-bottom:6px}
.mock .card .av{width:24px;height:24px;border-radius:50%;background:#E34809;color:#FFFFFF;font-weight:800;font-size:11px;display:grid;place-items:center;flex:none}
.mock .card .av.f{background:#94BD39}
.mock .card .t{flex:1;min-width:0}
.mock .card .t b{display:block;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock .card .t span{font-size:7.5px;color:#FFFFFFD9}
.mock .card .j{font-size:8px;font-weight:800;color:#E34809}
.mock .card .live{width:6px;height:6px;border-radius:50%;background:#E34809;animation:blink 1.2s infinite}
/* mission card */
.mcard{position:absolute;left:10px;right:10px;bottom:56px;background:#284BA6;border:1px solid #FFFFFF47;border-radius:14px;padding:10px;display:flex;gap:10px;align-items:center}
.mcard .logo{width:34px;height:34px;border-radius:10px;background:#ED8DD0;display:grid;place-items:center;flex:none}
.mcard .t{flex:1;min-width:0}
.mcard .t small{display:block;font-size:7px;color:#FFFFFF;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.mcard .t b{display:block;font-size:10px;margin:1px 0}
.mcard .t span{font-size:7px;color:#FFFFFFD9;line-height:1.3;display:block}
.ring{width:30px;height:30px;flex:none;border-radius:50%;background:conic-gradient(#FFB020 var(--p,60%),#252B33 0);display:grid;place-items:center;font-size:7px;font-weight:800}
.ring i{width:22px;height:22px;border-radius:50%;background:#284BA6;display:grid;place-items:center;font-style:normal}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.2);opacity:0}}
@keyframes dash{to{stroke-dashoffset:0}}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.8s ease-out infinite}
.route{stroke-dasharray:900;stroke-dashoffset:900;animation:dash 6s linear infinite}
.mover{offset-path:path("M60 560 C 90 500, 140 520, 170 460 S 230 380, 250 330 S 300 250, 330 220");animation:move 6s linear infinite}
@keyframes move{from{offset-distance:0%}to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.pulse,.route,.mover,.mock .card .live{animation:none}.route{stroke-dashoffset:0}}

/* ── real map inside phone ── */
.gl{position:absolute;inset:0}
.gl .mapboxgl-ctrl-attrib{font-size:7px;opacity:.6}
.gl .mapboxgl-ctrl-top-right{top:34px}
.gl-dot{position:relative;width:14px;height:14px}
.gl-dot i{position:absolute;inset:-6px;border-radius:50%;background:var(--c);opacity:.35;animation:pulse 1.8s ease-out infinite}
.gl-dot b{position:absolute;inset:0;border-radius:50%;background:var(--c);border:2px solid #284BA6}
.gl-dot.big{width:16px;height:16px}
.gl-shop{width:32px;height:32px;border-radius:50%;background:#ED8DD0;border:3px solid #284BA6;display:grid;place-items:center;position:relative}
.gl-shop.on::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:#ED8DD0;opacity:.35;animation:pulse 1.8s ease-out infinite;z-index:-1}

.tabs .run-entry b{width:32px;height:32px;border-radius:50%;background:#E34809;display:grid;place-items:center;color:#FFFFFF;font-family:Prompt,sans-serif;font-weight:700;font-size:19px;margin:-11px auto 4px}

/* PDF-based app chrome; phone hardware remains separate from app surfaces. */
.ui{font-family:Prompt,sans-serif}.hud{background:#284BA6;border-color:#FFFFFF47}
.hud .unit,.hud .row small{color:#FFFFFFE6}.chip{background:#284BA6;border-color:#FFFFFF47}
.tabs{background:#FFFFFF;border-color:#26262F24;color:#26262FC7}.tabs .on{color:#284BA6}
.tabs .on b{background:#284BA6}.tabs b{background:#284BA6AD}
.cta .b{color:#FFFFFF}.cta .g,.runctl .p{background:#284BA6;border-color:#FFFFFF47;color:#FFFFFF}

.tabs{background:#284BA6;border-color:#FFFFFF47;color:#FFFFFFD9}.tabs .on{color:#ED8DD0}.tabs .on b{background:#ED8DD0}.tabs b{background:#FFFFFFB3}

/* Current City canvas shell: illustration, never a live runner feed. */
.city-canvas .canvas-head{position:absolute;top:20px;left:0;right:0;padding:14px 13px 11px;background:#284BA6}.canvas-top{display:flex;justify-content:space-between;align-items:center}.canvas-top .horizontal-logo{--glyph:10px}.canvas-top .logo-glyph{border:0;padding:0;border-radius:0}.canvas-top span{border:1px solid #ffffff47;border-radius:20px;padding:4px 8px;font-size:8px}.canvas-head h4{font-size:23px;letter-spacing:-.8px;line-height:1.2;margin:9px 0 12px;color:#fff}.canvas-modes{display:flex;gap:17px;font-size:9px;color:#ffffffbd}.canvas-modes b{color:#fff;position:relative}.canvas-modes b::after{content:"";position:absolute;left:0;bottom:-6px;width:18px;height:3px;background:#ED8DD0;border-radius:2px}.canvas-summary{position:absolute;left:10px;right:10px;bottom:61px;background:#284ba6f5;padding:12px;border:1px solid #ffffff47;border-radius:17px}.canvas-summary strong{font-size:11px;display:block}.canvas-summary>span{font-size:7px;color:#e2e8fa;display:block;margin-top:6px}.pace-spectrum{display:flex;gap:4px;margin-top:9px}.pace-spectrum i{height:4px;flex:1;border-radius:8px;background:#e33732}.pace-spectrum i:nth-child(2){background:#e34809}.pace-spectrum i:nth-child(3){background:#f8cf51}.pace-spectrum i:nth-child(4){background:#31a66c}.city-canvas .tabs{height:54px;border-color:#ffffff25}.city-canvas .tabs .on{color:#ed8dd0}.city-canvas .tabs .on b{background:#ed8dd0}.city-canvas .tabs .run-entry{position:relative;color:#fff}.city-canvas .tabs .run-entry b{display:grid;place-items:center;width:32px;height:32px;margin-top:-13px;border:2px solid #fff;border-radius:50%;background:#e34809;color:#fff;font-size:18px;font-weight:700}

.city-canvas .tabs b{background:none!important;font-size:15px;line-height:16px;width:17px;height:17px;font-weight:400}.city-canvas .tabs .run-entry b{background:#e34809!important;font-size:31px;line-height:20px;font-weight:700}.landing .screen .mapboxgl-ctrl-top-right{top:144px}

.city-canvas .tabs b svg{width:17px;height:17px}.run-glyph{display:block!important;position:relative;width:19px;height:14px;overflow:hidden}.run-glyph img{position:absolute;left:0;top:-21.43px;width:19px;height:68.75px;max-width:none}