*{box-sizing:border-box} :root{font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#0a1424;background:#e8eef4;font-synthesis:none}body{margin:0}button,select,input{font:inherit}button,select{cursor:pointer}button{border:0;background:none;color:inherit;transition:background .18s,box-shadow .18s}button:hover{background:#dce7ef}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #0e8fad;outline-offset:4px}#viewer{height:100svh;min-height:480px;position:relative;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:32px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:2}.brand{display:flex;gap:14px;align-items:center}.brand-mark{display:grid;place-items:center;background:#0d1a28;color:#f2f5ef;width:42px;height:46px;border-radius:9px;font-size:28px}.brand p{font-size:9px;letter-spacing:.8px;margin:0 0 7px;color:#5c6f86;font-weight:600}h1{font-size:20px;font-weight:550;letter-spacing:2px;margin:0}.edition{font-size:11px;color:#5c6f86;display:flex;align-items:center;gap:7px}.edition i,.status i{height:6px;width:6px;border-radius:50%;background:#0e8fad;display:inline-block}.views{position:absolute;top:118px;left:36px;display:flex;align-items:center;gap:3px;padding:5px;background:#fff9;border:1px solid #fff;border-radius:9px;backdrop-filter:blur(14px);z-index:2}.views button{font-size:12px;padding:8px 15px;border-radius:6px}.views button.selected{background:#fff;box-shadow:0 2px 5px #132a3012;color:#0a6f88}.views span{height:15px;width:1px;background:#d9dfdc;margin:0 4px}.side-tools{position:absolute;right:30px;top:46%;display:flex;flex-direction:column;gap:8px;z-index:2}.side-tools button{height:38px;width:38px;background:#ffffffad;border:1px solid #fff;border-radius:9px;font-size:22px}.viewport-hint{position:absolute;bottom:177px;left:0;right:0;text-align:center;color:#5c6f86;font-size:10px;letter-spacing:1px;pointer-events:none}.viewport-hint span{padding:0 9px}.controls{position:absolute;bottom:49px;left:50%;transform:translateX(-50%);width:min(710px,calc(100% - 64px));background:#ffffffeb;border:1px solid #fff;border-radius:13px;padding:15px 21px 16px;box-shadow:0 14px 45px #1e343614;backdrop-filter:blur(16px);z-index:2}.control-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#7c8985;letter-spacing:.7px}.status{display:flex;align-items:center;gap:7px;color:#243447}.status i.running{background:#0e8fad;box-shadow:0 0 0 3px #0e8fad12}#time{font-variant-numeric:tabular-nums;font-size:10px}#timeline{display:block;appearance:none;width:100%;height:3px;margin:14px 0 17px;background:linear-gradient(to right,#0e8fad 0%,#e7ece8 0%);border-radius:3px;cursor:pointer}#timeline::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:#0e8fad;box-shadow:0 0 0 3px #fff}#timeline::-moz-range-thumb{width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#0e8fad}.control-bottom,.stages,.playback{display:flex;align-items:center}.control-bottom{justify-content:space-between;gap:12px}.stages{gap:5px}.stages button{font-size:12px;padding:10px 15px;border-radius:7px;white-space:nowrap}.stages .primary{background:#0a6f88;color:white;padding:10px 18px;margin-right:8px;font-size:11px}.primary span{margin-left:7px}.stages .primary:hover{background:#0e8fad}.stages button.active:not(.primary){background:#daeef3;color:#0a6f88}.playback{gap:4px;border-left:1px solid #e7eae8;padding-left:12px}.playback button{width:32px;height:33px;border-radius:5px;font-size:17px}#pause{font-size:12px}select{border:none;background:transparent;color:#5c6f86;font-size:11px;padding:6px 3px;border-radius:4px}footer{position:absolute;bottom:19px;left:36px;right:36px;display:flex;justify-content:space-between;font-size:9px;color:#92a098;letter-spacing:1.5px;pointer-events:none}footer span:last-child{letter-spacing:.5px}#loading{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:13px;background:#e8eef4;color:#648072;font-size:13px}.spinner{width:18px;height:18px;border:2px solid #cbd8d0;border-top-color:#386650;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:1px solid #fff;border-radius:15px;box-shadow:0 20px 90px #0e282a33;background:#f6f8f6;width:min(980px,90vw);padding:22px;color:#294134}dialog::backdrop{background:#20332c66;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.dialog-head h2{font-size:15px;font-weight:500;margin:0}.dialog-head button{border-radius:6px;padding:6px 10px}.reference-images{display:grid;grid-template-columns:1fr 1fr;gap:15px}figure{margin:0}figure img{width:100%;border-radius:6px}figcaption{font-size:12px;margin-top:8px;color:#728075}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:650px){header{top:23px;left:20px;right:20px}.brand-mark{width:33px;height:38px;font-size:24px}.brand{gap:10px}.brand p{font-size:8px;letter-spacing:.2px}.edition{display:none}h1{font-size:16px;letter-spacing:1px}.edition{font-size:9px;max-width:80px;line-height:1.7}.views{top:91px;left:20px}.views button{padding:7px 11px;font-size:11px}.side-tools{right:16px;top:39%}.controls{bottom:45px;width:calc(100% - 28px);padding:13px 13px 12px}.control-bottom{flex-wrap:wrap;justify-content:center;gap:8px}.stages{width:100%;justify-content:space-between;gap:1px}.stages button{padding:9px 11px;font-size:11px}.stages .primary{padding:9px 11px;margin-right:2px}.playback{border:0;padding:0}.viewport-hint{bottom:219px;font-size:9px}footer{left:20px;right:20px;font-size:8px;bottom:17px}.reference-images{grid-template-columns:1fr}dialog{max-height:85svh;overflow:auto}}
@media(prefers-reduced-motion:reduce){button{transition:none}.spinner{animation:none}}
.mobile-hint{display:none}@media(max-width:650px){.desktop-hint{display:none}.mobile-hint{display:block}}

/* Match JIAHE AUTOS: blue-grey surfaces, cyan accents and square controls. */
a{color:inherit;text-decoration:none}.brand-mark{width:88px;height:40px;border-radius:2px;padding:6px}.brand-mark img{width:100%;height:auto}.brand h1{font-size:18px;letter-spacing:.5px}.brand p{font-family:ui-monospace,monospace;font-size:9px}.views,.views button,.controls,.stages button,.playback button,.side-tools button,select{border-radius:2px}.views,.controls{border-color:#c8d5e0}.controls{box-shadow:0 8px 28px #0710180c}.controls .primary{background:#0a6f88}header .edition{pointer-events:auto}.brand-mark{pointer-events:auto}.mobile-hint{display:none}
.embedded header,.embedded footer{display:none}.embedded .views{top:20px;left:22px}.embedded .controls{bottom:22px}.embedded .viewport-hint{bottom:149px}.embedded .side-tools{right:18px}
@media(max-width:650px){.brand-mark{width:66px}.brand h1{font-size:14px}.brand p{font-size:7px}.desktop-hint{display:none}.mobile-hint{display:block}.embedded .views{top:14px;left:14px}.embedded .controls{bottom:14px}.embedded .viewport-hint{bottom:179px}.stages button{padding:10px 7px}.stages .primary{padding:10px 8px}.stages{flex-wrap:wrap;gap:4px}.views button{padding:8px 9px}.control-bottom{gap:6px}.side-tools button{width:36px;height:36px}.controls{width:calc(100% - 24px);padding:12px}.stages .primary{font-size:10px}}
