/* mydu.app site core. First stylesheet on every page. Page stylesheets load after it and win. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--m-bar-h) + 12px)}
body{margin:0;font-family:var(--m-font);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;background:var(--site-canvas);color:var(--site-ink)}
img,svg,video,picture{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--site-ink);color:var(--site-canvas);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:where(:focus-visible){outline:2px solid var(--site-focus);outline-offset:3px}

:root{
  --m-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --m-font-round:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;
  --m-font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --m-gutter:clamp(16px,4vw,48px);--m-w-wide:80rem;--m-w-content:70rem;--m-w-text:42.5rem;
  --m-section-y:clamp(5rem,3.5rem + 8vw,11rem);--m-bar-h:56px;--m-r-icon:22.37%;
  --m-ease-out:cubic-bezier(.2,.8,.2,1);--m-ease-back:cubic-bezier(.34,1.56,.64,1);--m-ease-draw:cubic-bezier(.65,0,.35,1);
  --m-t-display:clamp(3rem,1.25rem + 7.2vw,7.5rem);--m-t-h2:clamp(2rem,1.2rem + 3.2vw,4rem);--m-t-h3:clamp(1.375rem,1.1rem + 1vw,2rem);
  --m-t-lead:clamp(1.125rem,1rem + .5vw,1.5rem);--m-t-eyebrow:.9375rem;
}
@media (min-width:720px){:root{--m-bar-h:64px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Token contract. Defaults (zero specificity) are the home palette; every page theme maps them. */
:where(:root){color-scheme:light dark;
  --site-canvas:#F5F4F0;--site-canvas-2:#ECEAE4;--site-surface:#FFFFFF;--site-ink:#171612;--site-ink-2:#4D4B44;--site-ink-3:#67645B;
  --site-line:rgb(23 22 18 / .12);--site-accent:#171612;--site-link:#171612;--site-focus:#171612;
  --site-band:#171612;--site-on-band:#F5F4F0;--site-on-band-2:#B4B0A5;--site-focus-on-band:#FFCB45;--site-highlight:#FFCB45;--site-on-highlight:#171612}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme="light"])){
  --site-canvas:#0F0F0D;--site-canvas-2:#1A1A17;--site-surface:#1F1F1C;--site-ink:#F2F1EC;--site-ink-2:#B8B5AC;--site-ink-3:#96928A;
  --site-line:rgb(255 255 255 / .12);--site-accent:#F2F1EC;--site-link:#F2F1EC;--site-focus:#F2F1EC;--site-band:#22221E;--site-on-band:#F2F1EC;--site-on-band-2:#B8B5AC}}
:where(:root[data-theme="dark"]){
  --site-canvas:#0F0F0D;--site-canvas-2:#1A1A17;--site-surface:#1F1F1C;--site-ink:#F2F1EC;--site-ink-2:#B8B5AC;--site-ink-3:#96928A;
  --site-line:rgb(255 255 255 / .12);--site-accent:#F2F1EC;--site-link:#F2F1EC;--site-focus:#F2F1EC;--site-band:#22221E;--site-on-band:#F2F1EC;--site-on-band-2:#B8B5AC}

/* Utilities */
.m-wrap{width:min(100% - 2*var(--m-gutter),var(--m-w-wide));margin-inline:auto}
.m-wrap--content{width:min(100% - 2*var(--m-gutter),var(--m-w-content))}
.m-wrap--text{width:min(100% - 2*var(--m-gutter),var(--m-w-text))}
.only-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .only-light{display:none}:root:not([data-theme="light"]) .only-dark{display:block}}
:root[data-theme="dark"] .only-light{display:none}
:root[data-theme="dark"] .only-dark{display:block}
[data-release="review"] .if-live,[data-release="live"] .if-review{display:none!important}
@media (max-width:719.98px){.m-hide-sm{display:none!important}}
@media (min-width:720px){.m-only-sm{display:none!important}}

/* Site mark: glyph + "mydu.app", links to / */
.m-mark{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--site-ink);font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.m-glyph{width:20px;height:20px;flex:none}
.m-glyph rect{fill:currentColor;opacity:.4}
.m-glyph .m-glyph__on{fill:var(--site-accent);opacity:1}
.m-mark:hover .m-mark__word{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.m-sep{color:var(--site-ink-3);margin-inline:8px;pointer-events:none}
@media (max-width:719.98px){.m-mark--collapse{min-width:44px;justify-content:center;margin-inline:-12px}.m-mark--collapse .m-mark__word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Family strip: every footer */
.m-family{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;font-size:14px;color:var(--site-ink-3)}
.m-family__label{font-weight:600}
.m-family ul{display:flex;flex-wrap:wrap;gap:0 20px}
.m-family li{display:inline-flex;align-items:center;gap:6px}
.m-family a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--site-ink-2);text-decoration:none}
.m-family a:hover{color:var(--site-ink);text-decoration:underline;text-underline-offset:3px}
.m-family a[aria-current="page"]{color:var(--site-ink);font-weight:600}
.m-family img{width:20px;height:20px;border-radius:var(--m-r-icon)}
.m-family--on-dark{color:var(--site-on-band-2)}
.m-family--on-dark a,.m-family--on-dark a:hover,.m-family--on-dark a[aria-current="page"]{color:var(--site-on-band)}

/* Status line (plain text + dot; never a pill) */
.m-status{display:flex;align-items:baseline;gap:8px;font-weight:600}
.m-status__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--m-status-dot,var(--site-highlight));translate:0 -1px}

/* Official Apple badges: the SVG files are never edited, filtered, recoloured, cropped or animated */
.m-badge{--m-badge-h:48px;display:inline-block;padding:calc(var(--m-badge-h) / 4);border-radius:12px;line-height:0}
.m-badge img{width:auto;height:var(--m-badge-h)}
.m-badges{display:flex;flex-wrap:wrap;align-items:center}
@media (max-width:719.98px){.m-badge{--m-badge-h:44px}}

/* Reveal on scroll: site.js adds .is-in once. Hidden states exist only with JS and motion allowed;
   the transition belongs to the .is-in state, so hiding at start-up is instant and only the reveal animates. */
@media (prefers-reduced-motion:no-preference){
  html.js .m-reveal:not(.is-in),html.js .m-reveal-kids:not(.is-in) > *{opacity:0;translate:0 16px}
  .m-reveal.is-in,.m-reveal-kids.is-in > *{transition:opacity .5s var(--m-ease-out),translate .5s var(--m-ease-out)}
  .m-reveal-kids.is-in > :nth-child(2){transition-delay:60ms}
  .m-reveal-kids.is-in > :nth-child(3){transition-delay:120ms}
  .m-reveal-kids.is-in > :nth-child(n+4){transition-delay:180ms}
}

/* Reduced motion: every page ends in its final state. A page with its own reduced-motion rules opts out
   with <html data-motion="custom"> (Hedi). */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="custom"]),html:not([data-motion="custom"]) *,html:not([data-motion="custom"]) *::before,html:not([data-motion="custom"]) *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}