: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%;}
/* The view's height rides on --stage-h, so one property carries it. On phones, where the view is pinned over the
   rest of the page, the script adds .compact while the AI photo is the thing being looked at and the view drops to
   the shorter height, handing the room to the photo; scrolling back off the photo hands it back. Desktop has the
   photo beside the settings rather than under a pinned view, so its height doesn't move. */
.stage{--stage-h:min(max(260px,44vh),52vh,480px);}
.stage-inner{height:var(--stage-h);transition:height .3s ease;}
@media(min-width:900px){.stage{--stage-h:min(74vh,660px);}}
@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 52%
     of it, so a small or sideways phone still has room to reach the settings. Compact it gives up a quarter again,
     so an AI photo under it gets two-thirds of the screen rather than the bare half the view leaves it. 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 screen-filling 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-h:min(max(260px,44vh),52vh,480px);--stage-h:min(max(260px,44svh),52svh,480px);
  }
  .stage.compact{--stage-h:min(max(190px,32vh),38vh,330px);--stage-h:min(max(190px,32svh),38svh,330px);}
}

/* 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. On phones, with the view
   compact, the photo takes the room the view gave up. */
.ai-frame img{display:block;max-width:100%;width:auto;height:auto;max-height:min(72vh,640px);}
@media(max-width:899px){
  .stage.compact ~ .ai-card .ai-frame img{max-height:min(62vh,760px);max-height:min(62svh,760px);}
}
/* 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;}
/* full screen, in the corner of the photo. Native where the browser has it, which puts its own chrome away too;
   iPhones only offer that for video, so there the script fixes the frame over the page instead and the two look the
   same. The photo's caps above sit on a longer selector than these do, so the full-screen sizes have to say so. */
.ai-fs{
  position:absolute;top:10px;right:10px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  border:0;border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--navy);
}
.ai-fs:hover{background:#fff;}
.ai-fs:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.ai-fs svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ai-fs .leave{display:none;}
.ai-fs[aria-pressed="true"] .enter{display:none;}
.ai-fs[aria-pressed="true"] .leave{display:block;}

.ai-frame.fs{
  position:fixed;inset:0;z-index:60;
  align-items:center;border-radius:0;box-shadow:none;background:#0b1220;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
.ai-frame.fs img{max-width:100% !important;max-height:100% !important;}
.ai-frame:fullscreen{align-items:center;border-radius:0;box-shadow:none;background:#0b1220;}
.ai-frame:fullscreen img{max-width:100% !important;max-height:100% !important;}
.ai-frame:-webkit-full-screen{align-items:center;border-radius:0;box-shadow:none;background:#0b1220;}
.ai-frame:-webkit-full-screen img{max-width:100% !important;max-height:100% !important;}
.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;}
/* the human check, on the visits where Cloudflare decides it wants one: clear of the buttons above it. It stays
   invisible for everyone else, where the space only moves the fine print down a touch. */
.ai-turnstile{margin-top:14px;}
.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;}
}