*{box-sizing:border-box}body{margin:0;background:#fff8ef;color:#2c2730;font-family:Arial,sans-serif}main{padding:20px}.walk-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:20px;font-size:15px;font-weight:700;color:#176c5b}.walk-layout{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:32px;align-items:center}.phone{width:100%;border:9px solid #202b2c;border-radius:28px;background:#fff6ee;overflow:hidden;aspect-ratio:390/844}.phone section{padding:20px 14px;height:100%;display:flex;flex-direction:column}.phone [hidden]{display:none!important}header{display:flex;justify-content:space-between;align-items:center;font-size:16px;gap:10px}header img{width:40px;height:40px}.phone h2{color:#432845;margin:20px 0 8px;font-size:23px}.phone p{font-size:13px;line-height:1.45;margin:10px 0 16px}.camera-view{position:relative;flex:1;overflow:hidden;background:#222;border-radius:15px;border:2px solid #432845}.camera-view>img{position:absolute;width:100%;height:100%;object-fit:cover;animation:frame-fabric 2s ease-out both}.camera-view>p{position:absolute;left:10px;right:10px;top:4px;text-align:center;background:#0009;color:white;padding:7px;border-radius:10px;font-size:12px}.aim{position:absolute;left:20%;top:26%;width:60%;height:42%;border:2px solid #ffffffbd;border-radius:8px}.aim:after{content:'';position:absolute;width:36px;height:36px;border:2px solid white;border-radius:50%;left:calc(50% - 18px);top:calc(50% - 18px)}#shutter{position:absolute;bottom:16px;left:calc(50% - 26px);width:52px;height:52px;border:4px solid #d8cec6;background:white;border-radius:50%;cursor:pointer}.sample-surface{position:relative;flex:1;min-height:100px;background:#24211e;border-radius:14px;display:flex;align-items:center;overflow:hidden}.sample-surface>img{width:100%;height:auto;display:block}#ring{position:absolute;width:17.7%;aspect-ratio:1;border:3px solid white;border-radius:50%;background:#ffffff14;box-shadow:0 0 4px #0008;transform:translate(-50%,-50%);transition:left 1.4s ease,top 1.4s ease}.sample-surface{--photo-size:100cqw;container-type:inline-size}#ring.red{left:82.85%;top:calc(50% - 4.57cqw)}#ring.yellow{left:38.57%;top:calc(50% - 24.57cqw)}.size-row{display:flex;justify-content:space-between;font-size:13px;padding:16px 0}.size-row span{border:1px solid #b47aac;border-radius:10px;padding:6px}#match-area{background:#432845;color:white;border:0;border-radius:12px;padding:13px;font-weight:700;font-size:14px;cursor:pointer}.retake{border:1px solid #b47aac;border-radius:12px;text-align:center;padding:12px;font-size:13px;margin-top:10px}#results{width:100%;height:100%;object-fit:contain;display:block}.walk-copy h3{font:700 28px Georgia;margin:0 0 16px;color:#173c35}.walk-copy>p{font-size:17px;line-height:1.6}.walk-copy .example-note{font-size:13px;color:#59685d}.walk-controls{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}button{font:inherit}.walk-controls button,#play{border:1px solid #bacabb;border-radius:12px;background:#fffdf8;padding:12px;color:#173c35;font-weight:700;cursor:pointer}button:disabled{opacity:.45;cursor:default}#next{background:#173c35;color:white}@keyframes frame-fabric{from{transform:scale(1.15) translate(4%,3%) rotate(3deg)}to{transform:none}}@media(max-width:620px){main{padding:16px}.walk-layout{grid-template-columns:1fr;gap:24px}.phone{max-width:280px;margin:auto}.walk-toolbar{align-items:flex-start;font-size:13px}#play{font-size:12px;padding:8px}.walk-copy h3{font-size:25px}.walk-copy>p{font-size:16px}}@media(prefers-reduced-motion:reduce){.camera-view>img{animation:none}#ring{transition:none}}

#ring.center{left:50%;top:50%}.highlight-action{outline:3px solid #d8a244;outline-offset:3px}#selected-crop{display:flex;gap:14px;align-items:center;margin:18px 0}#selected-crop[hidden]{display:none}#selected-crop img{width:74px;height:74px;object-fit:cover;border:2px solid #b47aac;border-radius:12px}#selected-crop figcaption{font-size:14px;font-weight:700;color:#432845}