:root {
  color-scheme: dark;
  --background: #000;
  --foreground: #ff721f;
  font-family: system-ui, sans-serif;
  background: var(--background);
  color: var(--foreground);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.workbench {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: clip;
  background: #000;
}
.clip-definitions { position: absolute; pointer-events: none; }
/* One shared coordinate space keeps the cutout aligned on desktop and mobile. */
.scene-plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 133.333333svh);
  aspect-ratio: 4 / 3;
  transform: translate(-50%, -50%);
}
.desk-layer, .product-layer { position: absolute; inset: 0; }
.scene-plane img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.desk-photo, .desk-repair { position: absolute; inset: 0; }
/* Only replace the patch behind the product; preserve the rest of the photo. */
.desk-repair {
  opacity: 0;
  mask-image: radial-gradient(ellipse 24% 29% at 52% 57%, #000 65%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 24% 29% at 52% 57%, #000 65%, transparent 100%);
}
.product-layer {
  transform-origin: 50.5% 54.5%;
  pointer-events: none;
  visibility: hidden;
}
.product-photo { clip-path: url(#product-mask); }
.scene-plane .product-front {
  position: absolute;
  left: 50.5%;
  top: 54.5%;
  width: 23.2%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
}
.dial-navigation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.outside-navigation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.outside-trail { opacity: 0; }
.flight-mark { position: absolute; left: 0; top: 0; width: 120px; height: 120px; pointer-events: none; opacity: 0; visibility: hidden; transform-origin: 50% 50%; }
.flight-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bird-parts { opacity: 0; visibility: hidden; transform-origin: 50% 50%; }
.workbench.is-ready .product-layer { visibility: visible; }
/* Failed scripts or image loading leave the original photograph intact. */
@media (prefers-reduced-motion: reduce) {
  .workbench { height: 100svh; }
}
/* The photo face and modeled metal shell share one 3D coordinate system. */
.product-front { --depth: 85px; --radius: 164px; --facet-width: 9px; transform-style: preserve-3d; }
.product-front > img { backface-visibility: hidden; }
.dial-navigation { transform: translateZ(.5px); backface-visibility: hidden; }
.device-shell { position: absolute; inset: 0; transform-style: preserve-3d; }
.metal-facet { position: absolute; left: 50%; top: 50%; width: var(--facet-width); height: var(--depth); transform: translate(-50%,-50%) rotateZ(var(--angle)) translateY(calc(-1 * var(--radius))) rotateX(90deg) translateY(calc(-.5 * var(--depth))); background: linear-gradient(to bottom, #181b1e 0%, #86898b 3%, rgb(var(--metal)) 9%, #777b7e 13%, rgb(var(--metal)) 20%, rgb(var(--metal)) 76%, #2e3235 79%, #a4a8aa 84%, #53575a 94%, #141719 100%); backface-visibility: hidden; }
.device-back { position: absolute; inset: 0; transform: translateZ(calc(-1 * var(--depth))) rotateY(180deg); backface-visibility: hidden; }
.device-back svg { width: 100%; height: 100%; display: block; }
.mount-depth { position: absolute; inset: 27%; border-radius: 50%; background: linear-gradient(135deg,#373b3e,#090b0d); transform: translateZ(calc(-1 * var(--depth) + 1px)); }
.learn-product { position: absolute; left: 73%; top: 50%; transform: translate(-50%,-50%); border: 0; border-radius: 999px; padding: 21px 35px; background: #ff721f; color: #111; font: 600 18px/1.2 system-ui,sans-serif; letter-spacing: .08em; cursor: pointer; opacity: 0; visibility: hidden; white-space: nowrap; }
.learn-product:hover { background: #ff8d46; }
.learn-product:focus-visible { outline: 3px solid white; outline-offset: 6px; }
.learn-product span { margin-left: 22px; }
@media(max-width:700px) { .learn-product { left:50%; top:78%; padding:18px 28px; font-size:16px; } }

.metal-facet { background: linear-gradient(to bottom, #15181b 0%, #9b9ea0 3%, transparent 8%, #797d8080 13%, transparent 20%, transparent 76%, #24282be0 79%, #a4a8aab0 84%, #53575a80 94%, #141719 100%), linear-gradient(to right,var(--shade-start),var(--shade-end)); }
.raised-mount { position:absolute; inset:0; transform: translateZ(calc(-1 * var(--depth) - var(--mount-step) * var(--depth) * .014)) rotateY(180deg); backface-visibility:hidden; }
.raised-mount svg { display:block; width:100%; height:100%; }

.mount-wall { position:absolute; left:50%; top:50%; width:calc(var(--radius) * .045); height:calc(var(--depth) * .168); transform: translate(-50%,-50%) translateZ(calc(-1 * var(--depth))) rotateZ(var(--angle)) translateY(calc(-.45 * var(--radius))) rotateX(90deg) translateY(calc(-.084 * var(--depth))); backface-visibility:hidden; }
.app-showcase { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100%; max-height:none; padding:0; border:0; background:#060707; color:#eee; overflow:auto; overscroll-behavior:contain; }
.app-showcase::backdrop { background:#000; }
.showcase-close { position:fixed; top:24px; right:30px; z-index:2; width:44px; height:44px; border:1px solid #424242; border-radius:50%; background:#181919; color:white; font-size:28px; cursor:pointer; }
.showcase-close:focus-visible { outline:2px solid #ff721f; outline-offset:4px; }
.showcase-layout { min-height:100%; max-width:1200px; margin:auto; padding:65px 65px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,8vw,130px); align-items:center; }
.phone-preview { width:min(320px,32vw,37svh); justify-self:center; padding:20px 16px 12px; border:2px solid #454749; outline:5px solid #181a1c; border-radius:35px; background:#0d0f11; box-shadow:18px 28px 70px #000; font-family:system-ui,sans-serif; color:#f6f2ef; }
.phone-status { display:flex; justify-content:space-between; padding:0 10px; font-size:12px; }
.phone-title { display:flex; justify-content:space-between; color:#ffb58d; font-weight:750; font-size:clamp(18px,2.2vw,25px); letter-spacing:1.5px; margin:28px 0 22px; }
.phone-connect { border-radius:18px; background:#2a221e; display:flex; align-items:center; justify-content:space-between; padding:14px 12px; font-size:15px; font-weight:750; text-align:center; }
.phone-connect i { width:8px; height:8px; background:#ac9890; border-radius:50%; }
.phone-connect small { display:block; font-size:11px; margin-top:3px; color:#d9cdc8; }
.phone-map { display:block; width:100%; border-radius:19px; margin:16px 0; }
.phone-destination { background:linear-gradient(100deg,#69300f,#2b2420); border-radius:19px; padding:16px 12px; font-size:15px; }
.destination-field { display:flex; align-items:center; gap:10px; border-radius:13px; background:#171b1e; padding:14px 10px; margin-top:14px; font-size:11px; font-weight:650; }
.destination-field > span { font-size:23px; }.destination-field small { display:block; margin-top:4px; font-size:10px; }
.connect-hint { background:#ffffff15; color:#b8a49a; border-radius:12px; padding:10px; margin-top:12px; font-size:10px; font-weight:600; }
.phone-home { width:37%; height:4px; background:white; border-radius:5px; margin:25px auto 0; }
.app-story h2 { font-size:clamp(36px,4.5vw,62px); line-height:1.2; letter-spacing:-.04em; margin:0 0 24px; color:#ff8235; font-weight:650; }
.story-lead { color:#c5c5c5; font-size:17px; line-height:1.9; max-width:390px; margin-bottom:36px; }
.story-features section { display:flex; gap:20px; border-top:1px solid #272727; padding:20px 0; }.story-features section > span { color:#ff8235; font-size:12px; padding-top:4px; }.story-features h3 { font-size:16px; margin:0 0 8px; font-weight:550; }.story-features p { color:#929292; font-size:13px; line-height:1.85; margin:0; }
@media(max-width:700px) { .showcase-layout { grid-template-columns:1fr; gap:48px; padding:80px 28px 45px; overflow:hidden; }.phone-preview { width:min(280px,75vw); }.phone-title { font-size:24px; }.app-story h2 { font-size:40px; }.showcase-close { top:16px; right:18px; }.story-lead { font-size:16px; } }
.showcase-next { position:fixed; right:38px; bottom:30px; z-index:3; border:0; border-radius:999px; padding:17px 29px; background:#ff721f; color:#111; font:600 16px/1.2 system-ui; cursor:pointer; opacity:0; visibility:hidden; }
.showcase-next span { margin-left:24px; }.showcase-next:hover { background:#ff954d; }.showcase-next:focus-visible { outline:2px solid white; outline-offset:4px; }
.demo-hand,.tap-ring { opacity:0; visibility:hidden; pointer-events:none; }
@media(max-width:700px) { .showcase-next { right:20px; bottom:20px; }.showcase-layout { padding-bottom:100px; } }

.cover-wordmark { position:absolute; z-index:1; left:clamp(24px,4vw,64px); bottom:clamp(30px,5vh,64px); margin:0; color:#ff721f; font-family:Arial,Helvetica,sans-serif; font-size:clamp(36px,5.5vw,80px); font-weight:900; line-height:1; letter-spacing:-.045em; text-shadow:0 2px 18px #000b; pointer-events:none; }

.bluetooth-icon { width:24px; height:28px; flex:none; color:#9f9188; }
/* Small-screen composition: contained workbench, compact product and readable copy. */
@media (max-width:700px) {
  .scene-plane { width:max(100%,80svh); }
  .cover-wordmark { left:24px; bottom:12svh; font-size:32px; }
  .learn-product { top:67%; min-height:44px; padding:14px 24px; font-size:14px; }
  .showcase-layout { min-height:100%; align-content:start; gap:26px; padding:65px 24px calc(94px + env(safe-area-inset-bottom)); overflow:hidden; }
  .phone-preview { width:min(190px,52vw); padding:12px 10px 8px; border-radius:25px; outline-width:3px; box-shadow:8px 15px 40px #000; }
  .phone-status { font-size:8px; padding:0 5px; }
  .phone-title { font-size:15px; letter-spacing:1px; margin:16px 0 12px; }
  .phone-connect { border-radius:11px; padding:9px 7px; font-size:10px; }
  .phone-connect small { font-size:8px; }.phone-connect i { width:5px;height:5px; }
  .bluetooth-icon { width:16px;height:19px; }
  .phone-map { margin:10px 0; border-radius:12px; }
  .phone-destination { border-radius:12px; padding:10px 8px; font-size:10px; }
  .destination-field { margin-top:8px; padding:9px 6px; border-radius:8px; gap:5px; font-size:8px; }
  .destination-field small { font-size:7px; margin-top:2px; }.destination-field > span { font-size:15px; }
  .connect-hint { border-radius:8px; padding:7px; margin-top:8px; font-size:7px; }
  .phone-home { height:3px; margin-top:15px; }
  .app-story { width:100%; max-width:460px; justify-self:center; }
  .app-story h2 { font-size:30px; line-height:1.18; margin-bottom:14px; }
  .app-story h2 br { display:none; }
  .story-lead { font-size:14px; line-height:1.75; margin:0 0 20px; }
  .story-features section { padding:13px 0; gap:12px; }
  .story-features h3 { font-size:14px; margin-bottom:5px; }
  .story-features p { font-size:12px; line-height:1.7; }
  .showcase-close { top:max(12px,env(safe-area-inset-top));right:16px; }
  .showcase-next { right:20px; bottom:max(16px,env(safe-area-inset-bottom));min-height:44px;padding:13px 23px;font-size:14px; }
}
@media (max-width:700px) and (max-height:700px) {
  .showcase-layout { gap:20px;padding-top:58px; }
  .phone-preview { width:165px; }
  .app-story h2 { font-size:27px; }
}