:root{--ink:#111;--muted:#666;--line:#dedede;--paper:#fff;--soft:#f5f5f5;--radius:15px}
*{box-sizing:border-box}
html{height:100%;height:100dvh;overflow:hidden}
body{height:100%;margin:0;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(circle at 14% 5%,#fff 0,transparent 40%),linear-gradient(145deg,#f7f7f7,#ededed);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a{text-decoration:none;color:inherit}
.hidden{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{flex:0 0 60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(14px,3vw,36px);background:#ffffffeb;border-bottom:1px solid var(--line);box-shadow:0 1px 14px #00000005}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font:800 21px Manrope,sans-serif;letter-spacing:-1.3px}
.brand-mark{background:linear-gradient(140deg,#252525,#050505);color:#fff;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;position:relative;font-size:22px;line-height:1;box-shadow:0 4px 10px #0002}
.brand-mark span{position:absolute;right:4px;top:3px;font-size:9px}
.brand-dot{color:#555}
.header-caption{font-size:10px;letter-spacing:2px;font-weight:800;color:#555}
.services-toggle{border:1px solid #222;background:#fff;color:#111;border-radius:100px;padding:8px 16px;min-height:35px;font-size:11px;font-weight:800;white-space:nowrap;letter-spacing:.1px;transition:background .15s,color .15s,box-shadow .15s}
.services-toggle:hover{background:#f0f0f0;box-shadow:0 3px 10px #00000010}
.services-toggle[aria-pressed="true"]{background:#111;color:#fff}
.services-toggle[aria-pressed="true"]:hover{background:#333}
.services-toggle:focus-visible{outline:3px solid #999;outline-offset:2px}
.services-toggle:disabled{opacity:.5;cursor:wait}
.app-shell{flex:1;min-height:0;width:100%;max-width:1040px;margin:auto;padding:12px 15px 6px;display:flex;flex-direction:column;gap:6px}
.studio-card{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid #e3e3e3;border-radius:20px;overflow:hidden;box-shadow:0 14px 48px #0000000e,0 1px 3px #00000006}
.studio-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 23px;border-bottom:1px solid #eee}
.studio-head strong{font:800 13px Manrope,sans-serif;display:block}
.studio-head small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.ai-pill{border:1px solid #222;border-radius:100px;font-size:9px;letter-spacing:1.1px;font-weight:800;padding:7px 11px;white-space:nowrap}
.progress{display:flex;align-items:center;justify-content:center;padding:9px 18px;border-bottom:1px solid #f0f0f0;gap:12px}
.progress-item{display:flex;align-items:center;gap:7px;color:#a3a3a3;white-space:nowrap}
.progress-item span{width:22px;height:22px;border-radius:50%;background:#eee;color:#858585;display:grid;place-items:center;font-size:9px;font-weight:800}
.progress-item small{font-size:10px;font-weight:700}
.progress-item.active,.progress-item.complete{color:#111}
.progress-item.active span,.progress-item.complete span{color:#fff;background:#111}
.progress-line{width:min(11vw,74px);height:1px;background:#ddd}
.stage-wrap{flex:1;min-height:0;position:relative}
.step-panel{height:100%;min-height:0;display:flex;flex-direction:column;gap:10px;padding:15px clamp(15px,4vw,32px) 12px;overflow:hidden}
.panel-heading{text-align:center;flex:0 0 auto}
.panel-heading h1{font:800 clamp(18px,2.6vw,25px)/1.18 Manrope,sans-serif;letter-spacing:-.8px;margin:0 0 4px}
.panel-heading p{color:var(--muted);font-size:11px;line-height:1.35;margin:0}
.primary,.secondary{border-radius:11px;min-height:41px;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:9px 16px;font-weight:700;font-size:12px;transition:background .15s}
.primary{background:linear-gradient(120deg,#252525,#090909);color:#fff;border:1px solid #101010;box-shadow:0 4px 11px #0000001b}
.primary:hover:not(:disabled){background:#333}
.primary:disabled{background:#aaa;border-color:#aaa;cursor:not-allowed}
.secondary{background:#fff;border:1px solid #cfcfcf;color:#111}
.secondary:hover{background:#f2f2f2}
.full{width:100%}
.text-action{border:0;background:none;color:#555;text-decoration:underline;text-underline-offset:3px;padding:5px 7px;font-size:11px;font-weight:700}
.text-action:disabled{opacity:.5;cursor:wait}
.notice{position:absolute;z-index:12;left:15px;right:15px;top:100px;background:#111;color:#fff;border:1px solid #555;border-radius:12px;padding:11px 14px;font-size:11px;line-height:1.45;box-shadow:0 12px 28px #0002;text-align:center}
.site-note{font-size:10px;letter-spacing:.1px;color:#666;text-align:center;margin:0;flex:0 0 14px}
.upload-panel{justify-content:space-between}
.upload-services{flex:1;min-height:0;display:grid;align-items:center}
.upload-services .services-grid{width:100%;max-width:610px;margin:auto}
.service-mode .upload-panel{gap:7px}
.service-mode .upload-main{flex:0 0 auto;min-height:0;max-height:95px}
.service-mode .photo-actions button,.service-mode .photo-actions label{min-height:61px;gap:2px;padding:6px 5px;border-radius:11px}
.service-mode .photo-actions small{display:none}
.service-mode .chosen-photo img{width:min(23vw,83px,12dvh);height:min(23vw,83px,12dvh)}
.service-mode .chosen-photo{gap:11px}
.upload-main{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.photo-actions{width:100%;max-width:610px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photo-actions button,.photo-actions label{border:1px solid #d6d6d6;border-radius:15px;background:linear-gradient(150deg,#fff,#f4f4f4);display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;text-align:center;cursor:pointer;min-height:155px;padding:15px 5px;box-shadow:0 5px 15px #00000006}
.photo-actions button:hover,.photo-actions label:hover{background:#f0f0f0;border-color:#777}
.photo-actions strong{font:800 14px Manrope,sans-serif}
.photo-actions small{font-size:11px;color:var(--muted)}
.photo-actions button:focus-visible,.gallery-start:focus-within,.choice:focus-visible,.primary:focus-visible,.secondary:focus-visible{outline:3px solid #888;outline-offset:2px}
.has-photo .photo-actions{display:none}
.chosen-photo{display:flex;align-items:center;justify-content:center;gap:14px;max-height:100%;width:100%}
.chosen-photo img{width:min(37vw,175px,26dvh);height:min(37vw,175px,26dvh);object-fit:contain;border-radius:11px;background:#eee;border:1px solid #ddd}
.chosen-photo>div{display:flex;align-items:flex-start;flex-direction:column;gap:4px}
.chosen-photo strong{font-size:13px}
.upload-bottom{display:flex;flex-direction:column;gap:8px;max-width:610px;width:100%;margin:0 auto}
.consent{display:flex;align-items:flex-start;gap:9px;font-size:10.5px;line-height:1.45;color:#515151;cursor:pointer}
.consent input{width:16px;height:16px;accent-color:#111;flex-shrink:0;margin:0}
.api-check{align-self:center}
.camera-panel{position:absolute;z-index:15;inset:5px;background:#161616;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:10px}
.camera-panel video{width:100%;min-height:0;flex:1;object-fit:contain;border-radius:9px;transform:scaleX(-1)}
.camera-panel.environment video{transform:none}
.camera-controls{display:flex;gap:8px}
.camera-controls>*{flex:1;min-width:0}
.camera-controls #shutterBtn{flex:2}
.camera-controls .secondary{background:#fff}
.analysis-panel{gap:8px}
.analysis-panel .panel-heading p{max-width:700px;margin:auto}
.analysis-grid{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:12px;border:1px solid #e7e7e7;border-radius:11px;background:#fafafa;padding:7px;flex:0 0 auto;min-height:79px}
.analysis-grid img{width:66px;height:66px;border-radius:8px;object-fit:contain;background:#ededed}
.analysis-summary{min-width:0}
.mini-label{font-size:9px;font-weight:800;color:#777;letter-spacing:1.2px}
.analysis-summary h2{font:800 12px Manrope,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:3px 0}
.analysis-summary p{font-size:10px;line-height:1.35;color:#666;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.style-groups{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;gap:8px}
.style-group{min-height:0}
.group-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.group-heading h3{font:800 13px Manrope,sans-serif;margin:0}
.group-heading small{font-size:10px;color:#666;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.choice{height:36px;min-width:0;padding:3px 5px;border:1px solid #d8d8d8;border-radius:8px;background:#fff;color:#222;display:grid;place-items:center;text-align:center;line-height:1.18;font-weight:700;font-size:10.5px;overflow-wrap:break-word}
.choice:hover{border-color:#555}
.choice.selected{background:linear-gradient(140deg,#252525,#080808);border-color:#111;color:#fff;box-shadow:0 3px 9px #00000021}
.choice.recommended:not(.selected){border-color:#999}
.services-panel{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:9px}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.service-choice{min-width:0;height:45px;border:1px solid #d8d8d8;background:linear-gradient(140deg,#fff,#f8f8f8);border-radius:11px;padding:7px 8px;display:grid;place-items:center;text-align:center;color:#202020;font-size:11px;line-height:1.2;font-weight:800}
.service-choice:hover{border-color:#777}
.service-choice.selected{color:#fff;border-color:#111;background:linear-gradient(135deg,#303030,#080808);box-shadow:0 3px 9px #0000001b}
.service-choice:focus-visible{outline:3px solid #999;outline-offset:2px}
.service-tip{text-align:center;color:#777;font-size:10px;line-height:1.35;margin:0}
.action-row,.result-actions{display:flex;gap:9px;flex:0 0 auto}
.action-row .primary,.result-actions .primary{flex:1}
.action-row .secondary{flex:0 0 25%}
.billing-note,.result-disclaimer{margin:0;color:#777;text-align:center;font-size:9px;line-height:1.35;flex:0 0 auto}
.result-panel{align-items:stretch;justify-content:space-around;gap:10px}
.compare{position:relative;align-self:center;flex:0 0 auto;min-height:0;width:min(100%,calc(100dvh - 280px),480px);max-height:100%;aspect-ratio:1;background:#eee;border-radius:12px;overflow:hidden;touch-action:pan-y}
.compare>img,.before-layer img{width:100%;height:100%;object-fit:fill;display:block}
.compare>img{position:absolute;inset:0}
.before-layer{position:absolute;inset:0;width:50%;overflow:hidden}
.before-layer img{width:var(--compare-width,400px);max-width:none}
.compare-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:white;transform:translateX(-50%);box-shadow:0 0 5px #0005;pointer-events:none}
.compare-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#fff;color:#111;font-size:20px;box-shadow:0 2px 9px #0003}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:pan-y}
.compare-tag{position:absolute;top:10px;background:#fff;color:#111;padding:6px 9px;border-radius:30px;font-size:9px;font-weight:800;pointer-events:none}
.before-tag{left:10px}.after-tag{right:10px}
.result-actions .secondary{flex:1}
.busy{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#fff 0%,#fafafa 70%,#f4f4f4)}
.busy-content{width:min(100%,355px);padding:25px 22px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:#fff;border:1px solid #ececec;border-radius:24px;box-shadow:0 20px 65px #0000000a,0 1px 5px #00000005}
.busy-kicker{font:800 9px Manrope,sans-serif;letter-spacing:2px;color:#777}
.busy-orbit{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;margin:5px 0}
.busy-orbit:before,.busy-orbit:after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.busy-orbit:before{inset:0;border:2px solid #eaeaea;border-top-color:#111;border-right-color:#777;animation:spin 1.8s linear infinite}
.busy-orbit:after{inset:10px;border:1px dashed #c5c5c5;animation:spin 7s linear infinite reverse}
.busy-orbit span{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;background:linear-gradient(145deg,#303030,#080808);color:#fff;border-radius:16px;box-shadow:0 7px 17px #0003;font:800 28px Manrope,sans-serif}
.busy h2{font:800 clamp(17px,3vw,21px)/1.2 Manrope,sans-serif;letter-spacing:-.6px;margin:0}
.busy p{font-size:11.5px;line-height:1.55;color:#646464;max-width:270px;margin:0}
.busy-track{height:4px;width:min(100%,230px);background:#efefef;border-radius:20px;overflow:hidden;margin-top:4px}
.busy-track div{width:40%;height:100%;background:linear-gradient(90deg,#5d5d5d,#111,#555);border-radius:20px;animation:slide 2.2s ease-in-out infinite}
.busy-hint{font-size:10px;color:#9a9a9a}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide{from{transform:translateX(-120%)}to{transform:translateX(400%)}}
@media(max-width:600px){
  .topbar{flex-basis:54px;padding:0 14px}.brand{font-size:20px}.brand-mark{width:32px;height:32px}
  .header-caption{font-size:8px;letter-spacing:1.1px}
  .services-toggle{padding:6px 13px;min-height:32px;font-size:10px}
  .app-shell{padding:7px 7px 3px;gap:3px}
  .studio-card{border-radius:14px}
  .studio-head{padding:8px 14px}.studio-head small{font-size:9px}
  .ai-pill{font-size:8px;padding:5px 8px}
  .progress{padding:7px 11px;gap:6px}.progress-item{gap:5px}.progress-item small{font-size:9px}.progress-item span{width:20px;height:20px}.progress-line{width:min(7vw,36px)}
  .step-panel{padding:11px 12px 9px;gap:8px}
  .panel-heading h1{font-size:19px}.panel-heading p{font-size:10px}
  .photo-actions{gap:8px}.photo-actions button,.photo-actions label{min-height:130px}
  .photo-actions strong{font-size:12px}.photo-actions small{font-size:10px}
  .analysis-grid{grid-template-columns:56px minmax(0,1fr);min-height:68px;padding:6px;gap:8px}
  .analysis-grid img{width:56px;height:56px}
  .choice{height:34px;font-size:10px}
  .services-grid{gap:6px}.service-choice{height:42px;font-size:10px}
  .upload-services .service-choice{height:38px}
  .service-mode .photo-actions button,.service-mode .photo-actions label{min-height:53px}
  .service-tip{font-size:9px}
  .group-heading{margin-bottom:5px}.group-heading h3{font-size:12px}.group-heading small{font-size:9px}
  .primary,.secondary{min-height:39px;font-size:11px}
  .site-note{font-size:9px;flex-basis:12px}
  .compare{width:min(100%,calc(100dvh - 280px),430px)}
}
@media(max-width:350px),(max-height:590px){
  .studio-head{padding-block:6px}.studio-head small{display:none}
  .progress{padding-block:4px}
  .step-panel{padding:7px 10px;gap:5px}
  .panel-heading h1{font-size:17px;margin-bottom:2px}.panel-heading p{font-size:9px}
  .analysis-grid{grid-template-columns:47px minmax(0,1fr);min-height:55px;padding:4px}
  .analysis-grid img{width:47px;height:47px}
  .analysis-summary p{-webkit-line-clamp:1}
  .choice-grid{gap:4px}.choice{height:30px;font-size:9px;padding:2px}
  .services-grid{gap:5px}.service-choice{height:36px;font-size:9px;padding:4px}
  .upload-services .service-choice{height:31px}
  .service-mode .upload-panel{gap:4px}
  .service-mode .photo-actions button,.service-mode .photo-actions label{min-height:42px}
  .services-panel{gap:6px}.service-tip{font-size:8.5px}
  .style-groups{gap:5px}
  .group-heading{margin-bottom:3px}
  .action-row .primary,.action-row .secondary,.result-actions .primary,.result-actions .secondary{min-height:35px}
  .billing-note,.result-disclaimer{font-size:8px}
  .photo-actions button,.photo-actions label{min-height:100px}
  .consent{font-size:9px}
  .compare{width:min(100%,calc(100dvh - 275px),350px)}
  .busy-content{padding:15px 12px;gap:8px;border-radius:17px}
  .busy-orbit{width:78px;height:78px}
  .busy-orbit span{width:43px;height:43px;font-size:24px;border-radius:13px}
}
@media(max-height:460px){.site-note{display:none}.studio-head{display:none}.step-panel{padding-block:5px}.analysis-grid{display:none}.analysis-panel .panel-heading p{display:none}.upload-main{min-height:0}.photo-actions button,.photo-actions label{min-height:70px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}