:root{--ink:#754958;--muted:#ad8390;--pink:#d66984;--line:#dcb7c2;--paper:#f9e8e8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'PingFang SC','Microsoft YaHei',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #bc5672;outline-offset:5px}header{height:55px}main{position:relative;isolation:isolate;overflow:hidden;min-height:620px;padding:38px 5% 30px;background:radial-gradient(ellipse at 52% 45%,#fff9ed 0,#fae6e7 50%,#f0d3dc 100%)}.parking-floor{position:absolute;z-index:-1;inset:55% -30% -70%;background:repeating-linear-gradient(90deg,transparent 0 215px,#fff7eea0 215px 219px,transparent 219px 435px),linear-gradient(#e8c0ce,#f8e1e4);transform:perspective(380px) rotateX(44deg);transform-origin:center top;border-top:1px solid #ddb0c1}.display-stage{position:relative;display:grid;grid-template-columns:160px minmax(0,820px) 260px;align-items:center;gap:28px;max-width:1320px;margin:auto}.thumbnail-panel{align-self:start;margin-top:28px;height:470px;max-height:470px;display:flex;flex-direction:column;min-width:0}.section-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;padding:0 0 14px;border-bottom:1px solid var(--line)}.section-label span:last-child{color:var(--muted);font-size:10px}.thumbnail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:auto;margin-top:16px;padding:4px;scrollbar-width:thin;scrollbar-color:#d398aa transparent;min-height:0;flex:1}.thumbnail{min-width:0;padding:4px 4px 8px;border:1px solid #e2c3ca;background:#fff7f2;border-radius:8px;text-align:left}.thumbnail[aria-current=true]{border-color:#bd6883;box-shadow:0 0 0 2px #bd688344}.thumbnail img{display:block;width:100%;height:auto;border-radius:4px}.thumbnail span{display:block;font-size:10px;color:#b77a8f;margin:7px 2px 4px}.thumbnail strong{display:block;font-size:9px;font-weight:500;line-height:1.6;margin:0 2px}.collection-note{font-size:10px;color:#b48e99;margin:23px 3px;line-height:1.8;flex-shrink:0}.car-stage{position:relative;width:100%;margin:auto}.car{position:relative;width:100%}.car-body{display:block;width:100%;height:auto}.plate-mount{position:absolute;top:57.3%;left:32.5%;width:35%;padding:0;border:2px solid #f5d7c6;background:#fee5df;border-radius:9px;box-shadow:0 2px 3px #89435466;overflow:hidden;line-height:0;transition:transform .2s}.plate-mount:hover{transform:translateY(-2px)}.plate-mount img{display:block;width:100%;height:auto;aspect-ratio:1571/1001;object-fit:contain}.parking-stop{height:11px;width:65%;margin:0 auto;border-radius:6px;background:repeating-linear-gradient(110deg,#fff5e9 0 32px,#dfa6b8 32px 64px);box-shadow:0 4px 0 #c78da0}.case-zone{text-align:center;display:flex;align-items:center;flex-direction:column;position:relative}.case-zone>img{display:block;width:155px;height:294px;object-fit:contain;filter:drop-shadow(0 12px 9px #9a5e7720)}.demo-tag{font-size:9px;color:#b38b98;letter-spacing:1px;margin-top:8px}.slide-caption{margin-top:25px}.slide-caption #number{font-size:11px;letter-spacing:2px;color:#bc8095}.slide-caption i{font-style:normal;font-size:9px;color:#bba0a9}.slide-caption h1{font-size:16px;white-space:nowrap;font-weight:600;margin:12px 0 7px}.controls{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;visibility:visible;opacity:1;flex-wrap:nowrap;gap:12px;margin:20px auto 0;padding:8px 10px;width:max-content;max-width:100%;border:1px solid #dcb7c2;border-radius:32px;background:#fff4edf2;box-shadow:0 4px 18px #75495820;white-space:nowrap}.controls button{flex-shrink:0;height:38px;border:1px solid #cd9bac;background:#fff4ed;border-radius:20px;padding:0 19px;font-size:11px}.controls #prev,.controls #next{width:38px;padding:0;font-size:20px}footer{padding:24px 12px 27px;display:flex;align-items:center;flex-direction:column;gap:12px;background:#f8e7e8}footer img{width:112px;height:auto}footer>span{font-size:8px;letter-spacing:1.5px;color:#b18b97}dialog{border:1px solid #d8a5b7;background:#fff7f0;border-radius:18px;width:min(1000px,94vw);padding:18px;color:var(--ink)}dialog::backdrop{background:#482b3bc7;backdrop-filter:blur(5px)}dialog>div{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:16px}dialog button{background:none;border:0;padding:8px}dialog>img{display:block;width:100%;max-height:80vh;object-fit:contain;border-radius:12px}
@media(min-width:621px){.car-stage{max-width:min(100%,calc((100svh - 240px)*1.333333))}}
@media(min-width:621px) and (max-height:800px){.slide-caption{margin-top:15px}footer{padding:15px}}
@media(max-width:1000px) and (min-width:621px){.display-stage{grid-template-columns:120px minmax(0,1fr) 200px;gap:16px}.case-zone>img{width:120px;height:228px}.slide-caption h1{font-size:13px}.thumbnail-grid{gap:7px}}
@media(max-width:620px){header{height:42px}main{height:calc(100svh - 42px);min-height:0;padding:8px 4% 10px;display:flex;flex-direction:column}.display-stage{width:100%;flex:1;min-height:0;grid-template-columns:76px minmax(0,1fr);grid-template-rows:30% minmax(0,1fr) 58px;gap:8px;align-items:center}.thumbnail-panel{grid-column:1;grid-row:1 / span 3;align-self:stretch;height:100%;max-height:none;margin:0}.section-label{font-size:9px;letter-spacing:0;padding-bottom:10px}.section-label span:last-child{font-size:7px}.thumbnail-grid{gap:7px;margin-top:10px;padding:3px}.thumbnail{padding:2px 2px 5px;border-radius:5px}.thumbnail span{font-size:7px;margin:4px 0}.thumbnail strong{font-size:7px;margin:0}.collection-note{font-size:8px;margin:15px 2px}.car-zone{grid-column:2;grid-row:2;height:100%;min-height:0;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.car-stage{width:min(100%,calc((100cqh - 82px)*1.32));flex-shrink:0;margin:0 auto}.plate-mount{border-width:1px;border-radius:4px}.parking-stop{height:7px}.case-zone{display:contents}.case-zone>img{grid-column:2;grid-row:1;width:auto;height:min(20svh,135px);max-width:90px;align-self:end;justify-self:center;margin-bottom:16px}.demo-tag{grid-column:2;grid-row:1;align-self:end;justify-self:center;font-size:7px;margin:0}.slide-caption{grid-column:2;grid-row:3;margin:0;text-align:center;align-self:center;position:relative;z-index:3}.slide-caption h1{font-size:13px;margin:6px 0 4px}.slide-caption #number{font-size:9px}.controls{flex:0 0 auto;margin:0;gap:8px;padding:6px 8px}.controls button{height:34px;padding:0 10px;font-size:9px}.controls #prev,.controls #next{height:34px;width:30px}.parking-floor{inset:48% -60% -60%}footer{padding:20px 10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Landscape case artwork keeps its native orientation and transparent silhouette. */
.case-zone>img.is-landscape{width:100%;max-width:280px;height:auto;aspect-ratio:2.05;object-fit:contain;filter:drop-shadow(2px 0 .25px #191919d9) drop-shadow(-2px 0 .25px #191919d9) drop-shadow(0 2px .25px #191919d9) drop-shadow(0 -2px .25px #191919d9) drop-shadow(0 0 2px #0008) drop-shadow(0 6px 7px #0005)}
@media(max-width:620px){.case-zone>img.is-landscape{width:min(100%,280px);height:auto;max-width:100%;max-height:100%;margin-bottom:18px}}

/* The three-line wordmark is centered on the car's column. */
header{height:24px}
main{padding-top:18px}
.parking-brand{grid-column:1 / -1;grid-row:1;justify-self:center;width:min(820px,calc(100% - 100px));transform:translateX(-50px);line-height:0}
.parking-brand img{display:block;width:100%;height:auto}
img{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media(min-width:621px){
 .display-stage{row-gap:6px}
 .thumbnail-panel{grid-column:1;grid-row:2;margin-top:0}
 .car-zone{grid-column:2;grid-row:2}
 .case-zone{grid-column:3;grid-row:2}
}
@media(min-width:621px) and (max-width:1000px){.parking-brand{width:calc(100% - 80px);transform:translateX(-40px)}}
@media(max-width:620px){
 header{height:12px}
 main{height:calc(100svh - 12px);min-height:640px;padding-top:8px}
 .display-stage{grid-template-rows:auto 23% minmax(0,1fr) 58px}
 .parking-brand{grid-column:1 / -1;grid-row:1;width:100%;transform:none;margin-bottom:8px}
 .thumbnail-panel{grid-row:2 / span 3}
 .car-zone{grid-row:3}
 .case-zone>img,.demo-tag{grid-row:2}
 .slide-caption{grid-row:4}
}
