:root{--studio:#e6e9ef;--ink:#1a1d23;--rim:#c8cdd6;--film:#8e2a2a;--paper:#f7f8fa;--quiet:#5c6370}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--studio);color:var(--ink);font-family:var(--font-sans),"Noto Sans HK",sans-serif;font-size:18px;line-height:1.55}a{color:inherit}.wrap{width:min(1080px,calc(100% - 40px));margin-inline:auto}.top{padding:22px 0 4px}.mark{font-family:var(--font-serif),"Noto Serif HK",serif;font-size:22px;font-weight:600;text-decoration:none;letter-spacing:-.02em}.hero{display:grid;grid-gap:28px;gap:28px;padding:8px 0 56px}.hero-visual{order:-1;display:flex;justify-content:center}.hero-copy h1{margin:0 0 18px;max-width:13em;font-size:clamp(26px,6.4vw,44px);font-weight:600;line-height:1.28;letter-spacing:-.03em}.hero-copy h1,.lede{font-family:var(--font-serif),"Noto Serif HK",serif}.lede{margin:0 0 28px;max-width:18em;font-size:clamp(17px,2.1vw,22px);line-height:1.5}.cta,.lede{font-weight:500}.cta{display:inline-block;background:var(--film);color:var(--paper);text-decoration:none;padding:14px 22px;border-radius:4px;font-size:17px}.cta:focus-visible,.mark:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.phone{width:min(148px,38vw)}.phone-hero,.product-shot{width:min(320px,72vw)}.product-shot{display:block;height:auto;filter:drop-shadow(0 22px 18px rgba(26,29,35,.16))}.product-shot-small{width:min(148px,38vw);filter:drop-shadow(0 16px 14px rgba(26,29,35,.12))}.state:not(:has(.browser)) .product-shot-small{margin-top:28px}.browser .product-shot-small{width:100%}.shell{background:var(--rim);padding:3.4%;border-radius:17%/8.1%;filter:drop-shadow(0 22px 18px rgba(26,29,35,.16))}.back{position:relative;overflow:hidden;aspect-ratio:78/163.4;border-radius:15%/7.15%;background:var(--ink)}.back-bare{border-radius:6px;filter:drop-shadow(0 16px 14px rgba(26,29,35,.12))}.photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center 46%}.phone-hero .photo{animation:settle 1.15s ease-out both}.camera{position:absolute;top:2.2%;left:3.8%;width:92.4%;height:22%;border-radius:16%/34%;background:#121418;box-shadow:0 0 0 1px rgba(26,29,35,.45);container-type:inline-size}.flash,.lens,.lidar{position:absolute;aspect-ratio:1;border-radius:50%}.lens{width:18.5%;background:radial-gradient(circle at 36% 32%,#5c6778 0 8%,#14181e 42%,#07080b 68%);box-shadow:0 0 0 1.1cqi #1a1e26,inset 0 0 0 .35cqi #0a0c10}.lens-top{left:9%;top:7%}.lens-bottom{left:9%;top:54%}.lens-center{left:34%;top:30.5%}.flash,.lidar{right:12%;width:8.2%}.flash{top:16%;background:radial-gradient(circle at 40% 35%,#f7f1e6,#d9cbb6 46%,#8d8478 78%)}.lidar{bottom:14%;background:radial-gradient(circle at 40% 35%,#3a4454,#12151b 70%);box-shadow:0 0 0 .35cqi #2a3038}.mic{position:absolute;right:15.2%;top:47.6%;width:1.7%;aspect-ratio:1;border-radius:50%;background:#3a4452}.states{display:grid;grid-gap:36px;gap:36px;padding:8px 0 72px}.state{margin:0;display:grid;justify-items:start;align-content:end;grid-gap:14px;gap:14px}.state figcaption{margin:0;font-size:17px}.browser{position:relative;width:min(148px,38vw);margin-top:28px}.state:not(:has(.browser)) .phone{margin-top:28px}.browser .phone{width:100%}.browser .shell{border-top-left-radius:14px;border-top-right-radius:14px}.browser-bar{position:absolute;top:0;left:0;right:0;z-index:1;margin:0;transform:translateY(calc(-100% + 1px));padding:7px 10px 8px;border-radius:14px 14px 0 0;color:var(--quiet);font-size:12px;line-height:1}#start,.browser-bar{background:var(--paper)}#start{scroll-margin-top:16px}.start-inner{padding:72px 0 64px}.start-inner h2{margin:0 0 14px;font-family:var(--font-serif),"Noto Serif HK",serif;font-size:clamp(32px,4vw,44px);font-weight:600;letter-spacing:-.03em}.start-inner p{margin:0;max-width:28em}.start-inner p+p{margin-top:8px}footer{padding:28px 0 40px;color:var(--quiet);font-size:14px}footer p{margin:0}.credit{margin-top:6px}.inline{color:inherit}.studio{min-height:100dvh}.editor{display:grid;grid-gap:28px;gap:28px;padding-bottom:72px}.models{display:flex;flex-wrap:wrap;gap:8px}.cta-button,.model,.upload{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rim);border-radius:4px;padding:10px 14px}.model-on{color:var(--paper);border-color:var(--ink)}.model-on,.stage{background:var(--ink)}.stage{position:relative;width:min(280px,78vw);aspect-ratio:78/163.4;margin-inline:auto;overflow:hidden;border:10px solid var(--rim);border-radius:15%/7.15%;touch-action:none}.stage-photo{position:absolute;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stage-empty{margin:0;color:var(--paper);text-align:center;padding-top:46%}.stage-camera{position:absolute;background:var(--ink);pointer-events:none}.save-state{margin:10px 0 0;color:var(--quiet);font-size:14px;text-align:center}.editor-tools,.order{display:grid;grid-gap:12px;gap:12px;max-width:28em}.order input,.scale input,.upload input{display:block;width:100%;margin-top:6px;font:inherit}.order{background:var(--paper);padding:28px 0 8px}.order h2{margin:0;font-family:var(--font-serif),"Noto Serif HK",serif;font-size:32px;font-weight:600}.form-error,.order p{margin:0}.form-error{color:var(--film)}.cta-button{background:var(--film);color:var(--paper);border:0;width:-moz-fit-content;width:fit-content}.cta-button:disabled{opacity:.45}.cta-button:focus-visible,.cta:focus-visible,.mark:focus-visible,.model:focus-visible,.order input:focus-visible,.scale input:focus-visible,.upload:focus-visible{outline:2px solid var(--ink);outline-offset:4px}@media (min-width:880px){.hero{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:80px;min-height:calc(100svh - 60px);padding:8px 0 28px}.hero-visual{order:2;justify-content:flex-end}.hero-visual .product-shot,.phone-hero{width:min(360px,calc((100svh - 280px) * 78 / 163.4))}.states{grid-template-columns:repeat(3,max-content);justify-content:start;align-items:start;column-gap:72px;padding-top:36px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.phone-hero .photo{animation:none}}@keyframes settle{0%{transform:scale(1.05)}to{transform:scale(1)}}