:root{font-family:Inter,"SF Pro Display",Arial,sans-serif;color:#191b1d;background:#fff;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
button:focus-visible,canvas:focus-visible{outline:2px solid #477f91;outline-offset:4px}
[hidden]{display:none!important}
.hero{height:100svh;min-height:530px;display:grid;grid-template-rows:60px minmax(0,1fr) auto;overflow:hidden;background:#fff}
.site-nav{display:flex;align-items:center;padding:0 clamp(24px,4vw,64px);pointer-events:none;z-index:2}
.site-nav h1{margin:0;font-size:14px;letter-spacing:.2em;font-weight:600;line-height:1.4}
.site-nav h1 img{display:block;width:150px;height:auto}
.product-stage{position:relative;min-height:0;isolation:isolate;overflow:hidden;touch-action:none;user-select:none}
#threeCanvas{width:100%;height:100%;display:block;touch-action:none;outline-offset:-4px;cursor:grab}
.product-stage.is-inspecting,.product-stage.is-inspecting #threeCanvas{cursor:grabbing!important}
.ring-hit{position:absolute;z-index:3;min-width:44px;min-height:44px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;padding:0;touch-action:manipulation}
.ring-hit span{position:absolute;left:50%;top:100%;transform:translateX(-50%);padding:5px 9px;border-radius:6px;background:#202326;color:white;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.ring-hit:hover span,.ring-hit:focus-visible span{opacity:1}
.experience-controls{position:relative;z-index:5;display:grid;justify-items:center;gap:16px;padding:0 20px max(20px,env(safe-area-inset-bottom));background:#fff}
.color-dock{display:flex;justify-content:center;gap:12px}
.color-option{display:grid;justify-items:center;gap:5px;width:62px;background:transparent;border:0;padding:5px 5px 7px;border-radius:10px;font-size:12px;color:#74777a;transition:background .2s,color .2s}
.color-option:hover{background:#f6f6f6;color:#252729}
.color-option.is-active{color:#17191a;background:#f2f3f3}
.color-thumb{width:45px;height:38px;overflow:hidden;display:block;border-radius:5px;background:#fff}
.color-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 76%;transform:scale(1.35);transform-origin:50% 75%;pointer-events:none}
.interaction-guide{text-align:center;max-width:590px;width:100%;min-height:90px}
.advance-button{display:inline-flex;align-items:center;gap:12px;border:0;background:none;padding:0;font-size:16px;font-weight:500;line-height:1.5}
.action-arrow{color:#7d8385;font-size:18px;font-weight:400;transition:transform .2s}
.advance-button:not(:disabled):hover .action-arrow{transform:translate(2px,-2px)}
.interaction-guide p{font-size:14px;line-height:1.5;color:#6b7175;margin:6px 0 10px;min-height:21px}
.interaction-guide .view-hint{font-size:11px;line-height:1.5;color:#858b8e;margin:0 auto 6px;min-height:17px}
.progress-row{display:flex;align-items:center;justify-content:center;gap:10px;height:24px;color:#73787c;font-size:12px;font-variant-numeric:tabular-nums}
.panel-progress{display:flex;gap:4px}
.panel-progress i{height:3px;width:14px;border-radius:2px;background:#e4e6e7;transition:background .2s}
.panel-progress i.is-out{background:#303638}
#resetButton{background:none;border:0;border-left:1px solid #ddd;padding:4px 0 4px 12px;color:#535b60;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.loading-screen{position:absolute;inset:0;z-index:10;display:grid;align-content:center;justify-content:center;text-align:center;gap:14px;background:white;transition:opacity .45s,visibility .45s}
.loading-screen.is-ready{visibility:hidden;opacity:0;pointer-events:none}
.loading-screen p{margin:0;font-size:14px;color:#6c7275}
.loading-screen progress{appearance:none;border:0;width:200px;height:2px;background:#e8e9e9;color:#202528}
.loading-screen progress::-webkit-progress-bar{background:#e8e9e9}
.loading-screen progress::-webkit-progress-value{background:#202528;transition:width .2s}
#retryButton{justify-self:center;border:1px solid #d5d8da;border-radius:20px;padding:8px 18px;background:#fff;font-size:14px}
.noscript{position:fixed;top:35%;left:10%;width:80%;text-align:center}
@media(max-width:600px){.hero{grid-template-rows:52px minmax(0,1fr) auto;min-height:570px}.site-nav{padding:0 22px}.site-nav h1{font-size:12px}.experience-controls{gap:10px;padding-left:20px;padding-right:20px}.color-dock{gap:10px}.color-option{width:58px}.color-thumb{height:34px;width:42px}.interaction-guide{min-height:102px}.interaction-guide p{font-size:13px;max-width:330px;margin:5px auto 8px}.advance-button{font-size:15px}}
@media(max-height:660px) and (min-width:601px){.hero{grid-template-rows:42px minmax(0,1fr) auto}.experience-controls{gap:5px;padding-bottom:10px}.color-thumb{height:25px}.interaction-guide{min-height:75px}.interaction-guide p{margin:2px 0 4px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}