:root{--ink:#19251f;--muted:#718078;--line:#dce3de;--cream:#f6f5f0;--mint:#e7f5ec;--green:#207e4e;--orange:#ffbd44;--red:#ed5b4c}*{box-sizing:border-box}body{margin:0;background:var(--cream);font-family:Manrope,Arial,sans-serif;color:var(--ink)}main{max-width:1160px;margin:auto;padding:0 28px 70px}nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:20px;font-weight:800;letter-spacing:-1px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:9px}.brand-mark{background:var(--green);color:white;border-radius:7px;width:28px;height:28px;display:grid;place-items:center;font-size:15px}.nav-actions{display:flex;align-items:center;gap:20px}.text-button,.new-scan{border:0;background:none;font:600 13px Manrope;color:var(--ink);cursor:pointer}.avatar{border:0;width:34px;height:34px;border-radius:50%;background:#d0d7ff;color:#45517f;font:700 11px Manrope}.hero{text-align:center;padding:72px 0 55px}.eyebrow{font:500 11px 'DM Mono',monospace;color:#518063;letter-spacing:1.1px;display:flex;justify-content:center;align-items:center;gap:8px}.eyebrow span{width:6px;height:6px;background:#59a575;border-radius:50%}.hero h1{margin:15px 0 16px;font-size:54px;letter-spacing:-3.2px;line-height:1.1}.hero h1 em{font-style:normal;color:var(--green)}.hero p{max-width:540px;margin:auto;color:var(--muted);font-size:16px;line-height:1.65}.workspace{background:white;border:1px solid var(--line);border-radius:18px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;box-shadow:0 14px 40px #2b3e3210}.input-panel{padding:31px 32px 26px}.reference-panel{border-left:1px solid var(--line)}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:23px}.panel-heading>div{display:flex;gap:11px;align-items:center}.step{font:500 10px 'DM Mono';color:var(--green);background:var(--mint);padding:5px 6px;border-radius:4px}.panel-heading h2{font-size:16px;margin:0;letter-spacing:-.45px}.required,.optional{font:500 9px 'DM Mono';letter-spacing:.7px;border-radius:4px;padding:5px 6px}.required{color:#cf6c20;background:#fff0df}.optional{color:#839087;background:#f0f2f0}.upload-zone{height:238px;border:1.5px dashed #b8c6be;border-radius:12px;background:#fbfcfa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.2s}.upload-zone:hover,.upload-zone.dragging{background:#f2faf4;border-color:var(--green)}.upload-zone input{display:none}.upload-icon{width:37px;height:37px;border-radius:10px;background:var(--mint);display:grid;place-items:center;color:var(--green);font-size:22px;margin-bottom:4px}.upload-zone strong{font-size:14px}.upload-zone span{font-size:12px;color:var(--muted)}.upload-zone small{font:10px 'DM Mono';color:#9da8a1;margin-top:11px}.preview{height:238px;border-radius:12px;overflow:hidden;position:relative}.preview img{width:100%;height:100%;object-fit:cover}.preview button{position:absolute;right:10px;top:10px;width:27px;height:27px;border:0;border-radius:50%;background:#ffffffd9;color:var(--ink);font-size:20px;cursor:pointer}.hidden{display:none!important}.upload-status{margin:14px 2px 0;font-size:11px;line-height:1.5;color:var(--green)}.upload-status.error{color:var(--red)}.analyze:disabled{opacity:.55;cursor:not-allowed;transform:none}.analyze:disabled:hover{background:var(--green);transform:none}.photo-tip{display:flex;gap:10px;margin:18px 2px 0;color:var(--muted);font-size:11px;line-height:1.5}.photo-tip span{color:var(--green);font-size:16px}.photo-tip p{margin:0}.photo-tip b{color:#4f6056}.reference-card{height:112px;border-radius:10px;border:1px solid var(--line);display:flex;overflow:hidden}.reference-image{width:145px;background:#e5e2dc;position:relative;overflow:hidden}.reference-card>div+div{padding:18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.reference-card b{font-size:12px}.reference-card span{font-size:10px;color:var(--muted)}.change-ref{border:0;background:none;color:var(--green);font:700 10px Manrope;padding:5px 0;cursor:pointer}.brick{position:absolute;border-radius:3px;box-shadow:inset -3px -3px #0002}.brick:before{content:"";position:absolute;width:8px;height:4px;border-radius:5px 5px 0 0;background:#ffffff55;top:-3px;left:6px}.b1{width:47px;height:23px;background:#e8d855;bottom:21px;left:39px}.b2{width:58px;height:18px;background:#317fb5;bottom:38px;left:29px}.b3{width:29px;height:27px;background:#e65448;bottom:54px;left:51px}.b4{width:35px;height:16px;background:#5e6870;bottom:80px;left:47px}.b5{width:17px;height:17px;background:#f0f2ef;bottom:42px;left:89px}.b6{width:14px;height:14px;background:#252c2d;bottom:7px;left:29px}.b7{width:14px;height:14px;background:#252c2d;bottom:7px;left:87px}.b8{width:21px;height:12px;background:#e65448;bottom:71px;left:35px}.b9{width:18px;height:12px;background:#e8d855;bottom:22px;left:86px}.b10{width:20px;height:10px;background:#39454a;bottom:19px;left:20px}.or{display:flex;align-items:center;gap:8px;color:#a0aaa4;font:10px 'DM Mono';margin:18px 0}.or:before,.or:after{content:"";height:1px;background:var(--line);flex:1}.instruction-button{width:100%;height:58px;background:#fff;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:var(--ink);cursor:pointer}.instruction-button>span:first-child{color:var(--green);font-size:19px}.instruction-button>span:nth-child(2){text-align:left;flex:1;padding-left:12px}.instruction-button b,.instruction-button small{display:block}.instruction-button b{font:600 12px Manrope}.instruction-button small{font:10px Manrope;color:var(--muted);margin-top:2px}.instruction-button>span:last-child{color:var(--green);font-size:20px}.analyze{margin-top:23px;width:100%;height:51px;border:0;border-radius:9px;color:white;background:var(--green);font:700 14px Manrope;cursor:pointer;transition:.2s}.analyze:hover{background:#17663d;transform:translateY(-1px)}.sparkle{margin-right:8px}.arrow{margin-left:10px}.privacy{text-align:center;font-size:10px;color:#98a39c;margin:14px 0 0}.results{margin-top:44px}.results-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}.results .eyebrow{justify-content:flex-start}.results h2{font-size:31px;letter-spacing:-1.5px;margin:8px 0 3px}.results-heading p{font-size:13px;color:var(--muted);margin:0}.align-note{display:block;margin-top:3px;font-size:11px;color:#8e9991}.new-scan{border:1px solid var(--line);padding:10px 13px;border-radius:7px}.result-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:18px}.build-map,.issues article,.success-card{border:1px solid var(--line);background:#fff;border-radius:13px}.map-top,.map-footer{height:47px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.map-top span,.map-footer{color:var(--muted);font-size:10px}.map-top i{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--red);margin-right:4px}.map-image{height:305px;background:#e2e4df;position:relative;overflow:hidden}.map-photo{width:100%;height:100%;object-fit:contain;background:#d8dbd6}.pin.active-pin{background:#c73f31}.map-footer{border-top:1px solid var(--line)}.map-rover{position:absolute;left:50%;top:50%;width:260px;height:175px;transform:translate(-50%,-45%) rotate(-6deg)}.wheel{position:absolute;width:54px;height:54px;border:10px solid #2e3837;background:#5e6865;border-radius:50%;bottom:3px}.w1{left:12px}.w2{right:12px}.w3{left:60px;bottom:-12px;transform:scale(.7)}.w4{right:60px;bottom:-12px;transform:scale(.7)}.body-part{position:absolute;border-radius:5px;box-shadow:inset -5px -5px #0002}.p1{background:#2f7aac;width:164px;height:47px;left:48px;bottom:43px}.p2{background:#e9d94d;width:96px;height:37px;left:78px;bottom:83px}.p3{background:#df5248;width:42px;height:48px;left:104px;bottom:111px}.p4{background:#aeb7b5;width:65px;height:22px;left:91px;bottom:57px}.p5{background:#2e3939;width:25px;height:20px;left:151px;bottom:89px}.pin{position:absolute;width:29px;height:29px;border:3px solid white;border-radius:50%;background:var(--red);color:#fff;font:700 12px Manrope;box-shadow:0 2px 7px #0004;cursor:pointer}.pin1{left:58%;top:26%}.pin2{left:39%;top:57%}.pin3{left:66%;top:58%}.issues{display:flex;flex-direction:column;gap:9px}.issues article{padding:18px;display:grid;grid-template-columns:31px 1fr 18px;gap:12px;cursor:pointer;transition:.2s}.issues article.active{border-color:#7ebf98;box-shadow:0 4px 16px #1a7b4720}.issue-number{background:#f0f3f0;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;font:500 11px 'DM Mono';color:#3d5445}.severity{font:500 9px 'DM Mono';letter-spacing:.7px;color:#db5c4f}.severity.amber{color:#b77c19}.severity.purple{color:#7965b8}.issue h3{margin:4px 0 3px;font-size:15px;letter-spacing:-.4px}.issue p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.chevron{border:0;background:none;color:#8e9991;font-size:16px}.fix-visual{display:none;align-items:center;gap:12px;margin-top:12px;color:#577060;font-size:10px}.active .fix-visual{display:flex}.mini-brick{display:inline-block;width:34px;height:19px;border-radius:3px;box-shadow:inset -3px -3px #0002}.mini-brick:before{content:"";display:block;width:8px;height:5px;background:#ffffff66;border-radius:4px 4px 0 0;margin: -3px 6px}.blue{background:#327db0}.red{background:#df5248}.grey{background:#aeb7b5}.yellow{background:#e9d94d}.green{background:#207e4e}.black{background:#2e3939}.white{background:#f0f2ef}.rotate{transform:rotate(180deg)}.success-card{margin-top:18px;padding:16px 19px;display:flex;align-items:center;gap:11px;font-size:12px}.success-card b{margin-right:5px}.success-icon{width:26px;height:26px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;font-weight:bold}.success-card button{margin-left:auto;border:0;background:none;color:var(--green);font:700 11px Manrope;cursor:pointer}.loading{position:fixed;inset:0;background:#f6f5f0f2;z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column}.loading h2{font-size:23px;margin:23px 0 5px}.loading p{color:var(--muted);font-size:13px}.loader-brick{display:grid;grid-template-columns:repeat(2,25px);gap:5px;animation:float 1s ease-in-out infinite}.loader-brick i{height:25px;background:var(--green);border-radius:4px}.loader-brick i:nth-child(2){background:var(--orange)}.loader-brick i:nth-child(3){background:#e85e51}.loader-brick i:nth-child(4){background:#3785bb}@keyframes float{50%{transform:translateY(-10px)}}@media(max-width:720px){main{padding:0 16px 45px}.hero{padding:43px 5px 35px}.hero h1{font-size:38px;letter-spacing:-2.3px}.workspace,.result-layout{grid-template-columns:1fr}.reference-panel{border-left:0;border-top:1px solid var(--line)}.input-panel{padding:23px 20px}.results-heading{align-items:flex-start;gap:12px}.results h2{font-size:25px}.success-card{align-items:flex-start}.success-card button{white-space:nowrap}.nav-actions .text-button{display:none}}

/* Issue-card zoom crops: "your build" vs "should look like" */
.compare { display: flex; gap: 12px; margin: 12px 0 2px; }
.compare figure { margin: 0; }
.compare canvas.crop { width: 150px; height: 150px; max-width: 100%; display: block; border-radius: 10px; border: 1px solid rgba(15, 30, 20, 0.14); background: #f2f1ec; }
.compare figcaption { font-size: 12px; color: #6b7568; margin-top: 5px; font-weight: 600; letter-spacing: 0.02em; }
@media (max-width: 560px) { .compare canvas.crop { width: 120px; height: 120px; } }

/* Issue pins mark a percentage position on the build photo, so the photo's
   rendered box must BE the coordinate space: let the image define the
   container's height rather than letterboxing it inside a fixed 305px
   (which left percentage pins offset by the empty bars). */
.map-image { height: auto; }
.map-photo { width: 100%; height: auto; display: block; object-fit: initial; }
/* Centre each pin on its point instead of hanging it down-and-right. */
.pin { transform: translate(-50%, -50%); }
.pin.active-pin { transform: translate(-50%, -50%) scale(1.24); }

/* ============================================================
   Playful pass. Appended rather than woven in, so the original
   layout stays readable and this can be lifted out wholesale.
   The motif is the stud: the mark, the buttons and the panel
   tops all carry it, and anything clickable depresses like a
   brick being pressed rather than just changing colour.
   ============================================================ */

:root {
  --brick-red: #d01012;
  --brick-blue: #0057a6;
  --brick-yellow: #f5c518;
  --brick-green: #237841;
  --stud: radial-gradient(circle at 50% 50%, #ffffff70 38%, transparent 39%);
}

/* Faint stud grid, so the page reads as a baseplate without
   competing with the content sitting on it. */
body {
  background-color: var(--cream);
  background-image: radial-gradient(circle at 10px 10px, #0000000a 3px, transparent 4px);
  background-size: 34px 34px;
}

/* Brand mark: a stud on top of a brick. */
.brand-mark {
  background: var(--brick-red);
  border-radius: 6px;
  box-shadow: inset 0 -3px #0003, 0 2px 0 #0002;
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  border-radius: 4px 4px 2px 2px;
  background: var(--brick-red);
  box-shadow: inset 0 2px #ffffff55;
}

.hero h1 em {
  color: var(--brick-red);
  font-style: normal;
  position: relative;
}
/* Hand-drawn-ish underline, so the emphasis feels drawn rather than styled. */
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 8px;
  background: var(--brick-yellow);
  opacity: .55;
  border-radius: 6px;
  z-index: -1;
}

/* Panels get a row of studs along the top edge. These sit on a white
   surface, so they need a dark tint — the white --stud used elsewhere is
   invisible here. */
.input-panel, .build-map, .issues article, .success-card {
  position: relative;
  border-radius: 14px;
}
.input-panel::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 22px;
  right: 22px;
  height: 8px;
  background-image: radial-gradient(circle at 50% 120%, #19251f14 46%, transparent 47%);
  background-size: 26px 16px;
  background-repeat: repeat-x;
  pointer-events: none;
}

.step {
  background: var(--brick-blue);
  color: #fff;
  border-radius: 6px;
}

/* Primary action: a chunky brick you press. */
.analyze {
  background: var(--brick-red);
  border-radius: 11px;
  font-size: 15px;
  letter-spacing: -.1px;
  box-shadow: 0 4px 0 #8d0b0d, 0 6px 14px #d0101233;
  transform: translateY(0);
  transition: transform .08s ease, box-shadow .08s ease, background .2s;
}
.analyze:hover:not(:disabled) { background: #e01416; }
.analyze:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 #8d0b0d, 0 2px 6px #d0101233;
}
.analyze:disabled {
  background: #c9cdc9;
  box-shadow: 0 4px 0 #adb2ad;
  cursor: not-allowed;
}
.analyze .sparkle { animation: nudge 2.4s ease-in-out infinite; display: inline-block; }
@keyframes nudge {
  0%, 88%, 100% { transform: rotate(0) scale(1); }
  92% { transform: rotate(-14deg) scale(1.18); }
  96% { transform: rotate(14deg) scale(1.18); }
}

/* Drop zone: lifts and turns friendly on drag. */
.upload-zone {
  border-width: 2px;
  border-radius: 14px;
  transition: transform .15s ease, border-color .15s, background .15s;
}
.upload-zone:hover { border-color: var(--brick-blue); background: #f4f8ff; }
.upload-zone.dragging {
  border-color: var(--brick-red);
  background: #fff5f5;
  transform: scale(1.015);
}
.upload-icon {
  background: var(--brick-yellow) !important;
  color: #6b4e00 !important;
  border-radius: 50%;
  box-shadow: 0 3px 0 #c99f0d;
  transition: transform .2s ease;
}
.upload-zone:hover .upload-icon { transform: translateY(-3px); }

/* The example reference now shows a real build. */
.reference-image { background: #eceae4; }
.reference-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reference-card {
  border-radius: 12px;
  border-width: 2px;
  transition: border-color .2s, transform .15s ease;
}
.reference-card:hover { border-color: var(--brick-blue); transform: translateY(-2px); }

.instruction-button {
  border-radius: 11px;
  border-width: 2px;
  transition: border-color .2s, transform .12s ease, background .2s;
}
.instruction-button:hover {
  border-color: var(--brick-yellow);
  background: #fffdf4;
  transform: translateY(-2px);
}

/* Issue pins: bolder, and the active one gets a gentle pulse so the
   eye is drawn to the spot being described. */
.pin {
  border-width: 3px;
  font-weight: 800;
  box-shadow: 0 3px 8px #0005;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .2s;
}
.pin:hover { transform: translate(-50%, -50%) scale(1.18); }
.pin.active-pin { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 3px 8px #0005, 0 0 0 0 #d0101266; }
  50%      { box-shadow: 0 3px 8px #0005, 0 0 0 12px #d0101200; }
}

.issues article {
  border-width: 2px;
  transition: transform .15s ease, border-color .2s, box-shadow .2s;
}
.issues article:hover { transform: translateX(3px); }
.issues article.active {
  border-color: var(--brick-red);
  box-shadow: 0 4px 0 #f0d6d6;
}
.issue-number {
  background: var(--brick-red) !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 800;
  box-shadow: inset 0 -2px #0003;
}

.success-card {
  border-width: 2px;
  border-color: var(--brick-green);
  background: #f2fbf5;
}
.success-icon { background: var(--brick-green) !important; }

/* Loader: bricks that tumble rather than merely float. */
.loader-brick i:nth-child(1) { background: var(--brick-red) !important; }
.loader-brick i:nth-child(2) { background: var(--brick-blue) !important; }
.loader-brick i:nth-child(3) { background: var(--brick-yellow) !important; }
.loader-brick i:nth-child(4) { background: var(--brick-green) !important; }
.loader-brick { animation: tumble 1.6s ease-in-out infinite; }
@keyframes tumble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-10px) rotate(-8deg); }
  75%      { transform: translateY(-10px) rotate(8deg); }
}

/* Visible focus for keyboard users — the hover states above are
   mouse-only, and this is the one accessibility gap they would open. */
button:focus-visible, .upload-zone:focus-within, a:focus-visible {
  outline: 3px solid var(--brick-blue);
  outline-offset: 3px;
}

/* Honour a reduced-motion preference: keep the colour, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}