:root{
  --navy:#102c64;
  --navy-deep:#0a1c42;
  --red:#c60505;
  --steel:#94a7b5;
  --paper:#eef1f4;
  --line:#d3dae1;
  --ink:#1b2430;
  --muted:#5f6d7c;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

/* ---------- masthead ---------- */
.masthead{
  background:var(--navy);
  border-bottom:4px solid var(--red);
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:14px;
}
.masthead a{display:block;}
.masthead a:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.masthead img{height:36px;width:auto;display:block;}
.masthead .who{
  font-family:'Barlow Condensed','Mulish',sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:.02em;
  color:#b9c7e2;
  line-height:1.15;
  margin-left:auto;
  text-align:right;
}
.masthead .who b{display:block;color:#fff;font-weight:700;font-size:17px;}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;}
.lede{padding:22px 18px 14px;}
.lede h1{
  font-family:'Barlow Condensed','Mulish',sans-serif;
  font-weight:700;
  font-size:clamp(30px,7vw,46px);
  line-height:.96;
  margin:0 0 8px;
  color:var(--navy);
  text-wrap:balance;   /* even lines when it wraps on narrower screens */
}
.lede p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);}

/* ---------- starter looks: under the heading ---------- */
.looks{margin-top:16px;}
.looks-label{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);margin-bottom:8px;}
.looks-row{display:flex;flex-wrap:wrap;gap:8px;}
/* phones: one row that scrolls sideways to the screen edges, so the looks don't push the 3D view down */
@media(max-width:699px){
  .looks-row{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px;padding:3px 18px 6px;}
}
.look{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:6px 14px 6px 7px;border:1px solid var(--line);border-radius:100px;
  background:#fff;color:var(--navy);text-decoration:none;white-space:nowrap;
  font-size:13px;font-weight:700;
  transition:border-color .15s ease,background .15s ease;
}
.look:hover{border-color:var(--navy);}
.look:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.look[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
.look .dots{display:inline-flex;}
.look .dots span{width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 2px #fff,inset 0 0 0 1px rgba(0,0,0,.22);}
.look .dots span + span{margin-left:-6px;}
.look[aria-current="true"] .dots span{box-shadow:0 0 0 2px var(--navy),inset 0 0 0 1px rgba(255,255,255,.3);}

.split{display:block;padding:0 12px 24px;}
@media(min-width:900px){
  .split{display:grid;grid-template-columns:1fr 372px;gap:20px;align-items:start;padding:0 18px 32px;}
  /* the 3D view and AI preview float beside the panel as it scrolls. Sticky only moves the shorter column, so when a
     photo makes the stage column taller, the panel floats beside it instead; the script moves top for a column taller
     than the window */
  .stage-col,.panel{position:sticky;top:12px;}
}
.stage-col{min-width:0;}   /* lets the wide grid column shrink below the canvas's pixel size */

/* ---------- 3D stage ---------- */
.stage{
  position:relative;
  border-radius:3px;
  overflow:hidden;
  background:linear-gradient(180deg,#cfe0ef 0%,#e6edf3 52%,#d5dce2 100%);
  box-shadow:inset 0 0 0 1px var(--line);
  touch-action:none;
  cursor:grab;
}
.stage.dragging{cursor:grabbing;}
.stage canvas{display:block;width:100%;height:100%;}
.stage-inner{height:58vh;min-height:340px;max-height:620px;}
@media(min-width:900px){.stage-inner{height:min(74vh,660px);max-height:none;}}
@media(max-width:899px){
  /* phones: the 3D view stays pinned to the top while the AI preview and settings scroll under it. The stage column
     steps aside (display: contents) so the stage sticks for the whole split rather than only its own column. Heights
     go by the visible screen with the browser's bars showing (svh, with vh for older browsers), and never above 70%
     of it, so a small or sideways phone still has room to reach the settings. Swipes up and down on it scroll the page
     (pan-y) and sideways ones walk the corner, which keeps tilting once it's turning; otherwise the view would be a
     70%-of-the-screen patch the page can't be scrolled from. */
  .stage-col{display:contents;}
  .stage{position:sticky;top:0;z-index:5;touch-action:pan-y;box-shadow:inset 0 0 0 1px var(--line),0 10px 18px -12px rgba(16,44,100,.5);}
  .stage-inner{
    height:58svh;
    min-height:min(340px,70vh);min-height:min(340px,70svh);
    max-height:min(620px,70vh);max-height:min(620px,70svh);
  }
}

/* no 3D on this device: a message stands in for the canvas, the controls drawn over the view go, and phones don't pin it */
.stage.no3d{position:relative;cursor:auto;touch-action:auto;box-shadow:inset 0 0 0 1px var(--line);}
.stage.no3d > :not(.stage-inner){display:none;}
/* the graphics context dropped mid-visit and the browser is handing it back */
.gl-lost{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:min(320px,calc(100% - 32px));padding:11px 14px;
  font-size:13px;line-height:1.45;font-weight:600;color:var(--navy);
  background:rgba(255,255,255,.95);border-left:3px solid var(--red);box-shadow:0 4px 14px rgba(10,28,66,.18);
  pointer-events:none;
}
.nogl{display:flex;flex-direction:column;justify-content:center;height:100%;padding:22px 20px;text-align:left;}
.nogl strong{font-family:'Barlow Condensed','Mulish',sans-serif;font-size:24px;font-weight:700;color:var(--navy);line-height:1.05;margin-bottom:7px;}
.nogl p{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--muted);max-width:52ch;}
.nogl ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.65;color:var(--muted);max-width:52ch;}
.nogl code{background:rgba(16,44,100,.07);padding:1px 4px;border-radius:2px;font-size:11.5px;}

.side-tag{
  position:absolute;top:12px;left:12px;
  font-family:'Barlow Condensed','Mulish',sans-serif;
  font-size:17px;font-weight:600;
  color:var(--navy);
  background:rgba(255,255,255,.84);
  border-left:3px solid var(--red);
  padding:3px 10px 3px 8px;
  pointer-events:none;
}
/* --lift: on phones, how far the script raises the hint while the view still runs past the bottom of the screen, so
   it shows above the floating button */
.hint{
  position:absolute;left:12px;right:12px;bottom:12px;
  font-size:12.5px;line-height:1.45;color:var(--navy);
  background:rgba(255,255,255,.86);
  padding:7px 11px;
  border-radius:2px;
  pointer-events:none;
  transform:translateY(calc(-1 * var(--lift, 0px)));
  transition:opacity .5s ease;
}
.hint.gone{opacity:0;}

.sunbar{
  position:absolute;top:12px;right:12px;left:auto;width:min(46%,230px);
  background:rgba(255,255,255,.88);border-radius:100px;padding:7px 13px 5px;
}
.sunbar label{display:block;font-size:10.5px;font-weight:800;color:var(--muted);letter-spacing:.04em;margin-bottom:2px;}
.sunbar input{width:100%;margin:0;accent-color:var(--navy);touch-action:auto;}

/* ---------- control panel ---------- */
.panel{margin-top:14px;}
@media(min-width:900px){.panel{margin-top:0;}}
.card{background:#fff;border:1px solid var(--line);border-radius:3px;padding:16px 15px 18px;margin-bottom:12px;}
.card h2{
  font-family:'Barlow Condensed','Mulish',sans-serif;
  font-size:22px;font-weight:700;margin:0 0 2px;color:var(--navy);
}
.card .sub{font-size:12.5px;color:var(--muted);margin:0 0 13px;line-height:1.45;}

.segset{display:flex;gap:6px;margin-bottom:11px;flex-wrap:wrap;}
.segset button{
  flex:1 1 44%;font:inherit;font-size:13px;font-weight:700;
  padding:8px 6px;border:1px solid var(--line);background:#f7f9fb;color:var(--muted);
  border-radius:2px;cursor:pointer;
}
.segset button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
.segset button:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.segset-gap{margin-top:11px;}

.spec{font-size:11.5px;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:2px;}
.spec b{color:var(--navy);}

.tier{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);margin:13px 0 7px;}
.tier:first-of-type{margin-top:0;}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
@media(min-width:420px) and (max-width:899px){.swatches{grid-template-columns:repeat(5,1fr);}}
.sw{border:0;background:transparent;padding:0;cursor:pointer;text-align:center;font:inherit;}
.sw .chip{
  display:block;width:100%;aspect-ratio:1/1;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
  position:relative;
}
.sw .nm{display:block;font-size:10px;line-height:1.2;margin-top:5px;color:var(--muted);font-weight:600;}
.sw[aria-pressed="true"] .chip{box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 0 0 3px var(--navy);}
.sw[aria-pressed="true"] .nm{color:var(--navy);font-weight:800;}
.sw:focus-visible .chip{outline:2px solid var(--red);outline-offset:3px;}
.sw[disabled]{cursor:not-allowed;}
.sw[disabled] .chip{opacity:.3;}
.sw[disabled] .nm{opacity:.4;}
.sw[disabled] .chip::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top left,transparent calc(50% - 1px),rgba(0,0,0,.45) 50%,transparent calc(50% + 1px));
}

.rule{
  display:none;margin-top:12px;padding:9px 11px;
  border-left:3px solid var(--red);background:#fdf3f3;
  font-size:12.5px;line-height:1.5;color:#6d2020;
}
.rule.on{display:block;}
.note{margin-top:11px;padding:9px 11px;border-left:3px solid var(--steel);background:#f4f7f9;font-size:12px;line-height:1.5;color:var(--muted);}

.toggle{
  display:flex;align-items:center;gap:10px;width:100%;
  border:1px solid var(--line);background:#f7f9fb;border-radius:2px;padding:10px 12px;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;text-align:left;
}
.toggle[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff;}
.toggle .dot{width:10px;height:10px;border-radius:50%;background:#c3ccd5;flex:0 0 auto;}
.toggle[aria-pressed="true"] .dot{background:#5fd39a;}
.toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.toggle + .toggle-body{margin-top:11px;}

.readout{
  display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--line);margin-top:14px;padding-top:13px;
}
.readout .pair{display:flex;gap:4px;flex:0 0 auto;}
.readout .pair span{width:22px;height:22px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
.readout .txt{font-size:13px;line-height:1.35;font-weight:700;color:var(--navy);}
.readout .txt em{display:block;font-style:normal;font-weight:600;font-size:11.5px;color:var(--muted);}

table.lines{width:100%;border-collapse:collapse;font-size:12px;}
table.lines th,table.lines td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top;}
table.lines th{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);font-weight:800;}
table.lines td b{color:var(--navy);}

/* ---------- share link ---------- */
.share{display:flex;gap:6px;}
.share input{
  flex:1;min-width:0;font:inherit;font-size:12.5px;color:var(--ink);
  padding:8px 9px;border:1px solid var(--line);border-radius:2px;background:#f7f9fb;
}
@media (pointer:coarse){.share input{font-size:16px;}} /* stops iOS zooming in on focus */
.share input:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.share button{
  font:inherit;font-size:13px;font-weight:700;white-space:nowrap;
  padding:8px 14px;border:1px solid var(--navy);border-radius:2px;
  background:var(--navy);color:#fff;cursor:pointer;
}
.share button:hover{background:var(--navy-deep);}
.share button:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.share-note{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--navy);}
.share-note:empty{display:none;}

/* ---------- AI preview ---------- */
[hidden]{display:none !important;}
.ai-card{border-top:3px solid var(--red);}
.stage-col .ai-card{margin:14px 0 0;}
/* in the wide column: intro text on the left, photo buttons on the right; the photo spans below */
@media(min-width:900px){
  .ai-card{display:grid;grid-template-columns:1fr minmax(240px,300px);column-gap:28px;align-items:center;padding:18px 20px 20px;}
  .ai-head .sub{margin-bottom:0;}
  .ai-pick{flex-direction:column;}
  .ai-work,.ai-turnstile,.ai-status,.ai-fine{grid-column:1 / -1;}
  .ai-work{margin-top:16px;}
  .ai-card:has(.ai-pick[hidden]) .ai-head{grid-column:1 / -1;}
}
.ai-new{margin:0 0 3px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);}
.ai-pick{display:flex;gap:6px;}
.ai-btn{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:800;padding:11px 8px;border-radius:2px;cursor:pointer;
  background:var(--navy);border:1px solid var(--navy);color:#fff;text-align:center;
}
.ai-btn:hover{background:var(--navy-deep);}
.ai-btn-alt{background:#f7f9fb;border-color:var(--line);color:var(--navy);}
.ai-btn-alt:hover{background:#eef1f4;}
.ai-btn input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;}
.ai-btn:focus-within{outline:2px solid var(--red);outline-offset:2px;}
.ai-frame{position:relative;display:flex;justify-content:center;border-radius:2px;overflow:hidden;background:#dfe5eb;box-shadow:inset 0 0 0 1px var(--line);}
/* cap tall (portrait) photos so the result fits on screen; the frame letterboxes them */
.ai-frame img{display:block;max-width:100%;width:auto;height:auto;max-height:min(72vh,640px);}
/* light sweep over the photo while the AI works */
.ai-frame.busy img{filter:saturate(.7) brightness(.92);}
.ai-frame.busy::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  background-size:250% 100%;animation:ai-sweep 1.6s linear infinite;
}
@keyframes ai-sweep{from{background-position:120% 0;}to{background-position:-120% 0;}}
.ai-flip{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  display:flex;background:rgba(255,255,255,.92);border-radius:100px;padding:3px;
}
.ai-flip button{font:inherit;font-size:12px;font-weight:700;border:0;background:transparent;color:var(--muted);padding:5px 14px;border-radius:100px;cursor:pointer;}
.ai-flip button[aria-pressed="true"]{background:var(--navy);color:#fff;}
.ai-flip button:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.ai-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:11px;}
.ai-go{font:inherit;font-size:14px;font-weight:800;padding:10px 16px;border:0;border-radius:2px;background:var(--red);color:#fff;cursor:pointer;}
.ai-go:hover{background:#a80404;}
.ai-go[disabled]{opacity:.65;cursor:progress;}
.ai-go:focus-visible{outline:3px solid var(--navy);outline-offset:2px;}
.ai-link{font:inherit;font-size:13px;font-weight:700;color:var(--navy);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;}
.ai-link[disabled]{opacity:.5;cursor:default;}
.ai-status{margin-top:10px;font-size:12.5px;line-height:1.45;font-weight:700;color:var(--navy);}
.ai-status:empty{display:none;}
.ai-status.error{padding:9px 11px;border-left:3px solid var(--red);background:#fdf3f3;color:#6d2020;font-weight:600;}
.ai-fine{margin:12px 0 0;font-size:11px;line-height:1.5;color:var(--muted);}

/* ---------- floating buttons: keep the 3D view, an out-of-date AI preview and, on phones, the settings in reach ----------
   The script decides which show: see KEEPING CHANGES IN SIGHT there. */
.fab{
  position:fixed;z-index:30;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  opacity:0;transform:translateY(14px);visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.fab.on{opacity:1;transform:none;visibility:visible;transition:opacity .2s ease,transform .2s ease,visibility 0s;}
.fab-btn{
  display:flex;align-items:center;gap:8px;min-height:48px;
  font:inherit;font-size:14px;font-weight:800;color:#fff;background:var(--navy);
  border:0;border-radius:100px;padding:0 18px 0 14px;cursor:pointer;
  box-shadow:0 6px 18px rgba(10,28,66,.3),0 1px 3px rgba(10,28,66,.25);
}
.fab-btn:hover{background:var(--navy-deep);}
.fab-btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto;}
.fab-ai{background:var(--red);}
.fab-ai:hover{background:#a80404;}
.fab-btn:focus-visible{outline:3px solid #fff;outline-offset:-6px;}

.cta{background:var(--navy);color:#dce4f2;border-radius:3px;padding:16px 15px;}
.cta .big{font-family:'Barlow Condensed','Mulish',sans-serif;font-size:23px;font-weight:700;color:#fff;line-height:1.05;margin-bottom:5px;}
.cta .sm{font-size:12.5px;line-height:1.5;color:#adbcd8;margin-bottom:11px;}
.cta a{
  display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-weight:800;font-size:16px;padding:10px 18px;border-radius:2px;
}
.cta a:focus-visible{outline:3px solid #fff;outline-offset:2px;}

footer{border-top:1px solid var(--line);padding:16px 18px 40px;}
/* the .wrap width less the lede's side padding, so the text lines up with the heading above */
footer p{max-width:1144px;margin:0 auto 9px;font-size:10.5px;line-height:1.6;color:#8b96a2;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}