@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;1,600;1,700&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101b20;--panel:#18262c;--lime:#d4ed93;--white:#f3f4e9;--muted:#8f9fa3;--line:#ffffff19;font-family:'Noto Sans TC',sans-serif;font-size:16px;color:var(--white);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button{transition:background .18s,transform .18s}button:hover{filter:brightness(1.14)}button:active{transform:translateY(1px)}#app{min-height:100dvh;display:flex;flex-direction:column}.scene{height:calc(100dvh - 272px);min-height:510px;position:relative;overflow:hidden;background:#89999c}#canvas,#canvas canvas,.vignette{position:absolute;inset:0;width:100%;height:100%}#canvas canvas{touch-action:none;display:block}.vignette{pointer-events:none;background:linear-gradient(180deg,#101b205e 0%,transparent 24%,transparent 70%,#101b2080),linear-gradient(90deg,#101b2060,transparent 40%)}header{position:absolute;top:0;left:0;right:0;padding:29px 3.4%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;color:var(--white);text-decoration:none;gap:11px}.brand svg{width:36px;height:39px;fill:var(--lime)}.brand>span:first-of-type{font:800 30px/1 sans-serif;letter-spacing:3px}.brand-small{border-left:1px solid #ffffff55;padding-left:18px;margin-left:5px;font:600 9px/1.8 sans-serif;letter-spacing:2px}.top-actions{display:flex;align-items:center;gap:12px}.live{font:600 11px sans-serif;letter-spacing:2px;margin-right:8px}.live:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime);margin-right:9px}.icon-button{height:34px;width:34px;border:1px solid #ffffff40;background:#17282b30;border-radius:50%;font-size:20px}.icon-button:last-child{font-size:15px}.session-label{position:absolute;top:100px;left:3.6%;display:flex;align-items:center;gap:9px;font-size:12px}.session-label>span:first-child{height:5px;width:5px;border-radius:50%;background:var(--lime)}.session-label .muted{font:10px sans-serif;letter-spacing:1.3px;margin-left:6px;color:#d8e0dd99}.hero-caption{position:absolute;top:34%;left:4.5%;pointer-events:none;text-shadow:0 2px 18px #0003}.eyebrow{font:600 11px sans-serif;color:var(--lime);letter-spacing:2.3px}h1{font-size:clamp(26px,3.1vw,46px);line-height:1.65;letter-spacing:4px;margin:12px 0 22px;font-weight:700}.location-line{height:1px;width:40px;background:#ffffff80;margin-bottom:20px}.location{font:600 11px sans-serif;letter-spacing:2px}.sub-location{font-size:12px;color:#e3e8daaa}.weather{font-size:11px;letter-spacing:1px;margin-top:25px;color:#fff9}.lap-hud{position:absolute;top:103px;left:50%;transform:translateX(-50%);display:flex;gap:46px;white-space:nowrap;text-align:center;text-shadow:0 2px 22px #1117}.hud-label{font:600 9px sans-serif;letter-spacing:1.3px;display:block;color:#ebefebc9}.lap-hud strong{font:italic 600 43px/1.4 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:1px}.lap-hud strong span{font-size:24px;color:#e6e6d99c}.settings{position:absolute;right:3.4%;top:152px;width:220px;padding:21px;border:1px solid #ffffff20;border-radius:12px;background:#142328c7;backdrop-filter:blur(18px);box-shadow:0 10px 35px #0001}.panel-title{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:25px}.tiny{font:9px sans-serif;letter-spacing:2px;color:var(--muted)}label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:12px;color:#d7dfdd}output{font-variant-numeric:tabular-nums}.settings output{color:var(--lime)}input[type=range]{--fill:35%;width:100%;height:3px;display:block;appearance:none;background:linear-gradient(90deg,var(--lime) var(--fill),#ffffff25 var(--fill));border-radius:5px;cursor:pointer;margin:17px 0 12px}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px #d4ed9315}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--lime)}.range-ends{display:flex;justify-content:space-between;font:10px sans-serif;color:#92a2a5}.setting-separator{height:1px;background:var(--line);margin:22px 0}select{width:100%;border:1px solid #ffffff25;background:#26353a;color:var(--white);font-size:12px;border-radius:5px;padding:9px 8px}.outfit-label{margin-top:20px}.swatches{display:flex;gap:14px}.swatch{width:22px;height:22px;border-radius:50%;border:3px solid #26353a;background:var(--swatch)}.swatch.selected{outline:1px solid var(--swatch);outline-offset:2px}.scene-bottom{position:absolute;bottom:25px;left:3.6%;right:3.6%;display:flex;align-items:center;justify-content:space-between}.venue{font:600 10px sans-serif;letter-spacing:1.5px;display:flex;align-items:center;gap:12px}.crosshair{color:var(--lime);font-size:25px}.venue small{display:block;font:11px 'Noto Sans TC',sans-serif;letter-spacing:0;color:#cfdbd0b0;margin-top:6px}.camera-switch{display:flex;gap:4px;align-items:center;padding:5px;border:1px solid #ffffff20;background:#203135d9;border-radius:8px;backdrop-filter:blur(12px);position:absolute;left:50%;transform:translateX(-50%)}.camera-switch button{background:transparent;border:0;border-radius:4px;padding:9px 15px;font-size:12px;white-space:nowrap;color:#ced9d5}.camera-switch button.active{background:#e1e8d6;color:#203135}.camera-icon{font-size:10px;color:#a8b7b5;padding:0 10px}.reset-view{background:#20313599;border:1px solid #ffffff25;border-radius:6px;padding:10px 13px;font-size:11px}.reset-view span{font-size:16px;margin-left:10px}.dashboard{display:grid;grid-template-columns:235px 1fr 235px;padding:29px 4.8% 23px;gap:28px;border-top:1px solid #ffffff12;min-height:192px;background:#101b20}.adjust-control{padding:0 24px 0 0}.speed-control{border-left:1px solid var(--line);padding:0 0 0 28px}.incline-control{border-right:1px solid var(--line)}.control-label{display:flex;align-items:center;justify-content:center;gap:8px;font:600 10px sans-serif;letter-spacing:1.7px;color:#bac6c4}.control-label span{font:10px 'Noto Sans TC',sans-serif;letter-spacing:1px;color:#718589}.control-label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}.speed-control svg{color:var(--lime);stroke-width:2.4}.adjust-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.adjust-row button{width:36px;height:36px;border:1px solid #53666b;border-radius:7px;background:#1c2b31;font-size:21px;font-weight:300}.adjust-row output{font:italic 600 42px 'Barlow Condensed','Arial Narrow',sans-serif}.adjust-row div span{font:10px sans-serif;color:#7e9094;margin-left:5px}.speed-control output{color:var(--lime)}.metrics{display:flex;flex-direction:column;justify-content:space-between;min-width:0}.main-metrics{display:flex;justify-content:space-around;text-align:center}.main-metrics strong{display:block;font:italic 600 56px/1.1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:1px;font-variant-numeric:tabular-nums}.main-metrics span{font:600 9px sans-serif;letter-spacing:1.5px;display:block;margin-top:9px;color:#bdcac8}.main-metrics em{font-style:normal;color:#708387;letter-spacing:0;margin-left:4px}.secondary-metrics{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:27px;padding-top:13px;margin-top:14px;color:#829596;font-size:10px}.secondary-metrics b{font:500 16px 'Barlow Condensed',sans-serif;color:#d9e3d7;margin-left:5px}.secondary-metrics small{font-size:9px}.secondary-metrics>span:last-child{color:#aab8a4}footer{min-height:80px;padding:17px 4.8%;background:#19262d;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-note{display:flex;align-items:center;gap:14px;font-size:12px}.footer-note small{display:block;font:9px sans-serif;letter-spacing:1px;margin-top:7px;color:#738c8e}.ring{width:25px;height:25px;border:1px solid #829d98;border-radius:50%;outline:1px solid #829d98;outline-offset:4px;margin:4px}.session-actions{display:flex;gap:10px}.primary-button{background:var(--lime);color:#26342a;border:0;padding:13px 24px;min-width:200px;border-radius:6px;font-size:14px;display:flex;justify-content:space-between;gap:40px;font-weight:600}.play-symbol{font-size:11px}.secondary-button{border:1px solid #ffffff26;background:transparent;border-radius:5px;padding:10px 15px;font-size:12px;color:#acbdbb}.shortcuts{display:flex;gap:17px;color:#809498;font-size:10px}.shortcuts span{display:flex;align-items:center;gap:5px}kbd{font:9px sans-serif;border:1px solid #ffffff25;padding:4px;border-radius:3px;color:#9fb3b4}.scene-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#101b20;font-size:14px;letter-spacing:2px;z-index:5;transition:opacity .6s}.scene-loader span{margin-left:15px;width:16px;height:16px;border:1px solid #d4ed9340;border-top-color:var(--lime);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#scene-error{position:absolute;inset:0;background:#101b20;z-index:6;padding:20%;text-align:center;line-height:1.8}#scene-error[hidden]{display:none}dialog{max-width:520px;width:calc(100% - 36px);border:1px solid #ffffff25;background:#19282e;color:#e7eee1;border-radius:16px;padding:35px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#091318aa;backdrop-filter:blur(7px)}dialog h2{font-size:25px;margin:22px 0}dialog p{font-size:14px;line-height:1.9;color:#b1c1c0}dialog .eyebrow{font-size:10px;color:var(--lime)}.dialog-close{position:absolute;top:13px;right:17px;border:0;background:transparent;font-size:25px;color:#b1c1c0}.help-note{border-top:1px solid var(--line);padding-top:15px}.help-keys{font-size:11px;color:#bdcbc4;margin-top:22px}
@media(min-width:1700px){.scene{min-height:590px}.settings{top:185px;width:245px;padding:25px}.hero-caption{top:35%}.lap-hud{top:128px;gap:65px}.lap-hud strong{font-size:52px}.dashboard{grid-template-columns:280px 1fr 280px}.main-metrics strong{font-size:62px}}
@media(max-width:1100px){.hero-caption{left:4%;top:39%}h1{font-size:28px}.settings{width:180px;right:3%;padding:15px;top:155px}.lap-hud{gap:24px;top:108px}.lap-hud strong{font-size:36px}.hud-label{font-size:8px}.dashboard{grid-template-columns:185px 1fr 185px;gap:18px;padding:25px 3%}.adjust-control{padding-right:18px}.speed-control{padding:0 0 0 18px}.secondary-metrics{gap:17px}.secondary-metrics>span:last-child{display:none}.main-metrics strong{font-size:47px}.shortcuts{display:none}.scene-bottom .venue{max-width:200px;font-size:9px}.camera-switch button{padding:9px 10px}.camera-icon{display:none}.reset-view{font-size:10px}.brand-small{display:none}}
@media(max-width:700px){.scene{height:64dvh;min-height:535px}header{padding:20px}.brand>span:first-of-type{font-size:23px}.brand svg{width:28px}.top-actions{gap:8px}.live{font-size:9px;margin-right:0}.session-label{left:22px;top:80px;font-size:10px}.session-label .muted{font-size:8px}.lap-hud{top:114px;width:calc(100% - 44px);justify-content:space-between;gap:10px}.hud-label{font-size:8px;letter-spacing:.6px}.lap-hud strong{font-size:34px}.hero-caption{top:194px;left:22px}h1{font-size:22px;line-height:1.6;letter-spacing:2px;margin-bottom:10px}.eyebrow{font-size:8px;letter-spacing:1.3px}.location-line,.location,.sub-location,.weather{display:none}.settings{top:196px;right:16px;width:143px;padding:12px;background:#142328aa}.panel-title{margin-bottom:15px;font-size:12px}.tiny{font-size:8px}.settings label{font-size:11px;margin-bottom:8px}.range-ends{font-size:8px}.setting-separator{margin:14px 0}.settings select{padding:7px 4px;font-size:11px}.outfit-label{margin-top:12px}.swatches{gap:10px}.swatch{width:19px;height:19px}.scene-bottom{bottom:18px;left:18px;right:18px;justify-content:center}.scene-bottom .venue,.reset-view{display:none}.camera-switch{position:static;transform:none}.camera-switch button{padding:9px 17px;font-size:11px}.dashboard{grid-template-columns:1fr 1fr;gap:23px;padding:22px 22px 18px}.metrics{grid-column:1/-1;grid-row:1}.main-metrics strong{font-size:45px}.main-metrics span{font-size:8px}.secondary-metrics{padding-top:11px;margin-top:13px;font-size:10px}.adjust-control{border:0;padding:0}.incline-control{padding-right:22px;border-right:1px solid var(--line)}.speed-control{padding-left:0}.adjust-row{margin-top:8px}.adjust-row output{font-size:36px}.adjust-row button{width:32px;height:32px}.control-label{font-size:9px;gap:7px}.control-label span{font-size:9px}.adjust-control input{margin-top:14px}.adjust-control .range-ends{font-size:9px}footer{padding:17px 22px;min-height:83px;justify-content:center}.footer-note{display:none}.session-actions{width:100%;justify-content:center}.primary-button{flex:1;max-width:280px}.secondary-button{font-size:11px}.help-keys{line-height:2}dialog{padding:28px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}.scene-loader span{animation:none}}