/* Tint shade lab on /window-tint (2026-10-07): the Tint Pros widget (~/Desktop/tint-shades/section.html, script kept
   but for the asserted patches in tools/build_tint_lab.py) in this site's dress -- the PPF studio's card, Bebas Neue over
   Saira, the pink-to-coral gradient on what is chosen. Two vehicles (Tesla Model S, Model Y), six shades. Scoped
   under #tp-tintlab. */
#tp-tintlab{
  --tl-grad:var(--brand-gradient,linear-gradient(405deg,#ea138f 0%,#f59154 100%));
  --tl-coral:var(--brand-coral,#f59154);
  --tl-pink:#ea138f;
  --tl-ink:var(--paper,#eeeae2);
  --tl-card:#151412;
  --tl-card2:#1b1b18;
  --tl-pick:#291722;
  --tl-line:var(--line,#ffffff26);
  --tl-line-soft:#ffffff14;
  --tl-mut:#d8d1c8;
  --tl-sub:var(--text-soft,#bcb9b0);
  --tl-ok:#62d394;
  --tl-warn:#f5b44a;
  --tl-no:#ff6b7a;
  --tl-display:'Bebas Neue',Saira,sans-serif;
  --tl-body:Saira,Arial,sans-serif;
  --tl-ease:cubic-bezier(.16,1,.3,1);
  display:block;width:100%;max-width:100%;min-width:0;margin-top:clamp(26px,3vw,40px);
  font-family:var(--tl-body);color:var(--tl-ink);-webkit-font-smoothing:antialiased;
}
#tp-tintlab *,#tp-tintlab *::before,#tp-tintlab *::after{box-sizing:border-box;}
#tp-tintlab button{font:inherit;}
#tp-tintlab button:focus-visible,#tp-tintlab a:focus-visible{outline:2px solid #f5add1;outline-offset:3px;}
#tp-tintlab .tl__inner{display:flex;flex-direction:column;background:var(--tl-card);border:1px solid var(--tl-line);}

/* ---------- vehicles ---------- */
#tp-tintlab .tl__cars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:22px 26px 20px;max-width:520px;}
#tp-tintlab .tl__car{
  appearance:none;border:1px solid var(--tl-line);border-radius:3px;background:var(--tl-card2);color:var(--tl-sub);cursor:pointer;
  font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:13px 8px 12px;line-height:1;white-space:nowrap;
  transition:background .25s var(--tl-ease),color .2s,border-color .2s;
}
#tp-tintlab .tl__car:hover{background:#24201c;color:#fff;}
#tp-tintlab .tl__car[aria-pressed="true"]{background:var(--tl-grad);border-color:#ffffff35;color:#fff;}

/* ---------- stage: the car, and the panel beside it ---------- */
/* 16:9: the widest the scene plate can be drawn at full height for both cars (the Model S at its broadside needs
   1.71:1); any squarer and the plate stops short of the frame's top and bottom */
#tp-tintlab .tl__stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,26%,340px);align-items:start;
  border-top:1px solid var(--tl-line-soft);}
#tp-tintlab .tl__view{position:relative;aspect-ratio:16/9;overflow:hidden;background:#100c09;touch-action:pan-y;cursor:grab;}
#tp-tintlab .tl__canvas{display:block;width:100%;height:100%;position:absolute;inset:0;}
#tp-tintlab .tl__view::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,6,5,.62),rgba(8,6,5,0) 34%),radial-gradient(80% 70% at 50% 45%,transparent 45%,rgba(0,0,0,.42));}
#tp-tintlab .tl__swap{position:absolute;z-index:5;left:0;right:0;top:0;height:2px;pointer-events:none;background:var(--tl-grad);
  transform:scaleX(0);transform-origin:left;opacity:0;transition:opacity .25s;}
#tp-tintlab .tl__stage[data-swapping="1"] .tl__swap{opacity:1;animation:tl-swap 1.1s var(--tl-ease) infinite;}
@keyframes tl-swap{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}50.1%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* Powered by LeadGend, as on the PPF studio's stages (Jason 2026-10-06), in LeadGend's gold */
#tp-tintlab .tl__credit{position:absolute;z-index:4;left:20px;top:18px;display:inline-flex;align-items:baseline;gap:6px;
  font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:#E3B83A;text-decoration:none;
  text-shadow:0 1px 8px #000,0 0 2px #000;transition:color .2s;}
#tp-tintlab .tl__credit b{font-weight:800;color:#F0C040;letter-spacing:.1em;}
#tp-tintlab .tl__credit:hover,#tp-tintlab .tl__credit:hover b{color:#FFD86B;}
#tp-tintlab .tl__carname{position:absolute;z-index:4;right:20px;top:18px;margin:0;pointer-events:none;
  font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:#e9e2da;text-shadow:0 1px 10px #000;}
#tp-tintlab .tl__badge{position:absolute;z-index:4;left:24px;bottom:22px;display:flex;align-items:baseline;gap:10px;pointer-events:none;text-shadow:0 2px 18px #000;}
#tp-tintlab .tl__badge b{font-family:var(--tl-display);font-weight:400;font-size:clamp(44px,5vw,72px);line-height:.85;color:#fff;letter-spacing:.01em;}
#tp-tintlab .tl__badge span{font-weight:700;font-size:12px;letter-spacing:.16em;color:#e9e2da;}
#tp-tintlab .tl__hint{position:absolute;z-index:4;right:22px;bottom:24px;margin:0;pointer-events:none;
  font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.86);text-shadow:0 1px 12px #000;transition:opacity .4s;}
#tp-tintlab .tl__stage[data-touched="1"] .tl__hint{opacity:0;}

/* ---------- the chosen shade, and Minnesota's rules for it ---------- */
#tp-tintlab .tl__panel{align-self:stretch;border-left:1px solid var(--tl-line-soft);padding:28px 26px 24px;display:flex;flex-direction:column;gap:20px;background:var(--tl-card2);}
#tp-tintlab .tl__ptag{margin:0 0 8px;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#ee9fc7;}
#tp-tintlab .tl__pname{margin:0;font-family:var(--tl-display);font-weight:400;font-size:clamp(30px,2.6vw,40px);line-height:1;letter-spacing:.01em;color:var(--tl-ink);}
#tp-tintlab .tl__pvlt{margin:8px 0 0;font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--tl-sub);}
#tp-tintlab .tl__pbody{margin:0;color:var(--tl-mut);font-size:15px;line-height:1.6;}
#tp-tintlab .tl__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
#tp-tintlab .tl__list li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;color:var(--tl-ink);}
#tp-tintlab .tl__list li::before{content:'';position:absolute;left:3px;top:.42em;width:10px;height:5px;border-left:2px solid var(--tl-coral);
  border-bottom:2px solid var(--tl-coral);transform:rotate(-45deg);}
/* Minnesota, under the shades: the four windows side by side, the note under them */
#tp-tintlab .tl__legal{padding:22px 26px 24px;border-top:1px solid var(--tl-line);}
#tp-tintlab .tl__legalhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
#tp-tintlab .tl__legalhead h4{margin:0;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#ee9fc7;}
#tp-tintlab .tl__vseg{display:flex;border:1px solid var(--tl-line);border-radius:3px;overflow:hidden;}
#tp-tintlab .tl__vseg button{appearance:none;border:0;background:transparent;color:var(--tl-sub);cursor:pointer;
  font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;line-height:1;transition:background .2s,color .2s;}
#tp-tintlab .tl__vseg button:hover{color:#fff;}
#tp-tintlab .tl__vseg button[aria-pressed="true"]{background:var(--tl-grad);color:#fff;}
#tp-tintlab .tl__legalhead{justify-content:flex-start;gap:18px;}
#tp-tintlab .tl__rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--tl-line-soft);border:1px solid var(--tl-line-soft);}
#tp-tintlab .tl__row{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 14px;background:var(--tl-card2);}
#tp-tintlab .tl__row span{font-size:14px;color:var(--tl-mut);}
#tp-tintlab .tl__chip{font-style:normal;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;
  border:1px solid currentColor;border-radius:2px;white-space:nowrap;}
#tp-tintlab .tl__chip[data-s="ok"]{color:var(--tl-ok);}
#tp-tintlab .tl__chip[data-s="warn"]{color:var(--tl-warn);}
#tp-tintlab .tl__chip[data-s="no"]{color:var(--tl-no);}
#tp-tintlab .tl__note{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--tl-sub);max-width:92ch;}

/* ---------- shades ---------- */
#tp-tintlab .tl__rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--tl-line);}
#tp-tintlab .tl__shade{appearance:none;background:var(--tl-card2);border:0;border-left:1px solid var(--tl-line);border-top:3px solid transparent;
  padding:16px 14px 15px;cursor:pointer;text-align:left;color:var(--tl-ink);position:relative;transition:background .25s,border-color .25s;}
#tp-tintlab .tl__shade:first-child{border-left:0;}
#tp-tintlab .tl__shade:hover{background:#24201c;}
#tp-tintlab .tl__shade[aria-pressed="true"]{background:var(--tl-pick);border-top-color:var(--tl-pink);}
#tp-tintlab .tl__swatch{display:block;height:36px;margin-bottom:12px;border:1px solid rgba(255,255,255,.16);border-radius:2px;
  background-image:linear-gradient(112deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.05) 100%),
    linear-gradient(rgba(0,0,0,var(--dark)),rgba(0,0,0,var(--dark))),var(--sw-img,none);
  background-size:cover,cover,cover;background-position:center;background-color:#0b0d0f;}
#tp-tintlab .tl__vlt{display:block;font-family:var(--tl-display);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1;letter-spacing:.01em;}
#tp-tintlab .tl__lbl{display:block;margin-top:6px;font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--tl-sub);}
#tp-tintlab .tl__shade[aria-pressed="true"] .tl__lbl{color:#fff;}

/* ---------- foot ---------- */
#tp-tintlab .tl__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:22px 26px 24px;border-top:1px solid var(--tl-line-soft);}
#tp-tintlab .tl__disclaim{margin:0;font-size:13.5px;line-height:1.6;color:var(--tl-sub);max-width:70ch;}

/* ---------- loading, and no canvas ---------- */
#tp-tintlab .tl__load{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:#100c09;transition:opacity .55s var(--tl-ease);}
#tp-tintlab .tl__load[hidden]{display:none;}
#tp-tintlab .tl__load.is-out{opacity:0;pointer-events:none;}
#tp-tintlab .tl__bar{width:min(220px,50%);height:2px;background:rgba(255,255,255,.14);overflow:hidden;}
#tp-tintlab .tl__bar i{display:block;height:100%;width:0%;background:var(--tl-grad);}
#tp-tintlab .tl__pct{font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tl-sub);}
#tp-tintlab .tl__fallback{display:none;}
#tp-tintlab.is-nogl .tl__stage{grid-template-columns:1fr;}
#tp-tintlab.is-nogl .tl__view{display:none;}
#tp-tintlab.is-nogl .tl__fallback{display:block;}
#tp-tintlab.is-nogl .tl__panel{border-left:0;}
#tp-tintlab.is-nogl .tl__inner>.tl__rail{order:-1;}

/* ---------- tablets and phones: the shades above the car (pick, and see it without scrolling back) ---------- */
@media (min-width:1001px) and (max-width:1180px){
  #tp-tintlab .tl__stage{grid-template-columns:1fr;}
  #tp-tintlab .tl__panel{border-left:0;border-top:1px solid var(--tl-line-soft);}
}
@media (max-width:1000px){
  #tp-tintlab .tl__inner>.tl__cars{order:1;}
  #tp-tintlab .tl__inner>.tl__rail{order:2;border-top:1px solid var(--tl-line-soft);}
  #tp-tintlab .tl__inner>.tl__stage{order:3;}
  #tp-tintlab .tl__inner>.tl__legal{order:4;}
  #tp-tintlab .tl__inner>.tl__foot{order:5;}
  #tp-tintlab .tl__stage{grid-template-columns:1fr;}
  #tp-tintlab .tl__panel{border-left:0;border-top:1px solid var(--tl-line-soft);}
  #tp-tintlab .tl__legal{border-top-color:var(--tl-line-soft);}
}
@media (max-width:640px){
  #tp-tintlab .tl__cars{padding:18px 16px 16px;gap:5px;max-width:none;}
  #tp-tintlab .tl__car{font-size:12px;letter-spacing:.08em;}
  #tp-tintlab .tl__rail{grid-template-columns:repeat(3,minmax(0,1fr));}
  #tp-tintlab .tl__shade{padding:11px 8px 12px;text-align:center;}
  #tp-tintlab .tl__shade:nth-child(4){border-left:0;}
  #tp-tintlab .tl__shade:nth-child(n+4){box-shadow:inset 0 1px 0 var(--tl-line-soft);}
  /* the window photo is unreadable at this size: a plain chip of the shade's darkness */
  #tp-tintlab .tl__swatch{height:12px;margin-bottom:9px;--sw-img:none;background-color:#7f8790;}
  #tp-tintlab .tl__vlt{font-size:26px;}
  #tp-tintlab .tl__lbl{font-size:11px;margin-top:4px;}
  #tp-tintlab .tl__credit{left:14px;top:14px;font-size:11px;}
  #tp-tintlab .tl__carname{right:14px;top:14px;font-size:10px;}
  /* the percentage would sit on the car's nose in a frame this small; the chosen shade is lit in the bar right above */
  #tp-tintlab .tl__badge{display:none;}
  #tp-tintlab .tl__hint{right:auto;left:14px;bottom:auto;top:36px;}
  #tp-tintlab .tl__panel{padding:22px 18px 20px;}
  #tp-tintlab .tl__legal{padding:20px 18px 20px;}
  #tp-tintlab .tl__legalhead{justify-content:space-between;}
  #tp-tintlab .tl__rows{grid-template-columns:1fr;}
  #tp-tintlab .tl__row{flex-direction:row;align-items:center;padding:10px 12px;}
  #tp-tintlab .tl__foot{padding:20px 18px 22px;}
  #tp-tintlab .tl__foot .pill{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  #tp-tintlab *{transition-duration:.01ms !important;}
  #tp-tintlab .tl__stage[data-swapping="1"] .tl__swap{animation:none;transform:scaleX(1);opacity:.7;}
}

/* The ULTRAFIT film grade picker higher on the same page: six grades, 05 to 70 (Jason 2026-10-07: "这个区域也要做
   5/15/25/35/50/70"). The thumb is one column wide, so its width follows the column count. */
.grade-track{grid-template-columns:repeat(6,54px)}
.grade-thumb{width:54px}
@media (max-width:800px){
  .segmented:has([data-series]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .segmented [data-series]{min-width:0;padding-left:6px;padding-right:6px;white-space:nowrap}
  .grade-pick{flex-wrap:wrap;row-gap:10px}
  .grade-track{width:100%;grid-template-columns:repeat(6,minmax(0,1fr))}
  .grade-thumb{width:calc((100% - 8px) / 6)}
}