/* La Marzocco Linea PB · the story. One type family (Mona Sans, variable width) in the brand's own voice:
   lowercase, condensed, set big; tiny catalogue meta. Red is the OLED and the rings, nothing else. Every
   chapter is composed edge to edge round the machine: type as large as the frame allows, registered to the
   parts it names, never a column floating in the dark. */
.pb_wrap { --ink: #f3efe8; --mute: rgba(243, 239, 232, 0.56); --line: rgba(243, 239, 232, 0.18); --red: #ff2a1c; --chrome: 0;
  --gx: clamp(20px, 4vw, 64px); --gt: clamp(84px, 11vh, 112px); --gb: clamp(28px, 4.5vh, 48px);
  position: relative; height: 100vh; background: #000; color: var(--ink); overflow: clip;
  font-family: 'LM Sans', 'Helvetica Neue', Arial, sans-serif; font-stretch: 100%; }
.pb_wrap .pb_contain { position: relative; width: 100%; height: 100vh; overflow: clip; }
.pb_wrap .pb_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pb_wrap .pb_balloons { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.pb_wrap .pb_balloons .pb_bl { opacity: 0; transition: opacity 0.5s; }
.pb_wrap .pb_balloons .pb_bl.is-on { opacity: 1; }
.pb_wrap .pb_balloons line { stroke: #121110; stroke-width: 1; }
.pb_wrap .pb_balloons circle.pb_bl_dot { fill: #121110; }
.pb_wrap .pb_balloons circle.pb_bl_ring { fill: #efebe4; stroke: #121110; stroke-width: 1.2; }
.pb_wrap .pb_balloons text { fill: #121110; font: 600 13px/1 'LM Sans', sans-serif; font-variant-numeric: tabular-nums; }
.pb_wrap .pb_balloons .pb_bl.is-hot circle.pb_bl_ring { fill: var(--red); stroke: var(--red); }
.pb_wrap .pb_balloons .pb_bl.is-hot text { fill: #fff; }

/* chapter layers: absolutely placed, faded by the script */
.pb_wrap .pb_layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; padding: var(--gt) var(--gx) var(--gb); isolation: isolate; z-index: 3; }
.pb_wrap .pb_layer.is-on { pointer-events: none; }
.pb_wrap .pb_layer.is-on button { pointer-events: auto; }
.pb_wrap .pb_layer.is-on .pb_dial { pointer-events: auto; }
.pb_wrap .pb_layer.is-on .pb_table { pointer-events: auto; }
.pb_wrap.is-focus .pb_layer.is-on { opacity: 0.08 !important; transition: opacity 0.4s; }
.pb_wrap .pb_layer.is-paper { --ink: #121110; --mute: rgba(18, 17, 16, 0.58); --line: rgba(18, 17, 16, 0.2); color: var(--ink); }
.pb_wrap .pb_col { max-width: min(30rem, 40vw); position: relative; }
.pb_wrap .pb_kicker, .pb_wrap .pb_no { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--mute); margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.pb_wrap .pb_no b { color: var(--ink); font-weight: 600; margin-right: 0.8em; }
.pb_wrap .pb_h2 { font-size: clamp(52px, 7.4vw, 132px); line-height: 0.86; font-weight: 620; font-stretch: 78%; letter-spacing: -0.04em; margin: 0 0 22px; }
.pb_wrap .pb_h2.is-sm { font-size: clamp(40px, 4.6vw, 80px); }
.pb_wrap .pb_h2 small { font-size: 0.42em; letter-spacing: 0; margin-left: 0.08em; vertical-align: 0.95em; }
.pb_wrap .pb_lede, .pb_wrap .pb_body { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.45; font-weight: 400; color: var(--ink); opacity: 0.84; margin: 0 0 20px; text-wrap: pretty; max-width: 30rem; }
.pb_wrap .pb_do { font-size: 12px; color: var(--mute); margin: 0; display: flex; gap: 10px; align-items: center; }
.pb_wrap .pb_do::before { content: ''; width: 18px; height: 1px; background: var(--mute); }
.pb_wrap .pb_word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.06em 0.2em; margin: -0.08em -0.06em -0.2em; }
.pb_wrap .pb_char { display: inline-block; }
.pb_wrap .pb_sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* type over the render keeps a shadow of the dark it sits in, not a box */
.pb_wrap .pb_layer { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55); }
.pb_wrap .pb_layer.is-paper { text-shadow: none; }
/* any chapter turned to the catalogue by the switcher: its type goes to ink, its dark fields away */
.pb_wrap.is-paper .pb_layer { --ink: #121110; --mute: rgba(18, 17, 16, 0.58); --line: rgba(18, 17, 16, 0.2); color: var(--ink); text-shadow: none; }
.pb_wrap.is-paper .pb_layer::before { opacity: 0; }
.pb_wrap.is-paper .pb_giant { mix-blend-mode: normal; color: #121110; }

/* dark fields under the type, on its own side, so it never fights the render (x-ray and heat are busy) */
.pb_wrap .pb_layer.is-wrap::before, .pb_wrap .pb_layer.is-boilers::before, .pb_wrap .pb_layer.is-saturated::before, .pb_wrap .pb_layer.is-pid::before, .pb_wrap .pb_layer.is-water::before, .pb_wrap .pb_layer.is-scales::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pb_wrap .pb_layer.is-wrap::before { background: radial-gradient(70% 75% at 100% 10%, rgba(0,0,0,0.94) 40%, rgba(0,0,0,0) 82%); }
.pb_wrap .pb_layer.is-boilers::before { background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.55) 26%, rgba(0,0,0,0) 46%); }
.pb_wrap .pb_layer.is-saturated::before { background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 28%, rgba(0,0,0,0) 48%), linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 38%); }
.pb_wrap .pb_layer.is-pid::before { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 34%, rgba(0,0,0,0) 62%); }
.pb_wrap .pb_layer.is-water::before { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.65) 24%, rgba(0,0,0,0) 44%), radial-gradient(50% 50% at 100% 0%, rgba(0,0,0,0.7), rgba(0,0,0,0) 70%); }
.pb_wrap .pb_layer.is-scales::before { background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0) 50%); }
@media (max-width: 767px) { .pb_wrap .pb_layer.is-boilers::before, .pb_wrap .pb_layer.is-saturated::before, .pb_wrap .pb_layer.is-scales::before { background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0) 65%), linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 30%); } }

/* ── 01 hero: the name stands in the room behind the machine (3D); the foot carries the facts ── */
.pb_wrap .pb_layer.is-hero { display: flex; flex-direction: column; justify-content: space-between; }
.pb_wrap .pb_layer.is-hero::before { content: ''; position: absolute; inset: auto 0 0 0; height: 38%; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0)); }
.pb_wrap .pb_foot { display: grid; grid-template-columns: minmax(0, 26rem) 1fr auto; align-items: end; gap: 32px; }
.pb_wrap .pb_foot .pb_lede { margin: 0; }
.pb_wrap .pb_foot .pb_do { align-self: end; justify-self: center; }
.pb_wrap .pb_dims { display: flex; gap: clamp(16px, 2.4vw, 40px); margin: 0; }
.pb_wrap .pb_dims div { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.pb_wrap .pb_dims dt { font-size: 11px; color: var(--mute); }
.pb_wrap .pb_dims dd { margin: 0; font-size: clamp(34px, 3.6vw, 64px); line-height: 0.9; font-weight: 600; font-stretch: 78%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pb_wrap .pb_dims small { font-size: 0.32em; letter-spacing: 0; margin-left: 4px; font-weight: 500; }

/* ── 02 wrap: the name across the foot, cut by the frame, in difference over the colour ── */
.pb_wrap .pb_layer.is-wrap .pb_col { margin-left: auto; }
.pb_wrap .pb_giant { position: absolute; left: var(--gx); bottom: var(--gb); width: min(34vw, 520px); height: auto; display: block; color: #f3efe8; opacity: 0.92; pointer-events: none; overflow: visible; }
@media (max-width: 767px) { .pb_wrap .pb_giant { width: 52vw; } }

/* ── 03 anatomy: the catalogue plate; the parts list fills the right ── */
.pb_wrap .pb_layer.is-anatomy { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
/* type on the drawing sits on its own paper, ruled like a catalogue label, so the ink never runs through it */
.pb_wrap .pb_layer.is-paper .pb_col, .pb_wrap.is-paper .pb_layer .pb_col { background: #efebe4; border: 1px solid #121110; padding: 18px 22px 20px; box-shadow: 6px 6px 0 rgba(18, 17, 16, 0.08); }
.pb_wrap .pb_layer.is-paper .pb_col .pb_body:last-child, .pb_wrap.is-paper .pb_layer .pb_col > :last-child { margin-bottom: 0; }
.pb_wrap .pb_balloons .pb_bl.is-on circle.pb_bl_ring { pointer-events: auto; cursor: pointer; }
.pb_wrap .pb_sheet { pointer-events: auto; width: min(34rem, 36vw); margin: calc(var(--gt) * -1) calc(var(--gx) * -1) calc(var(--gb) * -1) 0; align-self: stretch; background: #efebe4; border-left: 1px solid var(--ink); padding: var(--gt) var(--gx) var(--gb) 28px; display: flex; flex-direction: column; justify-content: flex-end; }
.pb_wrap .pb_table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--ink); }
.pb_wrap .pb_table caption { text-align: left; font-size: 11px; color: var(--mute); padding: 0 0 10px; caption-side: top; }
.pb_wrap .pb_table th { text-align: left; font-weight: 600; font-size: 11px; padding: 8px 10px 8px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pb_wrap .pb_table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; transition: background 0.2s, color 0.2s; }
.pb_wrap .pb_table td:first-child { font-weight: 700; font-variant-numeric: tabular-nums; width: 2.6em; }
.pb_wrap .pb_table td:nth-child(2) { font-variant-numeric: tabular-nums; color: var(--red); white-space: nowrap; }
.pb_wrap .pb_table tr { cursor: pointer; }
.pb_wrap .pb_table tr.is-hot td { background: var(--ink); color: #efebe4; }
.pb_wrap .pb_table tr.is-hot td:nth-child(2) { color: #ff6a5c; }

/* ── registered labels: pinned to a part's projection, a leader from the part to the label ── */
.pb_wrap .pb_reg { position: absolute; left: 0; top: 0; margin: 0; pointer-events: none; will-change: transform; }
.pb_wrap .pb_reg::before { content: ''; position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(0,0,0,0.25); }
.pb_wrap .pb_reg i { position: absolute; left: 0; top: 0; height: 1px; background: var(--ink); opacity: 0.8; transform-origin: 0 0; }
.pb_wrap .pb_reg > b, .pb_wrap .pb_reg > span { position: relative; display: block; transform: translate(var(--lx, 0px), var(--ly, 0px)); white-space: nowrap; }
.pb_wrap .pb_reg > b { font-size: 15px; font-weight: 600; }
.pb_wrap .pb_reg > span { font-size: 12px; color: var(--mute); margin-top: 4px; line-height: 1.4; }
.pb_wrap .pb_reg.is-big > b { font-size: clamp(110px, 15vw, 280px); line-height: 0.78; font-weight: 650; font-stretch: 76%; letter-spacing: -0.05em; }
.pb_wrap .pb_reg.is-big > b small { font-size: 0.3em; letter-spacing: 0; margin-left: 0.06em; font-weight: 500; }
.pb_wrap .pb_reg.is-big > span { font-size: 13px; color: var(--ink); opacity: 0.8; margin-top: 12px; }
.pb_wrap .pb_reg.is-tag > b { display: inline-block; font-size: 11px; padding: 4px 8px; background: var(--ink); color: #000; border-radius: 2px; }
.pb_wrap .pb_reg.is-tag > span { font-size: 15px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pb_wrap .pb_body.is-foot { position: absolute; left: var(--gx); bottom: var(--gb); margin: 0; }

/* ── 05 saturated: the schematic large across the foot right ── */
.pb_wrap .pb_compare { position: absolute; right: var(--gx); bottom: var(--gb); margin: 0; width: min(44rem, 46vw); padding: 18px 20px 14px; background: rgba(6, 6, 6, 0.82); border: 1px solid var(--line); border-radius: 4px; backdrop-filter: blur(10px); }
.pb_wrap .pb_compare svg { width: 100%; height: auto; display: block; overflow: visible; }
.pb_wrap .pb_compare text { fill: rgba(243, 239, 232, 0.72); font: 500 12px 'LM Sans', sans-serif; text-shadow: none; }
.pb_wrap .pb_compare text.is-t { fill: #f3efe8; font: 650 15px 'LM Sans', sans-serif; font-stretch: 82%; }
.pb_wrap .pb_compare text.is-s { fill: rgba(243, 239, 232, 0.55); font-size: 11px; }
.pb_wrap .pb_compare .is-sat { stroke: var(--ink); }
.pb_wrap .pb_compare .is-e61 { stroke: rgba(243, 239, 232, 0.35); stroke-dasharray: 4 5; }

/* ── 06 PID: the temperature as big as the page, the setpoint ruler across its foot ── */
.pb_wrap .pb_layer.is-pid { display: grid; grid-template-columns: 1fr minmax(0, 24rem); grid-template-rows: auto 1fr auto; column-gap: 40px; }
.pb_wrap .pb_layer.is-pid > .pb_no { grid-column: 1 / -1; }
.pb_wrap .pb_huge { margin: 0; display: flex; align-items: flex-start; font-variant-numeric: tabular-nums; }
.pb_wrap .pb_huge b { font-size: clamp(150px, 27vw, 520px); line-height: 0.74; font-weight: 640; font-stretch: 75%; letter-spacing: -0.06em; }
.pb_wrap .pb_huge span { font-size: clamp(28px, 3vw, 56px); font-weight: 500; margin: 0.4em 0 0 0.2em; }
.pb_wrap .pb_layer.is-pid .pb_huge { grid-row: 2; align-self: end; }
.pb_wrap .pb_pidside { grid-row: 2; grid-column: 2; align-self: end; }
.pb_wrap .pb_taste { margin: 0; font-size: 13px; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.pb_wrap .pb_taste::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff8a1c; box-shadow: 0 0 10px #ff8a1c; }
.pb_wrap .pb_dial { grid-row: 3; grid-column: 1 / -1; width: 100%; height: 72px; margin-top: 18px; cursor: ew-resize; touch-action: pan-y; user-select: none; outline: none; pointer-events: auto; }
.pb_wrap .pb_dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pb_wrap .pb_dial line { stroke: var(--mute); vector-effect: non-scaling-stroke; }
.pb_wrap .pb_dial line.is-major { stroke: var(--ink); }
.pb_wrap .pb_dial text { fill: var(--mute); font: 500 11px 'LM Sans', sans-serif; }
.pb_wrap .pb_dial .pb_dial_needle { stroke: #ff8a1c; stroke-width: 3; }

/* ── 07 water: the five stops along the foot, the live one lit ── */
.pb_wrap .pb_layer.is-water .pb_col { margin-left: auto; text-align: right; }
.pb_wrap .pb_steps { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--gx); right: var(--gx); bottom: calc(var(--gb) + 14px); display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 2vw, 32px); }
.pb_wrap .pb_steps li { display: grid; gap: 6px; align-content: start; opacity: 0.32; transition: opacity 0.5s; }
.pb_wrap .pb_steps li.is-on { opacity: 1; }
.pb_wrap .pb_steps i { font-style: normal; font-size: 11px; color: #8fc4ff; font-variant-numeric: tabular-nums; }
.pb_wrap .pb_steps b { font-size: clamp(20px, 1.9vw, 32px); font-weight: 600; font-stretch: 82%; letter-spacing: -0.02em; }
.pb_wrap .pb_steps span { font-size: 13px; line-height: 1.4; color: var(--ink); opacity: 0.8; }
.pb_wrap .pb_steps_bar { position: absolute; left: var(--gx); right: var(--gx); bottom: calc(var(--gb) + 14px); margin: 0; height: 1px; background: var(--line); }
.pb_wrap .pb_steps_bar i { position: absolute; left: 0; top: -1px; height: 3px; width: var(--wp, 0%); background: #8fc4ff; box-shadow: 0 0 12px #8fc4ff; }

/* ── 08 scales: the weight as big as the page, right ── */
.pb_wrap .pb_huge.is-right { position: absolute; right: var(--gx); top: var(--gt); }
.pb_wrap .pb_huge.is-right b { font-size: clamp(120px, 19vw, 360px); }

/* ── 09 plans: the plate, ink on paper, the title block ── */
.pb_wrap .pb_plan { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.pb_wrap .pb_plan path, .pb_wrap .pb_plan line, .pb_wrap .pb_plan rect, .pb_wrap .pb_plan circle { fill: none; stroke: var(--red); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pb_wrap .pb_plan .is-dim { stroke-opacity: 0.8; }
.pb_wrap .pb_plan text { fill: var(--red); font: 600 12px 'LM Sans', sans-serif; font-variant-numeric: tabular-nums; }
.pb_wrap .pb_cartouche { position: absolute; right: var(--gx); bottom: var(--gb); border-collapse: collapse; font-size: 11px; color: var(--ink); border: 2px solid var(--ink); background: #efebe4; min-width: 17rem; }
.pb_wrap .pb_cartouche th { text-align: left; font-size: 14px; font-weight: 650; font-stretch: 82%; padding: 10px 12px; border-bottom: 2px solid var(--ink); }
.pb_wrap .pb_cartouche td { padding: 6px 12px; border-top: 1px solid var(--line); }
.pb_wrap .pb_cartouche td:first-child { color: var(--mute); width: 5.5em; border-right: 1px solid var(--line); }

/* ── the history: each chapter is a dated part of this machine. The label bottom left, the archive print top
   right (it arrives by itself when the chapter does, never waiting on the scroll), the date pinned to the part ── */
.pb_wrap .pb_layer.is-hist { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.pb_wrap .pb_layer.is-hist .pb_col { max-width: min(28rem, 36vw); }
.pb_wrap .pb_layer.is-hist .pb_h2 { font-size: clamp(44px, 5.4vw, 96px); }
.pb_wrap .pb_print { position: absolute; right: var(--gx); top: calc(var(--gt) + 4vh); width: min(24vw, 360px); margin: 0; background: #efebe4; border: 1px solid #121110; padding: 10px 10px 12px; box-shadow: 8px 8px 0 rgba(18, 17, 16, 0.08);
  opacity: 0; transform: translateY(18px) rotate(1.2deg); transition: opacity 0.7s 0.15s, transform 1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pb_wrap .pb_print img { display: block; width: 100%; height: auto; aspect-ratio: auto; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s 0.3s cubic-bezier(0.7, 0, 0.2, 1); }
.pb_wrap .pb_print figcaption { font-size: 11px; line-height: 1.4; color: rgba(18, 17, 16, 0.62); margin-top: 8px; }
.pb_wrap .pb_layer.is-on .pb_print { opacity: 1; transform: rotate(1.2deg); }
@media (prefers-reduced-motion: reduce) { .pb_wrap .pb_print, .pb_wrap .pb_print img { transition: none; } }
.pb_wrap button:focus-visible, .pb_wrap a:focus-visible, .pb_wrap [tabindex]:focus-visible { outline: 2px solid #ff2a1c; outline-offset: 3px; }
.pb_wrap .pb_layer.is-on .pb_print img { clip-path: inset(0 0 0 0); }
.pb_wrap .pb_reg.is-year > b { font-size: clamp(90px, 11vw, 200px); line-height: 0.8; font-weight: 650; font-stretch: 75%; letter-spacing: -0.05em; color: #d61f12; font-variant-numeric: tabular-nums; }
.pb_wrap .pb_reg.is-year::before { background: #d61f12; box-shadow: 0 0 0 4px rgba(214, 31, 18, 0.15); }
.pb_wrap .pb_reg.is-year i { background: #d61f12; }
.pb_wrap .pb_huge.is-red b { color: #d61f12; }

/* ── the lens UI: the loupe's readout rides with it; the heat scale on the right edge ── */
.pb_wrap .pb_lensui { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.pb_wrap .pb_loupe { position: absolute; left: 0; top: 0; margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: #f3efe8; white-space: nowrap; opacity: 0; transition: opacity 0.25s; text-shadow: 0 1px 8px rgba(0,0,0,0.8); }
.pb_wrap .pb_loupe b { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }
.pb_wrap .pb_loupe span { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.pb_wrap .pb_loupe.is-on { opacity: 1; }
.pb_wrap .pb_loupe.is-paper { color: #121110; text-shadow: none; }
.pb_wrap .pb_scale { position: absolute; right: calc(var(--gx) * 0.5); top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 8px; font-size: 10px; color: #f3efe8; opacity: 0; transition: opacity 0.4s; font-variant-numeric: tabular-nums; }
.pb_wrap .pb_scale i { width: 6px; height: 34vh; border-radius: 3px; background: linear-gradient(0deg, #000008, #29006b 18%, #99057f 38%, #ed3810 58%, #ffad05 78%, #fffad1); }
.pb_wrap .pb_scale.is-on { opacity: 1; }

/* chrome: wordmark, the OLED menu, the ring keypad */
.pb_wrap .pb_top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 22px var(--gx); opacity: var(--chrome); z-index: 5; transition: color 0.4s; }
.pb_wrap.is-paper .pb_top { --ink: #121110; --mute: rgba(18, 17, 16, 0.5); }
/* the header keeps its own band: the machine and the type pass under it, never through the controls */
.pb_wrap .pb_top::before { content: ''; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--band) 0%, var(--band) 52%, rgba(0, 0, 0, 0)); --band: rgba(0, 0, 0, 0.72); transition: opacity 0.4s; }
.pb_wrap.is-paper .pb_top::before { background: linear-gradient(180deg, rgba(239, 235, 228, 0.94) 0%, rgba(239, 235, 228, 0.94) 52%, rgba(239, 235, 228, 0)); }
.pb_wrap .pb_mark { color: var(--ink); text-decoration: none; display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-weight: 600; font-stretch: 82%; letter-spacing: -0.01em; }
.pb_wrap .pb_mark_x { color: var(--mute); font-weight: 400; }
.pb_wrap .pb_modes { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); }
.pb_wrap.is-paper .pb_modes { background: rgba(239, 235, 228, 0.6); }
.pb_wrap .pb_modes button { background: none; border: 0; color: var(--mute); font: 500 12px 'LM Sans', sans-serif; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: color 0.3s, background 0.3s; }
.pb_wrap .pb_modes button:hover { color: var(--ink); }
.pb_wrap .pb_modes button.is-on { background: var(--ink); color: #000; }
.pb_wrap.is-paper .pb_modes button.is-on { color: #efebe4; }
@media (min-width: 768px) { .pb_wrap .pb_modes { position: absolute; left: 50%; transform: translateX(-50%); } }
.pb_wrap .pb_sound { display: flex; align-items: center; gap: 3px; height: 32px; padding: 0 12px; margin-left: 0; margin-right: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; backdrop-filter: blur(8px); font: 500 12px 'LM Sans', sans-serif; }
.pb_wrap.is-paper .pb_sound { background: rgba(239, 235, 228, 0.6); }
.pb_wrap .pb_sound i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; transition: height 0.3s; }
.pb_wrap .pb_sound span { margin-left: 8px; }
.pb_wrap .pb_sound[aria-pressed="true"] i { animation: pb-eq 1.1s ease-in-out infinite; }
.pb_wrap .pb_sound[aria-pressed="true"] i:nth-child(2) { animation-delay: -0.3s; } .pb_wrap .pb_sound[aria-pressed="true"] i:nth-child(3) { animation-delay: -0.6s; } .pb_wrap .pb_sound[aria-pressed="true"] i:nth-child(4) { animation-delay: -0.15s; }
@keyframes pb-eq { 0%, 100% { height: 4px; } 50% { height: 13px; } }
@media (prefers-reduced-motion: reduce) { .pb_wrap .pb_sound[aria-pressed="true"] i { animation: none; height: 10px; } }
.pb_wrap .pb_menu { background: #050101; border: 1px solid rgba(255, 42, 28, 0.25); border-radius: 4px; padding: 6px 8px; cursor: pointer; display: block; }
.pb_wrap .pb_menu canvas { display: block; width: 84px; height: 18px; }
.pb_wrap .pb_panel { position: absolute; top: 70px; right: var(--gx); z-index: 6; background: #050101; border: 1px solid rgba(255, 42, 28, 0.3); border-radius: 6px; padding: 10px; width: 240px; color: #ff4a3c; }
.pb_wrap .pb_panel[hidden] { display: none; }
.pb_wrap .pb_panel_t { font-size: 11px; opacity: 0.6; margin: 2px 6px 8px; }
.pb_wrap .pb_row { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; border-top: 1px solid rgba(255, 42, 28, 0.15); color: inherit; font: 500 13px 'LM Sans', sans-serif; padding: 10px 6px; cursor: pointer; margin: 0; text-align: left; }
.pb_wrap .pb_row b { font-weight: 600; }
.pb_wrap .pb_row.is-gpu { cursor: default; font-size: 11px; opacity: 0.7; }
.pb_wrap .pb_row.is-gpu b { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb_wrap .pb_keys { display: flex; gap: 6px; margin-left: auto; margin-right: 14px; opacity: var(--keys, 1); }
.pb_wrap .pb_key { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #0b0b0c; position: relative; cursor: pointer; padding: 0; }
.pb_wrap .pb_key i { position: absolute; inset: 5px; border-radius: 50%; border: 2px solid rgba(255, 42, 28, 0.35); transition: border-color 0.3s, box-shadow 0.3s; }
.pb_wrap .pb_key.is-on i { border-color: var(--red); box-shadow: 0 0 10px rgba(255, 42, 28, 0.9), inset 0 0 6px rgba(255, 42, 28, 0.6); }
.pb_wrap .pb_key span { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--mute); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.pb_wrap .pb_key:hover span, .pb_wrap .pb_key:focus-visible span { opacity: 1; }
.pb_wrap .pb_tag { position: absolute; left: 0; top: 0; margin: 0; z-index: 4; pointer-events: none; font-size: 12px; font-weight: 500; color: #f3efe8; background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(243, 239, 232, 0.18); padding: 6px 10px; border-radius: 999px; opacity: 0; transition: opacity 0.2s; white-space: nowrap; backdrop-filter: blur(6px); }
@media (pointer: coarse) { .pb_wrap .pb_tag { display: none; } }

/* loader: the display on black, then a single ring to press */
.pb_wrap .pb_loader { position: absolute; inset: 0; z-index: 9; background: #000; display: grid; place-items: center; align-content: center; gap: 28px; transition: opacity 1.2s, visibility 1.2s; }
.pb_wrap .pb_loader.is-gone { opacity: 0; visibility: hidden; }
.pb_wrap .pb_loader_oled { width: min(560px, 84vw); height: auto; display: block; filter: drop-shadow(0 0 22px rgba(255, 42, 28, 0.28)); }
.pb_wrap .pb_loader_lab { position: absolute; top: 26px; left: var(--gx); margin: 0; font-size: 12px; color: var(--mute); letter-spacing: 0.02em; }
.pb_wrap .pb_loader_lab b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.pb_wrap .pb_loader_keys { display: flex; gap: 14px; }
.pb_wrap .pb_loader_keys i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 42, 28, calc(0.12 + var(--lk, 0) * 0.8)); box-shadow: 0 0 calc(var(--lk, 0) * 10px) rgba(255, 42, 28, 0.8); transition: border-color 0.3s, box-shadow 0.3s; }
.pb_wrap .pb_loader_keys i:nth-child(1) { --lk: var(--k1, 0); } .pb_wrap .pb_loader_keys i:nth-child(2) { --lk: var(--k2, 0); } .pb_wrap .pb_loader_keys i:nth-child(3) { --lk: var(--k3, 0); }
.pb_wrap .pb_quiet { background: none; border: 0; color: var(--mute); font: 500 12px 'LM Sans', sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; opacity: 0; transition: opacity 0.6s, color 0.3s; padding: 6px 10px; }
.pb_wrap .pb_loader.is-ready .pb_quiet { opacity: 1; }
/* until ready the ring and the link only look asleep: a press is taken and kept, and the loader leaves on it */
.pb_wrap .pb_loader:not(.is-ready) .pb_start, .pb_wrap .pb_loader:not(.is-ready) .pb_quiet { cursor: progress; }
.pb_wrap .pb_loader.is-armed .pb_start i { border-color: rgba(255, 42, 28, 0.8); }
.pb_wrap .pb_quiet:hover, .pb_wrap .pb_quiet:focus-visible { color: var(--ink); }
.pb_wrap .pb_loader_foot { position: absolute; bottom: 26px; left: var(--gx); right: var(--gx); margin: 0; text-align: center; font-size: 12px; color: var(--mute); }
.pb_wrap .pb_loader_h { margin: 0; font-size: 13px; color: var(--ink); min-height: 1em; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.pb_wrap .pb_start { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #0b0b0c; position: relative; cursor: pointer; opacity: 0.25; transition: opacity 0.6s; }
.pb_wrap .pb_start i { position: absolute; inset: 10px; border-radius: 50%; border: 3px solid rgba(255, 42, 28, 0.4); transition: border-color 0.4s, box-shadow 0.4s; }
.pb_wrap .pb_loader.is-ready .pb_start { opacity: 1; }
.pb_wrap .pb_loader.is-ready .pb_start i { border-color: var(--red); box-shadow: 0 0 18px rgba(255, 42, 28, 0.9), inset 0 0 8px rgba(255, 42, 28, 0.6); animation: pb-breathe 2.4s ease-in-out infinite; }
@keyframes pb-breathe { 50% { box-shadow: 0 0 8px rgba(255, 42, 28, 0.5), inset 0 0 3px rgba(255, 42, 28, 0.4); } }

@media (max-width: 767px) {
  .pb_wrap { --gt: 76px; --gb: 24px; }
  .pb_wrap .pb_col { max-width: none; }
  .pb_wrap .pb_h2 { font-size: 13vw; }
  .pb_wrap .pb_h2.is-sm { font-size: 10vw; }
  .pb_wrap .pb_lede, .pb_wrap .pb_body { font-size: 14px; }
  .pb_wrap .pb_foot { grid-template-columns: 1fr; gap: 16px; }
  .pb_wrap .pb_foot .pb_do { justify-self: start; }
  .pb_wrap .pb_dims dd { font-size: 30px; }
  .pb_wrap .pb_layer.is-anatomy { flex-direction: column; }
  .pb_wrap .pb_sheet { width: auto; margin: 0 calc(var(--gx) * -1) calc(var(--gb) * -1); border-left: 0; border-top: 1px solid var(--ink); padding: 14px var(--gx) var(--gb); }
  .pb_wrap .pb_table { font-size: 11px; }
  .pb_wrap .pb_table td:nth-child(4), .pb_wrap .pb_table th:nth-child(4) { display: none; }
  .pb_wrap .pb_reg.is-big > b { font-size: 26vw; }
  .pb_wrap .pb_reg.is-big > span { display: none; }
  .pb_wrap .pb_compare { width: auto; left: var(--gx); }
  .pb_wrap .pb_layer.is-pid { grid-template-columns: 1fr; }
  .pb_wrap .pb_pidside { grid-row: 3; grid-column: 1; }
  .pb_wrap .pb_dial { grid-row: 4; }
  .pb_wrap .pb_huge b { font-size: 34vw; }
  .pb_wrap .pb_layer.is-pid .pb_huge { margin-bottom: 0.4em; }
  .pb_wrap .pb_layer.is-saturated::before { background: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 42%, rgba(0,0,0,0) 62%), linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 30%); }
  .pb_wrap .pb_steps { grid-template-columns: 1fr; }
  .pb_wrap .pb_steps li { display: none; }
  .pb_wrap .pb_steps li.is-on { display: grid; }
  .pb_wrap .pb_steps_bar { display: none; }
  .pb_wrap .pb_layer.is-water .pb_col { text-align: left; margin-left: 0; }
  .pb_wrap .pb_huge.is-right { top: auto; bottom: var(--gb); }
  .pb_wrap .pb_huge.is-right b { font-size: 30vw; }
  .pb_wrap .pb_cartouche { min-width: 0; left: var(--gx); }
  .pb_wrap .pb_layer.is-hist .pb_col { max-width: none; }
  .pb_wrap .pb_print { width: 42vw; top: auto; bottom: auto; top: 128px; }
  .pb_wrap .pb_reg.is-year > b { font-size: 22vw; }
  .pb_wrap .pb_scale { display: none; }
  .pb_wrap .pb_keys { display: none; }
  .pb_wrap .pb_sound { margin-left: auto; }
  .pb_wrap .pb_top::before { inset: 0 0 -20px 0; }
  /* hero: the name is the title; the copy gets a field to sit on */
  .pb_wrap .pb_layer.is-hero > .pb_kicker { visibility: hidden; }
  .pb_wrap .pb_layer.is-hero::before { height: 52%; background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.78) 55%, rgba(0,0,0,0)); }
  /* take it apart: the words on top, the drawing in the middle, the part you tapped as a card at the foot */
  .pb_wrap .pb_layer.is-anatomy .pb_col { padding: 0; border: 0; background: none; box-shadow: none; }
  .pb_wrap .pb_layer.is-anatomy .pb_h2 { font-size: 11vw; margin-bottom: 10px; }
  .pb_wrap .pb_layer.is-anatomy .pb_body { max-width: 17rem; }
  .pb_wrap .pb_layer.is-anatomy .pb_sheet { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px var(--gx) calc(var(--gb) + 4px); }
  .pb_wrap .pb_table caption { padding-bottom: 8px; }
  .pb_wrap .pb_table caption::after { content: ' · tap a number'; }
  .pb_wrap .pb_table thead { display: none; }
  .pb_wrap .pb_table tbody tr { display: none; }
  .pb_wrap .pb_table tbody tr.is-hot, .pb_wrap .pb_table tbody:not(:has(.is-hot)) tr:first-child { display: grid; grid-template-columns: 3.2rem auto 1fr; column-gap: 12px; align-items: baseline; border-top: 2px solid var(--ink); padding-top: 10px; }
  .pb_wrap .pb_table tbody tr td { border: 0; padding: 0; background: none !important; color: var(--ink) !important; }
  .pb_wrap .pb_table tbody tr td:first-child { grid-row: 1 / 3; font-size: 40px; line-height: 0.85; font-weight: 650; font-stretch: 78%; }
  .pb_wrap .pb_table tbody tr td:nth-child(2) { color: var(--red) !important; font-size: 12px; }
  .pb_wrap .pb_table tbody tr td:nth-child(3) { font-size: 15px; font-weight: 600; }
  .pb_wrap .pb_table tbody tr td:nth-child(4) { display: block !important; grid-column: 2 / 4; font-size: 12px; color: var(--mute) !important; padding-top: 4px; }
  .pb_wrap .pb_top { flex-wrap: wrap; row-gap: 10px; padding-top: 16px; }
  .pb_wrap .pb_mark { font-size: 13px; gap: 6px; }
  .pb_wrap .pb_mark_x { display: none; }
  .pb_wrap .pb_sound { padding: 0 10px; margin-right: 8px; }
  .pb_wrap .pb_sound span { display: none; }
  .pb_wrap .pb_menu canvas { width: 64px; height: 14px; }
  .pb_wrap { --gt: 132px; }
  .pb_wrap .pb_huge.is-right.is-red { top: 132px; bottom: auto; }
  .pb_wrap .pb_huge.is-right.is-red b { font-size: 26vw; }
  .pb_wrap .pb_modes { order: 3; width: 100%; justify-content: space-between; }
  .pb_wrap .pb_modes button { padding: 7px 10px; font-size: 11px; }
}

/* the editor's canvas: only the stills of the live page (stage.js canvasStills) */
.pb_wrap.is-canvas { height: auto !important; margin: 0 !important; background: #000; }
.pb_wrap.is-canvas > :not(.pb_stills) { display: none !important; }
.pb_wrap .pb_stills { display: block; }
.pb_wrap .pb_start { margin-bottom: 22px; }
.pb_wrap .pb_start_l { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap; font: 500 12px 'LM Sans', sans-serif; color: var(--ink); letter-spacing: 0.01em; }