:root {
  --ground:#ede6e4;
  --surface:#f5f0ef;
  --card:#fff;
  --ink:#1e1a19;
  --muted:#574f4d;
  --border:#dcd2cf;
  --border-focus:#a0472e;
  --accent:#a0472e;
  --accent-soft:#f3e6e2;

  --ground-dark:#1e1a19;
  --surface-dark:#2a2423;
  --card-dark:#25201f;
  --ink-inverse:#f5f0ef;
  --muted-inverse:#a89e9b;
  --border-dark:#3e3634;
  --border-dark-subtle:#4d4441;

  --niju-00e:"Syne", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --niju-41a:"Archivo", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --niju-750:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --step--2:clamp(0.70rem, 0.68rem + 0.10vw, 0.78rem);
  --step--1:clamp(0.82rem, 0.79rem + 0.16vw, 0.94rem);
  --niju-0c8:clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
  --niju-6e7:clamp(1.18rem, 1.10rem + 0.40vw, 1.44rem);
  --niju-f3b:clamp(1.42rem, 1.28rem + 0.65vw, 1.84rem);
  --niju-434:clamp(1.72rem, 1.50rem + 1.10vw, 2.36rem);
  --niju-57d:clamp(2.10rem, 1.78rem + 1.60vw, 3.02rem);
  --niju-4c2:clamp(2.58rem, 2.12rem + 2.30vw, 3.92rem);
  --niju-d6f:clamp(3.20rem, 2.50rem + 3.50vw, 5.10rem);

  --space-3xs:clamp(0.25rem, 0.23rem + 0.10vw, 0.35rem);
  --space-2xs:clamp(0.50rem, 0.45rem + 0.25vw, 0.70rem);
  --space-xs:clamp(0.75rem, 0.70rem + 0.25vw, 0.95rem);
  --space-sm:clamp(1.00rem, 0.92rem + 0.40vw, 1.30rem);
  --space-md:clamp(1.00rem, 0.85rem + 0.75vw, 2.00rem);
  --space-lg:clamp(2.00rem, 1.75rem + 1.25vw, 3.00rem);
  --space-xl:clamp(3.00rem, 2.50rem + 2.50vw, 4.50rem);
  --space-2xl:clamp(4.00rem, 3.25rem + 3.75vw, 6.00rem);
  --space-3xl:clamp(5.25rem, 4.25rem + 5.00vw, 8.25rem);

  --sidebar-width:290px;

  --content-max-width:1080px;
  --reading-measure:68ch;
  --header-mobile-height:64px;

  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-full:9999px;

  --shadow-subtle:0 1px 3px rgba(30, 26, 25, 0.05);
  --shadow-elevation:0 4px 16px rgba(30, 26, 25, 0.08);
  --shadow-floating:0 14px 34px rgba(30, 26, 25, 0.14);

  --dur-instant:120ms;
  --dur-fast:180ms;
  --dur-normal:260ms;
  --dur-slow:420ms;
  --ease-standard:cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-out:cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:cubic-bezier(0.4, 0.0, 1, 1);
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-sidebar:100;
  --z-mobile-header:110;
  --z-modal:200;
  --z-banner:300;
  --z-chat:400;
  --z-skip:999;
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

* {
  margin:0;
  padding:0;
}

html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  background-color:var(--ground);
}

body {
  min-height:100vh;
  background-color:var(--ground);
  color:var(--ink);
  font-family:var(--niju-41a);
  font-size:var(--niju-0c8);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

input,
button,
textarea,
select {
  font:inherit;
  color:inherit;
}

img,
picture,
video,
canvas,
svg {
  display:block;
  max-width:100%;
  height:auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap:break-word;
}

a[href^='tel:'],
a[href^="mailto:"] {
  white-space:nowrap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:var(--niju-00e);
  color:var(--ink);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.025em;
}

h1 {
  font-size:var(--niju-4c2);
  line-height:1.08;
  letter-spacing:-0.035em;
  font-weight:800;
}

h2 {
  font-size:var(--niju-434);
  line-height:1.18;
  letter-spacing:-0.028em;
  font-weight:700;
}

h3 {
  font-size:var(--niju-f3b);
  line-height:1.25;
  letter-spacing:-0.02em;
  font-weight:700;
}

h4 {
  font-size:var(--niju-6e7);
  line-height:1.32;
  letter-spacing:-0.015em;
  font-weight:600;
}

h5 {
  font-size:var(--niju-0c8);
  line-height:1.4;
  font-weight:600;
}

h6 {
  font-size:var(--step--1);
  line-height:1.45;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

p {

  margin-block-end:var(--space-sm);
  color:var(--ink);
}

p:last-child {
  margin-block-end:0;
}

small {
  font-size:var(--step--1);
  color:var(--muted);
}

code,
kbd,
samp,
pre {
  font-family:var(--niju-750);
  font-size:0.9em;
}

code {
  background-color:var(--accent-soft);
  color:var(--ink);
  padding:0.15em 0.4em;
  border-radius:var(--radius-xs);
  border:1px solid var(--border);
}

pre {
  background-color:var(--ground-dark);
  color:var(--ink-inverse);
  padding:var(--space-md);
  border-radius:var(--radius-md);
  overflow-x:auto;
  border:1px solid var(--border-dark);
  line-height:1.5;
}

pre code {
  background-color:transparent;
  color:inherit;
  padding:0;
  border:none;
}

blockquote {
  margin-block:var(--space-md);
  padding-inline-start:var(--space-md);
  border-inline-start:3px solid var(--accent);
  font-style:normal;
  color:var(--ink);
}

blockquote cite {
  display:block;
  font-family:var(--niju-750);
  font-size:var(--step--1);
  color:var(--muted);
  margin-block-start:var(--space-xs);
  font-style:normal;
}

ul,
ol {
  padding-inline-start:1.4em;
  margin-block-end:var(--space-sm);
}

li {
  margin-block-end:var(--space-2xs);
}

li:last-child {
  margin-block-end:0;
}

a {
  color:var(--ink);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color:var(--accent);
}

a:focus-visible {
  outline:2px solid var(--border-focus);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}

hr {
  border:none;
  border-block-start:1px solid var(--border);
  margin-block:var(--space-lg);
}

mark {
  background-color:var(--accent-soft);
  color:var(--ink);
  padding-inline:0.25em;
  border-radius:var(--radius-xs);
}

.skip-link {
  position:absolute;
  top:-100px;
  left:var(--space-sm);
  background-color:var(--ink);
  color:var(--ground);
  padding:var(--space-xs) var(--space-md);
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:var(--step--1);
  z-index:var(--z-skip);
  text-decoration:none;
  transition:top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top:var(--space-sm);
}

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

}

.shell-layout {
  display:flex;
  min-height:100vh;
  background-color:var(--ground);
  position:relative;
  width:100%;
}

.stage-container {
  flex:1 1 0%;
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
}

.stage-main {
  flex:1 0 auto;
  min-width:0;
  max-width:100%;
}

.measure-text {
  max-width:var(--reading-measure);
}

.stack {
  display:flex;
  flex-direction:column;
}

.stack-xs > * + * {
  margin-block-start:var(--space-xs);
}

.stack-sm > * + * {
  margin-block-start:var(--space-sm);
}

.stack-md > * + * {
  margin-block-start:var(--space-md);
}

.stack-lg > * + * {
  margin-block-start:var(--space-lg);
}

.stack-xl > * + * {
  margin-block-start:var(--space-xl);
}

.cluster {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs);
  align-items:center;
}

.cluster-sm {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2xs);
  align-items:center;
}

.cluster-md {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  align-items:center;
}

.split {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-sm);
}

.grid-auto {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:var(--space-md);
}

.icon {
  display:inline-block;
  width:1.15em;
  height:1.15em;
  vertical-align:-0.18em;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

.display-title {
  font-family:var(--niju-00e);
  font-size:var(--niju-d6f);
  line-height:1.05;
  letter-spacing:-0.04em;
  font-weight:800;
  color:var(--ink);
}

.display-subtitle {
  font-family:var(--niju-41a);
  font-size:var(--niju-6e7);
  line-height:1.5;
  color:var(--muted);
}

.font-mono {
  font-family:var(--niju-750);
}

.font-display {
  font-family:var(--niju-00e);
}

.font-body {
  font-family:var(--niju-41a);
}

.text-accent {
  color:var(--accent);
}

.text-muted {
  color:var(--muted);
}

.bg-surface {
  background-color:var(--surface);
}

.bg-card {
  background-color:var(--card);
}

@media (min-width: 1024px) {
  body.shell-layout {
    display:flex;
    flex-direction:row;
    padding-inline-start:var(--sidebar-width);
  }
  header.mobile-header {
    display:none !important;
  }
}

@media (max-width: 1023px) {
  body.shell-layout {
    display:block !important;
    width:100%;
    min-width:0;
    padding-inline-start:0 !important;
  }
  .stage-container {
    width:100%;
    min-width:0;
    max-width:100%;
    display:block;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}