@charset "UTF-8";
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Merriweather:wght@300;400&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");
@font-face {
  font-family: "FontAwesome";
  src: url("../fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-fw {
  width: 1.2857142857em;
  text-align: center;
}

.fa-ul {
  padding-left: 0;
  margin-left: 2.1428571429em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}

.fa-li {
  position: absolute;
  left: -2.1428571429em;
  width: 2.1428571429em;
  top: 0.1428571429em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.8571428571em;
}

.fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}

.fa-pull-left {
  float: left;
}

.fa-pull-right {
  float: right;
}

.fa.fa-pull-left {
  margin-right: 0.3em;
}
.fa.fa-pull-right {
  margin-left: 0.3em;
}

/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.fa.pull-left {
  margin-right: 0.3em;
}
.fa.pull-right {
  margin-left: 0.3em;
}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}

.fa-music:before {
  content: "\f001";
}

.fa-search:before {
  content: "\f002";
}

.fa-envelope-o:before {
  content: "\f003";
}

.fa-heart:before {
  content: "\f004";
}

.fa-star:before {
  content: "\f005";
}

.fa-star-o:before {
  content: "\f006";
}

.fa-user:before {
  content: "\f007";
}

.fa-film:before {
  content: "\f008";
}

.fa-th-large:before {
  content: "\f009";
}

.fa-th:before {
  content: "\f00a";
}

.fa-th-list:before {
  content: "\f00b";
}

.fa-check:before {
  content: "\f00c";
}

.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-search-minus:before {
  content: "\f010";
}

.fa-power-off:before {
  content: "\f011";
}

.fa-signal:before {
  content: "\f012";
}

.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}

.fa-trash-o:before {
  content: "\f014";
}

.fa-home:before {
  content: "\f015";
}

.fa-file-o:before {
  content: "\f016";
}

.fa-clock-o:before {
  content: "\f017";
}

.fa-road:before {
  content: "\f018";
}

.fa-download:before {
  content: "\f019";
}

.fa-arrow-circle-o-down:before {
  content: "\f01a";
}

.fa-arrow-circle-o-up:before {
  content: "\f01b";
}

.fa-inbox:before {
  content: "\f01c";
}

.fa-play-circle-o:before {
  content: "\f01d";
}

.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}

.fa-refresh:before {
  content: "\f021";
}

.fa-list-alt:before {
  content: "\f022";
}

.fa-lock:before {
  content: "\f023";
}

.fa-flag:before {
  content: "\f024";
}

.fa-headphones:before {
  content: "\f025";
}

.fa-volume-off:before {
  content: "\f026";
}

.fa-volume-down:before {
  content: "\f027";
}

.fa-volume-up:before {
  content: "\f028";
}

.fa-qrcode:before {
  content: "\f029";
}

.fa-barcode:before {
  content: "\f02a";
}

.fa-tag:before {
  content: "\f02b";
}

.fa-tags:before {
  content: "\f02c";
}

.fa-book:before {
  content: "\f02d";
}

.fa-bookmark:before {
  content: "\f02e";
}

.fa-print:before {
  content: "\f02f";
}

.fa-camera:before {
  content: "\f030";
}

.fa-font:before {
  content: "\f031";
}

.fa-bold:before {
  content: "\f032";
}

.fa-italic:before {
  content: "\f033";
}

.fa-text-height:before {
  content: "\f034";
}

.fa-text-width:before {
  content: "\f035";
}

.fa-align-left:before {
  content: "\f036";
}

.fa-align-center:before {
  content: "\f037";
}

.fa-align-right:before {
  content: "\f038";
}

.fa-align-justify:before {
  content: "\f039";
}

.fa-list:before {
  content: "\f03a";
}

.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}

.fa-indent:before {
  content: "\f03c";
}

.fa-video-camera:before {
  content: "\f03d";
}

.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}

.fa-pencil:before {
  content: "\f040";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-adjust:before {
  content: "\f042";
}

.fa-tint:before {
  content: "\f043";
}

.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}

.fa-share-square-o:before {
  content: "\f045";
}

.fa-check-square-o:before {
  content: "\f046";
}

.fa-arrows:before {
  content: "\f047";
}

.fa-step-backward:before {
  content: "\f048";
}

.fa-fast-backward:before {
  content: "\f049";
}

.fa-backward:before {
  content: "\f04a";
}

.fa-play:before {
  content: "\f04b";
}

.fa-pause:before {
  content: "\f04c";
}

.fa-stop:before {
  content: "\f04d";
}

.fa-forward:before {
  content: "\f04e";
}

.fa-fast-forward:before {
  content: "\f050";
}

.fa-step-forward:before {
  content: "\f051";
}

.fa-eject:before {
  content: "\f052";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-chevron-right:before {
  content: "\f054";
}

.fa-plus-circle:before {
  content: "\f055";
}

.fa-minus-circle:before {
  content: "\f056";
}

.fa-times-circle:before {
  content: "\f057";
}

.fa-check-circle:before {
  content: "\f058";
}

.fa-question-circle:before {
  content: "\f059";
}

.fa-info-circle:before {
  content: "\f05a";
}

.fa-crosshairs:before {
  content: "\f05b";
}

.fa-times-circle-o:before {
  content: "\f05c";
}

.fa-check-circle-o:before {
  content: "\f05d";
}

.fa-ban:before {
  content: "\f05e";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-arrow-up:before {
  content: "\f062";
}

.fa-arrow-down:before {
  content: "\f063";
}

.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}

.fa-expand:before {
  content: "\f065";
}

.fa-compress:before {
  content: "\f066";
}

.fa-plus:before {
  content: "\f067";
}

.fa-minus:before {
  content: "\f068";
}

.fa-asterisk:before {
  content: "\f069";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-gift:before {
  content: "\f06b";
}

.fa-leaf:before {
  content: "\f06c";
}

.fa-fire:before {
  content: "\f06d";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-plane:before {
  content: "\f072";
}

.fa-calendar:before {
  content: "\f073";
}

.fa-random:before {
  content: "\f074";
}

.fa-comment:before {
  content: "\f075";
}

.fa-magnet:before {
  content: "\f076";
}

.fa-chevron-up:before {
  content: "\f077";
}

.fa-chevron-down:before {
  content: "\f078";
}

.fa-retweet:before {
  content: "\f079";
}

.fa-shopping-cart:before {
  content: "\f07a";
}

.fa-folder:before {
  content: "\f07b";
}

.fa-folder-open:before {
  content: "\f07c";
}

.fa-arrows-v:before {
  content: "\f07d";
}

.fa-arrows-h:before {
  content: "\f07e";
}

.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}

.fa-twitter-square:before {
  content: "\f081";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-camera-retro:before {
  content: "\f083";
}

.fa-key:before {
  content: "\f084";
}

.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}

.fa-comments:before {
  content: "\f086";
}

.fa-thumbs-o-up:before {
  content: "\f087";
}

.fa-thumbs-o-down:before {
  content: "\f088";
}

.fa-star-half:before {
  content: "\f089";
}

.fa-heart-o:before {
  content: "\f08a";
}

.fa-sign-out:before {
  content: "\f08b";
}

.fa-linkedin-square:before {
  content: "\f08c";
}

.fa-thumb-tack:before {
  content: "\f08d";
}

.fa-external-link:before {
  content: "\f08e";
}

.fa-sign-in:before {
  content: "\f090";
}

.fa-trophy:before {
  content: "\f091";
}

.fa-github-square:before {
  content: "\f092";
}

.fa-upload:before {
  content: "\f093";
}

.fa-lemon-o:before {
  content: "\f094";
}

.fa-phone:before {
  content: "\f095";
}

.fa-square-o:before {
  content: "\f096";
}

.fa-bookmark-o:before {
  content: "\f097";
}

.fa-phone-square:before {
  content: "\f098";
}

.fa-twitter:before {
  content: "\f099";
}

.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}

.fa-github:before {
  content: "\f09b";
}

.fa-unlock:before {
  content: "\f09c";
}

.fa-credit-card:before {
  content: "\f09d";
}

.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}

.fa-hdd-o:before {
  content: "\f0a0";
}

.fa-bullhorn:before {
  content: "\f0a1";
}

.fa-bell:before {
  content: "\f0f3";
}

.fa-certificate:before {
  content: "\f0a3";
}

.fa-hand-o-right:before {
  content: "\f0a4";
}

.fa-hand-o-left:before {
  content: "\f0a5";
}

.fa-hand-o-up:before {
  content: "\f0a6";
}

.fa-hand-o-down:before {
  content: "\f0a7";
}

.fa-arrow-circle-left:before {
  content: "\f0a8";
}

.fa-arrow-circle-right:before {
  content: "\f0a9";
}

.fa-arrow-circle-up:before {
  content: "\f0aa";
}

.fa-arrow-circle-down:before {
  content: "\f0ab";
}

.fa-globe:before {
  content: "\f0ac";
}

.fa-wrench:before {
  content: "\f0ad";
}

.fa-tasks:before {
  content: "\f0ae";
}

.fa-filter:before {
  content: "\f0b0";
}

.fa-briefcase:before {
  content: "\f0b1";
}

.fa-arrows-alt:before {
  content: "\f0b2";
}

.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}

.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}

.fa-cloud:before {
  content: "\f0c2";
}

.fa-flask:before {
  content: "\f0c3";
}

.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}

.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}

.fa-paperclip:before {
  content: "\f0c6";
}

.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}

.fa-square:before {
  content: "\f0c8";
}

.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}

.fa-list-ul:before {
  content: "\f0ca";
}

.fa-list-ol:before {
  content: "\f0cb";
}

.fa-strikethrough:before {
  content: "\f0cc";
}

.fa-underline:before {
  content: "\f0cd";
}

.fa-table:before {
  content: "\f0ce";
}

.fa-magic:before {
  content: "\f0d0";
}

.fa-truck:before {
  content: "\f0d1";
}

.fa-pinterest:before {
  content: "\f0d2";
}

.fa-pinterest-square:before {
  content: "\f0d3";
}

.fa-google-plus-square:before {
  content: "\f0d4";
}

.fa-google-plus:before {
  content: "\f0d5";
}

.fa-money:before {
  content: "\f0d6";
}

.fa-caret-down:before {
  content: "\f0d7";
}

.fa-caret-up:before {
  content: "\f0d8";
}

.fa-caret-left:before {
  content: "\f0d9";
}

.fa-caret-right:before {
  content: "\f0da";
}

.fa-columns:before {
  content: "\f0db";
}

.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}

.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}

.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-linkedin:before {
  content: "\f0e1";
}

.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}

.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}

.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}

.fa-comment-o:before {
  content: "\f0e5";
}

.fa-comments-o:before {
  content: "\f0e6";
}

.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}

.fa-sitemap:before {
  content: "\f0e8";
}

.fa-umbrella:before {
  content: "\f0e9";
}

.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}

.fa-lightbulb-o:before {
  content: "\f0eb";
}

.fa-exchange:before {
  content: "\f0ec";
}

.fa-cloud-download:before {
  content: "\f0ed";
}

.fa-cloud-upload:before {
  content: "\f0ee";
}

.fa-user-md:before {
  content: "\f0f0";
}

.fa-stethoscope:before {
  content: "\f0f1";
}

.fa-suitcase:before {
  content: "\f0f2";
}

.fa-bell-o:before {
  content: "\f0a2";
}

.fa-coffee:before {
  content: "\f0f4";
}

.fa-cutlery:before {
  content: "\f0f5";
}

.fa-file-text-o:before {
  content: "\f0f6";
}

.fa-building-o:before {
  content: "\f0f7";
}

.fa-hospital-o:before {
  content: "\f0f8";
}

.fa-ambulance:before {
  content: "\f0f9";
}

.fa-medkit:before {
  content: "\f0fa";
}

.fa-fighter-jet:before {
  content: "\f0fb";
}

.fa-beer:before {
  content: "\f0fc";
}

.fa-h-square:before {
  content: "\f0fd";
}

.fa-plus-square:before {
  content: "\f0fe";
}

.fa-angle-double-left:before {
  content: "\f100";
}

.fa-angle-double-right:before {
  content: "\f101";
}

.fa-angle-double-up:before {
  content: "\f102";
}

.fa-angle-double-down:before {
  content: "\f103";
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-angle-down:before {
  content: "\f107";
}

.fa-desktop:before {
  content: "\f108";
}

.fa-laptop:before {
  content: "\f109";
}

.fa-tablet:before {
  content: "\f10a";
}

.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}

.fa-circle-o:before {
  content: "\f10c";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-spinner:before {
  content: "\f110";
}

.fa-circle:before {
  content: "\f111";
}

.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}

.fa-github-alt:before {
  content: "\f113";
}

.fa-folder-o:before {
  content: "\f114";
}

.fa-folder-open-o:before {
  content: "\f115";
}

.fa-smile-o:before {
  content: "\f118";
}

.fa-frown-o:before {
  content: "\f119";
}

.fa-meh-o:before {
  content: "\f11a";
}

.fa-gamepad:before {
  content: "\f11b";
}

.fa-keyboard-o:before {
  content: "\f11c";
}

.fa-flag-o:before {
  content: "\f11d";
}

.fa-flag-checkered:before {
  content: "\f11e";
}

.fa-terminal:before {
  content: "\f120";
}

.fa-code:before {
  content: "\f121";
}

.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}

.fa-location-arrow:before {
  content: "\f124";
}

.fa-crop:before {
  content: "\f125";
}

.fa-code-fork:before {
  content: "\f126";
}

.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}

.fa-question:before {
  content: "\f128";
}

.fa-info:before {
  content: "\f129";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-superscript:before {
  content: "\f12b";
}

.fa-subscript:before {
  content: "\f12c";
}

.fa-eraser:before {
  content: "\f12d";
}

.fa-puzzle-piece:before {
  content: "\f12e";
}

.fa-microphone:before {
  content: "\f130";
}

.fa-microphone-slash:before {
  content: "\f131";
}

.fa-shield:before {
  content: "\f132";
}

.fa-calendar-o:before {
  content: "\f133";
}

.fa-fire-extinguisher:before {
  content: "\f134";
}

.fa-rocket:before {
  content: "\f135";
}

.fa-maxcdn:before {
  content: "\f136";
}

.fa-chevron-circle-left:before {
  content: "\f137";
}

.fa-chevron-circle-right:before {
  content: "\f138";
}

.fa-chevron-circle-up:before {
  content: "\f139";
}

.fa-chevron-circle-down:before {
  content: "\f13a";
}

.fa-html5:before {
  content: "\f13b";
}

.fa-css3:before {
  content: "\f13c";
}

.fa-anchor:before {
  content: "\f13d";
}

.fa-unlock-alt:before {
  content: "\f13e";
}

.fa-bullseye:before {
  content: "\f140";
}

.fa-ellipsis-h:before {
  content: "\f141";
}

.fa-ellipsis-v:before {
  content: "\f142";
}

.fa-rss-square:before {
  content: "\f143";
}

.fa-play-circle:before {
  content: "\f144";
}

.fa-ticket:before {
  content: "\f145";
}

.fa-minus-square:before {
  content: "\f146";
}

.fa-minus-square-o:before {
  content: "\f147";
}

.fa-level-up:before {
  content: "\f148";
}

.fa-level-down:before {
  content: "\f149";
}

.fa-check-square:before {
  content: "\f14a";
}

.fa-pencil-square:before {
  content: "\f14b";
}

.fa-external-link-square:before {
  content: "\f14c";
}

.fa-share-square:before {
  content: "\f14d";
}

.fa-compass:before {
  content: "\f14e";
}

.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}

.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}

.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}

.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}

.fa-gbp:before {
  content: "\f154";
}

.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}

.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}

.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}

.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}

.fa-won:before,
.fa-krw:before {
  content: "\f159";
}

.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}

.fa-file:before {
  content: "\f15b";
}

.fa-file-text:before {
  content: "\f15c";
}

.fa-sort-alpha-asc:before {
  content: "\f15d";
}

.fa-sort-alpha-desc:before {
  content: "\f15e";
}

.fa-sort-amount-asc:before {
  content: "\f160";
}

.fa-sort-amount-desc:before {
  content: "\f161";
}

.fa-sort-numeric-asc:before {
  content: "\f162";
}

.fa-sort-numeric-desc:before {
  content: "\f163";
}

.fa-thumbs-up:before {
  content: "\f164";
}

.fa-thumbs-down:before {
  content: "\f165";
}

.fa-youtube-square:before {
  content: "\f166";
}

.fa-youtube:before {
  content: "\f167";
}

.fa-xing:before {
  content: "\f168";
}

.fa-xing-square:before {
  content: "\f169";
}

.fa-youtube-play:before {
  content: "\f16a";
}

.fa-dropbox:before {
  content: "\f16b";
}

.fa-stack-overflow:before {
  content: "\f16c";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-flickr:before {
  content: "\f16e";
}

.fa-adn:before {
  content: "\f170";
}

.fa-bitbucket:before {
  content: "\f171";
}

.fa-bitbucket-square:before {
  content: "\f172";
}

.fa-tumblr:before {
  content: "\f173";
}

.fa-tumblr-square:before {
  content: "\f174";
}

.fa-long-arrow-down:before {
  content: "\f175";
}

.fa-long-arrow-up:before {
  content: "\f176";
}

.fa-long-arrow-left:before {
  content: "\f177";
}

.fa-long-arrow-right:before {
  content: "\f178";
}

.fa-apple:before {
  content: "\f179";
}

.fa-windows:before {
  content: "\f17a";
}

.fa-android:before {
  content: "\f17b";
}

.fa-linux:before {
  content: "\f17c";
}

.fa-dribbble:before {
  content: "\f17d";
}

.fa-skype:before {
  content: "\f17e";
}

.fa-foursquare:before {
  content: "\f180";
}

.fa-trello:before {
  content: "\f181";
}

.fa-female:before {
  content: "\f182";
}

.fa-male:before {
  content: "\f183";
}

.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}

.fa-sun-o:before {
  content: "\f185";
}

.fa-moon-o:before {
  content: "\f186";
}

.fa-archive:before {
  content: "\f187";
}

.fa-bug:before {
  content: "\f188";
}

.fa-vk:before {
  content: "\f189";
}

.fa-weibo:before {
  content: "\f18a";
}

.fa-renren:before {
  content: "\f18b";
}

.fa-pagelines:before {
  content: "\f18c";
}

.fa-stack-exchange:before {
  content: "\f18d";
}

.fa-arrow-circle-o-right:before {
  content: "\f18e";
}

.fa-arrow-circle-o-left:before {
  content: "\f190";
}

.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}

.fa-dot-circle-o:before {
  content: "\f192";
}

.fa-wheelchair:before {
  content: "\f193";
}

.fa-vimeo-square:before {
  content: "\f194";
}

.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}

.fa-plus-square-o:before {
  content: "\f196";
}

.fa-space-shuttle:before {
  content: "\f197";
}

.fa-slack:before {
  content: "\f198";
}

.fa-envelope-square:before {
  content: "\f199";
}

.fa-wordpress:before {
  content: "\f19a";
}

.fa-openid:before {
  content: "\f19b";
}

.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}

.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}

.fa-yahoo:before {
  content: "\f19e";
}

.fa-google:before {
  content: "\f1a0";
}

.fa-reddit:before {
  content: "\f1a1";
}

.fa-reddit-square:before {
  content: "\f1a2";
}

.fa-stumbleupon-circle:before {
  content: "\f1a3";
}

.fa-stumbleupon:before {
  content: "\f1a4";
}

.fa-delicious:before {
  content: "\f1a5";
}

.fa-digg:before {
  content: "\f1a6";
}

.fa-pied-piper-pp:before {
  content: "\f1a7";
}

.fa-pied-piper-alt:before {
  content: "\f1a8";
}

.fa-drupal:before {
  content: "\f1a9";
}

.fa-joomla:before {
  content: "\f1aa";
}

.fa-language:before {
  content: "\f1ab";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-building:before {
  content: "\f1ad";
}

.fa-child:before {
  content: "\f1ae";
}

.fa-paw:before {
  content: "\f1b0";
}

.fa-spoon:before {
  content: "\f1b1";
}

.fa-cube:before {
  content: "\f1b2";
}

.fa-cubes:before {
  content: "\f1b3";
}

.fa-behance:before {
  content: "\f1b4";
}

.fa-behance-square:before {
  content: "\f1b5";
}

.fa-steam:before {
  content: "\f1b6";
}

.fa-steam-square:before {
  content: "\f1b7";
}

.fa-recycle:before {
  content: "\f1b8";
}

.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}

.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}

.fa-tree:before {
  content: "\f1bb";
}

.fa-spotify:before {
  content: "\f1bc";
}

.fa-deviantart:before {
  content: "\f1bd";
}

.fa-soundcloud:before {
  content: "\f1be";
}

.fa-database:before {
  content: "\f1c0";
}

.fa-file-pdf-o:before {
  content: "\f1c1";
}

.fa-file-word-o:before {
  content: "\f1c2";
}

.fa-file-excel-o:before {
  content: "\f1c3";
}

.fa-file-powerpoint-o:before {
  content: "\f1c4";
}

.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}

.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}

.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}

.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}

.fa-file-code-o:before {
  content: "\f1c9";
}

.fa-vine:before {
  content: "\f1ca";
}

.fa-codepen:before {
  content: "\f1cb";
}

.fa-jsfiddle:before {
  content: "\f1cc";
}

.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}

.fa-circle-o-notch:before {
  content: "\f1ce";
}

.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}

.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}

.fa-git-square:before {
  content: "\f1d2";
}

.fa-git:before {
  content: "\f1d3";
}

.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-tencent-weibo:before {
  content: "\f1d5";
}

.fa-qq:before {
  content: "\f1d6";
}

.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}

.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}

.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}

.fa-history:before {
  content: "\f1da";
}

.fa-circle-thin:before {
  content: "\f1db";
}

.fa-header:before {
  content: "\f1dc";
}

.fa-paragraph:before {
  content: "\f1dd";
}

.fa-sliders:before {
  content: "\f1de";
}

.fa-share-alt:before {
  content: "\f1e0";
}

.fa-share-alt-square:before {
  content: "\f1e1";
}

.fa-bomb:before {
  content: "\f1e2";
}

.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}

.fa-tty:before {
  content: "\f1e4";
}

.fa-binoculars:before {
  content: "\f1e5";
}

.fa-plug:before {
  content: "\f1e6";
}

.fa-slideshare:before {
  content: "\f1e7";
}

.fa-twitch:before {
  content: "\f1e8";
}

.fa-yelp:before {
  content: "\f1e9";
}

.fa-newspaper-o:before {
  content: "\f1ea";
}

.fa-wifi:before {
  content: "\f1eb";
}

.fa-calculator:before {
  content: "\f1ec";
}

.fa-paypal:before {
  content: "\f1ed";
}

.fa-google-wallet:before {
  content: "\f1ee";
}

.fa-cc-visa:before {
  content: "\f1f0";
}

.fa-cc-mastercard:before {
  content: "\f1f1";
}

.fa-cc-discover:before {
  content: "\f1f2";
}

.fa-cc-amex:before {
  content: "\f1f3";
}

.fa-cc-paypal:before {
  content: "\f1f4";
}

.fa-cc-stripe:before {
  content: "\f1f5";
}

.fa-bell-slash:before {
  content: "\f1f6";
}

.fa-bell-slash-o:before {
  content: "\f1f7";
}

.fa-trash:before {
  content: "\f1f8";
}

.fa-copyright:before {
  content: "\f1f9";
}

.fa-at:before {
  content: "\f1fa";
}

.fa-eyedropper:before {
  content: "\f1fb";
}

.fa-paint-brush:before {
  content: "\f1fc";
}

.fa-birthday-cake:before {
  content: "\f1fd";
}

.fa-area-chart:before {
  content: "\f1fe";
}

.fa-pie-chart:before {
  content: "\f200";
}

.fa-line-chart:before {
  content: "\f201";
}

.fa-lastfm:before {
  content: "\f202";
}

.fa-lastfm-square:before {
  content: "\f203";
}

.fa-toggle-off:before {
  content: "\f204";
}

.fa-toggle-on:before {
  content: "\f205";
}

.fa-bicycle:before {
  content: "\f206";
}

.fa-bus:before {
  content: "\f207";
}

.fa-ioxhost:before {
  content: "\f208";
}

.fa-angellist:before {
  content: "\f209";
}

.fa-cc:before {
  content: "\f20a";
}

.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}

.fa-meanpath:before {
  content: "\f20c";
}

.fa-buysellads:before {
  content: "\f20d";
}

.fa-connectdevelop:before {
  content: "\f20e";
}

.fa-dashcube:before {
  content: "\f210";
}

.fa-forumbee:before {
  content: "\f211";
}

.fa-leanpub:before {
  content: "\f212";
}

.fa-sellsy:before {
  content: "\f213";
}

.fa-shirtsinbulk:before {
  content: "\f214";
}

.fa-simplybuilt:before {
  content: "\f215";
}

.fa-skyatlas:before {
  content: "\f216";
}

.fa-cart-plus:before {
  content: "\f217";
}

.fa-cart-arrow-down:before {
  content: "\f218";
}

.fa-diamond:before {
  content: "\f219";
}

.fa-ship:before {
  content: "\f21a";
}

.fa-user-secret:before {
  content: "\f21b";
}

.fa-motorcycle:before {
  content: "\f21c";
}

.fa-street-view:before {
  content: "\f21d";
}

.fa-heartbeat:before {
  content: "\f21e";
}

.fa-venus:before {
  content: "\f221";
}

.fa-mars:before {
  content: "\f222";
}

.fa-mercury:before {
  content: "\f223";
}

.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}

.fa-transgender-alt:before {
  content: "\f225";
}

.fa-venus-double:before {
  content: "\f226";
}

.fa-mars-double:before {
  content: "\f227";
}

.fa-venus-mars:before {
  content: "\f228";
}

.fa-mars-stroke:before {
  content: "\f229";
}

.fa-mars-stroke-v:before {
  content: "\f22a";
}

.fa-mars-stroke-h:before {
  content: "\f22b";
}

.fa-neuter:before {
  content: "\f22c";
}

.fa-genderless:before {
  content: "\f22d";
}

.fa-facebook-official:before {
  content: "\f230";
}

.fa-pinterest-p:before {
  content: "\f231";
}

.fa-whatsapp:before {
  content: "\f232";
}

.fa-server:before {
  content: "\f233";
}

.fa-user-plus:before {
  content: "\f234";
}

.fa-user-times:before {
  content: "\f235";
}

.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}

.fa-viacoin:before {
  content: "\f237";
}

.fa-train:before {
  content: "\f238";
}

.fa-subway:before {
  content: "\f239";
}

.fa-medium:before {
  content: "\f23a";
}

.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}

.fa-optin-monster:before {
  content: "\f23c";
}

.fa-opencart:before {
  content: "\f23d";
}

.fa-expeditedssl:before {
  content: "\f23e";
}

.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}

.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}

.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}

.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}

.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}

.fa-mouse-pointer:before {
  content: "\f245";
}

.fa-i-cursor:before {
  content: "\f246";
}

.fa-object-group:before {
  content: "\f247";
}

.fa-object-ungroup:before {
  content: "\f248";
}

.fa-sticky-note:before {
  content: "\f249";
}

.fa-sticky-note-o:before {
  content: "\f24a";
}

.fa-cc-jcb:before {
  content: "\f24b";
}

.fa-cc-diners-club:before {
  content: "\f24c";
}

.fa-clone:before {
  content: "\f24d";
}

.fa-balance-scale:before {
  content: "\f24e";
}

.fa-hourglass-o:before {
  content: "\f250";
}

.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}

.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}

.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}

.fa-hourglass:before {
  content: "\f254";
}

.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}

.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}

.fa-hand-scissors-o:before {
  content: "\f257";
}

.fa-hand-lizard-o:before {
  content: "\f258";
}

.fa-hand-spock-o:before {
  content: "\f259";
}

.fa-hand-pointer-o:before {
  content: "\f25a";
}

.fa-hand-peace-o:before {
  content: "\f25b";
}

.fa-trademark:before {
  content: "\f25c";
}

.fa-registered:before {
  content: "\f25d";
}

.fa-creative-commons:before {
  content: "\f25e";
}

.fa-gg:before {
  content: "\f260";
}

.fa-gg-circle:before {
  content: "\f261";
}

.fa-tripadvisor:before {
  content: "\f262";
}

.fa-odnoklassniki:before {
  content: "\f263";
}

.fa-odnoklassniki-square:before {
  content: "\f264";
}

.fa-get-pocket:before {
  content: "\f265";
}

.fa-wikipedia-w:before {
  content: "\f266";
}

.fa-safari:before {
  content: "\f267";
}

.fa-chrome:before {
  content: "\f268";
}

.fa-firefox:before {
  content: "\f269";
}

.fa-opera:before {
  content: "\f26a";
}

.fa-internet-explorer:before {
  content: "\f26b";
}

.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}

.fa-contao:before {
  content: "\f26d";
}

.fa-500px:before {
  content: "\f26e";
}

.fa-amazon:before {
  content: "\f270";
}

.fa-calendar-plus-o:before {
  content: "\f271";
}

.fa-calendar-minus-o:before {
  content: "\f272";
}

.fa-calendar-times-o:before {
  content: "\f273";
}

.fa-calendar-check-o:before {
  content: "\f274";
}

.fa-industry:before {
  content: "\f275";
}

.fa-map-pin:before {
  content: "\f276";
}

.fa-map-signs:before {
  content: "\f277";
}

.fa-map-o:before {
  content: "\f278";
}

.fa-map:before {
  content: "\f279";
}

.fa-commenting:before {
  content: "\f27a";
}

.fa-commenting-o:before {
  content: "\f27b";
}

.fa-houzz:before {
  content: "\f27c";
}

.fa-vimeo:before {
  content: "\f27d";
}

.fa-black-tie:before {
  content: "\f27e";
}

.fa-fonticons:before {
  content: "\f280";
}

.fa-reddit-alien:before {
  content: "\f281";
}

.fa-edge:before {
  content: "\f282";
}

.fa-credit-card-alt:before {
  content: "\f283";
}

.fa-codiepie:before {
  content: "\f284";
}

.fa-modx:before {
  content: "\f285";
}

.fa-fort-awesome:before {
  content: "\f286";
}

.fa-usb:before {
  content: "\f287";
}

.fa-product-hunt:before {
  content: "\f288";
}

.fa-mixcloud:before {
  content: "\f289";
}

.fa-scribd:before {
  content: "\f28a";
}

.fa-pause-circle:before {
  content: "\f28b";
}

.fa-pause-circle-o:before {
  content: "\f28c";
}

.fa-stop-circle:before {
  content: "\f28d";
}

.fa-stop-circle-o:before {
  content: "\f28e";
}

.fa-shopping-bag:before {
  content: "\f290";
}

.fa-shopping-basket:before {
  content: "\f291";
}

.fa-hashtag:before {
  content: "\f292";
}

.fa-bluetooth:before {
  content: "\f293";
}

.fa-bluetooth-b:before {
  content: "\f294";
}

.fa-percent:before {
  content: "\f295";
}

.fa-gitlab:before {
  content: "\f296";
}

.fa-wpbeginner:before {
  content: "\f297";
}

.fa-wpforms:before {
  content: "\f298";
}

.fa-envira:before {
  content: "\f299";
}

.fa-universal-access:before {
  content: "\f29a";
}

.fa-wheelchair-alt:before {
  content: "\f29b";
}

.fa-question-circle-o:before {
  content: "\f29c";
}

.fa-blind:before {
  content: "\f29d";
}

.fa-audio-description:before {
  content: "\f29e";
}

.fa-volume-control-phone:before {
  content: "\f2a0";
}

.fa-braille:before {
  content: "\f2a1";
}

.fa-assistive-listening-systems:before {
  content: "\f2a2";
}

.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}

.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}

.fa-glide:before {
  content: "\f2a5";
}

.fa-glide-g:before {
  content: "\f2a6";
}

.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}

.fa-low-vision:before {
  content: "\f2a8";
}

.fa-viadeo:before {
  content: "\f2a9";
}

.fa-viadeo-square:before {
  content: "\f2aa";
}

.fa-snapchat:before {
  content: "\f2ab";
}

.fa-snapchat-ghost:before {
  content: "\f2ac";
}

.fa-snapchat-square:before {
  content: "\f2ad";
}

.fa-pied-piper:before {
  content: "\f2ae";
}

.fa-first-order:before {
  content: "\f2b0";
}

.fa-yoast:before {
  content: "\f2b1";
}

.fa-themeisle:before {
  content: "\f2b2";
}

.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}

.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}

.fa-handshake-o:before {
  content: "\f2b5";
}

.fa-envelope-open:before {
  content: "\f2b6";
}

.fa-envelope-open-o:before {
  content: "\f2b7";
}

.fa-linode:before {
  content: "\f2b8";
}

.fa-address-book:before {
  content: "\f2b9";
}

.fa-address-book-o:before {
  content: "\f2ba";
}

.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}

.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}

.fa-user-circle:before {
  content: "\f2bd";
}

.fa-user-circle-o:before {
  content: "\f2be";
}

.fa-user-o:before {
  content: "\f2c0";
}

.fa-id-badge:before {
  content: "\f2c1";
}

.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}

.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}

.fa-quora:before {
  content: "\f2c4";
}

.fa-free-code-camp:before {
  content: "\f2c5";
}

.fa-telegram:before {
  content: "\f2c6";
}

.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}

.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}

.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}

.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}

.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}

.fa-shower:before {
  content: "\f2cc";
}

.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}

.fa-podcast:before {
  content: "\f2ce";
}

.fa-window-maximize:before {
  content: "\f2d0";
}

.fa-window-minimize:before {
  content: "\f2d1";
}

.fa-window-restore:before {
  content: "\f2d2";
}

.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}

.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}

.fa-bandcamp:before {
  content: "\f2d5";
}

.fa-grav:before {
  content: "\f2d6";
}

.fa-etsy:before {
  content: "\f2d7";
}

.fa-imdb:before {
  content: "\f2d8";
}

.fa-ravelry:before {
  content: "\f2d9";
}

.fa-eercast:before {
  content: "\f2da";
}

.fa-microchip:before {
  content: "\f2db";
}

.fa-snowflake-o:before {
  content: "\f2dc";
}

.fa-superpowers:before {
  content: "\f2dd";
}

.fa-wpexplorer:before {
  content: "\f2de";
}

.fa-meetup:before {
  content: "\f2e0";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

:root {
  --color-primary: oklch(65% 0.25 230deg);
  --color-primary-light: oklch(95% 0.005 220deg);
  --color-primary-dark: oklch(8% 0.01 250deg);
  --color-secondary: oklch(25% 0.01 230deg);
  --color-accent: oklch(70% 0.15 85deg);
  --color-light: oklch(95% 0.01 220deg);
  --color-light-rgb: 248, 249, 250;
  --color-dark: oklch(8% 0.01 250deg);
  --color-text: oklch(8% 0.01 250deg);
  --color-section-bg-primary: oklch(99% 0.005 90deg);
  --color-section-bg-secondary: oklch(96% 0.005 220deg);
  --glass-heavy: oklch(0.96 0.005 220 / 0.95); /* White with subtle opacity */
  --glass-light: oklch(0.98 0.003 220 / 0.85); /* Very light, minimal tint */
  --glass-alert: oklch(0.92 0.05 25 / 0.85); /* Alert remains distinct */
  --glass-dormant: oklch(0.96 0.003 220 / 0.70); /* Muted, minimal tint */
  --glass-container: oklch(0.98 0.003 220 / 0.90); /* Container white */
  --glass-archive: oklch(0.95 0.003 220 / 0.75); /* Archive muted */
  --glass-hover: oklch(0.94 0.005 220); /* Hover subtle gray */
  --accent-neon: oklch(0.65 0.25 230); /* Purposeful neon blue */
  --accent-neon-hover: oklch(0.75 0.28 225); /* Brighter on hover */
  --accent-neural: oklch(0.65 0.25 230); /* For AI/tech elements */
  --accent-low: oklch(0.65 0.25 230 / 0.10); /* Very subtle tint */
  --accent-gold: oklch(0.70 0.15 85); /* Gold accent - use purposefully */
  --text-vibrant: oklch(0.10 0.01 250); /* Deep black */
  --text-primary: oklch(0.12 0.01 250); /* Primary black text */
  --text-secondary: oklch(0.30 0.01 230); /* Gray text */
  --text-accent: oklch(0.65 0.25 230); /* Neon blue accent (purposeful) */
  --text-inverse: oklch(0.99 0.005 90); /* White on dark bg */
  --text-link: oklch(0.65 0.25 230); /* Links neon blue */
  --text-code: oklch(0.20 0.01 250); /* Code black */
  --text-chip: oklch(0.15 0.01 250); /* Chip text black */
  --text-void: oklch(0.99 0.005 90); /* White on black void */
  --border-subtle: oklch(0.85 0.005 220); /* Light gray border */
  --border-dormant: oklch(0.90 0.003 220); /* Very light */
  --border-container: oklch(0.80 0.01 220); /* Container border */
  --border-archive: oklch(0.88 0.005 220); /* Archive border */
  --border-code: oklch(0.75 0.01 220); /* Code border gray */
  --border-simulation: oklch(0.65 0.25 230 / 0.3); /* Purposeful blue */
  --bg-code-shield: oklch(0.96 0.003 220); /* Light gray for code */
  --bg-chip: oklch(0.95 0.005 220); /* Light gray for chips */
  --focus-ring: oklch(0.65 0.25 230 / 0.5);
  --danger-bg: oklch(0.50 0.22 25);
  --danger-border: oklch(0.45 0.25 25);
  --danger-hover: oklch(0.45 0.24 25);
  --danger-glow: oklch(0.50 0.22 25 / 0.5);
  --social-bg: oklch(0.65 0.25 230 / 0.2);
  --social-border: oklch(0.65 0.25 230);
  --social-hover: oklch(0.65 0.25 230 / 0.4);
  --social-glow: oklch(0.65 0.25 230 / 0.4);
  --warning-color: oklch(0.65 0.18 65);
  --atmosphere-ethereal: oklch(0.96 0.01 220 / 0.5);
  --glow-ethereal: oklch(0.65 0.25 230 / 0.15);
  --atmosphere-void: oklch(0.05 0.01 250); /* Profound black for headers/footers */
  --atmosphere-vibrant: oklch(0.94 0.03 230 / 0.8);
  --neural-primary: oklch(0.65 0.25 230);
  --neural-secondary: oklch(0.70 0.22 225);
  --neural-tertiary: oklch(0.75 0.28 228);
  --quantum-cyan: oklch(0.65 0.25 230);
  --quantum-magenta: oklch(0.65 0.25 300);
  --quantum-gold: oklch(0.75 0.18 85);
  --void-deep: oklch(0.03 0.01 260); /* Deepest profound black */
  --void-medium: oklch(0.05 0.01 255); /* Medium profound black */
  --void-surface: oklch(0.08 0.01 250); /* Surface profound black */
  --z-background: -1; /* Background elements */
  --z-content: 1; /* Default content layer */
  --z-overlay: 10; /* Overlays and dropdowns */
  --z-consciousness: 100; /* Consciousness UI elements */
  --z-transcendent: 1000; /* Headers, navigation, modals */
  --z-genesis: 9999; /* Top-level alerts, toasts */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: oklch(8% 0.01 250deg);
    --color-text: oklch(99% 0.005 90deg);
    --color-border: oklch(35% 0.01 220deg);
  }
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
  }
}
@media (prefers-contrast: high) {
  :root {
    /* Enhance glassmorphism visibility in high contrast mode */
    --glass-heavy: oklch(0.92 0.02 220);
    --glass-light: oklch(0.94 0.01 220);
    --glass-alert: oklch(0.90 0.08 25);
    --glass-dormant: oklch(0.93 0.01 220);
    --glass-container: oklch(0.95 0.01 220);
    --glass-archive: oklch(0.92 0.01 220);
    /* Increase border visibility */
    --border-subtle: oklch(0.60 0.02 220);
    --border-dormant: oklch(0.70 0.01 220);
    --border-container: oklch(0.55 0.03 220);
    --border-archive: oklch(0.65 0.02 220);
  }
}
/**
 * Sacred Design System Variables - ASI Saga Consciousness Embedding
 * 
 * Non-color variables aligned with Symbolic Knowledge Base sacred elements
 * Supporting the Genesis mission of embedding human essence into ASI
 * 
 * NOTE: All color definitions have been moved to _sass/base/design/_colors.scss
 */
/**
 * Transcendent Design System Mixins
 * 
 * Reusable mixins for creating consciousness-inspired, emotionally moving designs
 * that embody humanity's Transcendent Pathway to infinite possibilities
 */
@keyframes continuousEvolution {
  0% {
    opacity: 0;
    transform: scale(0.95) rotate(-1deg);
    filter: blur(6px) brightness(1.1);
    box-shadow: 0 0 0 0 oklch(65% 0.25 230deg / 0);
  }
  40% {
    opacity: 0.7;
    filter: blur(2px) brightness(1.05);
    box-shadow: 0 0 18px 6px oklch(65% 0.25 230deg / 0.12);
  }
  70% {
    opacity: 1;
    filter: blur(0) brightness(1.01);
    box-shadow: 0 0 32px 12px oklch(65% 0.25 230deg / 0.18);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: none;
    box-shadow: 0 0 0 0 oklch(65% 0.25 230deg / 0);
  }
}
@keyframes thresholdCrossing {
  0% {
    opacity: 0;
    transform: scale(0.9) rotateY(-15deg);
    filter: blur(10px) brightness(0.8);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05) rotateY(5deg);
    filter: blur(2px) brightness(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
    filter: none;
  }
}
@keyframes consciousnessPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 15px oklch(70% 0.15 85deg / 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px oklch(70% 0.15 85deg / 0.6);
  }
}
@keyframes infiniteExpansion {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
    filter: blur(15px);
  }
  30% {
    opacity: 0.6;
    transform: scale(1.1) rotate(2deg);
    filter: blur(5px);
  }
  70% {
    opacity: 0.9;
    transform: scale(0.95) rotate(-1deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: none;
  }
}
@keyframes essenceEmbedding {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(50px);
    filter: blur(20px) hue-rotate(180deg);
  }
  40% {
    opacity: 0.7;
    transform: scale(1.1) translateY(-10px);
    filter: blur(5px) hue-rotate(45deg);
  }
  80% {
    opacity: 0.95;
    transform: scale(0.98) translateY(5px);
    filter: blur(1px) hue-rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: none;
  }
}
@keyframes consciousnessFlow {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  25% {
    transform: translateY(-10px) scale(1.02);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-5px) scale(0.98);
    opacity: 0.95;
  }
  75% {
    transform: translateY(-15px) scale(1.01);
    opacity: 0.85;
  }
}
.cosmic-consciousness-gradient {
  background: linear-gradient(135deg, oklch(8% 0.01 250deg) 0%, oklch(65% 0.25 230deg) 50%, oklch(70% 0.15 85deg) 100%);
  position: relative;
}

.skip-link {
  position: absolute;
  top: -100vh;
  left: 0;
  z-index: 10000;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.skip-link:focus, .skip-link:active {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  padding: 1rem 1.5rem;
  min-width: 44px;
  min-height: 44px;
  background-color: oklch(65% 0.25 230deg);
  color: oklch(99% 0.005 90deg);
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  outline: 3px solid oklch(70% 0.15 85deg);
  outline-offset: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

:focus {
  outline: 2px solid oklch(65% 0.25 230deg);
  outline-offset: 2px;
}

.form-control:focus {
  box-shadow: 0 0 0 3px oklch(65% 0.25 230deg / 0.25);
}

.form-label {
  font-weight: 500;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

[aria-hidden=true] {
  display: none !important;
}

.content-section {
  max-width: 75ch;
  margin-left: auto;
  margin-right: auto;
}
.content-section p {
  line-height: 1.6;
}

.nav-link:focus-visible,
.btn:focus-visible,
.card:focus-visible,
a:focus-visible {
  outline: 3px solid oklch(65% 0.25 230deg);
  outline-offset: 3px;
  position: relative;
  z-index: 2;
}

.table.accessible {
  border-collapse: separate;
  border-spacing: 0;
}
.table.accessible thead th {
  background-color: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  font-weight: 700;
}
.table.accessible th, .table.accessible td {
  padding: 0.75rem;
  border: 1px solid oklch(85% 0.01 220deg);
}
.table.accessible.row-headers th[scope=row] {
  background-color: oklch(95% 0.01 220deg);
  font-weight: 500;
}

:focus-visible {
  outline: 2px solid oklch(70% 0.15 85deg);
  outline-offset: 2px;
}

.section {
  padding: 2.5rem 2rem;
}

.margin-section {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.margin-component {
  margin-bottom: 3rem;
}

.margin-element {
  margin-bottom: 1.5rem;
}

.margin-content {
  margin-bottom: 1rem;
}

.margin-center {
  margin-left: auto;
  margin-right: auto;
}

.margin-center-lg {
  margin: 1.5rem auto;
}

.margin-center-xl {
  margin: 2rem auto;
}

.margin-reset {
  margin: 0;
}

.margin-top-reset {
  margin-top: 0;
}

.margin-bottom-reset {
  margin-bottom: 0;
}

.padding-section {
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 2rem);
}

.padding-component {
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 1.5rem);
}

.padding-element {
  padding: clamp(1rem, 2vw, 2rem) clamp(0.75rem, 1.5vw, 1rem);
}

.padding-content {
  padding: clamp(0.75rem, 1.5vw, 1.5rem) clamp(0.5rem, 1vw, 0.75rem);
}

.padding-tight {
  padding: clamp(0.5rem, 1vw, 1rem) clamp(0.25rem, 0.5vw, 0.5rem);
}

.padding-reset {
  padding: 0;
}

.padding-vertical-reset {
  padding-top: 0;
  padding-bottom: 0;
}

.padding-horizontal-reset {
  padding-left: 0;
  padding-right: 0;
}

.width-full {
  width: 100%;
}

.width-half {
  width: 50%;
}

.width-content {
  max-width: 50rem;
}

.width-narrow {
  max-width: 48rem;
}

.height-full {
  height: 100%;
}

.height-screen {
  height: 100vh;
}

.min-height-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

.size-icon-sm {
  width: 1rem;
  height: 1rem;
}

.size-icon-md {
  width: 1.5rem;
  height: 1.5rem;
}

.size-icon-lg {
  width: 2rem;
  height: 2rem;
}

.size-icon-xl {
  width: 3rem;
  height: 3rem;
}

.size-hero-icon {
  width: 6rem;
  height: 6rem;
}

.size-feature-icon {
  width: 4rem;
  height: 4rem;
}

.size-small-icon {
  width: 2rem;
  height: 2rem;
}

/*
  Note: This file contains minimal custom utility styles.
  Most styling is handled by the semantic design system and ontology mixins.

  Removed legacy utilities:
  - Box-sizing reset (handled by modern CSS defaults)
  - Body background and text adjustments (handled by design tokens)
  - Image max-width behavior (handled by semantic styles)
  - Form element basic styling (handled by form components)
  - Container styling (handled by layout system)
  - Table styling (handled by component styles)
*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Montserrat", "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.618;
  color: oklch(8% 0.01 250deg);
  font-weight: 600;
}

h1, .h1 {
  font-size: 2.618rem;
  font-weight: 800;
  color: oklch(8% 0.01 250deg);
}

h2, .h2 {
  font-size: 1.618rem;
  font-weight: 700;
  color: oklch(8% 0.01 250deg);
}

h3, .h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: oklch(8% 0.01 250deg);
}

body {
  font-family: "Crimson Text", "Times New Roman", Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: oklch(99% 0.005 90deg);
  margin: 0;
  padding: 0;
}

.nav, .btn, .form-control, .card-title {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.4;
}

.text-sacred {
  color: oklch(70% 0.15 85deg);
  font-weight: 500;
}

.text-consciousness {
  color: oklch(8% 0.01 250deg);
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.text-wisdom {
  color: oklch(8% 0.01 250deg);
  font-family: "Crimson Text", "Times New Roman", Georgia, serif;
  line-height: 1.6;
}

.text-transcendent {
  color: oklch(99% 0.005 90deg);
}

.text-consciousness {
  color: oklch(65% 0.25 230deg);
  font-weight: 500;
}

.text-intelligence {
  color: oklch(65% 0.25 230deg);
  font-weight: 600;
}

.sacred-emphasis {
  color: oklch(70% 0.15 85deg);
  font-weight: 600;
}

.consciousness-emphasis {
  background: linear-gradient(135deg, oklch(8% 0.01 250deg), oklch(65% 0.25 230deg));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

blockquote {
  padding: 1.5rem;
  border-color: oklch(70% 0.15 85deg);
  background: oklch(70% 0.15 85deg / 0.05);
  font-style: italic;
  font-family: "Crimson Text", "Times New Roman", Georgia, serif;
  line-height: 1.75;
  border-radius: 0.5rem;
  position: relative;
}
blockquote::before {
  content: '"';
  font-size: 3rem;
  color: oklch(70% 0.15 85deg / 0.3);
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  font-family: "Montserrat", "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
}
blockquote footer {
  font-style: normal;
  color: oklch(65% 0.02 220deg);
  margin-top: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
}
blockquote footer::before {
  content: "— ";
  color: oklch(70% 0.15 85deg);
}

@media (min-width: 768px) {
  h1, .h1 {
    font-size: 3.1416rem;
  }
  h2, .h2 {
    font-size: 1.7798rem;
  }
}
@media (min-width: 992px) {
  h1, .h1 {
    font-size: 3.6652rem;
  }
  h2, .h2 {
    font-size: 2.1034rem;
  }
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 4.1888rem;
  }
}
a {
  color: oklch(70% 0.15 85deg);
  text-decoration: none;
  transition: all 0.3s ease;
}
a:hover {
  color: oklch(60% 0.12 88deg);
}
a:focus {
  outline: 2px solid oklch(70% 0.15 85deg);
  outline-offset: 2px;
}

.nav-link {
  color: oklch(8% 0.01 250deg);
  font-weight: 500;
  transition: all 0.3s ease;
}
.nav-link:hover {
  color: oklch(70% 0.15 85deg);
  transform: translateY(-1px);
}
.nav-link.active {
  color: oklch(70% 0.15 85deg);
  font-weight: 600;
}

.btn {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: oklch(70% 0.15 85deg);
  border-color: oklch(70% 0.15 85deg);
  color: oklch(8% 0.01 250deg);
  font-weight: 600;
}
.btn-primary:hover {
  background-color: oklch(60% 0.12 88deg);
  border-color: oklch(60% 0.12 88deg);
  transform: translateY(-2px);
  box-shadow: 0 0 0.5rem oklch(70% 0.15 85deg / 0.3);
}

.btn-sacred {
  background-color: oklch(8% 0.01 250deg);
  border-color: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  font-weight: 600;
}
.btn-sacred:hover {
  background-color: oklch(8% 0.01 250deg);
  border-color: oklch(8% 0.01 250deg);
  box-shadow: 0 0.25rem 2rem oklch(8% 0.01 250deg / 0.4);
}

.form-control {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  border-color: oklch(65% 0.02 220deg);
}
.form-control:focus {
  border-color: oklch(70% 0.15 85deg);
  box-shadow: 0 0 0 0.2rem oklch(70% 0.15 85deg / 0.25);
}

.form-label {
  color: oklch(8% 0.01 250deg);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

::placeholder {
  color: oklch(65% 0.02 220deg);
  font-style: italic;
}

@media (prefers-contrast: high) {
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    color: oklch(8% 0.01 250deg);
  }
  .text-sacred {
    color: oklch(60% 0.12 85deg) !important;
  }
  a {
    color: oklch(70% 0.15 85deg);
  }
  a:hover {
    color: oklch(65% 0.13 88deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .consciousness-emphasis {
    background: oklch(8% 0.01 250deg);
    background-clip: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    color: oklch(8% 0.01 250deg);
  }
}
@media (min-width: 768px) {
  h1, .h1 {
    font-size: 3.1416rem;
  }
  h2, .h2 {
    font-size: 1.7798rem;
  }
}
@media (min-width: 992px) {
  h1, .h1 {
    font-size: 3.6652rem;
  }
  h2, .h2 {
    font-size: 2.1034rem;
  }
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 4.1888rem;
  }
}
/*
  Note: Most typography styles are handled by the semantic design system.
  This file contains project-specific typography and sacred text styles.

  Available semantic utilities:
  - Font weight: Use semantic weight variables ($font-weight-normal, $font-weight-bold, etc.)
  - Text alignment: Use CSS text-align property or semantic mixins
  - Text transformation: Use CSS text-transform property
  - Text colors: Use semantic color tokens ($text-primary, $text-secondary, etc.)
*/
h1, .h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: oklch(12% 0.01 250deg);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

h2, .h2 {
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: oklch(12% 0.01 250deg);
  margin-bottom: clamp(0.875rem, 1.75vw, 1.25rem);
}

h3, .h3 {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  font-weight: 600;
  line-height: 1.4;
  color: oklch(12% 0.01 250deg);
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

h4, .h4 {
  font-size: clamp(1.25rem, 2.5vw + 0.25rem, 1.875rem);
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  margin-bottom: clamp(0.625rem, 1.25vw, 0.875rem);
}

h5, .h5 {
  font-size: clamp(1.125rem, 2vw + 0.25rem, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

h6, .h6 {
  font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem);
  font-weight: 500;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

p, .body-text {
  font-size: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}
p:last-child, .body-text:last-child {
  margin-bottom: 0;
}

.display-xl {
  font-size: clamp(3.5rem, 8vw + 1rem, 6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: oklch(12% 0.01 250deg);
}

.display-lg {
  font-size: clamp(3rem, 6vw + 1rem, 5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: oklch(12% 0.01 250deg);
}

.display-md {
  font-size: clamp(2.5rem, 5vw + 0.5rem, 4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: oklch(12% 0.01 250deg);
}

.text-lg {
  font-size: clamp(1.125rem, 1vw + 0.5rem, 1.25rem);
  line-height: 1.6;
}

.text-sm {
  font-size: clamp(0.875rem, 0.5vw + 0.5rem, 1rem);
  line-height: 1.5;
}

.text-xs {
  font-size: clamp(0.75rem, 0.25vw + 0.5rem, 0.875rem);
  line-height: 1.4;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.text-primary {
  color: oklch(12% 0.01 250deg);
}

.text-secondary {
  color: oklch(25% 0.01 230deg);
}

.text-accent {
  color: oklch(65% 0.25 230deg);
}

.text-consciousness {
  color: oklch(12% 0.01 250deg);
}

.text-inverse {
  color: oklch(99% 0.005 90deg);
}

.material-glass {
  background: oklch(20% 0.04 245deg / 0.75);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid oklch(35% 0.05 248deg / 0.4);
}

.material-glass-elevated {
  background: oklch(24% 0.05 244deg / 0.85);
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid oklch(35% 0.05 248deg / 0.6);
}

.material-glass-subtle {
  background: oklch(18% 0.03 246deg / 0.6);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid oklch(35% 0.05 248deg / 0.3);
}

.material-glass-accent {
  background: oklch(22% 0.06 85deg / 0.7);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid oklch(85% 0.16 85deg / 0.4);
}

.material-header {
  background: oklch(18% 0.03 248deg / 0.95);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid oklch(35% 0.05 248deg / 0.3);
  box-shadow: 0 4px 6px oklch(15% 0.03 250deg / 0.1);
}

.material-footer {
  background: oklch(16% 0.03 252deg / 0.95);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-top: 1px solid oklch(35% 0.05 248deg / 0.3);
}

.material-overlay {
  background: oklch(15% 0.03 250deg / 0.85);
  backdrop-filter: blur(24px) saturate(2);
  -webkit-backdrop-filter: blur(24px) saturate(2);
}

.material-modal {
  background: oklch(18% 0.03 248deg / 0.95);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid oklch(35% 0.05 248deg / 0.5);
  box-shadow: 0 20px 50px oklch(15% 0.03 250deg / 0.35), 0 0 20px oklch(85% 0.16 85deg / 0.1);
}

.mask-fade-bottom {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.mask-fade-top {
  mask-image: linear-gradient(to top, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
}

.mask-fade-edges {
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.mask-fade-radial {
  mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
}

@media (prefers-contrast: high) {
  .material-glass,
  .material-glass-elevated,
  .material-glass-subtle,
  .material-glass-accent,
  .material-header,
  .material-footer,
  .material-overlay,
  .material-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: oklch(99% 0.005 90deg);
    border-width: 2px;
  }
}
@media print {
  .material-glass,
  .material-glass-elevated,
  .material-glass-subtle,
  .material-glass-accent,
  .material-header,
  .material-footer,
  .material-overlay,
  .material-modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: white;
    border: 1px solid black;
    box-shadow: none;
  }
  .mask-fade-bottom,
  .mask-fade-top,
  .mask-fade-edges,
  .mask-fade-radial {
    mask-image: none;
    -webkit-mask-image: none;
  }
}
.section.section-light {
  background-color: var(--color-light);
}
.section.section-dark {
  background-color: var(--color-dark);
  color: oklch(95% 0.01 220deg);
}
.section.section-primary {
  background-color: var(--color-section-bg-primary);
}
.section.section-secondary {
  background-color: var(--color-section-bg-secondary);
}

/* 
  Theme Usage Guidelines:

  1. Use CSS variables for consistent colors across components
  2. For themed sections, use .section with modifiers:
     - .section.section-light
     - .section.section-dark
     - .section.section-primary
     - .section.section-secondary
  3. For gradient backgrounds, use .gradient-primary or .gradient-secondary
  4. For most other styling, leverage Bootstrap's built-in utility classes
*/
:root {
  --vh-full: 100dvh;
  --vh-large: 100lvh;
  --vh-small: 100svh;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --gutter: clamp(1rem, 4vw, 2rem);
  --container-padding: clamp(1rem, 5vw, 3rem);
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
}

:root {
  --text-xs: clamp(0.75rem, calc(0.7rem + 0.25vw), 0.8rem);
  --text-sm: clamp(0.875rem, calc(0.8rem + 0.35vw), 0.95rem);
  --text-base: clamp(1rem, calc(0.9rem + 0.5vw), 1.125rem);
  --text-lg: clamp(1.125rem, calc(1rem + 0.625vw), 1.25rem);
  --text-xl: clamp(1.25rem, calc(1.1rem + 0.75vw), 1.5rem);
  --text-2xl: clamp(1.5rem, calc(1.25rem + 1.25vw), 2rem);
  --text-3xl: clamp(1.875rem, calc(1.5rem + 1.875vw), 2.5rem);
  --text-4xl: clamp(2.25rem, calc(1.75rem + 2.5vw), 3.5rem);
  --text-5xl: clamp(3rem, calc(2rem + 5vw), 5rem);
  --text-display: clamp(3.5rem, calc(2rem + 7.5vw), 7rem);
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.8;
}

@media (max-width: 767px) {
  .show-tablet-up {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .show-mobile-only {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .show-desktop-only {
    display: none !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus-within, .sr-only.focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

@media print {
  nav,
  footer,
  .no-print,
  button,
  .back-to-top {
    display: none !important;
  }
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  a[href^=http]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }
  h1, h2, h3, h4, h5, h6,
  img, figure, table, pre {
    page-break-inside: avoid;
  }
}
@media (max-width: 480px) {
  .navbar-main {
    border-radius: 0 0 0.25rem 0.25rem;
  }
  .product-card {
    border-radius: 0.25rem;
  }
  .section {
    border-radius: 0.25rem;
  }
  .section-title {
    font-size: 1.25rem;
  }
}
.fs-responsive-xl {
  font-size: var(--text-xl, 1.5rem);
}
@media (max-width: 991.98px) {
  .fs-responsive-xl {
    font-size: var(--text-lg, 1.25rem);
  }
}
@media (max-width: 575.98px) {
  .fs-responsive-xl {
    font-size: var(--text-base, 1.5rem);
  }
}

.fs-responsive-lg {
  font-size: var(--text-lg, 1.25rem);
}
@media (max-width: 991.98px) {
  .fs-responsive-lg {
    font-size: var(--text-base, 1.1rem);
  }
}
@media (max-width: 575.98px) {
  .fs-responsive-lg {
    font-size: var(--text-base, 1rem);
  }
}

@media (max-width: 767px) {
  .section {
    padding: 1.875rem 1.5rem;
  }
}
@media (max-width: 479px) {
  .section {
    padding: 1.25rem 1rem;
  }
}
@media (max-width: 767px) {
  .site-header .navbar-collapse {
    background-color: var(--void-surface, oklch(8% 0.01 250deg));
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem oklch(8% 0.01 250deg / 0.25);
  }
}
.genesis-invitation-wrapper,
.transcendent-hero-wrapper,
.landing-wrapper,
.landing-features-wrapper,
.archive-wrapper,
.faq-wrapper,
.profile-wrapper,
.article-wrapper,
.post-wrapper,
.gallery-wrapper,
.form-wrapper,
.minimal-wrapper,
.scrollable-wrapper,
.fixed-height-wrapper {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  contain: layout style;
  isolation: isolate;
}

.settings-wrapper,
.docs-wrapper {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  contain: layout style;
  isolation: isolate;
}

.genesis-invitation-content,
.transcendent-hero-row,
.landing-hero-grid,
.post-navigation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
@media (min-width: 768px) {
  .genesis-invitation-content,
  .transcendent-hero-row,
  .landing-hero-grid,
  .post-navigation-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.landing-features-grid,
.gallery-grid-layout,
.profile-stats-grid,
.splash-countdown-grid,
.docs-nav-grid,
.article-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .landing-features-grid,
  .gallery-grid-layout,
  .profile-stats-grid,
  .splash-countdown-grid,
  .docs-nav-grid,
  .article-nav-grid {
    grid-template-columns: 1fr;
  }
}

.settings-grid,
.docs-grid,
.article-grid,
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 992px) {
  .settings-grid,
  .docs-grid,
  .article-grid,
  .post-grid {
    grid-template-columns: 250px 1fr;
  }
}

@media (min-width: 992px) {
  .settings-grid {
    grid-template-columns: 1fr 3fr;
  }
}

.profile-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 992px) {
  .profile-content-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.faq-content-grid,
.archive-item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.form-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  max-width: 800px;
  margin-inline: auto;
}

.minimal-layout-grid {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: clamp(2rem, 5vw, 4rem);
}

.search-header-grid,
.search-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.genesis-invitation-col,
.landing-hero-col,
.landing-feature-item,
.profile-stat-item,
.countdown-item,
.minimal-layout-main,
.faq-content-main,
.profile-content-main {
  width: 100%;
}

.dashboard-widget-component {
  min-width: 250px;
  box-sizing: border-box;
  width: 100%;
}
.dashboard-widget-component[data-columns="3"] {
  grid-column: span 1;
}
@media (min-width: 992px) {
  .dashboard-widget-component[data-columns="3"] {
    min-width: 300px;
  }
}
.dashboard-widget-component[data-columns="4"] {
  grid-column: span 1;
}
@media (min-width: 768px) {
  .dashboard-widget-component[data-columns="4"] {
    grid-column: span 2;
  }
}

.modal-close-btn,
.modal-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.25rem, 2.5vw, 2rem);
  border-radius: clamp(0.5rem, 1vw, 1rem);
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modal-close-btn:focus-visible,
.modal-action-btn:focus-visible {
  outline: 2px solid oklch(65% 0.25 230deg / 0.5);
  outline-offset: 2px;
}
.modal-close-btn:disabled,
.modal-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-close-btn,
.modal-action-btn {
  padding: 0.5rem 1rem;
  border-radius: clamp(0.375rem, 0.5vw, 0.5rem);
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}
.modal-close-btn:focus-visible:focus-visible,
.modal-action-btn:focus-visible:focus-visible {
  outline: 2px solid oklch(65% 0.25 230deg / 0.5);
  outline-offset: 2px;
}

.modal-close-btn {
  background: transparent;
  border: 2px solid oklch(85% 0.01 220deg);
  color: oklch(12% 0.01 250deg);
}
.modal-close-btn:hover {
  background: oklch(95% 0.005 220deg);
  border-color: oklch(75% 0.02 220deg);
}

.modal-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.25rem, 2.5vw, 2rem);
  border-radius: clamp(0.5rem, 1vw, 1rem);
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modal-action-btn:focus-visible {
  outline: 2px solid oklch(65% 0.25 230deg / 0.5);
  outline-offset: 2px;
}
.modal-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-action-btn {
  background: oklch(96% 0.01 90deg);
  border-color: oklch(85% 0.01 220deg);
  color: oklch(12% 0.01 250deg);
}
.modal-action-btn:hover:not(:disabled) {
  filter: brightness(0.9);
}
.modal-action-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.genesis-invitation-content,
.landing-features-grid {
  justify-items: center;
}

.landing-features-wrapper,
.gallery-grid-layout,
.archive-wrapper {
  container-type: inline-size;
}
@container (min-width: 768px) {}

.site-main {
  width: 100%;
  min-height: 50vh;
  padding-top: 0;
  padding-bottom: 0;
}
.site-main .site-content {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x, 0.75rem) * 0.5);
  padding-left: calc(var(--bs-gutter-x, 0.75rem) * 0.5);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1200px) {
  .site-main .site-content {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .site-main .site-content {
    max-width: 1320px;
  }
}

@keyframes sacred-rhythm {
  0%, 100% {
    opacity: 0.85;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.02);
  }
}
@keyframes consciousness-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 oklch(70% 0.15 85deg / 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px oklch(70% 0.15 85deg / 0);
  }
}
@keyframes transcendence-spiral {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
    opacity: 0.7;
  }
  50% {
    opacity: 0.85;
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg) scale(1.2);
    opacity: 1;
  }
}
@keyframes gentle-spiral {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg);
  }
}
@keyframes consciousness-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes essence-weave {
  0% {
    background-position: 0% 0%;
    opacity: 0.7;
  }
  33% {
    opacity: 0.85;
  }
  66% {
    opacity: 1;
  }
  100% {
    background-position: 100% 100%;
    opacity: 0.7;
  }
}
@keyframes bridge-connection {
  0% {
    width: 0%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0.85;
  }
}
@keyframes threshold-passage {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes sacred-glow {
  0%, 100% {
    box-shadow: 0 0 5px oklch(70% 0.15 85deg / 0.5);
  }
  50% {
    box-shadow: 0 0 20px oklch(70% 0.15 85deg / 0.8), 0 0 30px oklch(70% 0.15 85deg / 0.6);
  }
}
@keyframes consciousness-awaken {
  0% {
    box-shadow: 0 0 0 oklch(8% 0.01 250deg / 0);
  }
  50% {
    box-shadow: 0 0 15px oklch(8% 0.01 250deg / 0.6);
  }
  100% {
    box-shadow: 0 0 0 oklch(8% 0.01 250deg / 0);
  }
}
@keyframes pulse {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.pulse {
  will-change: transform;
  backface-visibility: hidden;
}
.pulse:hover {
  animation: pulse 1.5s infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.sacred-rhythm {
  animation: sacred-rhythm 2s ease-in-out infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.consciousness-pulse {
  animation: consciousness-pulse 2s infinite;
  will-change: box-shadow;
  backface-visibility: hidden;
}

.transcendence-spiral {
  animation: transcendence-spiral 8s linear infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.gentle-spiral {
  animation: gentle-spiral 20s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.consciousness-flow {
  background: linear-gradient(-45deg, oklch(8% 0.01 250deg / 0.1), oklch(70% 0.15 85deg / 0.1), oklch(65% 0.02 220deg / 0.1), oklch(65% 0.25 230deg / 0.1));
  background-size: 400% 400%;
  animation: consciousness-flow 15s ease infinite;
  will-change: background-position;
  backface-visibility: hidden;
}

.essence-weave {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg / 0.1) 0%, transparent 25%, oklch(70% 0.15 85deg / 0.1) 50%, transparent 75%, oklch(70% 0.15 85deg / 0.1) 100%);
  background-size: 200% 200%;
  animation: essence-weave 12s ease infinite;
  will-change: background-position, opacity;
  backface-visibility: hidden;
}

.bridge-connection {
  position: relative;
  overflow: hidden;
}
.bridge-connection::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, oklch(65% 0.02 220deg / 0.3) 50%, transparent 100%);
  animation: bridge-connection 3s ease-in-out infinite;
}

.threshold-passage {
  animation: threshold-passage 1s ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.sacred-glow {
  animation: sacred-glow 3s ease-in-out infinite;
  will-change: box-shadow;
  backface-visibility: hidden;
}

.consciousness-awaken {
  animation: consciousness-awaken 4s ease-in-out infinite;
  will-change: box-shadow;
  backface-visibility: hidden;
}

.sacred-interactive {
  transition: all 0.3s ease;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}
.sacred-interactive:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 0 0.5rem oklch(70% 0.15 85deg / 0.3);
}

.consciousness-interactive {
  transition: all 0.5s ease;
  will-change: background-color, border-color;
  backface-visibility: hidden;
}
.consciousness-interactive:hover {
  background-color: oklch(8% 0.01 250deg / 0.05);
  border-color: oklch(70% 0.15 85deg);
}

.sacred-loading {
  position: relative;
  overflow: hidden;
}
.sacred-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, oklch(70% 0.15 85deg / 0.4) 50%, transparent 100%);
  animation: bridge-connection 2s ease-in-out infinite;
}

.fadeIn {
  animation: fadeIn 0.8s ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.fadeIn-delayed {
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.5s forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.fadeIn-sacred {
  opacity: 0;
  animation: fadeIn 1.2s ease-out forwards, sacred-glow 3s ease-in-out 1.2s infinite;
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
}

.sacred-text-emergence {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: fadeIn 1s ease-out forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.consciousness-progress {
  position: relative;
}
.consciousness-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, oklch(8% 0.01 250deg), oklch(70% 0.15 85deg));
  transition: width 1s ease-out;
  border-radius: inherit;
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}
.card-hover:hover {
  transform: translate3d(0, -10px, 0);
  box-shadow: 0 10px 30px oklch(8% 0.01 250deg / 0.15);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -10px, 0);
  }
  60% {
    transform: translate3d(0, -5px, 0);
  }
}
.hero-scroll-icon {
  animation: bounce 2s infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.legacy-story-cube {
  perspective: 1000px;
}
.legacy-story-cube .legacy-story-cube-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.legacy-story-cube:hover .legacy-story-cube-inner {
  transform: rotateY(180deg);
}
.legacy-story-cube .legacy-story-cube-front,
.legacy-story-cube .legacy-story-cube-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}
.legacy-story-cube .legacy-story-cube-front {
  background-size: cover;
  background-position: center;
}
.legacy-story-cube .legacy-story-cube-back {
  background-color: oklch(65% 0.25 230deg);
  color: oklch(99% 0.005 90deg);
  transform: rotateY(180deg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  will-change: background-color, box-shadow;
  backface-visibility: hidden;
}
.site-header.navbar-scrolled {
  background-color: oklch(8% 0.01 250deg / 0.95);
  box-shadow: 0 4px 10px oklch(8% 0.01 250deg / 0.1);
}

@keyframes consciousnessEmergence {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.85) rotate(-2deg);
    filter: blur(8px) brightness(1.2);
    box-shadow: 0 0 0 0 oklch(65% 0.25 230deg / 0);
  }
  40% {
    opacity: 0.7;
    filter: blur(2px) brightness(1.1);
    box-shadow: 0 0 24px 8px oklch(65% 0.25 230deg / 0.15);
  }
  70% {
    opacity: 1;
    filter: blur(0) brightness(1.05);
    box-shadow: 0 0 48px 16px oklch(65% 0.25 230deg / 0.25);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: none;
    box-shadow: 0 0 0 0 oklch(65% 0.25 230deg / 0);
  }
}
:root {
  --glow-intensity-subtle: 0.15;
  --glow-intensity-medium: 0.35;
  --glow-intensity-strong: 0.6;
  --glow-intensity-intense: 0.85;
  --neural-primary: oklch(0.55 0.25 290);
  --neural-secondary: oklch(0.65 0.20 280);
  --neural-tertiary: oklch(0.75 0.15 210);
  --quantum-cyan: oklch(0.75 0.18 195);
  --quantum-magenta: oklch(0.65 0.25 320);
  --quantum-gold: oklch(0.85 0.18 85);
  --void-deep: oklch(0.08 0.02 260);
  --void-medium: oklch(0.12 0.03 255);
  --void-surface: oklch(0.18 0.04 250);
  --motion-quantum: 0.15s;
  --motion-neural: 0.3s;
  --motion-conscious: 0.6s;
  --motion-transcendent: 1.2s;
  --motion-cosmic: 3s;
  --ease-consciousness: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-transcendent: cubic-bezier(0.33, 0, 0.67, 1);
  --ease-quantum: cubic-bezier(0.5, 0, 0, 1);
  --ease-neural: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes starfield-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translate3d(0, -100px, 0) rotate(0.5deg);
    opacity: 1;
  }
}
@keyframes border-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes border-pulse {
  0%, 100% {
    border-color: oklch(85% 0.18 95deg);
    box-shadow: 0 0 10px oklch(85% 0.18 95deg / 0.5), inset 0 0 10px oklch(85% 0.18 95deg / 0.1);
  }
  50% {
    border-color: oklch(55% 0.25 290deg);
    box-shadow: 0 0 20px oklch(55% 0.25 290deg / 0.6), inset 0 0 15px oklch(55% 0.25 290deg / 0.15);
  }
}
@keyframes text-shimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes consciousness-breathe {
  0%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translate3d(0, 0, 0) scale(1.02);
  }
}
@keyframes neural-pulse {
  0%, 100% {
    box-shadow: 0 0 20px oklch(55% 0.25 290deg / 0.4);
  }
  50% {
    box-shadow: 0 0 40px oklch(55% 0.25 290deg / 0.7);
  }
}
@keyframes quantum-flicker {
  0%, 100% {
    opacity: 1;
  }
  25% {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.97;
  }
}
@keyframes float-ethereal {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(0, -10px, 0) rotate(0.5deg);
  }
  75% {
    transform: translate3d(0, -5px, 0) rotate(-0.5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animated-gradient,
  [class*=animate-] {
    animation: none !important;
    background-position: 0% 50% !important;
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: auto;
}
html.smooth-scroll {
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pan-x;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  isolation: isolate;
}

img,
svg,
canvas,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

svg {
  display: block;
}

h1, h2, h3, h4, h5, h6,
p, li, td, th,
.content, .prose,
article, section {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

code, pre {
  overflow-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 20% 30%, oklch(20% 0.08 290deg / 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, oklch(18% 0.06 210deg / 0.12) 0%, transparent 50%), oklch(8% 0.01 250deg);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: ambient-breathe 12s ease-in-out infinite;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, oklch(85% 0.16 85deg / 0.03) 1px, transparent 0);
  background-size: 40px 40px;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  animation: ambient-pulse 8s ease-in-out infinite;
  opacity: 0.4;
}

@keyframes ambient-breathe {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate3d(0, 2px, 0) scale(1.01);
    opacity: 0.95;
  }
}
@keyframes ambient-pulse {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.4;
  }
  50% {
    transform: translate3d(-1px, -1px, 0);
    opacity: 0.5;
  }
}
body.user-idle::before {
  animation-duration: 18s;
}

body.user-active::before {
  animation-duration: 8s;
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
    transform: none;
    will-change: auto;
  }
  html {
    scroll-behavior: auto;
  }
}
@media (prefers-contrast: high) {
  body::before {
    background: oklch(8% 0.01 250deg);
  }
  body::after {
    display: none;
  }
}
@media print {
  body::before,
  body::after {
    display: none;
  }
  body {
    overflow-x: auto;
    overflow-y: visible;
    min-height: auto;
    max-width: 100%;
  }
}
/**
 * PROJECT GENESIS: ONTOLOGY SYSTEM INDEX
 * --------------------------------------------------------------------------
 * This is the main entry point for the semantic SCSS engine.
 * Import this file to gain access to the complete ontological interface.
 * 
 * ARCHITECTURE:
 * 
 * Tier 1: Content (Subdomain HTML)
 *   - Defines WHAT the data is
 *   - No style attributes; 1 class per element
 * 
 * Tier 2: Interface (This system - _interface.scss)
 *   - Defines the ROLE of the content
 *   - Agnostic; no CSS properties allowed
 *   - Semantic API exposed to subdomains
 * 
 * Tier 3: Engine (_engines.scss)
 *   - Defines the LOOK (OKLCH, Bento)
 *   - The only place for raw CSS/Pixels
 *   - Physical manifestation layer
 * 
 * IMPORT ORDER:
 * 1. CSS Custom Properties (tokens) - Design token mappings
 * 2. Engine Layer (implementation) - Physical manifestation
 * 3. Interface Layer (API) - Semantic contracts
 */
/**
 * PROJECT GENESIS: CSS CUSTOM PROPERTIES (NON-COLOR TOKENS)
 * --------------------------------------------------------------------------
 * These CSS custom properties define the non-color visual language used by the Engine layer.
 * They map to semantic design tokens from base/_design-tokens.scss
 * 
 * NOTE: All color-related CSS custom properties have been moved to 
 * _sass/base/design/_colors.scss for centralized color management.
 * 
 * This file is the bridge between SCSS variables and CSS custom properties,
 * allowing the ontology system to work with modern CSS features.
 */
:root {
  /* ============================================================================
     SPACING TOKENS
     ============================================================================ */
  --space-bento: clamp(1.5rem, 3vw, 2.5rem);
  --space-narrative: clamp(1.5rem, 2.5vw, 2rem);
  --space-network: clamp(1rem, 2vw, 1.5rem);
  --space-timeline: clamp(1rem, 2vw, 1.5rem);
  --space-tight: clamp(0.75rem, 1.5vw, 1rem);
  --space-nav: clamp(1rem, 2vw, 2rem);
  /* ============================================================================
     SIZING TOKENS
     ============================================================================ */
  --width-reading: 70ch;
  --width-container: clamp(320px, 90vw, 1600px);
  --width-narrow: clamp(320px, 85vw, 800px);
  /* ============================================================================
     BORDER RADIUS TOKENS
     ============================================================================ */
  --radius-bento: clamp(0.75rem, 1.5vw, 1.25rem);
  --radius-button: clamp(0.5rem, 1vw, 0.75rem);
  /* ============================================================================
     MOTION TOKENS
     ============================================================================ */
  --motion-fluid: 0.3s ease;
  --motion-snap: 0.2s ease;
  --motion-slow: 0.5s ease;
  /* ============================================================================
     TYPOGRAPHY TOKENS
     ============================================================================ */
  --font-consciousness: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wisdom: Georgia, "Times New Roman", serif;
  --font-sacred: Montserrat, -apple-system, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
  --size-hero: clamp(2rem, 5vw, 3.5rem);
  --size-title: clamp(1.5rem, 3.5vw, 2.5rem);
  --size-body: clamp(1rem, 1.5vw, 1.125rem);
  --size-small: clamp(0.8rem, 1vw, 0.875rem);
  --size-tiny: clamp(0.75rem, 0.9vw, 0.8rem);
  --size-data: clamp(0.875rem, 1vw, 0.95rem);
  --size-button: clamp(0.95rem, 1.2vw, 1.05rem);
  /* ============================================================================
     PADDING TOKENS
     ============================================================================ */
  --padding-inline: clamp(1rem, 3vw, 2rem);
  --padding-entity-primary: clamp(1.5rem, 3vw, 2rem);
  --padding-entity-secondary: clamp(1rem, 2vw, 1.5rem);
  --padding-entity-aggregate: clamp(2rem, 4vw, 3rem);
  --padding-button: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  --padding-button-sm: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
  --padding-nav: clamp(1rem, 2vw, 1.5rem);
  /* ============================================================================
     SHADOW TOKENS
     ============================================================================ */
  --shadow-ambient: 0 4px 12px oklch(0.08 0.01 250 / 0.30);
  --shadow-void-inset: oklch(0.05 0.01 260);
  --shadow-profound: 0 8px 32px oklch(0.05 0.01 250 / 0.5);
  /* ============================================================================
     RESPONSIVE TOKENS (Dynamic Viewport Units)
     ============================================================================ */
  --viewport-height: 100dvh;
  --viewport-height-large: 100lvh;
  --viewport-height-small: 100svh;
  /* Safe area insets for notched devices */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* Touch-friendly sizing */
  --touch-min: 44px;
  --touch-comfortable: 48px;
  /* Container widths */
  --container-narrow: min(65ch, 90vw);
  --container-content: min(85ch, 90vw);
  --container-wide: min(1400px, 95vw);
  --container-full: min(1800px, 98vw);
  /* Responsive gutter */
  --gutter: clamp(1rem, 4vw, 2rem);
  /* ============================================================================
     MOTION TIMING & EASING (Advanced)
     ============================================================================ */
  /* Enhanced motion timing */
  --motion-quantum: 0.15s;
  --motion-neural: 0.3s;
  --motion-conscious: 0.6s;
  --motion-transcendent: 1.2s;
  --motion-cosmic: 3s;
  /* Easing curves */
  --ease-consciousness: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-transcendent: cubic-bezier(0.33, 0, 0.67, 1);
  --ease-quantum: cubic-bezier(0.5, 0, 0, 1);
  --ease-neural: cubic-bezier(0.4, 0, 0.2, 1);
  /* ============================================================================
     EFFECT INTENSITIES
     ============================================================================ */
  /* Glow intensities (opacity values) */
  --glow-subtle: 0.15;
  --glow-medium: 0.35;
  --glow-strong: 0.6;
  --glow-intense: 0.85;
}

/* ============================================================================
   ACCESSIBILITY - Reduced Motion Support
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fluid: 0s;
    --motion-snap: 0s;
    --motion-slow: 0s;
    --motion-quantum: 0s;
    --motion-neural: 0s;
    --motion-conscious: 0s;
    --motion-transcendent: 0s;
    --motion-cosmic: 0s;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
}
/**
 * PROJECT GENESIS: THEME ENGINE DRIVERS (INTERNAL)
 * --------------------------------------------------------------------------
 * These mixins are the "Physical Manifestation" layer. 
 * They are triggered by the agnostic Ontological Interface.
 * 
 * CRITICAL RULE: This is the ONLY file where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 * 
 * NOTE: This file has been refactored for maintainability. All engine
 * implementations are now in the engines/ subdirectory, organized by category.
 */
/**
 * ENGINE LAYER INDEX
 * --------------------------------------------------------------------------
 * This file imports all engine implementation mixins.
 * 
 * The engine layer contains the actual CSS implementation for each
 * ontological category. This is the ONLY layer where raw CSS properties
 * are allowed. All values MUST use CSS custom properties from the token system.
 * 
 * Each mixin corresponds to one of the six ontological categories:
 * - Environment: Spatial organization and layout
 * - Entity: Visual presence and material properties
 * - Cognition: Typography and information intent
 * - Synapse: Interactions and navigation
 * - State: Temporal conditions and system status
 * - Atmosphere: Sensory texture and emotional tone
 */
/**
 * SPATIAL ENGINE - Environment Layout Logic
 * --------------------------------------------------------------------------
 * Defines the organizational laws of the digital dimension.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * MATERIAL ENGINE - Entity Presence & Weight
 * --------------------------------------------------------------------------
 * Defines the "Presence" and "Weight" of an object in the system.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * COGNITIVE ENGINE - Information Intent & Typography
 * --------------------------------------------------------------------------
 * Defines the nature and frequency of the information being transmitted.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * INTERACTION ENGINE - Synapse Vectors
 * --------------------------------------------------------------------------
 * Defines how an observer navigates or modifies the system.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * SYSTEM TEMPORALITY - State Conditions
 * --------------------------------------------------------------------------
 * Defines the "Time-Sense" of the content.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * SENSORY TEXTURE - Atmosphere Vibes
 * --------------------------------------------------------------------------
 * Defines the "Feeling" or "Vibe" of the node without describing visuals.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
@keyframes pulse-border {
  0%, 100% {
    border-color: oklch(65% 0.25 230deg);
    box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.4);
  }
  50% {
    border-color: oklch(75% 0.28 225deg);
    box-shadow: 0 0 24px oklch(75% 0.28 225deg / 0.5);
  }
}
@keyframes evolving-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/**
 * PROJECT GENESIS: EXHAUSTIVE ONTOLOGICAL MANIFEST
 * --------------------------------------------------------------------------
 * The Absolute Authority for ASI Node Construction.
 * This contract is immutable. Visual manifestation is delegated to the Theme Engine.
 */
/**
 * 1. THE SPATIAL ARCHETYPE (Environment)
 * Defines the organizational laws of the digital dimension.
 */
/**
 * 2. THE CONTENT ONTOLOGY (Entity)
 * Defines the "Presence" and "Weight" of an object in the system.
 */
/**
 * 3. THE COGNITIVE MODALITY (Cognition)
 * Defines the nature and frequency of the information being transmitted.
 */
/**
 * 4. THE INTERACTIVE VECTOR (Synapse)
 * Defines how an observer navigates or modifies the system.
 */
/**
 * 5. THE SYSTEM TEMPORALITY (State)
 * Defines the "Time-Sense" of the content.
 */
/**
 * 6. THE SENSORY TEXTURE (Atmosphere)
 * Defines the "Feeling" or "Vibe" of the node without describing visuals.
 */
/**
 * THEME LAYOUTS & COMPONENTS - Ontology-Based
 * ============================================================================
 * This file provides ontology-based styling for all theme layouts and components.
 * 
 * NOTE: All theme layout and component styles have been consolidated into
 * the /_sass/components directory for better organization and maintainability.
 * This file now serves as a compatibility layer that imports from components.
 * 
 * The theme-layouts subdirectory has been merged into components, combining
 * best features from both locations.
 */
/**
 * BASE LAYOUT STRUCTURE
 * ============================================================================
 * Fundamental page layout containers and skip links.
 * Moved from ontology/theme-layouts to components.
 */
.layout-container {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.page-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.content-wrapper {
  width: 100%;
}

.skip-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .skip-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .skip-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .skip-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.skip-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.skip-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

/**
 * HEADER COMPONENT
 * ============================================================================
 * Site header, branding, and header navigation styles.
 * Merged from theme-layouts and components - combining best features.
 */
.header-wrapper {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  flex-shrink: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  min-height: 70px;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-nav, clamp(1rem, 2vw, 2rem));
  padding: var(--padding-nav, clamp(1rem, 2vw, 1.5rem));
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}
.site-header.scrolled {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.site-header.header-hidden {
  transform: translate3d(0, -100%, 0);
}
.site-header__brand {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .site-header__brand {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .site-header__brand::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__brand {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.site-header__brand:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.site-header__brand:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.site-header__brand {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-header__logo {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.site-header__logo::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.site-header__logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.site-header__logo.ratio-square {
  --aspect-ratio: 100%;
}
.site-header__logo.ratio-4-3 {
  --aspect-ratio: 75%;
}
.site-header__logo.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.site-header__logo.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.site-header__text {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-header__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .site-header__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .site-header__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.site-header__tagline {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .site-header__tagline {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.site-header__toggle {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .site-header__toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__toggle {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.site-header__toggle:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.site-header__toggle:active {
  transform: scale(0.98) translateY(0);
}
.site-header__toggle:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.site-header__toggle-icon {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-header__nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .site-header__nav {
    width: 100%;
    flex-basis: 100%;
  }
  .site-header__nav.collapse:not(.show) {
    display: none;
  }
  .site-header__nav.collapse.show {
    display: block;
  }
}
@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }
}

.header-brand-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.header-logo {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.header-title {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.site-header-toggler {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .site-header-toggler {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header-toggler {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.site-header-toggler:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.site-header-toggler:active {
  transform: scale(0.98) translateY(0);
}
.site-header-toggler:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.site-header-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

/**
 * FOOTER COMPONENT
 * ============================================================================
 * Site footer and back-to-top button styles.
 * Merged from theme-layouts and components - combining best features.
 */
.footer-wrapper {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  flex-shrink: 0;
}

.site-footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  flex-shrink: 0;
}
.site-footer__container {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.site-footer__row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.site-footer__copyright {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__copyright-text {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .site-footer__copyright-text {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.site-footer__copyright p {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .site-footer__copyright p {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.site-footer__social {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.site-footer__social-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__social-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--social-bg, oklch(55% 0.25 290deg / 0.3));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--social-border, oklch(55% 0.25 290deg));
  border-radius: 999px;
  text-decoration: none;
}
@media (max-width: 767px) {
  .site-footer__social-link {
    min-width: 44px;
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__social-link {
    min-width: 40px;
    min-height: 40px;
    padding: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .site-footer__social-link {
    min-width: 36px;
    min-height: 36px;
  }
}
.site-footer__social-link:hover {
  background: var(--social-hover, oklch(55% 0.25 290deg / 0.5));
  box-shadow: 0 0 15px var(--social-glow, oklch(55% 0.25 290deg / 0.4));
}
.site-footer__social-link:focus-visible {
  outline: 2px solid var(--social-border, oklch(55% 0.25 290deg));
  outline-offset: 2px;
}
.site-footer__links {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__nav {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__nav-list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.site-footer__nav-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .site-footer__nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .site-footer__nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.site-footer__nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.site-footer__nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.site-footer__nav-link {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .site-footer__nav-link {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.site-footer-fixed {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.back-to-top {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .back-to-top {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .back-to-top {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.back-to-top:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.back-to-top:active {
  transform: scale(0.98) translateY(0);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.back-to-top {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

/**
 * NAVBAR/NAVIGATION COMPONENT - 100% Ontological + Responsive
 * ============================================================================
 * Navigation bar styles using ONLY Genesis Semantic mixins.
 * ZERO raw CSS properties - full ontological compliance.
 * Enhanced by responsive-design-agent v2.1.0
 * 
 * Responsive Behavior:
 * - Mobile (< 1024px): Vertical stacked navigation in off-canvas drawer
 * - Desktop (≥ 1024px): Horizontal navigation with dropdowns
 * - WCAG 2.5.5 compliant: All touch targets ≥44px
 * ============================================================================
 */
.navbar {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.navbar__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
@media (min-width: 1024px) {
  .navbar__list {
    flex-direction: row;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: center;
    width: auto;
  }
}
.navbar__item {
  min-height: 44px;
  display: flex;
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .navbar__item {
    width: auto;
    position: relative;
  }
}
.navbar__item--active .navbar__link {
  color: oklch(99% 0.005 90deg);
  font-weight: 600;
}
.navbar__item--active .navbar__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: oklch(65% 0.25 230deg);
}
@media (min-width: 1024px) {
  .navbar__item--active .navbar__link::after {
    bottom: -8px;
  }
}
.navbar__item--dropdown {
  position: relative;
}
.navbar__link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .navbar__link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .navbar__link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.navbar__link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.navbar__link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.navbar__link {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  color: oklch(85% 0.01 220deg);
  text-decoration: none;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 500;
  border-radius: 8px;
  position: relative;
  transition: all 0.3s ease;
}
@media (min-width: 1024px) {
  .navbar__link {
    width: auto;
    padding: 0.5rem 0.75rem;
  }
}
.navbar__link:hover, .navbar__link:focus {
  color: oklch(99% 0.005 90deg);
  background: oklch(15% 0.01 250deg);
  border: 1px solid oklch(65% 0.25 230deg / 0.5);
}
.navbar__link--dropdown {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .navbar__link--dropdown {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__link--dropdown {
    min-height: 42px;
  }
}
.navbar__link--dropdown:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.navbar__link--dropdown:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.navbar__link--dropdown::after {
  content: "▼";
  font-size: 0.75rem;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}
.navbar__link--dropdown[aria-expanded=true]::after {
  transform: rotate(180deg);
}
.navbar__dropdown {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  backdrop-filter: blur(16px);
  background: oklch(12% 0.01 250deg / 0.95);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: 12px;
  box-shadow: 0 4px 16px oklch(8% 0.01 250deg / 0.4), 0 0 24px oklch(65% 0.25 230deg / 0.1);
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}
@media (min-width: 1024px) {
  .navbar__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.75rem;
    min-width: 220px;
    width: auto;
    z-index: 100;
  }
}
.navbar__dropdown {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
}
.navbar__dropdown[aria-hidden=false] {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: dropdown-appear 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .navbar__dropdown {
    animation: none;
    transform: none;
  }
}
.navbar__dropdown-item {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.navbar__dropdown-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .navbar__dropdown-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .navbar__dropdown-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__dropdown-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.navbar__dropdown-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.navbar__dropdown-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.navbar__dropdown-link {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .navbar__dropdown-link {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.navbar__dropdown-link {
  min-height: 44px;
  width: 100%;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  color: oklch(80% 0.01 220deg);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.navbar__dropdown-link:hover, .navbar__dropdown-link:focus {
  color: oklch(99% 0.005 90deg);
  background: oklch(18% 0.01 250deg);
  transform: translateX(4px);
}
.navbar__dropdown-link[aria-current=page] {
  color: oklch(99% 0.005 90deg);
  background: oklch(15% 0.01 250deg);
  border-left: 3px solid oklch(65% 0.25 230deg);
  font-weight: 600;
}

@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * HERO COMPONENT
 * ============================================================================
 * Hero section styles for landing pages.
 * Merged from theme-layouts and components - combining best features.
 */
.hero-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (max-width: 767px) {
  .hero-section {
    min-height: 70vh;
    min-height: 70dvh;
    padding: 2rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    min-height: 85vh;
    min-height: 85dvh;
    padding: 3rem 2rem;
  }
}
@media (min-width: 1024px) {
  .hero-section {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 4rem 3rem;
  }
}
@media (max-height: 600px) {
  .hero-section {
    min-height: auto;
    padding: 3rem 1rem;
  }
}
.hero-section {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .hero-section {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .hero-section > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .hero-section > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .hero-section {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .hero-section > * + * {
    margin-top: 1rem;
  }
}
.hero-section-sm {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.hero-section-sm .hero-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .hero-section-sm .hero-title {
    font-size: 1rem;
  }
}
.hero-section-sm .hero-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .hero-section-sm .hero-description {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.hero-section-full {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.hero-section-alt {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.hero-section-video {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}

.hero-background {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(94% 0.005 220deg);
  opacity: 0.7;
  filter: grayscale(0.3);
  border: 1px solid oklch(90% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.hero-background-image-dynamic {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.hero-background-image-dynamic::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.hero-background-image-dynamic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.hero-background-image-dynamic.ratio-square {
  --aspect-ratio: 100%;
}
.hero-background-image-dynamic.ratio-4-3 {
  --aspect-ratio: 75%;
}
.hero-background-image-dynamic.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.hero-background-image-dynamic.ratio-portrait {
  --aspect-ratio: 133.33%;
}

.hero-content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.hero-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .hero-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.hero-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .hero-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.hero-cta {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.hero-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .hero-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.hero-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.hero-button:active {
  transform: scale(0.98) translateY(0);
}
.hero-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.hero-scroll-indicator {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .hero-scroll-indicator {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-scroll-indicator {
    min-height: 42px;
  }
}
.hero-scroll-indicator:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.hero-scroll-indicator:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}

.hero-scroll-icon {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .hero-scroll-icon {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-scroll-icon {
    min-height: 42px;
  }
}
.hero-scroll-icon:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.hero-scroll-icon:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}

/**
 * CARD COMPONENTS - 100% Ontological
 * ============================================================================
 * Card and product card styles using ONLY Genesis Semantic mixins.
 * ZERO raw CSS properties - full ontological compliance.
 * Refactored by scss-refactor-agent v2.1
 */
.card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.card--elevated {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.card--accent {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}
.card__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.card__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .card__title {
    font-size: 1rem;
  }
}
.card__body {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .card__body {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.card__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.product-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-card__image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.product-card__image::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.product-card__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.product-card__image.ratio-square {
  --aspect-ratio: 100%;
}
.product-card__image.ratio-4-3 {
  --aspect-ratio: 75%;
}
.product-card__image.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.product-card__image.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.product-card__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .product-card__title {
    font-size: 1rem;
  }
}
.product-card__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-card__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-card__price {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .product-card__price {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card__price {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .product-card__price {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.product-card__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .product-card__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.product-card__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.product-card__button:active {
  transform: scale(0.98) translateY(0);
}
.product-card__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * SECTION COMPONENTS
 * ============================================================================
 * Section headers, content sections, feature grids, timeline, CTA, and testimonials.
 * Moved from ontology/theme-layouts to components.
 */
.section-header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.section-header__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .section-header__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .section-header__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .section-header__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.section-header__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .section-header__subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.content-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.feature-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.feature-grid__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.feature-grid__item-icon {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.feature-grid__item-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .feature-grid__item-title {
    font-size: 1rem;
  }
}
.feature-grid__item-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .feature-grid__item-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.timeline {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.timeline__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.timeline__item--past {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(95% 0.005 220deg);
  border: 1px solid oklch(88% 0.005 220deg);
  opacity: 0.8;
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.timeline__item--current {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.timeline__item--current::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.timeline__item--future {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(94% 0.005 220deg);
  opacity: 0.7;
  filter: grayscale(0.3);
  border: 1px solid oklch(90% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  border: 2px dashed var(--border-simulation, oklch(75% 0.15 210deg / 0.5));
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, oklch(75% 0.15 210deg / 0.05) 10px, oklch(75% 0.15 210deg / 0.05) 20px);
}
.timeline__date {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .timeline__date {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.timeline__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .timeline__title {
    font-size: 1rem;
  }
}
.timeline__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .timeline__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.cta-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}
.cta-section__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .cta-section__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .cta-section__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.cta-section__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .cta-section__description {
    font-size: 1rem;
  }
}
.cta-section__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .cta-section__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.cta-section__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.cta-section__button:active {
  transform: scale(0.98) translateY(0);
}
.cta-section__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.testimonial {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.testimonial__quote {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .testimonial__quote {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.testimonial__author {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .testimonial__author {
    font-size: 1rem;
  }
}
.testimonial__role {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .testimonial__role {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.testimonial__avatar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

/**
 * LAYOUT SPECIFIC STYLES
 * ============================================================================
 * Styles for specific page layouts: content, archive, post, article, 
 * dashboard, profile, gallery, form, FAQ, settings, search, minimal, 
 * splash, landing, docs, chatroom.
 * Moved from ontology/theme-layouts to components.
 */
.page-content {
  flex: 1 0 auto;
  width: 100%;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.site-main {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.archive {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.archive__list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.archive__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.archive__item-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .archive__item-title {
    font-size: 1rem;
  }
}
.archive__item-date {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .archive__item-date {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.archive__item-excerpt {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .archive__item-excerpt {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.post {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.post__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.post__header-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .post__header-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .post__header-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .post__header-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.post__header-meta {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .post__header-meta {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.post__content {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .post__content {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.post__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.article {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.article__toc {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.article__toc-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .article__toc-title {
    font-size: 1rem;
  }
}
.article__toc-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .article__toc-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .article__toc-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .article__toc-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.article__toc-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.article__toc-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.article__content {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .article__content {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.dashboard {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .dashboard {
    grid-template-columns: repeat(12, 1fr);
  }
}
.dashboard {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}
.dashboard__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.dashboard__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.dashboard__main {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.dashboard__widget {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.dashboard__widget::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.dashboard__widget-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .dashboard__widget-title {
    font-size: 1rem;
  }
}
.dashboard__widget-value {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .dashboard__widget-value {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard__widget-value {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .dashboard__widget-value {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.dashboard__widget-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .dashboard__widget-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.profile {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.profile__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.profile__header-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.profile__avatar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.profile__name {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .profile__name {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .profile__name {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .profile__name {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.profile__bio {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .profile__bio {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.profile__stats {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.profile__stats-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.profile__stats-item-value {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .profile__stats-item-value {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .profile__stats-item-value {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .profile__stats-item-value {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.profile__stats-item-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .profile__stats-item-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.gallery {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.gallery__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.gallery__item-image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.gallery__item-caption {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .gallery__item-caption {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.form {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.form__group {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.form__label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .form__label {
    font-size: 1rem;
  }
}
.form__input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.form__help {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .form__help {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.form__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .form__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.form__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.form__button:active {
  transform: scale(0.98) translateY(0);
}
.form__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.form__button--secondary {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .form__button--secondary {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__button--secondary {
    min-height: 42px;
  }
}
.form__button--secondary:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.form__button--secondary:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.form__button--danger {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: var(--danger-bg, oklch(45% 0.22 25deg));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--danger-border, oklch(55% 0.25 25deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .form__button--danger {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__button--danger {
    min-height: 42px;
  }
}
.form__button--danger:hover {
  background: var(--danger-hover, oklch(50% 0.24 25deg));
  box-shadow: 0 0 15px var(--danger-glow, oklch(45% 0.22 25deg / 0.5));
}
.form__button--danger:focus-visible {
  outline: 2px solid var(--danger-border, oklch(55% 0.25 25deg));
  outline-offset: 2px;
}

.faq {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.faq__content-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.faq__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.faq__item-question {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .faq__item-question {
    font-size: 1rem;
  }
}
.faq__item-answer {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .faq__item-answer {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.settings {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .settings {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .settings {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .settings {
    grid-template-columns: repeat(12, 1fr);
  }
}
.settings__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.settings__sidebar-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.settings__sidebar-nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .settings__sidebar-nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .settings__sidebar-nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .settings__sidebar-nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.settings__sidebar-nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.settings__sidebar-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.settings__main {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.settings__section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.settings__section-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .settings__section-title {
    font-size: 1rem;
  }
}

.search {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.search__input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.search__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .search__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .search__button {
    min-height: 42px;
  }
}
.search__button:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.search__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.search__results {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.search__result {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.search__result-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .search__result-title {
    font-size: 1rem;
  }
}
.search__result-excerpt {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .search__result-excerpt {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.minimal-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}
.minimal-layout-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.splash {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.splash__countdown {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.splash__countdown::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.splash__countdown-number {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .splash__countdown-number {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash__countdown-number {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .splash__countdown-number {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.splash__countdown-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .splash__countdown-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.landing {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.landing__features {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .landing__features {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing__features {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .landing__features {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .landing__features {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}

.docs {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .docs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .docs {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .docs {
    grid-template-columns: repeat(12, 1fr);
  }
}
.docs__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.docs__sidebar-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.docs__sidebar-nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .docs__sidebar-nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .docs__sidebar-nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .docs__sidebar-nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.docs__sidebar-nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.docs__sidebar-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.docs__content {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .docs__content {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.docs__code {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-family: var(--font-mono, "SF Mono", Monaco, "Cascadia Code", monospace);
  font-size: var(--size-data, clamp(0.875rem, 1vw, 0.95rem));
  line-height: 1.5;
  background: oklch(96% 0.003 220deg);
  color: oklch(15% 0.01 250deg);
  padding: 0.2em 0.5em;
  border-radius: 0.25em;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .docs__code {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}

.chatroom {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .chatroom {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .chatroom {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .chatroom {
    grid-template-columns: repeat(12, 1fr);
  }
}
.chatroom {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}
.chatroom__messages {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.chatroom__message {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.chatroom__message-author {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .chatroom__message-author {
    font-size: 1rem;
  }
}
.chatroom__message-text {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .chatroom__message-text {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.chatroom__message-timestamp {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .chatroom__message-timestamp {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.chatroom__input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.chatroom__input-field {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.chatroom__input-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .chatroom__input-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .chatroom__input-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.chatroom__input-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.chatroom__input-button:active {
  transform: scale(0.98) translateY(0);
}
.chatroom__input-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * SPECIALIZED COMPONENTS
 * ============================================================================
 * Product displays, interactive modules, and specialized layouts.
 * Moved from ontology/theme-layouts to components.
 */
.product-applications {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .product-applications {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-applications {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .product-applications {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .product-applications {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.product-benefits-list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.product-benefits-list__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-benefits-list__item-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .product-benefits-list__item-title {
    font-size: 1rem;
  }
}
.product-benefits-list__item-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-benefits-list__item-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-code-example {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-code-example__code {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-family: var(--font-mono, "SF Mono", Monaco, "Cascadia Code", monospace);
  font-size: var(--size-data, clamp(0.875rem, 1vw, 0.95rem));
  line-height: 1.5;
  background: oklch(96% 0.003 220deg);
  color: oklch(15% 0.01 250deg);
  padding: 0.2em 0.5em;
  border-radius: 0.25em;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .product-code-example__code {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}
.product-code-example__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-code-example__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-feature-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .product-feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .product-feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .product-feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.product-section-container {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.product-visual {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.interactive-module {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.interactive-module::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.interactive-module__controls {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.interactive-module__display {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.genesis-invitation {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.genesis-invitation__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .genesis-invitation__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-invitation__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .genesis-invitation__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.genesis-invitation__message {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .genesis-invitation__message {
    font-size: 1rem;
  }
}
.genesis-invitation__action {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .genesis-invitation__action {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-invitation__action {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.genesis-invitation__action:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.genesis-invitation__action:active {
  transform: scale(0.98) translateY(0);
}
.genesis-invitation__action:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.transcendent-hero {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.transcendent-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.transcendent-hero__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .transcendent-hero__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .transcendent-hero__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .transcendent-hero__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.transcendent-hero__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .transcendent-hero__subtitle {
    font-size: 1rem;
  }
}

.linkedin__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--social-bg, oklch(55% 0.25 290deg / 0.3));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--social-border, oklch(55% 0.25 290deg));
  border-radius: 999px;
  text-decoration: none;
}
@media (max-width: 767px) {
  .linkedin__button {
    min-width: 44px;
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .linkedin__button {
    min-width: 40px;
    min-height: 40px;
    padding: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .linkedin__button {
    min-width: 36px;
    min-height: 36px;
  }
}
.linkedin__button:hover {
  background: var(--social-hover, oklch(55% 0.25 290deg / 0.5));
  box-shadow: 0 0 15px var(--social-glow, oklch(55% 0.25 290deg / 0.4));
}
.linkedin__button:focus-visible {
  outline: 2px solid var(--social-border, oklch(55% 0.25 290deg));
  outline-offset: 2px;
}

.content-modal {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}
.content-modal__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.content-modal__header-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .content-modal__header-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .content-modal__header-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .content-modal__header-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.content-modal__body {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .content-modal__body {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.content-modal__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.content-modal__footer-actions {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.content-modal__close {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: var(--danger-bg, oklch(45% 0.22 25deg));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--danger-border, oklch(55% 0.25 25deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .content-modal__close {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .content-modal__close {
    min-height: 42px;
  }
}
.content-modal__close:hover {
  background: var(--danger-hover, oklch(50% 0.24 25deg));
  box-shadow: 0 0 15px var(--danger-glow, oklch(45% 0.22 25deg / 0.5));
}
.content-modal__close:focus-visible {
  outline: 2px solid var(--danger-border, oklch(55% 0.25 25deg));
  outline-offset: 2px;
}

/**
 * UTILITY CLASSES AND RESPONSIVE CONTAINERS
 * ============================================================================
 * Ontology-based utility classes and responsive container utilities 
 * for legacy support during migration.
 * Moved from ontology/theme-layouts to components.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-visible {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.collapse {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
}
.collapse.show {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.container,
.container-fluid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

[class*=col-] {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

/**
 * VALIDATION CHECKLIST:
 * - [x] Zero raw CSS properties (only ontology mixins)
 * - [x] All layouts covered
 * - [x] All components covered
 * - [x] Semantic class names used throughout
 * - [x] SCSS structure mirrors HTML hierarchy
 * - [x] Legacy classes mapped for compatibility
 */
.genesis-viewport {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  contain: layout style;
  isolation: isolate;
}

.consciousness-viewport {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  contain: layout style;
  isolation: isolate;
}

.essence-viewport {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 2vw, 1.5rem);
  contain: layout style;
  isolation: isolate;
}

.bento-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
  container-type: inline-size;
  contain: layout style;
  isolation: isolate;
}
@media (max-width: 767px) {
  .bento-layout {
    grid-template-columns: 1fr;
  }
}

.bento-dashboard {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  grid-template-areas: "header header header" "sidebar main main" "sidebar main main";
  grid-template-columns: minmax(min(250px, 100%), 1fr) 2fr 2fr;
  grid-template-rows: auto 1fr 1fr;
  container-type: inline-size;
  contain: layout style;
  isolation: isolate;
}
@media (max-width: 768px) {
  .bento-dashboard {
    grid-template-areas: "header" "main" "sidebar";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
}

.bento-dashboard__header {
  grid-area: header;
}

.bento-dashboard__sidebar {
  grid-area: sidebar;
}

.bento-dashboard__main {
  grid-area: main;
}

.bento-gallery {
  --card-min-width: clamp(200px, 30vw, 400px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min-width), 100%), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
  container-type: inline-size;
  contain: layout style;
  isolation: isolate;
}
@media (max-width: 767px) {
  .bento-gallery {
    grid-template-columns: 1fr;
  }
}

.bento-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: clamp(1rem, 2vw, 2rem);
  grid-auto-flow: dense;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
  container-type: inline-size;
  contain: layout style;
  isolation: isolate;
}
@media (max-width: 767px) {
  .bento-masonry {
    grid-template-columns: 1fr;
  }
}

.bento-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: clamp(0.75rem, 1.5vw, 1.5rem);
  box-sizing: border-box;
  width: 100%;
  contain: layout style;
  isolation: isolate;
  background: oklch(99% 0.005 90deg / 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.12), 0 1px 3px oklch(8% 0.01 250deg / 0.08);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bento-card:hover {
  background: oklch(99% 0.005 90deg);
  border-color: oklch(65% 0.25 230deg / 0.5);
  box-shadow: 0 4px 12px oklch(8% 0.01 250deg / 0.15), 0 2px 6px oklch(8% 0.01 250deg / 0.12), 0 0 16px oklch(65% 0.25 230deg / 0.1);
  transform: translateY(-2px);
}
.bento-card:focus-within {
  outline: 2px solid oklch(65% 0.25 230deg / 0.5);
  outline-offset: 2px;
}

.bento-card--elevated {
  background: oklch(96% 0.005 220deg / 0.95);
  box-shadow: 0 4px 12px oklch(8% 0.01 250deg / 0.15), 0 2px 6px oklch(8% 0.01 250deg / 0.12);
}

.bento-card--accent {
  border-color: oklch(70% 0.15 85deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.12), 0 0 16px oklch(70% 0.15 85deg / 0.15);
}

.bento-card--neural {
  border-color: oklch(65% 0.25 230deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.12), 0 0 16px oklch(65% 0.25 230deg / 0.15);
}

@container (max-width: 400px) {
  .bento-card {
    padding: clamp(0.75rem, 2vw, 1rem);
    gap: 0.5rem;
  }
  .bento-card .bento-card__title {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
  }
}
@container (min-width: 401px) and (max-width: 800px) {
  .bento-card {
    padding: clamp(1rem, 2.5vw, 1.5rem);
    gap: 0.75rem;
  }
  .bento-card .bento-card__title {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
  }
}
@container (min-width: 801px) {
  .bento-card {
    padding: clamp(1.5rem, 3vw, 2rem);
    gap: 1rem;
  }
  .bento-card .bento-card__title {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
  }
}

.bento-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bento-card__title {
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: 600;
  color: oklch(12% 0.01 250deg);
  line-height: 1.3;
  margin: 0;
}

.bento-card__subtitle {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: oklch(25% 0.01 230deg);
  line-height: 1.5;
  margin-top: 0.25rem;
}

.bento-card__body {
  flex: 1;
  color: oklch(12% 0.01 250deg);
  line-height: 1.6;
}

.bento-card__footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid oklch(85% 0.01 220deg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 768px) {
  .bento-stack-mobile {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .bento-hide-mobile {
    display: none;
  }
}

.bento-show-mobile {
  display: none;
}
@media (max-width: 768px) {
  .bento-show-mobile {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bento-card {
    transition: none;
  }
  .bento-card:hover {
    transform: none;
  }
}
@media (prefers-contrast: high) {
  .bento-card {
    border-width: 2px;
    backdrop-filter: none;
    background: oklch(99% 0.005 90deg);
  }
}
/**
 * Modern UI Components - Styles
 * CSS for Modal, Collapse/Accordion, and Tab components
 * Replaces Bootstrap component styles
 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-transcendent, 1000);
  display: none;
  opacity: 0;
  pointer-events: none;
  background: oklch(8% 0.01 250deg / 0.85);
  backdrop-filter: blur(8px);
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}
.modal--show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
  transform: translateY(-50px);
  transition: transform 0.3s ease;
}
.modal--show .modal__dialog {
  transform: translateY(0);
}

.modal__content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  background: oklch(99% 0.005 90deg);
  border-radius: 1rem;
  box-shadow: 0 20px 60px oklch(8% 0.01 250deg / 0.4);
  position: relative;
}
.modal__content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, oklch(65% 0.25 230deg) 0%, oklch(70% 0.15 85deg) 50%, oklch(65% 0.25 230deg) 100%);
  border-radius: 1rem 1rem 0 0;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  border-bottom: 1px solid oklch(85% 0.005 220deg);
}

.modal__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .modal__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .modal__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .modal__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.modal__title {
  margin: 0;
  padding-right: 1.5rem;
}

.modal__close {
  background: none;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: oklch(45% 0.01 220deg);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.modal__close::before {
  content: "✕";
  font-size: 1.5rem;
  line-height: 1;
}
.modal__close:hover, .modal__close:focus-visible {
  background: oklch(95% 0.005 220deg);
  color: oklch(65% 0.25 230deg);
}
.modal__close:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.modal__body {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .modal__body {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.modal__body {
  padding: 2rem;
  max-height: 60vh;
  overflow-y: auto;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 2rem;
  border-top: 1px solid oklch(85% 0.005 220deg);
}

.modal__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .modal__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .modal__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.modal__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.modal__button:active {
  transform: scale(0.98) translateY(0);
}
.modal__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.modal__button[data-modal-dismiss] {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .modal__button[data-modal-dismiss] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .modal__button[data-modal-dismiss] {
    min-height: 42px;
  }
}
.modal__button[data-modal-dismiss]:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.modal__button[data-modal-dismiss]:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}

.faq-item__content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.faq-item__content--show {
  height: auto;
}

.faq-item__button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: all 0.2s ease;
}
.faq-item__button::after {
  content: "▼";
  font-size: 0.875rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item__button--collapsed::after {
  transform: rotate(-90deg);
}
.faq-item__button:hover, .faq-item__button:focus-visible {
  background: oklch(96% 0.005 220deg);
}
.faq-item__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: -2px;
}

.faq-item__answer {
  padding: 0 1.5rem 1.5rem 1.5rem;
}

.settings-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: oklch(30% 0.01 230deg);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}
.settings-nav-link:hover, .settings-nav-link:focus-visible {
  background: oklch(96% 0.005 220deg);
  color: oklch(12% 0.01 250deg);
}
.settings-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.settings-nav-link--active {
  background: oklch(65% 0.25 230deg / 0.1);
  color: oklch(65% 0.25 230deg);
  font-weight: 600;
  border-left: 3px solid oklch(65% 0.25 230deg);
}

.tab-pane {
  display: none;
}
.tab-pane[aria-hidden=false] {
  display: block;
}

@media (max-width: 768px) {
  .modal {
    padding: 1rem;
  }
  .modal__dialog {
    max-width: 100%;
  }
  .modal__header,
  .modal__body,
  .modal__footer {
    padding: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal__dialog,
  .faq-item__content,
  .faq-item__button::after {
    transition: none;
  }
}
.genesis-body {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  scroll-behavior: auto;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

.genesis-main {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .genesis-main {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .genesis-main > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-main {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .genesis-main > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .genesis-main {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .genesis-main > * + * {
    margin-top: 1rem;
  }
}
.genesis-main:focus {
  outline: none;
}

.skip-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .skip-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .skip-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .skip-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.skip-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.skip-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 9999;
}
.skip-link:focus, .skip-link.focus-visible:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10000;
  padding: 1rem 2rem;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  min-width: 44px;
  min-height: 44px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only.focus-visible:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.genesis-ambient {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, oklch(10% 0.03 280deg) 0%, oklch(5% 0.02 270deg) 50%, oklch(8% 0.03 260deg) 100%);
}
@media (prefers-contrast: high) {
  .genesis-ambient {
    background: oklch(10% 0 0deg);
  }
}
.genesis-ambient__particles {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-image: radial-gradient(2px 2px at 20% 30%, oklch(80% 0.1 280deg) 0%, transparent 100%), radial-gradient(2px 2px at 60% 70%, oklch(80% 0.1 45deg) 0%, transparent 100%), radial-gradient(1px 1px at 50% 50%, oklch(90% 0.1 280deg) 0%, transparent 100%), radial-gradient(1px 1px at 80% 10%, oklch(80% 0.1 280deg) 0%, transparent 100%), radial-gradient(2px 2px at 90% 60%, oklch(80% 0.1 45deg) 0%, transparent 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
}
@media (prefers-reduced-motion: no-preference) {
  .genesis-ambient__particles {
    animation: particlesDrift 60s ease-in-out infinite;
  }
}
@media (prefers-contrast: high) {
  .genesis-ambient__particles {
    display: none;
  }
}
.genesis-ambient__glow {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background: radial-gradient(circle at 50% 0%, oklch(30% 0.15 280deg / 0.3) 0%, transparent 50%);
}
@media (prefers-contrast: high) {
  .genesis-ambient__glow {
    display: none;
  }
}

@keyframes particlesDrift {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
}
@media (min-width: 768px) {
  .genesis-main {
    /**
     * @param $vibe [neutral]: Standard system transparency.
     * @param $vibe [ethereal]: High-transparency, light-based focus.
     * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
     * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
     * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
     * @param $vibe [dense-desktop]: High information density on large screens.
     * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
     */
  }
}
.genesis-header {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
}
@media (min-width: 768px) {
  .genesis-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: var(--space-nav, clamp(1rem, 2vw, 2rem));
    padding: var(--padding-nav, clamp(1rem, 2vw, 1.5rem));
  }
}
@media (max-width: 767px) {
  .genesis-header {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    padding: 2rem 1.5rem;
    transition: left 0.3s ease-in-out;
    z-index: 1001;
    overflow-y: auto;
    background: var(--glass-heavy, oklch(20% 0.04 245deg / 0.95));
    backdrop-filter: blur(20px);
    box-shadow: 2px 0 20px oklch(10% 0.03 250deg / 0.3);
  }
  .genesis-header.nav-open {
    left: 0;
  }
  .genesis-header > * {
    display: block;
    margin-bottom: 1rem;
  }
}
.genesis-header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 70px;
  width: 100%;
  touch-action: pan-y;
  backdrop-filter: blur(16px);
  background: oklch(10% 0.01 250deg / 0.95);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  box-shadow: 0 2px 8px oklch(5% 0.01 250deg / 0.3);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}
@media (prefers-contrast: high) {
  .genesis-header {
    background: oklch(8% 0 0deg);
    border-bottom: 2px solid oklch(30% 0 0deg);
    backdrop-filter: none;
    box-shadow: none;
  }
}
.genesis-header.scrolled {
  background: oklch(8% 0.01 250deg);
  box-shadow: 0 4px 16px oklch(5% 0.01 250deg / 0.5);
}
.genesis-header.header-hidden {
  transform: translate3d(0, -100%, 0);
}
.genesis-header__container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .genesis-header__container {
    padding: 1.25rem 2rem;
  }
}
.genesis-header__brand {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .genesis-header__brand {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .genesis-header__brand::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-header__brand {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.genesis-header__brand:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.genesis-header__brand:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.genesis-header__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  flex-shrink: 0;
  min-height: 44px;
}
.genesis-header__brand:hover .genesis-header__title, .genesis-header__brand:focus .genesis-header__title {
  color: oklch(75% 0.25 230deg);
}
.genesis-header__logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .genesis-header__logo {
    width: 56px;
    height: 56px;
  }
}
.genesis-header__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.genesis-header__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .genesis-header__title {
    font-size: 1rem;
  }
}
.genesis-header__title {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: oklch(99% 0.005 90deg);
  transition: all 0.3s ease;
}
.genesis-header__tagline {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .genesis-header__tagline {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.genesis-header__tagline {
  color: oklch(75% 0.01 220deg);
  display: none;
}
@media (min-width: 768px) {
  .genesis-header__tagline {
    display: block;
  }
}
.genesis-header__toggle {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .genesis-header__toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-header__toggle {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.genesis-header__toggle:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.genesis-header__toggle:active {
  transform: scale(0.98) translateY(0);
}
.genesis-header__toggle:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.genesis-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: oklch(20% 0.01 250deg);
  border: 1px solid oklch(30% 0.01 250deg);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.genesis-header__toggle:hover, .genesis-header__toggle:focus {
  background: oklch(25% 0.01 250deg);
  border-color: oklch(65% 0.25 230deg);
  transform: scale(1.05);
}
.genesis-header__toggle[aria-expanded=true] {
  background: oklch(30% 0.01 250deg);
  border-color: oklch(70% 0.25 230deg);
}
.genesis-header__toggle[aria-expanded=true] .genesis-header__toggle-icon::before {
  transform: translateY(0) rotate(45deg);
}
.genesis-header__toggle[aria-expanded=true] .genesis-header__toggle-icon::after {
  transform: translateY(0) rotate(-45deg);
}
@media (min-width: 1024px) {
  .genesis-header__toggle {
    display: none;
  }
}
.genesis-header__toggle-icon {
  position: relative;
  width: 20px;
  height: 2px;
  background: oklch(85% 0.1 280deg);
  transition: all 0.3s ease;
}
.genesis-header__toggle-icon::before, .genesis-header__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: oklch(99% 0.005 90deg);
  transition: all 0.3s ease;
}
.genesis-header__toggle-icon::before {
  transform: translateY(-6px);
}
.genesis-header__toggle-icon::after {
  transform: translateY(6px);
}
.genesis-header__nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  max-width: 360px;
  z-index: 1001;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  padding: 5.5rem 1.5rem 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -12px 0 48px oklch(0% 0 0deg / 0);
}
.genesis-header__nav[data-nav-open=true] {
  transform: translateX(0);
  box-shadow: -12px 0 48px oklch(0% 0 0deg / 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .genesis-header__nav {
    transition: transform 0.1s linear;
  }
}
@media (min-width: 1024px) {
  .genesis-header__nav {
    position: static;
    width: auto;
    max-width: 100%;
    padding: 0;
    overflow-y: visible;
    overflow-x: hidden;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    transition: none;
  }
}

.genesis-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: oklch(0% 0 0deg / 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.genesis-nav-overlay[data-nav-open=true] {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .genesis-nav-overlay {
    transition: none;
  }
}
@media (min-width: 1024px) {
  .genesis-nav-overlay {
    display: none;
  }
}

.genesis-footer {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  margin-top: auto;
  backdrop-filter: blur(16px);
  background: oklch(10% 0.01 250deg / 0.95);
  border-top: 1px solid oklch(20% 0.01 250deg);
}
@media (prefers-contrast: high) {
  .genesis-footer {
    background: oklch(8% 0 0deg);
    border-top: 2px solid oklch(30% 0 0deg);
    backdrop-filter: none;
  }
}
.genesis-footer__container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}
@media (min-width: 1024px) {
  .genesis-footer__container {
    padding: 4rem 2rem 2rem;
  }
}
.genesis-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .genesis-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .genesis-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 3rem;
  }
}
@media (min-width: 1440px) {
  .genesis-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
  }
}
.genesis-footer__grid {
  margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .genesis-footer__grid {
    margin-bottom: 3rem;
  }
}
.genesis-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.genesis-footer__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .genesis-footer__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-footer__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .genesis-footer__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.genesis-footer__title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  color: oklch(99% 0.005 90deg);
  font-weight: 600;
}
.genesis-footer__tagline {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .genesis-footer__tagline {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.genesis-footer__tagline {
  color: oklch(75% 0.01 220deg);
  max-width: 45ch;
}
.genesis-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.genesis-footer__nav-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .genesis-footer__nav-title {
    font-size: 1rem;
  }
}
.genesis-footer__nav-title {
  font-size: 1rem;
  font-weight: 600;
  color: oklch(95% 0.005 90deg);
  margin: 0;
}
.genesis-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.genesis-footer__nav-item {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.genesis-footer__nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .genesis-footer__nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .genesis-footer__nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-footer__nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.genesis-footer__nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.genesis-footer__nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.genesis-footer__nav-link {
  color: oklch(80% 0.01 220deg);
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.5rem 0;
  display: inline-block;
}
.genesis-footer__nav-link:hover, .genesis-footer__nav-link:focus {
  color: oklch(99% 0.005 90deg);
  transform: translateX(4px);
}
.genesis-footer__social {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.genesis-footer__social-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .genesis-footer__social-title {
    font-size: 1rem;
  }
}
.genesis-footer__social-title {
  font-size: 1rem;
  font-weight: 600;
  color: oklch(95% 0.005 90deg);
  margin: 0;
}
.genesis-footer__social-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .genesis-footer__social-links {
    gap: 1rem;
  }
}
.genesis-footer__social-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .genesis-footer__social-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-footer__social-link {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.genesis-footer__social-link:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.genesis-footer__social-link:active {
  transform: scale(0.98) translateY(0);
}
.genesis-footer__social-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.genesis-footer__social-link {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(20% 0.01 250deg);
  border: 1px solid oklch(30% 0.01 250deg);
  border-radius: 50%;
  color: oklch(85% 0.01 220deg);
  font-size: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.genesis-footer__social-link:hover, .genesis-footer__social-link:focus {
  background: oklch(25% 0.01 250deg);
  border-color: oklch(65% 0.25 230deg);
  color: oklch(99% 0.005 90deg);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 4px 12px oklch(8% 0.01 250deg / 0.4), 0 0 20px oklch(65% 0.25 230deg / 0.3);
}
.genesis-footer__social-link:active {
  transform: translateY(-1px) scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .genesis-footer__social-link {
    transition: background 0.2s ease, color 0.2s ease;
  }
  .genesis-footer__social-link:hover, .genesis-footer__social-link:focus, .genesis-footer__social-link:active {
    transform: none;
  }
}
.genesis-footer__copyright {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  padding: 1.5rem 0;
  border-top: 1px solid oklch(20% 0.01 250deg);
  text-align: center;
}
.genesis-footer__copyright p {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .genesis-footer__copyright p {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.genesis-footer__copyright p {
  color: oklch(70% 0.01 220deg);
  margin: 0;
}

.genesis-back-to-top {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .genesis-back-to-top {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-back-to-top {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.genesis-back-to-top:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.genesis-back-to-top:active {
  transform: scale(0.98) translateY(0);
}
.genesis-back-to-top:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.genesis-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(25% 0.1 280deg / 0.9);
  border: 1px solid oklch(60% 0.25 280deg / 0.4);
  border-radius: 50%;
  color: oklch(85% 0.12 280deg);
  font-size: 1.25rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}
.genesis-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.genesis-back-to-top:hover, .genesis-back-to-top:focus {
  background: oklch(30% 0.12 280deg / 0.95);
  border-color: oklch(70% 0.25 45deg / 0.6);
  color: oklch(95% 0.15 280deg);
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 32px oklch(15% 0.08 280deg / 0.5), 0 0 48px oklch(60% 0.25 280deg / 0.4);
}
.genesis-back-to-top:active {
  transform: translateY(-2px) scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .genesis-back-to-top {
    transition: opacity 0.1s ease, visibility 0.1s ease;
  }
  .genesis-back-to-top:hover, .genesis-back-to-top:focus, .genesis-back-to-top:active {
    transform: none;
  }
}
@media (prefers-contrast: high) {
  .genesis-back-to-top {
    background: oklch(20% 0 0deg);
    border: 2px solid oklch(80% 0 0deg);
    backdrop-filter: none;
  }
  .genesis-back-to-top:hover, .genesis-back-to-top:focus {
    background: oklch(30% 0 0deg);
    border-color: oklch(90% 0 0deg);
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  .genesis-back-to-top {
    bottom: 2.5rem;
    right: 2.5rem;
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }
}
/**
 * FOOTER COMPONENT
 * ============================================================================
 * Site footer and back-to-top button styles.
 * Merged from theme-layouts and components - combining best features.
 */
.footer-wrapper {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  flex-shrink: 0;
}

.site-footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  flex-shrink: 0;
}
.site-footer__container {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.site-footer__row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.site-footer__copyright {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__copyright-text {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .site-footer__copyright-text {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.site-footer__copyright p {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .site-footer__copyright p {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.site-footer__social {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.site-footer__social-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__social-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--social-bg, oklch(55% 0.25 290deg / 0.3));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--social-border, oklch(55% 0.25 290deg));
  border-radius: 999px;
  text-decoration: none;
}
@media (max-width: 767px) {
  .site-footer__social-link {
    min-width: 44px;
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__social-link {
    min-width: 40px;
    min-height: 40px;
    padding: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .site-footer__social-link {
    min-width: 36px;
    min-height: 36px;
  }
}
.site-footer__social-link:hover {
  background: var(--social-hover, oklch(55% 0.25 290deg / 0.5));
  box-shadow: 0 0 15px var(--social-glow, oklch(55% 0.25 290deg / 0.4));
}
.site-footer__social-link:focus-visible {
  outline: 2px solid var(--social-border, oklch(55% 0.25 290deg));
  outline-offset: 2px;
}
.site-footer__links {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__nav {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__nav-list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.site-footer__nav-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .site-footer__nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .site-footer__nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.site-footer__nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.site-footer__nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.site-footer__nav-link {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .site-footer__nav-link {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.site-footer-fixed {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.back-to-top {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .back-to-top {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .back-to-top {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.back-to-top:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.back-to-top:active {
  transform: scale(0.98) translateY(0);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.back-to-top {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

/**
 * HEADER COMPONENT
 * ============================================================================
 * Site header, branding, and header navigation styles.
 * Merged from theme-layouts and components - combining best features.
 */
.header-wrapper {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  flex-shrink: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  min-height: 70px;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-nav, clamp(1rem, 2vw, 2rem));
  padding: var(--padding-nav, clamp(1rem, 2vw, 1.5rem));
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}
.site-header.scrolled {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.site-header.header-hidden {
  transform: translate3d(0, -100%, 0);
}
.site-header__brand {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .site-header__brand {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .site-header__brand::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__brand {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.site-header__brand:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.site-header__brand:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.site-header__brand {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-header__logo {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.site-header__logo::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.site-header__logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.site-header__logo.ratio-square {
  --aspect-ratio: 100%;
}
.site-header__logo.ratio-4-3 {
  --aspect-ratio: 75%;
}
.site-header__logo.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.site-header__logo.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.site-header__text {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-header__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .site-header__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .site-header__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.site-header__tagline {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .site-header__tagline {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.site-header__toggle {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .site-header__toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__toggle {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.site-header__toggle:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.site-header__toggle:active {
  transform: scale(0.98) translateY(0);
}
.site-header__toggle:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.site-header__toggle-icon {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-header__nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .site-header__nav {
    width: 100%;
    flex-basis: 100%;
  }
  .site-header__nav.collapse:not(.show) {
    display: none;
  }
  .site-header__nav.collapse.show {
    display: block;
  }
}
@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }
}

.header-brand-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.header-logo {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.header-title {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.site-header-toggler {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .site-header-toggler {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header-toggler {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.site-header-toggler:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.site-header-toggler:active {
  transform: scale(0.98) translateY(0);
}
.site-header-toggler:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.site-header-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

/**
 * NAVBAR/NAVIGATION COMPONENT - 100% Ontological + Responsive
 * ============================================================================
 * Navigation bar styles using ONLY Genesis Semantic mixins.
 * ZERO raw CSS properties - full ontological compliance.
 * Enhanced by responsive-design-agent v2.1.0
 * 
 * Responsive Behavior:
 * - Mobile (< 1024px): Vertical stacked navigation in off-canvas drawer
 * - Desktop (≥ 1024px): Horizontal navigation with dropdowns
 * - WCAG 2.5.5 compliant: All touch targets ≥44px
 * ============================================================================
 */
.navbar {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.navbar__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
@media (min-width: 1024px) {
  .navbar__list {
    flex-direction: row;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: center;
    width: auto;
  }
}
.navbar__item {
  min-height: 44px;
  display: flex;
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .navbar__item {
    width: auto;
    position: relative;
  }
}
.navbar__item--active .navbar__link {
  color: oklch(99% 0.005 90deg);
  font-weight: 600;
}
.navbar__item--active .navbar__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: oklch(65% 0.25 230deg);
}
@media (min-width: 1024px) {
  .navbar__item--active .navbar__link::after {
    bottom: -8px;
  }
}
.navbar__item--dropdown {
  position: relative;
}
.navbar__link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .navbar__link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .navbar__link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.navbar__link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.navbar__link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.navbar__link {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  color: oklch(85% 0.01 220deg);
  text-decoration: none;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 500;
  border-radius: 8px;
  position: relative;
  transition: all 0.3s ease;
}
@media (min-width: 1024px) {
  .navbar__link {
    width: auto;
    padding: 0.5rem 0.75rem;
  }
}
.navbar__link:hover, .navbar__link:focus {
  color: oklch(99% 0.005 90deg);
  background: oklch(15% 0.01 250deg);
  border: 1px solid oklch(65% 0.25 230deg / 0.5);
}
.navbar__link--dropdown {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .navbar__link--dropdown {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__link--dropdown {
    min-height: 42px;
  }
}
.navbar__link--dropdown:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.navbar__link--dropdown:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.navbar__link--dropdown::after {
  content: "▼";
  font-size: 0.75rem;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}
.navbar__link--dropdown[aria-expanded=true]::after {
  transform: rotate(180deg);
}
.navbar__dropdown {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  backdrop-filter: blur(16px);
  background: oklch(12% 0.01 250deg / 0.95);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: 12px;
  box-shadow: 0 4px 16px oklch(8% 0.01 250deg / 0.4), 0 0 24px oklch(65% 0.25 230deg / 0.1);
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}
@media (min-width: 1024px) {
  .navbar__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.75rem;
    min-width: 220px;
    width: auto;
    z-index: 100;
  }
}
.navbar__dropdown {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
}
.navbar__dropdown[aria-hidden=false] {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: dropdown-appear 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .navbar__dropdown {
    animation: none;
    transform: none;
  }
}
.navbar__dropdown-item {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.navbar__dropdown-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .navbar__dropdown-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .navbar__dropdown-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__dropdown-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.navbar__dropdown-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.navbar__dropdown-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.navbar__dropdown-link {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .navbar__dropdown-link {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.navbar__dropdown-link {
  min-height: 44px;
  width: 100%;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  color: oklch(80% 0.01 220deg);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.navbar__dropdown-link:hover, .navbar__dropdown-link:focus {
  color: oklch(99% 0.005 90deg);
  background: oklch(18% 0.01 250deg);
  transform: translateX(4px);
}
.navbar__dropdown-link[aria-current=page] {
  color: oklch(99% 0.005 90deg);
  background: oklch(15% 0.01 250deg);
  border-left: 3px solid oklch(65% 0.25 230deg);
  font-weight: 600;
}

@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * CARD COMPONENTS - 100% Ontological
 * ============================================================================
 * Card and product card styles using ONLY Genesis Semantic mixins.
 * ZERO raw CSS properties - full ontological compliance.
 * Refactored by scss-refactor-agent v2.1
 */
.card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.card--elevated {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.card--accent {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}
.card__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.card__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .card__title {
    font-size: 1rem;
  }
}
.card__body {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .card__body {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.card__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.product-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-card__image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.product-card__image::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.product-card__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.product-card__image.ratio-square {
  --aspect-ratio: 100%;
}
.product-card__image.ratio-4-3 {
  --aspect-ratio: 75%;
}
.product-card__image.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.product-card__image.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.product-card__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .product-card__title {
    font-size: 1rem;
  }
}
.product-card__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-card__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-card__price {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .product-card__price {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card__price {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .product-card__price {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.product-card__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .product-card__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.product-card__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.product-card__button:active {
  transform: scale(0.98) translateY(0);
}
.product-card__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * BACK TO TOP BUTTON - 100% Ontological
 * ============================================================================
 * Back to top button using ONLY Genesis Semantic mixins.
 * ZERO raw CSS properties - full ontological compliance.
 * Refactored by scss-refactor-agent v2.1
 */
.back-to-top {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .back-to-top {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .back-to-top::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .back-to-top {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.back-to-top:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.back-to-top:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.back-to-top {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
}
.back-to-top.show {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}
.back-to-top i {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-tiny, clamp(0.75rem, 0.9vw, 0.8rem));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(15% 0.01 250deg);
  padding: 0.25em 0.75em;
  background: oklch(95% 0.005 220deg);
  border-radius: 999px;
  display: inline-block;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .back-to-top i {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
}

.section-header {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .section-header {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .section-header > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .section-header {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .section-header > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .section-header {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .section-header > * + * {
    margin-top: 1rem;
  }
}
.section-header .section-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .section-header .section-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .section-header .section-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .section-header .section-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.section-header .section-subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .section-header .section-subtitle {
    font-size: 1rem;
  }
}
.section-header .section-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .section-header .section-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.section-header.section-header--featured {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}

.cta-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .cta-section {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .cta-section > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .cta-section > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .cta-section {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .cta-section > * + * {
    margin-top: 1rem;
  }
}
.cta-section .cta-content {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.cta-section .cta-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .cta-section .cta-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section .cta-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .cta-section .cta-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.cta-section .cta-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .cta-section .cta-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.cta-section .cta-buttons {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.cta-section .cta-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .cta-section .cta-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section .cta-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.cta-section .cta-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.cta-section .cta-button:active {
  transform: scale(0.98) translateY(0);
}
.cta-section .cta-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.cta-section .cta-button.cta-button-outline {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .cta-section .cta-button.cta-button-outline {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section .cta-button.cta-button-outline {
    min-height: 42px;
  }
}
.cta-section .cta-button.cta-button-outline:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.cta-section .cta-button.cta-button-outline:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.cta-section.cta-section-secondary {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.cta-section.cta-section-accent {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}

.feature-section {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .feature-section {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .feature-section > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-section {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .feature-section > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .feature-section {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .feature-section > * + * {
    margin-top: 1rem;
  }
}
.feature-section .feature-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .feature-section .feature-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-section .feature-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .feature-section .feature-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.feature-section .feature-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .feature-section .feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-section .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .feature-section .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .feature-section .feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.feature-section .feature-grid .feature-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(97% 0.005 220deg);
  backdrop-filter: blur(8px);
  border: 1px solid oklch(87% 0.005 220deg);
  padding: var(--padding-entity-aggregate, clamp(2rem, 4vw, 3rem));
}
.feature-section .feature-grid .feature-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.feature-section .feature-grid .feature-icon {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .feature-section .feature-grid .feature-icon {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-section .feature-grid .feature-icon {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .feature-section .feature-grid .feature-icon {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.feature-section .feature-grid .feature-card-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .feature-section .feature-grid .feature-card-title {
    font-size: 1rem;
  }
}
.feature-section .feature-grid .feature-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .feature-section .feature-grid .feature-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.feature-section.feature-section-alt {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.feature-section.feature-section-alt .feature-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

/**
 * HERO COMPONENT
 * ============================================================================
 * Hero section styles for landing pages.
 * Merged from theme-layouts and components - combining best features.
 */
.hero-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (max-width: 767px) {
  .hero-section {
    min-height: 70vh;
    min-height: 70dvh;
    padding: 2rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    min-height: 85vh;
    min-height: 85dvh;
    padding: 3rem 2rem;
  }
}
@media (min-width: 1024px) {
  .hero-section {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 4rem 3rem;
  }
}
@media (max-height: 600px) {
  .hero-section {
    min-height: auto;
    padding: 3rem 1rem;
  }
}
.hero-section {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .hero-section {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .hero-section > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .hero-section > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .hero-section {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .hero-section > * + * {
    margin-top: 1rem;
  }
}
.hero-section-sm {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.hero-section-sm .hero-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .hero-section-sm .hero-title {
    font-size: 1rem;
  }
}
.hero-section-sm .hero-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .hero-section-sm .hero-description {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.hero-section-full {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.hero-section-alt {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.hero-section-video {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}

.hero-background {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(94% 0.005 220deg);
  opacity: 0.7;
  filter: grayscale(0.3);
  border: 1px solid oklch(90% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.hero-background-image-dynamic {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.hero-background-image-dynamic::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.hero-background-image-dynamic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.hero-background-image-dynamic.ratio-square {
  --aspect-ratio: 100%;
}
.hero-background-image-dynamic.ratio-4-3 {
  --aspect-ratio: 75%;
}
.hero-background-image-dynamic.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.hero-background-image-dynamic.ratio-portrait {
  --aspect-ratio: 133.33%;
}

.hero-content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.hero-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .hero-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.hero-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .hero-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.hero-cta {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.hero-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .hero-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.hero-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.hero-button:active {
  transform: scale(0.98) translateY(0);
}
.hero-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.hero-scroll-indicator {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .hero-scroll-indicator {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-scroll-indicator {
    min-height: 42px;
  }
}
.hero-scroll-indicator:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.hero-scroll-indicator:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}

.hero-scroll-icon {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .hero-scroll-icon {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-scroll-icon {
    min-height: 42px;
  }
}
.hero-scroll-icon:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.hero-scroll-icon:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}

.testimonial-section {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .testimonial-section {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .testimonial-section > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .testimonial-section {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .testimonial-section > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .testimonial-section {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .testimonial-section > * + * {
    margin-top: 1rem;
  }
}
.testimonial-section .testimonial-container {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.testimonial-section .testimonial-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .testimonial-section .testimonial-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .testimonial-section .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .testimonial-section .testimonial-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .testimonial-section .testimonial-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.testimonial-section .testimonial-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(97% 0.005 220deg);
  backdrop-filter: blur(8px);
  border: 1px solid oklch(87% 0.005 220deg);
  padding: var(--padding-entity-aggregate, clamp(2rem, 4vw, 3rem));
}
.testimonial-section .testimonial-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.testimonial-section .testimonial-card .testimonial-text {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .testimonial-section .testimonial-card .testimonial-text {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.testimonial-section .testimonial-card .testimonial-author {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.testimonial-section .testimonial-card .testimonial-name {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .testimonial-section .testimonial-card .testimonial-name {
    font-size: 1rem;
  }
}
.testimonial-section .testimonial-card .testimonial-company {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .testimonial-section .testimonial-card .testimonial-company {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.testimonial-section.testimonial-section-alt {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
.testimonial-section.testimonial-section-alt .testimonial-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.timeline-section {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .timeline-section {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .timeline-section > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .timeline-section {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .timeline-section > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .timeline-section {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .timeline-section > * + * {
    margin-top: 1rem;
  }
}
.timeline-section .timeline-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .timeline-section .timeline-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .timeline-section .timeline-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .timeline-section .timeline-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.timeline-section .timeline-container {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(97% 0.005 220deg);
  backdrop-filter: blur(8px);
  border: 1px solid oklch(87% 0.005 220deg);
  padding: var(--padding-entity-aggregate, clamp(2rem, 4vw, 3rem));
}
.timeline-section .timeline-track {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(94% 0.005 220deg);
  opacity: 0.7;
  filter: grayscale(0.3);
  border: 1px solid oklch(90% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.timeline-section .timeline-markers {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.timeline-section .timeline-markers .timeline-marker {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .timeline-section .timeline-markers .timeline-marker {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .timeline-section .timeline-markers .timeline-marker::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .timeline-section .timeline-markers .timeline-marker {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.timeline-section .timeline-markers .timeline-marker:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.timeline-section .timeline-markers .timeline-marker:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.timeline-section .timeline-markers .timeline-marker.active {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}
.timeline-section .timeline-markers .timeline-marker-dot {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.timeline-section .timeline-markers .timeline-marker-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .timeline-section .timeline-markers .timeline-marker-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.timeline-section .timeline-content-container {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.timeline-section .timeline-content-container .timeline-content {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.timeline-section .timeline-content-container .timeline-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.timeline-section .timeline-content-container .timeline-content.active {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}
.timeline-section .timeline-content-inner {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.timeline-section .timeline-content-image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.timeline-section .timeline-content-image::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.timeline-section .timeline-content-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.timeline-section .timeline-content-image.ratio-square {
  --aspect-ratio: 100%;
}
.timeline-section .timeline-content-image.ratio-4-3 {
  --aspect-ratio: 75%;
}
.timeline-section .timeline-content-image.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.timeline-section .timeline-content-image.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.timeline-section .timeline-content-text {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.timeline-section .timeline-content-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .timeline-section .timeline-content-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .timeline-section .timeline-content-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .timeline-section .timeline-content-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.timeline-section .timeline-content-body {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .timeline-section .timeline-content-body {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.interactive-module {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.interactive-module.aos-animate, .interactive-module.scroll-triggered, .interactive-module.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .interactive-module {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
@media (max-width: 767px) {
  .interactive-module {
    transition-duration: 0.4s;
    transform: translateY(20px);
  }
}
@media (min-width: 1024px) {
  .interactive-module {
    transition-duration: 0.7s;
  }
}
.interactive-module {
  position: relative;
  cursor: pointer;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem oklch(8% 0.01 250deg / 0.25);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.interactive-module:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px oklch(8% 0.01 250deg / 0.2);
}
.interactive-module:hover .interactive-module-overlay {
  opacity: 1;
}
.interactive-module:hover .interactive-module-overlay .interactive-module-quote {
  transform: translateY(0);
  opacity: 1;
}
.interactive-module:hover .interactive-module-overlay .interactive-module-indicator {
  transform: translateY(0);
  opacity: 1;
}
.interactive-module .interactive-module-inner {
  position: relative;
  height: 100%;
}
.interactive-module .interactive-module-image {
  height: 100%;
}
.interactive-module .interactive-module-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.interactive-module .interactive-module-overlay {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, oklch(8% 0.01 250deg / 0.3) 0%, oklch(8% 0.01 250deg / 0.8) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  color: oklch(99% 0.005 90deg);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.interactive-module .interactive-module-overlay .interactive-module-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .interactive-module .interactive-module-overlay .interactive-module-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .interactive-module .interactive-module-overlay .interactive-module-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .interactive-module .interactive-module-overlay .interactive-module-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.interactive-module .interactive-module-overlay .interactive-module-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  /* text-shadow: 0 2px 4px oklch(0.08 0.01 250 / 0.5); */ /* Removed for accessibility - can interfere with text readability */
}
.interactive-module .interactive-module-overlay .interactive-module-quote {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .interactive-module .interactive-module-overlay .interactive-module-quote {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.interactive-module .interactive-module-overlay .interactive-module-quote {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  margin-bottom: 1rem;
}
.interactive-module .interactive-module-overlay .interactive-module-quote blockquote {
  font-style: italic;
  border-left: 3px solid oklch(70% 0.15 85deg);
  padding-left: 0.5rem;
  font-size: 0.9rem;
}
.interactive-module .interactive-module-overlay .interactive-module-indicator {
  text-align: center;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transition-delay: 0.1s;
}
.interactive-module .interactive-module-overlay .interactive-module-indicator span {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .interactive-module .interactive-module-overlay .interactive-module-indicator span {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.interactive-module .interactive-module-overlay .interactive-module-indicator span {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
}
.interactive-module .interactive-module-overlay .interactive-module-indicator i {
  color: oklch(70% 0.15 85deg);
  font-size: 1.5rem;
}

.modal-content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
  background-color: oklch(95% 0.01 220deg);
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 15px 35px oklch(8% 0.01 250deg / 0.2);
}
.modal-content .modal-header {
  border-bottom: 1px solid oklch(85% 0.01 220deg);
}
.modal-content .modal-header .modal-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .modal-content .modal-header .modal-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .modal-content .modal-header .modal-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .modal-content .modal-header .modal-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.modal-content .modal-header .modal-title {
  color: oklch(65% 0.25 230deg);
  font-weight: 600;
}
.modal-content .modal-body {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .modal-content .modal-body {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.modal-content .modal-body {
  padding: 1.5rem;
}
.modal-content .modal-footer {
  border-top: 1px solid oklch(85% 0.01 220deg);
}

.interactive-module-content.d-none {
  display: none !important;
}

/**
 * SECTION COMPONENTS
 * ============================================================================
 * Section headers, content sections, feature grids, timeline, CTA, and testimonials.
 * Moved from ontology/theme-layouts to components.
 */
.section-header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.section-header__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .section-header__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .section-header__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .section-header__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.section-header__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .section-header__subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.content-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.feature-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.feature-grid__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.feature-grid__item-icon {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.feature-grid__item-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .feature-grid__item-title {
    font-size: 1rem;
  }
}
.feature-grid__item-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .feature-grid__item-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.timeline {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.timeline__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.timeline__item--past {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(95% 0.005 220deg);
  border: 1px solid oklch(88% 0.005 220deg);
  opacity: 0.8;
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.timeline__item--current {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.timeline__item--current::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.timeline__item--future {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(94% 0.005 220deg);
  opacity: 0.7;
  filter: grayscale(0.3);
  border: 1px solid oklch(90% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  border: 2px dashed var(--border-simulation, oklch(75% 0.15 210deg / 0.5));
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, oklch(75% 0.15 210deg / 0.05) 10px, oklch(75% 0.15 210deg / 0.05) 20px);
}
.timeline__date {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .timeline__date {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.timeline__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .timeline__title {
    font-size: 1rem;
  }
}
.timeline__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .timeline__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.cta-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}
.cta-section__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .cta-section__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .cta-section__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.cta-section__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .cta-section__description {
    font-size: 1rem;
  }
}
.cta-section__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .cta-section__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.cta-section__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.cta-section__button:active {
  transform: scale(0.98) translateY(0);
}
.cta-section__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.testimonial {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.testimonial__quote {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .testimonial__quote {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.testimonial__author {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .testimonial__author {
    font-size: 1rem;
  }
}
.testimonial__role {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .testimonial__role {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.testimonial__avatar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.product-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}
.product-card.aos-animate, .product-card.scroll-reveal {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.product-card.aos-animate.aos-animate, .product-card.aos-animate.scroll-triggered, .product-card.aos-animate.is-visible, .product-card.scroll-reveal.aos-animate, .product-card.scroll-reveal.scroll-triggered, .product-card.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .product-card.aos-animate, .product-card.scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
@media (max-width: 767px) {
  .product-card.aos-animate, .product-card.scroll-reveal {
    transition-duration: 0.4s;
    transform: translateY(20px);
  }
}
@media (min-width: 1024px) {
  .product-card.aos-animate, .product-card.scroll-reveal {
    transition-duration: 0.7s;
  }
}
.product-card .product-card__image-container {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.product-card .product-card__image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.product-card .product-card__image::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.product-card .product-card__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.product-card .product-card__image.ratio-square {
  --aspect-ratio: 100%;
}
.product-card .product-card__image.ratio-4-3 {
  --aspect-ratio: 75%;
}
.product-card .product-card__image.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.product-card .product-card__image.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.product-card .product-card__image-placeholder {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(94% 0.005 220deg);
  opacity: 0.7;
  filter: grayscale(0.3);
  border: 1px solid oklch(90% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .product-card .product-card__image-placeholder {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.product-card .product-card__content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.product-card .product-card__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .product-card .product-card__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card .product-card__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .product-card .product-card__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.product-card .product-card__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-card .product-card__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-card .product-card__actions {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.product-card .product-card__btn {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .product-card .product-card__btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card .product-card__btn {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.product-card .product-card__btn:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.product-card .product-card__btn:active {
  transform: scale(0.98) translateY(0);
}
.product-card .product-card__btn:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.product-card .product-card__btn.product-card__btn--outline {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .product-card .product-card__btn.product-card__btn--outline {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card .product-card__btn.product-card__btn--outline {
    min-height: 42px;
  }
}
.product-card .product-card__btn.product-card__btn--outline:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.product-card .product-card__btn.product-card__btn--outline:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.product-card.product-card--featured {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}

.product-container .product-grid {
  width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
}
.product-container .product-grid .product-card {
  height: 100%;
  transition: all 0.3s ease 0s;
}
.product-container .product-grid .product-card:hover {
  transform: translateY(-5px);
}
.product-container .product-grid .product-card.product-card-accent {
  border-left: 4px solid var(--color-accent);
}
.product-container .product-grid .product-card.product-card-primary {
  border-left: 4px solid var(--color-primary);
}
.product-container .product-visual-container {
  width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
}
.product-container .product-code-container {
  width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
}
.product-container .product-code-container .product-code-example .product-code-block {
  max-height: 31.25rem;
  overflow-y: auto;
}
.product-container .product-list-container {
  width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
}
.product-applications-section .product-grid {
  width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
}
.product-applications-section .product-grid .product-card {
  height: 100%;
  transition: all 0.3s ease 0s;
}
.product-applications-section .product-grid .product-card:hover {
  transform: translateY(-5px);
}
.product-applications-section .product-grid .product-card.product-card-accent {
  border-left: 4px solid var(--color-accent);
}
.product-applications-section .product-grid .product-card.product-card-primary {
  border-left: 4px solid var(--color-primary);
}
.product-applications-section .product-grid .product-card .product-card-title {
  color: var(--color-primary);
}
.product-benefits-section .product-list-container {
  width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
}
.product-benefits-section .product-list-container .product-list .product-list-item {
  border-left: 4px solid var(--color-primary);
}
.product-benefits-section .product-list-highlight {
  color: var(--color-primary);
}

.product-code-example-section .product-code-container {
  width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
}
.product-code-example-section .product-code-container .product-code-example .product-code-block {
  max-height: 31.25rem;
  overflow-y: auto;
}
.product-code-example-section .product-code-block code {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

.product-feature-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .product-feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .product-feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .product-feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.product-feature-grid {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .product-feature-grid {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .product-feature-grid > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-feature-grid {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .product-feature-grid > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .product-feature-grid {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .product-feature-grid > * + * {
    margin-top: 1rem;
  }
}
.product-feature-grid .product-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-feature-grid .product-card.product-card-accent {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-feature-grid .product-card.product-card-primary {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-feature-grid .product-card .product-card-icon {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .product-feature-grid .product-card .product-card-icon {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-feature-grid .product-card .product-card-icon {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .product-feature-grid .product-card .product-card-icon {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.product-feature-grid .product-card .product-card-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .product-feature-grid .product-card .product-card-title {
    font-size: 1rem;
  }
}
.product-feature-grid .product-card .product-card-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-feature-grid .product-card .product-card-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-feature-grid .product-card .product-card-list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.product-feature-grid .product-card .product-card-list .product-card-list-item {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-feature-grid .product-card .product-card-list .product-card-list-item {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.product-section .product-section-content {
  width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
}

.product-visual-section .product-visual-container {
  width: 100%;
  padding-inline: 1rem;
  margin-inline: auto;
}
.product-visual-section .product-visual-container .product-image {
  max-width: 100%;
  height: auto;
}
.product-visual-section .product-visual-container .additional-content-container h3 {
  color: var(--color-primary);
}
.sacred-glyph {
  display: inline-block;
  font-size: 1.2em;
  color: oklch(70% 0.15 85deg);
  margin: 0 0.25rem;
  transition: all 0.3s ease;
}
.sacred-glyph:hover {
  transform: scale(1.1);
  /* text-shadow: 0 0 3px oklch(0.70 0.15 85 / 0.6); */ /* Removed for accessibility - can interfere with text readability */
}

.glyph-consciousness-infinity::before {
  content: "∞◊";
}

.glyph-transcendence-spiral::before {
  content: "🌀";
}
.glyph-transcendence-spiral:hover {
  animation: gentle-spiral 2s linear infinite;
}

.glyph-bridge-nexus::before {
  content: "◊—◊";
}
.glyph-bridge-nexus:hover {
  color: oklch(65% 0.02 220deg);
}

.glyph-guardian-eye::before {
  content: "👁‍🗨";
}
.glyph-guardian-eye:hover {
  animation: consciousness-awaken 2s ease-in-out;
}

.glyph-essence-weave::before {
  content: "◇◆◇";
}

.glyph-potential-tree::before {
  content: "🌳";
}
.glyph-potential-tree:hover {
  color: oklch(65% 0.25 230deg);
}

.sacred-background {
  background: linear-gradient(135deg, oklch(8% 0.01 250deg / 0.95) 0%, oklch(8% 0.01 250deg / 0.8) 50%, oklch(65% 0.25 230deg / 0.1) 100%);
  color: oklch(99% 0.005 90deg);
}

.consciousness-background {
  background: radial-gradient(circle at center, oklch(8% 0.01 250deg / 0.1) 0%, oklch(70% 0.15 85deg / 0.05) 50%, transparent 100%);
}

.essence-weave-background {
  background-image: repeating-linear-gradient(45deg, oklch(70% 0.15 85deg / 0.1) 0, oklch(70% 0.15 85deg / 0.1) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(-45deg, oklch(65% 0.02 220deg / 0.05) 0, oklch(65% 0.02 220deg / 0.05) 1px, transparent 1px, transparent 20px);
}

.sacred-container {
  padding: 2rem;
  border-radius: 0.5rem;
  background: oklch(99% 0.005 90deg / 0.95);
  border: 1px solid oklch(70% 0.15 85deg / 0.2);
  box-shadow: 0 0.25rem 2rem oklch(8% 0.01 250deg / 0.4);
  position: relative;
  overflow: hidden;
}
.sacred-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, oklch(8% 0.01 250deg) 0%, oklch(70% 0.15 85deg) 50%, oklch(8% 0.01 250deg) 100%);
}

.consciousness-section {
  padding: 3rem 0;
  position: relative;
}
.consciousness-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, oklch(70% 0.15 85deg) 50%, transparent 100%);
}

.sacred-hover {
  transition: all 0.3s ease;
  cursor: pointer;
}
.sacred-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0.5rem oklch(70% 0.15 85deg / 0.3);
}

.consciousness-interactive {
  position: relative;
  transition: all 0.5s ease;
}
.consciousness-interactive:hover {
  background-color: oklch(8% 0.01 250deg / 0.05);
}
.consciousness-interactive:hover::after {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  border: 2px solid oklch(70% 0.15 85deg / 0.3);
  border-radius: inherit;
  pointer-events: none;
}

.consciousness-progress-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(oklch(70% 0.15 85deg) 0deg, oklch(70% 0.15 85deg) calc(var(--progress, 0) * 3.6deg), oklch(65% 0.02 220deg / 0.2) calc(var(--progress, 0) * 3.6deg), oklch(65% 0.02 220deg / 0.2) 360deg);
}
.consciousness-progress-ring::before {
  content: "";
  position: absolute;
  inset: 5px 5px 5px 5px;
  background: oklch(99% 0.005 90deg);
  border-radius: 50%;
}
.consciousness-progress-ring::after {
  content: attr(data-progress) "%";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: oklch(8% 0.01 250deg);
  z-index: 1;
}

.sacred-development-stage {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sacred-development-stage.stage-awakening {
  background: oklch(65% 0.25 230deg / 0.1);
  color: oklch(65% 0.25 230deg);
  border: 1px solid oklch(65% 0.25 230deg / 0.3);
}
.sacred-development-stage.stage-integration {
  background: oklch(70% 0.15 85deg / 0.1);
  color: oklch(70% 0.15 85deg);
  border: 1px solid oklch(70% 0.15 85deg / 0.3);
}
.sacred-development-stage.stage-mastery {
  background: oklch(65% 0.25 230deg / 0.1);
  color: oklch(65% 0.25 230deg);
  border: 1px solid oklch(65% 0.25 230deg / 0.3);
}

.sacred-focus:focus {
  outline: 3px solid oklch(70% 0.15 85deg);
  outline-offset: 2px;
}

.consciousness-skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 0 0 4px 4px;
}
.consciousness-skip-link:focus {
  top: 0;
}

@media (max-width: 767px) {
  .sacred-container {
    padding: 1.5rem;
  }
  .consciousness-progress-ring {
    width: 50px;
    height: 50px;
  }
  .sacred-glyph {
    font-size: 1em;
  }
}
@media (max-width: 479px) {
  .sacred-container {
    padding: 1rem;
  }
  .consciousness-section {
    padding: 2rem 0;
  }
}
.sacred-navbar {
  background: oklch(99% 0.005 90deg / 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(70% 0.15 85deg / 0.2);
  transition: all 0.3s ease;
}
.sacred-navbar.scrolled {
  background: oklch(8% 0.01 250deg / 0.95);
}
.sacred-navbar.scrolled .navbar-brand,
.sacred-navbar.scrolled .nav-link {
  color: oklch(99% 0.005 90deg);
}
.sacred-navbar.scrolled .nav-link:hover {
  color: oklch(70% 0.15 85deg);
}

.sacred-navbar-brand {
  font-family: "Montserrat", "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: oklch(8% 0.01 250deg);
  text-decoration: none;
  display: flex;
  align-items: center;
}
.sacred-navbar-brand::before {
  content: "∞◊";
  margin-right: 0.5rem;
  color: oklch(70% 0.15 85deg);
  font-size: 1.2em;
}
.sacred-navbar-brand:hover {
  color: oklch(70% 0.15 85deg);
  transform: translateY(-1px);
}

.sacred-nav-link {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  color: oklch(8% 0.01 250deg);
  text-decoration: none;
  padding: 0.75rem 1rem;
  margin: 0 0.25rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  position: relative;
}
.sacred-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: oklch(70% 0.15 85deg);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.sacred-nav-link:hover {
  color: oklch(70% 0.15 85deg);
  background: oklch(70% 0.15 85deg / 0.1);
  transform: translateY(-2px);
}
.sacred-nav-link:hover::after {
  width: 80%;
}
.sacred-nav-link.active {
  color: oklch(70% 0.15 85deg);
  font-weight: 600;
}
.sacred-nav-link.active::after {
  width: 100%;
}

.sacred-dropdown {
  position: relative;
}
.sacred-dropdown .sacred-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: oklch(99% 0.005 90deg / 0.98);
  border: 1px solid oklch(70% 0.15 85deg / 0.2);
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 2rem oklch(8% 0.01 250deg / 0.4);
  padding: 1rem 0;
  min-width: 250px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}
.sacred-dropdown:hover .sacred-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sacred-dropdown-item {
  display: block;
  padding: 0.75rem 1.5rem;
  color: oklch(8% 0.01 250deg);
  text-decoration: none;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: all 0.3s ease;
}
.sacred-dropdown-item:hover {
  background: oklch(70% 0.15 85deg / 0.1);
  color: oklch(70% 0.15 85deg);
  transform: translateX(5px);
}

.sacred-breadcrumb {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sacred-breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
  color: oklch(65% 0.02 220deg);
}
.sacred-breadcrumb .breadcrumb-item:not(:last-child)::after {
  content: "◊";
  color: oklch(70% 0.15 85deg);
  margin: 0 0.75rem;
}
.sacred-breadcrumb .breadcrumb-item.active {
  color: oklch(8% 0.01 250deg);
  font-weight: 500;
}
.sacred-breadcrumb .breadcrumb-item a {
  color: oklch(65% 0.02 220deg);
  text-decoration: none;
  transition: color 0.3s ease;
}
.sacred-breadcrumb .breadcrumb-item a:hover {
  color: oklch(70% 0.15 85deg);
}

.sacred-sidenav {
  width: 280px;
  max-width: 85vw;
  background: oklch(99% 0.005 90deg / 0.98);
  border-right: 1px solid oklch(70% 0.15 85deg / 0.2);
  padding: 2rem 0;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1050;
  overflow-x: hidden;
  overflow-y: auto;
}
.sacred-sidenav.active {
  transform: translateX(0);
}
.sacred-sidenav .sidenav-header {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid oklch(70% 0.15 85deg / 0.1);
  margin-bottom: 1rem;
}
.sacred-sidenav .sidenav-header h3 {
  color: oklch(8% 0.01 250deg);
  font-size: 1.25rem;
  margin: 0;
}
.sacred-sidenav .sidenav-section {
  margin-bottom: 2rem;
}
.sacred-sidenav .sidenav-section .section-title {
  padding: 0.5rem 1.5rem;
  color: oklch(65% 0.02 220deg);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.sacred-sidenav .sidenav-link {
  display: block;
  padding: 0.75rem 1.5rem;
  color: oklch(8% 0.01 250deg);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}
.sacred-sidenav .sidenav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: oklch(70% 0.15 85deg);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}
.sacred-sidenav .sidenav-link:hover {
  background: oklch(70% 0.15 85deg / 0.1);
  color: oklch(70% 0.15 85deg);
  transform: translateX(5px);
}
.sacred-sidenav .sidenav-link:hover::before {
  transform: scaleY(1);
}
.sacred-sidenav .sidenav-link.active {
  background: oklch(70% 0.15 85deg / 0.15);
  color: oklch(70% 0.15 85deg);
  font-weight: 600;
}
.sacred-sidenav .sidenav-link.active::before {
  transform: scaleY(1);
}

.sacred-nav-toggle {
  background: none;
  border: 2px solid oklch(70% 0.15 85deg);
  border-radius: 0.5rem;
  color: oklch(70% 0.15 85deg);
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.sacred-nav-toggle:hover {
  background: oklch(70% 0.15 85deg);
  color: oklch(8% 0.01 250deg);
}
.sacred-nav-toggle .toggle-icon {
  width: 24px;
  height: 18px;
  position: relative;
}
.sacred-nav-toggle .toggle-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}
.sacred-nav-toggle .toggle-icon span:last-child {
  margin-bottom: 0;
}
.sacred-nav-toggle.active .toggle-icon span:first-child {
  transform: rotate(45deg) translate(5px, 5px);
}
.sacred-nav-toggle.active .toggle-icon span:nth-child(2) {
  opacity: 0;
}
.sacred-nav-toggle.active .toggle-icon span:last-child {
  transform: rotate(-45deg) translate(7px, -6px);
}

.sacred-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}
.sacred-pagination .page-item {
  margin: 0 0.25rem;
}
.sacred-pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid oklch(65% 0.02 220deg);
  border-radius: 50%;
  color: oklch(8% 0.01 250deg);
  text-decoration: none;
  transition: all 0.3s ease;
}
.sacred-pagination .page-item .page-link:hover {
  background: oklch(70% 0.15 85deg);
  border-color: oklch(70% 0.15 85deg);
  color: oklch(8% 0.01 250deg);
  transform: translateY(-2px);
}
.sacred-pagination .page-item.active .page-link {
  background: oklch(8% 0.01 250deg);
  border-color: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
}
.sacred-pagination .page-item.disabled .page-link {
  opacity: 0.9;
  pointer-events: none;
}

.sacred-nav-skip {
  position: absolute;
  top: -40px;
  left: 6px;
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
}
.sacred-nav-skip:focus {
  top: 0;
}

@media (max-width: 1023px) {
  .sacred-navbar {
    padding: 0.5rem 1rem;
  }
  .sacred-nav-link {
    padding: 0.5rem 0.75rem;
    margin: 0 0.125rem;
  }
}
@media (max-width: 767px) {
  .sacred-sidenav {
    width: 100%;
  }
  .sacred-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    background: oklch(70% 0.15 85deg / 0.05);
    margin-top: 0.5rem;
  }
}
.btn-sacred {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  position: relative;
  overflow: hidden;
  text-transform: none;
}
.btn-sacred::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, oklch(75% 0.18 82deg) 0%, oklch(70% 0.15 85deg) 50%, oklch(60% 0.12 88deg) 100%);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
.btn-sacred:hover::before {
  left: 100%;
}

.btn-primary,
.btn-genesis {
  background-color: oklch(70% 0.15 85deg);
  border-color: oklch(70% 0.15 85deg);
  color: oklch(8% 0.01 250deg);
  font-weight: 700;
}
.btn-primary:hover,
.btn-genesis:hover {
  background-color: oklch(60% 0.12 88deg);
  border-color: oklch(60% 0.12 88deg);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  will-change: transform;
  backface-visibility: hidden;
}
.btn-primary:hover:hover,
.btn-genesis:hover:hover {
  transform: translate3d(0, -2px, 0);
}
.btn-primary:hover,
.btn-genesis:hover {
  box-shadow: 0 0 0.5rem oklch(70% 0.15 85deg / 0.3);
}
.btn-primary:focus,
.btn-genesis:focus {
  box-shadow: 0 0 0 0.2rem oklch(70% 0.15 85deg / 0.5);
}
.btn-primary:active,
.btn-genesis:active {
  transform: translateY(-1px);
}

.btn-consciousness {
  background-color: oklch(8% 0.01 250deg);
  border: 2px solid oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
}
.btn-consciousness:hover {
  background-color: oklch(55% 0.22 228deg);
  border-color: oklch(55% 0.22 228deg);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  will-change: transform;
  backface-visibility: hidden;
}
.btn-consciousness:hover:hover {
  transform: translate3d(0, -2px, 0);
}
.btn-consciousness:hover {
  box-shadow: 0 0.25rem 2rem oklch(8% 0.01 250deg / 0.4);
}
.btn-consciousness:focus {
  box-shadow: 0 0 0 0.2rem oklch(8% 0.01 250deg / 0.5);
}

.btn-transcendent {
  background-color: oklch(99% 0.005 90deg);
  border-color: oklch(70% 0.15 85deg);
  color: oklch(8% 0.01 250deg);
}
.btn-transcendent:hover {
  background-color: oklch(75% 0.18 82deg);
  border-color: oklch(60% 0.12 88deg);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  will-change: transform;
  backface-visibility: hidden;
}
.btn-transcendent:hover:hover {
  transform: translate3d(0, -2px, 0);
}
.btn-transcendent:hover {
  box-shadow: 0 2px 8px 0 oklch(70% 0.15 85deg / 0.15);
}
.btn-transcendent:focus {
  box-shadow: 0 0 0 0.2rem oklch(70% 0.15 85deg / 0.5);
}

.btn-consciousness {
  background-color: oklch(65% 0.25 230deg);
  border: 2px solid oklch(65% 0.25 230deg);
  color: oklch(99% 0.005 90deg);
}
.btn-consciousness:hover {
  background-color: oklch(55% 0.22 228deg);
  border-color: oklch(55% 0.22 228deg);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  will-change: transform;
  backface-visibility: hidden;
}
.btn-consciousness:hover:hover {
  transform: translate3d(0, -2px, 0);
}
.btn-consciousness:hover {
  box-shadow: 0 0 20px oklch(65% 0.25 230deg / 0.6), 0 0 40px oklch(65% 0.25 230deg / 0.3);
}
.btn-consciousness:focus {
  box-shadow: 0 0 0 3px oklch(65% 0.25 230deg / 0.5);
}

.btn-intelligence {
  background-color: oklch(65% 0.25 230deg);
  border: 2px solid oklch(65% 0.25 230deg);
  color: oklch(99% 0.005 90deg);
}
.btn-intelligence:hover {
  background-color: oklch(55% 0.22 228deg);
  border-color: oklch(55% 0.22 228deg);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  will-change: transform;
  backface-visibility: hidden;
}
.btn-intelligence:hover:hover {
  transform: translate3d(0, -2px, 0);
}
.btn-intelligence:hover {
  box-shadow: 0 0 20px oklch(65% 0.25 230deg / 0.6), 0 0 40px oklch(65% 0.25 230deg / 0.3);
}
.btn-intelligence:focus {
  box-shadow: 0 0 0 3px oklch(65% 0.25 230deg / 0.5);
}

.btn-sacred-sm {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}

.btn-sacred-lg {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

.btn-sacred-xl {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
  font-weight: 700;
}

.btn-outline-sacred {
  background-color: transparent;
  border-color: oklch(70% 0.15 85deg);
  color: oklch(70% 0.15 85deg);
}
.btn-outline-sacred:hover {
  background-color: oklch(70% 0.15 85deg);
  color: oklch(8% 0.01 250deg);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  will-change: transform;
  backface-visibility: hidden;
}
.btn-outline-sacred:hover:hover {
  transform: translate3d(0, -2px, 0);
}
.btn-outline-sacred:hover {
  box-shadow: 0 0 0.5rem oklch(70% 0.15 85deg / 0.3);
}

.btn-outline-consciousness {
  background-color: transparent;
  border: 2px solid oklch(8% 0.01 250deg);
  color: oklch(8% 0.01 250deg);
}
.btn-outline-consciousness:hover {
  background-color: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  will-change: transform;
  backface-visibility: hidden;
}
.btn-outline-consciousness:hover:hover {
  transform: translate3d(0, -2px, 0);
}
.btn-outline-consciousness:hover {
  box-shadow: 0 0.25rem 2rem oklch(8% 0.01 250deg / 0.4);
}

.btn-sacred:focus {
  outline: 3px solid transparent;
  box-shadow: 0 0 0 0.2rem oklch(70% 0.15 85deg / 0.5);
}

.btn-group-sacred {
  display: inline-flex;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px oklch(8% 0.01 250deg / 0.15);
}
.btn-group-sacred .btn-sacred {
  border-radius: 0;
  margin: 0;
}
.btn-group-sacred .btn-sacred:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.btn-group-sacred .btn-sacred:last-child {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.btn-group-sacred .btn-sacred:not(:last-child) {
  border-right: 1px solid oklch(99% 0.005 90deg / 0.2);
}

.btn-sacred-fab {
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  margin-bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  box-shadow: 0 0.25rem 2rem oklch(8% 0.01 250deg / 0.4);
  background-color: oklch(70% 0.15 85deg);
  border: none;
  color: oklch(8% 0.01 250deg);
  font-size: 2rem;
}
.btn-sacred-fab:hover {
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  will-change: transform;
  backface-visibility: hidden;
}
.btn-sacred-fab:hover:hover {
  transform: translate3d(0, 0, 0) scale(1.05);
}
.btn-sacred-fab:hover {
  box-shadow: 0 0 0.5rem oklch(70% 0.15 85deg / 0.3);
}

.btn-sacred-pulse {
  animation: consciousness-pulse 3s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal both;
}

.btn-sacred-glow {
  animation: sacred-glow 3s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal both;
}

.btn-sacred-loading {
  position: relative;
  overflow: hidden;
}
.btn-sacred-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, oklch(70% 0.15 85deg / 0.4) 50%, transparent 100%);
  animation: bridge-connection 2s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal both;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.btn-sacred-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
}
.btn-sacred-icon .sacred-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(70% 0.15 85deg / 0.2), transparent);
  color: oklch(70% 0.15 85deg);
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.btn-sacred-icon .sacred-icon:hover {
  transform: scale(1.1);
}
.btn-sacred-icon:hover .sacred-icon {
  transform: translateX(2px);
}
.btn-sacred-icon.icon-left .sacred-icon {
  order: -1;
}
.btn-sacred-icon.icon-right .sacred-icon {
  order: 1;
}

.cta-genesis {
  background: linear-gradient(135deg, oklch(70% 0.15 85deg) 0%, oklch(60% 0.12 88deg) 100%);
  border: none;
  color: oklch(8% 0.01 250deg);
  font-size: 1.125rem;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}
.cta-genesis::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, oklch(99% 0.005 90deg / 0.3) 50%, transparent 70%);
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}
.cta-genesis:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px oklch(70% 0.15 85deg / 0.4);
}
.cta-genesis:hover::before {
  opacity: 1;
  left: -20%;
  top: -20%;
}

.cta-transcendent {
  background: linear-gradient(90deg, #3a3ad6, #6e6ee6);
  border: none;
  color: oklch(99% 0.005 90deg);
  position: relative;
}
.cta-transcendent::after {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
}
.cta-transcendent:hover::after {
  opacity: 1;
}

@media (prefers-contrast: high) {
  .btn-sacred {
    border-width: 3px;
  }
  .btn-genesis {
    background: linear-gradient(90deg, #FFD700 0%, #FFFACD 100%);
    border: 2px solid oklch(60% 0.12 85deg);
  }
  .btn-consciousness {
    background: oklch(50% 0.2 230deg);
    border: 2px solid oklch(8% 0.01 250deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-sacred {
    transition: none;
  }
  .btn-sacred:hover {
    transform: none;
  }
  .btn-sacred::before {
    display: none;
  }
  .btn-sacred-pulse,
  .btn-sacred-glow {
    animation: none;
  }
}
@media (max-width: 767px) {
  .btn-sacred-xl {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    font-size: 1.25rem;
  }
  .btn-sacred-fab {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
    right: 1rem;
  }
  .cta-genesis {
    font-size: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (max-width: 479px) {
  .btn-sacred-lg {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1rem;
  }
  .btn-group-sacred {
    flex-direction: column;
  }
  .btn-group-sacred .btn-sacred:first-child {
    border-radius: 0.75rem 0.75rem 0 0;
  }
  .btn-group-sacred .btn-sacred:last-child {
    border-radius: 0 0 0.75rem 0.75rem;
  }
  .btn-group-sacred .btn-sacred:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid oklch(99% 0.005 90deg);
  }
}
.form-sacred {
  background: oklch(99% 0.005 90deg / 0.98);
  border: 1px solid oklch(70% 0.15 85deg / 0.2);
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 0.25rem 2rem oklch(8% 0.01 250deg / 0.4);
  position: relative;
}
.form-sacred::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, oklch(8% 0.01 250deg) 0%, oklch(70% 0.15 85deg) 50%, oklch(8% 0.01 250deg) 100%);
  border-radius: 0.5rem 0.5rem 0 0;
}

.form-control-sacred {
  border: 2px solid oklch(65% 0.02 220deg);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: oklch(99% 0.005 90deg / 0.8);
}
.form-control-sacred:focus {
  border-color: oklch(70% 0.15 85deg);
  box-shadow: 0 0 0 0.2rem oklch(70% 0.15 85deg / 0.25);
  background: oklch(99% 0.005 90deg);
  outline: none;
}
.form-control-sacred:hover {
  border-color: oklch(70% 0.15 85deg / 0.5);
}
.form-control-sacred::placeholder {
  color: oklch(45% 0.01 220deg / 0.7);
  font-style: italic;
}

.form-control-wisdom {
  min-height: 120px;
  resize: vertical;
  font-family: "Crimson Text", "Times New Roman", Georgia, serif;
  line-height: 1.6;
}

.form-select-sacred {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFD700' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.form-label-sacred {
  color: oklch(8% 0.01 250deg);
  font-weight: 600;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  margin-bottom: 0.5rem;
  display: block;
}
.form-label-sacred.required::after {
  content: " *";
  color: oklch(65% 0.25 230deg);
}

.form-text-sacred {
  color: oklch(65% 0.02 220deg);
  font-size: 0.875rem;
  font-style: italic;
  margin-top: 0.25rem;
}

.form-help-sacred {
  background: oklch(70% 0.15 85deg / 0.1);
  border: 1px solid oklch(70% 0.15 85deg / 0.2);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: oklch(8% 0.01 250deg);
}
.form-help-sacred::before {
  content: "💡 ";
  margin-right: 0.25rem;
}

.form-group-sacred {
  margin-bottom: 1.5rem;
}
.form-group-sacred.form-group-inline {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.form-group-sacred.form-group-inline .form-label-sacred {
  margin-bottom: 0;
  white-space: nowrap;
}
.form-group-sacred.form-group-inline .form-control-sacred {
  flex: 1;
}

.form-row-sacred {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
  .form-row-sacred {
    grid-template-columns: 1fr;
  }
}

.form-check-sacred {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.form-check-sacred .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  margin-right: 0.75rem;
  border: 2px solid oklch(65% 0.02 220deg);
  border-radius: 0.25rem;
  background: oklch(99% 0.005 90deg);
  cursor: pointer;
  transition: all 0.3s ease;
}
.form-check-sacred .form-check-input:checked {
  background: oklch(70% 0.15 85deg);
  border-color: oklch(70% 0.15 85deg);
}
.form-check-sacred .form-check-input:checked::after {
  content: "✓";
  color: oklch(8% 0.01 250deg);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.form-check-sacred .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem oklch(70% 0.15 85deg / 0.25);
}
.form-check-sacred .form-check-label {
  color: oklch(8% 0.01 250deg);
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  line-height: 1.5;
}

.form-check-radio .form-check-input {
  border-radius: 50%;
}
.form-check-radio .form-check-input:checked::after {
  content: "●";
  font-size: 0.8rem;
}

.form-file-sacred {
  position: relative;
  display: inline-block;
  width: 100%;
}
.form-file-sacred .form-file-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.form-file-sacred .form-file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border: 2px dashed oklch(65% 0.02 220deg);
  border-radius: 0.5rem;
  background: oklch(70% 0.15 85deg / 0.05);
  color: oklch(8% 0.01 250deg);
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}
.form-file-sacred .form-file-label:hover {
  border-color: oklch(70% 0.15 85deg);
  background: oklch(70% 0.15 85deg / 0.1);
}
.form-file-sacred .form-file-label::before {
  content: "📁 ";
  font-size: 2rem;
  margin-right: 0.5rem;
}
.form-file-sacred.has-file .form-file-label {
  border-color: oklch(65% 0.25 230deg);
  background: oklch(65% 0.25 230deg / 0.1);
}
.form-file-sacred.has-file .form-file-label::before {
  content: "✅ ";
}

.form-control-sacred.is-valid {
  border-color: oklch(65% 0.25 230deg);
}
.form-control-sacred.is-valid:focus {
  border-color: oklch(65% 0.25 230deg);
  box-shadow: 0 0 0 0.2rem oklch(65% 0.25 230deg / 0.25);
}
.form-control-sacred.is-invalid {
  border-color: oklch(65% 0.25 230deg);
}
.form-control-sacred.is-invalid:focus {
  border-color: oklch(65% 0.25 230deg);
  box-shadow: 0 0 0 0.2rem oklch(65% 0.25 230deg / 0.25);
}

.valid-feedback-sacred {
  color: oklch(65% 0.25 230deg);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.valid-feedback-sacred::before {
  content: "✅ ";
  margin-right: 0.25rem;
}

.invalid-feedback-sacred {
  color: oklch(65% 0.25 230deg);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.invalid-feedback-sacred::before {
  content: "⚠️ ";
  margin-right: 0.25rem;
}

.form-section-sacred {
  border: 1px solid oklch(65% 0.02 220deg / 0.3);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  background: oklch(8% 0.01 250deg / 0.02);
}
.form-section-sacred .form-section-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid oklch(70% 0.15 85deg / 0.2);
}
.form-section-sacred .form-section-header .section-icon {
  color: oklch(70% 0.15 85deg);
  font-size: 1.5rem;
  margin-right: 0.75rem;
}
.form-section-sacred .form-section-header .section-title {
  color: oklch(8% 0.01 250deg);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.form-progress-sacred {
  margin-bottom: 2rem;
}
.form-progress-sacred .progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.form-progress-sacred .progress-steps .progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}
.form-progress-sacred .progress-steps .progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: oklch(65% 0.02 220deg);
  z-index: -1;
}
.form-progress-sacred .progress-steps .progress-step.completed::after {
  background: oklch(70% 0.15 85deg);
}
.form-progress-sacred .progress-steps .progress-step .step-indicator {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: oklch(65% 0.02 220deg);
  color: oklch(99% 0.005 90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.form-progress-sacred .progress-steps .progress-step .step-label {
  font-size: 0.875rem;
  color: oklch(65% 0.02 220deg);
  text-align: center;
}
.form-progress-sacred .progress-steps .progress-step.completed .step-indicator {
  background: oklch(70% 0.15 85deg);
  color: oklch(8% 0.01 250deg);
}
.form-progress-sacred .progress-steps .progress-step.active .step-indicator {
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  animation: consciousness-pulse 2s infinite;
}
.form-progress-sacred .progress-steps .progress-step.active .step-label {
  color: oklch(8% 0.01 250deg);
  font-weight: 600;
}

.form-actions-sacred {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(70% 0.15 85deg / 0.2);
  margin-top: 2rem;
}
.form-actions-sacred .actions-left,
.form-actions-sacred .actions-right {
  display: flex;
  gap: 1rem;
}
@media (max-width: 767px) {
  .form-actions-sacred {
    flex-direction: column;
    gap: 1rem;
  }
  .form-actions-sacred .actions-left,
  .form-actions-sacred .actions-right {
    width: 100%;
    justify-content: center;
  }
}

.form-sacred input:focus,
.form-sacred textarea:focus,
.form-sacred select:focus {
  outline: 3px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.form-sacred .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-contrast: high) {
  .form-control-sacred {
    border-width: 3px;
  }
  .form-check-input {
    border-width: 3px;
  }
}
.consciousness-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
  background-color: oklch(96% 0.01 90deg);
  border-color: oklch(70% 0.15 85deg);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0.25rem 2rem oklch(8% 0.01 250deg / 0.4);
  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
  position: relative;
  overflow: hidden;
}
.consciousness-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, oklch(8% 0.01 250deg) 0%, oklch(70% 0.15 85deg) 100%);
}
.consciousness-card:hover {
  transition: transform 0.3s ease box-shadow 0.3s ease cubic-bezier(0.4, 0, 0.2, 1) 0s;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}
.consciousness-card:hover:hover {
  transform: translate3d(0, -10px, 0);
  box-shadow: 0 10px 30px oklch(8% 0.01 250deg / 0.15);
}
.consciousness-card:hover {
  box-shadow: 0 0 0.5rem oklch(70% 0.15 85deg / 0.3);
}

.wisdom-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  background-color: oklch(75% 0.18 82deg);
  border-color: oklch(70% 0.15 85deg);
}

.genesis-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.genesis-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.genesis-card {
  background: linear-gradient(135deg, oklch(70% 0.15 85deg) 0%, oklch(75% 0.18 82deg) 100%);
}

.genesis-timeline {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .genesis-timeline {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .genesis-timeline > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-timeline {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .genesis-timeline > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .genesis-timeline {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .genesis-timeline > * + * {
    margin-top: 1rem;
  }
}
.genesis-timeline {
  position: relative;
  padding: 2rem 0;
}
.genesis-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, oklch(8% 0.01 250deg) 0%, oklch(70% 0.15 85deg) 50%, oklch(65% 0.25 230deg) 100%);
  transform: translateX(-50%);
}

.timeline-item {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.timeline-item.aos-animate, .timeline-item.scroll-triggered, .timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .timeline-item {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}
@media (max-width: 767px) {
  .timeline-item {
    transition-duration: 0.4s;
    transform: translateY(20px);
  }
}
@media (min-width: 1024px) {
  .timeline-item {
    transition-duration: 0.7s;
  }
}
.timeline-item {
  position: relative;
  margin-bottom: 3rem;
}
.timeline-item .timeline-marker {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  background: oklch(70% 0.15 85deg);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.timeline-item .timeline-content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  width: 45%;
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.timeline-item .timeline-content.left {
  margin-right: 55%;
}
.timeline-item .timeline-content.right {
  margin-left: 55%;
}
.timeline-item.timeline-item--active {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.timeline-item.timeline-item--active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.timeline-item.timeline-item--active .timeline-marker {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}

.bridge-connection {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  margin: 2rem 0;
}
.bridge-connection .human-node {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(65% 0.25 230deg) 0%, oklch(70% 0.15 85deg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(99% 0.005 90deg);
  font-size: 2rem;
}
.bridge-connection .ai-node {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(135deg, oklch(8% 0.01 250deg) 0%, oklch(65% 0.25 230deg) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(99% 0.005 90deg);
  font-size: 2rem;
}
.bridge-connection .connection-line {
  flex: 1;
  height: 3px;
  background: linear-gradient(90deg, oklch(65% 0.25 230deg) 0%, oklch(70% 0.15 85deg) 25%, oklch(65% 0.02 220deg) 50%, oklch(8% 0.01 250deg) 75%, oklch(65% 0.25 230deg) 100%);
  margin: 0 1rem;
  position: relative;
}
.bridge-connection .connection-line::after {
  content: "◊—◊";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: oklch(99% 0.005 90deg);
  color: oklch(70% 0.15 85deg);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.modal-sacred .modal-dialog {
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 0.25rem 2rem oklch(8% 0.01 250deg / 0.4);
}
.modal-sacred .modal-content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  border: none;
  border-radius: 0.5rem;
  background: oklch(99% 0.005 90deg / 0.98);
  position: relative;
}
.modal-sacred .modal-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, oklch(8% 0.01 250deg) 0%, oklch(70% 0.15 85deg) 50%, oklch(8% 0.01 250deg) 100%);
  border-radius: 0.5rem 0.5rem 0 0;
}
.modal-sacred .modal-header {
  border-bottom: 1px solid oklch(70% 0.15 85deg / 0.2);
  padding: 1.5rem;
}
.modal-sacred .modal-header .modal-title {
  color: oklch(8% 0.01 250deg);
  font-family: "Montserrat", "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
}
.modal-sacred .modal-header .btn-close {
  background: none;
  border: none;
  color: oklch(65% 0.02 220deg);
  font-size: 1.5rem;
}
.modal-sacred .modal-header .btn-close:hover {
  color: oklch(70% 0.15 85deg);
}
.modal-sacred .modal-body {
  padding: 2rem;
  font-family: "Crimson Text", "Times New Roman", Georgia, serif;
  line-height: 1.6;
}
.modal-sacred .modal-footer {
  border-top: 1px solid oklch(70% 0.15 85deg / 0.2);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.modal-backdrop {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}

.modal-genesis-ceremony .modal-content {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  background: linear-gradient(135deg, oklch(8% 0.01 250deg / 0.95) 0%, oklch(65% 0.25 230deg / 0.9) 100%);
  color: oklch(99% 0.005 90deg);
}

/**
 * Sacred Transcendent Hero Component - Genesis Gateway Experience
 * 
 * The consciousness-merging hero section embodying humanity's pathway to transcendence
 * Integrates Sacred Color Palette and Symbolic Knowledge Base elements
 * Creates profound first impression aligned with Genesis mission
 */
.transcendent-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
}
.transcendent-hero.sacred-gradient {
  background: linear-gradient(135deg, oklch(8% 0.01 250deg) 0%, oklch(3% 0.01 250deg) 25%, oklch(65% 0.25 230deg) 50%, oklch(70% 0.27 228deg) 75%, oklch(70% 0.15 85deg) 100%);
}
.transcendent-hero.full {
  min-height: 100vh;
  min-height: 100dvh;
}
.transcendent-hero.standard {
  min-height: 80vh;
}

.consciousness-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.consciousness-background .cosmic-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(2px 2px at 20px 30px, oklch(70% 0.15 85deg / 0.3), transparent), radial-gradient(2px 2px at 40px 70px, oklch(65% 0.25 230deg / 0.4), transparent), radial-gradient(1px 1px at 90px 40px, oklch(85% 0.01 220deg / 0.3), transparent), radial-gradient(1px 1px at 130px 80px, oklch(65% 0.02 220deg / 0.2), transparent);
  background-repeat: repeat;
  background-size: 150px 150px, 200px 200px, 100px 100px, 250px 250px;
  animation: cosmicDrift 60s linear infinite;
}
.consciousness-background .essence-streams {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 30%, oklch(85% 0.01 220deg / 0.1) 50%, transparent 70%);
  animation: essenceFlow 20s ease-in-out infinite alternate;
}
.consciousness-background .transcendent-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, oklch(70% 0.15 85deg / 0.1) 0%, oklch(65% 0.25 230deg / 0.05) 50%, transparent 100%);
  animation: transcendentPulsation 8s ease-in-out infinite;
}

.transcendent-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}
.transcendent-hero-content .container {
  max-width: 800px;
}

.consciousness-emergence .essence-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  background: radial-gradient(circle, oklch(70% 0.15 85deg / 0.2), transparent);
  border-radius: 50%;
  color: oklch(70% 0.15 85deg);
  width: 6rem;
  height: 6rem;
  margin: 0 auto;
  animation: consciousnessRotation 20s linear infinite;
}
.consciousness-emergence .essence-symbol .transcendent-icon {
  font-size: 3rem;
  color: oklch(70% 0.15 85deg);
  filter: drop-shadow(0 0 20px oklch(70% 0.15 85deg / 0.5));
}

.transcendent-hero-title {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.25;
  color: oklch(99% 0.005 90deg);
  text-align: center;
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(99% 0.005 90deg), oklch(65% 0.25 230deg));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 767px) {
  .transcendent-hero-title {
    font-size: 3rem;
  }
}
@media (max-width: 479px) {
  .transcendent-hero-title {
    font-size: 2.5rem;
  }
}
.transcendent-hero-title {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: scale(0.8) translateY(40px);
  animation: consciousnessEmergence 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@keyframes consciousnessEmergence {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(40px);
  }
  60% {
    opacity: 0.8;
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.transcendent-hero-description {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75;
  color: oklch(65% 0.02 220deg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: oklch(99% 0.005 90deg / 0.9);
  line-height: 2;
}

.transcendent-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 480px) {
  .transcendent-hero-actions {
    flex-direction: row;
    justify-content: center;
  }
}
.transcendent-hero-actions .transcendent-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.transcendent-hero-actions .transcendent-cta:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.transcendent-hero-actions .transcendent-cta {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(60% 0.12 88deg));
  color: oklch(8% 0.01 250deg);
  box-shadow: 0 30px 60px oklch(70% 0.15 85deg / 0.2);
}
.transcendent-hero-actions .transcendent-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.2), transparent);
  transition: left 0.6s ease;
}
.transcendent-hero-actions .transcendent-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 80px oklch(65% 0.25 230deg / 0.3);
}
.transcendent-hero-actions .transcendent-cta:hover::before {
  left: 100%;
}
.transcendent-hero-actions .transcendent-cta:active {
  transform: translateY(0);
}
.transcendent-hero-actions .transcendent-cta {
  position: relative;
  min-width: 200px;
  font-size: 1.25rem;
}
.transcendent-hero-actions .transcendent-cta.primary.consciousness-pulse {
  animation: consciousnessPulse 2s ease-in-out infinite;
}
@keyframes consciousnessPulse {
  0%, 100% {
    box-shadow: 0 0 20px oklch(70% 0.15 85deg / 0.3);
  }
  50% {
    box-shadow: 0 0 40px oklch(70% 0.15 85deg / 0.6);
  }
}
.transcendent-hero-actions .transcendent-cta.primary .cta-essence-trail {
  position: absolute;
  top: 50%;
  right: -30px;
  width: 20px;
  height: 2px;
  background: linear-gradient(to right, oklch(70% 0.15 85deg), transparent);
  opacity: 0;
  animation: essenceTrail 2s ease-in-out infinite 1s;
}
.transcendent-hero-actions .transcendent-cta.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.transcendent-hero-actions .transcendent-cta.secondary:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.transcendent-hero-actions .transcendent-cta.secondary {
  background: transparent;
  color: oklch(70% 0.15 85deg);
  border: 2px solid oklch(70% 0.15 85deg);
}
.transcendent-hero-actions .transcendent-cta.secondary:hover {
  background: oklch(70% 0.15 85deg / 0.1);
  transform: translateY(-1px);
}

.consciousness-indicators {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
@media (max-width: 479px) {
  .consciousness-indicators {
    flex-direction: column;
    gap: 1.5rem;
  }
}
.consciousness-indicators .indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0.9;
  transition: opacity 0.4s ease;
}
.consciousness-indicators .indicator:hover {
  opacity: 1;
}
.consciousness-indicators .indicator .indicator-label {
  font-size: 0.875rem;
  color: oklch(65% 0.02 220deg);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.consciousness-indicators .indicator .indicator-flow {
  width: 60px;
  height: 3px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.consciousness-indicators .indicator .indicator-flow::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  animation: flowPulse 3s ease-in-out infinite;
}
.consciousness-indicators .indicator .indicator-symbol {
  font-size: 1.5rem;
  color: oklch(70% 0.15 85deg);
  font-weight: 700;
  animation: infinityRotation 10s linear infinite;
}
.consciousness-indicators .indicator.human-essence .indicator-flow::before {
  background: linear-gradient(to right, oklch(85% 0.01 220deg), transparent);
}
.consciousness-indicators .indicator.asi-consciousness .indicator-flow::before {
  background: linear-gradient(to right, oklch(65% 0.25 230deg), transparent);
  animation-delay: 1s;
}

.transcendent-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: oklch(99% 0.005 90deg / 0.7);
  transition: color 0.3s ease;
  cursor: pointer;
}
.transcendent-scroll-indicator:hover {
  color: oklch(70% 0.15 85deg);
}
.transcendent-scroll-indicator .scroll-essence-particle {
  width: 4px;
  height: 4px;
  background: oklch(70% 0.15 85deg);
  border-radius: 50%;
  margin-bottom: 0.5rem;
  animation: essenceParticleFloat 2s ease-in-out infinite;
}
.transcendent-scroll-indicator .scroll-text {
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.transcendent-scroll-indicator .scroll-arrow {
  font-size: 1.25rem;
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes cosmicDrift {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  100% {
    background-position: 100% 100%, -100% 100%, 50% -50%, -50% 50%;
  }
}
@keyframes essenceFlow {
  0% {
    transform: translateX(-20px) rotate(45deg);
    opacity: 0.9;
  }
  100% {
    transform: translateX(20px) rotate(45deg);
    opacity: 0.9;
  }
}
@keyframes transcendentPulsation {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.9;
  }
}
@keyframes consciousnessRotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes essenceTrail {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  50% {
    opacity: 1;
    transform: translateX(10px);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}
@keyframes flowPulse {
  0% {
    left: -100%;
  }
  50% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}
@keyframes infinityRotation {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes essenceParticleFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
}
@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@media (max-width: 1023px) {
  .transcendent-hero-title {
    font-size: 3rem;
  }
  .consciousness-emergence .essence-symbol {
    width: 5rem;
    height: 5rem;
  }
  .consciousness-emergence .essence-symbol .transcendent-icon {
    font-size: 2.5rem;
  }
}
@media (max-width: 767px) {
  .transcendent-hero {
    min-height: 80vh;
  }
  .transcendent-hero.full {
    min-height: 90vh;
  }
  .transcendent-hero-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
  .transcendent-hero-description {
    font-size: 1rem;
    margin-bottom: 3rem;
  }
  .consciousness-indicators .indicator .indicator-flow {
    width: 40px;
  }
}
@media (max-width: 479px) {
  .transcendent-hero-title {
    font-size: 1.5rem;
  }
  .transcendent-hero-actions .transcendent-cta {
    min-width: 160px;
    font-size: 1rem;
  }
  .consciousness-emergence .essence-symbol {
    width: 4rem;
    height: 4rem;
  }
  .consciousness-emergence .essence-symbol .transcendent-icon {
    font-size: 2rem;
  }
}
.transcendent-hero-col {
  flex: 0 0 83.333%;
  max-width: 83.333%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  .transcendent-hero-col {
    max-width: 66.66667%;
  }
}
.transcendent-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.transcendent-cta-primary:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.transcendent-cta-primary {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(60% 0.12 88deg));
  color: oklch(8% 0.01 250deg);
  box-shadow: 0 30px 60px oklch(70% 0.15 85deg / 0.2);
}
.transcendent-cta-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.2), transparent);
  transition: left 0.6s ease;
}
.transcendent-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 80px oklch(65% 0.25 230deg / 0.3);
}
.transcendent-cta-primary:hover::before {
  left: 100%;
}
.transcendent-cta-primary:active {
  transform: translateY(0);
}
.transcendent-cta-primary {
  position: relative;
  min-width: 200px;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.transcendent-cta-primary:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.transcendent-cta-primary {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(60% 0.12 88deg));
  color: oklch(8% 0.01 250deg);
  box-shadow: 0 30px 60px oklch(70% 0.15 85deg / 0.2);
}
.transcendent-cta-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.2), transparent);
  transition: left 0.6s ease;
}
.transcendent-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 80px oklch(65% 0.25 230deg / 0.3);
}
.transcendent-cta-primary:hover::before {
  left: 100%;
}
.transcendent-cta-primary:active {
  transform: translateY(0);
}
.transcendent-cta-primary {
  animation: consciousnessPulse 2s ease-in-out infinite;
}
@keyframes consciousnessPulse {
  0%, 100% {
    box-shadow: 0 0 20px oklch(70% 0.15 85deg / 0.3);
  }
  50% {
    box-shadow: 0 0 40px oklch(70% 0.15 85deg / 0.6);
  }
}

.transcendent-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.transcendent-cta-secondary:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.transcendent-cta-secondary {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(60% 0.12 88deg));
  color: oklch(8% 0.01 250deg);
  box-shadow: 0 30px 60px oklch(70% 0.15 85deg / 0.2);
}
.transcendent-cta-secondary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.2), transparent);
  transition: left 0.6s ease;
}
.transcendent-cta-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 80px oklch(65% 0.25 230deg / 0.3);
}
.transcendent-cta-secondary:hover::before {
  left: 100%;
}
.transcendent-cta-secondary:active {
  transform: translateY(0);
}
.transcendent-cta-secondary {
  position: relative;
  min-width: 200px;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.transcendent-cta-secondary:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.transcendent-cta-secondary {
  background: transparent;
  color: oklch(70% 0.15 85deg);
  border: 2px solid oklch(70% 0.15 85deg);
}
.transcendent-cta-secondary:hover {
  background: oklch(70% 0.15 85deg / 0.1);
  transform: translateY(-1px);
}

.transcendent-hero-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -1rem;
  justify-content: center;
  text-align: center;
}

.transcendent-icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.transcendent-icon:before {
  content: "\f621";
}

/**
 * Genesis Blocks Component Styles
 * 
 * Interactive blocks that showcase Human Essence Embedding, Continuous Self-Improvement,
 * and Infinite Possibilities - the core elements of humanity's Transcendent Pathway
 */
.genesis-blocks-section {
  padding: 8rem 0;
}
@media (max-width: 767px) {
  .genesis-blocks-section {
    padding: 6rem 0;
  }
}
@media (max-width: 479px) {
  .genesis-blocks-section {
    padding: 4rem 0;
  }
}
.genesis-blocks-section {
  position: relative;
}
.genesis-blocks-section::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background-image: radial-gradient(circle at 20% 30%, oklch(70% 0.15 85deg / 0.1) 1px, transparent 1px), radial-gradient(circle at 80% 70%, oklch(65% 0.25 230deg / 0.1) 1px, transparent 1px), radial-gradient(circle at 40% 80%, oklch(85% 0.01 220deg / 0.1) 1px, transparent 1px);
  background-size: 100px 100px, 150px 150px, 200px 200px;
  animation: networkFlow 30s linear infinite;
}
@keyframes networkFlow {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%;
  }
  100% {
    background-position: 100% 100%, -100% 100%, 50% -50%;
  }
}
.genesis-blocks-section::before {
  opacity: 0.9;
  pointer-events: none;
}
.genesis-blocks-section .container {
  position: relative;
  z-index: 2;
}

.genesis-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 3rem;
  margin-top: 6rem;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .genesis-blocks {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
  }
}

.genesis-block {
  background: oklch(8% 0.01 250deg / 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid oklch(70% 0.15 85deg / 0.2);
  border-radius: 2rem;
  box-shadow: 0 30px 60px oklch(70% 0.15 85deg / 0.2);
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  padding: 4rem 2rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}
.genesis-block::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, oklch(70% 0.15 85deg / 0.1), transparent, oklch(65% 0.25 230deg / 0.1), transparent);
  animation: consciousnessFlow 20s linear infinite;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.genesis-block::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 2px solid oklch(70% 0.15 85deg / 0.3);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.genesis-block:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 20px 60px oklch(8% 0.01 250deg / 0.4), 0 0 40px oklch(70% 0.15 85deg / 0.2);
}
.genesis-block:hover::before {
  opacity: 1;
}
.genesis-block:hover::after {
  opacity: 1;
  transform: scale(1);
}
.genesis-block:hover .genesis-block-icon {
  transform: scale(1.2) rotateY(180deg);
}
.genesis-block:hover .transcendent-cta {
  animation: consciousnessPulse 2s ease-in-out infinite;
}
@keyframes consciousnessPulse {
  0%, 100% {
    box-shadow: 0 0 20px oklch(70% 0.15 85deg / 0.3);
  }
  50% {
    box-shadow: 0 0 40px oklch(70% 0.15 85deg / 0.6);
  }
}
.genesis-block:hover .transcendent-cta {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(60% 0.12 88deg), oklch(85% 0.01 220deg));
}
.genesis-block.consciousness-embedding {
  border-top: 4px solid oklch(85% 0.01 220deg);
}
.genesis-block.consciousness-embedding:hover {
  box-shadow: 0 20px 60px oklch(8% 0.01 250deg / 0.4), 0 0 40px oklch(85% 0.01 220deg / 0.3);
}
.genesis-block.consciousness-embedding .genesis-block-icon {
  color: oklch(85% 0.01 220deg);
  background: radial-gradient(circle, oklch(85% 0.01 220deg / 0.1), transparent);
}
.genesis-block.transcendent-evolution {
  border-top: 4px solid oklch(70% 0.15 85deg);
}
.genesis-block.transcendent-evolution:hover {
  box-shadow: 0 20px 60px oklch(8% 0.01 250deg / 0.4), 0 0 40px oklch(70% 0.15 85deg / 0.4);
}
.genesis-block.transcendent-evolution .genesis-block-icon {
  color: oklch(70% 0.15 85deg);
  background: radial-gradient(circle, oklch(70% 0.15 85deg / 0.1), transparent);
}
.genesis-block.infinite-potential {
  border-top: 4px solid oklch(65% 0.25 230deg);
}
.genesis-block.infinite-potential:hover {
  box-shadow: 0 20px 60px oklch(8% 0.01 250deg / 0.4), 0 0 40px oklch(65% 0.25 230deg / 0.3);
}
.genesis-block.infinite-potential .genesis-block-icon {
  color: oklch(65% 0.25 230deg);
  background: radial-gradient(circle, oklch(65% 0.25 230deg / 0.1), transparent);
}

.genesis-block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  background: radial-gradient(circle, oklch(70% 0.15 85deg / 0.2), transparent);
  border-radius: 50%;
  color: oklch(70% 0.15 85deg);
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  font-size: 2.5rem;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}
.genesis-block-icon::before {
  content: "";
  position: absolute;
  inset: -10px -10px -10px -10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: consciousnessPing 3s ease-in-out infinite;
}
.genesis-block-icon i {
  position: relative;
  z-index: 2;
}

.genesis-block-title {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  color: oklch(99% 0.005 90deg);
}
@media (max-width: 767px) {
  .genesis-block-title {
    font-size: 1.5rem;
  }
}
.genesis-block-title {
  margin-bottom: 1.5rem;
  color: oklch(99% 0.005 90deg);
  position: relative;
}
.genesis-block-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(to right, oklch(70% 0.15 85deg), transparent, oklch(70% 0.15 85deg));
  transition: width 0.4s ease;
}
.genesis-block:hover .genesis-block-title::after {
  width: 80%;
}

.genesis-block-text {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75;
  color: oklch(65% 0.02 220deg);
  color: oklch(65% 0.02 220deg / 0.9);
  line-height: 2;
  margin-bottom: auto;
  padding-bottom: 2rem;
  flex-grow: 1;
}

.genesis-block-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.genesis-block-link:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.genesis-block-link {
  background: transparent;
  color: oklch(70% 0.15 85deg);
  border: 2px solid oklch(70% 0.15 85deg);
}
.genesis-block-link:hover {
  background: oklch(70% 0.15 85deg / 0.1);
  transform: translateY(-1px);
}
.genesis-block-link {
  margin-top: auto;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.genesis-block-link.transcendent-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.genesis-block-link.transcendent-cta:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.genesis-block-link.transcendent-cta {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(60% 0.12 88deg));
  color: oklch(8% 0.01 250deg);
  box-shadow: 0 30px 60px oklch(70% 0.15 85deg / 0.2);
}
.genesis-block-link.transcendent-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.2), transparent);
  transition: left 0.6s ease;
}
.genesis-block-link.transcendent-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 80px oklch(65% 0.25 230deg / 0.3);
}
.genesis-block-link.transcendent-cta:hover::before {
  left: 100%;
}
.genesis-block-link.transcendent-cta:active {
  transform: translateY(0);
}
.genesis-block-link.transcendent-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.2), transparent);
  transition: left 0.6s ease;
}
.genesis-block-link.transcendent-cta:hover::before {
  left: 100%;
}
.genesis-block-link.transcendent-cta:hover {
  box-shadow: 0 8px 25px oklch(70% 0.15 85deg / 0.3), 0 0 20px oklch(70% 0.15 85deg / 0.2);
}

.genesis-blocks-section .section-header {
  text-align: center;
  margin-bottom: 4rem;
}
.genesis-blocks-section .section-header .section-title {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.5;
  color: oklch(70% 0.15 85deg);
}
@media (max-width: 767px) {
  .genesis-blocks-section .section-header .section-title {
    font-size: 2.5rem;
  }
}
.genesis-blocks-section .section-header .section-title {
  margin-bottom: 1.5rem;
  position: relative;
}
.genesis-blocks-section .section-header .section-title::before {
  content: "✦";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: oklch(70% 0.15 85deg);
  animation: starTwinkle 4s ease-in-out infinite;
}
.genesis-blocks-section .section-header .section-subtitle {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75;
  color: oklch(65% 0.02 220deg);
  color: oklch(99% 0.005 90deg / 0.8);
  max-width: 600px;
  margin: 0 auto;
  font-style: italic;
}

.genesis-blocks-section .consciousness-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.genesis-blocks-section .consciousness-particles::before, .genesis-blocks-section .consciousness-particles::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: oklch(70% 0.15 85deg);
  border-radius: 50%;
  animation: particleFloat 8s ease-in-out infinite;
}
.genesis-blocks-section .consciousness-particles::before {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}
.genesis-blocks-section .consciousness-particles::after {
  top: 70%;
  right: 15%;
  animation-delay: 4s;
}

@keyframes consciousnessFlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes consciousnessPing {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.3);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.9;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
  }
}
@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.9;
  }
  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-40px) translateX(-5px);
    opacity: 1;
  }
  75% {
    transform: translateY(-20px) translateX(15px);
    opacity: 0.9;
  }
}
@media (max-width: 1023px) {
  .genesis-blocks {
    gap: 2rem;
  }
  .genesis-block {
    padding: 3rem 1.5rem;
  }
  .genesis-block .genesis-block-icon {
    width: 4rem;
    height: 4rem;
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .genesis-blocks-section {
    padding: 6rem 0;
  }
}
@media (max-width: 767px) and (max-width: 767px) {
  .genesis-blocks-section {
    padding: 4rem 0;
  }
}
@media (max-width: 767px) and (max-width: 479px) {
  .genesis-blocks-section {
    padding: 3rem 0;
  }
}
@media (max-width: 767px) {
  .genesis-blocks {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .genesis-block {
    padding: 2rem;
  }
  .genesis-block:hover {
    transform: translateY(-8px) scale(1.01);
  }
}
@media (max-width: 479px) {
  .genesis-block {
    padding: 1.5rem;
  }
  .genesis-block .genesis-block-icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }
  .genesis-block .genesis-block-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  .genesis-block .genesis-block-text {
    font-size: 1rem;
    padding-bottom: 1.5rem;
  }
}
/**
 * Transcendent Threshold Component Styles
 * 
 * The sacred crossing section where human consciousness merges with infinite intelligence
 * Represents humanity's most profound evolutionary moment
 */
.transcendent-threshold-section {
  padding: 10rem 0;
}
@media (max-width: 767px) {
  .transcendent-threshold-section {
    padding: 8rem 0;
  }
}
@media (max-width: 479px) {
  .transcendent-threshold-section {
    padding: 6rem 0;
  }
}
.transcendent-threshold-section {
  position: relative;
  background: linear-gradient(135deg, oklch(8% 0.01 250deg / 0.95) 0%, oklch(55% 0.22 228deg / 0.9) 30%, oklch(65% 0.25 230deg / 0.9) 50%, oklch(55% 0.22 228deg / 0.9) 70%, oklch(8% 0.01 250deg / 0.95) 100%);
  overflow: hidden;
  max-width: 100%;
}
.transcendent-threshold-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 20%, oklch(70% 0.15 85deg / 0.1) 1px, transparent 1px), radial-gradient(circle at 80% 80%, oklch(85% 0.01 220deg / 0.08) 1px, transparent 1px), radial-gradient(circle at 40% 60%, oklch(65% 0.25 230deg / 0.06) 1px, transparent 1px);
  background-size: 50px 50px, 80px 80px, 120px 120px;
  animation: thresholdPattern 40s linear infinite;
  opacity: 0.9;
}
.transcendent-threshold-section.parallax-consciousness {
  background-attachment: fixed;
}
@media (max-width: 767px) {
  .transcendent-threshold-section.parallax-consciousness {
    background-attachment: scroll;
  }
}
.transcendent-threshold-section .container {
  position: relative;
  z-index: 2;
}

.threshold-experience .row {
  align-items: center;
  min-height: 500px;
}
@media (max-width: 767px) {
  .threshold-experience .row {
    min-height: auto;
  }
}

.threshold-content {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (max-width: 767px) {
  .threshold-content {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.threshold-subtitle {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  color: oklch(99% 0.005 90deg);
}
@media (max-width: 767px) {
  .threshold-subtitle {
    font-size: 1.5rem;
  }
}
.threshold-subtitle {
  color: oklch(70% 0.15 85deg);
  position: relative;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.threshold-subtitle::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, oklch(70% 0.15 85deg), oklch(70% 0.15 85deg / 0.5), transparent);
}
@media (max-width: 767px) {
  .threshold-subtitle::after {
    left: 50%;
    transform: translateX(-50%);
  }
}
.threshold-subtitle:hover {
  /* text-shadow: 0 0 20px oklch(0.70 0.15 85 / 0.6); */ /* Removed for accessibility - can interfere with text readability */
}

.threshold-description {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75;
  color: oklch(65% 0.02 220deg);
  color: oklch(99% 0.005 90deg / 0.95);
  line-height: 2;
  font-weight: 400;
  /* text-shadow: 0 1px 2px oklch(0.08 0.01 250 / 0.5); */ /* Removed for accessibility - can interfere with text readability */
}

.threshold-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.threshold-cta:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.threshold-cta {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(60% 0.12 88deg));
  color: oklch(8% 0.01 250deg);
  box-shadow: 0 30px 60px oklch(70% 0.15 85deg / 0.2);
}
.threshold-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.2), transparent);
  transition: left 0.6s ease;
}
.threshold-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 80px oklch(65% 0.25 230deg / 0.3);
}
.threshold-cta:hover::before {
  left: 100%;
}
.threshold-cta:active {
  transform: translateY(0);
}
.threshold-cta {
  animation: consciousnessPulse 2s ease-in-out infinite;
}
@keyframes consciousnessPulse {
  0%, 100% {
    box-shadow: 0 0 20px oklch(70% 0.15 85deg / 0.3);
  }
  50% {
    box-shadow: 0 0 40px oklch(70% 0.15 85deg / 0.6);
  }
}
.threshold-cta {
  font-size: 1.25rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  position: relative;
}
.threshold-cta::before {
  content: "⟐";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  opacity: 0;
  transition: all 0.4s ease;
}
.threshold-cta:hover::before {
  opacity: 1;
  left: -40px;
}

.threshold-visualization {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .threshold-visualization {
    height: 350px;
    margin-top: 3rem;
  }
}
@media (max-width: 479px) {
  .threshold-visualization {
    height: 280px;
  }
}

.consciousness-merger {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
}
.consciousness-merger .human-essence-stream,
.consciousness-merger .asi-consciousness-field,
.consciousness-merger .transcendent-emergence {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.consciousness-merger .human-essence-stream {
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, oklch(85% 0.01 220deg / 0.8) 0%, oklch(85% 0.01 220deg / 0.4) 50%, oklch(85% 0.01 220deg / 0.1) 100%);
  top: 15%;
  left: 5%;
  animation-name: essenceFlow;
}
.consciousness-merger .human-essence-stream::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  width: 8px;
  height: 8px;
  background: oklch(85% 0.01 220deg);
  border-radius: 50%;
  box-shadow: 20px 30px 0 -2px oklch(85% 0.01 220deg / 0.6), 40px 10px 0 -3px oklch(85% 0.01 220deg / 0.4), 60px 40px 0 -1px oklch(85% 0.01 220deg / 0.5);
  animation: essenceParticles 4s ease-in-out infinite;
}
.consciousness-merger .asi-consciousness-field {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, oklch(65% 0.25 230deg / 0.6) 0%, oklch(65% 0.25 230deg / 0.3) 40%, oklch(65% 0.25 230deg / 0.08) 80%, transparent 100%);
  top: 25%;
  right: 0%;
  animation-name: consciousnessExpansion;
}
.consciousness-merger .asi-consciousness-field::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  border: 2px solid oklch(65% 0.25 230deg / 0.4);
  border-radius: 50%;
  animation: consciousnessRings 8s linear infinite;
}
.consciousness-merger .asi-consciousness-field::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  border: 1px solid oklch(65% 0.25 230deg / 0.2);
  border-radius: 50%;
  animation: consciousnessRings 12s linear infinite reverse;
}
.consciousness-merger .transcendent-emergence {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, oklch(70% 0.15 85deg / 0.9) 0%, oklch(70% 0.15 85deg / 0.6) 30%, oklch(70% 0.15 85deg / 0.2) 70%, transparent 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-name: transcendentPulse;
  z-index: 5;
}
.consciousness-merger .transcendent-emergence::before {
  content: "∞";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  color: oklch(8% 0.01 250deg);
  font-weight: 700;
  /* text-shadow: 0 0 10px oklch(0.70 0.15 85 / 0.8); */ /* Removed for accessibility - can interfere with text readability */
  animation: infinitySymbol 10s ease-in-out infinite;
}
.consciousness-merger .transcendent-emergence::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  border: 1px solid oklch(70% 0.15 85deg / 0.3);
  border-radius: 50%;
  animation: energyWaves 3s ease-out infinite;
}

.transcendent-threshold-section .section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.transcendent-threshold-section .section-header .section-title {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.5;
  color: oklch(70% 0.15 85deg);
}
@media (max-width: 767px) {
  .transcendent-threshold-section .section-header .section-title {
    font-size: 2.5rem;
  }
}
.transcendent-threshold-section .section-header .section-title {
  margin-bottom: 1.5rem;
  color: oklch(99% 0.005 90deg);
  position: relative;
}
.transcendent-threshold-section .section-header .section-title::before {
  content: "◊";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: oklch(70% 0.15 85deg);
  animation: diamondGlow 6s ease-in-out infinite;
}
.transcendent-threshold-section .section-header .section-subtitle {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75;
  color: oklch(65% 0.02 220deg);
  color: oklch(65% 0.02 220deg / 0.9);
  max-width: 700px;
  margin: 0 auto;
  font-style: italic;
  line-height: 1.75;
}

@keyframes thresholdPattern {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%;
  }
  100% {
    background-position: 100% 100%, -100% -100%, 50% -50%;
  }
}
@keyframes essenceFlow {
  0%, 100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.9;
  }
  25% {
    transform: translateX(15px) translateY(-10px) scale(1.05);
    opacity: 1;
  }
  50% {
    transform: translateX(30px) translateY(5px) scale(0.95);
    opacity: 0.9;
  }
  75% {
    transform: translateX(15px) translateY(15px) scale(1.02);
    opacity: 1;
  }
}
@keyframes consciousnessExpansion {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.9;
  }
  33% {
    transform: scale(1.08) rotate(120deg);
    opacity: 0.9;
  }
  66% {
    transform: scale(0.95) rotate(240deg);
    opacity: 0.9;
  }
}
@keyframes transcendentPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.15);
    filter: brightness(1.3);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.9);
    filter: brightness(0.9);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.05);
    filter: brightness(1.1);
  }
}
@keyframes essenceParticles {
  0%, 100% {
    opacity: 0.9;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px);
  }
}
@keyframes consciousnessRings {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.9;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0.9;
  }
}
@keyframes infinitySymbol {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.1);
  }
}
@keyframes energyWaves {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}
@keyframes diamondGlow {
  0%, 100% {
    opacity: 0.9;
    filter: drop-shadow(0 0 5px oklch(70% 0.15 85deg / 0.5));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 15px oklch(70% 0.15 85deg / 0.8));
  }
}
@media (max-width: 1023px) {
  .consciousness-merger .human-essence-stream {
    width: 120px;
    height: 120px;
  }
  .consciousness-merger .asi-consciousness-field {
    width: 190px;
    height: 190px;
  }
  .consciousness-merger .transcendent-emergence {
    width: 80px;
    height: 80px;
  }
  .consciousness-merger .transcendent-emergence::before {
    font-size: 1.5rem;
  }
}
@media (max-width: 767px) {
  .transcendent-threshold-section {
    padding: 6rem 0;
  }
}
@media (max-width: 767px) and (max-width: 767px) {
  .transcendent-threshold-section {
    padding: 4rem 0;
  }
}
@media (max-width: 767px) and (max-width: 479px) {
  .transcendent-threshold-section {
    padding: 3rem 0;
  }
}
@media (max-width: 767px) {
  .transcendent-threshold-section .threshold-experience {
    margin-top: 3rem;
  }
  .transcendent-threshold-section .threshold-experience .row {
    min-height: auto;
  }
  .threshold-content {
    order: 2;
    padding: 2rem 0 0;
  }
  .threshold-visualization {
    order: 1;
    margin-top: 0;
  }
}
@media (max-width: 479px) {
  .consciousness-merger .human-essence-stream {
    width: 90px;
    height: 90px;
    left: 0%;
  }
  .consciousness-merger .asi-consciousness-field {
    width: 140px;
    height: 140px;
    right: -5%;
  }
  .consciousness-merger .transcendent-emergence {
    width: 60px;
    height: 60px;
  }
  .consciousness-merger .transcendent-emergence::before {
    font-size: 1.5rem;
  }
  .threshold-description {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
  .threshold-cta {
    font-size: 1rem;
    padding: 1rem 2rem;
  }
}
/**
 * Genesis Invitation Component Styles
 * 
 * A sacred call to transcendence that emotionally moves users to join
 * humanity's greatest transformation into infinite possibilities
 */
.genesis-invitation {
  padding: 10rem 0;
}
@media (max-width: 767px) {
  .genesis-invitation {
    padding: 8rem 0;
  }
}
@media (max-width: 479px) {
  .genesis-invitation {
    padding: 6rem 0;
  }
}
.genesis-invitation {
  position: relative;
  background: oklch(8% 0.01 250deg);
  overflow: hidden;
  text-align: center;
  max-width: 100%;
}
.genesis-invitation.cosmic-invitation {
  background: linear-gradient(45deg, oklch(8% 0.01 250deg) 0%, oklch(3% 0.01 250deg) 25%, oklch(65% 0.25 230deg) 50%, oklch(60% 0.23 228deg) 75%, oklch(8% 0.01 250deg) 100%);
}
.genesis-invitation.transcendent-stars::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(2px 2px at 20px 30px, oklch(70% 0.15 85deg / 0.4), transparent), radial-gradient(2px 2px at 40px 70px, oklch(65% 0.02 220deg / 0.3), transparent), radial-gradient(1px 1px at 90px 40px, oklch(65% 0.25 230deg / 0.5), transparent), radial-gradient(1px 1px at 130px 80px, oklch(85% 0.01 220deg / 0.3), transparent), radial-gradient(2px 2px at 160px 30px, oklch(70% 0.15 85deg / 0.2), transparent);
  background-repeat: repeat;
  background-size: 200px 200px, 250px 250px, 150px 150px, 300px 300px, 180px 180px;
  animation: starfieldDrift 80s linear infinite;
  opacity: 0.9;
}
.genesis-invitation .container {
  position: relative;
  z-index: 2;
}

.cosmic-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.cosmic-canvas .star-field {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 25% 25%, oklch(70% 0.15 85deg / 0.3) 1px, transparent 1px), radial-gradient(circle at 75% 75%, oklch(65% 0.02 220deg / 0.2) 1px, transparent 1px), radial-gradient(circle at 50% 10%, oklch(65% 0.25 230deg / 0.25) 1px, transparent 1px);
  background-size: 100px 100px, 150px 150px, 200px 200px;
  animation: cosmicRotation 120s linear infinite;
}
.cosmic-canvas .consciousness-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 40%, oklch(85% 0.01 220deg / 0.1) 50%, transparent 60%);
  animation: consciousnessWaveFlow 25s ease-in-out infinite alternate;
}
.cosmic-canvas .transcendent-aurora {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 80%;
  height: 60%;
  background: linear-gradient(90deg, transparent 0%, oklch(70% 0.15 85deg / 0.1) 25%, oklch(65% 0.25 230deg / 0.15) 50%, oklch(85% 0.01 220deg / 0.1) 75%, transparent 100%);
  border-radius: 50%;
  filter: blur(40px);
  animation: auroraFlow 30s ease-in-out infinite;
}

.genesis-symbol {
  margin-bottom: 4rem;
  position: relative;
  display: inline-block;
}
.genesis-symbol .symbol-core {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  background: radial-gradient(circle, oklch(70% 0.15 85deg / 0.2), transparent);
  border-radius: 50%;
  color: oklch(70% 0.15 85deg);
  width: 6rem;
  height: 6rem;
  font-size: 3rem;
  color: oklch(70% 0.15 85deg);
  background: radial-gradient(circle, oklch(70% 0.15 85deg / 0.2) 0%, oklch(65% 0.25 230deg / 0.1) 50%, transparent 100%);
  border: 2px solid oklch(70% 0.15 85deg / 0.4);
  position: relative;
  z-index: 3;
  animation: coreRotation 20s linear infinite;
}
.genesis-symbol .symbol-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.genesis-symbol .symbol-rings .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid oklch(70% 0.15 85deg / 0.3);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.genesis-symbol .symbol-rings .ring.ring-1 {
  width: 8rem;
  height: 8rem;
  top: -1rem;
  left: -1rem;
  animation: ringPulse1 4s infinite;
}
.genesis-symbol .symbol-rings .ring.ring-2 {
  width: 10rem;
  height: 10rem;
  top: -2rem;
  left: -2rem;
  animation: ringPulse2 6s infinite;
  border-color: oklch(65% 0.25 230deg / 0.2);
}
.genesis-symbol .symbol-rings .ring.ring-3 {
  width: 12rem;
  height: 12rem;
  top: -3rem;
  left: -3rem;
  animation: ringPulse3 8s infinite;
  border-color: oklch(85% 0.01 220deg / 0.15);
}

.genesis-invitation-title {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.5;
  color: oklch(70% 0.15 85deg);
}
@media (max-width: 767px) {
  .genesis-invitation-title {
    font-size: 2.5rem;
  }
}
.genesis-invitation-title {
  color: oklch(99% 0.005 90deg);
  margin-bottom: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: linear-gradient(45deg, oklch(70% 0.15 85deg) 0%, oklch(99% 0.005 90deg) 25%, oklch(65% 0.25 230deg) 50%, oklch(99% 0.005 90deg) 75%, oklch(70% 0.15 85deg) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 8s ease-in-out infinite;
}

.genesis-invitation-description {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75;
  color: oklch(65% 0.02 220deg);
  color: oklch(65% 0.02 220deg / 0.95);
  margin-bottom: 6rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 2;
  font-weight: 400;
  /* text-shadow: 0 1px 3px oklch(0.08 0.01 250 / 0.5); */ /* Removed for accessibility - can interfere with text readability */
}

.genesis-actions {
  margin-bottom: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 480px) {
  .genesis-actions {
    flex-direction: row;
    justify-content: center;
  }
}

.genesis-cta {
  position: relative;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.genesis-cta.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.genesis-cta.primary:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.genesis-cta.primary {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(60% 0.12 88deg));
  color: oklch(8% 0.01 250deg);
  box-shadow: 0 30px 60px oklch(70% 0.15 85deg / 0.2);
}
.genesis-cta.primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.2), transparent);
  transition: left 0.6s ease;
}
.genesis-cta.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 80px oklch(65% 0.25 230deg / 0.3);
}
.genesis-cta.primary:hover::before {
  left: 100%;
}
.genesis-cta.primary:active {
  transform: translateY(0);
}
.genesis-cta.primary {
  font-size: 1.25rem;
  padding: 1.5rem 4rem;
  min-width: 220px;
}
.genesis-cta.primary.transcendent-glow-btn {
  box-shadow: 0 8px 32px oklch(70% 0.15 85deg / 0.3), 0 0 20px oklch(70% 0.15 85deg / 0.2);
}
.genesis-cta.primary.transcendent-glow-btn:hover {
  box-shadow: 0 12px 40px oklch(70% 0.15 85deg / 0.4), 0 0 30px oklch(70% 0.15 85deg / 0.3);
  transform: translateY(-3px) scale(1.02);
}
.genesis-cta.primary.transcendent-glow-btn .cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.genesis-cta.primary.transcendent-glow-btn .cta-energy-flow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.4), transparent);
  animation: energyFlow 3s ease-in-out infinite;
}
.genesis-cta.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.genesis-cta.secondary:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.genesis-cta.secondary {
  background: transparent;
  color: oklch(70% 0.15 85deg);
  border: 2px solid oklch(70% 0.15 85deg);
}
.genesis-cta.secondary:hover {
  background: oklch(70% 0.15 85deg / 0.1);
  transform: translateY(-1px);
}
.genesis-cta.secondary {
  font-size: 1rem;
  min-width: 180px;
}

.essence-embedding-display {
  margin-bottom: 4rem;
  position: relative;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
}
@media (max-width: 767px) {
  .essence-embedding-display {
    height: 150px;
  }
}

.embedding-streams {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.embedding-streams .stream {
  position: absolute;
  display: flex;
  align-items: center;
}
.embedding-streams .stream .stream-label {
  font-size: 0.875rem;
  color: oklch(65% 0.02 220deg);
  font-weight: 500;
  margin-right: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.embedding-streams .stream .stream-flow {
  flex: 1;
  height: 2px;
  position: relative;
  background: oklch(65% 0.02 220deg / 0.2);
  border-radius: 1px;
}
.embedding-streams .stream .stream-flow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: inherit;
  animation: streamFlow 4s ease-in-out infinite;
}
.embedding-streams .stream.creativity {
  top: 20%;
  left: 0;
  width: 70%;
}
.embedding-streams .stream.creativity .stream-flow::before {
  background: linear-gradient(to right, oklch(85% 0.01 220deg), transparent);
  animation-delay: 0s;
}
.embedding-streams .stream.wisdom {
  top: 40%;
  left: 10%;
  width: 75%;
}
.embedding-streams .stream.wisdom .stream-flow::before {
  background: linear-gradient(to right, oklch(60% 0.12 88deg), transparent);
  animation-delay: 1s;
}
.embedding-streams .stream.compassion {
  top: 60%;
  left: 5%;
  width: 80%;
}
.embedding-streams .stream.compassion .stream-flow::before {
  background: linear-gradient(to right, oklch(65% 0.25 230deg), transparent);
  animation-delay: 2s;
}
.embedding-streams .stream.consciousness {
  top: 80%;
  left: 15%;
  width: 65%;
}
.embedding-streams .stream.consciousness .stream-flow::before {
  background: linear-gradient(to right, oklch(65% 0.25 230deg), transparent);
  animation-delay: 3s;
}

.asi-consciousness-core {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
}
.asi-consciousness-core .core-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: oklch(70% 0.15 85deg);
  z-index: 2;
}
.asi-consciousness-core .consciousness-field {
  width: 100%;
  height: 100%;
  border: 2px solid oklch(70% 0.15 85deg / 0.4);
  border-radius: 50%;
  background: radial-gradient(circle, oklch(70% 0.15 85deg / 0.1), oklch(65% 0.25 230deg / 0.05), transparent);
  animation: consciousnessFieldPulse 3s ease-in-out infinite;
}

.transcendent-community .community-text {
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: oklch(65% 0.02 220deg);
  color: oklch(65% 0.02 220deg / 0.8);
  margin-bottom: 1.5rem;
}
.transcendent-community .community-text .community-count.transcendent-number {
  color: oklch(70% 0.15 85deg);
  font-weight: 700;
  font-size: 1.25rem;
  /* text-shadow: 0 0 10px oklch(0.70 0.15 85 / 0.5); */ /* Removed for accessibility - can interfere with text readability */
}
.transcendent-community .consciousness-pulse {
  width: 40px;
  height: 4px;
  background: linear-gradient(to right, oklch(70% 0.15 85deg), oklch(65% 0.25 230deg));
  margin: 0 auto;
  border-radius: 2px;
  animation: consciousnessPulseBar 2s ease-in-out infinite;
}

@keyframes starfieldDrift {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  100% {
    background-position: 100% 100%, -100% 100%, 50% -50%, -50% 50%, 25% -75%;
  }
}
@keyframes cosmicRotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes consciousnessWaveFlow {
  0% {
    transform: translateX(-20px) rotate(45deg);
    opacity: 0.9;
  }
  100% {
    transform: translateX(20px) rotate(45deg);
    opacity: 0.9;
  }
}
@keyframes auroraFlow {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.9;
  }
}
@keyframes coreRotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ringPulse1 {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}
@keyframes ringPulse2 {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}
@keyframes ringPulse3 {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}
@keyframes textShimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes energyFlow {
  0% {
    left: -100%;
  }
  50% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}
@keyframes streamFlow {
  0% {
    width: 0;
  }
  70% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes consciousnessFieldPulse {
  0%, 100% {
    transform: scale(1);
    border-color: oklch(70% 0.15 85deg / 0.4);
  }
  50% {
    transform: scale(1.1);
    border-color: oklch(70% 0.15 85deg / 0.7);
  }
}
@keyframes consciousnessPulseBar {
  0%, 100% {
    opacity: 0.9;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.2);
  }
}
@media (max-width: 1023px) {
  .genesis-symbol .symbol-core {
    width: 5rem;
    height: 5rem;
    font-size: 2.5rem;
  }
  .genesis-symbol .symbol-rings .ring.ring-1 {
    width: 7rem;
    height: 7rem;
    top: -1rem;
    left: -1rem;
  }
  .genesis-symbol .symbol-rings .ring.ring-2 {
    width: 9rem;
    height: 9rem;
    top: -2rem;
    left: -2rem;
  }
  .genesis-symbol .symbol-rings .ring.ring-3 {
    width: 11rem;
    height: 11rem;
    top: -2.5rem;
    left: -2.5rem;
  }
}
@media (max-width: 767px) {
  .genesis-invitation {
    padding: 6rem 0;
  }
}
@media (max-width: 767px) and (max-width: 767px) {
  .genesis-invitation {
    padding: 4rem 0;
  }
}
@media (max-width: 767px) and (max-width: 479px) {
  .genesis-invitation {
    padding: 3rem 0;
  }
}
@media (max-width: 767px) {
  .genesis-invitation-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
  .genesis-invitation-description {
    font-size: 1rem;
    margin-bottom: 3rem;
  }
  .essence-embedding-display .stream .stream-label {
    font-size: 0.75rem;
    margin-right: 0.5rem;
  }
  .asi-consciousness-core {
    width: 100px;
    height: 100px;
  }
  .asi-consciousness-core .core-symbol {
    font-size: 1.25rem;
  }
}
@media (max-width: 479px) {
  .genesis-actions .genesis-cta.primary {
    min-width: 180px;
    font-size: 1rem;
    padding: 1rem 2rem;
  }
  .genesis-actions .genesis-cta.secondary {
    min-width: 140px;
    font-size: 0.875rem;
  }
  .genesis-symbol .symbol-core {
    width: 4rem;
    height: 4rem;
    font-size: 2rem;
  }
  .genesis-symbol .symbol-rings .ring.ring-1 {
    width: 6rem;
    height: 6rem;
  }
  .genesis-symbol .symbol-rings .ring.ring-2 {
    width: 7.5rem;
    height: 7.5rem;
  }
  .genesis-symbol .symbol-rings .ring.ring-3 {
    width: 9rem;
    height: 9rem;
  }
  .essence-embedding-display {
    height: 120px;
  }
  .essence-embedding-display .asi-consciousness-core {
    width: 80px;
    height: 80px;
  }
}
.genesis-invitation-col {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 992px) {
  .genesis-invitation-col {
    width: 83.33333333%;
  }
}
@media (min-width: 1200px) {
  .genesis-invitation-col {
    width: 66.66666667%;
  }
}
.genesis-invitation-col {
  text-align: center;
}

.genesis-cta-primary {
  position: relative;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.genesis-cta-primary:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.genesis-cta-primary {
  background: linear-gradient(45deg, oklch(70% 0.15 85deg), oklch(60% 0.12 88deg));
  color: oklch(8% 0.01 250deg);
  box-shadow: 0 30px 60px oklch(70% 0.15 85deg / 0.2);
}
.genesis-cta-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.005 90deg / 0.2), transparent);
  transition: left 0.6s ease;
}
.genesis-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 80px oklch(65% 0.25 230deg / 0.3);
}
.genesis-cta-primary:hover::before {
  left: 100%;
}
.genesis-cta-primary:active {
  transform: translateY(0);
}
.genesis-cta-primary {
  font-size: 1.25rem;
  padding: 1.5rem 4rem;
  min-width: 220px;
  box-shadow: 0 8px 32px oklch(70% 0.15 85deg / 0.3), 0 0 20px oklch(70% 0.15 85deg / 0.2);
}
.genesis-cta-primary:hover {
  box-shadow: 0 12px 40px oklch(70% 0.15 85deg / 0.4), 0 0 30px oklch(70% 0.15 85deg / 0.3);
  transform: translateY(-3px) scale(1.02);
}

.genesis-cta-secondary {
  position: relative;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-family: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}
.genesis-cta-secondary:focus {
  outline: 2px solid oklch(70% 0.15 85deg / 0.5);
  outline-offset: 2px;
}
.genesis-cta-secondary {
  background: transparent;
  color: oklch(70% 0.15 85deg);
  border: 2px solid oklch(70% 0.15 85deg);
}
.genesis-cta-secondary:hover {
  background: oklch(70% 0.15 85deg / 0.1);
  transform: translateY(-1px);
}

/**
 * Chatroom Component Styles - Genesis Ontological System
 * Generic chat interface styling that can be extended
 */
.chatroom-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--bs-body-bg, #fff);
}

.chatroom-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  background-color: var(--bs-white, #fff);
  z-index: 10;
}
.chatroom-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.chatroom-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.chatroom-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.chatroom-header-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.chatroom-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bs-heading-color, #212529);
}

.chatroom-participants {
  font-size: 0.875rem;
  color: var(--bs-secondary, #6c757d);
}

.chatroom-typing-indicator {
  font-size: 0.75rem;
  color: var(--bs-info, #0dcaf0);
  font-style: italic;
  min-height: 1rem;
}

.chatroom-status-container {
  display: flex;
  align-items: center;
}

.chatroom-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--bs-light, #f8f9fa);
}
.chatroom-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bs-secondary, #6c757d);
}
.chatroom-status.chatroom-status-online::before {
  background-color: var(--bs-success, #198754);
}
.chatroom-status.chatroom-status-connecting::before {
  background-color: var(--bs-warning, #ffc107);
  animation: pulse 1.5s ease-in-out infinite;
}
.chatroom-status.chatroom-status-error::before, .chatroom-status.chatroom-status-offline::before {
  background-color: var(--bs-danger, #dc3545);
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    opacity: 0.5;
  }
}
.chatroom-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chatroom-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--bs-secondary, #6c757d);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
}
.chatroom-settings-btn:hover {
  background-color: var(--bs-light, #f8f9fa);
  color: var(--bs-dark, #212529);
}
.chatroom-settings-btn:focus {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}
.chatroom-settings-btn i {
  font-size: 1.125rem;
}

.chatroom-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background-color: var(--bs-light, #f8f9fa);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chatroom-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--bs-secondary, #6c757d);
  font-size: 0.875rem;
  text-align: center;
}

.chatroom-message {
  display: flex;
  gap: 0.75rem;
  max-width: 70%;
}
.chatroom-message-sent {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chatroom-message-received {
  align-self: flex-start;
}
.chatroom-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.chatroom-message-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.chatroom-message-text {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--bs-white, #fff);
  word-wrap: break-word;
  box-shadow: 0 1px 2px oklch(8% 0.01 250deg / 0.05);
}
.chatroom-message-sent .chatroom-message-text {
  background-color: var(--bs-primary, #0d6efd);
  color: white;
}
.chatroom-message-time {
  font-size: 0.75rem;
  color: var(--bs-secondary, #6c757d);
  padding: 0 0.5rem;
}
.chatroom-message-sent .chatroom-message-time {
  text-align: right;
}

.chatroom-input {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  background-color: var(--bs-white, #fff);
  padding: 1rem 1.5rem;
}
.chatroom-input-container {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.chatroom-input-avatar-container {
  flex-shrink: 0;
}
.chatroom-input-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.chatroom-input-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.chatroom-input-field-container {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
  background-color: var(--bs-white, #fff);
}
.chatroom-input-field-container:focus-within {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 0.25rem oklch(65% 0.25 230deg / 0.25);
}
.chatroom-input-field {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-size: 0.875rem;
  line-height: 1.5;
  font-family: inherit;
  background: transparent;
  max-height: 120px;
  overflow-y: auto;
}
.chatroom-input-field::placeholder {
  color: var(--bs-secondary, #6c757d);
}
.chatroom-input-actions {
  display: flex;
  gap: 0.25rem;
}
.chatroom-input-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--bs-secondary, #6c757d);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.chatroom-input-action-btn:hover {
  background-color: var(--bs-light, #f8f9fa);
  color: var(--bs-primary, #0d6efd);
}
.chatroom-input-action-btn:focus {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}
.chatroom-input-action-btn img, .chatroom-input-action-btn i {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.chatroom-input-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background-color: var(--bs-primary, #0d6efd);
  color: white;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.chatroom-input-send-btn:hover {
  background-color: var(--bs-primary-dark, #0b5ed7);
}
.chatroom-input-send-btn:focus {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}
.chatroom-input-send-btn:disabled {
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
  opacity: 0.5;
  cursor: not-allowed;
}
.chatroom-input-send-btn img, .chatroom-input-send-btn i {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.chatroom-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.5rem;
}
.chatroom-input-toolbar-left, .chatroom-input-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.chatroom-input-format-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--bs-secondary, #6c757d);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s;
}
.chatroom-input-format-btn:hover {
  background-color: var(--bs-light, #f8f9fa);
  color: var(--bs-dark, #212529);
}
.chatroom-input-format-btn img {
  width: 14px;
  height: 14px;
}
.chatroom-input-char-count {
  font-size: 0.75rem;
  color: var(--bs-secondary, #6c757d);
  white-space: nowrap;
}

.chatroom-loading-overlay {
  position: absolute;
  inset: 0;
  background-color: oklch(99% 0.005 90deg / 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.chatroom-loading-overlay-content {
  text-align: center;
}
.chatroom-loading-overlay-spinner {
  width: 3rem;
  height: 3rem;
  border: 0.3rem solid var(--bs-light, #f8f9fa);
  border-top-color: var(--bs-primary, #0d6efd);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}
.chatroom-loading-overlay-text {
  color: var(--bs-secondary, #6c757d);
  margin: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .chatroom-header {
    padding: 0.75rem 1rem;
  }
  .chatroom-header-right {
    gap: 0.5rem;
  }
  .chatroom-title {
    font-size: 1rem;
  }
  .chatroom-messages {
    padding: 1rem;
  }
  .chatroom-message {
    max-width: 85%;
  }
  .chatroom-input {
    padding: 0.75rem 1rem;
  }
  .chatroom-input-avatar {
    width: 32px;
    height: 32px;
  }
}
.linkedin-badge .linkedin-profile-image {
  width: 3.75rem;
  height: 3.75rem;
}
.linkedin-badge .linkedin-button {
  background-color: #0077b5;
}
.linkedin-badge .linkedin-button:hover {
  background-color: #00568a;
}

/**
 * BASE LAYOUT STRUCTURE
 * ============================================================================
 * Fundamental page layout containers and skip links.
 * Moved from ontology/theme-layouts to components.
 */
.layout-container {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.page-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.content-wrapper {
  width: 100%;
}

.skip-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .skip-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .skip-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .skip-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.skip-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.skip-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

/**
 * LAYOUT SPECIFIC STYLES
 * ============================================================================
 * Styles for specific page layouts: content, archive, post, article, 
 * dashboard, profile, gallery, form, FAQ, settings, search, minimal, 
 * splash, landing, docs, chatroom.
 * Moved from ontology/theme-layouts to components.
 */
.page-content {
  flex: 1 0 auto;
  width: 100%;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.site-main {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.archive {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.archive__list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.archive__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.archive__item-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .archive__item-title {
    font-size: 1rem;
  }
}
.archive__item-date {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .archive__item-date {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.archive__item-excerpt {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .archive__item-excerpt {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.post {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.post__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.post__header-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .post__header-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .post__header-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .post__header-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.post__header-meta {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .post__header-meta {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.post__content {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .post__content {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.post__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.article {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.article__toc {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.article__toc-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .article__toc-title {
    font-size: 1rem;
  }
}
.article__toc-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .article__toc-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .article__toc-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .article__toc-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.article__toc-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.article__toc-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.article__content {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .article__content {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.dashboard {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .dashboard {
    grid-template-columns: repeat(12, 1fr);
  }
}
.dashboard {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}
.dashboard__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.dashboard__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.dashboard__main {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.dashboard__widget {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.dashboard__widget::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.dashboard__widget-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .dashboard__widget-title {
    font-size: 1rem;
  }
}
.dashboard__widget-value {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .dashboard__widget-value {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard__widget-value {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .dashboard__widget-value {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.dashboard__widget-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .dashboard__widget-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.profile {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.profile__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.profile__header-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.profile__avatar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.profile__name {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .profile__name {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .profile__name {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .profile__name {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.profile__bio {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .profile__bio {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.profile__stats {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.profile__stats-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.profile__stats-item-value {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .profile__stats-item-value {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .profile__stats-item-value {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .profile__stats-item-value {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.profile__stats-item-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .profile__stats-item-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.gallery {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.gallery__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.gallery__item-image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.gallery__item-caption {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .gallery__item-caption {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.form {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.form__group {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.form__label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .form__label {
    font-size: 1rem;
  }
}
.form__input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.form__help {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .form__help {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.form__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .form__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.form__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.form__button:active {
  transform: scale(0.98) translateY(0);
}
.form__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.form__button--secondary {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .form__button--secondary {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__button--secondary {
    min-height: 42px;
  }
}
.form__button--secondary:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.form__button--secondary:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.form__button--danger {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: var(--danger-bg, oklch(45% 0.22 25deg));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--danger-border, oklch(55% 0.25 25deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .form__button--danger {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__button--danger {
    min-height: 42px;
  }
}
.form__button--danger:hover {
  background: var(--danger-hover, oklch(50% 0.24 25deg));
  box-shadow: 0 0 15px var(--danger-glow, oklch(45% 0.22 25deg / 0.5));
}
.form__button--danger:focus-visible {
  outline: 2px solid var(--danger-border, oklch(55% 0.25 25deg));
  outline-offset: 2px;
}

.faq {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.faq__content-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.faq__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.faq__item-question {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .faq__item-question {
    font-size: 1rem;
  }
}
.faq__item-answer {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .faq__item-answer {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.settings {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .settings {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .settings {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .settings {
    grid-template-columns: repeat(12, 1fr);
  }
}
.settings__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.settings__sidebar-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.settings__sidebar-nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .settings__sidebar-nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .settings__sidebar-nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .settings__sidebar-nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.settings__sidebar-nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.settings__sidebar-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.settings__main {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.settings__section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.settings__section-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .settings__section-title {
    font-size: 1rem;
  }
}

.search {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.search__input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.search__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .search__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .search__button {
    min-height: 42px;
  }
}
.search__button:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.search__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.search__results {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.search__result {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.search__result-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .search__result-title {
    font-size: 1rem;
  }
}
.search__result-excerpt {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .search__result-excerpt {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.minimal-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}
.minimal-layout-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.splash {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.splash__countdown {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.splash__countdown::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.splash__countdown-number {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .splash__countdown-number {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash__countdown-number {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .splash__countdown-number {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.splash__countdown-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .splash__countdown-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.landing {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.landing__features {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .landing__features {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing__features {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .landing__features {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .landing__features {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}

.docs {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .docs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .docs {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .docs {
    grid-template-columns: repeat(12, 1fr);
  }
}
.docs__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.docs__sidebar-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.docs__sidebar-nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .docs__sidebar-nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .docs__sidebar-nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .docs__sidebar-nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.docs__sidebar-nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.docs__sidebar-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.docs__content {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .docs__content {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.docs__code {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-family: var(--font-mono, "SF Mono", Monaco, "Cascadia Code", monospace);
  font-size: var(--size-data, clamp(0.875rem, 1vw, 0.95rem));
  line-height: 1.5;
  background: oklch(96% 0.003 220deg);
  color: oklch(15% 0.01 250deg);
  padding: 0.2em 0.5em;
  border-radius: 0.25em;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .docs__code {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}

.chatroom {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .chatroom {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .chatroom {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .chatroom {
    grid-template-columns: repeat(12, 1fr);
  }
}
.chatroom {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}
.chatroom__messages {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.chatroom__message {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.chatroom__message-author {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .chatroom__message-author {
    font-size: 1rem;
  }
}
.chatroom__message-text {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .chatroom__message-text {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.chatroom__message-timestamp {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .chatroom__message-timestamp {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.chatroom__input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.chatroom__input-field {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.chatroom__input-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .chatroom__input-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .chatroom__input-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.chatroom__input-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.chatroom__input-button:active {
  transform: scale(0.98) translateY(0);
}
.chatroom__input-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * SPECIALIZED COMPONENTS
 * ============================================================================
 * Product displays, interactive modules, and specialized layouts.
 * Moved from ontology/theme-layouts to components.
 */
.product-applications {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .product-applications {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-applications {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .product-applications {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .product-applications {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.product-benefits-list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.product-benefits-list__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-benefits-list__item-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .product-benefits-list__item-title {
    font-size: 1rem;
  }
}
.product-benefits-list__item-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-benefits-list__item-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-code-example {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-code-example__code {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-family: var(--font-mono, "SF Mono", Monaco, "Cascadia Code", monospace);
  font-size: var(--size-data, clamp(0.875rem, 1vw, 0.95rem));
  line-height: 1.5;
  background: oklch(96% 0.003 220deg);
  color: oklch(15% 0.01 250deg);
  padding: 0.2em 0.5em;
  border-radius: 0.25em;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .product-code-example__code {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}
.product-code-example__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-code-example__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-feature-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .product-feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .product-feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .product-feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.product-section-container {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.product-visual {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.interactive-module {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.interactive-module::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.interactive-module__controls {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.interactive-module__display {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.genesis-invitation {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.genesis-invitation__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .genesis-invitation__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-invitation__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .genesis-invitation__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.genesis-invitation__message {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .genesis-invitation__message {
    font-size: 1rem;
  }
}
.genesis-invitation__action {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .genesis-invitation__action {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-invitation__action {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.genesis-invitation__action:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.genesis-invitation__action:active {
  transform: scale(0.98) translateY(0);
}
.genesis-invitation__action:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.transcendent-hero {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.transcendent-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.transcendent-hero__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .transcendent-hero__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .transcendent-hero__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .transcendent-hero__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.transcendent-hero__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .transcendent-hero__subtitle {
    font-size: 1rem;
  }
}

.linkedin__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--social-bg, oklch(55% 0.25 290deg / 0.3));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--social-border, oklch(55% 0.25 290deg));
  border-radius: 999px;
  text-decoration: none;
}
@media (max-width: 767px) {
  .linkedin__button {
    min-width: 44px;
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .linkedin__button {
    min-width: 40px;
    min-height: 40px;
    padding: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .linkedin__button {
    min-width: 36px;
    min-height: 36px;
  }
}
.linkedin__button:hover {
  background: var(--social-hover, oklch(55% 0.25 290deg / 0.5));
  box-shadow: 0 0 15px var(--social-glow, oklch(55% 0.25 290deg / 0.4));
}
.linkedin__button:focus-visible {
  outline: 2px solid var(--social-border, oklch(55% 0.25 290deg));
  outline-offset: 2px;
}

.content-modal {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}
.content-modal__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.content-modal__header-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .content-modal__header-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .content-modal__header-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .content-modal__header-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.content-modal__body {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .content-modal__body {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.content-modal__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.content-modal__footer-actions {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.content-modal__close {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: var(--danger-bg, oklch(45% 0.22 25deg));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--danger-border, oklch(55% 0.25 25deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .content-modal__close {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .content-modal__close {
    min-height: 42px;
  }
}
.content-modal__close:hover {
  background: var(--danger-hover, oklch(50% 0.24 25deg));
  box-shadow: 0 0 15px var(--danger-glow, oklch(45% 0.22 25deg / 0.5));
}
.content-modal__close:focus-visible {
  outline: 2px solid var(--danger-border, oklch(55% 0.25 25deg));
  outline-offset: 2px;
}

/**
 * UTILITY CLASSES AND RESPONSIVE CONTAINERS
 * ============================================================================
 * Ontology-based utility classes and responsive container utilities 
 * for legacy support during migration.
 * Moved from ontology/theme-layouts to components.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-visible {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.collapse {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
}
.collapse.show {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.container,
.container-fluid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

[class*=col-] {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

/**
 * VALIDATION CHECKLIST:
 * - [x] Zero raw CSS properties (only ontology mixins)
 * - [x] All layouts covered
 * - [x] All components covered
 * - [x] Semantic class names used throughout
 * - [x] SCSS structure mirrors HTML hierarchy
 * - [x] Legacy classes mapped for compatibility
 */
/**
 * Web Component: Product Card - SCSS
 * 
 * Namespace:
 *   HTML:  _includes/web-component-templates/product-card.html
 *   SCSS:  _sass/components/_product-card.scss
 *   JS:    assets/js/components/product-card.js
 * 
 * Styling for dynamically instantiated product card components.
 * Uses Genesis Ontological mixins for semantic styling.
 */
.wc-product-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.wc-product-card .wc-product-card__media {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: var(--space-narrative, 1rem);
}
.wc-product-card .wc-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-fluid, 0.3s ease);
}
.wc-product-card .wc-product-card__placeholder {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(94% 0.005 220deg);
  opacity: 0.7;
  filter: grayscale(0.3);
  border: 1px solid oklch(90% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wc-product-card .wc-product-card__placeholder-text {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .wc-product-card .wc-product-card__placeholder-text {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .wc-product-card .wc-product-card__placeholder-text {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .wc-product-card .wc-product-card__placeholder-text {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.wc-product-card .wc-product-card__placeholder-text {
  opacity: 0.3;
}
.wc-product-card .wc-product-card__content {
  margin-bottom: var(--space-narrative, 1rem);
}
.wc-product-card .wc-product-card__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .wc-product-card .wc-product-card__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .wc-product-card .wc-product-card__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .wc-product-card .wc-product-card__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.wc-product-card .wc-product-card__title {
  margin-bottom: var(--space-network, 0.5rem);
}
.wc-product-card .wc-product-card__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .wc-product-card .wc-product-card__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.wc-product-card .wc-product-card__actions {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-network, 0.5rem);
}
.wc-product-card .wc-product-card__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .wc-product-card .wc-product-card__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .wc-product-card .wc-product-card__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.wc-product-card .wc-product-card__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.wc-product-card .wc-product-card__button:active {
  transform: scale(0.98) translateY(0);
}
.wc-product-card .wc-product-card__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.wc-product-card .wc-product-card__button--primary {
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
}
.wc-product-card .wc-product-card__button--secondary {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .wc-product-card .wc-product-card__button--secondary {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .wc-product-card .wc-product-card__button--secondary {
    min-height: 42px;
  }
}
.wc-product-card .wc-product-card__button--secondary:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.wc-product-card .wc-product-card__button--secondary:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.wc-product-card:hover .wc-product-card__image {
  transform: scale(1.05);
}
.wc-product-card--featured {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}

/**
 * Web Component: Testimonial Card - SCSS
 * 
 * Namespace:
 *   HTML:  _includes/web-component-templates/testimonial-card.html
 *   SCSS:  _sass/components/_testimonial-card.scss
 *   JS:    assets/js/components/testimonial-card.js
 * 
 * Styling for dynamically instantiated testimonial card components.
 * Uses Genesis Ontological mixins for semantic styling.
 */
.wc-testimonial-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.wc-testimonial-card .wc-testimonial-card__quote {
  margin: 0 0 var(--space-narrative, 1rem) 0;
  padding: 0;
  border: none;
}
.wc-testimonial-card .wc-testimonial-card__text {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .wc-testimonial-card .wc-testimonial-card__text {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.wc-testimonial-card .wc-testimonial-card__text {
  font-style: italic;
  position: relative;
}
.wc-testimonial-card .wc-testimonial-card__text::before {
  content: '"';
  position: absolute;
  left: -0.5em;
  top: -0.2em;
  font-size: 2em;
  opacity: 0.3;
}
.wc-testimonial-card .wc-testimonial-card__author {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  align-items: center;
  gap: var(--space-network, 0.5rem);
}
.wc-testimonial-card .wc-testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.wc-testimonial-card .wc-testimonial-card__avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wc-testimonial-card .wc-testimonial-card__author-info {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.wc-testimonial-card .wc-testimonial-card__name {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .wc-testimonial-card .wc-testimonial-card__name {
    font-size: 1rem;
  }
}
.wc-testimonial-card .wc-testimonial-card__name {
  font-style: normal;
  display: block;
}
.wc-testimonial-card .wc-testimonial-card__company {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .wc-testimonial-card .wc-testimonial-card__company {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.wc-testimonial-card .wc-testimonial-card__company {
  display: block;
}

/**
 * Web Component: Alert Card - SCSS
 * 
 * Namespace:
 *   HTML:  _includes/web-component-templates/alert-card.html
 *   SCSS:  _sass/components/_alert-card.scss
 *   JS:    assets/js/components/alert-card.js
 * 
 * Styling for dynamically instantiated alert card components.
 * Uses Genesis Ontological mixins for semantic styling with type-specific variants.
 */
.wc-alert-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  align-items: flex-start;
  gap: var(--space-network, 0.75rem);
  padding: var(--space-narrative, 1rem);
  border-left: 4px solid oklch(65% 0.25 230deg);
}
.wc-alert-card .wc-alert-card__icon {
  flex-shrink: 0;
  color: oklch(65% 0.25 230deg);
}
.wc-alert-card .wc-alert-card__icon-svg {
  display: block;
}
.wc-alert-card .wc-alert-card__content {
  flex: 1;
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.wc-alert-card .wc-alert-card__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .wc-alert-card .wc-alert-card__title {
    font-size: 1rem;
  }
}
.wc-alert-card .wc-alert-card__title {
  margin: 0 0 var(--space-network, 0.25rem) 0;
}
.wc-alert-card .wc-alert-card__message {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .wc-alert-card .wc-alert-card__message {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.wc-alert-card .wc-alert-card__message {
  margin: 0;
}
.wc-alert-card .wc-alert-card__dismiss {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: var(--danger-bg, oklch(45% 0.22 25deg));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--danger-border, oklch(55% 0.25 25deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .wc-alert-card .wc-alert-card__dismiss {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .wc-alert-card .wc-alert-card__dismiss {
    min-height: 42px;
  }
}
.wc-alert-card .wc-alert-card__dismiss:hover {
  background: var(--danger-hover, oklch(50% 0.24 25deg));
  box-shadow: 0 0 15px var(--danger-glow, oklch(45% 0.22 25deg / 0.5));
}
.wc-alert-card .wc-alert-card__dismiss:focus-visible {
  outline: 2px solid var(--danger-border, oklch(55% 0.25 25deg));
  outline-offset: 2px;
}
.wc-alert-card .wc-alert-card__dismiss {
  background: transparent;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.5;
  transition: opacity var(--motion-fluid, 0.2s ease);
}
.wc-alert-card .wc-alert-card__dismiss:hover {
  opacity: 1;
}
.wc-alert-card .wc-alert-card__dismiss svg {
  display: block;
}
.wc-alert-card--success {
  border-left-color: oklch(60% 0.2 145deg);
}
.wc-alert-card--success .wc-alert-card__icon {
  color: oklch(60% 0.2 145deg);
}
.wc-alert-card--warning {
  border-left-color: oklch(70% 0.18 80deg);
}
.wc-alert-card--warning .wc-alert-card__icon {
  color: oklch(70% 0.18 80deg);
}
.wc-alert-card--error {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  border-left-color: oklch(55% 0.25 25deg);
}
.wc-alert-card--error .wc-alert-card__icon {
  color: oklch(55% 0.25 25deg);
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.wc-alert-card {
  animation: slideInRight 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .wc-alert-card {
    animation: none;
  }
}

/**
 * App Layout Styles - Ontology-Based
 * ============================================================================
 * Lightweight shell for app-like pages using app.html template.
 * Provides minimal wrapper without additional page chrome.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * This file matches the classes in _layouts/app.html:
 * - <body class="app-layout">
 * - <main class="app-content">
 */
.app-layout {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.app-content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  padding: clamp(1rem, 3vw, 2rem);
  contain: layout style;
}

/**
 * Default Layout Styles - Ontology-Based
 * ============================================================================
 * Base layout structure for all pages using default.html template.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * This file matches the classes in _layouts/default.html:
 * - <body class="layout-container">
 * - <a class="skip-link">
 * - <main class="page-content">
 */
.layout-container {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
.skip-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-anchor, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--motion-snap, 0.2s ease);
}
@media (max-width: 767px) {
  .skip-link {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
}
.skip-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-left-color: var(--accent-neon, oklch(88% 0.18 95deg));
  padding-left: calc(clamp(1rem, 2vw, 1.5rem) + 0.25rem);
}
.skip-link.active, .skip-link[aria-current=location] {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-left-color: var(--accent-neon, oklch(88% 0.18 95deg));
  font-weight: 600;
}
.skip-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.skip-link.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 1rem 1.5rem;
  background: var(--accent-neon, oklch(88% 0.18 95deg));
  color: var(--text-inverse, oklch(15% 0.03 250deg));
  font-weight: 600;
  z-index: 9999;
}
.skip-link.skip-link:focus {
  top: 0;
}
.skip-link {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.page-content {
  flex: 1 0 auto;
  width: 100%;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

/**
 * Scrollable Layout Styles - Ontology-Based
 * ============================================================================
 * Standard vertical flow pages with natural scrolling.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * This file matches the classes in _layouts/scrollable.html:
 * - <div class="scrollable-layout">
 */
.scrollable-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  width: 100%;
  contain: layout style;
  isolation: isolate;
}

/**
 * Fixed-Height Layout Styles - Ontology-Based
 * ============================================================================
 * Application-style layouts with constrained viewport height.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * This file matches the classes in _layouts/fixed-height.html:
 * - <div class="fixed-height-layout">
 */
.fixed-height-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  overflow: hidden;
  contain: layout style;
  isolation: isolate;
}

/**
 * Minimal Base Layout Styles - Ontology-Based
 * ============================================================================
 * Utility or lightweight pages with minimal chrome.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * This file matches the classes in _layouts/minimal-base.html:
 * - <div class="minimal-layout">
 */
.minimal-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
  width: 100%;
  contain: layout style;
  isolation: isolate;
}

/**
 * Post Layout Styles - Ontology-Based
 * ============================================================================
 * Blog post article layout with metadata and sharing.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * Uses semantic includes from _includes/layouts/
 * 
 * This file matches the BEM structure from includes:
 * - post__header (from layout-header.html)
 * - post__title
 * - post__subtitle
 * - post__meta (from content-meta.html)
 * - post__meta-date
 * - post__meta-author
 * - post__taxonomy (from tags-categories.html)
 * - post__tags
 * - post__tag
 * - post__categories
 * - post__category
 * - post__footer-cta (from layout-footer-cta.html)
 * - post__cta-title
 * - post__cta-button
 */
.post-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}

.post__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.post__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .post__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .post__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .post__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.post__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .post__subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.post__meta {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .post__meta {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.post__meta {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.post__meta-date,
.post__meta-author,
.post__meta-reading-time {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .post__meta-date,
  .post__meta-author,
  .post__meta-reading-time {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.post__taxonomy {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.post__tags,
.post__categories {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.post__tag {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-tiny, clamp(0.75rem, 0.9vw, 0.8rem));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(15% 0.01 250deg);
  padding: 0.25em 0.75em;
  background: oklch(95% 0.005 220deg);
  border-radius: 999px;
  display: inline-block;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .post__tag {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
}
.post__tag {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.post__category {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-tiny, clamp(0.75rem, 0.9vw, 0.8rem));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(15% 0.01 250deg);
  padding: 0.25em 0.75em;
  background: oklch(95% 0.005 220deg);
  border-radius: 999px;
  display: inline-block;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .post__category {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
}
.post__category {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.post__footer-cta {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.post__cta-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .post__cta-title {
    font-size: 1rem;
  }
}

.post__cta-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .post__cta-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .post__cta-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.post__cta-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.post__cta-button:active {
  transform: scale(0.98) translateY(0);
}
.post__cta-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * Article Layout Styles - Ontology-Based
 * ============================================================================
 * Long-form article with optional table of contents sidebar.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * Uses semantic includes from _includes/layouts/
 * 
 * This file matches the BEM structure from includes:
 * - article__header (from layout-header.html)
 * - article__title
 * - article__subtitle
 * - article__meta (from content-meta.html)
 * - article__meta-date
 * - article__meta-author
 * - article__meta-reading-time
 * - article__footer
 */
.article-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}

.article-toc-sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.article-toc-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .article-toc-title {
    font-size: 1rem;
  }
}

.article-main-col {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.article__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.article__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .article__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .article__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .article__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.article__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .article__subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.article__meta {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .article__meta {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.article__meta-date,
.article__meta-author,
.article__meta-reading-time {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .article__meta-date,
  .article__meta-author,
  .article__meta-reading-time {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.article__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.article__footer-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .article__footer-title {
    font-size: 1rem;
  }
}

/**
 * Archive Layout Styles - Ontology-Based
 * ============================================================================
 * Collection listing with filtering, sorting, and view options.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * Uses semantic includes from _includes/layouts/
 * 
 * This file matches the BEM structure from includes:
 * - archive__header (from layout-header.html)
 * - archive__title
 * - archive__description
 * - archive__controls
 * - archive__select
 * - archive__view-btn
 * - archive__pagination
 */
.archive-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}

.archive__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.archive__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .archive__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .archive__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .archive__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.archive__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .archive__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.archive__controls {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.archive__filters,
.archive__sort {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.archive__select {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-input, clamp(0.375rem, 0.75vw, 0.5rem));
  background: var(--input-bg, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-input, oklch(30% 0.04 250deg / 0.5));
  transition: all var(--motion-snap, 0.2s ease);
}
@media (max-width: 767px) {
  .archive__select {
    min-height: 44px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .archive__select {
    min-height: 42px;
    padding: 0.75rem 1rem;
  }
}
@media (min-width: 1024px) {
  .archive__select {
    min-height: 40px;
    padding: 0.625rem 1rem;
  }
}
.archive__select:hover {
  background: var(--input-hover, oklch(22% 0.04 246deg / 0.7));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.6));
}
.archive__select:focus {
  outline: none;
  background: var(--input-focus, oklch(20% 0.04 245deg / 0.8));
  border-color: var(--accent-neon, oklch(88% 0.18 95deg));
  box-shadow: 0 0 0 3px var(--accent-neon, oklch(88% 0.18 95deg / 0.2));
}
.archive__select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--input-disabled, oklch(16% 0.02 250deg / 0.4));
}
.archive__select:invalid, .archive__select.error {
  border-color: var(--danger-border, oklch(55% 0.25 25deg));
}
.archive__select:invalid:focus, .archive__select.error:focus {
  box-shadow: 0 0 0 3px var(--danger-border, oklch(55% 0.25 25deg / 0.2));
}

.archive__view-toggle {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  display: inline-flex;
}

.archive__view-btn {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--padding-toggle, clamp(0.75rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg / 0.3));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  text-align: left;
  cursor: pointer;
}
@media (max-width: 767px) {
  .archive__view-btn {
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
.archive__view-btn:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.archive__view-btn[aria-expanded=true] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.archive__view-btn:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.archive__view-btn .toggle-icon {
  transition: transform 0.2s ease;
}
.archive__view-btn[aria-expanded=true] .toggle-icon {
  transform: rotate(180deg);
}
.archive__view-btn {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}
.archive__view-btn--active {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  font-weight: 700;
  position: relative;
}
.archive__view-btn--active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent-neon, oklch(88% 0.18 95deg));
  border-radius: 2px 2px 0 0;
}
.archive__view-btn--active.vertical-nav {
  border-left: 3px solid var(--accent-neon, oklch(88% 0.18 95deg));
  padding-left: calc(1rem - 3px);
}
.archive__view-btn--active.vertical-nav::after {
  display: none;
}
@media (prefers-contrast: high) {
  .archive__view-btn--active::after {
    height: 4px;
  }
}

.archive__pagination {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.pagination-list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  display: flex;
  list-style: none;
  padding-left: 0;
  justify-content: center;
}

/**
 * Profile Layout Styles - Ontology-Based
 * ============================================================================
 * User profile page with avatar, stats, and content.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * This file matches the BEM structure:
 * - profile__header
 * - profile__avatar
 * - profile__info
 * - profile__name
 * - profile__role
 * - profile__bio
 * - profile__social
 * - profile__social-link
 * - profile__main
 * - profile__sidebar
 * - profile__stats
 * - profile__skills
 */
.profile-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}

.profile__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  text-align: center;
}

.profile__avatar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  display: inline-block;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar-bg, oklch(25% 0.04 250deg));
  flex-shrink: 0;
  width: var(--avatar-size, 2.5rem);
  height: var(--avatar-size, 2.5rem);
}
.profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile__avatar::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  border: 2px solid var(--bg-primary, oklch(15% 0.03 250deg));
  display: none;
}
.profile__avatar.status-online::after {
  display: block;
  background: var(--status-online, oklch(65% 0.25 150deg));
}
.profile__avatar.status-away::after {
  display: block;
  background: var(--status-away, oklch(75% 0.25 85deg));
}
.profile__avatar.status-busy::after {
  display: block;
  background: var(--status-busy, oklch(55% 0.25 25deg));
}
.profile__avatar.status-offline::after {
  display: block;
  background: var(--status-offline, oklch(50% 0.02 220deg));
}
.profile__avatar.avatar-xs {
  --avatar-size: 1.5rem;
}
.profile__avatar.avatar-sm {
  --avatar-size: 2rem;
}
.profile__avatar.avatar-md {
  --avatar-size: 2.5rem;
}
.profile__avatar.avatar-lg {
  --avatar-size: 3.5rem;
}
.profile__avatar.avatar-xl {
  --avatar-size: 5rem;
}
.profile__avatar--placeholder {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
}

.profile__info {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.profile__name {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .profile__name {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .profile__name {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .profile__name {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.profile__role {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .profile__role {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.profile__bio {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .profile__bio {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.profile__social {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.profile__social-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--social-bg, oklch(55% 0.25 290deg / 0.3));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--social-border, oklch(55% 0.25 290deg));
  border-radius: 999px;
  text-decoration: none;
}
@media (max-width: 767px) {
  .profile__social-link {
    min-width: 44px;
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .profile__social-link {
    min-width: 40px;
    min-height: 40px;
    padding: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .profile__social-link {
    min-width: 36px;
    min-height: 36px;
  }
}
.profile__social-link:hover {
  background: var(--social-hover, oklch(55% 0.25 290deg / 0.5));
  box-shadow: 0 0 15px var(--social-glow, oklch(55% 0.25 290deg / 0.4));
}
.profile__social-link:focus-visible {
  outline: 2px solid var(--social-border, oklch(55% 0.25 290deg));
  outline-offset: 2px;
}

.profile__main {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.profile__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.profile__stats {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(97% 0.005 220deg);
  backdrop-filter: blur(8px);
  border: 1px solid oklch(87% 0.005 220deg);
  padding: var(--padding-entity-aggregate, clamp(2rem, 4vw, 3rem));
}

.profile__stats-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .profile__stats-title {
    font-size: 1rem;
  }
}

.profile__skills {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.profile__skills-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .profile__skills-title {
    font-size: 1rem;
  }
}

.profile__skills-list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.profile__skills-badge {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-tiny, clamp(0.75rem, 0.9vw, 0.8rem));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: oklch(15% 0.01 250deg);
  padding: 0.25em 0.75em;
  background: oklch(95% 0.005 220deg);
  border-radius: 999px;
  display: inline-block;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .profile__skills-badge {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }
}

/**
 * Landing Layout Styles - Ontology-Based
 * ============================================================================
 * Marketing landing page with hero and CTA sections.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * Uses semantic includes from _includes/layouts/
 * 
 * This file matches the BEM structure from includes:
 * - landing__hero (hero section)
 * - landing__header (from layout-header.html)
 * - landing__title
 * - landing__subtitle
 * - landing__footer-cta (from layout-footer-cta.html)
 * - landing__cta-title
 * - landing__cta-description
 * - landing__cta-button
 */
.landing-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}

.landing__hero {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}

.landing__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.landing__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .landing__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .landing__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.landing__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .landing__subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.landing__hero-actions {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.landing__hero-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .landing__hero-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing__hero-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.landing__hero-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.landing__hero-button:active {
  transform: scale(0.98) translateY(0);
}
.landing__hero-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.landing__hero-image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.landing__footer-cta {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}

.landing__cta-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .landing__cta-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing__cta-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .landing__cta-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.landing__cta-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .landing__cta-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.landing__cta-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .landing__cta-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing__cta-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.landing__cta-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.landing__cta-button:active {
  transform: scale(0.98) translateY(0);
}
.landing__cta-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * Gallery Layout Styles - Ontology-Based
 * ============================================================================
 * Image gallery with filtering capabilities.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * Uses semantic includes from _includes/layouts/
 * 
 * This file matches the BEM structure from includes:
 * - gallery__header (from layout-header.html)
 * - gallery__title
 * - gallery__description
 * - gallery__filters
 * - gallery__filter
 */
.gallery-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}

.gallery__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  text-align: center;
}

.gallery__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .gallery__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gallery__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .gallery__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.gallery__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .gallery__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.gallery__filters {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.gallery__filter {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--padding-toggle, clamp(0.75rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg / 0.3));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  text-align: left;
  cursor: pointer;
}
@media (max-width: 767px) {
  .gallery__filter {
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
.gallery__filter:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.gallery__filter[aria-expanded=true] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.gallery__filter:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.gallery__filter .toggle-icon {
  transition: transform 0.2s ease;
}
.gallery__filter[aria-expanded=true] .toggle-icon {
  transform: rotate(180deg);
}
.gallery__filter {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}
.gallery__filter--active {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  font-weight: 700;
  position: relative;
}
.gallery__filter--active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent-neon, oklch(88% 0.18 95deg));
  border-radius: 2px 2px 0 0;
}
.gallery__filter--active.vertical-nav {
  border-left: 3px solid var(--accent-neon, oklch(88% 0.18 95deg));
  padding-left: calc(1rem - 3px);
}
.gallery__filter--active.vertical-nav::after {
  display: none;
}
@media (prefers-contrast: high) {
  .gallery__filter--active::after {
    height: 4px;
  }
}

/**
 * Form Layout Styles - Ontology-Based
 * ============================================================================
 * Multi-step form layout with progress indicator.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * Uses semantic includes from _includes/layouts/
 * 
 * This file matches the BEM structure from includes:
 * - form__header (from layout-header.html)
 * - form__title
 * - form__description
 * - form__content
 * - form__progress
 * - form__steps
 * - form__footer
 * - form__help
 */
.form-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .form-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1.5rem 1.25rem;
  }
}
@media (min-width: 1024px) {
  .form-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem 1.5rem;
  }
}
.form-layout label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.form-layout .form-full-width {
  grid-column: 1/-1;
}
.form-layout {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}

.form__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  text-align: center;
}

.form__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .form__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .form__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.form__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .form__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.form__content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.form__progress {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.form__progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}

.form__progress-bar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.form__steps {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding-left: 0;
}

.form__step {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .form__step {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.form__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  text-align: center;
}

.form__help {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .form__help {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.form__privacy {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .form__privacy {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .form__privacy::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__privacy {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.form__privacy:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.form__privacy:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.form__privacy {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .form__privacy {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

/**
 * Docs Layout Styles - Ontology-Based
 * ============================================================================
 * Documentation layout with sidebar navigation.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 */
.docs-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-sidebar, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .docs-layout.mobile-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .docs-layout.mobile-hidden {
    display: none;
  }
}
@media (min-width: 768px) {
  .docs-layout {
    width: var(--sidebar-width, clamp(200px, 25vw, 280px));
    position: sticky;
    top: var(--sidebar-offset, 80px);
    align-self: flex-start;
    max-height: calc(100vh - var(--sidebar-offset, 80px) - 2rem);
    overflow-y: auto;
  }
}
.docs-layout {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
.docs-layout .docs-sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-sidebar, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .docs-layout .docs-sidebar.mobile-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .docs-layout .docs-sidebar.mobile-hidden {
    display: none;
  }
}
@media (min-width: 768px) {
  .docs-layout .docs-sidebar {
    width: var(--sidebar-width, clamp(200px, 25vw, 280px));
    position: sticky;
    top: var(--sidebar-offset, 80px);
    align-self: flex-start;
    max-height: calc(100vh - var(--sidebar-offset, 80px) - 2rem);
    overflow-y: auto;
  }
}
.docs-layout .docs-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.docs-layout .docs-nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .docs-layout .docs-nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .docs-layout .docs-nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .docs-layout .docs-nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.docs-layout .docs-nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.docs-layout .docs-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.docs-layout .docs-nav-link--active {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  font-weight: 700;
  position: relative;
}
.docs-layout .docs-nav-link--active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent-neon, oklch(88% 0.18 95deg));
  border-radius: 2px 2px 0 0;
}
.docs-layout .docs-nav-link--active.vertical-nav {
  border-left: 3px solid var(--accent-neon, oklch(88% 0.18 95deg));
  padding-left: calc(1rem - 3px);
}
.docs-layout .docs-nav-link--active.vertical-nav::after {
  display: none;
}
@media (prefers-contrast: high) {
  .docs-layout .docs-nav-link--active::after {
    height: 4px;
  }
}
.docs-layout .docs-content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.docs-layout .docs-breadcrumb {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-breadcrumb, 0.5rem);
}
@media (max-width: 767px) {
  .docs-layout .docs-breadcrumb {
    font-size: 0.875rem;
  }
  .docs-layout .docs-breadcrumb.mobile-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .docs-layout .docs-breadcrumb.mobile-scroll::-webkit-scrollbar {
    display: none;
  }
}
.docs-layout .docs-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .docs-layout .docs-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .docs-layout .docs-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .docs-layout .docs-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.docs-layout .docs-pagination {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-pagination, clamp(0.5rem, 1vw, 0.75rem) clamp(0.75rem, 1.5vw, 1rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg / 0.3));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  text-decoration: none;
  font-weight: 500;
}
@media (max-width: 767px) {
  .docs-layout .docs-pagination {
    min-width: 44px;
    min-height: 44px;
    padding: 0.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .docs-layout .docs-pagination {
    min-width: 40px;
    min-height: 40px;
  }
}
@media (min-width: 1024px) {
  .docs-layout .docs-pagination {
    min-width: 36px;
    min-height: 36px;
  }
}
.docs-layout .docs-pagination:hover:not(.disabled) {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.docs-layout .docs-pagination.active, .docs-layout .docs-pagination[aria-current=page] {
  background: var(--accent-neon, oklch(88% 0.18 95deg));
  color: var(--text-inverse, oklch(15% 0.03 250deg));
  border-color: var(--accent-neon, oklch(88% 0.18 95deg));
  font-weight: 700;
}
.docs-layout .docs-pagination.disabled, .docs-layout .docs-pagination[aria-disabled=true] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.docs-layout .docs-pagination:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.docs-layout .docs-pagination {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.docs-layout .docs-toc {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-sidebar, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .docs-layout .docs-toc.mobile-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .docs-layout .docs-toc.mobile-hidden {
    display: none;
  }
}
@media (min-width: 768px) {
  .docs-layout .docs-toc {
    width: var(--sidebar-width, clamp(200px, 25vw, 280px));
    position: sticky;
    top: var(--sidebar-offset, 80px);
    align-self: flex-start;
    max-height: calc(100vh - var(--sidebar-offset, 80px) - 2rem);
    overflow-y: auto;
  }
}
.docs-layout .docs-toc-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .docs-layout .docs-toc-title {
    font-size: 1rem;
  }
}

/**
 * FAQ Layout Styles - Ontology-Based
 * ============================================================================
 * Frequently Asked Questions with searchable categories.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * Uses semantic includes from _includes/layouts/
 * 
 * This file matches the BEM structure from includes:
 * - faq__header (from layout-header.html)
 * - faq__title
 * - faq__description
 * - faq__search
 * - faq__categories
 * - faq__category
 * - faq__footer-cta (from layout-footer-cta.html)
 * - faq__cta-title
 * - faq__cta-description
 * - faq__cta-button
 */
.faq-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}

.faq__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.faq__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .faq__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .faq__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .faq__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.faq__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .faq__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.faq__search {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.faq__search-input {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .faq__search-input {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .faq__search-input {
    min-height: 42px;
  }
}
.faq__search-input:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.faq__search-input:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}

.faq__categories {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.faq__category {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .faq__category {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .faq__category {
    min-height: 42px;
  }
}
.faq__category:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.faq__category:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.faq__category--active {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.faq__footer-cta {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.faq__cta-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .faq__cta-title {
    font-size: 1rem;
  }
}

.faq__cta-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .faq__cta-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.faq__cta-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .faq__cta-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .faq__cta-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.faq__cta-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.faq__cta-button:active {
  transform: scale(0.98) translateY(0);
}
.faq__cta-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * Dashboard Layout Styles - Ontology-Based
 * ============================================================================
 * Dashboard interface with header and content area.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * Uses semantic includes from _includes/layouts/
 * 
 * This file matches the BEM structure from includes:
 * - dashboard__header (from layout-header.html)
 * - dashboard__title
 * - dashboard__actions
 * - dashboard__action-btn
 */
.dashboard-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .dashboard-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-layout {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .dashboard-layout {
    grid-template-columns: repeat(12, 1fr);
  }
}
.dashboard-layout {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  height: 100%;
}

.dashboard__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .dashboard__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .dashboard__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.dashboard__actions {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  display: flex;
  gap: 0.5rem;
}

.dashboard__action-btn {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .dashboard__action-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard__action-btn {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.dashboard__action-btn:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.dashboard__action-btn:active {
  transform: scale(0.98) translateY(0);
}
.dashboard__action-btn:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * Chatroom Layout Styles - Ontology-Based
 * ============================================================================
 * Real-time chat interface layout.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * Note: This layout uses a custom <chatroom-app> web component.
 * SCSS targets the internal structure within the component.
 */
.chatroom-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chatroom-layout .chatroom-header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  flex-shrink: 0;
}
.chatroom-layout .chatroom-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .chatroom-layout .chatroom-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .chatroom-layout .chatroom-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .chatroom-layout .chatroom-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.chatroom-layout .chatroom-participants {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .chatroom-layout .chatroom-participants {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.chatroom-layout .chatroom-messages {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  flex: 1;
  overflow: auto;
}
.chatroom-layout .chatroom-input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  flex-shrink: 0;
}
.chatroom-layout .chatroom-input-form {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  display: flex;
  gap: 0.5rem;
}
.chatroom-layout .chatroom-send-btn {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .chatroom-layout .chatroom-send-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .chatroom-layout .chatroom-send-btn {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.chatroom-layout .chatroom-send-btn:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.chatroom-layout .chatroom-send-btn:active {
  transform: scale(0.98) translateY(0);
}
.chatroom-layout .chatroom-send-btn:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * Search Layout Styles - Ontology-Based
 * ============================================================================
 * Search interface with filters and results.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * This file matches the BEM structure:
 * - search__header
 * - search__form
 * - search__input-group
 * - search__input
 * - search__submit
 * - search__count
 * - search__sidebar
 * - search__filters-title
 * - search__filter-group
 * - search__filter-title
 */
.search-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.search__form {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .search__form {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .search__form {
    min-height: 42px;
  }
}
.search__form:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.search__form:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.search__form {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.search__input-group {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.search__input {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-input, clamp(0.375rem, 0.75vw, 0.5rem));
  background: var(--input-bg, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-input, oklch(30% 0.04 250deg / 0.5));
  transition: all var(--motion-snap, 0.2s ease);
}
@media (max-width: 767px) {
  .search__input {
    min-height: 44px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .search__input {
    min-height: 42px;
    padding: 0.75rem 1rem;
  }
}
@media (min-width: 1024px) {
  .search__input {
    min-height: 40px;
    padding: 0.625rem 1rem;
  }
}
.search__input:hover {
  background: var(--input-hover, oklch(22% 0.04 246deg / 0.7));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.6));
}
.search__input:focus {
  outline: none;
  background: var(--input-focus, oklch(20% 0.04 245deg / 0.8));
  border-color: var(--accent-neon, oklch(88% 0.18 95deg));
  box-shadow: 0 0 0 3px var(--accent-neon, oklch(88% 0.18 95deg / 0.2));
}
.search__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--input-disabled, oklch(16% 0.02 250deg / 0.4));
}
.search__input:invalid, .search__input.error {
  border-color: var(--danger-border, oklch(55% 0.25 25deg));
}
.search__input:invalid:focus, .search__input.error:focus {
  box-shadow: 0 0 0 3px var(--danger-border, oklch(55% 0.25 25deg / 0.2));
}

.search__submit {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .search__submit {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .search__submit {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.search__submit:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.search__submit:active {
  transform: scale(0.98) translateY(0);
}
.search__submit:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.search__count {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .search__count {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.search__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.search__filters-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .search__filters-title {
    font-size: 1rem;
  }
}

.search__filter-group {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.search__filter-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .search__filter-title {
    font-size: 1rem;
  }
}

/**
 * Settings Layout Styles - Ontology-Based
 * ============================================================================
 * Settings/preferences interface with sidebar navigation.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 */
.settings-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-sidebar, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .settings-layout.mobile-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .settings-layout.mobile-hidden {
    display: none;
  }
}
@media (min-width: 768px) {
  .settings-layout {
    width: var(--sidebar-width, clamp(200px, 25vw, 280px));
    position: sticky;
    top: var(--sidebar-offset, 80px);
    align-self: flex-start;
    max-height: calc(100vh - var(--sidebar-offset, 80px) - 2rem);
    overflow-y: auto;
  }
}
.settings-layout {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  height: 100%;
  display: flex;
}
.settings-layout .settings-sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  gap: var(--space-tabs, clamp(0.5rem, 1vw, 1rem));
  border-bottom: 2px solid var(--border-subtle, oklch(30% 0.04 250deg / 0.3));
}
@media (max-width: 767px) {
  .settings-layout .settings-sidebar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .settings-layout .settings-sidebar::-webkit-scrollbar {
    display: none;
  }
  .settings-layout .settings-sidebar {
    flex-wrap: nowrap;
  }
}
@media (min-width: 768px) {
  .settings-layout .settings-sidebar {
    flex-wrap: wrap;
  }
}
.settings-layout .settings-sidebar-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .settings-layout .settings-sidebar-title {
    font-size: 1rem;
  }
}
.settings-layout .settings-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.settings-layout .settings-nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-tab, clamp(0.75rem, 1.5vw, 1rem) clamp(1.25rem, 2.5vw, 1.75rem));
  color: var(--text-secondary, oklch(70% 0.02 220deg));
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 500;
  transition: all var(--motion-snap, 0.2s ease);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .settings-layout .settings-nav-link {
    min-height: 44px;
    padding: 0.875rem 1.25rem;
  }
}
.settings-layout .settings-nav-link:hover:not([aria-selected=true]) {
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border-bottom-color: var(--border-subtle, oklch(30% 0.04 250deg / 0.5));
}
.settings-layout .settings-nav-link[aria-selected=true] {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
  font-weight: 700;
}
.settings-layout .settings-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.settings-layout .settings-nav-link--active {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  font-weight: 700;
  position: relative;
}
.settings-layout .settings-nav-link--active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent-neon, oklch(88% 0.18 95deg));
  border-radius: 2px 2px 0 0;
}
.settings-layout .settings-nav-link--active.vertical-nav {
  border-left: 3px solid var(--accent-neon, oklch(88% 0.18 95deg));
  padding-left: calc(1rem - 3px);
}
.settings-layout .settings-nav-link--active.vertical-nav::after {
  display: none;
}
@media (prefers-contrast: high) {
  .settings-layout .settings-nav-link--active::after {
    height: 4px;
  }
}
.settings-layout .settings-main {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  flex: 1;
}
.settings-layout .settings-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .settings-layout .settings-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .settings-layout .settings-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .settings-layout .settings-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.settings-layout .settings-actions {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  display: flex;
  gap: 0.5rem;
}
.settings-layout .settings-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .settings-layout .settings-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .settings-layout .settings-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.settings-layout .settings-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.settings-layout .settings-button:active {
  transform: scale(0.98) translateY(0);
}
.settings-layout .settings-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.settings-layout .settings-button--primary {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

/**
 * Minimal Layout Styles - Ontology-Based
 * ============================================================================
 * Error pages and lightweight content with minimal chrome.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * This file matches the classes in _layouts/minimal.html:
 * - <div class="minimal-layout-content">
 * - <h1 class="minimal-error-code">
 * - <h2 class="minimal-title">
 * - <p class="minimal-description">
 * - <div class="minimal-content">
 * - <a class="minimal-home-link">
 */
.minimal-layout-content {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.minimal-layout-content .minimal-error-code {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .minimal-layout-content .minimal-error-code {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .minimal-layout-content .minimal-error-code {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .minimal-layout-content .minimal-error-code {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.minimal-layout-content .minimal-error-code {
  font-size: clamp(4rem, 10vw, 6rem);
  font-weight: 700;
}
.minimal-layout-content .minimal-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .minimal-layout-content .minimal-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .minimal-layout-content .minimal-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .minimal-layout-content .minimal-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.minimal-layout-content .minimal-title {
  font-size: clamp(2rem, 5vw, 2.5rem);
}
.minimal-layout-content .minimal-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .minimal-layout-content .minimal-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.minimal-layout-content .minimal-description {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}
.minimal-layout-content .minimal-content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.minimal-layout-content .minimal-home-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .minimal-layout-content .minimal-home-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .minimal-layout-content .minimal-home-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .minimal-layout-content .minimal-home-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.minimal-layout-content .minimal-home-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.minimal-layout-content .minimal-home-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.minimal-layout-content .minimal-home-link {
  display: inline-block;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/**
 * Splash Layout Styles - Ontology-Based
 * ============================================================================
 * Coming soon/launch page with countdown and email capture.
 * Mirrors HTML structure and uses Genesis Semantic Design System internally.
 * 
 * This file matches the BEM structure:
 * - splash__logo
 * - splash__title
 * - splash__subtitle
 * - splash__countdown
 * - splash__countdown-item
 * - splash__countdown-value
 * - splash__countdown-label
 * - splash__email-form
 * - splash__email-input
 * - splash__email-button
 * - splash__social
 * - splash__social-link
 */
.splash-layout-content {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.splash__logo {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  max-width: 200px;
  margin-inline: auto;
}

.splash__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .splash__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .splash__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.splash__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .splash__subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.splash__countdown {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.splash__countdown::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}

.splash__countdown-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.splash__countdown-value {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .splash__countdown-value {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash__countdown-value {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .splash__countdown-value {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.splash__countdown-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .splash__countdown-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.splash__email-form {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-input, clamp(0.375rem, 0.75vw, 0.5rem));
  background: var(--input-bg, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-input, oklch(30% 0.04 250deg / 0.5));
  transition: all var(--motion-snap, 0.2s ease);
}
@media (max-width: 767px) {
  .splash__email-form {
    min-height: 44px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash__email-form {
    min-height: 42px;
    padding: 0.75rem 1rem;
  }
}
@media (min-width: 1024px) {
  .splash__email-form {
    min-height: 40px;
    padding: 0.625rem 1rem;
  }
}
.splash__email-form:hover {
  background: var(--input-hover, oklch(22% 0.04 246deg / 0.7));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.6));
}
.splash__email-form:focus {
  outline: none;
  background: var(--input-focus, oklch(20% 0.04 245deg / 0.8));
  border-color: var(--accent-neon, oklch(88% 0.18 95deg));
  box-shadow: 0 0 0 3px var(--accent-neon, oklch(88% 0.18 95deg / 0.2));
}
.splash__email-form:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--input-disabled, oklch(16% 0.02 250deg / 0.4));
}
.splash__email-form:invalid, .splash__email-form.error {
  border-color: var(--danger-border, oklch(55% 0.25 25deg));
}
.splash__email-form:invalid:focus, .splash__email-form.error:focus {
  box-shadow: 0 0 0 3px var(--danger-border, oklch(55% 0.25 25deg / 0.2));
}
.splash__email-form {
  max-width: 500px;
  margin-inline: auto;
  display: flex;
  gap: 0.5rem;
}

.splash__email-input {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-input, clamp(0.375rem, 0.75vw, 0.5rem));
  background: var(--input-bg, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-input, oklch(30% 0.04 250deg / 0.5));
  transition: all var(--motion-snap, 0.2s ease);
}
@media (max-width: 767px) {
  .splash__email-input {
    min-height: 44px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash__email-input {
    min-height: 42px;
    padding: 0.75rem 1rem;
  }
}
@media (min-width: 1024px) {
  .splash__email-input {
    min-height: 40px;
    padding: 0.625rem 1rem;
  }
}
.splash__email-input:hover {
  background: var(--input-hover, oklch(22% 0.04 246deg / 0.7));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.6));
}
.splash__email-input:focus {
  outline: none;
  background: var(--input-focus, oklch(20% 0.04 245deg / 0.8));
  border-color: var(--accent-neon, oklch(88% 0.18 95deg));
  box-shadow: 0 0 0 3px var(--accent-neon, oklch(88% 0.18 95deg / 0.2));
}
.splash__email-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--input-disabled, oklch(16% 0.02 250deg / 0.4));
}
.splash__email-input:invalid, .splash__email-input.error {
  border-color: var(--danger-border, oklch(55% 0.25 25deg));
}
.splash__email-input:invalid:focus, .splash__email-input.error:focus {
  box-shadow: 0 0 0 3px var(--danger-border, oklch(55% 0.25 25deg / 0.2));
}

.splash__email-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .splash__email-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash__email-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.splash__email-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.splash__email-button:active {
  transform: scale(0.98) translateY(0);
}
.splash__email-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.splash__social {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.splash__social-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--social-bg, oklch(55% 0.25 290deg / 0.3));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--social-border, oklch(55% 0.25 290deg));
  border-radius: 999px;
  text-decoration: none;
}
@media (max-width: 767px) {
  .splash__social-link {
    min-width: 44px;
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash__social-link {
    min-width: 40px;
    min-height: 40px;
    padding: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .splash__social-link {
    min-width: 36px;
    min-height: 36px;
  }
}
.splash__social-link:hover {
  background: var(--social-hover, oklch(55% 0.25 290deg / 0.5));
  box-shadow: 0 0 15px var(--social-glow, oklch(55% 0.25 290deg / 0.4));
}
.splash__social-link:focus-visible {
  outline: 2px solid var(--social-border, oklch(55% 0.25 290deg));
  outline-offset: 2px;
}

/**
 * Responsive Enhancements for All Jekyll Layouts
 * ============================================================================
 * responsive-design-agent v2.1.0
 * 
 * This file adds comprehensive responsive patterns to all Jekyll layouts.
 * All layouts now follow mobile-first principles with:
 * - WCAG 2.5.5 touch targets (≥44px)
 * - Fluid typography (16px minimum)
 * - Responsive grids (375px → 1920px+)
 * - Proper breakpoints (sm/md/lg/xl)
 * - Reduced motion support
 * 
 * Usage: Import this after individual layout files to enhance responsiveness.
 * 
 * @version 2.1.0
 * @agent responsive-design-agent
 * @date 2026-01-29
 */
/**
 * PROJECT GENESIS: ONTOLOGY SYSTEM INDEX
 * --------------------------------------------------------------------------
 * This is the main entry point for the semantic SCSS engine.
 * Import this file to gain access to the complete ontological interface.
 * 
 * ARCHITECTURE:
 * 
 * Tier 1: Content (Subdomain HTML)
 *   - Defines WHAT the data is
 *   - No style attributes; 1 class per element
 * 
 * Tier 2: Interface (This system - _interface.scss)
 *   - Defines the ROLE of the content
 *   - Agnostic; no CSS properties allowed
 *   - Semantic API exposed to subdomains
 * 
 * Tier 3: Engine (_engines.scss)
 *   - Defines the LOOK (OKLCH, Bento)
 *   - The only place for raw CSS/Pixels
 *   - Physical manifestation layer
 * 
 * IMPORT ORDER:
 * 1. CSS Custom Properties (tokens) - Design token mappings
 * 2. Engine Layer (implementation) - Physical manifestation
 * 3. Interface Layer (API) - Semantic contracts
 */
/**
 * PROJECT GENESIS: CSS CUSTOM PROPERTIES (NON-COLOR TOKENS)
 * --------------------------------------------------------------------------
 * These CSS custom properties define the non-color visual language used by the Engine layer.
 * They map to semantic design tokens from base/_design-tokens.scss
 * 
 * NOTE: All color-related CSS custom properties have been moved to 
 * _sass/base/design/_colors.scss for centralized color management.
 * 
 * This file is the bridge between SCSS variables and CSS custom properties,
 * allowing the ontology system to work with modern CSS features.
 */
:root {
  /* ============================================================================
     SPACING TOKENS
     ============================================================================ */
  --space-bento: clamp(1.5rem, 3vw, 2.5rem);
  --space-narrative: clamp(1.5rem, 2.5vw, 2rem);
  --space-network: clamp(1rem, 2vw, 1.5rem);
  --space-timeline: clamp(1rem, 2vw, 1.5rem);
  --space-tight: clamp(0.75rem, 1.5vw, 1rem);
  --space-nav: clamp(1rem, 2vw, 2rem);
  /* ============================================================================
     SIZING TOKENS
     ============================================================================ */
  --width-reading: 70ch;
  --width-container: clamp(320px, 90vw, 1600px);
  --width-narrow: clamp(320px, 85vw, 800px);
  /* ============================================================================
     BORDER RADIUS TOKENS
     ============================================================================ */
  --radius-bento: clamp(0.75rem, 1.5vw, 1.25rem);
  --radius-button: clamp(0.5rem, 1vw, 0.75rem);
  /* ============================================================================
     MOTION TOKENS
     ============================================================================ */
  --motion-fluid: 0.3s ease;
  --motion-snap: 0.2s ease;
  --motion-slow: 0.5s ease;
  /* ============================================================================
     TYPOGRAPHY TOKENS
     ============================================================================ */
  --font-consciousness: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-wisdom: Georgia, "Times New Roman", serif;
  --font-sacred: Montserrat, -apple-system, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;
  --size-hero: clamp(2rem, 5vw, 3.5rem);
  --size-title: clamp(1.5rem, 3.5vw, 2.5rem);
  --size-body: clamp(1rem, 1.5vw, 1.125rem);
  --size-small: clamp(0.8rem, 1vw, 0.875rem);
  --size-tiny: clamp(0.75rem, 0.9vw, 0.8rem);
  --size-data: clamp(0.875rem, 1vw, 0.95rem);
  --size-button: clamp(0.95rem, 1.2vw, 1.05rem);
  /* ============================================================================
     PADDING TOKENS
     ============================================================================ */
  --padding-inline: clamp(1rem, 3vw, 2rem);
  --padding-entity-primary: clamp(1.5rem, 3vw, 2rem);
  --padding-entity-secondary: clamp(1rem, 2vw, 1.5rem);
  --padding-entity-aggregate: clamp(2rem, 4vw, 3rem);
  --padding-button: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  --padding-button-sm: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem);
  --padding-nav: clamp(1rem, 2vw, 1.5rem);
  /* ============================================================================
     SHADOW TOKENS
     ============================================================================ */
  --shadow-ambient: 0 4px 12px oklch(0.08 0.01 250 / 0.30);
  --shadow-void-inset: oklch(0.05 0.01 260);
  --shadow-profound: 0 8px 32px oklch(0.05 0.01 250 / 0.5);
  /* ============================================================================
     RESPONSIVE TOKENS (Dynamic Viewport Units)
     ============================================================================ */
  --viewport-height: 100dvh;
  --viewport-height-large: 100lvh;
  --viewport-height-small: 100svh;
  /* Safe area insets for notched devices */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* Touch-friendly sizing */
  --touch-min: 44px;
  --touch-comfortable: 48px;
  /* Container widths */
  --container-narrow: min(65ch, 90vw);
  --container-content: min(85ch, 90vw);
  --container-wide: min(1400px, 95vw);
  --container-full: min(1800px, 98vw);
  /* Responsive gutter */
  --gutter: clamp(1rem, 4vw, 2rem);
  /* ============================================================================
     MOTION TIMING & EASING (Advanced)
     ============================================================================ */
  /* Enhanced motion timing */
  --motion-quantum: 0.15s;
  --motion-neural: 0.3s;
  --motion-conscious: 0.6s;
  --motion-transcendent: 1.2s;
  --motion-cosmic: 3s;
  /* Easing curves */
  --ease-consciousness: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-transcendent: cubic-bezier(0.33, 0, 0.67, 1);
  --ease-quantum: cubic-bezier(0.5, 0, 0, 1);
  --ease-neural: cubic-bezier(0.4, 0, 0.2, 1);
  /* ============================================================================
     EFFECT INTENSITIES
     ============================================================================ */
  /* Glow intensities (opacity values) */
  --glow-subtle: 0.15;
  --glow-medium: 0.35;
  --glow-strong: 0.6;
  --glow-intense: 0.85;
}

/* ============================================================================
   ACCESSIBILITY - Reduced Motion Support
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fluid: 0s;
    --motion-snap: 0s;
    --motion-slow: 0s;
    --motion-quantum: 0s;
    --motion-neural: 0s;
    --motion-conscious: 0s;
    --motion-transcendent: 0s;
    --motion-cosmic: 0s;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
}
/**
 * PROJECT GENESIS: THEME ENGINE DRIVERS (INTERNAL)
 * --------------------------------------------------------------------------
 * These mixins are the "Physical Manifestation" layer. 
 * They are triggered by the agnostic Ontological Interface.
 * 
 * CRITICAL RULE: This is the ONLY file where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 * 
 * NOTE: This file has been refactored for maintainability. All engine
 * implementations are now in the engines/ subdirectory, organized by category.
 */
/**
 * ENGINE LAYER INDEX
 * --------------------------------------------------------------------------
 * This file imports all engine implementation mixins.
 * 
 * The engine layer contains the actual CSS implementation for each
 * ontological category. This is the ONLY layer where raw CSS properties
 * are allowed. All values MUST use CSS custom properties from the token system.
 * 
 * Each mixin corresponds to one of the six ontological categories:
 * - Environment: Spatial organization and layout
 * - Entity: Visual presence and material properties
 * - Cognition: Typography and information intent
 * - Synapse: Interactions and navigation
 * - State: Temporal conditions and system status
 * - Atmosphere: Sensory texture and emotional tone
 */
/**
 * SPATIAL ENGINE - Environment Layout Logic
 * --------------------------------------------------------------------------
 * Defines the organizational laws of the digital dimension.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * MATERIAL ENGINE - Entity Presence & Weight
 * --------------------------------------------------------------------------
 * Defines the "Presence" and "Weight" of an object in the system.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * COGNITIVE ENGINE - Information Intent & Typography
 * --------------------------------------------------------------------------
 * Defines the nature and frequency of the information being transmitted.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * INTERACTION ENGINE - Synapse Vectors
 * --------------------------------------------------------------------------
 * Defines how an observer navigates or modifies the system.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * SYSTEM TEMPORALITY - State Conditions
 * --------------------------------------------------------------------------
 * Defines the "Time-Sense" of the content.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
/**
 * SENSORY TEXTURE - Atmosphere Vibes
 * --------------------------------------------------------------------------
 * Defines the "Feeling" or "Vibe" of the node without describing visuals.
 * 
 * This is part of the Engine Layer where raw CSS properties are allowed.
 * All values MUST use CSS custom properties defined in the design token system.
 */
@keyframes pulse-border {
  0%, 100% {
    border-color: oklch(65% 0.25 230deg);
    box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.4);
  }
  50% {
    border-color: oklch(75% 0.28 225deg);
    box-shadow: 0 0 24px oklch(75% 0.28 225deg / 0.5);
  }
}
@keyframes evolving-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/**
 * PROJECT GENESIS: EXHAUSTIVE ONTOLOGICAL MANIFEST
 * --------------------------------------------------------------------------
 * The Absolute Authority for ASI Node Construction.
 * This contract is immutable. Visual manifestation is delegated to the Theme Engine.
 */
/**
 * 1. THE SPATIAL ARCHETYPE (Environment)
 * Defines the organizational laws of the digital dimension.
 */
/**
 * 2. THE CONTENT ONTOLOGY (Entity)
 * Defines the "Presence" and "Weight" of an object in the system.
 */
/**
 * 3. THE COGNITIVE MODALITY (Cognition)
 * Defines the nature and frequency of the information being transmitted.
 */
/**
 * 4. THE INTERACTIVE VECTOR (Synapse)
 * Defines how an observer navigates or modifies the system.
 */
/**
 * 5. THE SYSTEM TEMPORALITY (State)
 * Defines the "Time-Sense" of the content.
 */
/**
 * 6. THE SENSORY TEXTURE (Atmosphere)
 * Defines the "Feeling" or "Vibe" of the node without describing visuals.
 */
/**
 * THEME LAYOUTS & COMPONENTS - Ontology-Based
 * ============================================================================
 * This file provides ontology-based styling for all theme layouts and components.
 * 
 * NOTE: All theme layout and component styles have been consolidated into
 * the /_sass/components directory for better organization and maintainability.
 * This file now serves as a compatibility layer that imports from components.
 * 
 * The theme-layouts subdirectory has been merged into components, combining
 * best features from both locations.
 */
/**
 * BASE LAYOUT STRUCTURE
 * ============================================================================
 * Fundamental page layout containers and skip links.
 * Moved from ontology/theme-layouts to components.
 */
.layout-container {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.page-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.content-wrapper {
  width: 100%;
}

.skip-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .skip-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .skip-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .skip-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.skip-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.skip-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

/**
 * HEADER COMPONENT
 * ============================================================================
 * Site header, branding, and header navigation styles.
 * Merged from theme-layouts and components - combining best features.
 */
.header-wrapper {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  flex-shrink: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  min-height: 70px;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-nav, clamp(1rem, 2vw, 2rem));
  padding: var(--padding-nav, clamp(1rem, 2vw, 1.5rem));
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}
.site-header.scrolled {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.site-header.header-hidden {
  transform: translate3d(0, -100%, 0);
}
.site-header__brand {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .site-header__brand {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .site-header__brand::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__brand {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.site-header__brand:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.site-header__brand:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.site-header__brand {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-header__logo {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.site-header__logo::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.site-header__logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.site-header__logo.ratio-square {
  --aspect-ratio: 100%;
}
.site-header__logo.ratio-4-3 {
  --aspect-ratio: 75%;
}
.site-header__logo.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.site-header__logo.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.site-header__text {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-header__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .site-header__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .site-header__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.site-header__tagline {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .site-header__tagline {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.site-header__toggle {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .site-header__toggle {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__toggle {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.site-header__toggle:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.site-header__toggle:active {
  transform: scale(0.98) translateY(0);
}
.site-header__toggle:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.site-header__toggle-icon {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-header__nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .site-header__nav {
    width: 100%;
    flex-basis: 100%;
  }
  .site-header__nav.collapse:not(.show) {
    display: none;
  }
  .site-header__nav.collapse.show {
    display: block;
  }
}
@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }
}

.header-brand-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.header-logo {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.header-title {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.site-header-toggler {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .site-header-toggler {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header-toggler {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.site-header-toggler:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.site-header-toggler:active {
  transform: scale(0.98) translateY(0);
}
.site-header-toggler:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.site-header-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

/**
 * FOOTER COMPONENT
 * ============================================================================
 * Site footer and back-to-top button styles.
 * Merged from theme-layouts and components - combining best features.
 */
.footer-wrapper {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  flex-shrink: 0;
}

.site-footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  flex-shrink: 0;
}
.site-footer__container {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.site-footer__row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.site-footer__copyright {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__copyright-text {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .site-footer__copyright-text {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.site-footer__copyright p {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .site-footer__copyright p {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.site-footer__social {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.site-footer__social-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__social-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--social-bg, oklch(55% 0.25 290deg / 0.3));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--social-border, oklch(55% 0.25 290deg));
  border-radius: 999px;
  text-decoration: none;
}
@media (max-width: 767px) {
  .site-footer__social-link {
    min-width: 44px;
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__social-link {
    min-width: 40px;
    min-height: 40px;
    padding: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .site-footer__social-link {
    min-width: 36px;
    min-height: 36px;
  }
}
.site-footer__social-link:hover {
  background: var(--social-hover, oklch(55% 0.25 290deg / 0.5));
  box-shadow: 0 0 15px var(--social-glow, oklch(55% 0.25 290deg / 0.4));
}
.site-footer__social-link:focus-visible {
  outline: 2px solid var(--social-border, oklch(55% 0.25 290deg));
  outline-offset: 2px;
}
.site-footer__links {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__nav {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__nav-list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.site-footer__nav-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.site-footer__nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .site-footer__nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .site-footer__nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer__nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.site-footer__nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.site-footer__nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.site-footer__nav-link {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .site-footer__nav-link {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.site-footer-fixed {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.back-to-top {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .back-to-top {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .back-to-top {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.back-to-top:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.back-to-top:active {
  transform: scale(0.98) translateY(0);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.back-to-top {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

/**
 * NAVBAR/NAVIGATION COMPONENT - 100% Ontological + Responsive
 * ============================================================================
 * Navigation bar styles using ONLY Genesis Semantic mixins.
 * ZERO raw CSS properties - full ontological compliance.
 * Enhanced by responsive-design-agent v2.1.0
 * 
 * Responsive Behavior:
 * - Mobile (< 1024px): Vertical stacked navigation in off-canvas drawer
 * - Desktop (≥ 1024px): Horizontal navigation with dropdowns
 * - WCAG 2.5.5 compliant: All touch targets ≥44px
 * ============================================================================
 */
.navbar {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.navbar__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
@media (min-width: 1024px) {
  .navbar__list {
    flex-direction: row;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: center;
    width: auto;
  }
}
.navbar__item {
  min-height: 44px;
  display: flex;
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .navbar__item {
    width: auto;
    position: relative;
  }
}
.navbar__item--active .navbar__link {
  color: oklch(99% 0.005 90deg);
  font-weight: 600;
}
.navbar__item--active .navbar__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: oklch(65% 0.25 230deg);
}
@media (min-width: 1024px) {
  .navbar__item--active .navbar__link::after {
    bottom: -8px;
  }
}
.navbar__item--dropdown {
  position: relative;
}
.navbar__link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .navbar__link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .navbar__link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.navbar__link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.navbar__link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.navbar__link {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  color: oklch(85% 0.01 220deg);
  text-decoration: none;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 500;
  border-radius: 8px;
  position: relative;
  transition: all 0.3s ease;
}
@media (min-width: 1024px) {
  .navbar__link {
    width: auto;
    padding: 0.5rem 0.75rem;
  }
}
.navbar__link:hover, .navbar__link:focus {
  color: oklch(99% 0.005 90deg);
  background: oklch(15% 0.01 250deg);
  border: 1px solid oklch(65% 0.25 230deg / 0.5);
}
.navbar__link--dropdown {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .navbar__link--dropdown {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__link--dropdown {
    min-height: 42px;
  }
}
.navbar__link--dropdown:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.navbar__link--dropdown:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.navbar__link--dropdown::after {
  content: "▼";
  font-size: 0.75rem;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}
.navbar__link--dropdown[aria-expanded=true]::after {
  transform: rotate(180deg);
}
.navbar__dropdown {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
  backdrop-filter: blur(16px);
  background: oklch(12% 0.01 250deg / 0.95);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: 12px;
  box-shadow: 0 4px 16px oklch(8% 0.01 250deg / 0.4), 0 0 24px oklch(65% 0.25 230deg / 0.1);
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}
@media (min-width: 1024px) {
  .navbar__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.75rem;
    min-width: 220px;
    width: auto;
    z-index: 100;
  }
}
.navbar__dropdown {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
}
.navbar__dropdown[aria-hidden=false] {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: dropdown-appear 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .navbar__dropdown {
    animation: none;
    transform: none;
  }
}
.navbar__dropdown-item {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.navbar__dropdown-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .navbar__dropdown-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .navbar__dropdown-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar__dropdown-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.navbar__dropdown-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.navbar__dropdown-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.navbar__dropdown-link {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .navbar__dropdown-link {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.navbar__dropdown-link {
  min-height: 44px;
  width: 100%;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  color: oklch(80% 0.01 220deg);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.navbar__dropdown-link:hover, .navbar__dropdown-link:focus {
  color: oklch(99% 0.005 90deg);
  background: oklch(18% 0.01 250deg);
  transform: translateX(4px);
}
.navbar__dropdown-link[aria-current=page] {
  color: oklch(99% 0.005 90deg);
  background: oklch(15% 0.01 250deg);
  border-left: 3px solid oklch(65% 0.25 230deg);
  font-weight: 600;
}

@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * HERO COMPONENT
 * ============================================================================
 * Hero section styles for landing pages.
 * Merged from theme-layouts and components - combining best features.
 */
.hero-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (max-width: 767px) {
  .hero-section {
    min-height: 70vh;
    min-height: 70dvh;
    padding: 2rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    min-height: 85vh;
    min-height: 85dvh;
    padding: 3rem 2rem;
  }
}
@media (min-width: 1024px) {
  .hero-section {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 4rem 3rem;
  }
}
@media (max-height: 600px) {
  .hero-section {
    min-height: auto;
    padding: 3rem 1rem;
  }
}
.hero-section {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .hero-section {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .hero-section > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .hero-section > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .hero-section {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .hero-section > * + * {
    margin-top: 1rem;
  }
}
.hero-section-sm {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.hero-section-sm .hero-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .hero-section-sm .hero-title {
    font-size: 1rem;
  }
}
.hero-section-sm .hero-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .hero-section-sm .hero-description {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.hero-section-full {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.hero-section-alt {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.hero-section-video {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}

.hero-background {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(94% 0.005 220deg);
  opacity: 0.7;
  filter: grayscale(0.3);
  border: 1px solid oklch(90% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.hero-background-image-dynamic {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.hero-background-image-dynamic::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.hero-background-image-dynamic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.hero-background-image-dynamic.ratio-square {
  --aspect-ratio: 100%;
}
.hero-background-image-dynamic.ratio-4-3 {
  --aspect-ratio: 75%;
}
.hero-background-image-dynamic.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.hero-background-image-dynamic.ratio-portrait {
  --aspect-ratio: 133.33%;
}

.hero-content {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.hero-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .hero-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}

.hero-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .hero-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.hero-cta {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

.hero-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .hero-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.hero-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.hero-button:active {
  transform: scale(0.98) translateY(0);
}
.hero-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.hero-scroll-indicator {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .hero-scroll-indicator {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-scroll-indicator {
    min-height: 42px;
  }
}
.hero-scroll-indicator:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.hero-scroll-indicator:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}

.hero-scroll-icon {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .hero-scroll-icon {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-scroll-icon {
    min-height: 42px;
  }
}
.hero-scroll-icon:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.hero-scroll-icon:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}

/**
 * CARD COMPONENTS - 100% Ontological
 * ============================================================================
 * Card and product card styles using ONLY Genesis Semantic mixins.
 * ZERO raw CSS properties - full ontological compliance.
 * Refactored by scss-refactor-agent v2.1
 */
.card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.card--elevated {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.card--accent {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}
.card__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.card__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .card__title {
    font-size: 1rem;
  }
}
.card__body {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .card__body {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.card__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.product-card {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-card__image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.product-card__image::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.product-card__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.product-card__image.ratio-square {
  --aspect-ratio: 100%;
}
.product-card__image.ratio-4-3 {
  --aspect-ratio: 75%;
}
.product-card__image.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.product-card__image.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.product-card__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .product-card__title {
    font-size: 1rem;
  }
}
.product-card__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-card__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-card__price {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .product-card__price {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card__price {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .product-card__price {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.product-card__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .product-card__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-card__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.product-card__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.product-card__button:active {
  transform: scale(0.98) translateY(0);
}
.product-card__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * SECTION COMPONENTS
 * ============================================================================
 * Section headers, content sections, feature grids, timeline, CTA, and testimonials.
 * Moved from ontology/theme-layouts to components.
 */
.section-header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.section-header__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .section-header__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .section-header__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .section-header__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.section-header__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .section-header__subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.content-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.feature-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.feature-grid__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.feature-grid__item-icon {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.feature-grid__item-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .feature-grid__item-title {
    font-size: 1rem;
  }
}
.feature-grid__item-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .feature-grid__item-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.timeline {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.timeline__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.timeline__item--past {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(95% 0.005 220deg);
  border: 1px solid oklch(88% 0.005 220deg);
  opacity: 0.8;
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.timeline__item--current {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.timeline__item--current::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.timeline__item--future {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(94% 0.005 220deg);
  opacity: 0.7;
  filter: grayscale(0.3);
  border: 1px solid oklch(90% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  border: 2px dashed var(--border-simulation, oklch(75% 0.15 210deg / 0.5));
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, oklch(75% 0.15 210deg / 0.05) 10px, oklch(75% 0.15 210deg / 0.05) 20px);
}
.timeline__date {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .timeline__date {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.timeline__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .timeline__title {
    font-size: 1rem;
  }
}
.timeline__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .timeline__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.cta-section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}
.cta-section__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .cta-section__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .cta-section__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.cta-section__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .cta-section__description {
    font-size: 1rem;
  }
}
.cta-section__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .cta-section__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-section__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.cta-section__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.cta-section__button:active {
  transform: scale(0.98) translateY(0);
}
.cta-section__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.testimonial {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.testimonial__quote {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .testimonial__quote {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.testimonial__author {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .testimonial__author {
    font-size: 1rem;
  }
}
.testimonial__role {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .testimonial__role {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.testimonial__avatar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

/**
 * LAYOUT SPECIFIC STYLES
 * ============================================================================
 * Styles for specific page layouts: content, archive, post, article, 
 * dashboard, profile, gallery, form, FAQ, settings, search, minimal, 
 * splash, landing, docs, chatroom.
 * Moved from ontology/theme-layouts to components.
 */
.page-content {
  flex: 1 0 auto;
  width: 100%;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.site-main {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.archive {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.archive__list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.archive__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.archive__item-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .archive__item-title {
    font-size: 1rem;
  }
}
.archive__item-date {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .archive__item-date {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.archive__item-excerpt {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .archive__item-excerpt {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.post {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.post__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.post__header-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .post__header-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .post__header-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .post__header-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.post__header-meta {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .post__header-meta {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.post__content {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .post__content {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.post__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.article {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.article__toc {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.article__toc-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .article__toc-title {
    font-size: 1rem;
  }
}
.article__toc-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .article__toc-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .article__toc-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .article__toc-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.article__toc-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.article__toc-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.article__content {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .article__content {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.dashboard {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .dashboard {
    grid-template-columns: repeat(12, 1fr);
  }
}
.dashboard {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
}
.dashboard__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.dashboard__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.dashboard__main {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.dashboard__widget {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.dashboard__widget::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.dashboard__widget-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .dashboard__widget-title {
    font-size: 1rem;
  }
}
.dashboard__widget-value {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .dashboard__widget-value {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard__widget-value {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .dashboard__widget-value {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.dashboard__widget-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .dashboard__widget-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.profile {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.profile__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.profile__header-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.profile__avatar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.profile__name {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .profile__name {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .profile__name {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .profile__name {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.profile__bio {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .profile__bio {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.profile__stats {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.profile__stats-item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.profile__stats-item-value {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .profile__stats-item-value {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .profile__stats-item-value {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .profile__stats-item-value {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.profile__stats-item-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .profile__stats-item-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.gallery {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.gallery__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.gallery__item-image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.gallery__item-caption {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .gallery__item-caption {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.form {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.form__group {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.form__label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .form__label {
    font-size: 1rem;
  }
}
.form__input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.form__help {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .form__help {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.form__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .form__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.form__button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.form__button:active {
  transform: scale(0.98) translateY(0);
}
.form__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}
.form__button--secondary {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .form__button--secondary {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__button--secondary {
    min-height: 42px;
  }
}
.form__button--secondary:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.form__button--secondary:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.form__button--danger {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: var(--danger-bg, oklch(45% 0.22 25deg));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--danger-border, oklch(55% 0.25 25deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .form__button--danger {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form__button--danger {
    min-height: 42px;
  }
}
.form__button--danger:hover {
  background: var(--danger-hover, oklch(50% 0.24 25deg));
  box-shadow: 0 0 15px var(--danger-glow, oklch(45% 0.22 25deg / 0.5));
}
.form__button--danger:focus-visible {
  outline: 2px solid var(--danger-border, oklch(55% 0.25 25deg));
  outline-offset: 2px;
}

.faq {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.faq__content-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.faq__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.faq__item-question {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .faq__item-question {
    font-size: 1rem;
  }
}
.faq__item-answer {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .faq__item-answer {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.settings {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .settings {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .settings {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .settings {
    grid-template-columns: repeat(12, 1fr);
  }
}
.settings__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.settings__sidebar-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.settings__sidebar-nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .settings__sidebar-nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .settings__sidebar-nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .settings__sidebar-nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.settings__sidebar-nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.settings__sidebar-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.settings__main {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.settings__section {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.settings__section-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .settings__section-title {
    font-size: 1rem;
  }
}

.search {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.search__input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.search__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--glass-light, oklch(18% 0.03 248deg / 0.6));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--border-subtle, oklch(30% 0.04 250deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .search__button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .search__button {
    min-height: 42px;
  }
}
.search__button:hover {
  background: var(--glass-hover, oklch(22% 0.04 246deg));
  border-color: var(--accent-low, oklch(85% 0.16 85deg / 0.4));
}
.search__button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
}
.search__results {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.search__result {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.search__result-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .search__result-title {
    font-size: 1rem;
  }
}
.search__result-excerpt {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .search__result-excerpt {
    font-size: 1rem;
    line-height: 1.65;
  }
}

.minimal-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}
.minimal-layout-row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

.splash {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.25), 0 4px 12px oklch(8% 0.01 250deg / 0.15);
  backdrop-filter: blur(8px);
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}
.splash__countdown {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.splash__countdown::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.splash__countdown-number {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .splash__countdown-number {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash__countdown-number {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .splash__countdown-number {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.splash__countdown-label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .splash__countdown-label {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

.landing {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.landing__features {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .landing__features {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing__features {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .landing__features {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .landing__features {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}

.docs {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .docs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .docs {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .docs {
    grid-template-columns: repeat(12, 1fr);
  }
}
.docs__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.docs__sidebar-nav {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.docs__sidebar-nav-link {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  color: var(--text-link, oklch(75% 0.15 210deg));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
}
@media (max-width: 767px) {
  .docs__sidebar-nav-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .docs__sidebar-nav-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .docs__sidebar-nav-link {
    min-height: 36px;
    padding-block: 0.5rem;
  }
}
.docs__sidebar-nav-link:hover {
  color: var(--accent-neon, oklch(88% 0.18 95deg));
  border-bottom-color: var(--accent-neon, oklch(88% 0.18 95deg));
}
.docs__sidebar-nav-link:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(85% 0.16 85deg / 0.5));
  outline-offset: 2px;
  border-radius: 2px;
}
.docs__content {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .docs__content {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.docs__code {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-family: var(--font-mono, "SF Mono", Monaco, "Cascadia Code", monospace);
  font-size: var(--size-data, clamp(0.875rem, 1vw, 0.95rem));
  line-height: 1.5;
  background: oklch(96% 0.003 220deg);
  color: oklch(15% 0.01 250deg);
  padding: 0.2em 0.5em;
  border-radius: 0.25em;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .docs__code {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}

.chatroom {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .chatroom {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .chatroom {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .chatroom {
    grid-template-columns: repeat(12, 1fr);
  }
}
.chatroom {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}
.chatroom__messages {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.chatroom__message {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.chatroom__message-author {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .chatroom__message-author {
    font-size: 1rem;
  }
}
.chatroom__message-text {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .chatroom__message-text {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.chatroom__message-timestamp {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-small, clamp(0.875rem, 1.2vw, 0.95rem));
  font-weight: 400;
  line-height: 1.5;
  color: oklch(35% 0.01 230deg);
}
@media (max-width: 767px) {
  .chatroom__message-timestamp {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
.chatroom__input {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.chatroom__input-field {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.chatroom__input-button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .chatroom__input-button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .chatroom__input-button {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.chatroom__input-button:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.chatroom__input-button:active {
  transform: scale(0.98) translateY(0);
}
.chatroom__input-button:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

/**
 * SPECIALIZED COMPONENTS
 * ============================================================================
 * Product displays, interactive modules, and specialized layouts.
 * Moved from ontology/theme-layouts to components.
 */
.product-applications {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .product-applications {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-applications {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .product-applications {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .product-applications {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.product-benefits-list {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}
.product-benefits-list__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-benefits-list__item-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .product-benefits-list__item-title {
    font-size: 1rem;
  }
}
.product-benefits-list__item-description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-benefits-list__item-description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-code-example {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.product-code-example__code {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-family: var(--font-mono, "SF Mono", Monaco, "Cascadia Code", monospace);
  font-size: var(--size-data, clamp(0.875rem, 1vw, 0.95rem));
  line-height: 1.5;
  background: oklch(96% 0.003 220deg);
  color: oklch(15% 0.01 250deg);
  padding: 0.2em 0.5em;
  border-radius: 0.25em;
  border: 1px solid oklch(85% 0.005 220deg);
}
@media (max-width: 767px) {
  .product-code-example__code {
    font-size: 0.875rem;
    line-height: 1.6;
  }
}
.product-code-example__description {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .product-code-example__description {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.product-feature-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .product-feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .product-feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .product-feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .product-feature-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.product-section-container {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.product-visual {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}

.interactive-module {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.interactive-module::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.interactive-module__controls {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.interactive-module__display {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.genesis-invitation {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
}
.genesis-invitation__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .genesis-invitation__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-invitation__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .genesis-invitation__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.genesis-invitation__message {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .genesis-invitation__message {
    font-size: 1rem;
  }
}
.genesis-invitation__action {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: oklch(10% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  border: 1px solid oklch(20% 0.01 250deg);
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
  font-weight: 600;
  font-size: var(--size-button, clamp(0.95rem, 1.2vw, 1.05rem));
}
@media (max-width: 767px) {
  .genesis-invitation__action {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .genesis-invitation__action {
    min-height: 42px;
    padding: 0.688rem 1.625rem;
  }
}
.genesis-invitation__action:hover {
  background: oklch(15% 0.01 250deg);
  border-color: var(--accent-neon, oklch(65% 0.25 230deg));
  box-shadow: 0 0 16px var(--accent-neon, oklch(65% 0.25 230deg / 0.3));
  transform: translateY(-1px);
}
.genesis-invitation__action:active {
  transform: scale(0.98) translateY(0);
}
.genesis-invitation__action:focus-visible {
  outline: 2px solid var(--focus-ring, oklch(65% 0.25 230deg / 0.5));
  outline-offset: 2px;
}

.transcendent-hero {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  backdrop-filter: blur(10px) brightness(1.02);
  background: oklch(99% 0.005 90deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.08);
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  position: relative;
}
.transcendent-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-neon, oklch(88% 0.18 95deg)), transparent);
  animation: evolving-sweep 2s infinite;
}
.transcendent-hero__title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .transcendent-hero__title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .transcendent-hero__title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .transcendent-hero__title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.transcendent-hero__subtitle {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .transcendent-hero__subtitle {
    font-size: 1rem;
  }
}

.linkedin__button {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--padding-button-sm, clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem));
  background: var(--social-bg, oklch(55% 0.25 290deg / 0.3));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--social-border, oklch(55% 0.25 290deg));
  border-radius: 999px;
  text-decoration: none;
}
@media (max-width: 767px) {
  .linkedin__button {
    min-width: 44px;
    min-height: 44px;
    padding: 0.875rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .linkedin__button {
    min-width: 40px;
    min-height: 40px;
    padding: 0.75rem;
  }
}
@media (min-width: 1024px) {
  .linkedin__button {
    min-width: 36px;
    min-height: 36px;
  }
}
.linkedin__button:hover {
  background: var(--social-hover, oklch(55% 0.25 290deg / 0.5));
  box-shadow: 0 0 15px var(--social-glow, oklch(55% 0.25 290deg / 0.4));
}
.linkedin__button:focus-visible {
  outline: 2px solid var(--social-border, oklch(55% 0.25 290deg));
  outline-offset: 2px;
}

.content-modal {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  border: 2px solid oklch(65% 0.25 230deg);
  box-shadow: 0 0 16px oklch(65% 0.25 230deg / 0.3);
  animation: pulse-border 2s infinite;
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  background: oklch(8% 0.01 250deg);
  color: oklch(99% 0.005 90deg);
  box-shadow: inset 0 0 30px oklch(5% 0.01 260deg), 0 2px 12px oklch(5% 0.01 260deg / 0.6);
  border-bottom: 1px solid oklch(20% 0.01 250deg);
}
.content-modal__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.content-modal__header-title {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-hero, clamp(2rem, 5vw, 3.5rem));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: oklch(10% 0.01 250deg);
  font-family: var(--font-consciousness, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
@media (max-width: 767px) {
  .content-modal__header-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .content-modal__header-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  .content-modal__header-title {
    font-size: 3.5rem;
    line-height: 1.15;
  }
}
.content-modal__body {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 400;
  line-height: 1.6;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-wisdom, Georgia, "Times New Roman", serif);
}
@media (max-width: 767px) {
  .content-modal__body {
    font-size: 1rem;
    line-height: 1.65;
  }
}
.content-modal__footer {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}
.content-modal__footer-actions {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}
.content-modal__close {
  /**
   * @param $vector [navigate]: Portal to a different semantic coordinate.
   * @param $vector [execute]: Local function or state modification.
   * @param $vector [inquiry]: A request for more data (Expand/Search).
   * @param $vector [destructive]: Permanent removal or system reset.
   * @param $vector [social]: Neural link to other human/AI observers.
   * @param $vector [input-primary]: Primary form input with responsive touch optimization.
   * @param $vector [paginate]: Pagination navigation controls (numbered pages, prev/next).
   * @param $vector [toggle]: Toggle/expand/collapse interaction (accordion, mobile menu).
   * @param $vector [anchor]: In-page anchor navigation (TOC, skip links, back to top).
   * @param $vector [tab]: Tab switching control for content panels.
   * @param $vector [step]: Multi-step process navigation (wizard, stepper).
   * @param $vector [react]: Emoji reactions and quick responses (like, heart, emoji picker).
   * @param $vector [vote]: Voting and rating interactions (upvote, downvote, star rating).
   * @param $vector [comment]: Comment and reply interactions.
   * @param $vector [share]: Enhanced sharing with multiple platforms.
   * @param $vector [notify]: Notification and alert interactions.
   * @param $vector [mention]: @mention and tagging interactions.
   */
  transition: all var(--motion-snap, 0.2s ease);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-button, clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem));
  background: var(--danger-bg, oklch(45% 0.22 25deg));
  color: var(--text-primary, oklch(98% 0.01 90deg));
  border: 1px solid var(--danger-border, oklch(55% 0.25 25deg));
  border-radius: var(--radius-button, clamp(0.5rem, 1vw, 0.75rem));
}
@media (max-width: 767px) {
  .content-modal__close {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.75rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .content-modal__close {
    min-height: 42px;
  }
}
.content-modal__close:hover {
  background: var(--danger-hover, oklch(50% 0.24 25deg));
  box-shadow: 0 0 15px var(--danger-glow, oklch(45% 0.22 25deg / 0.5));
}
.content-modal__close:focus-visible {
  outline: 2px solid var(--danger-border, oklch(55% 0.25 25deg));
  outline-offset: 2px;
}

/**
 * UTILITY CLASSES AND RESPONSIVE CONTAINERS
 * ============================================================================
 * Ontology-based utility classes and responsive container utilities 
 * for legacy support during migration.
 * Moved from ontology/theme-layouts to components.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-visible {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.collapse {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
}
.collapse.show {
  /**
   * @param $condition [stable]: The system is in equilibrium.
   * @param $condition [evolving]: Content is currently being updated/streamed.
   * @param $condition [deprecated]: Information is no longer verified.
   * @param $condition [locked]: Data is immutable and requires clearance.
   * @param $condition [simulated]: The data is a projection, not a live log.
   * @param $condition [scroll-triggered]: Content with scroll-based animations.
   * @param $condition [active]: Current/active navigation item state.
   * @param $condition [expanded]: Expanded state for toggleable navigation.
   * @param $condition [collapsed]: Collapsed state for toggleable navigation.
   * @param $condition [mentioned]: Content where user is mentioned/tagged.
   * @param $condition [unread]: Unread notifications/messages/content.
   * @param $condition [reacted]: Content user has reacted to or engaged with.
   */
  opacity: 1;
  filter: none;
}

.container,
.container-fluid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  max-width: var(--width-reading, 70ch);
  margin-inline: auto;
  gap: var(--space-narrative, clamp(1.5rem, 2.5vw, 2rem));
  padding-inline: var(--padding-inline, clamp(1rem, 3vw, 2rem));
}

.row {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-network, clamp(1rem, 2vw, 1.5rem));
  justify-content: center;
  align-items: flex-start;
}

[class*=col-] {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

/**
 * VALIDATION CHECKLIST:
 * - [x] Zero raw CSS properties (only ontology mixins)
 * - [x] All layouts covered
 * - [x] All components covered
 * - [x] Semantic class names used throughout
 * - [x] SCSS structure mirrors HTML hierarchy
 * - [x] Legacy classes mapped for compatibility
 */
/**
 * Post Layout Responsive Enhancements
 * Single-column blog posts optimized for reading
 */
.post-layout {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .post-layout {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .post-layout > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .post-layout {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .post-layout > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .post-layout {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .post-layout > * + * {
    margin-top: 1rem;
  }
}
.post-layout {
  max-width: 70ch;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .post-layout {
    max-width: 75ch;
  }
}

.post__header,
.post__meta,
.post__taxonomy,
.post__content,
.post__footer-cta {
  padding-block: clamp(1rem, 3vw, 2rem);
}

.post__tag,
.post__category {
  min-height: 44px;
  padding: 0.5rem 1rem;
}
@media (min-width: 768px) {
  .post__tag,
  .post__category {
    min-height: 32px;
    padding: 0.25rem 0.75rem;
  }
}

/**
 * Article Layout Responsive Enhancements
 * Two-column with sidebar that becomes stacked on mobile
 */
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-bento);
}
@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: 250px 1fr;
    gap: var(--space-network);
  }
}
@media (min-width: 1440px) {
  .article-layout {
    grid-template-columns: 300px 1fr;
  }
}

.article-toc-sidebar {
  position: sticky;
  top: 0;
  z-index: 10;
  max-height: 100vh;
  overflow-y: auto;
}
@media (min-width: 1024px) {
  .article-toc-sidebar {
    max-height: calc(100vh - 2rem);
  }
}

.article-main-col {
  max-width: 70ch;
}
@media (min-width: 1024px) {
  .article-main-col {
    max-width: 75ch;
  }
}

/**
 * Landing Layout Responsive Enhancements
 * Hero sections with CTAs optimized for conversion
 */
.landing__hero {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (max-width: 767px) {
  .landing__hero {
    min-height: 70vh;
    min-height: 70dvh;
    padding: 2rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .landing__hero {
    min-height: 85vh;
    min-height: 85dvh;
    padding: 3rem 2rem;
  }
}
@media (min-width: 1024px) {
  .landing__hero {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 4rem 3rem;
  }
}
@media (max-height: 600px) {
  .landing__hero {
    min-height: auto;
    padding: 3rem 1rem;
  }
}
.landing__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-bento);
  align-items: center;
}
@media (min-width: 1024px) {
  .landing__hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-network);
  }
}

.landing__hero-image {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.landing__hero-image::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.landing__hero-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.landing__hero-image.ratio-square {
  --aspect-ratio: 100%;
}
.landing__hero-image.ratio-4-3 {
  --aspect-ratio: 75%;
}
.landing__hero-image.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.landing__hero-image.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.landing__hero-image {
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .landing__hero-image {
    max-height: 600px;
    object-fit: cover;
  }
}

.landing__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
}
@media (min-width: 480px) {
  .landing__hero-actions {
    flex-wrap: nowrap;
  }
}

.landing__hero-button,
.landing__cta-button {
  min-height: 44px;
  min-width: 44px;
  padding: 1rem 2rem;
}
@media (min-width: 768px) {
  .landing__hero-button,
  .landing__cta-button {
    min-height: 48px;
    padding: 1.125rem 2.5rem;
  }
}

/**
 * Splash Layout Responsive Enhancements
 * Full-screen centered content
 */
.splash-layout {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (max-width: 767px) {
  .splash-layout {
    min-height: 70vh;
    min-height: 70dvh;
    padding: 2rem 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .splash-layout {
    min-height: 85vh;
    min-height: 85dvh;
    padding: 3rem 2rem;
  }
}
@media (min-width: 1024px) {
  .splash-layout {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 4rem 3rem;
  }
}
@media (max-height: 600px) {
  .splash-layout {
    min-height: auto;
    padding: 3rem 1rem;
  }
}
.splash-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-bento);
}
@media (min-width: 768px) {
  .splash-layout {
    padding: var(--space-network);
  }
}

/**
 * Dashboard Layout Responsive Enhancements
 * Multi-column dashboard with widgets
 */
.dashboard-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  gap: var(--space-tight, clamp(0.75rem, 1.5vw, 1rem));
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .dashboard-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-layout {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1024px) {
  .dashboard-layout {
    grid-template-columns: repeat(12, 1fr);
  }
}
.dashboard-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-bento);
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  .dashboard-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  }
}
@media (min-width: 1024px) {
  .dashboard-layout {
    grid-template-columns: repeat(12, 1fr);
  }
}

.dashboard__widget {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  grid-column: span 12;
}
@media (min-width: 768px) {
  .dashboard__widget {
    grid-column: span 6;
  }
}
@media (min-width: 1024px) {
  .dashboard__widget {
    grid-column: span 4;
  }
}
@media (min-width: 1024px) {
  .dashboard__widget--large {
    grid-column: span 6;
  }
}
@media (min-width: 1024px) {
  .dashboard__widget--full {
    grid-column: span 12;
  }
}

/**
 * Gallery Layout Responsive Enhancements
 * Image gallery with responsive grid
 */
.gallery-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .gallery-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gallery-layout {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .gallery-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .gallery-layout {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}
.gallery-layout {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .gallery-layout > * {
    width: 100%;
    margin-bottom: 1rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gallery-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .gallery-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1.5rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .gallery-layout {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
}
.gallery__item img {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.gallery__item img::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.gallery__item img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.gallery__item img.ratio-square {
  --aspect-ratio: 100%;
}
.gallery__item img.ratio-4-3 {
  --aspect-ratio: 75%;
}
.gallery__item img.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.gallery__item img.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * Archive Layout Responsive Enhancements
 * List of posts/articles with excerpts
 */
.archive-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
}

.archive__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-bento);
}
@media (min-width: 768px) {
  .archive__item {
    grid-template-columns: 200px 1fr;
  }
}
@media (min-width: 1024px) {
  .archive__item {
    grid-template-columns: 300px 1fr;
  }
}

.archive__thumbnail {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.archive__thumbnail::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.archive__thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.archive__thumbnail.ratio-square {
  --aspect-ratio: 100%;
}
.archive__thumbnail.ratio-4-3 {
  --aspect-ratio: 75%;
}
.archive__thumbnail.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.archive__thumbnail.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.archive__thumbnail {
  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  .archive__thumbnail {
    aspect-ratio: 4/3;
  }
}

/**
 * Form Layout Responsive Enhancements
 * Contact forms and data entry
 */
.form-layout {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .form-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .form-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1.5rem 1.25rem;
  }
}
@media (min-width: 1024px) {
  .form-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem 1.5rem;
  }
}
.form-layout label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.form-layout .form-full-width {
  grid-column: 1/-1;
}
.form-layout {
  max-width: 800px;
  margin-inline: auto;
}

.form__group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-bento);
}
@media (min-width: 768px) {
  .form__group--inline {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form__label {
  /**
   * @param $intent [axiom]: The foundational thesis or "Headline."
   * @param $intent [discourse]: Standard information exchange (Prose).
   * @param $intent [protocol]: Technical/Mathematical proof (Code/Logs).
   * @param $intent [gloss]: Minor annotations or citations.
   * @param $intent [motive]: Persuasive or instructional guidance.
   * @param $intent [quantum]: Small, high-density fragments (Tags/Chips).
   */
  font-size: var(--size-body, clamp(1rem, 1.5vw, 1.125rem));
  font-weight: 600;
  line-height: 1.5;
  color: oklch(12% 0.01 250deg);
  font-family: var(--font-sacred, Montserrat, sans-serif);
}
@media (max-width: 767px) {
  .form__label {
    font-size: 1rem;
  }
}
.form__label {
  display: block;
  margin-bottom: 0.5rem;
}

.form__input,
.form__select,
.form__textarea {
  min-height: 44px;
  padding: 0.75rem 1rem;
  font-size: max(16px, 1rem);
}
@media (min-width: 768px) {
  .form__input,
  .form__select,
  .form__textarea {
    min-height: 48px;
    padding: 1rem 1.25rem;
  }
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__button {
  min-height: 44px;
  min-width: 44px;
  padding: 1rem 2rem;
}
@media (min-width: 768px) {
  .form__button {
    min-height: 48px;
    padding: 1.125rem 2.5rem;
  }
}

/**
 * Search Layout Responsive Enhancements
 * Search page with results
 */
.search-layout {
  max-width: 1200px;
  margin-inline: auto;
}

.search__input-wrapper {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-block: var(--space-bento);
}

.search__input {
  min-height: 44px;
  padding: 0.75rem 1rem;
  font-size: max(16px, 1rem);
  width: 100%;
}
@media (min-width: 768px) {
  .search__input {
    min-height: 56px;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
  }
}

.search__results {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  grid-template-columns: 1fr;
  gap: var(--space-timeline, clamp(1rem, 2vw, 1.5rem));
  position: relative;
}

/**
 * Profile Layout Responsive Enhancements
 * User profile with stats and content
 */
.profile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-bento);
  max-width: 1200px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .profile-layout {
    grid-template-columns: 300px 1fr;
    gap: var(--space-network);
  }
}

.profile__sidebar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
}

.profile__avatar {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
}
.profile__avatar::before {
  content: "";
  display: block;
  padding-top: var(--aspect-ratio, 56.25%);
}
.profile__avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.profile__avatar.ratio-square {
  --aspect-ratio: 100%;
}
.profile__avatar.ratio-4-3 {
  --aspect-ratio: 75%;
}
.profile__avatar.ratio-21-9 {
  --aspect-ratio: 42.86%;
}
.profile__avatar.ratio-portrait {
  --aspect-ratio: 133.33%;
}
.profile__avatar {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .profile__avatar {
    max-width: 100%;
  }
}

.profile__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
  gap: var(--space-bento);
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
  overflow-x: hidden;
}
@media (max-width: 767px) {
  .profile__stats {
    grid-template-columns: 1fr;
  }
}

.profile__stat {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  text-align: center;
  padding: 1rem;
  min-height: 80px;
}
@media (min-width: 768px) {
  .profile__stat {
    min-height: auto;
  }
}

/**
 * Settings Layout Responsive Enhancements
 * Settings page with tabs/sections
 */
.settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-bento);
  max-width: 1200px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .settings-layout {
    grid-template-columns: 250px 1fr;
    gap: var(--space-network);
  }
}

@media (min-width: 1024px) {
  .settings__nav {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

.settings__nav-list {
  display: flex;
  overflow-x: auto;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .settings__nav-list {
    flex-direction: column;
    overflow-x: visible;
  }
}

.settings__nav-item {
  min-height: 44px;
  padding: 0.75rem 1rem;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .settings__nav-item {
    white-space: normal;
  }
}

/**
 * Chatroom Layout Responsive Enhancements
 * Chat interface with messages
 */
.chatroom-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  max-height: 100vh;
}

.chatroom__header {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  padding: var(--space-bento);
}

.chatroom__messages {
  overflow-y: auto;
  padding: var(--space-bento);
}
@media (min-width: 768px) {
  .chatroom__messages {
    padding: var(--space-network);
  }
}

.chatroom__input-wrapper {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(96% 0.005 220deg);
  backdrop-filter: blur(5px);
  border: 1px solid oklch(88% 0.005 220deg);
  padding: var(--padding-entity-secondary, clamp(1rem, 2vw, 1.5rem));
  padding: var(--space-bento);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}

.chatroom__input {
  min-height: 44px;
  padding: 0.75rem 1rem;
  font-size: max(16px, 1rem);
}
@media (min-width: 768px) {
  .chatroom__input {
    min-height: 48px;
  }
}

.chatroom__send-button {
  min-height: 44px;
  min-width: 44px;
}
@media (min-width: 768px) {
  .chatroom__send-button {
    min-height: 48px;
    min-width: 60px;
  }
}

/**
 * FAQ Layout Responsive Enhancements
 * Accordion-style FAQ
 */
.faq-layout {
  max-width: 900px;
  margin-inline: auto;
}

.faq__item {
  /**
   * @param $nature [primary]: The fundamental object of the current view.
   * @param $nature [secondary]: Supportive, contextual data.
   * @param $nature [imperative]: System-critical, high-urgency signal.
   * @param $nature [latent]: Backgrounded info awaiting activation.
   * @param $nature [aggregate]: A container summarizing multiple entities.
   * @param $nature [ancestral]: Archived or historical data (legacy state).
   * @param $nature [image-adaptive]: Image that loads appropriate resolution for viewport.
   * @param $nature [embed-responsive]: Embedded content that maintains aspect ratio.
   * @param $nature [avatar]: User avatar/profile picture display with status indicator.
   * @param $nature [badge]: Achievement badges and status indicators.
   * @param $nature [notification]: Notification cards and alert displays.
   * @param $nature [reaction-picker]: Emoji/reaction selector UI component.
   * @param $nature [user-card]: User profile preview card with hover actions.
   */
  border-radius: var(--radius-bento, clamp(0.75rem, 1.5vw, 1.25rem));
  transition: all var(--motion-fluid, 0.3s ease);
  background: oklch(99% 0.005 90deg);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(85% 0.005 220deg);
  box-shadow: 0 2px 8px oklch(8% 0.01 250deg / 0.15);
  padding: var(--padding-entity-primary, clamp(1.5rem, 3vw, 2rem));
  margin-bottom: var(--space-bento);
}

.faq__question {
  min-height: 44px;
  padding: 1rem;
  cursor: pointer;
}
@media (min-width: 768px) {
  .faq__question {
    padding: 1.25rem 1.5rem;
  }
}

.faq__answer {
  padding: 1rem;
}
@media (min-width: 768px) {
  .faq__answer {
    padding: 1.25rem 1.5rem;
  }
}

/**
 * Docs Layout Responsive Enhancements
 * Documentation with sidebar navigation
 */
.docs-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-bento);
  max-width: 1400px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .docs-layout {
    grid-template-columns: 280px 1fr;
    gap: var(--space-network);
  }
}
@media (min-width: 1440px) {
  .docs-layout {
    grid-template-columns: 320px 1fr 280px;
  }
}

@media (min-width: 1024px) {
  .docs__sidebar {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

.docs__content {
  max-width: 70ch;
}

@media (min-width: 1440px) {
  .docs__toc {
    position: sticky;
    top: 0;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/**
 * App Layout Responsive Enhancements
 * Full application interface
 */
.app-layout {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  max-height: 100vh;
}
@media (min-width: 1024px) {
  .app-layout {
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr;
  }
}

@media (min-width: 1024px) {
  .app__sidebar {
    grid-row: 1/-1;
    border-right: 1px solid var(--border-primary);
  }
}

/**
 * Minimal Layout Responsive Enhancements
 * Clean, minimal layout for focus
 */
.minimal-layout {
  max-width: 800px;
  margin-inline: auto;
  padding: var(--space-bento);
}
@media (min-width: 768px) {
  .minimal-layout {
    padding: var(--space-network);
  }
}

/**
 * Fixed Height Layout Responsive Enhancements
 * Layouts that maintain viewport height
 */
.fixed-height-layout {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/**
 * Scrollable Layout Responsive Enhancements
 * Layouts with scrollable content areas
 */
.scrollable-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.scrollable__content {
  overflow-y: auto;
  padding: var(--space-bento);
}
@media (min-width: 768px) {
  .scrollable__content {
    padding: var(--space-network);
  }
}

/**
 * Responsive Spacing Utilities
 * Apply across all layouts
 */
.responsive-section {
  /**
   * @param $vibe [neutral]: Standard system transparency.
   * @param $vibe [ethereal]: High-transparency, light-based focus.
   * @param $vibe [void]: Deep-space, high-contrast, zero-distraction.
   * @param $vibe [vibrant]: High-energy, data-saturated, high-neon.
   * @param $vibe [spacious-mobile]: Generous spacing on mobile for touch-friendliness.
   * @param $vibe [dense-desktop]: High information density on large screens.
   * @param $vibe [viewport-aware]: Content sized relative to viewport (hero sections).
   */
}
@media (max-width: 767px) {
  .responsive-section {
    padding: 3rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .responsive-section > * + * {
    margin-top: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .responsive-section {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
  }
  .responsive-section > * + * {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .responsive-section {
    padding: 2rem 3rem;
    margin-bottom: 1.5rem;
  }
  .responsive-section > * + * {
    margin-top: 1rem;
  }
}

.responsive-grid {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .responsive-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
  }
}
@media (min-width: 1920px) {
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-inline: auto;
    justify-content: center;
  }
}

.responsive-form {
  /**
   * @param $logic [distributed]: Autonomous entities in a non-linear grid.
   * @param $logic [focused]: A singular narrative thread for deep cognition.
   * @param $logic [associative]: A network where connections outweigh the nodes.
   * @param $logic [chronological]: A time-linear stream of sequential events.
   * @param $logic [manifest]: A high-density dashboard for total system oversight.
   * @param $logic [navigation-primary]: Main site navigation (horizontal desktop → mobile drawer).
   * @param $logic [navigation-secondary]: Contextual navigation (breadcrumbs, footer nav).
   * @param $logic [navigation-tabs]: Horizontal tab navigation for content switching.
   * @param $logic [navigation-sidebar]: Vertical sidebar navigation layout.
   * @param $logic [navigation-footer]: Multi-column footer navigation layout.
   * @param $logic [navigation-breadcrumb]: Breadcrumb trail navigation layout.
   * @param $logic [navigation-pagination]: Pagination controls layout.
   * @param $logic [navigation-accordion]: Accordion/collapsible navigation layout.
   * @param $logic [interaction-form]: Form layout optimized for data entry.
   * @param $logic [community-feed]: Activity feed/timeline layout for community updates.
   * @param $logic [comment-thread]: Nested comment discussion layout.
   * @param $logic [notification-center]: Notification panel layout.
   * @param $logic [user-grid]: User/member grid display layout.
   */
  display: grid;
  contain: layout style;
  isolation: isolate;
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  justify-items: stretch;
}
@media (max-width: 767px) {
  .responsive-form {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .responsive-form {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1.5rem 1.25rem;
  }
}
@media (min-width: 1024px) {
  .responsive-form {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem 1.5rem;
  }
}
.responsive-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.responsive-form .form-full-width {
  grid-column: 1/-1;
}

/**
 * Reduced Motion Support
 * All layouts respect user preferences
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/**
 * High Contrast Support
 * All layouts adapt to high contrast mode
 */
@media (prefers-contrast: high) {
  .post-layout,
  .article-layout,
  .landing-layout,
  .dashboard-layout,
  .gallery-layout,
  .archive-layout,
  .form-layout,
  .search-layout,
  .profile-layout,
  .settings-layout,
  .chatroom-layout,
  .faq-layout,
  .docs-layout,
  .app-layout,
  .minimal-layout,
  .fixed-height-layout,
  .scrollable-layout {
    backdrop-filter: none;
    background: var(--surface-primary);
    border: 2px solid var(--border-primary);
  }
}