/* Air fryer player: only what the design's own player CSS does not already cover. Tokens and chrome copied from
   the watch page (.lab, .status, .vmt button, .segs i, .desc), so the live model wears the same clothes. */
.vp[data-af]{outline:none}
.vp[data-af] [hidden]{display:none!important}
.af-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:none;cursor:grab}
.af-canvas:active{cursor:grabbing}
.af-labels{position:absolute;inset:0;pointer-events:none}
.af-labels .af-lab{pointer-events:auto}
/* leader lines: navy like the design's outlined buttons, with a white halo so they read over dark parts */
.af-lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 1px rgba(255,255,255,.95))}
.af-lead polyline{fill:none;stroke:#16325c;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;opacity:.8}
.af-lead circle{fill:#fff;stroke:#16325c;stroke-width:1.6}
.af-lead .af-hl{opacity:1;stroke-width:2.2}
/* .lab exists in the desktop CSS only; the mobile page gets the same pill here */
.af-lab{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;background:#fff;color:#1c212b;border:1px solid #c9d0da;border-radius:999px;padding:4px 10px 4px 7px;font:700 11.5px Arial,Helvetica,sans-serif;white-space:nowrap;box-shadow:0 1px 3px rgba(16,24,40,.12);cursor:pointer}
.af-lab .sw,.af-card .sw{width:10px;height:10px;border-radius:999px;flex:none;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.af-compact .af-lab{padding:2px 8px 2px 5px;font-size:10.5px;gap:5px}
.af-compact .af-lab .sw{width:8px;height:8px}
.af-lab.af-hl{border-color:#16325c;box-shadow:0 0 0 2px #16325c}
.af-card{position:absolute;left:12px;top:76px;max-width:270px;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.97);color:#1c212b;border:1px solid #d3d9e2;border-radius:10px;padding:10px 30px 10px 12px;font:12.5px/1.45 Arial,Helvetica,sans-serif;box-shadow:0 2px 8px rgba(16,24,40,.12);z-index:2}
.af-card b{display:flex;align-items:center;gap:6px;font-size:13px;color:#16325c}
.af-card .af-x{position:absolute;right:4px;top:4px;width:24px;height:24px;border:0;border-radius:999px;background:transparent;color:#646e7c;font:700 16px/1 Arial,Helvetica,sans-serif;cursor:pointer}
.af-card .af-x:hover{background:#f0f2f5}
.af-card .af-more{align-self:flex-start;margin-top:4px;height:28px;padding:0 10px;border-radius:999px;border:1px solid #16325c;background:#fff;color:#16325c;font:700 11.5px Arial,Helvetica,sans-serif;cursor:pointer}
.af-toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:rgba(16,24,40,.82);color:#fff;border-radius:10px;padding:7px 12px;font:700 12px Arial,Helvetica,sans-serif;white-space:nowrap;z-index:3;pointer-events:none}
.af-nogl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font:14px/1.5 Arial,Helvetica,sans-serif;color:#1c212b}
.vp[data-af] .legend{transition:opacity .4s}
.vp[data-af] .status{pointer-events:none}
.af-on{background:rgba(255,255,255,.2)!important}
/* step progress: desktop already styles .segs span i; the mobile bar needs the fill */
.af-fill{position:absolute;left:0;top:0;bottom:0;background:#6ea3f0;border-radius:2px}
/* caption under the player, styled like the description block */
.af-cap{background:var(--sf2,#f2f4f7);border-radius:12px;padding:10px 14px;margin-top:10px;font:14.5px/1.55 Arial,Helvetica,sans-serif;color:var(--tx,#1c212b)}
.af-cap-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--acc,#2a62b8);margin-bottom:2px}
.af-cap.af-cap-fs{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);width:min(720px,80%);box-sizing:border-box;margin:0;background:rgba(16,24,40,.82);color:#fff;z-index:2}
.af-cap.af-cap-fs .af-cap-k{color:#9cc1f5}
/* mobile */
.sit-m .vp[data-af]{aspect-ratio:4/3}
.sit-m .af-cap{margin:10px 12px 0;font-size:14px}
.sit-m .af-card{left:10px;top:10px;max-width:68%}
.af-card[hidden]{display:none!important}
/* phone: the card sits under the player, above the caption, in the caption's own block shape */
.sit-m .af-card.af-card-out{position:relative;left:auto;top:auto;max-width:none;margin:10px 12px 0;border-radius:12px;box-shadow:none;z-index:auto;font-size:14px}
.sit-m .af-card.af-card-out b{font-size:14.5px}
/* phone: prev / play / next in the bottom bar, same white-on-gradient icon buttons as Fullscreen */
.af-mrow{height:40px!important;gap:4px}
.af-mctl{display:flex;align-items:center;gap:2px;margin-left:-8px;flex:none}
.af-mctl button{width:40px;height:38px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.af-mctl button:active{background:rgba(255,255,255,.2)}
.af-mctl button:focus-visible,.af-msegs:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.af-mctl button svg{width:20px;height:20px}
.af-mctl button[aria-label="Pause"] svg,.af-mctl button[aria-label="Play"] svg,.af-mctl button[aria-label="Play walkthrough"] svg{width:24px;height:24px}
.af-mstep{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the 3px progress segments get a finger-sized tap strip */
.af-msegs{padding:7px 0;margin:-5px 0 -4px;cursor:pointer}
.af-cluster{transition:opacity .25s;pointer-events:none}
.af-cluster button{pointer-events:auto}
.af-cluster.af-hide{opacity:0}
.af-cluster.af-hide button{pointer-events:none}
.sit-m [role=toolbar][aria-label="View modes"]{overflow-x:auto!important;scrollbar-width:none}
.sit-m [role=toolbar][aria-label="View modes"]::-webkit-scrollbar{display:none}
.af-end{position:absolute;right:12px;bottom:76px;width:min(272px,calc(100% - 24px));display:flex;background:rgba(16,24,40,.86);border-radius:10px;box-shadow:0 4px 14px rgba(16,24,40,.28);z-index:3;overflow:hidden;animation:af-end-in .35s ease-out}
.af-end-a{display:flex;gap:10px;align-items:center;flex:1;min-width:0;padding:8px 34px 8px 8px;color:#fff;text-decoration:none}
.af-end-a:hover b{text-decoration:underline}
.af-end-a:focus-visible,.af-end-x:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.af-end-th{position:relative;flex:none;width:96px;height:54px;border-radius:6px;overflow:hidden;background:#f2f4f7}
.af-end-th>.th,.af-end-th>.rth{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;border-radius:0!important;aspect-ratio:auto!important;display:flex;align-items:center;justify-content:center}
.af-end-th svg{width:60%!important;height:auto}
.af-end-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.af-end-k{font:700 10px Arial,Helvetica,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:#9cc1f5}
.af-end b{font:700 13px/1.3 Arial,Helvetica,sans-serif;color:#fff}
.af-end-m{font:11.5px Arial,Helvetica,sans-serif;color:#c9d0da}
.af-end-x{position:absolute;right:4px;top:4px;width:26px;height:26px;border:0;border-radius:999px;background:transparent;color:#fff;font:700 16px/1 Arial,Helvetica,sans-serif;cursor:pointer}
.af-end-x:hover{background:rgba(255,255,255,.15)}
@keyframes af-end-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.af-cluster,.vp[data-af] .legend{transition:none}.af-end{animation:none}}