/* FrancoMusso.com component classes (fm-*). Used by the React components AND usable directly in Liquid/Bootstrap markup. */

/* ---------- Button ---------- */
.fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.55em;height:2.75rem;padding:0 1.25rem;font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-ui);letter-spacing:var(--tracking-ui);line-height:1;white-space:nowrap;border-radius:var(--radius-button);border:var(--border-width) solid transparent;cursor:pointer;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.fm-btn:active{transform:scale(var(--press-scale))}
.fm-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.fm-btn .bi{font-size:1.1em;line-height:0;transition:transform var(--dur-base) var(--ease-out)}
.fm-btn:hover .fm-btn__trail{transform:translateX(3px)}
.fm-btn--sm{height:2.125rem;padding:0 0.9rem;font-size:var(--fs-sm)}
.fm-btn--lg{height:3.5rem;padding:0 1.75rem;font-size:1.0625rem}
.fm-btn--primary{background:var(--accent);background-image:var(--gradient-sheen);color:var(--text-on-accent);box-shadow:var(--shadow-button)}
.fm-btn--primary:hover{background-color:var(--accent-hover);color:var(--text-on-accent)}
.fm-btn--primary:active{background:var(--accent-press)}
.fm-btn--secondary{background:transparent;color:var(--text-1);border-color:var(--border-strong)}
.fm-btn--secondary:hover{background:var(--text-1);color:var(--bg-page)}
.fm-btn--ghost{background:transparent;color:var(--text-1)}
.fm-btn--ghost:hover{background:var(--accent-softer);color:var(--text-accent)}
.fm-btn--inverse{background:var(--white);color:var(--plum-900);box-shadow:0 1px 2px oklch(0% 0 0 / 0.2),0 8px 24px -8px oklch(0% 0 0 / 0.4)}
.fm-btn--inverse:hover{background:var(--plum-100);color:var(--plum-950)}
.fm-btn--on-brand{background:transparent;color:var(--text-on-brand);border-color:oklch(100% 0 0 / 0.4)}
.fm-btn--on-brand:hover{border-color:var(--white);background:oklch(100% 0 0 / 0.08);color:var(--white)}
.fm-btn--block{width:100%}
.fm-btn:disabled,.fm-btn[aria-disabled="true"]{opacity:0.45;cursor:not-allowed;transform:none}
[data-theme="hc"] .fm-btn--inverse,[data-theme="hc-dark"] .fm-btn--inverse{background:var(--white);color:var(--black);border-color:var(--black)}

.fm-iconbtn{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border-radius:var(--radius-pill);border:var(--border-width) solid transparent;background:transparent;color:var(--text-1);cursor:pointer;font-size:1.125rem;line-height:0;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.fm-iconbtn:hover{background:var(--accent-softer);color:var(--text-accent)}
.fm-iconbtn:active{transform:scale(0.92)}
.fm-iconbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.fm-iconbtn--sm{width:2rem;height:2rem;font-size:0.95rem}
.fm-iconbtn--lg{width:3.25rem;height:3.25rem;font-size:1.35rem}
.fm-iconbtn--outline{border-color:var(--border-2)}
.fm-iconbtn--solid{background:var(--accent);color:var(--text-on-accent)}
.fm-iconbtn--solid:hover{background:var(--accent-hover);color:var(--text-on-accent)}

/* ---------- Badge + Tag ---------- */
.fm-badge{display:inline-flex;align-items:center;gap:0.4em;height:1.5rem;padding:0 0.55rem;font-family:var(--font-ui);font-size:0.6875rem;font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1;border-radius:var(--radius-xs);background:var(--bg-sunken);color:var(--text-2);border:var(--border-width) solid transparent;white-space:nowrap}
.fm-badge .bi{font-size:1.05em}
.fm-badge--accent{background:var(--accent-soft);color:var(--text-accent)}
.fm-badge--solid{background:var(--accent);color:var(--text-on-accent)}
.fm-badge--tip{background:var(--tip-bg);color:var(--tip-fg);border-color:var(--tip-border)}
.fm-badge--warn{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-border)}
.fm-badge--danger{background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-border)}
.fm-badge--ember{background:var(--marker);color:var(--marker-fg)}
.fm-badge--outline{background:transparent;border-color:var(--border-2);color:var(--text-2)}
.fm-badge__dot{width:0.45rem;height:0.45rem;border-radius:50%;background:var(--live)}

.fm-tag{display:inline-flex;align-items:center;gap:0.5em;height:2.125rem;padding:0 0.95rem;font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-1);background:var(--surface-card);border:var(--border-width) solid var(--border-2);border-radius:var(--radius-pill);text-decoration:none;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.fm-tag:hover{border-color:var(--accent);color:var(--text-accent)}
.fm-tag[aria-pressed="true"],.fm-tag.is-selected{background:var(--text-1);border-color:var(--text-1);color:var(--bg-page)}
.fm-tag__count{font-family:var(--font-ui);font-size:0.75rem;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;color:var(--text-3)}
.fm-tag.is-selected .fm-tag__count,.fm-tag[aria-pressed="true"] .fm-tag__count{color:inherit;opacity:0.7}
.fm-tag--sm{height:1.75rem;padding:0 0.7rem;font-size:0.8125rem}

/* ---------- Forms ---------- */
.fm-field{display:grid;gap:var(--space-2);font-family:var(--font-ui)}
.fm-field__label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-1)}
.fm-field__hint{font-size:0.8125rem;color:var(--text-3);line-height:1.4}
.fm-field__error{font-size:0.8125rem;color:var(--danger-fg);display:flex;gap:0.35em;align-items:center}
.fm-input-wrap{position:relative;display:flex;align-items:center}
.fm-input-wrap>.bi{position:absolute;left:0.9rem;color:var(--text-3);pointer-events:none;font-size:1rem}
.fm-input,.fm-select{width:100%;height:3rem;padding:0 1rem;font-family:var(--font-ui);font-size:var(--fs-ui);color:var(--text-1);background:var(--surface-card);border:var(--border-width) solid var(--border-2);border-radius:var(--radius-input);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);appearance:none}
.fm-input::placeholder{color:var(--text-4)}
.fm-input:hover,.fm-select:hover{border-color:var(--text-3)}
.fm-input:focus,.fm-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fm-input-wrap>.bi~.fm-input{padding-left:2.6rem}
.fm-input[aria-invalid="true"]{border-color:var(--danger-icon)}
.fm-input:disabled,.fm-select:disabled{background:var(--bg-sunken);color:var(--text-4);cursor:not-allowed}
.fm-select{padding-right:2.75rem;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 1.3rem) 1.3rem,calc(100% - 0.95rem) 1.3rem;background-size:0.35rem 0.35rem;background-repeat:no-repeat;cursor:pointer}
.fm-input--lg{height:3.5rem;font-size:1.0625rem}
.fm-check{display:inline-flex;align-items:flex-start;gap:0.7rem;font-family:var(--font-ui);font-size:var(--fs-ui);color:var(--text-1);cursor:pointer;line-height:1.4}
.fm-check input{appearance:none;flex:none;width:1.25rem;height:1.25rem;margin:0.05rem 0 0;border:1.5px solid var(--text-3);border-radius:var(--radius-sm);background:var(--surface-card);display:grid;place-items:center;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.fm-check input[type="radio"]{border-radius:50%}
.fm-check input:checked{background:var(--accent);border-color:var(--accent)}
.fm-check input[type="checkbox"]:checked::after{content:"";width:0.35rem;height:0.65rem;border:solid var(--text-on-accent);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.fm-check input[type="radio"]:checked::after{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:var(--text-on-accent)}
.fm-check input:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.fm-check input:disabled{opacity:0.45;cursor:not-allowed}
.fm-check__hint{display:block;font-size:0.8125rem;color:var(--text-3);margin-top:0.15rem}
.fm-switch{display:inline-flex;align-items:center;gap:0.75rem;font-family:var(--font-ui);font-size:var(--fs-ui);color:var(--text-1);cursor:pointer}
.fm-switch input{appearance:none;flex:none;position:relative;width:2.75rem;height:1.5rem;margin:0;border-radius:var(--radius-pill);background:var(--border-2);cursor:pointer;transition:background-color var(--dur-base) var(--ease-out)}
.fm-switch input::after{content:"";position:absolute;top:3px;left:3px;width:calc(1.5rem - 6px);height:calc(1.5rem - 6px);border-radius:50%;background:var(--white);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-out)}
.fm-switch input:checked{background:var(--accent)}
.fm-switch input:checked::after{transform:translateX(1.25rem)}
.fm-switch input:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
[data-theme="hc"] .fm-switch input,[data-theme="hc-dark"] .fm-switch input{border:2px solid var(--text-1)}

/* ---------- Callout ---------- */
.fm-callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);padding:var(--space-6);background:var(--note-bg);border:var(--border-width) solid var(--note-border);border-radius:var(--radius-callout);color:var(--text-1)}
.fm-callout--tip{background:var(--tip-bg);border-color:var(--tip-border)}
.fm-callout--warning{background:var(--warn-bg);border-color:var(--warn-border)}
.fm-callout--danger{background:var(--danger-bg);border-color:var(--danger-border)}
.fm-callout--insight{background:var(--surface-brand);border-color:var(--surface-brand);color:var(--text-on-brand)}
.fm-callout__icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--radius-sm);background:var(--note-icon);color:var(--surface-card);font-size:1.1rem;line-height:0}
.fm-callout--tip .fm-callout__icon{background:var(--tip-icon)}
.fm-callout--warning .fm-callout__icon{background:var(--warn-icon)}
.fm-callout--danger .fm-callout__icon{background:var(--danger-icon)}
.fm-callout--insight .fm-callout__icon{background:oklch(100% 0 0 / 0.12);color:var(--plum-200)}
.fm-callout__title{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--note-fg);margin:0.1rem 0 var(--space-2)}
.fm-callout--tip .fm-callout__title{color:var(--tip-fg)}
.fm-callout--warning .fm-callout__title{color:var(--warn-fg)}
.fm-callout--danger .fm-callout__title{color:var(--danger-fg)}
.fm-callout--insight .fm-callout__title{color:var(--text-on-brand-2)}
.fm-callout__body{font-family:var(--font-reading);font-size:var(--fs-body-sm);line-height:1.58}
.fm-callout__body>*+*{margin-top:0.7em}
.fm-callout__body code{font-family:var(--font-mono);font-size:0.86em;background:oklch(100% 0 0 / 0.5);border-radius:3px;padding:0.05em 0.3em}
.fm-callout--insight .fm-callout__body{font-size:var(--fs-body);color:var(--text-on-brand)}
.fm-callout--insight .fm-callout__body code{background:oklch(100% 0 0 / 0.1)}

/* ---------- Toast / Tooltip / Dialog ---------- */
.fm-toast{display:inline-flex;align-items:center;gap:var(--space-3);min-height:3rem;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-5);background:var(--surface-inverse);color:var(--bg-page);border-radius:var(--radius-md);box-shadow:var(--shadow-3);font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:var(--fw-medium);max-width:28rem}
.fm-toast .bi:first-child{color:var(--plum-300);font-size:1.1rem}
[data-theme="dark"] .fm-toast .bi:first-child{color:var(--plum-600)}
.fm-toast .fm-iconbtn{color:inherit}
.fm-toast .fm-iconbtn:hover{background:oklch(50% 0 0 / 0.2);color:inherit}
.fm-toast__action{margin-left:var(--space-2);font-weight:var(--fw-bold);color:inherit;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:0.2em;font:inherit}
.fm-tooltip-host{position:relative;display:inline-flex}
.fm-tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:0.4rem 0.6rem;background:var(--surface-inverse);color:var(--bg-page);font-family:var(--font-ui);font-size:0.8125rem;font-weight:var(--fw-medium);line-height:1.3;border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);z-index:var(--z-overlay)}
.fm-tooltip::after{content:"";position:absolute;left:50%;top:100%;border:5px solid transparent;border-top-color:var(--surface-inverse);transform:translateX(-50%)}
.fm-tooltip-host:hover .fm-tooltip,.fm-tooltip-host:focus-within .fm-tooltip,.fm-tooltip.is-open{opacity:1;transform:translate(-50%,0)}
.fm-tooltip kbd{font-family:var(--font-mono);font-size:0.75rem;opacity:0.7;margin-left:0.4em}
.fm-dialog-backdrop{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:blur(6px);display:grid;place-items:center;padding:var(--gutter);z-index:var(--z-dialog)}
.fm-dialog{position:relative;width:min(100%,34rem);background:var(--surface-raised);color:var(--text-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-4);padding:var(--space-8);font-family:var(--font-ui)}
.fm-dialog__close{position:absolute;top:var(--space-4);right:var(--space-4)}
.fm-dialog__title{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--text-1);letter-spacing:var(--tracking-heading);margin:0 0 var(--space-3);padding-right:var(--space-8)}
.fm-dialog__body{font-size:var(--fs-ui);line-height:1.55;color:var(--text-2)}
.fm-dialog__actions{display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-7);flex-wrap:wrap}

/* ---------- Tabs / Breadcrumb ---------- */
.fm-tabs{display:flex;gap:var(--space-6);border-bottom:var(--border-width) solid var(--border-1);overflow-x:auto;scrollbar-width:none}
.fm-tabs__tab{position:relative;flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:0.5em;height:3rem;padding:0;background:none;border:0;font-family:var(--font-ui);font-size:var(--fs-ui);font-weight:var(--fw-semibold);color:var(--text-3);cursor:pointer;transition:color var(--dur-fast) var(--ease-out)}
.fm-tabs__tab:hover{color:var(--text-1)}
.fm-tabs__tab[aria-selected="true"]{color:var(--text-1)}
.fm-tabs__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
.fm-tabs__tab[aria-selected="true"]::after{transform:scaleX(1)}
.fm-tabs__tab:focus-visible{outline:none;box-shadow:inset 0 -3px 0 var(--focus-ring)}
.fm-tabs__count{font-family:var(--font-ui);font-size:0.75rem;font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;color:var(--text-4)}
.fm-tabs--pill{border:0;gap:var(--space-1);padding:var(--space-1);background:var(--bg-sunken);border-radius:var(--radius-pill);display:inline-flex}
.fm-tabs--pill .fm-tabs__tab{height:2.25rem;padding:0 1rem;border-radius:var(--radius-pill);font-size:var(--fs-sm)}
.fm-tabs--pill .fm-tabs__tab::after{display:none}
.fm-tabs--pill .fm-tabs__tab[aria-selected="true"]{background:var(--surface-card);box-shadow:var(--shadow-1)}
.fm-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;list-style:none;margin:0;padding:0;font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-3)}
.fm-crumbs li{display:inline-flex;align-items:center;gap:0.5rem}
.fm-crumbs li+li::before{content:"/";color:var(--text-4)}
.fm-crumbs a{color:var(--text-2);text-decoration:none}
.fm-crumbs a:hover{color:var(--text-accent)}
.fm-crumbs [aria-current]{color:var(--text-1);font-weight:var(--fw-medium)}

/* ---------- Table of contents ---------- */
.fm-toc{font-family:var(--font-ui)}
.fm-toc__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-3);margin-bottom:var(--space-3);border-bottom:var(--border-width-strong) solid var(--border-strong)}
.fm-toc__list{list-style:none;margin:0;padding:0;position:relative}
.fm-toc__list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--border-1)}
.fm-toc__list::after{content:"";position:absolute;left:0;top:0;width:2px;height:calc(var(--progress,0) * 100%);background:var(--accent);transition:height var(--dur-base) var(--ease-out)}
.fm-toc__item a{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:0.25rem;padding:0.45rem 0 0.45rem 0.9rem;font-size:0.875rem;line-height:1.35;color:var(--text-3);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.fm-toc__item a:hover{color:var(--text-1)}
.fm-toc__num{font-family:var(--font-display);font-weight:var(--fw-heavy);font-variant-numeric:tabular-nums;font-size:0.75rem;padding-top:0.1em;color:var(--text-4)}
.fm-toc__item.is-active a{color:var(--text-1);font-weight:var(--fw-semibold)}
.fm-toc__item.is-active .fm-toc__num{color:var(--text-accent)}
.fm-toc__item.is-done a{color:var(--text-2)}
.fm-toc__sub a{padding-left:2.65rem;font-size:0.8125rem;grid-template-columns:minmax(0,1fr)}

/* ---------- Site header / footer ---------- */
.fm-header{position:sticky;top:0;z-index:var(--z-header);height:var(--header-h);background:color-mix(in oklch,var(--bg-page) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:var(--border-width) solid transparent;transition:border-color var(--dur-base) var(--ease-out)}
.fm-header.is-scrolled{border-bottom-color:var(--border-1)}
.fm-header__inner{height:100%;display:flex;align-items:center;gap:var(--space-7);max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.fm-wordmark{display:inline-flex;align-items:baseline;gap:0.6rem;text-decoration:none;color:var(--text-1);white-space:nowrap}
.fm-wordmark__name{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:1.3125rem;letter-spacing:-0.04em;line-height:1}
.fm-wordmark__tag{font-family:var(--font-reading);font-style:italic;font-size:0.9375rem;letter-spacing:0;color:var(--text-accent)}
.fm-wordmark:hover{color:var(--text-1)}
.fm-nav{display:flex;align-items:center;gap:var(--space-1);margin-right:auto}
.fm-nav__link{white-space:nowrap;display:inline-flex;align-items:center;gap:0.35em;height:2.5rem;padding:0 0.8rem;font-family:var(--font-ui);font-size:0.9375rem;font-weight:var(--fw-medium);color:var(--text-2);text-decoration:none;border-radius:var(--radius-pill);transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.fm-nav__link:hover{color:var(--text-1);background:var(--accent-softer)}
.fm-nav__link[aria-current="page"]{color:var(--text-1);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.fm-header__actions{display:flex;align-items:center;gap:var(--space-2)}
@media (max-width:1099.98px){.fm-header__hide-md{display:none!important}}
@media (max-width:899.98px){.fm-nav{display:none}.fm-header__inner{justify-content:space-between}.fm-header__hide-sm{display:none!important}}
@media (min-width:900px){.fm-header__menu{display:none!important}}
.fm-footer{position:relative;isolation:isolate;background:var(--gradient-brand);color:var(--text-on-brand-2);padding-block:var(--space-12) var(--space-7);font-family:var(--font-ui);font-size:var(--fs-sm)}
.fm-footer::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--texture-dots);-webkit-mask-image:var(--mask-edges);mask-image:var(--mask-edges);-webkit-mask-composite:source-in;mask-composite:intersect;opacity:0.6}
.fm-footer a{color:var(--text-on-brand);text-decoration:none}
.fm-footer a:hover{color:var(--plum-200);text-decoration:underline}
.fm-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-8);max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.fm-footer__lead{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-7);padding-bottom:var(--space-10);border-bottom:var(--border-width) solid oklch(100% 0 0 / 0.14)}
.fm-footer__big{font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(3rem,1rem + 8vw,9.5rem);line-height:0.86;letter-spacing:-0.05em;color:var(--text-on-brand);margin:0}
.fm-footer__col h4{font-family:var(--font-ui);font-size:var(--fs-xs);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--plum-300);margin:0 0 var(--space-4);font-weight:var(--fw-semibold)}
.fm-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.fm-footer__base{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-6);border-top:var(--border-width) solid oklch(100% 0 0 / 0.14);font-family:var(--font-ui);font-size:0.8125rem;color:var(--plum-300)}
[data-theme="hc"] .fm-footer__col h4,[data-theme="hc"] .fm-footer__base{color:var(--white)}

/* ---------- Code block ---------- */
.fm-code{box-shadow:var(--shadow-3);background:var(--code-bg);color:var(--code-fg);border-radius:var(--radius-code);border:var(--border-width) solid var(--code-border);overflow:hidden;font-family:var(--font-mono);font-size:var(--fs-code);line-height:var(--lh-code)}
.fm-code__bar{display:flex;align-items:center;gap:var(--space-3);min-height:2.75rem;padding:0 var(--space-2) 0 var(--space-5);background:linear-gradient(180deg,var(--code-bg-2),var(--code-bg));border-bottom:var(--border-width) solid var(--code-border)}
.fm-code__file{font-family:var(--font-ui);font-weight:var(--fw-medium);display:inline-flex;align-items:center;gap:0.5em;font-size:0.8125rem;color:var(--code-fg);margin-right:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-code__file .bi{color:var(--code-muted)}
.fm-code__lang{font-family:var(--font-ui);font-size:0.6875rem;font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--code-muted)}
.fm-code__copy{display:inline-flex;align-items:center;gap:0.4em;height:2rem;padding:0 0.7rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--code-muted);font-family:var(--font-ui);font-size:0.8125rem;font-weight:var(--fw-semibold);cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.fm-code__copy:hover{background:oklch(100% 0 0 / 0.07);color:var(--code-fg)}
.fm-code__copy.is-copied{color:var(--code-string)}
.fm-code pre{margin:0;padding:var(--space-5) 0;overflow-x:auto;tab-size:2;counter-reset:fm-line}
.fm-code code{display:block;min-width:max-content;font-family:inherit}
.fm-code__line{display:block;padding:0 var(--space-6) 0 var(--space-5);border-left:3px solid transparent}
.fm-code--numbered .fm-code__line::before{counter-increment:fm-line;content:counter(fm-line);display:inline-block;width:2.2em;margin-right:1.2em;text-align:right;color:var(--code-muted);opacity:0.55;user-select:none}
.fm-code__line.is-hl{background:var(--code-line-hl);border-left-color:var(--code-line-hl-bar)}
.fm-code__line.is-add{background:oklch(40% 0.08 155 / 0.22);border-left-color:var(--code-string)}
.fm-code__line.is-del{background:oklch(40% 0.1 25 / 0.22);border-left-color:oklch(70% 0.15 25);opacity:0.75}
.fm-code__caption{padding:var(--space-3) var(--space-5);border-top:var(--border-width) solid var(--code-border);font-family:var(--font-ui);font-size:0.8125rem;color:var(--code-muted)}
.tk-c{color:var(--code-comment);font-style:italic}
.tk-k{color:var(--code-keyword)}
.tk-s{color:var(--code-string)}
.tk-n{color:var(--code-number)}
.tk-f{color:var(--code-fn)}
.tk-t{color:var(--code-tag)}
.tk-a{color:var(--code-attr)}
.tk-p{color:var(--code-muted)}
.tk-l{color:var(--code-keyword);font-weight:var(--fw-semibold)}

/* ---------- AI prompt block ---------- */
.fm-prompt{isolation:isolate;background:var(--prompt-bg);box-shadow:var(--shadow-panel);border:var(--border-width) solid var(--prompt-border);border-radius:var(--radius-lg);overflow:hidden;color:var(--prompt-fg);position:relative}
.fm-prompt__bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-4) var(--space-6);border-bottom:var(--border-width) dashed var(--prompt-border)}
.fm-prompt__kind{display:inline-flex;align-items:center;gap:0.5em;font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-accent)}
.fm-prompt__kind .bi{font-size:1.15em}
.fm-prompt__title{font-family:var(--font-ui);font-size:var(--fs-ui);font-weight:var(--fw-semibold);color:var(--text-1);margin-right:auto}
.fm-prompt__body{margin:0;padding:var(--space-6);font-family:var(--font-mono);font-size:var(--fs-code);line-height:1.75;white-space:pre-wrap;word-break:break-word;color:var(--text-1);max-height:var(--prompt-max,none);overflow:auto}
.fm-prompt__var{background:var(--prompt-var-bg);color:var(--prompt-var-fg);border-radius:3px;padding:0.05em 0.3em;font-weight:var(--fw-medium)}
.fm-prompt__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);border-top:var(--border-width) dashed var(--prompt-border);font-family:var(--font-ui);font-size:0.8125rem;color:var(--text-3)}
.fm-prompt__foot strong{color:var(--text-2);font-weight:var(--fw-semibold)}

/* ---------- Skill download ---------- */
.fm-skill{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);background:var(--surface-card);border:var(--border-width) solid var(--border-1);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-panel);font-family:var(--font-ui)}
.fm-skill__file{position:relative;isolation:isolate;background:var(--gradient-brand);color:var(--text-on-brand);display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-6);gap:var(--space-6)}
.fm-skill__ext{font-family:var(--font-display);font-size:2rem;font-weight:var(--fw-black);letter-spacing:-0.04em;line-height:1}
.fm-skill__file .bi{font-size:1.75rem;color:var(--plum-300);line-height:1}
.fm-skill__main{padding:var(--space-6) var(--space-7);display:grid;gap:var(--space-4)}
.fm-skill__name{font-family:var(--font-display);font-size:1.3125rem;font-weight:var(--fw-bold);letter-spacing:-0.02em;color:var(--text-1);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.fm-skill__desc{font-family:var(--font-reading);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-2)}
.fm-skill__files{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.4rem}
.fm-skill__files li{font-family:var(--font-ui);font-weight:var(--fw-medium);font-size:0.75rem;padding:0.2rem 0.5rem;background:var(--bg-sunken);border-radius:var(--radius-xs);color:var(--text-2)}
.fm-skill__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding-top:var(--space-4);border-top:var(--border-width) solid var(--border-1)}
.fm-skill__meta{font-family:var(--font-ui);font-size:0.8125rem;color:var(--text-3)}
@media (max-width:560px){.fm-skill{grid-template-columns:1fr}.fm-skill__file{flex-direction:row;align-items:center}}

/* ---------- Figure + image slot ---------- */
.fm-figure{margin:0;display:grid;gap:var(--space-3)}
.fm-figure__media{border-radius:var(--radius-figure);overflow:hidden;background:var(--bg-sunken);border:var(--border-width) solid var(--border-1)}
.fm-figure__media img{display:block;width:100%}
.fm-figure figcaption{display:flex;gap:var(--space-3);font-family:var(--font-ui);font-size:var(--fs-sm);line-height:1.45;color:var(--text-3);max-width:var(--measure)}
.fm-figure__num{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:0.6875rem;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-accent);padding-top:0.3em;flex:none}
.fm-figure--frame .fm-figure__media{position:relative;isolation:isolate;padding:clamp(1rem,3vw,2.5rem);background:var(--surface-tint);border-color:transparent}
.fm-figure--frame .fm-figure__media>*{border-radius:var(--radius-sm);box-shadow:var(--shadow-photo);overflow:hidden}
.fm-slot{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:var(--ratio,16 / 9);background:repeating-linear-gradient(-45deg,var(--placeholder-bg) 0 10px,var(--placeholder-stripe) 10px 20px);color:var(--placeholder-fg);font-family:var(--font-ui);font-weight:var(--fw-medium);font-size:0.8125rem;text-align:center;padding:var(--space-4)}
.fm-slot .bi{display:block;font-size:1.5rem;margin:0 auto var(--space-2);opacity:0.7}

/* ---------- Pull quote ---------- */
.fm-pullquote{margin:0;padding:var(--space-7) 0;border-top:var(--border-width-strong) solid var(--border-strong);border-bottom:var(--border-width) solid var(--border-1);display:grid;gap:var(--space-5)}
.fm-pullquote blockquote{margin:0;padding:0;border:0;font-family:var(--font-display);font-weight:var(--fw-bold);font-style:normal;font-size:var(--fs-h2);line-height:1.12;letter-spacing:var(--tracking-heading);color:var(--text-1);text-wrap:balance;text-indent:-0.42em}
.fm-pullquote blockquote::before{content:"\201C";color:var(--accent)}
.fm-pullquote blockquote::after{content:"\201D";color:var(--accent)}
.fm-pullquote figcaption{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-3)}
.fm-pullquote figcaption strong{color:var(--text-1);font-weight:var(--fw-semibold)}

/* ---------- Steps (method) ---------- */
.fm-steps{list-style:none;margin:0;padding:0;counter-reset:fm-step;display:grid}
.fm-steps__step{counter-increment:fm-step;display:grid;grid-template-columns:minmax(4.5rem,auto) minmax(0,1fr);gap:var(--space-2) var(--space-6);padding:var(--space-7) 0;border-top:var(--border-width) solid var(--border-1)}
.fm-steps__step:first-child{border-top:var(--border-width-strong) solid var(--border-strong)}
.fm-steps__step::before{content:counter(fm-step,decimal-leading-zero);font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-numeral);line-height:0.82;letter-spacing:-0.05em;color:var(--accent);font-variant-numeric:tabular-nums;grid-row:span 3}
.fm-steps__title{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--text-1);line-height:var(--lh-snug);letter-spacing:var(--tracking-heading)}
.fm-steps__body{font-family:var(--font-reading);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2)}
.fm-steps__body>*+*{margin-top:0.8em}
.fm-steps__body code{font-family:var(--font-mono);font-size:0.84em;background:var(--accent-softer);border:var(--border-width) solid var(--border-1);border-radius:var(--radius-sm);padding:0.05em 0.35em}
.fm-steps__body strong{color:var(--text-1);font-weight:var(--fw-semibold)}
@media (max-width:600px){.fm-steps__step{grid-template-columns:1fr}.fm-steps__step::before{grid-row:auto;font-size:2.5rem}}

/* ---------- Prerequisites (before you start) ---------- */
.fm-prereq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);border:var(--border-width) solid var(--border-1);border-radius:var(--radius-lg);background:var(--surface-card);overflow:hidden;font-family:var(--font-ui)}
.fm-prereq__meta{position:relative;isolation:isolate;background:var(--surface-tint);padding:var(--space-7);display:grid;gap:var(--space-5);align-content:start}
.fm-prereq__meta dl{margin:0;display:grid;gap:var(--space-4)}
.fm-prereq__meta dt{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);margin-bottom:0.25rem}
.fm-prereq__meta dd{margin:0;font-size:var(--fs-ui);font-weight:var(--fw-semibold);color:var(--text-1)}
.fm-prereq__list{padding:var(--space-7)}
.fm-prereq__list h4{font-family:var(--font-display);font-size:var(--fs-h4);margin:0 0 var(--space-4)}
.fm-prereq__list ul{list-style:none;margin:0;padding:0}
.fm-prereq__list li{display:flex;align-items:baseline;gap:var(--space-2);padding:0.6rem 0;border-bottom:var(--border-width) dotted var(--border-2);font-size:0.9375rem;color:var(--text-1)}
.fm-prereq__list li:last-child{border-bottom:0}
.fm-prereq__item{flex:none}
.fm-prereq__leader{flex:1;border-bottom:1.5px dotted var(--border-2);transform:translateY(-0.3em);min-width:1rem}
.fm-prereq__qty{flex:none;font-family:var(--font-reading);font-style:italic;font-size:1rem;color:var(--text-3);text-align:right}
@media (max-width:700px){.fm-prereq{grid-template-columns:1fr}}

/* ---------- Stage meter (learning journey) ---------- */
.fm-stage{display:inline-flex;align-items:center;gap:0.6rem;font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap}
.fm-stage__bars{display:inline-grid;grid-template-columns:repeat(4,1fr);gap:3px;width:3.25rem}
.fm-stage__bar{height:6px;border-radius:1px;background:var(--stage-empty)}
[data-theme="hc"] .fm-stage__bar,[data-theme="hc-dark"] .fm-stage__bar{border:1.5px solid var(--text-1);height:8px}
.fm-stage__bar.is-on:nth-child(1){background:var(--stage-1)}
.fm-stage__bar.is-on:nth-child(2){background:var(--stage-2)}
.fm-stage__bar.is-on:nth-child(3){background:var(--stage-3)}
.fm-stage__bar.is-on:nth-child(4){background:var(--stage-4)}
.fm-stage__num{font-family:var(--font-ui);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;font-size:0.75rem;color:var(--text-3)}
.fm-stage__name{font-weight:var(--fw-semibold);color:var(--text-1)}
.fm-stage--lg .fm-stage__bars{width:6rem;gap:4px}
.fm-stage--lg .fm-stage__bar{height:8px}
.fm-stage--on-brand{color:var(--text-on-brand-2)}
.fm-stage--on-brand .fm-stage__name{color:var(--text-on-brand)}
.fm-stage--on-brand .fm-stage__num{color:var(--plum-300)}
.fm-stage--on-brand .fm-stage__bar{background:oklch(100% 0 0 / 0.18)}
.fm-stage--on-brand .fm-stage__bar.is-on{background:var(--white)}

/* ---------- Cards ---------- */
.fm-card{position:relative;display:grid;gap:var(--space-4);align-content:start;color:var(--text-2);text-decoration:none}
.fm-card__media{border-radius:var(--radius-card);overflow:hidden;background:var(--bg-sunken);box-shadow:var(--shadow-1);transition:box-shadow var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.fm-card:hover .fm-card__media{box-shadow:var(--shadow-photo);transform:translateY(-3px)}
.fm-card__media>*{transition:transform var(--dur-slower) var(--ease-out)}
.fm-card:hover .fm-card__media>*{transform:scale(1.025)}
.fm-card__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.fm-card__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h4);line-height:1.18;letter-spacing:var(--tracking-heading);color:var(--text-1);text-wrap:balance;margin:0}
.fm-card__title a{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--dur-slow) var(--ease-out)}
.fm-card__title a::after{content:"";position:absolute;inset:0}
.fm-card:hover .fm-card__title a{background-size:100% 2px}
.fm-card__deck{font-family:var(--font-reading);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-2);text-wrap:pretty;margin:0}
.fm-card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);font-family:var(--font-ui);font-size:0.8125rem;color:var(--text-3)}
.fm-card__foot .bi{margin-right:0.3em}
.fm-card--feature{gap:var(--space-5)}
.fm-card--feature .fm-card__title{font-size:var(--fs-h2);font-weight:var(--fw-heavy);letter-spacing:var(--tracking-display);line-height:1.02}
.fm-card--feature .fm-card__deck{font-size:var(--fs-body)}
.fm-card--list{grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-5);padding:var(--space-5) 0;border-top:var(--border-width) solid var(--border-1)}
.fm-card--list .fm-card__index{font-family:var(--font-display);font-weight:var(--fw-black);font-size:1.75rem;line-height:1;letter-spacing:-0.05em;font-variant-numeric:tabular-nums;color:var(--accent);grid-row:span 3;min-width:2.5rem}
.fm-card--list .fm-card__title{font-size:var(--fs-h4)}
.fm-card--horizontal{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-7);align-items:center}
@media (max-width:700px){.fm-card--horizontal{grid-template-columns:1fr}}

.fm-video-thumb{position:relative;display:block}
.fm-video-thumb__play{position:absolute;left:var(--space-4);bottom:var(--space-4);display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--white);color:var(--plum-900);font-size:1.5rem;box-shadow:var(--shadow-3);transition:transform var(--dur-base) var(--ease-out)}
.fm-video-thumb__play .bi{margin-left:3px;line-height:0}
.fm-card:hover .fm-video-thumb__play{transform:scale(1.08)}
.fm-video-thumb__dur{position:absolute;right:var(--space-3);bottom:var(--space-3);padding:0.2rem 0.45rem;border-radius:var(--radius-xs);background:oklch(12% 0.03 305 / 0.82);backdrop-filter:blur(6px);color:var(--white);font-family:var(--font-ui);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;font-size:0.75rem}

.fm-course{position:relative;display:grid;gap:var(--space-5);align-content:space-between;min-height:24rem;padding:var(--space-8);background:var(--gradient-brand);color:var(--text-on-brand-2);border-radius:var(--radius-lg);overflow:hidden;font-family:var(--font-ui);text-decoration:none;isolation:isolate;box-shadow:var(--shadow-3)}
.fm-course__bg,.fm-promo__bg{position:absolute;inset:0;z-index:-1}
.fm-course__bg::after,.fm-promo__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,oklch(22% 0.08 305 / 0.55),oklch(14% 0.05 305 / 0.92) 70%)}
.fm-course__kicker{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);color:var(--plum-300)}
.fm-course__title{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-h2);line-height:1;letter-spacing:var(--tracking-display);color:var(--text-on-brand);margin:0;text-wrap:balance}
.fm-course__deck{font-family:var(--font-reading);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-on-brand-2);max-width:40ch;margin:0}
.fm-course__facts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);padding-top:var(--space-5);border-top:var(--border-width) solid oklch(100% 0 0 / 0.16);font-size:var(--fs-sm)}
.fm-course__facts span{display:inline-flex;align-items:center;gap:0.45em}
.fm-course__facts .bi{color:var(--plum-300)}
.fm-course--light{background:var(--surface-tint);box-shadow:none;color:var(--text-2);border:var(--border-width) solid var(--border-accent)}
.fm-course--light .fm-course__title{color:var(--text-1)}
.fm-course--light .fm-course__deck{color:var(--text-2)}
.fm-course--light .fm-course__kicker,.fm-course--light .fm-course__facts .bi{color:var(--text-accent)}
.fm-course--light .fm-course__facts{border-top-color:var(--border-accent)}

.fm-topic{isolation:isolate;overflow:hidden;position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:var(--space-4);min-height:13rem;padding:var(--space-6);background:var(--surface-card);border:var(--border-width) solid var(--border-1);border-radius:var(--radius-card);text-decoration:none;color:var(--text-2);font-family:var(--font-ui);transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.fm-topic:hover{border-color:var(--accent);box-shadow:var(--shadow-3);transform:translateY(-3px);color:var(--text-2)}
.fm-topic::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--texture-graph);opacity:0;-webkit-mask-image:var(--mask-edges);mask-image:var(--mask-edges);-webkit-mask-composite:source-in;mask-composite:intersect;transition:opacity var(--dur-slow) var(--ease-out)}
.fm-topic:hover::before{opacity:1}
.fm-topic__top{display:flex;justify-content:space-between;align-items:center}
.fm-topic__icon{font-size:1.5rem;color:var(--text-accent);line-height:1}
.fm-topic__name{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-h3);line-height:1.02;letter-spacing:var(--tracking-display);color:var(--text-1);align-self:end;margin:0}
.fm-topic__desc{font-size:var(--fs-sm);line-height:1.45;color:var(--text-3);margin:0}
.fm-topic__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding-top:var(--space-4);border-top:var(--border-width) solid var(--border-1)}
.fm-topic__arrow{transition:transform var(--dur-base) var(--ease-out);color:var(--text-accent)}
.fm-topic:hover .fm-topic__arrow{transform:translateX(4px)}

.fm-promo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-8);align-items:end;padding:var(--space-10) var(--space-9);background:var(--gradient-brand);color:var(--text-on-brand-2);border-radius:var(--radius-lg);font-family:var(--font-ui);position:relative;isolation:isolate;overflow:hidden;box-shadow:var(--shadow-3)}
.fm-promo__title{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-h1);line-height:0.98;letter-spacing:var(--tracking-display);color:var(--text-on-brand);margin:var(--space-4) 0 0;text-wrap:balance}
.fm-promo__body{font-family:var(--font-reading);font-size:var(--fs-body);line-height:1.55;margin:0 0 var(--space-6);color:var(--text-on-brand-2)}
.fm-promo__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.fm-promo--tint{background:var(--surface-tint);box-shadow:none;color:var(--text-2);border:var(--border-width) solid var(--border-accent)}
.fm-promo--tint .fm-promo__title{color:var(--text-1)}
.fm-promo--tint .fm-promo__body{color:var(--text-2)}
@media (max-width:860px){.fm-promo{grid-template-columns:1fr;padding:var(--space-8) var(--space-6)}}

/* ---------- Video player + chapters ---------- */
.fm-player{position:relative;aspect-ratio:16 / 9;background:var(--plum-950);border-radius:var(--radius-md);overflow:hidden;color:var(--white);font-family:var(--font-ui);box-shadow:var(--shadow-4)}
.fm-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fm-player__poster{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:clamp(1.25rem,3vw,3rem);background:var(--gradient-brand);border:0;isolation:isolate;width:100%;text-align:left;color:inherit;cursor:pointer}
.fm-player__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(1.75rem,1rem + 3vw,4.5rem);line-height:0.92;letter-spacing:-0.04em;max-width:14ch;align-self:end;text-wrap:balance}
.fm-player__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-6)}
.fm-player__play{display:inline-flex;align-items:center;gap:var(--space-3);font-weight:var(--fw-semibold);font-size:var(--fs-ui)}
.fm-player__btn{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;background:var(--white);color:var(--plum-900);font-size:2rem;transition:transform var(--dur-base) var(--ease-out)}
.fm-player__btn .bi{margin-left:4px;line-height:0}
.fm-player__poster:hover .fm-player__btn{transform:scale(1.07)}
.fm-player__meta{font-family:var(--font-ui);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;font-size:0.875rem;color:var(--plum-200)}
.fm-player__img{position:absolute;inset:0;z-index:-1}
.fm-player__img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,oklch(12% 0.04 305 / 0.92),oklch(12% 0.04 305 / 0.2) 70%),linear-gradient(90deg,oklch(12% 0.04 305 / 0.6),transparent 70%)}
.fm-player__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slower) var(--ease-out)}
.fm-player__poster:hover .fm-player__img img{transform:scale(1.03)}
.fm-player__chapters{position:absolute;left:0;right:0;bottom:0;display:flex;gap:3px;height:4px;padding:0 3px}
.fm-player__chapters span{flex:1;background:oklch(100% 0 0 / 0.25)}
.fm-chapters{list-style:none;margin:0;padding:0;font-family:var(--font-ui)}
.fm-chapters li{border-top:var(--border-width) solid var(--border-1)}
.fm-chapters li:last-child{border-bottom:var(--border-width) solid var(--border-1)}
.fm-chapters button{display:grid;grid-template-columns:4rem minmax(0,1fr) auto;gap:var(--space-3);align-items:baseline;width:100%;padding:0.8rem 0;background:none;border:0;text-align:left;cursor:pointer;color:var(--text-2);font:inherit;font-size:0.9375rem;transition:color var(--dur-fast) var(--ease-out)}
.fm-chapters button:hover{color:var(--text-1)}
.fm-chapters time{font-family:var(--font-ui);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;font-size:0.8125rem;color:var(--text-accent)}
.fm-chapters .is-active button{color:var(--text-1);font-weight:var(--fw-semibold)}
.fm-chapters .is-active button::after{content:"\F4F4";font-family:bootstrap-icons;color:var(--accent);font-size:0.9rem}

/* ---------- Theme switcher ---------- */
.fm-theme{display:inline-flex;padding:3px;gap:2px;border-radius:var(--radius-pill);background:var(--bg-sunken);border:var(--border-width) solid var(--border-1)}
.fm-theme button{display:grid;place-items:center;width:2rem;height:2rem;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-3);cursor:pointer;font-size:0.95rem;line-height:0}
.fm-theme button:hover{color:var(--text-1)}
.fm-theme button[aria-pressed="true"]{background:var(--surface-card);color:var(--text-1);box-shadow:var(--shadow-1)}
.fm-theme button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

/* ---------- Reveal on scroll ---------- */
.fm-reveal{opacity:0;transform:translateY(var(--reveal-distance));transition:opacity var(--dur-slower) var(--ease-out),transform var(--dur-slower) var(--ease-out)}
.fm-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.fm-reveal{opacity:1;transform:none}}

/* ---------- Reading progress ---------- */
.fm-progress{position:fixed;left:0;top:0;height:3px;width:calc(var(--progress,0) * 100%);background:var(--accent);z-index:calc(var(--z-header) + 1)}