: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;
  letter-spacing:-.005em;
  margin:0 0 8px;
  color:var(--navy);
}
.lede p{margin:0;max-width:56ch;font-size:15px;line-height:1.55;color:var(--muted);}

.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;}
}
.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:
    radial-gradient(120% 90% at 50% 8%, #fdfdfd 0%, #e4e9ee 46%, #c4ced7 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;}}

.floor-line{
  position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(16,44,100,0) 0%,rgba(16,44,100,.06) 100%);
  pointer-events:none;
}

.side-tag{
  position:absolute;top:12px;left:12px;
  font-family:'Barlow Condensed','Mulish',sans-serif;
  font-size:17px;font-weight:600;letter-spacing:.02em;
  color:var(--navy);
  background:rgba(255,255,255,.82);
  border-left:3px solid var(--red);
  padding:3px 10px 3px 8px;
  pointer-events:none;
}
.state-tag{
  position:absolute;top:12px;right:12px;
  font:inherit;font-size:12.5px;font-weight:700;
  color:#fff;background:var(--navy);
  border:0;padding:6px 13px;border-radius:100px;
  cursor:pointer;
  display:flex;align-items:center;gap:7px;
}
.state-tag::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:#8fa4c8;
}
.state-tag[data-lock="1"]::before,
.state-tag[data-lock="2"]::before{background:#f2b544;}
.state-tag:hover{background:var(--navy-deep);}
.state-tag:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
.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,.84);
  padding:7px 11px;
  border-radius:2px;
  pointer-events:none;
  transition:opacity .5s ease;
}
.hint.gone{opacity:0;}

.flip{
  position:absolute;left:50%;transform:translateX(-50%);bottom:52px;
  display:flex;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:100px;padding:3px;
}
.flip button{
  font:inherit;font-size:13px;font-weight:700;
  border:0;background:transparent;color:var(--muted);
  padding:7px 16px;border-radius:100px;cursor:pointer;
}
.flip button[aria-pressed="true"]{background:var(--navy);color:#fff;}
.flip button:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

/* ---------- 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);letter-spacing:.005em;
}
.card .sub{font-size:12.5px;color:var(--muted);margin:0 0 13px;line-height:1.45;}

.segset{display:flex;gap:6px;margin-bottom:13px;}
.segset button{
  flex:1;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;}

.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:10.5px;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;}

.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;}
.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);}

/* ---------- 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-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);}

.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;}
footer p{max-width:78ch;margin:0 auto;font-size:10.5px;line-height:1.6;color:#8b96a2;}

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