:root{
  --c50:#fafafa; --c100:#f5f5f5; --c200:#e6e6e6; --c300:#d6d6d6;
  --c400:#a5a5a5; --c500:#767676; --c600:#575757; --c700:#434343;
  --c800:#292929; --c900:#1a1a1a; --c950:#000000;
  --accent:#fe1700;
  --r-pill:999px; --r-panel:24px; --r-img:16px; --r-swatch:8px;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--c950); color:var(--c50);
  font-family:Inter,system-ui,sans-serif; font-weight:400; font-size:16px}
button,input,select,a{font-family:inherit; color:inherit}
button{cursor:pointer; border:0; background:none; padding:0}
img{display:block; max-width:100%}
svg{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
h1{font-size:24px; font-weight:600; letter-spacing:-.02em; margin:0}
.lede{margin:24px 0 0; color:var(--c300); max-width:42em}

.top{display:flex; align-items:center; justify-content:space-between;
  padding:32px 32px 0}
.logo{width:112px; height:32px}
.menu{display:flex; gap:8px}
.pill{display:inline-flex; align-items:center; gap:8px; border-radius:var(--r-pill);
  font-weight:600; font-size:14px}
.pill svg{width:16px; height:16px}
.pill.light{background:var(--c50); color:var(--c900); height:38px; padding:0 16px 0 18px}
.pill.dark{background:transparent; color:var(--c300); height:38px; padding:0 4px 0 8px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px;
  padding:0 24px; border-radius:var(--r-pill); font-weight:600; font-size:14px; text-decoration:none}
.btn svg{width:18px; height:18px}
#dlall svg{width:16px; height:16px}
.btn.primary{background:var(--c50); color:var(--c900)}
.btn.secondary{background:var(--c700); color:var(--c300)}
.btn:disabled,.btn[disabled]{background:var(--c800); color:var(--c500); cursor:default}

main{width:min(910px, calc(100% - 64px)); margin:0 auto; padding:48px 0 80px}
.wide{width:min(1154px, calc(100% - 64px)); margin-left:auto; margin-right:auto}

.steps{display:flex; gap:47px; margin-bottom:32px}
.step{display:flex; align-items:center; gap:12px; font-weight:600; font-size:14px; color:var(--c500)}
.step .num{width:32px; height:32px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--c800); color:var(--c500); font-size:14px}
.step.on{color:var(--c50)}
.step.on .num{background:var(--c100); color:var(--c900)}

.view{display:none}
.view.show{display:block}
.view > * + *{margin-top:32px}
.view > h1 + .lede{margin-top:24px}
body:has(#v1.show):not(.started){min-height:100vh; display:flex; flex-direction:column}
body:has(#v1.show):not(.started) .steps{display:none}
body:has(#v1.show):not(.started) main{flex:1; display:flex; flex-direction:column; justify-content:center; padding-top:24px; padding-bottom:24px}
#v1 .starttop{display:flex; align-items:center; justify-content:flex-start; gap:24px}
#v1 .starttop h1{font-size:40px; line-height:1}
#v1 .lede{margin-top:16px; color:var(--c400); font-size:16px; line-height:1.25}
.fan{width:112px; height:auto; flex:none}

.chooser{display:flex; align-items:stretch; gap:16px}
.drop{height:170px; flex:1; min-width:0; border-radius:var(--r-panel); background:var(--c900);
  border:1px solid var(--c700); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; text-align:center}
.drop.over{border-color:var(--c300)}
.drop.hasfile{border-color:var(--c50)}
.drop.hasfile b{font-size:14px; max-width:100%; padding:0 16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drop.compact{height:88px; flex-direction:row; gap:16px}
.dropico{width:28px; height:28px; color:var(--c50)}
.drop b{font-weight:600; font-size:18px}
.drop p{margin:0; color:var(--c400); font-size:14px}
.drop em{font-style:normal; color:var(--c50)}

.banner{display:flex; gap:16px; align-items:flex-start; background:var(--c900);
  border-radius:var(--r-panel); padding:20px 24px}
.banner svg{width:22px; height:22px; flex:none; margin-top:2px}
.banner b{display:block; font-weight:600}
.banner p{margin:4px 0 0; color:var(--c400); font-size:14px}

#croparea{position:relative; background:#fff; border-radius:var(--r-img); overflow:hidden; touch-action:none}
#cropimg{width:100%; height:auto}
#cropbox{position:absolute; border:2px solid var(--accent); background:rgba(254,23,0,.12)}

#presblock{flex-direction:row; justify-content:flex-end; align-items:center; gap:12px}
.navrow.end{justify-content:flex-end}
.pres{display:flex; gap:16px; flex:none}
.pcard{width:170px; height:170px; padding:24px; border-radius:var(--r-panel);
  border:1px solid var(--c700); background:var(--c900);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px}
.pcard.on{border-color:var(--c50)}
.pcard img{width:94px; height:92px; object-fit:contain; background:transparent; flex:1; min-height:0; opacity:.55}
.pcard span{font-size:14px; font-weight:600; color:var(--c400); background:none}
.pcard.on img{opacity:1}
.pcard.on span{color:var(--c50)}

.panel{background:var(--c900); border-radius:var(--r-panel); padding:16px}
#v2 .panel,#v2 .thumbs{width:100%}
#v2 .adjust,#v4 .adjust{position:fixed; left:50%; bottom:0; transform:translateX(-50%);
  width:min(770px, calc(100vw - 32px)); z-index:8; margin:0; padding:0 0 24px}
body.box-open #v2 .adjust,body.box-open #v4 .adjust{z-index:30}
body.box-open .box{padding-bottom:180px}
#v2 .adjust .bar,#v4 .adjust .bar{flex-direction:column; align-items:stretch; padding:16px; border:1px solid var(--c700)}
#v2 .adjust .send,#v4 .adjust .send{align-self:flex-end; border-radius:8px}
#v2 .adjust .send:disabled,#v4 .adjust .send:disabled{background:var(--c700); color:var(--c500); cursor:default}
#v2,#v4{padding-bottom:96px}
.emptyline{color:var(--c400); margin:24px 8px; font-size:15px}

.pair{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ver{position:relative}
.well{width:100%; background:#fff; border-radius:var(--r-img); overflow:hidden; aspect-ratio:3/3.6;
  display:flex; align-items:center; justify-content:center; position:relative}
.well img{width:100%; height:100%; object-fit:contain}
.ver.sel .well{outline:2px solid var(--accent); outline-offset:-2px}
.meta{display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:10px; font-size:13px}
.meta b{font-weight:600}
.meta span{color:var(--c400)}
.pick{position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.72); color:var(--c50); border-radius:var(--r-pill); padding:8px 12px; font-size:13px; font-weight:600}
.pick .tick{width:18px; height:18px; border-radius:var(--r-swatch); background:var(--accent);
  display:grid; place-items:center}
.pick .tick svg{width:12px; height:12px; stroke:#fff; stroke-width:2.4}
.zoom{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center}
.zoom svg{width:16px; height:16px}
.pager{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px}
.chev{width:36px; height:36px; border-radius:var(--r-pill); background:var(--c800); color:var(--c50);
  display:grid; place-items:center}
.chev svg{width:18px; height:18px}
.chev:disabled{color:var(--c600); cursor:default}
.dots{display:flex; gap:6px}
.dots i{width:6px; height:6px; border-radius:99px; background:var(--c600); display:block}
.dots i.on{background:var(--c50)}

#cands:has(.thumbs){background:transparent; padding:0}
.thumbs:has(.waitnote){justify-content:flex-start}
.thumbs:has(.waitnote) .thumb{flex:0 0 calc((100% - 48px) / 4)}
.thumbs:has(.waitnote) .well{background:var(--c900); border:1px solid var(--c700); cursor:default}
.thumbs{display:flex; gap:16px; width:100%}
.thumb{flex:1; min-width:0; text-align:left; background:none; border:0; padding:0;
  display:flex; flex-direction:column; gap:12px}
.thumb .tmeta{display:flex; align-items:baseline; gap:8px; white-space:nowrap}
.thumb .tmeta b{font-family:Inter,system-ui,sans-serif; font-size:12px; font-weight:600; line-height:1; color:var(--c50)}
.thumb .tmeta span{font-family:Inter,system-ui,sans-serif; font-size:10px; font-weight:400; line-height:1; color:var(--c400)}
.thumb .frame{position:relative}
.thumb .well{width:100%; height:auto; aspect-ratio:2/3; padding:0; cursor:pointer}
.thumb.on .well{outline:2px solid var(--accent); outline-offset:-2px}
.thumb .cap{position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0;
  padding:36px 12px 12px; font-size:12px; color:var(--c50);
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity:0; transition:opacity .15s ease; pointer-events:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.thumb .frame:hover .cap{opacity:1}
.thumb.on .cap{padding-bottom:52px}
.thumb .pick{left:16px; right:16px; bottom:16px; max-width:none; height:auto;
  padding:0; gap:8px; background:transparent; color:#000; font-size:14px; border-radius:0}
.thumb .pick .tick{width:28px; height:28px; border-radius:8px; padding:4px}
.thumb .pick .tick svg{width:20px; height:20px}
.thumb .zoom{pointer-events:none; top:16px; right:16px; width:36px; height:36px;
  background:var(--c200); color:var(--c900)}

.adjust .bar{display:flex; align-items:center; gap:12px; background:var(--c800);
  border-radius:var(--r-img); min-height:56px; padding:8px 8px 8px 16px}
.adjust label{font-weight:600; white-space:nowrap}
.adjust input{flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--c50); font-size:15px}
.adjust input::placeholder{color:var(--c500)}
.send{width:40px; height:40px; border-radius:99px; background:#fff; color:#111; display:grid; place-items:center; flex:none}
.send svg{width:18px; height:18px; stroke-width:2.2}
.note{display:none; margin:10px 0 0; color:var(--c400); font-size:13px}
.navrow{display:flex; justify-content:space-between; align-items:center; gap:12px}
#v2 .mastertop{width:100%; display:flex; align-items:center; justify-content:flex-start; gap:16px}
#v2 .mastertop h1{line-height:1}
.presmark{width:48px; height:48px; object-fit:contain; flex:none}
.presbox{width:72px; height:72px; flex:none; overflow:hidden; display:grid; place-items:center}
#presmark{width:72px; height:72px; transform:scale(1.7)}
#presmark.ghost{transform:scale(1.35)}
#v2 .mastertop .lede{margin-top:8px; line-height:1.25; color:var(--c400)}
#v2 .mastertop .btn{flex:none}

#v3 .colortop{display:flex; align-items:center; justify-content:flex-start; gap:16px}
#v3 .colortop h1{line-height:1}
#v3 .colortop .lede{margin-top:8px; line-height:1.25; color:var(--c400)}
#v3 .colortop .btn{flex:none}
.colorstep{display:flex; gap:24px; align-items:stretch; padding:24px}
.mpane{position:relative; flex:none; width:max-content; max-width:100%}
.mpane .well{width:auto; height:min(52vh, 480px); aspect-ratio:2/3; max-height:none}
.mpane .cap{display:block; margin-bottom:10px; font-size:13px; color:var(--c400)}
.swatchcol{display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; align-self:end; flex:1; min-width:0; height:min(52vh, 480px)}
.swatches{display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:12px; width:auto}
.swatchrow{display:flex; align-items:center; gap:12px}
.swatchrow span{font-size:14px; font-weight:400; color:var(--c400); white-space:nowrap}
.swatchrow:has(.swatch.on) span{font-weight:600; color:var(--c50)}
.swatch{border-radius:var(--r-swatch); width:40px; height:40px; border:0; outline:1px solid rgba(250,250,250,.4)}
.swatch.on{outline:1.5px solid #fff; outline-offset:2px}

.opt{display:inline-flex; align-items:center; gap:12px; color:var(--c300);
  font-size:14px; font-weight:600; cursor:pointer}
.opt input{appearance:none; width:44px; height:26px; margin:0; flex:none; border:0;
  border-radius:99px; background:var(--c700); position:relative}
.opt input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px;
  border-radius:99px; background:var(--c50); transition:transform .15s ease}
.opt input:checked{background:var(--c50)}
.opt input:checked::after{background:var(--c900); transform:translateX(18px)}

.phead{display:flex; align-items:center; justify-content:flex-start; gap:16px}
.stepico{width:48px; height:48px; color:var(--c50); flex:none; stroke-width:1.5}
.phead .state{display:block; margin-top:8px; color:var(--c400); font-size:14px}
.dlbox{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.dlbox select{height:52px; border-radius:0; background-color:transparent; color:var(--c300);
  border:0; padding:0 36px 0 0; font-family:inherit; font-size:14px; font-weight:600; appearance:none; field-sizing:content;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6d6d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:16px}
.imgs{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px}
.img .name{margin-top:8px; font-size:14px; font-weight:600}
.img .get{display:inline-flex; align-items:center; gap:6px; margin-top:4px; color:var(--c400); font-size:13px; text-decoration:none}
.img .get svg{width:16px; height:16px}
.img.pending .well{background:var(--c800)}
.waitnote{color:var(--c400); font-size:13px}
.issues{margin:6px 0 0; padding-left:16px; color:var(--c400); font-size:12px}

.scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .18s; z-index:9}
.drawer{position:fixed; top:0; right:0; bottom:0; width:320px; background:var(--c950);
  transform:translateX(100%); transition:transform .2s ease; padding:24px 0; overflow-y:auto; z-index:10}
body.menu-open .drawer{transform:none}
body.menu-open .scrim{opacity:1; pointer-events:auto}
.dhead{display:flex; justify-content:space-between; align-items:center; padding:8px 20px 16px}
.iconbtn{width:36px; height:36px; border-radius:99px; color:var(--c300); display:grid; place-items:center}
.iconbtn svg{width:18px; height:18px}
.drawer .empty{padding:8px 20px; color:var(--c400)}
.prow{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 16px; margin:0 8px; width:calc(100% - 16px); border-radius:12px; background:var(--c900)}
.prow + .prow{margin-top:8px}
.prow.on{outline:1px solid var(--c700)}
.prow .mini{width:36px; height:44px; background:#fff; border-radius:6px; overflow:hidden; flex:none}
.prow .mini img{width:100%; height:100%; object-fit:cover}
.prow .n{display:block; font-weight:600; font-size:14px}
.prow .s{font-size:13px; color:var(--c300)}

.box{position:fixed; inset:0; background:var(--c950); z-index:20; display:none;
  flex-direction:column; padding:24px 32px 32px}
body.box-open .box{display:flex}
.bhead{display:flex; align-items:center; justify-content:space-between}
.duo{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; min-height:0; margin-top:16px}
.pane{display:flex; flex-direction:column; min-height:0}
.big{position:relative; flex:1; background:#fff; border-radius:var(--r-img); display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden}
.big .pick{left:24px; right:auto; bottom:24px; height:auto; padding:0; gap:8px;
  background:transparent; color:#000; font-size:14px; font-weight:600; border-radius:0}
.big .pick .tick{width:28px; height:28px; border-radius:8px; padding:4px}
.big .pick .tick svg{width:20px; height:20px}
.big img{max-width:100%; max-height:100%; object-fit:contain}
.pane.chosen .big{outline:2px solid var(--accent); outline-offset:-2px}
.plab{padding:10px 2px 0; font-size:14px; color:var(--c300)}
.bfoot{display:flex; align-items:center; justify-content:center; gap:12px; padding:16px 0}
.choosebtn,.box #viewdl{align-self:center}
#bigcur .choosebtn{position:absolute; left:24px; right:auto; bottom:24px; z-index:2; border:1px solid var(--c700)}
.box.single .pane.chosen,.box.single .choosebtn{display:none}
.box.single .duo{grid-template-columns:1fr; max-width:640px; margin:16px auto 0; width:100%}
#viewdl[hidden],#cropwrap[hidden],#presblock[hidden],#pres[hidden],#thumbs[hidden]{display:none}

.keywall{position:fixed; inset:0; background:var(--c950); z-index:30; display:flex; align-items:center; justify-content:center}
.keywall[hidden]{display:none}
.keycard{width:min(360px, calc(100% - 48px)); padding:28px; display:flex; flex-direction:column; gap:12px}
.keycard b{font-size:24px; font-weight:600}
.keycard p{margin:0; color:var(--c300)}
.keycard input{height:48px; border-radius:var(--r-img); border:0; background:var(--c800); color:var(--c50); padding:0 14px; outline:none}
.keyerr{color:var(--accent) !important}

@media (max-width:760px){
  main,.top{width:auto}
  .top{padding:20px 16px 0}
  main{padding:28px 16px 64px; width:auto}
  .steps{gap:16px; overflow-x:auto}
  .chooser{flex-direction:column}
  #v1 .starttop{align-items:center; gap:16px}
  #v1 .starttop h1{font-size:32px}
  #v2 .mastertop{align-items:center; gap:12px}
  #v3 .colortop{align-items:center; gap:12px}
  .thumbs{display:grid; grid-template-columns:1fr 1fr}
  .thumb .tmeta{overflow:hidden}
  .drop{height:auto; padding-top:24px; padding-bottom:24px}
  .pres{width:100%}
  .pcard{flex:1; width:auto; min-width:0}
  .pair,.duo{grid-template-columns:1fr}
  .colorstep{flex-direction:column; max-width:100%; min-width:0}
  .swatchcol{height:auto; gap:24px; width:100%; max-width:100%; min-width:0; align-self:stretch}
  .swatches{flex-direction:row; flex-wrap:wrap; width:100%; max-width:100%; justify-content:flex-start}
}
.sysnote{position:sticky; top:0; z-index:50; background:var(--c800); color:var(--c50); padding:12px 16px; font-size:14px; text-align:center}