jekyll-theme-modootoday 1.0.0

data/_sass/modootoday/components/core/inline/_progress.scss

@@ -0,0 +1,8 @@
+// Progress: `progress:60` → a labelled native <progress> plus the value as text.
+@include mt-layer(components) {
+  .mt-progress { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; font-size: .875rem; color: mt(muted-foreground); }
+  .mt-progress progress { appearance: none; width: 8rem; height: .5rem; border: 0; border-radius: 999px; background: mt(muted); overflow: hidden; accent-color: mt(primary); }
+  .mt-progress progress::-webkit-progress-bar { background: mt(muted); }
+  .mt-progress progress::-webkit-progress-value { background: mt(primary); }
+  .mt-progress progress::-moz-progress-bar { background: mt(primary); }
+}

data/_sass/modootoday/components/doc/_page-actions.scss

@@ -0,0 +1,10 @@
+// Page actions (details.mt-menu.mt-page-actions): a small menu at the inline end above the article.
+@include mt-layer(components) {
+  .mt-page-actions { position: relative; float: inline-end; margin-inline-start: 1rem; z-index: 5; margin-block-end: var(--mt-p-space-4); }
+  // Any block that clears the float (hero, wide figure/card rows) sits below its margin box: one gap rule for all of them.
+  @media (min-width: 48rem) { .mt-page-actions { margin-block-end: var(--mt-p-space-6); } }
+  .mt-page-actions > summary { border: 1px solid mt(border); }
+  .mt-page-actions > ul { inset-inline: auto 0; }
+  .mt-page-actions button { width: 100%; padding: .35rem .6rem; border: 0; border-radius: mt(radius); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
+  .mt-page-actions button:hover { background: mt(accent); }
+}

data/_sass/modootoday/components/doc/_sidebar.scss

@@ -0,0 +1,31 @@
+// Doc sidebar from grouped nav: a sticky column from 64rem (aside.mt-doc-nav), a collapsed <details> below it. The sticky column rule is shared with the TOC in layout/_shell.scss.
+// With a sidebar the header drops the inline copies of group links (.mt-nav-flat), so narrow headers stay short.
+@include mt-layer(components) {
+  .mt-sidebar { font-size: .9rem; }
+  .mt-sidebar ul { list-style: none; margin: 0; padding: 0; }
+  .mt-sidebar a { display: block; padding: .3rem .6rem; border-radius: mt(radius); color: mt(muted-foreground); text-decoration: none; }
+  .mt-sidebar a:hover, .mt-sidebar [aria-current] { color: mt(foreground); background: mt(accent); }
+  .mt-sidebar [aria-current] { font-weight: 600; }
+  .mt-sidebar-group { margin-top: 1rem; }
+  .mt-sidebar summary { cursor: pointer; }
+  .mt-sidebar ul ul summary { padding: .3rem .6rem; color: mt(muted-foreground); }
+  .mt-sidebar ul ul { padding-inline-start: .75rem; }
+  .mt-sidebar-title { display: list-item; padding: 0 .6rem .3rem; font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
+  .mt-doc-nav, .mt-body:has(.mt-doc-nav) .mt-nav-flat { display: none; }
+  .mt-sidebar-mobile { margin: 0 0 1rem; border: 1px solid mt(border); border-radius: mt(radius); background: mt(muted); font-size: .875rem; }
+  .mt-sidebar-mobile > summary { cursor: pointer; padding: .55rem .85rem; font-weight: 600; }
+  .mt-sidebar-mobile > .mt-sidebar { padding: 0 .5rem .6rem; max-height: 60vh; overflow-y: auto; }
+  @media (min-width: 64rem) {
+    .mt-sidebar-mobile, .mt-has-sidebar .mt-doc-aside { display: none; }
+    .mt-doc-layout.mt-has-sidebar { display: grid; grid-template-columns: 12rem minmax(0, #{mt(measure)}); gap: 3rem; max-width: none; }
+    .mt-has-sidebar .mt-doc-nav { display: block; }
+    .mt-has-sidebar .mt-toc-mobile { display: block; }
+    .mt-doc-layout.mt-has-sidebar ~ * { max-width: mt(measure); margin-inline-start: 15rem; }
+  }
+  @media (min-width: 80rem) {
+    .mt-has-sidebar.mt-has-toc { grid-template-columns: 12rem minmax(0, 1fr) 12rem; gap: 2.5rem; }
+    .mt-has-sidebar .mt-doc-aside { display: block; grid-column: 3; grid-row: 1; }
+    .mt-has-sidebar .mt-toc-mobile { display: none; }
+    .mt-doc-layout.mt-has-sidebar ~ * { margin-inline-start: 14.5rem; }
+  }
+}

data/_sass/modootoday/components/doc/_toc.scss

@@ -0,0 +1,19 @@
+// "On this page": a sticky right column from 64rem (aside > nav.mt-toc), a collapsed <details> below it.
+@include mt-layer(components) {
+  .mt-toc { --mt-toc-indent: .85rem; font-size: .875rem; }
+  .mt-toc-title { margin: 0 0 .6rem; font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: mt(foreground); }
+  .mt-toc ol, .mt-toc-mobile ol { list-style: none; margin: 0; padding: 0; }
+  .mt-toc ol { border-inline-start: 1px solid mt(border); }
+  .mt-toc li, .mt-toc-mobile li { margin: 0; }
+  .mt-toc .mt-toc-h3, .mt-toc-mobile .mt-toc-h3 { padding-inline-start: var(--mt-toc-indent); }
+  .mt-toc a, .mt-toc-mobile a { display: block; min-height: 24px; padding: .2rem 0 .2rem .85rem; line-height: 1.45; color: mt(muted-foreground); text-decoration: none; }
+  .mt-toc a { margin-inline-start: -1px; border-inline-start: 1px solid transparent; }
+  .mt-toc a:hover, .mt-toc-mobile a:hover { color: mt(foreground); border-inline-start-color: mt(muted-foreground); }
+  .mt-toc-mobile { margin: 0 0 1.5rem; border: 1px solid mt(border); border-radius: mt(radius); background: mt(muted); font-size: .875rem; }
+  .mt-toc-mobile > summary { cursor: pointer; padding: .55rem .85rem; font-weight: 600; }
+  .mt-toc-mobile > ol { padding: 0 .5rem .6rem 0; max-height: 50vh; overflow-y: auto; }
+  // The sticky column lists h2 only, so long pages stay scannable; the collapsed mobile list keeps h3 too.
+  .mt-doc-aside .mt-toc .mt-toc-h3 { display: none; }
+  .mt-doc-aside .mt-toc a { padding-top: .3rem; padding-bottom: .3rem; }
+  @media (min-width: 64rem) { .mt-toc-mobile { display: none; } }
+}

data/_sass/modootoday/components/loading/_loading.scss

@@ -0,0 +1,33 @@
+// Loading and skeleton UI (optional sheet, CSS only): `loading:spinner`, `loading:bar` (thin top bar) and
+// `skeleton:text|card|image|avatar|row` placeholders, plus .mt-ratio-* boxes that reserve space for media.
+// Motion stops under prefers-reduced-motion; forced-colors keeps outlines visible; the shimmer follows dir.
+@include mt-layer(components) {
+  .mt-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; vertical-align: middle; border: 2px solid mt(border); border-top-color: mt(primary);
+    border-radius: 50%; animation: mt-spin .8s linear infinite; }
+  .mt-topbar { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200; display: block; height: 3px; overflow: hidden; background: color-mix(in srgb, #{mt(primary)} 20%, transparent); }
+  .mt-topbar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%; background: mt(primary); animation: mt-bar 1.2s ease-in-out infinite; }
+  .mt-skeleton { display: block; margin: 0 0 .75rem; border-radius: mt(radius); background: linear-gradient(90deg, #{mt(muted)} 25%, #{mt(accent)} 50%, #{mt(muted)} 75%);
+    background-size: 200% 100%; animation: mt-shimmer 1.4s ease-in-out infinite; }
+  [dir="rtl"] .mt-skeleton { animation-direction: reverse; }
+  .mt-skeleton-text { height: .9rem; max-width: 36rem; box-shadow: 0 1.4rem 0 -.05rem mt(muted); margin-bottom: 2.1rem; }
+  .mt-skeleton-card { height: 9rem; border-radius: mt(radius-lg); }
+  .mt-skeleton-image, .mt-ratio-16x9 { aspect-ratio: 16 / 9; }
+  .mt-skeleton-image { width: 100%; }
+  .mt-skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
+  .mt-skeleton-row { height: 2.5rem; border-radius: 0; border-bottom: 1px solid mt(border); }
+  .mt-ratio-4x3 { aspect-ratio: 4 / 3; }
+  .mt-ratio-1x1 { aspect-ratio: 1; }
+  .mt-prose img[width][height] { height: auto; }
+  @media (prefers-reduced-motion: reduce) {
+    .mt-spinner, .mt-skeleton, .mt-topbar::before { animation: none; }
+    .mt-topbar::before { width: 100%; opacity: .6; }
+  }
+  @media (forced-colors: active) {
+    .mt-skeleton { background: Canvas; border: 1px solid CanvasText; }
+    .mt-spinner { border-color: CanvasText; border-top-color: Highlight; }
+    .mt-topbar::before { background: Highlight; }
+  }
+}
+@keyframes mt-spin { to { transform: rotate(360deg); } }
+@keyframes mt-bar { 0% { inset-inline-start: -40%; } 100% { inset-inline-start: 100%; } }
+@keyframes mt-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

data/_sass/modootoday/components/search/_search.scss

@@ -0,0 +1,36 @@
+// Search box (header) and results list; needs a site /search.json (include modootoday/search.json).
+@include mt-layer(components) {
+  .mt-search { position: relative; margin-inline-start: auto; flex: none; }
+  // Reserve the box from the first paint when scripting is on (search.js only wires it up), so the header does not jump.
+  @media (scripting: enabled) { .mt-search[hidden] { display: block; } }
+  .mt-search > .mt-icon { position: absolute; inset-inline-start: .65rem; top: 1.125rem; translate: 0 -50%; color: mt(muted-foreground); pointer-events: none; }
+  .mt-search input { font: inherit; font-size: .875rem; height: 2.25rem; padding: 0 .75rem; padding-inline-start: 2.1rem; border: 1px solid mt(border); border-radius: mt(radius);
+    background: mt(muted); color: mt(foreground); width: 12rem; transition: border-color .15s, background-color .15s; }
+  .mt-search input::placeholder { color: mt(muted-foreground); }
+  .mt-search input:hover { border-color: mt(muted-foreground); }
+  .mt-search input:focus-visible { outline-offset: 1px; background: mt(background); }
+  .mt-search-results { position: absolute; inset-inline-end: 0; z-index: 30; list-style: none; margin: .4rem 0 0; padding: .35rem; width: 22rem; max-width: calc(100vw - 2rem);
+    background: mt(card); color: mt(card-foreground); border: 1px solid mt(border); border-radius: mt(radius-lg); box-shadow: mt(shadow); }
+  .mt-search-results:empty { display: none; }
+  .mt-search-results li + li { margin-top: 0; }
+  .mt-search-results a { display: block; padding: .4rem .6rem; border-radius: var(--mt-p-radius-sm); text-decoration: none; font-size: .9rem; }
+  .mt-search-results a { color: mt(foreground); }
+  .mt-search-title { display: block; font-weight: 600; }
+  .mt-search-snippet { display: block; margin-top: .1rem; font-size: .8rem; line-height: 1.45; color: mt(muted-foreground);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .mt-search-results a:hover, .mt-search-results a:focus { background: mt(accent); color: mt(accent-foreground); }
+  @media (max-width: 47.99rem) { .mt-search { flex: 1 1 0; min-width: 0; } .mt-search input { width: 100%; padding-inline-end: .5rem; } .mt-search { position: static; }
+    .mt-search-results { inset-inline: 1rem; top: 2.9rem; width: auto; max-width: none; } }
+  // Narrow phones: search takes its own row under the title so the input stays usable next to the header buttons.
+  @media (max-width: 29.99rem) { .mt-search { order: 9; flex: 1 0 100%; position: relative; }
+    .mt-search-results { inset-inline: 0; top: 100%; } }
+}
+@include mt-layer(components) {
+  // 64–80rem: the one-line header is tight; let search shrink so it never overlaps the nav (WCAG 2.2 target-size).
+  @media (min-width: 64rem) { .mt-search { flex: 0 1 15rem; min-width: 5rem; } .mt-search input { width: 100%; } }
+}
+// Coarse pointers and forced colors (here, not in core _access, because this sheet loads after core).
+@include mt-layer(components) {
+  @media (pointer: coarse) { .mt-search input { height: 2.75rem; font-size: 1rem; } }
+  @media (forced-colors: active) { .mt-search input { border: 1px solid ButtonText; } }
+}

data/_sass/modootoday/components/section/showcase/_card.scss

@@ -0,0 +1,15 @@
+// Cards: c: features section, list items "- **Title** — description" (the dash is dropped in Liquid).
+@include mt-layer(components) {
+  .mt-c-features > ul { --mt-card-padding: 1.25rem;
+    list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
+  .mt-c-features > ul > li { margin: 0; border: 1px solid mt(border); border-radius: mt(radius-lg); padding: var(--mt-card-padding);
+    background: mt(card); color: mt(muted-foreground); box-shadow: mt(shadow-sm); font-size: .9375rem; line-height: 1.6;
+    transition: border-color .15s, box-shadow .15s; }
+  .mt-c-features > ul > li code { white-space: nowrap; }
+  .mt-c-features > ul > li:hover { border-color: color-mix(in srgb, #{mt(primary)} 40%, #{mt(border)}); box-shadow: mt(shadow); }
+  .mt-c-features > ul > li > strong:first-child { display: block; margin-bottom: .35rem; color: mt(card-foreground); font-size: 1rem; }
+  @media (min-width: 48rem) {
+    .mt-cols-2 > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .mt-cols-3 > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  }
+}

data/_sass/modootoday/components/section/showcase/_cta.scss

@@ -0,0 +1,7 @@
+// c: cta sections: a centred, tinted panel around the heading and its action buttons (.mt-actions lives in core).
+@include mt-layer(components) {
+  .mt-cta { margin-top: mt(space-section); padding: 2.5rem 2rem; text-align: center; border: 1px solid mt(border); border-radius: mt(radius-lg);
+    background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, #{mt(primary)} 10%, #{mt(background)}), #{mt(muted)}); }
+  .mt-cta > h2 { margin: 0 0 .5rem; }
+  .mt-cta > .mt-actions { justify-content: center; margin-top: 1.25rem; }
+}

data/_sass/modootoday/components/section/showcase/_gallery.scss

@@ -0,0 +1,15 @@
+// Gallery: c: gallery, a list of images → thumbnail grid; each opens a no-script :target lightbox with a close link.
+@include mt-layer(components) {
+  .mt-c-gallery > ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
+  .mt-c-gallery > ul > li { margin: 0; }
+  .mt-gallery-thumb { display: block; border-radius: mt(radius); overflow: hidden; border: 1px solid mt(border); }
+  .mt-gallery-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .2s; }
+  .mt-gallery-thumb:hover img { transform: scale(1.03); }
+  .mt-gallery-thumb:focus-visible { outline: 2px solid mt(ring); outline-offset: 2px; }
+  .mt-lightbox { display: none; }
+  .mt-lightbox:target { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
+    padding: 1.5rem; background: rgba(0, 0, 0, .85); }
+  .mt-lightbox img { max-width: 100%; max-height: 80vh; border-radius: mt(radius); }
+  .mt-lightbox-close { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; background: #fff; color: #111; font-weight: 600; text-decoration: none; }
+  @media (prefers-reduced-motion: reduce) { .mt-gallery-thumb img { transition: none; } }
+}

data/_sass/modootoday/components/section/showcase/_linkcards.scss

@@ -0,0 +1,12 @@
+// Link cards: c: linkcards, list items "[Title](url) — description"; the whole card is one link target.
+@include mt-layer(components) {
+  .mt-c-linkcards > ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
+  .mt-c-linkcards > ul > li { position: relative; margin: 0; padding: 1.1rem 1.25rem; border: 1px solid mt(border); border-radius: mt(radius-lg);
+    background: mt(card); color: mt(muted-foreground); font-size: .9375rem; transition: border-color .15s, box-shadow .15s; }
+  .mt-c-linkcards > ul > li > a:first-child { display: block; margin-bottom: .25rem; color: mt(card-foreground); font-weight: 650; text-decoration: none; }
+  .mt-c-linkcards > ul > li > a:first-child::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
+  .mt-c-linkcards > ul > li > a:first-child::after { content: " →"; color: mt(primary); }
+  [dir="rtl"] .mt-c-linkcards > ul > li > a:first-child::after { content: " ←"; }
+  .mt-c-linkcards > ul > li:hover { border-color: mt(primary); box-shadow: mt(shadow); }
+  .mt-c-linkcards > ul > li > a:first-child:focus-visible { outline: 2px solid mt(ring); outline-offset: 2px; border-radius: mt(radius); }
+}

data/_sass/modootoday/components/section/showcase/_pricing.scss

@@ -0,0 +1,12 @@
+// Pricing: c: pricing; each ### is a plan card (price, feature list, link). recommended: <n> marks one plan in text.
+@include mt-layer(components) {
+  .mt-plans { display: grid; gap: 1rem; margin-top: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: stretch; }
+  .mt-plan { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid mt(border); border-radius: mt(radius-lg); background: mt(card); box-shadow: mt(shadow-sm); }
+  .mt-plan h3 { margin: 0 0 .5rem; font-size: 1.0625rem; }
+  .mt-plan h3 + p { margin: 0 0 1rem; color: mt(muted-foreground); }
+  .mt-plan h3 + p strong { color: mt(card-foreground); font-size: 1.875rem; font-weight: 750; letter-spacing: -.02em; }
+  .mt-plan ul { flex: 1; margin: 0 0 1.25rem; padding-inline-start: 1.1rem; color: mt(muted-foreground); font-size: .9375rem; }
+  .mt-plan .mt-actions { margin-top: auto; }
+  .mt-plan-recommended { border: 2px solid mt(primary); box-shadow: mt(shadow); }
+  .mt-plan-flag { align-self: flex-start; margin-bottom: .75rem; padding: .1rem .6rem; border-radius: 999px; background: mt(primary); color: mt(primary-foreground); font-size: .75rem; font-weight: 600; }
+}

data/_sass/modootoday/components/section/showcase/_quote.scss

@@ -0,0 +1,7 @@
+// Quote: c: quote; a quote whose last paragraph starts with "— " becomes figure > blockquote + figcaption.
+@include mt-layer(components) {
+  .mt-quote { margin: 1.5rem 0; padding: 1.5rem 1.75rem; border: 1px solid mt(border); border-radius: mt(radius-lg); background: mt(card); }
+  .mt-quote blockquote { margin: 0; padding: 0; border: 0; color: mt(card-foreground); font-size: 1.125rem; line-height: 1.6; }
+  .mt-quote blockquote > :last-child { margin-bottom: 0; }
+  .mt-quote figcaption { margin-top: 1rem; color: mt(muted-foreground); font-size: .875rem; font-weight: 600; }
+}

data/_sass/modootoday/components/section/showcase/_subscribe.scss

@@ -0,0 +1,9 @@
+// Subscribe: c: subscribe; the section text plus a static e-mail form posting to modootoday.subscribe.action.
+@include mt-layer(components) {
+  .mt-subscribe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-top: 1.25rem; }
+  .mt-subscribe label { flex-basis: 100%; font-size: .875rem; font-weight: 600; }
+  .mt-subscribe input { flex: 1 1 14rem; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid mt(border); border-radius: mt(radius);
+    background: mt(background); color: mt(foreground); font: inherit; }
+  .mt-subscribe input:focus-visible, .mt-subscribe button:focus-visible { outline: 2px solid mt(ring); outline-offset: 2px; }
+  .mt-subscribe button { min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: mt(radius); background: mt(primary); color: mt(primary-foreground); font: inherit; font-weight: 600; cursor: pointer; }
+}

data/_sass/modootoday/components/section/structure/_accordion.scss

@@ -0,0 +1,15 @@
+// Accordion: sections with `c: accordion`; each `###` becomes a disclosure (assets/js/modootoday/accordion.js).
+@include mt-layer(components) {
+  .mt-c-accordion h3 { margin: 0; border-top: 1px solid mt(border); font-size: 1rem; }
+  .mt-c-accordion > h2 + h3 { margin-top: 1.25rem; }
+  .mt-accordion-trigger { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%;
+    padding: 1rem 0; cursor: pointer; font-weight: 600; }
+  .mt-accordion-trigger:hover { color: mt(primary); }
+  .mt-accordion-trigger:focus-visible { outline: 2px solid mt(ring); outline-offset: 2px; }
+  .mt-accordion-trigger::after { content: ""; flex: none; width: .5rem; height: .5rem; margin-inline-end: .25rem; border: solid mt(muted-foreground);
+    border-width: 0 2px 2px 0; transform: translateY(-25%) rotate(45deg); transition: transform .2s; }
+  .mt-accordion-trigger[aria-expanded="true"]::after { transform: translateY(25%) rotate(-135deg); }
+  .mt-accordion-panel { padding-bottom: 1rem; color: mt(muted-foreground); }
+  .mt-accordion-panel[hidden] { display: none; }
+  .mt-c-accordion { border-bottom: 1px solid mt(border); }
+}

data/_sass/modootoday/components/section/structure/_details.scss

@@ -0,0 +1,15 @@
+// Details: c: details (and c: faq); each ### heading becomes a native <details> summary. No script needed.
+@include mt-layer(components) {
+  .mt-details { border-top: 1px solid mt(border); }
+  .mt-details:last-of-type { border-bottom: 1px solid mt(border); }
+  .mt-details > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; }
+  .mt-details > summary::-webkit-details-marker { display: none; }
+  .mt-details > summary h3 { margin: 0; font-size: 1rem; }
+  .mt-details > summary:hover { color: mt(primary); }
+  .mt-details > summary:focus-visible { outline: 2px solid mt(ring); outline-offset: 2px; }
+  .mt-details > summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin-inline-end: .25rem; border: solid mt(muted-foreground);
+    border-width: 0 2px 2px 0; transform: translateY(-25%) rotate(45deg); transition: transform .2s; }
+  .mt-details[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
+  .mt-details > summary ~ * { color: mt(muted-foreground); }
+  .mt-details > :last-child { margin-bottom: 1rem; }
+}

data/_sass/modootoday/components/section/structure/_faq.scss

@@ -0,0 +1,5 @@
+// FAQ: c: faq; the details disclosure plus FAQPage structured data (printed by Liquid, not styled).
+@import "details";
+@include mt-layer(components) {
+  .mt-c-faq > h2 + .mt-details { margin-top: 1.25rem; }
+}

data/_sass/modootoday/components/section/structure/_filetree.scss

@@ -0,0 +1,13 @@
+// File tree: c: filetree, a nested list; items with a nested list are folders. Guides drawn with borders.
+@include mt-layer(components) {
+  .mt-c-filetree > ul { margin: 1.25rem 0; padding: .75rem 1rem; border: 1px solid mt(border); border-radius: mt(radius-lg); background: mt(muted); font: .875rem/1.7 mt(font-mono); }
+  .mt-c-filetree ul { list-style: none; }
+  .mt-c-filetree ul ul { margin: 0; padding-inline-start: 1.25rem; border-inline-start: 1px solid mt(border); }
+  .mt-c-filetree li { margin: 0; }
+  .mt-c-filetree li p { margin: 0; }
+  .mt-c-filetree li::before { content: ""; display: inline-block; width: .7rem; height: .85rem; margin-inline-end: .45rem; vertical-align: -.1rem;
+    border: 1.5px solid mt(muted-foreground); border-radius: 2px; }
+  .mt-c-filetree li:has(> ul)::before { width: .9rem; height: .7rem; border-radius: 2px 4px 2px 2px; background: color-mix(in srgb, #{mt(primary)} 25%, transparent); border-color: mt(primary); }
+  .mt-c-filetree li:has(> ul) { font-weight: 600; }
+  .mt-c-filetree li li:not(:has(> ul)) { font-weight: 400; }
+}

data/_sass/modootoday/components/section/structure/_params.scss

@@ -0,0 +1,8 @@
+// Parameter table: c: params, a GFM table (name, type, default, description); `required` in a cell becomes a badge.
+@include mt-layer(components) {
+  .mt-c-params table { font-size: .9375rem; }
+  .mt-c-params td:first-child code { color: mt(primary); font-weight: 600; white-space: nowrap; }
+  .mt-c-params td:nth-child(2) { color: mt(muted-foreground); font-family: mt(font-mono); font-size: .8125rem; }
+  .mt-param-required { display: inline-block; padding: 0 .45rem; border: 1px solid color-mix(in srgb, #{mt(caution)} 50%, transparent); border-radius: 999px;
+    color: mt(caution); font-size: .75rem; font-weight: 600; white-space: nowrap; }
+}

data/_sass/modootoday/components/section/structure/_steps.scss

@@ -0,0 +1,13 @@
+// Steps: sections with `c: steps`; the ordered list (or ### headings) get numbered markers on a rail.
+@include mt-layer(components) {
+  .mt-c-steps { counter-reset: mt-step; }
+  .mt-c-steps > ol { list-style: none; padding: 0; margin-top: 1.5rem; counter-reset: mt-step; }
+  .mt-c-steps > ol > li, .mt-c-steps > h3 { counter-increment: mt-step; position: relative; padding-inline-start: 2.75rem; }
+  .mt-c-steps > ol > li { margin: 0; padding-bottom: 1.25rem; }
+  .mt-c-steps > ol > li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: .875rem; top: 2rem; bottom: .25rem; width: 1px; background: mt(border); }
+  .mt-c-steps > h3 ~ :not(h3) { padding-inline-start: 2.75rem; }
+  .mt-c-steps > ol > li::before, .mt-c-steps > h3::before { content: counter(mt-step); position: absolute; inset-inline-start: 0; top: 0;
+    width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
+    background: mt(muted); border: 1px solid mt(border); color: mt(foreground); font-size: .8rem; font-weight: 650; }
+  .mt-c-steps > h3 { margin-top: 1.5rem; line-height: 1.75rem; }
+}

data/_sass/modootoday/components/section/structure/_tabs.scss

@@ -0,0 +1,21 @@
+// The tablist scrolls sideways only: no negative margins or outer focus rings that would overflow it vertically.
+// Tabs (assets/js/modootoday/tabs.js): c: tabs, ### name + code block pairs → WAI-ARIA tabs.
+@include mt-layer(components) {
+  [role="tablist"] { display: flex; gap: .25rem; overflow: auto hidden; scrollbar-width: thin; box-shadow: inset 0 -1px mt(border); margin: 1.25rem 0 0; }
+  [role="tab"] { font: inherit; font-size: .875rem; line-height: 1.5; font-weight: 500; white-space: nowrap; background: none; color: mt(muted-foreground);
+    border: 0; border-bottom: 2px solid transparent; padding: .55rem .85rem; cursor: pointer; transition: color .15s; }
+  [role="tab"]:hover { color: mt(foreground); }
+  [role="tab"][aria-selected="true"] { color: mt(foreground); border-bottom-color: mt(primary); font-weight: 600; }
+  [role="tabpanel"] { margin-top: .75rem; }
+  [role="tabpanel"] pre { margin-top: 0; }
+}
+// Before tabs.js runs (scripting on): the first "### name" already draws as a tab row of the same height
+// and only its code block shows, so grouping after load moves nothing. Without JS every method stays visible.
+@media (scripting: enabled) {
+  @include mt-layer(components) {
+    [data-tabs]:not(:has([role="tablist"])) {
+      > h3:has(+ div, + pre) { font-size: .875rem; line-height: 1.5; padding: .55rem .85rem; margin: 1.25rem 0 0; border-bottom: 2px solid mt(primary); }
+      > h3 ~ h3:has(+ div, + pre), > h3 ~ h3 + * { display: none; }
+    }
+  }
+}

data/_sass/modootoday/components/section/structure/_timeline.scss

@@ -0,0 +1,10 @@
+// Timeline: sections with `c: timeline`; each ### heading is a date/milestone, content follows.
+@include mt-layer(components) {
+  .mt-c-timeline { --mt-timeline-line: #{mt(border)}; --mt-timeline-dot: #{mt(primary)}; }
+  .mt-c-timeline > h3, .mt-c-timeline > h3 ~ * { position: relative; margin-inline-start: .5rem; padding-inline-start: 1.5rem; border-inline-start: 2px solid var(--mt-timeline-line); }
+  .mt-c-timeline > h3 { margin-bottom: 0; padding-top: 1.25rem; margin-top: 0; font-size: .8125rem; font-weight: 650; letter-spacing: .02em; color: mt(muted-foreground); font-family: mt(font-mono); }
+  .mt-c-timeline > h2 + h3 { margin-top: 1rem; }
+  .mt-c-timeline > h3 ~ * { margin-top: 0; margin-bottom: 0; padding-bottom: .5rem; }
+  .mt-c-timeline > h3::before { content: ""; position: absolute; inset-inline-start: -.45rem; top: 1.55rem;
+    width: .75rem; height: .75rem; border-radius: 50%; background: var(--mt-timeline-dot); box-shadow: 0 0 0 3px #{mt(background)}; }
+}

data/_sass/modootoday/detail/_index.scss

@@ -0,0 +1,8 @@
+// Detail page partials (separate bundle). Uses the core tokens (--mt-*) already on the page; emits no tokens.
+@import "../settings";
+@import "../tools/functions";
+@import "../tools/mixins";
+@import "../kit/button";
+@import "page";
+@import "../tools/img-dark";
+@include mt-img-dark(".mt-detail-cover img");

data/_sass/modootoday/detail/_page.scss

@@ -0,0 +1,25 @@
+// Detail pages: header, facts list, media and one call to action. Print drops the call to action.
+@include mt-layer(components) {
+  .mt-detail-head { margin-bottom: 1.5rem; }
+  .mt-detail-kicker { margin: 0 0 .5rem; color: mt(muted-foreground); font-size: .875rem; font-weight: 600; letter-spacing: .02em; }
+  .mt-detail-head h1 { margin: 0; }
+  .mt-detail-lead { margin: .75rem 0 0; font-size: 1.125rem; color: mt(muted-foreground); }
+  .mt-detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem 1.5rem; margin: 0 0 2rem;
+    padding: 1rem 1.25rem; border: 1px solid mt(border); border-radius: mt(radius); }
+  .mt-detail-facts dt { color: mt(muted-foreground); font-size: .8125rem; font-weight: 600; }
+  .mt-detail-facts dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
+  .mt-detail-tags, .mt-detail-links { display: flex; flex-wrap: wrap; gap: .375rem .75rem; margin: 0; padding: 0; list-style: none; }
+  :is(.mt-detail-tags, .mt-detail-links) > li { margin: 0; }
+  .mt-detail-tags li { padding: 0 .5rem; border-radius: mt(radius); background: mt(muted); font-size: .8125rem; }
+  .mt-detail-cover { margin: 0 0 2rem; }
+  .mt-detail-cover img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: mt(radius-lg); background: mt(muted); }
+  @media (min-width: 48rem) { .mt-detail-cover img { aspect-ratio: 21 / 9; } }
+  .mt-detail-media { margin: 0 0 2rem; }
+  .mt-detail-media audio { display: block; width: 100%; }
+  .mt-detail-media figcaption { margin-top: .5rem; font-size: .875rem; }
+  .mt-detail-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 2.5rem 0 0; padding-top: 1.5rem;
+    border-top: 1px solid mt(border); }
+  @include mt-kit-button(".mt-detail-btn");
+  .mt-detail-cta .mt-ics { font-size: .875rem; font-weight: 600; }
+  @media print { .mt-detail-cta, .mt-detail-media audio { display: none; } }
+}

data/_sass/modootoday/directory/_filter.scss

@@ -0,0 +1,12 @@
+// CSS-only filter: radio i checked hides items without class mt-f<i>. Browsers without :has() show every item.
+@include mt-layer(components) {
+  .mt-dir-filter { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
+  .mt-dir-filter > label { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid mt(border);
+    border-radius: 999px; font-size: .875rem; font-weight: 600; cursor: pointer; user-select: none; }
+  .mt-dir-filter > input:checked + label { background: mt(foreground); border-color: mt(foreground); color: mt(background); }
+  .mt-dir-filter > input:focus-visible + label { outline: 2px solid mt(ring); outline-offset: 2px; }
+  @for $i from 1 through 12 {
+    .mt-dir:has(.mt-f-r#{$i}:checked) .mt-dir-item:not(.mt-f#{$i}) { display: none; }
+  }
+  @media (forced-colors: active) { .mt-dir-filter > input:checked + label { forced-color-adjust: none; background: Highlight; color: HighlightText; } }
+}

data/_sass/modootoday/directory/_grid.scss

@@ -0,0 +1,18 @@
+// Card grid shared by every directory preset.
+@include mt-layer(components) {
+  .mt-dir-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
+  .mt-dir-item { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 1rem; border: 1px solid mt(border);
+    border-radius: mt(radius); background: mt(background); position: relative; }
+  .mt-dir-item:focus-within { outline: 2px solid mt(ring); outline-offset: 2px; }
+  .mt-dir-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(#{mt(radius)} - 2px); background: mt(muted); }
+  .mt-dir-title { font-size: 1.05rem; margin: 0; line-height: 1.35; }
+  .mt-dir-title > a { color: inherit; text-decoration: none; }
+  .mt-dir-title > a::after { content: ""; position: absolute; inset: 0; }
+  .mt-dir-title > a:focus-visible { outline: none; }
+  .mt-dir-meta { margin: .25rem 0 0; font-size: .875rem; color: mt(muted-foreground); }
+  .mt-dir-text { margin: .5rem 0 0; font-size: .9375rem; }
+  .mt-dir-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: .75rem 0 0; }
+  .mt-dir-tags > span { font-size: .75rem; padding: .125rem .5rem; border-radius: 999px; background: mt(muted); color: mt(muted-foreground); }
+  .mt-ics { position: relative; z-index: 1; display: inline-block; margin-top: .75rem; font-size: .875rem; font-weight: 600; }
+}

data/_sass/modootoday/directory/_index.scss

@@ -0,0 +1,11 @@
+// Directory engine partials (separate bundle): shells and buttons, card grid, CSS-only filter, presets.
+@import "../settings";
+@import "../tools/functions";
+@import "../tools/mixins";
+@import "../pages/shells";
+@import "../pages/actions";
+@import "grid";
+@import "filter";
+@import "presets";
+@import "../tools/img-dark";
+@include mt-img-dark('.mt-dir img:not([src$=".svg"])', '.mt-dir img[src$=".svg"]');

data/_sass/modootoday/directory/_presets.scss

@@ -0,0 +1,16 @@
+// Preset looks: team avatars, events with a date tile, sponsor and integration logos, jobs as rows.
+@include mt-layer(components) {
+  .mt-dir-team .mt-dir-item { align-items: center; text-align: center; }
+  .mt-dir-team .mt-dir-img { width: 6rem; height: 6rem; aspect-ratio: 1; border-radius: 50%; }
+  .mt-dir-events .mt-dir-item, .mt-dir-jobs .mt-dir-item { flex-direction: row; align-items: flex-start; }
+  .mt-dir-jobs .mt-dir-grid, .mt-dir-events .mt-dir-grid { grid-template-columns: 1fr; }
+  .mt-dir-events .mt-dir-img { flex: none; width: 7rem; aspect-ratio: 4 / 3; }
+  @media (max-width: 30rem) { .mt-dir-events .mt-dir-img { width: 4.5rem; } }
+  .mt-date-tile { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 4rem; height: 4rem;
+    border-radius: mt(radius); background: mt(muted); line-height: 1.1; text-transform: uppercase; font-size: .75rem; }
+  .mt-date-tile > b { font-size: 1.5rem; }
+  .mt-dir-sponsors .mt-dir-img, .mt-dir-integrations .mt-dir-img { width: auto; max-width: 100%; height: 3rem; aspect-ratio: auto;
+    object-fit: contain; background: none; }
+  .mt-dir-sponsors .mt-dir-item { align-items: center; text-align: center; }
+  @media print { .mt-dir-filter { display: none; } .mt-dir-item { break-inside: avoid; } }
+}

data/_sass/modootoday/docs-extra/_index.scss

@@ -0,0 +1,7 @@
+// Docs-extra partials (separate bundle: reference, changelog, roadmap, glossary, hub, course, book). Uses the core tokens.
+@import "../settings";
+@import "../tools/functions";
+@import "../tools/mixins";
+@import "page";
+@import "../tools/img-dark";
+@include mt-img-dark(".mt-dx-cover");

data/_sass/modootoday/docs-extra/_page.scss

@@ -0,0 +1,37 @@
+// Shared header and the lists of each docs-extra layout.
+@include mt-layer(components) {
+  .mt-dx-head { margin: 1rem 0 1.5rem; }
+  .mt-dx-head h1 { margin: 0; }
+  .mt-dx-lead { margin: .5rem 0 0; font-size: 1.125rem; color: mt(muted-foreground); }
+  .mt-dx-kicker, .mt-dx-meta, .mt-dx-time, .mt-dx-count { color: mt(muted-foreground); font-size: .875rem; }
+  .mt-dx-kicker { margin: 0 0 .25rem; font-weight: 600; }
+  .mt-dx-toc ul, .mt-dx-letters ul, .mt-dx-cards, .mt-dx-col ul { margin: 0; padding: 0; list-style: none; }
+  .mt-dx-toc ul, .mt-dx-letters ul { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: 1.5rem; }
+  .mt-dx-toc li, .mt-dx-letters li { margin: 0; }
+  .mt-dx-letters a { display: inline-block; min-width: 2rem; padding: .25rem; text-align: center; }
+  .mt-dx-member, .mt-dx-release { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid mt(border); scroll-margin-top: 4rem; }
+  .mt-dx-member h2, .mt-dx-release h2 { margin-top: 0; }
+  .mt-dx-release time { margin-inline-start: .5rem; font-size: .875rem; font-weight: 400; color: mt(muted-foreground); }
+  .mt-dx-cat { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
+  .mt-dx-warn { color: mt(caution); }
+  .mt-dx-cols, .mt-dx-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 2rem; }
+  .mt-dx-col { padding: 1rem; border-radius: mt(radius-lg); background: mt(muted); }
+  .mt-dx-col h2 { margin: 0 0 .75rem; font-size: 1rem; }
+  .mt-dx-col li, .mt-dx-cards li { margin-top: .5rem; padding: .75rem 1rem; border: 1px solid mt(border); border-radius: mt(radius); background: mt(card); }
+  .mt-dx-col h3, .mt-dx-cards h2 { margin: 0; font-size: 1rem; }
+  .mt-dx-col p, .mt-dx-cards p { margin: .25rem 0 0; color: mt(muted-foreground); font-size: .9375rem; }
+  .mt-dx-cards li { position: relative; margin: 0; }
+  .mt-dx-cards li:hover { border-color: mt(primary); }
+  .mt-dx-cards a::after { content: ""; position: absolute; inset: 0; }
+  .mt-dx-letter { scroll-margin-top: 4rem; }
+  .mt-dx-terms dt { margin-top: 1rem; font-weight: 600; scroll-margin-top: 4rem; }
+  .mt-dx-terms dd { margin: .25rem 0 0; }
+  .mt-dx-syllabus > li { margin-bottom: 1rem; }
+  .mt-dx-syllabus h3 { margin: 0 0 .25rem; font-size: 1.0625rem; }
+  .mt-dx-book { display: grid; gap: 0 2rem; }
+  .mt-dx-cover { border-radius: mt(radius); box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
+  @media (min-width: 40rem) { .mt-dx-book { grid-template-columns: 200px 1fr; } .mt-dx-book > :not(.mt-dx-cover, div:first-of-type) { grid-column: 1 / -1; } }
+  .mt-dx-chapters ol { padding-inline-start: 0; list-style: none; }
+  .mt-dx-chapters li { padding: .5rem 0; border-bottom: 1px solid mt(border); }
+  @media print { .mt-dx-toc, .mt-dx-letters { display: none; } .mt-dx-col, .mt-dx-member, .mt-dx-release { break-inside: avoid; } }
+}

data/_sass/modootoday/hero/_index.scss

@@ -0,0 +1,6 @@
+// Hero showcase partials (separate bundle). Uses the core tokens (--mt-*) already on the page; emits no tokens.
+@import "../settings";
+@import "../tools/functions";
+@import "../tools/mixins";
+@import "layout";
+@import "scene";

data/_sass/modootoday/hero/_layout.scss

@@ -0,0 +1,28 @@
+@import "../tools/img-dark";
+// Showcase hero layout: copy on the left, scene on the right, one image behind both (dark mode via CSS filter only).
+@include mt-layer(components) {
+  :where(:root) { --mt-hero-filter-dark: brightness(.42) saturate(.7) contrast(1.08); }
+  .mt-hero:has(> .mt-showcase) {
+    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 1.5rem; align-content: center; clear: both;
+    position: relative; isolation: isolate; overflow: clip; border-radius: mt(radius-lg); padding: 3rem clamp(1.25rem, 4vw, 3rem); min-height: 28rem;
+  }
+  .mt-hero:has(> .mt-showcase) > :not(.mt-showcase) { grid-column: 1; }
+  .mt-hero:has(> .mt-showcase) :is(h1, p) { word-break: keep-all; }
+  .mt-hero:has(> .mt-showcase) h1 { font-size: unquote("clamp(2rem, 1.4rem + 1.6vw, 2.75rem)"); }
+  .mt-hero:has(> .mt-showcase) .mt-actions a { min-height: 44px; }
+  .mt-showcase { display: contents; }
+  .mt-showcase-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
+  .mt-showcase-art { grid-column: 2; grid-row: 1 / span 9; align-self: center; position: relative; aspect-ratio: 4 / 3; }
+  .mt-hero:has(> .mt-showcase)::before {
+    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
+    background: linear-gradient(100deg, unquote("color-mix(in srgb, var(--mt-background) 70%, transparent)") 0 35%, transparent 80%);
+  }
+  .mt-showcase-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+  .mt-showcase-still { display: none; }
+  @media (prefers-reduced-motion: reduce) { .mt-showcase-motion { display: none; } .mt-showcase-still { display: block; } }
+  @media (max-width: 48rem) {
+    .mt-hero:has(> .mt-showcase) { grid-template-columns: minmax(0, 1fr); padding: 2rem 1.25rem; min-height: 0; }
+    .mt-showcase-art { grid-column: 1; grid-row: auto; width: min(100%, 22rem); justify-self: center; margin-top: 1.5rem; }
+  }
+}
+@include mt-img-dark(".mt-showcase-bg", $filter: var(--mt-hero-filter-dark, var(--mt-img-filter-dark)));

data/_sass/modootoday/hero/_scene.scss

@@ -0,0 +1,20 @@
+// Showcase SVG scene colours: every fill and stroke is a --mt-* token, so light and dark follow the theme.
+@include mt-layer(components) {
+  .mt-showcase-card { filter: drop-shadow(0 6px 10px rgba(31, 35, 40, .18)); }
+  .mt-showcase { --mt-sc-win: var(--mt-foreground); --mt-sc-ink: var(--mt-background); }
+  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mt-showcase { --mt-sc-win: var(--mt-card); --mt-sc-ink: var(--mt-foreground); } }
+  :root[data-theme="dark"] .mt-showcase { --mt-sc-win: var(--mt-card); --mt-sc-ink: var(--mt-foreground); }
+  .mt-showcase-win { fill: var(--mt-sc-win); stroke: var(--mt-border); }
+  .mt-showcase-dot1 { fill: var(--mt-caution); } .mt-showcase-dot2 { fill: var(--mt-warning); } .mt-showcase-dot3 { fill: var(--mt-tip); }
+  .mt-showcase-c1 { stroke: var(--mt-code-keyword); } .mt-showcase-c2 { stroke: var(--mt-code-string); }
+  .mt-showcase-c3 { stroke: var(--mt-code-function); } .mt-showcase-c4 { stroke: var(--mt-code-comment); }
+  .mt-showcase-caret { fill: var(--mt-sc-ink); }
+  .mt-showcase-panel { fill: var(--mt-card); stroke: var(--mt-border); }
+  .mt-showcase-skel { fill: var(--mt-muted-foreground); opacity: .35; }
+  .mt-showcase-s1 { stop-color: var(--mt-primary); } .mt-showcase-s2 { stop-color: var(--mt-brand); stop-opacity: .6; }
+  .mt-showcase-trail { fill: none; stroke: var(--mt-brand); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .5; }
+  .mt-showcase-chip { fill: var(--mt-primary); }
+  .mt-showcase-chipt { fill: var(--mt-primary-foreground); font: 600 12px mt(font-mono); }
+  .mt-showcase-cursor { fill: var(--mt-foreground); stroke: var(--mt-background); stroke-width: 1.2; }
+  .mt-showcase-sparks { fill: var(--mt-brand); }
+}

data/_sass/modootoday/kit/_button.scss

@@ -0,0 +1,8 @@
+// Shared link-button look for the optional layout bundles (same as the core CTA): @include mt-kit-button(".sel").
+@mixin mt-kit-button($sel, $primary: true) {
+  #{$sel} { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.25rem; border-radius: mt(radius);
+    border: 1px solid mt(border); background: mt(background); color: mt(foreground); font: inherit; font-size: .9375rem;
+    font-weight: 600; text-decoration: none; cursor: pointer; }
+  @if $primary { #{$sel}:first-child { background: mt(primary); border-color: mt(primary); color: mt(primary-foreground); } }
+  #{$sel}:focus-visible { outline: 2px solid mt(ring); outline-offset: 2px; }
+}

data/_sass/modootoday/layout/_page-meta.scss

@@ -0,0 +1,9 @@
+// Page meta line: last updated date and "Edit this page" link (modootoday/page-meta.html).
+@include mt-layer(layout) {
+  .mt-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: mt(space-section) 0 0; padding-top: 1.25rem;
+    border-top: 1px solid mt(border); font-size: .875rem; color: mt(muted-foreground); }
+  .mt-page-meta time { font-variant-numeric: tabular-nums; color: mt(foreground); }
+  .mt-page-meta a { color: mt(muted-foreground); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; border-radius: mt(radius); }
+  .mt-page-meta a:hover { color: mt(primary); text-decoration: underline; text-underline-offset: .2em; }
+  .mt-page-meta + .mt-pagination { margin-top: 1.25rem; padding-top: 0; border-top: 0; }
+}

data/_sass/modootoday/layout/_safe-area.scss

@@ -0,0 +1,9 @@
+// Safe area (iOS notch, home indicator, rounded corners) with viewport-fit=cover. Insets flow through
+// --mt-safe-* (used by the shell, reset and menus) so sites and tests can override them; --mt-gutter is
+// the page side padding before the inset (1rem below 48rem, in the shell).
+// env() is unquoted for Ruby Sass 3.7 (github-pages).
+@include mt-layer(layout) {
+  :root { --mt-gutter: 1.5rem;
+    --mt-safe-top: #{unquote("env(safe-area-inset-top)")}; --mt-safe-right: #{unquote("env(safe-area-inset-right)")};
+    --mt-safe-bottom: #{unquote("env(safe-area-inset-bottom)")}; --mt-safe-left: #{unquote("env(safe-area-inset-left)")}; }
+}