.prz2 { position: relative; margin: 0; }
.prz2__stage {
  --pos: 50%;
  --water: 0;
  --crust: 0;
  --dust: 0;
  --roll: 45deg;
  --rx: 0;
  --kdx: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 2.4 / 1;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(70% 60% at 50% 18%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--steel-0) 0%, var(--steel-25) 44%, var(--steel-50) 100%);
  box-shadow: var(--shadow-md);
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.js .prz2__stage { cursor: ew-resize; }
.prz2__layer { position: absolute; inset: 0; pointer-events: none; }
.prz2__layer--prisma {
  clip-path: inset(0 0 0 var(--pos));
  background:
    radial-gradient(70% 60% at 50% 18%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--steel-0) 0%, var(--steel-25) 44%, var(--steel-50) 100%);
}
.prz2-svg { display: block; width: 100%; height: 100%; }
.prz2__fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.prz2__notes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.prz2__notes--glatt { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.prz2__notes--prisma { clip-path: inset(0 0 0 var(--pos)); }
.prz2__stage::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  z-index: 6;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--graphite-900);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
  pointer-events: none;
}
.js .prz2__stage::after { display: none; }
.prz2-svg * { vector-effect: non-scaling-stroke; }
.prz2-dot { fill: none; stroke: var(--graphite-900); stroke-opacity: .40; stroke-linecap: round; vector-effect: none; }
.prz2-skin .prz2-dot { stroke-opacity: .55; }
.prz2-pebble { fill: var(--steel-0); stroke: var(--graphite-900); stroke-opacity: .42; stroke-width: 1; stroke-linejoin: round; }
.prz2-surface { fill: none; stroke: var(--graphite-900); stroke-opacity: .82; stroke-width: 1.5; }
.prz2-crumb { fill: var(--steel-0); stroke: var(--graphite-900); stroke-opacity: .82; stroke-width: 1.1; stroke-linejoin: round; }
.prz2-crumb--m { stroke-opacity: .66; stroke-width: 1; }
.prz2-crumb--s { stroke-opacity: .5; stroke-width: 1; }
.prz2-seed { fill: var(--red-500); }
.prz2-seed--grey { fill: var(--steel-500); }
.prz2-horizon { fill: none; stroke: var(--red-500); stroke-width: 1.5; }
.prz2-cap, .prz2-cap-head { fill: none; stroke: var(--graphite-900); stroke-opacity: .42; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.prz2-cap { stroke-dasharray: 2 5; }
.prz2-roller { transform: translate(calc(var(--rx) * 1px), 0); }
.prz2-spin { transform-box: view-box; transform-origin: 600px 142px; transform: rotate(var(--roll)); }
.prz2-roll-body { fill: var(--steel-0); stroke: var(--graphite-900); stroke-opacity: .88; stroke-width: 1.25; stroke-linejoin: round; }
.prz2-line { fill: none; stroke: var(--graphite-900); stroke-opacity: .72; stroke-width: 1; stroke-linejoin: round; }
.prz2-roll-face { fill: var(--graphite-900); fill-opacity: .075; stroke: none; }
.prz2-line--ridge { stroke-opacity: .5; }
.prz2-line--rim { stroke-opacity: .5; }
.prz2-fx-water { opacity: var(--water); }
.prz2-water { fill: none; stroke: var(--graphite-900); stroke-opacity: .5; stroke-width: 1; }
.prz2-level path { fill: none; stroke: var(--graphite-900); stroke-opacity: .7; stroke-width: 1; }
.prz2-fx-crust { opacity: var(--crust); }
.prz2-crust { fill: none; stroke: var(--graphite-900); stroke-width: 3.2; stroke-linecap: square; }
.prz2-crust-hatch { fill: none; stroke: var(--graphite-900); stroke-opacity: .55; stroke-width: 1; }
.prz2-fx-dust { opacity: var(--dust); }
.prz2-dust { fill: none; stroke: var(--graphite-900); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; }
.prz2-note {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: 0.875rem;
  background: var(--glass-sheen), var(--glass-bg-fallback);
  box-shadow: var(--shadow-sm);
  color: var(--graphite-900);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear 0s,
              background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out);
}
.prz2-note--lc { transform: translate(0, -50%); }
.prz2-note--rc { transform: translate(-100%, -50%); }
.prz2-note--lb { transform: translate(0, -100%); }
.prz2-note--rb { transform: translate(-100%, -100%); }
.prz2.is-ready .prz2-note { transform: none; }
.prz2-note.is-out { opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
.prz2-note .num-marker {
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.1875rem 0 -0.1875rem -0.4375rem;
  border-color: var(--graphite-900);
  background: var(--graphite-900);
  color: #fff;
  font-size: 0.625rem;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.prz2-note .icon { flex: none; width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.prz2-note--cap .icon { margin-left: -0.125rem; color: var(--color-text-subtle); }
.prz2-note--fine { color: var(--color-text-muted); }
.prz2-note--glatt, .prz2-note--02 { flex-direction: column; align-items: flex-start; gap: 0.3125rem; }
.prz2-note__head { display: inline-flex; align-items: center; gap: 0.5rem; }
.prz2-note__row { display: none; align-items: center; gap: 0.4375rem; }
.prz2-note__row--calm { display: inline-flex; }
.prz2__stage.is-rain .prz2-note__row--rain,
.prz2__stage.is-wind .prz2-note__row--wind { display: inline-flex; }
.prz2__stage:is(.is-rain, .is-wind) .prz2-note__row--calm { display: none; }
.prz2-note--02 .prz2-note__row { padding-left: 0.0625rem; color: var(--color-text-muted); }
.prz2-note--02 .prz2-note__row .icon { color: var(--graphite-900); }
.prz2__stage:is(.is-rain, .is-wind) .prz2-note--glatt {
  border-color: var(--glass-dark-border);
  background: var(--glass-dark-sheen), rgba(21, 23, 26, .9);
  color: #fff;
}
.prz2-note--glatt .icon { color: var(--steel-300); }
.prz2__side {
  position: absolute;
  top: var(--space-4);
  z-index: 4;
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-sheen), var(--glass-bg-fallback);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  transition: opacity var(--dur-fast) linear;
}
.prz2__side--l { left: var(--space-4); }
.prz2__side--r { right: var(--space-4); text-align: right; }
.prz2__side-k { color: var(--graphite-900); font-family: var(--font-display); font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-h3); line-height: 1.15; }
.prz2__side-s { color: var(--color-text-subtle); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.prz2__note {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 5;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .72);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  pointer-events: none;
}
.prz2__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  z-index: 6;
  display: none;
  place-items: center;
  width: 3rem;
  margin-left: -1.5rem;
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom;
}
.js .prz2__handle { display: grid; }
.prz2__handle::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
  background: var(--graphite-900);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .72);
}
.prz2__knob {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: var(--graphite-900);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), var(--shadow-md);
  color: #fff;
  translate: var(--kdx) 0;
  transition: scale var(--dur-fast) var(--ease-out);
}
.prz2__knob .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.prz2__handle:hover .prz2__knob, .prz2__stage.is-dragging .prz2__knob { scale: 1.08; }
.prz2__handle:focus { outline: none; }
.prz2__handle:focus-visible .prz2__knob { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-focus), var(--shadow-md); }
.prz2__stage.is-hinting .prz2__knob { animation: prz2-nudge 1.6s var(--ease-in-out) 1; }
@keyframes prz2-nudge { 0%, 100% { scale: 1; } 30% { scale: 1.12; } }
.prz2__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-4);
}
.prz2__toggles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.prz2-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap-min);
  padding: 0 1.125rem 0 0.875rem;
  border: 1px solid var(--color-border-hair);
  border-radius: var(--radius-pill);
  background: var(--color-bg-raised);
  box-shadow: var(--shadow-sm);
  color: var(--graphite-900);
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.prz2-toggle .icon { width: 1.125rem; height: 1.125rem; color: var(--color-text-subtle); }
.prz2-toggle:hover { box-shadow: var(--shadow-md); }
.prz2-toggle[aria-pressed="true"] { border-color: var(--graphite-900); background: var(--graphite-900); color: #fff; }
.prz2-toggle[aria-pressed="true"] .icon { color: #fff; }
.prz2-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.prz2__hint { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--color-text-subtle); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.prz2__hint-key { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--graphite-900); color: #fff; }
.prz2__hint-key .icon { width: 0.875rem; height: 0.875rem; }
html:not(.js) .prz2__bar { display: none; }
.prz2__caption, .prz2__fine { display: none; }
.prz2-steps { display: grid; gap: var(--gap); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .prz2-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prz2-step {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--card-pad);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--radius-xl);
  background: var(--color-bg-raised);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.prz2-step .num-marker { margin-bottom: var(--space-3); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.prz2-step__title { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.prz2-step__text { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.5; }
.prz2-step__show {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.375rem;
  min-height: var(--tap-min);
  margin: var(--space-2) 0 -0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
html:not(.js) .prz2-step__show { display: none; }
.prz2-step__show .icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease-out); }
.prz2-step__show:hover .icon { transform: translateX(3px); }
.prz2-step__show:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-xs); }
.prz2-step.is-active { box-shadow: 0 0 0 2px var(--graphite-900), var(--shadow-lg); transform: translateY(-2px); }
.prz2-crumbs, .prz2-soil, .prz2-cap-group, .prz2-horizon { transition: opacity var(--dur-slow) var(--ease-out), stroke-width var(--dur-slow) var(--ease-out); }
.prz2__stage.hl-01 .prz2-crumbs { opacity: .32; }
.prz2__stage.hl-01 .prz2-cap { stroke-opacity: .85; animation: prz2-rise 1.2s linear infinite; }
.prz2__stage.hl-01 .prz2-cap-head { stroke-opacity: .85; }
.prz2__stage.hl-01 .prz2-horizon { stroke-width: 2.5; }
.prz2__stage.hl-02 .prz2__layer--prisma :is(.prz2-soil, .prz2-cap-group) { opacity: .4; }
.prz2__stage.hl-03 .prz2__layer--prisma :is(.prz2-soil, .prz2-cap-group) { opacity: .45; }
.prz2__stage.hl-03 .prz2__layer--prisma .prz2-crumbs { opacity: .6; }
.prz2__stage.is-offscreen .prz2-cap { animation-play-state: paused; }
@keyframes prz2-rise { to { stroke-dashoffset: 7; } }
.prz2__stage.hl-01 .prz2-note--01, .prz2__stage.hl-02 .prz2-note--02 { scale: 1.06; }
.prz2-note--01 { transform-origin: 100% 50%; }
.prz2-note--02 { transform-origin: 0 100%; }
.prz2__stage.hl-01 .prz2-note--01 .num-marker,
.prz2__stage.hl-02 .prz2-note--02 .num-marker { border-color: var(--red-500); background: var(--red-500); box-shadow: 0 0 0 4px rgba(217, 0, 26, .14); }
@media (prefers-reduced-motion: reduce) {
  .prz2__stage.hl-01 .prz2-cap { animation: none; }
  .prz2__stage.is-hinting .prz2__knob { animation: none; }
  .prz2-note, .prz2-step, .prz2__knob { transition: none; }
}
@media (max-width: 1023.98px) {
  .prz2__stage { aspect-ratio: 1.9 / 1; }
}
@media (max-width: 767.98px) {
  .prz2__stage { aspect-ratio: 1 / 1.08; border-radius: var(--radius-2xl); }
  .prz2__side { top: var(--space-3); padding: 0.375rem 0.625rem; }
  .prz2__side--l { left: var(--space-3); }
  .prz2__side--r { right: var(--space-3); }
  .prz2__side-s { display: none; }
  .prz2__note { display: none; }
  .prz2-note { padding: 0.3125rem 0.625rem; font-size: 0.6875rem; }
  .prz2-note__x { display: none; }
  .prz2-note--glatt, .prz2-note--fine { display: none; }
  .prz2__stage .prz2-note__row:not(.prz2-note__row--calm) { display: none; }
  .prz2__hint { display: none; }
  .prz2__caption {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    width: 100%;
    min-height: calc(3 * 1.45em + 0.125rem);
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .prz2__caption b { color: var(--graphite-900); font-weight: var(--fw-semibold); }
  .prz2__fine { display: block; width: 100%; margin: calc(var(--space-1) * -1) 0 0; color: var(--color-text-subtle); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .prz2__toggles { width: 100%; }
  .prz2-toggle { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-transparency: reduce) {
  .prz2-note, .prz2__side { background: #fff; }
  .prz2__stage:is(.is-rain, .is-wind) .prz2-note--glatt { background: var(--graphite-900); }
}
.prz2-label {
  position: fixed;
  left: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: 290;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem;
  border: 1px solid var(--glass-dark-border);
  border-radius: var(--radius-pill);
  background: var(--glass-dark-sheen), rgba(21, 23, 26, .86);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 0.8125rem;
  transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}
.prz2-label.is-tucked { opacity: 0; translate: 0 calc(100% + var(--space-4)); visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .prz2-label { background: var(--glass-dark-sheen), rgba(21, 23, 26, .72); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
}
.prz2-label__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prz2-label__kicker { margin-right: 0.25rem; color: var(--steel-400); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.prz2-label__opts { display: inline-flex; flex: none; gap: 0.25rem; }
.prz2-label__opt {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color var(--dur-fast);
}
.prz2-label__opt:hover { background: rgba(255, 255, 255, .24); }
.prz2-label__opt[aria-current="page"] { background: #fff; color: var(--graphite-900); }
.prz2-label__opt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.prz2-label__all {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast);
}
.prz2-label__all:hover { background: rgba(255, 255, 255, .24); }
.prz2-label__all:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 479.98px) { .prz2-label__kicker, .prz2-label__all-more { display: none; } .prz2-label { gap: 0.5rem; } }
@media (max-width: 767.98px) {
  .prz2-label { bottom: calc(var(--space-2) + 3.5rem + var(--space-2) + env(safe-area-inset-bottom)); }
  .js body:has(> .bottom-bar[data-quickbar]:not(.is-shown)) .prz2-label { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}
.prz2-toggle .icon, .prz2-step__show .icon, .prz2__knob .icon, .prz2__hint-key .icon { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.prz2__knob .icon { stroke-width: 2; }