:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;background:#f4f2eb;color:#182526}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 55%,#ebeddb,transparent 45%),#f4f2eb}[hidden]{display:none!important}.top{max-width:1400px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:25px 5%}.logo{font-size:30px;font-weight:800;letter-spacing:-1.8px}.logo span{font-weight:400}.logo i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#f27356;margin-left:4px}.demo{font-size:12px;color:#737b75}.intro{text-align:center;padding:12px 24px 0}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:bold;color:#63746c}h1{font-size:clamp(48px,6.5vw,82px);line-height:1;letter-spacing:-4px;margin:15px 0}h1 em{font-style:normal;color:#dd6049}#wheelInstruction{color:#64716a;font-size:16px;line-height:1.5;margin:17px 0}.layout{display:grid;grid-template-columns:1fr 1fr;gap:8%;max-width:1120px;padding:15px 45px 22px;margin:auto;align-items:center}.sensor{text-align:center;min-width:0}.camera-box{height:380px;position:relative;overflow:hidden;border-radius:28px;background:#e9ecdf;border:1px solid #dadfd0}#camera{display:none}#preview{display:block;width:100%;height:100%;opacity:0}.product-stage{position:absolute;inset:0;display:grid;place-items:center}.hero-can{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;position:absolute;transform:rotate(-8deg) scale(.95);filter:drop-shadow(12px 16px 10px #23342318)}.orbit{width:290px;height:290px;border:1px solid #cbd3be;border-radius:50%;transform:rotate(-25deg) scaleX(1.2)}.product-tag{position:absolute;bottom:22px;left:20px;font-size:9px;font-weight:700;letter-spacing:1.8px;writing-mode:vertical-rl;transform:rotate(180deg);color:#6c7d65}.camera-caption,.scan-guide,.live-label{display:none}.camera-on #preview{opacity:1}.camera-on .product-stage{display:none}.camera-on .scan-guide{display:block;position:absolute;left:33%;top:8%;width:34%;height:76%;border:2px solid #e7ffc1;border-radius:25px;box-shadow:0 0 0 1000px #00170c30;pointer-events:none}.camera-on .camera-caption{display:block;position:absolute;bottom:16px;width:100%;text-align:center;font-size:12px;color:white;text-shadow:0 1px 4px #000}.camera-on .live-label{display:block;position:absolute;left:18px;top:18px;font-size:9px;letter-spacing:1.5px;background:#182526b0;border-radius:20px;padding:8px 10px;color:#f2f9e7}.camera-message{min-height:20px;margin:18px 0 13px;font-size:14px;color:#657269}.primary{border:0;border-radius:100px;background:#203b31;color:#fff;padding:17px 28px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .2s,background .2s}.primary:hover:not(:disabled){background:#355346;transform:translateY(-2px)}.primary:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #dd6049;outline-offset:4px}.camera-on #startCamera{display:none}.experience{min-width:0;text-align:center}.wheel-wrap{position:relative;width:100%;max-width:410px;margin:auto}.pointer{position:absolute;left:calc(50% - 13px);top:2px;width:26px;height:32px;background:#203b31;clip-path:polygon(0 0,100% 0,50% 100%);z-index:3}#wheel{width:100%;overflow:visible;filter:drop-shadow(0 18px 20px #293b2612)}#disc{transform-origin:0 0}#wheel>circle:first-child{fill:#f9faf5;stroke:#d6ddce}#disc>path:nth-child(1){fill:#dbe9b5}#disc>path:nth-child(2){fill:#ddbeb1}#disc>path:nth-child(3){fill:#c8ddd3}#disc>path:nth-child(4){fill:#d5cddd}#disc>g{fill:#263b32;font-size:17px;letter-spacing:1px}#wheel>circle:not(:first-child){fill:#203b31;stroke:#f4f2eb}#wheel>text{fill:#fff}.result{min-height:135px;padding:12px 0 0}.result>span{font-size:10px;letter-spacing:1.8px;color:#71815c;font-weight:bold}.result h2{font-size:28px;line-height:1.15;letter-spacing:-1px;margin:12px 0 8px}.result p{font-size:13px;color:#768077;margin:0 0 12px}body[data-phase=result] .result h2{color:#b34f38;font-size:36px}#failure{text-align:center;color:#ae3e30;font-size:14px;max-width:620px;margin:0 auto 18px;padding:0 20px}#failure:empty{display:none}footer{max-width:1400px;margin:auto;border-top:1px solid #dce0d5;padding:20px 5%;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#7b847b}#operatorPanel{margin:25px;padding:25px;border:1px solid #aaa}#operatorPanel input[type=range]{display:block}#operatorPanel label{display:block;margin:10px}#operatorPanel button{padding:10px}@media(min-width:1500px){.camera-box{height:440px}.wheel-wrap{max-width:440px}}@media(max-width:700px){.top{padding:20px}.logo{font-size:26px}.demo{font-size:10px}h1{font-size:52px;letter-spacing:-3px}.intro{padding-top:2px}.layout{grid-template-columns:1fr;gap:24px;padding:10px 24px 24px;max-width:440px}.camera-box{height:340px}.wheel-wrap{max-width:320px}.result{min-height:100px}.result h2{font-size:25px}footer{flex-direction:column;gap:8px;padding:18px 24px}body[data-phase=spinning] .experience,body[data-phase=result] .experience{scroll-margin-top:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}.hero-can{filter:none}body[data-phase=result] #startCamera,body[data-phase=spinning] #startCamera{display:none}