@fractaldesign/fractalstyler 0.0.0-stage → 0.9.0

package/dist/css/fractalstyler.css

@@ -0,0 +1,2453 @@
+/*!
+ * fractalstyler v0.9.0 — the compiled stylesheet.
+ *
+ * Generated from src/lib/styles/*.sass. Do not edit: your changes are
+ * overwritten on the next build. To change the system, edit the SASS and
+ * recompile, or override tokens in your own stylesheet after this one.
+ *
+ * MIT licensed. https://github.com/fractalmandala/fractalstyler
+ */
+:root {
+  --shade-xs: var(--shadow-rim), 0 1px 1px rgb(var(--shadow-color) / 0.14), 0 0px 0px rgb(var(--shadow-color) / 0);
+  --shade-sm: var(--shadow-rim), 0 1px 2px rgb(var(--shadow-color) / 0.12), 0 1px 3px rgb(var(--shadow-color) / 0.02);
+  --shade-md: var(--shadow-rim), 0 2px 4px rgb(var(--shadow-color) / 0.09), 0 3px 6px rgb(var(--shadow-color) / 0.04);
+  --shade-bs: var(--shadow-rim), 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 6px 14px rgb(var(--shadow-color) / 0.06);
+  --shade-lg: var(--shadow-rim), 0 4px 8px rgb(var(--shadow-color) / 0.04), 0 12px 24px rgb(var(--shadow-color) / 0.08);
+  --shade-xl: var(--shadow-rim), 0 6px 12px rgb(var(--shadow-color) / 0.03), 0 20px 36px rgb(var(--shadow-color) / 0.09);
+  --shade-2xl: var(--shadow-rim), 0 8px 16px rgb(var(--shadow-color) / 0.02), 0 28px 48px rgb(var(--shadow-color) / 0.09);
+  --shade-3xl: var(--shadow-rim), 0 12px 24px rgb(var(--shadow-color) / 0.02), 0 36px 64px rgb(var(--shadow-color) / 0.08);
+}
+
+@font-face {
+  font-family: "General Sans";
+  src: url("/fonts/generalsans.woff2") format("woff2");
+  font-weight: 300 700;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: "Satoshi";
+  src: url("/fonts/satoshi.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: "Stack Sans";
+  src: url("/fonts/stacksans.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
+[data-mode=dark] {
+  color-scheme: dark;
+  --white-fixed: #FFFFFF;
+  --black-fixed: #171717;
+  --bg: #101010;
+  --bg-surface: #202021;
+  --bg-panel: #1f1f20;
+  --bg-sunken: #1f1f20;
+  --bg-raised: #3a3a3a;
+  --bg-extra: #111111;
+  --bg-input: #1c1c1d;
+  --bg-button: #171818;
+  --text-primary: #EDF2F7;
+  --text-secondary: #c7c7c7;
+  --text-muted: #7c7c7c;
+  --text-inverse: #7c7c7c;
+  --state-surface:#7c7c7c;
+  --state-hover: #4a4a4b;
+  --state-selected: #666668;
+  --border: #2f2f2f;
+  --border-subtle: #1e1e1f;
+  --border-strong: #7c7c7c;
+  --theme-color: #2F9E44;
+  --theme-color-alt: #36731d;
+  --success: #34D399;
+  --success-hover: #6EE7B7;
+  --warning: #FBBF24;
+  --warning-hover: #FCD34D;
+  --danger: #b21a1a;
+  --danger-hover: #FCA5A5;
+  --info: #60A5FA;
+  --info-hover: #93C5FD;
+  --ring: rgba(16, 185, 129, 0.4);
+  --shadow-color: 0 0 0;
+  --shadow-umbra: rgb(0 0 0 / 0.50);
+  --shadow-rim: inset 0 1px 0 rgba(255, 255, 255, 0.09);
+  --shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.14);
+  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.10), 0 2px 4px rgb(var(--shadow-color) / 0.06);
+  --shadow-md: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 8px 16px rgb(var(--shadow-color) / 0.06);
+  --shadow-bs: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 6px 14px rgb(var(--shadow-color) / 0.06);
+  --shadow-lg: 0 4px 8px rgb(var(--shadow-color) / 0.06), 0 12px 24px rgb(var(--shadow-color) / 0.06);
+  --shadow-xl: 0 8px 16px rgb(var(--shadow-color) / 0.06), 0 20px 36px rgb(var(--shadow-color) / 0.06);
+  --shadow-2xl: 0 12px 24px rgb(var(--shadow-color) / 0.06), 0 28px 48px rgb(var(--shadow-color) / 0.06);
+  --shadow-3xl: 0 16px 32px rgb(var(--shadow-color) / 0.06), 0 36px 64px rgb(var(--shadow-color) / 0.06);
+}
+
+[data-mode=light] {
+  color-scheme: light;
+  --white-fixed: #FFFFFF;
+  --black-fixed: #171717;
+  --bg: #ffffff;
+  --bg-surface: #FBFBF9;
+  --bg-panel: #FBFBF9;
+  --bg-sunken: #F7F6F0;
+  --bg-raised: #F4F4F5;
+  --bg-extra: rgb(247, 248, 249);
+  --bg-input: #f8f9fa;
+  --bg-button: #CED8D3;
+  --text-primary: #262627;
+  --text-secondary: #777777;
+  --text-muted: #a3a4a7;
+  --text-inverse: #ffffff;
+  --state-surface: #F2EFE9;
+  --state-hover: #ECE7DF;
+  --state-selected: #E4DFD5;
+  --border: #d8d8d8;
+  --border-subtle: #eceaea;
+  --border-strong: #cfcfcf;
+  --theme-color: #ff4400;
+  --theme-color-alt: #be2f00;
+  --theme-color-sub: #feb18a;
+  --success: #10B981;
+  --success-hover: #059669;
+  --warning: #F59E0B;
+  --warning-hover: #D97706;
+  --danger: #bf2a2a;
+  --danger-hover: #DC2626;
+  --info: #3B82F6;
+  --info-hover: #2563EB;
+  --ring: rgba(0, 127, 78, 0.35);
+  --shadow-color: 15 13 42;
+  --shadow-rim: transparent;
+  --shadow-xs: 0 1px 2px rgb(var(--shadow-color) / 0.14);
+  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.10), 0 2px 4px rgb(var(--shadow-color) / 0.06);
+  --shadow-md: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 8px 16px rgb(var(--shadow-color) / 0.06);
+  --shadow-bs: 0 2px 4px rgb(var(--shadow-color) / 0.06), 0 6px 14px rgb(var(--shadow-color) / 0.06);
+  --shadow-lg: 0 4px 8px rgb(var(--shadow-color) / 0.06), 0 12px 24px rgb(var(--shadow-color) / 0.06);
+  --shadow-xl: 0 8px 16px rgb(var(--shadow-color) / 0.06), 0 20px 36px rgb(var(--shadow-color) / 0.06);
+  --shadow-2xl: 0 12px 24px rgb(var(--shadow-color) / 0.06), 0 28px 48px rgb(var(--shadow-color) / 0.06);
+  --shadow-3xl: 0 16px 32px rgb(var(--shadow-color) / 0.06), 0 36px 64px rgb(var(--shadow-color) / 0.06);
+}
+
+:root {
+  --font-sans: "Timeless Sans", sans-serif;
+  --timeless-sans: "Timeless Sans", sans-serif;
+  --timeless-grotesk: "Timeless Grotesk", sans-serif;
+  --text-scaling: 1.25;
+  --text-xs: 0.67rem;
+  --text-sm: 0.75rem;
+  --text-md: 0.875rem;
+  --text-bs: 1rem;
+  --text-lg: calc(var(--text-bs) * var(--text-scaling));
+  --text-xl: calc(var(--text-lg) * var(--text-scaling));
+  --text-2xl: calc(var(--text-xl) * var(--text-scaling));
+  --text-3xl: calc(var(--text-2xl) * var(--text-scaling));
+  --text-4xl: calc(var(--text-3xl) * var(--text-scaling));
+  --text-5xl: calc(var(--text-4xl) * var(--text-scaling));
+  --unit-space: 0.25rem;
+  --space-xs: var(--unit-space);
+  --space-sm: calc(var(--unit-space) * 2);
+  --space-md: calc(var(--unit-space) * 3);
+  --space-bs: calc(var(--unit-space) * 4);
+  --space-lg: calc(var(--unit-space) * 6);
+  --space-xl: calc(var(--unit-space) * 8);
+  --space-2xl: calc(var(--unit-space) * 12);
+  --space-3xl: calc(var(--unit-space) * 16);
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-bs: 16px;
+  --radius-lg: 32px;
+  --radius-full: 9999px;
+  --control-h-sm: 21px;
+  --control-h-bs: 32px;
+  --control-h-lg: 38px;
+  --avatar-size: 32px;
+  --switch-w: 40px;
+  --switch-h: 22px;
+  --switch-thumb: 16px;
+  --transin1: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+  --transin2: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+  --transin3: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+  --transout1: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+  --transout2: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  --transout3: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+  --speed0: 50ms;
+  --speed1: 90ms;
+  --speed2: 140ms;
+  --speed3: 220ms;
+  --motionin1: var(--speed0) var(--transin1);
+  --motionout1: var(--speed1) var(--transout1);
+  --motionin2: var(--speed2) var(--transin2);
+  --motionout2: var(--speed2) var(--transout2);
+  --motionin3: var(--speed3) var(--transin3);
+  --motionout3: var(--speed3) var(--transout3);
+  --header-height: 64px;
+  --footer-height: 32px;
+  --fit-height: calc(var(--header-height) + var(--footer-height));
+  --prose-clamp: 65ch;
+  --content-clamp: 1600px;
+  --app-inline: var(--space-lg);
+  --card-min: 240px;
+  --height-sm: 16px;
+  --height-md: 20px;
+  --height-bs: 27px;
+  --height-lg: 32px;
+  --sidebar-width: 280px;
+  --sidebar-width-left: 280px;
+  --sidebar-width-right: 280px;
+  --z-sticky: 100;
+  --z-raised: 200;
+  --z-modal: 300;
+  --z-toast: 500;
+  --greenpop1: #70e000;
+  --greenpop2: #00df89;
+  --greenpop3: #69ff97;
+  --greenpop4: #00e676;
+  --orangepop1: #ff7700;
+  --orangepop2: #ff4400;
+  --orangepop3: #ff0055;
+  --orangepop4: #ff5e36;
+  --orangepop5: #ff9966;
+  --orangepop6: #ff9f1c;
+}
+
+@font-face {
+  font-family: "Google Sans Flex";
+  src: url("/fonts/GoogleSansFlex.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: "Google Sans Flex";
+  src: url("/fonts/GoogleSansFlex.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: italic;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: "Google Sans";
+  src: url("/fonts/GoogleSans.woff2") format("woff2");
+  font-weight: 400 700;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: "Google Sans";
+  src: url("/fonts/GoogleSans-Italic.woff2") format("woff2");
+  font-weight: 400 700;
+  font-style: italic;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: "Google Sans Code";
+  src: url("/fonts/googlesanscode.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: "Timeless Sans";
+  src: url("/fonts/TimelessSansVF.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Timeless Sans";
+  src: url("/fonts/TimelessSansVF.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Timeless Grotesk";
+  src: url("/fonts/TimelessSansVF.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Timeless Grotesk";
+  src: url("/fonts/TimelessSansVF.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: italic;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body, html {
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-bs);
+  background: var(--bg-surface);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+img,
+video,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+p, li, h6, h5, h4, h3, h2, h1 {
+  margin: 0;
+}
+
+p, li {
+  text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5 {
+  text-wrap: balance;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.bdr {
+  border: 1px solid red;
+}
+
+ul, ol {
+  list-style-type: none;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+html.mode-wipe::view-transition-old(root),
+html.mode-wipe::view-transition-new(root) {
+  animation: none;
+}
+
+.gap-xs {
+  gap: var(--space-xs);
+}
+
+.gap-sm {
+  gap: var(--space-sm);
+}
+
+.gap-md {
+  gap: var(--space-md);
+}
+
+.gap-bs {
+  gap: var(--space-bs);
+}
+
+.gap-lg {
+  gap: var(--space-lg);
+}
+
+.gap-xl {
+  gap: var(--space-xl);
+}
+
+.gap-2xl {
+  gap: var(--space-2xl);
+}
+
+.gap-3xl {
+  gap: var(--space-3xl);
+}
+
+.rgap-xs {
+  row-gap: var(--space-xs);
+}
+
+.rgap-sm {
+  row-gap: var(--space-sm);
+}
+
+.rgap-md {
+  row-gap: var(--space-md);
+}
+
+.rgap-bs {
+  row-gap: var(--space-bs);
+}
+
+.rgap-lg {
+  row-gap: var(--space-lg);
+}
+
+.rgap-xl {
+  row-gap: var(--space-xl);
+}
+
+.rgap-2xl {
+  row-gap: var(--space-2xl);
+}
+
+.rgap-3xl {
+  row-gap: var(--space-3xl);
+}
+
+.cgap-xs {
+  column-gap: var(--space-xs);
+}
+
+.cgap-sm {
+  column-gap: var(--space-sm);
+}
+
+.cgap-md {
+  column-gap: var(--space-md);
+}
+
+.cgap-bs {
+  column-gap: var(--space-bs);
+}
+
+.cgap-lg {
+  column-gap: var(--space-lg);
+}
+
+.cgap-xl {
+  column-gap: var(--space-xl);
+}
+
+.cgap-2xl {
+  column-gap: var(--space-2xl);
+}
+
+.cgap-3xl {
+  column-gap: var(--space-3xl);
+}
+
+.pad-xs {
+  padding: var(--space-xs);
+}
+
+.pad-sm {
+  padding: var(--space-sm);
+}
+
+.pad-md {
+  padding: var(--space-md);
+}
+
+.pad-bs {
+  padding: var(--space-bs);
+}
+
+.pad-lg {
+  padding: var(--space-lg);
+}
+
+.pad-xl {
+  padding: var(--space-xl);
+}
+
+.pad-2xl {
+  padding: var(--space-2xl);
+}
+
+.pad-3xl {
+  padding: var(--space-3xl);
+}
+
+.px-xs {
+  padding-inline: var(--space-xs);
+}
+
+.px-sm {
+  padding-inline: var(--space-sm);
+}
+
+.px-md {
+  padding-inline: var(--space-md);
+}
+
+.px-bs {
+  padding-inline: var(--space-bs);
+}
+
+.px-lg {
+  padding-inline: var(--space-lg);
+}
+
+.px-xl {
+  padding-inline: var(--space-xl);
+}
+
+.px-2xl {
+  padding-inline: var(--space-2xl);
+}
+
+.px-3xl {
+  padding-inline: var(--space-3xl);
+}
+
+.py-xs {
+  padding-block: var(--space-xs);
+}
+
+.py-sm {
+  padding-block: var(--space-sm);
+}
+
+.py-md {
+  padding-block: var(--space-md);
+}
+
+.py-bs {
+  padding-block: var(--space-bs);
+}
+
+.py-lg {
+  padding-block: var(--space-lg);
+}
+
+.py-xl {
+  padding-block: var(--space-xl);
+}
+
+.py-2xl {
+  padding-block: var(--space-2xl);
+}
+
+.py-3xl {
+  padding-block: var(--space-3xl);
+}
+
+.pt-xs {
+  padding-top: var(--space-xs);
+}
+
+.pt-sm {
+  padding-top: var(--space-sm);
+}
+
+.pt-md {
+  padding-top: var(--space-md);
+}
+
+.pt-bs {
+  padding-top: var(--space-bs);
+}
+
+.pt-lg {
+  padding-top: var(--space-lg);
+}
+
+.pt-xl {
+  padding-top: var(--space-xl);
+}
+
+.pt-2xl {
+  padding-top: var(--space-2xl);
+}
+
+.pt-3xl {
+  padding-top: var(--space-3xl);
+}
+
+.pr-xs {
+  padding-right: var(--space-xs);
+}
+
+.pr-sm {
+  padding-right: var(--space-sm);
+}
+
+.pr-md {
+  padding-right: var(--space-md);
+}
+
+.pr-bs {
+  padding-right: var(--space-bs);
+}
+
+.pr-lg {
+  padding-right: var(--space-lg);
+}
+
+.pr-xl {
+  padding-right: var(--space-xl);
+}
+
+.pr-2xl {
+  padding-right: var(--space-2xl);
+}
+
+.pr-3xl {
+  padding-right: var(--space-3xl);
+}
+
+.pb-xs {
+  padding-bottom: var(--space-xs);
+}
+
+.pb-sm {
+  padding-bottom: var(--space-sm);
+}
+
+.pb-md {
+  padding-bottom: var(--space-md);
+}
+
+.pb-bs {
+  padding-bottom: var(--space-bs);
+}
+
+.pb-lg {
+  padding-bottom: var(--space-lg);
+}
+
+.pb-xl {
+  padding-bottom: var(--space-xl);
+}
+
+.pb-2xl {
+  padding-bottom: var(--space-2xl);
+}
+
+.pb-3xl {
+  padding-bottom: var(--space-3xl);
+}
+
+.pl-xs {
+  padding-left: var(--space-xs);
+}
+
+.pl-sm {
+  padding-left: var(--space-sm);
+}
+
+.pl-md {
+  padding-left: var(--space-md);
+}
+
+.pl-bs {
+  padding-left: var(--space-bs);
+}
+
+.pl-lg {
+  padding-left: var(--space-lg);
+}
+
+.pl-xl {
+  padding-left: var(--space-xl);
+}
+
+.pl-2xl {
+  padding-left: var(--space-2xl);
+}
+
+.pl-3xl {
+  padding-left: var(--space-3xl);
+}
+
+.mar-xs {
+  margin: var(--space-xs);
+}
+
+.mar-sm {
+  margin: var(--space-sm);
+}
+
+.mar-md {
+  margin: var(--space-md);
+}
+
+.mar-bs {
+  margin: var(--space-bs);
+}
+
+.mar-lg {
+  margin: var(--space-lg);
+}
+
+.mar-xl {
+  margin: var(--space-xl);
+}
+
+.mar-2xl {
+  margin: var(--space-2xl);
+}
+
+.mar-3xl {
+  margin: var(--space-3xl);
+}
+
+.mx-xs {
+  margin-inline: var(--space-xs);
+}
+
+.mx-sm {
+  margin-inline: var(--space-sm);
+}
+
+.mx-md {
+  margin-inline: var(--space-md);
+}
+
+.mx-bs {
+  margin-inline: var(--space-bs);
+}
+
+.mx-lg {
+  margin-inline: var(--space-lg);
+}
+
+.mx-xl {
+  margin-inline: var(--space-xl);
+}
+
+.mx-2xl {
+  margin-inline: var(--space-2xl);
+}
+
+.mx-3xl {
+  margin-inline: var(--space-3xl);
+}
+
+.my-xs {
+  margin-block: var(--space-xs);
+}
+
+.my-sm {
+  margin-block: var(--space-sm);
+}
+
+.my-md {
+  margin-block: var(--space-md);
+}
+
+.my-bs {
+  margin-block: var(--space-bs);
+}
+
+.my-lg {
+  margin-block: var(--space-lg);
+}
+
+.my-xl {
+  margin-block: var(--space-xl);
+}
+
+.my-2xl {
+  margin-block: var(--space-2xl);
+}
+
+.my-3xl {
+  margin-block: var(--space-3xl);
+}
+
+.mt-xs {
+  margin-top: var(--space-xs);
+}
+
+.mt-sm {
+  margin-top: var(--space-sm);
+}
+
+.mt-md {
+  margin-top: var(--space-md);
+}
+
+.mt-bs {
+  margin-top: var(--space-bs);
+}
+
+.mt-lg {
+  margin-top: var(--space-lg);
+}
+
+.mt-xl {
+  margin-top: var(--space-xl);
+}
+
+.mt-2xl {
+  margin-top: var(--space-2xl);
+}
+
+.mt-3xl {
+  margin-top: var(--space-3xl);
+}
+
+.mr-xs {
+  margin-right: var(--space-xs);
+}
+
+.mr-sm {
+  margin-right: var(--space-sm);
+}
+
+.mr-md {
+  margin-right: var(--space-md);
+}
+
+.mr-bs {
+  margin-right: var(--space-bs);
+}
+
+.mr-lg {
+  margin-right: var(--space-lg);
+}
+
+.mr-xl {
+  margin-right: var(--space-xl);
+}
+
+.mr-2xl {
+  margin-right: var(--space-2xl);
+}
+
+.mr-3xl {
+  margin-right: var(--space-3xl);
+}
+
+.mb-xs {
+  margin-bottom: var(--space-xs);
+}
+
+.mb-sm {
+  margin-bottom: var(--space-sm);
+}
+
+.mb-md {
+  margin-bottom: var(--space-md);
+}
+
+.mb-bs {
+  margin-bottom: var(--space-bs);
+}
+
+.mb-lg {
+  margin-bottom: var(--space-lg);
+}
+
+.mb-xl {
+  margin-bottom: var(--space-xl);
+}
+
+.mb-2xl {
+  margin-bottom: var(--space-2xl);
+}
+
+.mb-3xl {
+  margin-bottom: var(--space-3xl);
+}
+
+.ml-xs {
+  margin-left: var(--space-xs);
+}
+
+.ml-sm {
+  margin-left: var(--space-sm);
+}
+
+.ml-md {
+  margin-left: var(--space-md);
+}
+
+.ml-bs {
+  margin-left: var(--space-bs);
+}
+
+.ml-lg {
+  margin-left: var(--space-lg);
+}
+
+.ml-xl {
+  margin-left: var(--space-xl);
+}
+
+.ml-2xl {
+  margin-left: var(--space-2xl);
+}
+
+.ml-3xl {
+  margin-left: var(--space-3xl);
+}
+
+.radius-xs {
+  border-radius: var(--radius-xs);
+}
+
+.radius-sm {
+  border-radius: var(--radius-sm);
+}
+
+.radius-md {
+  border-radius: var(--radius-md);
+}
+
+.radius-bs {
+  border-radius: var(--radius-bs);
+}
+
+.radius-lg {
+  border-radius: var(--radius-lg);
+}
+
+.radius-full {
+  border-radius: var(--radius-full);
+}
+
+.wfull {
+  width: 100%;
+}
+
+.hfull {
+  height: 100%;
+}
+
+.full {
+  width: 100%;
+  height: 100%;
+}
+
+.minw0 {
+  min-width: 0;
+}
+
+.minh0 {
+  min-height: 0;
+}
+
+.min0 {
+  min-width: 0;
+  min-height: 0;
+}
+
+.h-sm {
+  height: var(--height-sm);
+}
+
+.h-md {
+  height: var(--height-md);
+}
+
+.h-bs {
+  height: var(--height-bs);
+}
+
+.h-lg {
+  height: var(--height-lg);
+}
+
+.hfull-vh {
+  min-height: 100vh;
+}
+
+.hfull-vh-fitted {
+  min-height: var(--fit-height);
+}
+
+.text-xs {
+  font-size: var(--text-xs);
+}
+
+.text-sm {
+  font-size: var(--text-sm);
+}
+
+.text-md {
+  font-size: var(--text-md);
+}
+
+.text-bs {
+  font-size: var(--text-bs);
+}
+
+.text-lg {
+  font-size: var(--text-lg);
+}
+
+.text-xl {
+  font-size: var(--text-xl);
+}
+
+.text-2xl {
+  font-size: var(--text-2xl);
+}
+
+.text-3xl {
+  font-size: var(--text-3xl);
+}
+
+.text-4xl {
+  font-size: var(--text-4xl);
+}
+
+.text-5xl {
+  font-size: var(--text-5xl);
+}
+
+.text-body {
+  font-size: var(--text-bs);
+  line-height: 1.5;
+}
+
+.text-body-lg {
+  font-size: var(--text-lg);
+  line-height: 1.5;
+}
+
+.text-body-sm {
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.page-title {
+  font-size: var(--text-3xl);
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: -0.02rem;
+}
+
+.page-desc {
+  font-size: var(--text-lg);
+  line-height: 1.2;
+}
+
+.page-heading-xl {
+  font-size: var(--text-xl);
+  line-height: 1.1;
+  font-weight: 600;
+  letter-spacing: -0.03rem;
+}
+
+.page-heading-lg {
+  font-size: var(--text-lg);
+  line-height: 1.1;
+  font-weight: 600;
+  letter-spacing: -0.03rem;
+}
+
+.page-heading-bs {
+  font-size: var(--text-bs);
+  line-height: 1.1;
+  font-weight: 600;
+  letter-spacing: -0.02rem;
+}
+
+.card-title {
+  font-size: var(--text-lg);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.card-desc {
+  font-size: var(--text-md);
+  line-height: 1.2;
+}
+
+.breadcrumb-link, .breadcrumb-spacer {
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+}
+
+.breadcrumb-link:hover {
+  color: var(--theme-color);
+}
+
+.breadcrumb {
+  display: flex;
+  justify-content: flex-start;
+  margin-left: -0.5rem;
+}
+
+.nav-link {
+  font-size: var(--text-md);
+  line-height: 1.2;
+}
+
+.nav-link-sm {
+  font-size: var(--text-sm);
+  line-height: 1.2;
+}
+
+.nav-header {
+  font-size: var(--text-sm);
+  line-height: 1.1;
+  font-weight: 500;
+  padding: var(--space-sm);
+}
+
+.header-nav a {
+  text-transform: uppercase;
+  font-size: var(--text-md);
+  font-weight: 500;
+}
+.header-nav a:hover {
+  color: var(--theme-color);
+}
+
+.lh11 {
+  line-height: 1.1;
+}
+
+.lh12 {
+  line-height: 1.2;
+}
+
+.lh13 {
+  line-height: 1.3;
+}
+
+.lh14 {
+  line-height: 1.4;
+}
+
+.lh15 {
+  line-height: 1.5;
+}
+
+.lh16 {
+  line-height: 1.6;
+}
+
+.ls-tight-bs {
+  letter-spacing: -0.01rem;
+}
+
+.ls-tight-lg {
+  letter-spacing: -0.02rem;
+}
+
+.ls-tight-xl {
+  letter-spacing: -0.03rem;
+}
+
+.ls-wide-bs {
+  letter-spacing: 0.01rem;
+}
+
+.ls-wide-lg {
+  letter-spacing: 0.02rem;
+}
+
+.ls-wide-xl {
+  letter-spacing: 0.03rem;
+}
+
+.weight-300 {
+  font-weight: 300;
+}
+
+.weight-400 {
+  font-weight: 400;
+}
+
+.weight-500 {
+  font-weight: 500;
+}
+
+.weight-600 {
+  font-weight: 600;
+}
+
+.weight-700 {
+  font-weight: 700;
+}
+
+.weight-800 {
+  font-weight: 800;
+}
+
+.tt-u {
+  text-transform: uppercase;
+}
+
+.tt-c {
+  text-transform: capitalize;
+}
+
+.ta-c {
+  text-align: center;
+}
+@media (max-width: 1024px) {
+  .ta-c.mleft {
+    text-align: left;
+  }
+}
+
+.ta-l {
+  text-align: left;
+}
+
+.ta-r {
+  text-align: right;
+}
+@media (max-width: 1024px) {
+  .ta-r.mleft {
+    text-align: left;
+  }
+}
+
+.mono {
+  font-family: var(--font-mono);
+}
+
+.sans {
+  font-family: var(--font-sans);
+}
+
+.truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+}
+.box.xcenter {
+  align-items: center;
+  text-align: center;
+}
+.box.xleft {
+  align-items: flex-start;
+  text-align: left;
+}
+.box.xright {
+  align-items: flex-end;
+  text-align: right;
+}
+.box.ycenter {
+  justify-content: center;
+}
+.box.ytop {
+  justify-content: flex-start;
+}
+.box.ybot {
+  justify-content: flex-end;
+}
+.box.ybetween {
+  justify-content: space-between;
+}
+.box.yevenly {
+  justify-content: space-evenly;
+}
+.box.yaround {
+  justify-content: space-around;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+}
+.row.xleft {
+  justify-content: flex-start;
+}
+.row.xcenter {
+  justify-content: center;
+}
+.row.xright {
+  justify-content: flex-end;
+}
+.row.xbetween {
+  justify-content: space-between;
+}
+.row.xevenly {
+  justify-content: space-evenly;
+}
+.row.xaround {
+  justify-content: space-around;
+}
+.row.ycenter {
+  align-items: center;
+}
+.row.ytop {
+  align-items: flex-start;
+}
+.row.ybot {
+  align-items: flex-end;
+}
+
+.grid {
+  display: grid;
+}
+.grid.center {
+  place-items: center;
+}
+.grid.xcenter {
+  justify-items: center;
+  text-align: center;
+}
+.grid.xleft {
+  justify-items: start;
+  text-align: left;
+}
+.grid.xright {
+  justify-items: end;
+  text-align: right;
+}
+.grid.xstretch {
+  justify-items: stretch;
+}
+.grid.ycenter {
+  align-items: center;
+}
+.grid.ytop {
+  align-items: start;
+}
+.grid.ybot {
+  align-items: end;
+}
+.grid.ystretch {
+  align-items: stretch;
+}
+.grid.xbetween {
+  justify-content: space-between;
+}
+.grid.xevenly {
+  justify-content: space-evenly;
+}
+.grid.xaround {
+  justify-content: space-around;
+}
+.grid.ybetween {
+  align-content: space-between;
+}
+.grid.yevenly {
+  align-content: space-evenly;
+}
+.grid.yaround {
+  align-content: space-around;
+}
+
+.wrap {
+  flex-wrap: wrap;
+}
+
+.grow {
+  flex: 1 1 0%;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.scroll-y {
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+.scroll-x {
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior: contain;
+}
+
+.card {
+  padding: var(--space-bs);
+  border: 1px solid var(--border);
+  background: var(--bg-panel);
+}
+.card svg.arrow {
+  color: var(--theme-color);
+  transition: transform var(--speed1) var(--transout1);
+}
+.card footer {
+  margin-top: auto;
+}
+.card[data-shape=modern] {
+  border-radius: var(--radius-sm);
+}
+.card:hover svg {
+  transform: translateX(2rem);
+}
+
+.chip {
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: 0.01rem;
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-md);
+}
+
+.prose-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.nav-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.page-header {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: var(--space-2xl);
+  gap: var(--space-sm);
+}
+
+.inputs-wrapper {
+  display: flex;
+  gap: var(--space-xs);
+}
+.inputs-wrapper label {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+.checkbox-wrapper span {
+  font-size: var(--text-sm);
+  font-weight: 500;
+}
+
+.grid-1 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+@media (min-width: 1025px) {
+  .grid-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+@media (min-width: 1025px) {
+  .grid-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+@media (min-width: 1025px) {
+  .grid-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1281px) {
+  .grid-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.grid-6 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+@media (min-width: 1025px) {
+  .grid-6 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1281px) {
+  .grid-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+.cspan-1 {
+  grid-column: span 1;
+}
+
+.cspan-2 {
+  grid-column: span 2;
+}
+
+.cspan-3 {
+  grid-column: span 3;
+}
+
+.cspan-4 {
+  grid-column: span 4;
+}
+
+.cspan-5 {
+  grid-column: span 5;
+}
+
+.cspan-6 {
+  grid-column: span 6;
+}
+
+.cspan-7 {
+  grid-column: span 7;
+}
+
+.cspan-8 {
+  grid-column: span 8;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
+}
+
+.prose {
+  max-width: var(--prose-clamp);
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+.prose h1:first-child, .prose h2:first-child, .prose h3:first-child, .prose h4:first-child {
+  margin-top: 0;
+}
+
+.frame-16-9 {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  position: relative;
+}
+.frame-16-9 img, .frame-16-9 video, .frame-16-9 iframe, .frame-16-9 svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.frame-9-16 {
+  aspect-ratio: 9 / 16;
+  overflow: hidden;
+  position: relative;
+}
+.frame-9-16 img, .frame-9-16 video, .frame-9-16 iframe, .frame-9-16 svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.frame-4-3 {
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  position: relative;
+}
+.frame-4-3 img, .frame-4-3 video, .frame-4-3 iframe, .frame-4-3 svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.frame-3-4 {
+  aspect-ratio: 3 / 4;
+  overflow: hidden;
+  position: relative;
+}
+.frame-3-4 img, .frame-3-4 video, .frame-3-4 iframe, .frame-3-4 svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.frame-3-2 {
+  aspect-ratio: 3 / 2;
+  overflow: hidden;
+  position: relative;
+}
+.frame-3-2 img, .frame-3-2 video, .frame-3-2 iframe, .frame-3-2 svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.frame-2-3 {
+  aspect-ratio: 2 / 3;
+  overflow: hidden;
+  position: relative;
+}
+.frame-2-3 img, .frame-2-3 video, .frame-2-3 iframe, .frame-2-3 svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.frame-1-1 {
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  position: relative;
+}
+.frame-1-1 img, .frame-1-1 video, .frame-1-1 iframe, .frame-1-1 svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.reel {
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: inline mandatory;
+}
+.reel > * {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-height: 100vh;
+}
+
+.app-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+  height: var(--header-height);
+  padding-inline: var(--app-inline);
+  background: var(--bg-surface);
+}
+.app-header.clamped {
+  width: var(--content-clamp);
+  margin-inline: auto;
+}
+
+.app-main {
+  flex: 1 1 0%;
+  min-width: 0;
+  min-height: calc(100dvh - var(--fit-height));
+  display: flex;
+  flex-direction: row;
+  padding-inline: var(--app-inline);
+}
+.app-main.clamped {
+  width: var(--content-clamp);
+  margin-inline: auto;
+}
+
+.main-section {
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
+.sidebar-left,
+.sidebar-right {
+  display: none;
+  flex-shrink: 0;
+  position: sticky;
+  top: var(--header-height);
+  height: calc(100dvh - var(--fit-height));
+  overflow-y: auto;
+  padding-block: var(--space-2xl);
+}
+.sidebar-left ul, .sidebar-left ol,
+.sidebar-right ul,
+.sidebar-right ol {
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.sidebar-left {
+  width: var(--sidebar-width-left);
+}
+
+.sidebar-right {
+  width: var(--sidebar-width-right);
+}
+
+@media (max-width: 1024px) {
+  .app-shell.open .sidebar-left {
+    display: block;
+    position: fixed;
+    left: 0;
+    z-index: var(--z-modal);
+    height: var(--fit-height);
+  }
+}
+@media (min-width: 1025px) {
+  .sidebar-left {
+    display: block;
+  }
+}
+@media (min-width: 1281px) {
+  .sidebar-right {
+    display: block;
+  }
+}
+.app-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-inline: var(--app-inline);
+  min-height: var(--footer-height);
+}
+
+.content-section {
+  width: 100%;
+  padding: var(--space-2xl) 0;
+}
+.content-section.null {
+  padding: 0 var(--space-bs);
+}
+@media (min-width: 769px) {
+  .content-section {
+    padding: var(--space-2xl) var(--space-bs);
+  }
+  .content-section.narrow-half {
+    padding: var(--space-2xl) 0;
+    width: 640px;
+    margin-inline: auto;
+  }
+  .content-section.narrow-wide {
+    padding: var(--space-2xl) 0;
+    width: 720px;
+    margin-inline: auto;
+  }
+}
+@media (min-width: 1025px) {
+  .content-section {
+    padding: var(--space-2xl) var(--space-bs);
+  }
+  .content-section.narrow-full {
+    width: 640px;
+    margin-inline: auto;
+  }
+  .content-section.narrow-half {
+    width: 750px;
+    padding-right: 25px;
+  }
+  .content-section.narrow-wide {
+    width: 750px;
+  }
+}
+@media (min-width: 1281px) {
+  .content-section.narrow-full {
+    width: 680px;
+  }
+  .content-section.narrow-half {
+    width: 800px;
+    padding-right: 120px;
+  }
+  .content-section.narrow-wide {
+    width: 1024px;
+  }
+}
+@media (min-width: 1441px) {
+  .content-section.narrow-wide {
+    width: 1280px;
+  }
+}
+
+.input {
+  display: block;
+  width: 100%;
+  height: var(--height-lg);
+  padding-inline: var(--space-bs);
+  font-size: var(--text-md);
+  background: var(--bg-input);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+.input:focus-visible {
+  outline: none;
+  border-color: var(--theme-color);
+  box-shadow: 0 0 0 2px var(--ring);
+}
+.input.small {
+  height: var(--height-bs);
+  font-size: var(--text-sm);
+}
+
+.select {
+  display: block;
+  width: 100%;
+  height: var(--height-lg);
+  padding-inline: var(--space-bs);
+  font-size: var(--text-md);
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23697080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  cursor: pointer;
+}
+.select:focus-visible {
+  outline: none;
+  border-color: var(--theme-color);
+  box-shadow: 0 0 0 2px var(--ring);
+}
+.select.small {
+  height: var(--height-bs);
+  font-size: var(--text-sm);
+}
+
+.link {
+  color: var(--theme-color);
+  text-decoration: none;
+  transition: color var(--motionin1);
+}
+.link:hover {
+  color: var(--theme-color-alt);
+}
+
+.link-plain {
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: color var(--motionin1);
+}
+.link-plain:hover {
+  color: var(--theme-color);
+}
+
+.link-parent {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+.link-parent .link-title {
+  transition: color var(--motionin1);
+}
+.link-parent:hover .link-title {
+  color: var(--theme-color);
+}
+
+a.nav-link {
+  padding: var(--space-sm);
+  border-radius: var(--radius-sm);
+}
+a.nav-link:hover {
+  background: var(--state-hover);
+}
+
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--height-bs);
+  font-size: var(--text-md);
+  color: var(--text-primary);
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--motionin1), border-color var(--motionin1), color var(--motionin1);
+  padding-inline: var(--space-md);
+}
+button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+button.icon {
+  height: 24px;
+  width: 24px;
+  border: 1px solid transparent;
+  background: transparent;
+  padding: 0;
+}
+button.icon:hover {
+  background: var(--state-hover);
+}
+button.modern {
+  border-radius: var(--space-xs);
+}
+button.primary {
+  background: var(--theme-color);
+}
+button[data-variant=primary] {
+  background: var(--theme-color);
+  color: var(--white-fixed);
+  border: 1px solid var(--theme-color);
+}
+button[data-variant=primary]:hover {
+  background: var(--theme-color-alt);
+  border: 1px solid var(--theme-color-alt);
+}
+button[data-variant=secondary] {
+  background: var(--state-surface);
+  color: var(--text-primary);
+  border: 1px solid var(--border-strong);
+}
+button[data-variant=secondary]:hover {
+  background: var(--state-hover);
+}
+button[data-variant=soft] {
+  background: var(--theme-color-sub);
+  color: var(--white-fixed);
+  border: 1px solid var(--theme-color-sub);
+}
+button[data-variant=soft]:hover {
+  border: 1px solid var(--text-primary);
+  color: var(--text-primary);
+}
+button[data-variant=outline] {
+  background: var(--bg);
+  color: var(--text-primary);
+  border: 1px solid var(--text-primary);
+}
+button[data-variant=outline]:hover {
+  background: var(--state-hover);
+}
+button[data-variant=ghost] {
+  background: transparent;
+  color: var(--text-primary);
+  border: none;
+}
+button[data-variant=ghost]:hover {
+  background: var(--state-hover);
+}
+button[data-variant=link] {
+  background: transparent;
+  color: var(--theme-color);
+  border: none;
+}
+button[data-variant=link]:hover {
+  text-decoration: underline;
+}
+button[data-variant=destructive] {
+  background: var(--danger);
+  color: var(--white-fixed);
+  border: 1px solid var(--danger);
+}
+button[data-variant=destructive]:hover {
+  animation: vibrating 60ms infinite forwards;
+}
+button[data-shape=modern] {
+  border-radius: var(--radius-sm);
+}
+button[data-shape=curved] {
+  border-radius: var(--radius-md);
+}
+button[data-shape=round] {
+  border-radius: var(--radius-full);
+}
+button[data-size=sm] {
+  height: var(--height-sm);
+  font-size: var(--text-sm);
+}
+button[data-size=md] {
+  height: var(--height-md);
+  font-size: var(--text-md);
+}
+button[data-size=bs] {
+  height: var(--height-bs);
+  font-size: var(--text-bs);
+}
+button[data-size=lg] {
+  height: var(--height-lg);
+  font-size: var(--text-bs);
+}
+
+@keyframes vibrating {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.03);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+a.primary {
+  background: var(--theme-color);
+  font-size: var(--text-lg);
+  color: var(--white-fixed);
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  min-width: 6rem;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--motionin1);
+}
+a.primary.modern {
+  border-radius: var(--space-xs);
+}
+a.primary:hover {
+  box-shadow: var(--shadow-bs);
+}
+
+a.outline {
+  background: transparent;
+  font-size: var(--text-lg);
+  color: var(--text-primary);
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  min-width: 6rem;
+  height: 40px;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--text-primary);
+  transition: box-shadow var(--motionin1);
+}
+a.outline.modern {
+  border-radius: var(--space-xs);
+}
+a.outline:hover {
+  box-shadow: var(--shadow-bs);
+}
+
+.bg {
+  background: var(--bg);
+}
+
+.surface {
+  background: var(--bg-surface);
+}
+
+.panel {
+  background: var(--bg-panel);
+}
+
+.sunken {
+  background: var(--bg-sunken);
+}
+
+.raised {
+  background: var(--bg-raised);
+}
+
+.extra {
+  background: var(--bg-extra);
+}
+
+.text-primary {
+  color: var(--text-primary);
+}
+
+.text-secondary {
+  color: var(--text-secondary);
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.text-inverse {
+  color: var(--text-inverse);
+}
+
+.text-white {
+  color: var(--white-fixed);
+}
+
+.text-black {
+  color: var(--black-fixed);
+}
+
+.text-theme {
+  color: var(--theme-color);
+}
+
+.text-success {
+  color: var(--success);
+}
+
+.text-warning {
+  color: var(--warning);
+}
+
+.text-danger {
+  color: var(--danger);
+}
+
+.text-info {
+  color: var(--info);
+}
+
+.bg-success {
+  background: var(--success);
+}
+
+.bg-warning {
+  background: var(--warning);
+}
+
+.bg-danger {
+  background: var(--danger);
+}
+
+.bg-info {
+  background: var(--info);
+}
+
+.border {
+  border: 1px solid var(--border);
+}
+
+.border-subtle {
+  border: 1px solid var(--border-subtle);
+}
+
+.border-strong {
+  border: 1px solid var(--border-strong);
+}
+
+.bt {
+  border-top: 1px solid var(--border);
+}
+
+.br {
+  border-right: 1px solid var(--border);
+}
+
+.bb {
+  border-bottom: 1px solid var(--border);
+}
+
+.bl {
+  border-left: 1px solid var(--border);
+}
+
+.bt-str {
+  border-top: 1px solid var(--border-strong);
+}
+
+.br-str {
+  border-right: 1px solid var(--border-strong);
+}
+
+.bb-str {
+  border-bottom: 1px solid var(--border-strong);
+}
+
+.bl-str {
+  border-left: 1px solid var(--border-strong);
+}
+
+.bt-sub {
+  border-top: 1px solid var(--border-subtle);
+}
+
+.br-sub {
+  border-right: 1px solid var(--border-subtle);
+}
+
+.bb-sub {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.bl-sub {
+  border-left: 1px solid var(--border-subtle);
+}
+
+.shadow-xs {
+  box-shadow: var(--shadow-xs);
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.shadow-bs {
+  box-shadow: var(--shadow-bs);
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.shadow-xl {
+  box-shadow: var(--shadow-xl);
+}
+
+.shadow-2xl {
+  box-shadow: var(--shadow-2xl);
+}
+
+.shadow-3xl {
+  box-shadow: var(--shadow-3xl);
+}
+
+@media (max-width: 1024px) {
+  .hide-mobile {
+    display: none;
+  }
+}
+
+@media (min-width: 1025px) {
+  .hide-desktop {
+    display: none;
+  }
+}
+
+.orange1 {
+  color: var(--orangepop1);
+}
+
+.orange2 {
+  color: var(--orangepop2);
+}
+
+.orange3 {
+  color: var(--orangepop3);
+}
+
+.orange4 {
+  color: var(--orangepop4);
+}
+
+.orange5 {
+  color: var(--orangepop5);
+}
+
+.orange6 {
+  color: var(--orangepop6);
+}
+
+.site-logomotif {
+  height: 48px;
+  transform-origin: center center;
+  transition: transform 210ms var(--transin2);
+}
+.site-logomotif:hover {
+  transform: scale(1.2);
+}
+
+.logotype {
+  height: 28px;
+}
+
+.project-circle {
+  border-radius: 24px;
+  width: 16px;
+  height: 16px;
+}
+
+.mascot {
+  display: inline-block;
+  position: relative;
+  flex: none;
+  line-height: 0;
+  perspective: var(--mascot-persp, 400px);
+}
+
+.mascot-bob,
+.mascot-tilt {
+  display: block;
+}
+
+.mascot-bobs .mascot-bob {
+  animation: mascot-bob 3.6s ease-in-out infinite alternate;
+}
+
+.mascot-tilt {
+  position: relative;
+  transform: rotateX(var(--mascot-rx, 0deg)) rotateY(var(--mascot-ry, 0deg));
+  will-change: transform;
+}
+
+.mascot-base {
+  display: block;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.mascot-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.mascot-mask {
+  mask-type: alpha;
+}
+
+.mascot-pupil-l {
+  transform: translate(calc(var(--mascot-plx, 0) * 1px), calc(var(--mascot-ply, 0) * 1px));
+}
+
+.mascot-pupil-r {
+  transform: translate(calc(var(--mascot-prx, 0) * 1px), calc(var(--mascot-pry, 0) * 1px));
+}
+
+.mascot-gloss {
+  opacity: 0.42;
+  transform: translate(calc(var(--mascot-gx, 400) * 1px), calc(var(--mascot-gy, 400) * 1px));
+}
+
+.mascot-shade {
+  opacity: 0.55;
+  transform: translate(calc((1024 - var(--mascot-gx, 400)) * 1px), calc((1120 - var(--mascot-gy, 400)) * 1px));
+}
+
+.mascot-blinks .mascot-lid {
+  animation: mascot-blink 5.2s ease-in-out infinite;
+}
+
+@keyframes mascot-blink {
+  0%, 93%, 100% {
+    transform: translateY(0);
+  }
+  96% {
+    transform: translateY(232px);
+  }
+}
+@keyframes mascot-bob {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-3%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mascot-bobs .mascot-bob,
+  .mascot-blinks .mascot-lid {
+    animation: none;
+  }
+  .mascot-tilt {
+    transform: none;
+  }
+}
+.mascotgl {
+  display: inline-block;
+  position: relative;
+  flex: none;
+  line-height: 0;
+}
+
+.mascotgl-spacer {
+  display: block;
+}
+
+.mascotgl-canvas {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 160%;
+  height: 160%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0;
+}
+
+.mascotgl-ready {
+  opacity: 1;
+}
+
+.mascotgl-compact .mascotgl-canvas {
+  width: 130%;
+  height: 130%;
+}
+
+h3, h2, h1 {
+  font-weight: 600;
+}
+
+.hero-name {
+  font-weight: 800;
+  font-size: calc(var(--text-5xl) * 2);
+  letter-spacing: -0.2rem;
+}
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.accordion-item {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+}
+.accordion-item .accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  padding: 0;
+  transition: grid-template-rows var(--speed2) var(--transout1);
+}
+.accordion-item .accordion-panel {
+  overflow: hidden;
+  min-height: 0;
+}
+.accordion-item.open .accordion-content {
+  grid-template-rows: 1fr;
+  padding: var(--space-xs);
+}
+
+.accordion-trigger {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: var(--control-h-md);
+  padding: var(--space-xs);
+  font-weight: 500;
+  font-size: var(--text-sm);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  user-select: none;
+}
+.accordion-trigger:hover {
+  background: var(--bg-raised);
+}
+.accordion-trigger:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}