.info { --now:var(--cyan-ink); --now-ink:var(--ink); --was:var(--pink); --pill:#dcf0fd; --pill-line:#b4e0f8; }
.info--closed { --now:var(--pink); --now-ink:var(--white); --was:var(--cyan); --pill:#fde0ed; --pill-line:#f7c2da; }


.info__switch { display:flex; flex-direction:column; align-items:flex-end; }
.swx { position:relative; display:flex; padding:5px; border-radius:var(--r-pill); background:var(--white); box-shadow:inset 0 0 0 1px var(--ink-100); }
.swx__slide {
  position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:calc(50% - 5px);
  border-radius:var(--r-pill); background:var(--ink); box-shadow:4px 4px 0 var(--now);
  transition:transform var(--t-max) var(--ease-out), box-shadow var(--t-colour) var(--ease);
}
.info--closed .swx__slide { transform:translateX(100%); }
.swx__o { position:relative; z-index:1; }
.swx__o input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.swx__o span {
  display:block; padding:12px clamp(16px,2.4vw,30px); border-radius:var(--r-pill); cursor:pointer;
  font-family:var(--font-display); font-size:clamp(1rem,1.5vw,1.35rem); letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink-400); transition:color var(--t-colour) var(--ease);
}
.swx__o input:checked + span { color:var(--white); }
.swx__o input:focus-visible + span { box-shadow:var(--focus-ring); }
@media (max-width:767px) { .info__switch { align-items:flex-start; } .swx__o span { padding:11px 18px; } }


.info__grid { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--s-4); align-items:stretch; }
@media (max-width:1023px) { .info__grid { grid-template-columns:1fr; } }
.info__card { margin:0; padding:clamp(16px,1.7vw,22px); background:var(--white); border-radius:var(--r-3); box-shadow:inset 0 0 0 1px var(--ink-100); }
.info__card figcaption { display:flex; flex-direction:column; gap:3px; margin-bottom:12px; }
.info__card figcaption b { font-size:var(--fs-h4); font-weight:700; }
.info__card figcaption em { font-style:normal; font-size:var(--fs-small); color:var(--ink-600); }
.info__k { margin:0 0 12px; font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-400); }
.info__k em { font-style:normal; color:var(--now); }


.cut { display:block; width:100%; height:auto; }
.cut__sheath { fill:var(--ink-050); }
.cut__grain { stroke:var(--ink-100); stroke-width:1.2; }
.cut__stud { fill:var(--ink-050); stroke:var(--ink-100); stroke-width:1.5; }
.cut__board { fill:var(--ink-100); }
.cut__fill { fill:color-mix(in srgb, var(--now) 9%, var(--white)); transition:fill var(--t-max) var(--ease); }
.cut__cells { transition:opacity var(--t-max) var(--ease); }

.cut pattern circle { fill:color-mix(in srgb, var(--now) 30%, var(--white)); stroke:color-mix(in srgb, var(--now) 58%, var(--white)); stroke-width:1.2; transition:fill var(--t-max) var(--ease), stroke var(--t-max) var(--ease); }
.cut__cells--closed, .info--closed .cut__cells--open { opacity:0; }
.info--closed .cut__cells--closed { opacity:1; }
.cut__face { stroke:var(--now); stroke-width:3; fill:none; transition:stroke var(--t-max) var(--ease); }

.cut__lbl { fill:var(--ink-400); font-family:var(--font-core); font-size:10px; font-weight:800; letter-spacing:.1em; }
.cut__res { fill:var(--ink); font-family:var(--font-core); font-size:10px; font-weight:800; letter-spacing:.1em; }
.cut__in { stroke:var(--ink); stroke-width:2.4; fill:none; }
.cut__out { stroke:var(--ink-400); stroke-width:2.4; stroke-dasharray:7 6; fill:none; opacity:0; transition:opacity var(--t-move) var(--ease); }
.cut__stop circle { fill:var(--now); transition:fill var(--t-max) var(--ease); }
.cut__stop path { stroke:var(--now-ink); stroke-width:2.6; fill:none; stroke-linecap:round; transition:stroke var(--t-max) var(--ease); }
.cut__stop { transition:opacity var(--t-move) var(--ease), transform var(--t-max) var(--ease-out); }


.cut__back { opacity:0; transition:opacity var(--t-move) var(--ease); }
.cut__back path { stroke:var(--now); stroke-width:2.4; stroke-dasharray:7 6; fill:none; transition:stroke var(--t-max) var(--ease); }
.cut__backhead { stroke-dasharray:none !important; stroke-linecap:round; stroke-linejoin:round; }
.cut__test.is-bounce .cut__back { opacity:1; }


.cut__test.is-through .cut__out { opacity:1; }
.cut__test.is-through .cut__stop { opacity:0; }
.cut__test.is-through .cut__in { stroke:var(--ink-400); stroke-dasharray:7 6; }

.cut__side text { fill:var(--ink-400); font-family:var(--font-core); font-size:9.5px; font-weight:800; letter-spacing:.12em; }
.cut__depth { fill:var(--ink-400); }


.meters { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.meter { display:grid; grid-template-columns:1fr auto; gap:3px 12px; }
.meter__k { font-size:var(--fs-small); font-weight:700; }
.meter__k em { font-style:normal; font-weight:400; color:var(--ink-400); }
.meter__v { font-family:var(--font-display); font-size:1.4rem; line-height:1; color:var(--now); font-variant-numeric:tabular-nums; transition:color var(--t-max) var(--ease); }
.meter__bar { position:relative; grid-column:1 / -1; height:10px; border-radius:var(--r-pill); background:var(--ink-050); box-shadow:inset 0 0 0 1px var(--ink-100); overflow:hidden; }
.meter__bar i { position:absolute; inset:0 auto 0 0; width:var(--v,0%); border-radius:var(--r-pill); background:var(--now); transition:width var(--t-slab) var(--ease-out), background-color var(--t-max) var(--ease); }
.meter__bar b { position:absolute; top:-2px; bottom:-2px; left:var(--g,0%); width:2px; background:var(--was); opacity:.55; transition:left var(--t-slab) var(--ease-out), background-color var(--t-max) var(--ease); }
.meters__key { display:flex; align-items:center; gap:8px; margin:16px 0 0; font-size:var(--fs-micro); font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-400); }
.meters__key i { width:14px; height:8px; border-radius:var(--r-pill); }
.meters__key .k-now { background:var(--now); }
.meters__key .k-ghost { width:2px; height:14px; border-radius:0; background:var(--was); margin-left:10px; }


.info__cut { display:flex; flex-direction:column; }
.info__where { margin-top:auto; padding-top:16px; border-top:var(--hairline); }
.info__where .info__k { margin-bottom:10px; }
.info__tags { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.info__tags li {
  
  display:inline-flex; align-items:center;
  padding:9px 15px; border-radius:var(--r-pill);
  background:var(--pill); box-shadow:inset 0 0 0 1px var(--pill-line);
  font-size:12.5px; font-weight:700; line-height:1; color:var(--ink);
  transition:transform var(--t-move) var(--ease), box-shadow var(--t-move) var(--ease),
             background-color var(--t-max) var(--ease);
  animation:infoTag 380ms var(--ease-out) backwards;
}
.info__tags li:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--pill-line), 4px 4px 0 var(--ink); }
.info__tags li:nth-child(2) { animation-delay:40ms; } .info__tags li:nth-child(3) { animation-delay:80ms; }
.info__tags li:nth-child(4) { animation-delay:120ms; } .info__tags li:nth-child(5) { animation-delay:160ms; }
@keyframes infoTag { from { opacity:0; transform:translateY(8px); } }
.info__data { display:flex; flex-direction:column; }
.info__line { margin:16px 0 0; margin-top:auto; padding-top:16px; border-top:var(--hairline); font-size:var(--fs-small); color:var(--ink-600); }

@media (prefers-reduced-motion:reduce) {
  .swx__slide, .meter__bar i, .meter__bar b { transition:none; }
  .info__tags li { animation:none; }
}