.camera-page{max-width:1260px;margin:auto;padding:28px max(3vw,20px) 50px}.camera-heading{display:flex;align-items:center;gap:22px;margin-bottom:24px}.camera-heading h1{font:normal 38px var(--pc-display);letter-spacing:-1px;margin:0}.camera-heading .journey-back{font-size:12px}.camera-state{margin-left:auto;border:1px solid #d9ddd2;border-radius:30px;padding:7px 12px;font-size:11px;color:#55614f;background:#eef0e7}.camera-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:30px;align-items:start}.camera-main{min-width:0}.camera-stage{position:relative;width:100%;height:440px;background:#242d29;border-radius:14px;overflow:hidden;isolation:isolate}.camera-stage video,.camera-stage img,.camera-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.camera-stage img{object-fit:contain;cursor:crosshair}.camera-page [hidden]{display:none!important}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:radial-gradient(ellipse at 20% 0%,#71837044,transparent 65%),#25312b;text-align:center;padding:20px}.camera-placeholder p{font-size:16px;color:#eff2e8}.camera-lens{font:100px/1 var(--pc-display);color:#c6d1bf}.color-reticle{--capture:#edf0e5;position:absolute;left:50%;top:50%;width:94px;height:94px;transform:translate(-50%,-50%);border:12px solid var(--capture);border-radius:50%;outline:2px solid #fff;box-shadow:inset 0 0 0 2px #fff,0 2px 15px #0003;pointer-events:none}.color-reticle>span{position:absolute;inset:22px;border:1px solid white;border-radius:50%;box-shadow:0 0 0 1px #0003}.color-reticle:before,.color-reticle:after{content:'';position:absolute;background:#fff;left:50%;top:50%;transform:translate(-50%,-50%)}.color-reticle:before{width:18px;height:1px}.color-reticle:after{height:18px;width:1px}.camera-message{font-size:12px;line-height:1.6;min-height:20px;color:#66715e;margin:12px 0}.camera-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.camera-actions .button{min-height:44px;font-size:12px;gap:8px;padding:11px 14px}.camera-file{position:relative;overflow:hidden;cursor:pointer}.camera-file input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.camera-file:focus-within{outline:3px solid #bf9554;outline-offset:3px}.captured-color{display:flex;align-items:center;gap:15px;padding:20px 0;margin-top:15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.capture-chip{width:67px;height:67px;border-radius:10px;border:1px solid #0002;flex-shrink:0}.captured-color small{font-size:9px;letter-spacing:1.5px;color:#73796e}.captured-color strong{display:block;font-size:23px;letter-spacing:1px;margin:4px 0}.captured-color div>span{font-size:11px;color:#73796e}.inspiration-form{display:flex;align-items:flex-end;gap:10px;margin:20px 0}.inspiration-form label{flex:1;min-width:0;font-size:11px;display:grid;gap:7px;color:#66715e}.inspiration-form input{min-width:0;width:100%;padding:12px;border:1px solid var(--line);border-radius:6px;background:#fffdf8;color:var(--ink);font-size:13px}.inspiration-form .button{font-size:12px;min-height:43px;padding:10px 14px}.camera-notes{margin-top:20px;border-top:1px solid var(--line);padding-top:17px;font-size:12px;color:#6e7869}.camera-notes summary{cursor:pointer}.camera-notes p{font-size:12px;line-height:1.7}.camera-result-heading{display:flex;align-items:center;gap:8px;justify-content:space-between}.camera-result-heading h2{font:normal 26px var(--pc-display);margin:0;letter-spacing:-.5px}.camera-result-heading select{font-size:11px;border:1px solid var(--line);border-radius:6px;background:#fffdf8;padding:9px;max-width:155px;color:var(--ink)}.camera-result-note{font-size:11px;color:#73796e;line-height:1.6;margin:12px 0 18px}.camera-match{padding:16px 0;border-top:1px solid var(--line);display:flex;gap:13px;align-items:flex-start}.camera-match-chip{width:61px;height:75px;flex-shrink:0;border-radius:8px;border:1px solid #0002}.camera-match-content{flex:1;min-width:0}.camera-match h3{font-size:14px;line-height:1.4;margin:5px 0 8px;font-weight:500;overflow-wrap:anywhere}.match-rank{font-size:10px;color:#65735a}.camera-match-product{display:flex;align-items:center;gap:7px}.camera-match-product img{object-fit:contain;mix-blend-mode:multiply;flex-shrink:0}.camera-match-product select{font-size:10px;color:#66715e;width:100%;min-width:0;min-height:35px;border:1px solid #dfdfd5;border-radius:5px;background:#fffdf8;padding:5px}.camera-match-actions{display:flex;align-items:center;gap:12px;margin-top:10px}.camera-match-actions .favorite-toggle{position:static!important;flex-shrink:0}.camera-match-actions .button{font-size:11px;min-height:35px;padding:7px 12px}.camera-empty{padding:30px;color:#73796e;text-align:center}.camera-inspirations{border-top:1px solid var(--line);margin-top:36px;padding-top:25px}.camera-inspirations h2{font:normal 28px var(--pc-display)}.inspiration-card .wishlist-chip{height:120px}.inspiration-card code{font:13px monospace}.inspiration-card p{font-size:11px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.camera-layout{grid-template-columns:minmax(0,1fr) minmax(270px,320px);gap:20px}.camera-stage{height:390px}.camera-heading h1{font-size:33px}}
@media(max-width:700px){.camera-page{padding:18px 14px 35px}.camera-heading{gap:14px;margin-bottom:18px}.camera-heading h1{font-size:29px}.camera-heading .journey-back{font-size:11px}.camera-state{font-size:9px;padding:6px 9px}.camera-layout{display:block}.camera-stage{height:clamp(255px,38dvh,390px);border-radius:10px}.camera-message{font-size:11px}.camera-actions{gap:7px}.camera-actions .button{padding:9px 12px;font-size:11px}.camera-results{margin-top:30px;padding-top:23px;border-top:1px solid var(--line)}.camera-result-heading h2{font-size:28px}.camera-match-chip{width:72px;height:82px}.camera-match h3{font-size:15px}.camera-match-product select{font-size:11px}.inspiration-form{gap:8px}.inspiration-form .button{padding:10px;font-size:11px}.captured-color{padding:15px 0}.camera-notes{margin-top:15px}.camera-result-heading select{max-width:150px}}
.camera-placeholder>.text-button{color:#e4eadd;margin-top:12px;font-size:12px}
@media(max-width:700px){.camera-stage{height:clamp(245px,32dvh,330px)}.inspiration-form input{font-size:16px}.captured-color div>span{display:block;max-width:240px;overflow-wrap:anywhere}}
.camera-main{position:sticky;top:16px}.camera-view{background:var(--cream)}.camera-view .camera-actions{padding-top:10px}.camera-details{min-width:0}body[data-route=camera] .site-header{position:relative;z-index:30}
@media(max-width:700px){.camera-main{display:contents;position:static}.camera-view{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding:8px 0 12px;margin-top:-8px;border-bottom:1px solid var(--line);box-shadow:0 9px 14px -13px #26362970}.camera-results{margin-top:24px}.camera-stage{height:clamp(200px,32dvh,300px)}.camera-view .camera-actions{gap:6px}.camera-view .camera-actions .button{min-height:40px;padding:9px 10px}.camera-view .camera-actions .text-button{font-size:11px;min-height:35px}}
@media(max-width:700px) and (max-height:500px){.camera-stage{height:30dvh}.camera-view{padding-bottom:6px}.camera-view .camera-actions{padding-top:6px}.camera-lens{font-size:44px}.camera-placeholder p{margin:4px 0;font-size:12px}.camera-placeholder .button{min-height:32px;padding:6px 12px}.camera-placeholder>.text-button{margin-top:4px}}