/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}


/* ======================================================================
   SOFTWARE · Design system · Retro Neumorphism · Model 01 · MMXXVI
   Single source of truth for tokens, fonts, and shared (pf-) chrome.
   Consumed by: index.html · latent_space_learning_product.html ·
   insideatransformer.html · insideasnn.html · 404.html
   Physics: one light source top-left · raised = interactive ·
   flat panel = reading · pressed inverts to inset.
   ====================================================================== */

/* ---- Fonts (self-hosted, OFL) ---- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-500.woff2") format("woff2");
  size-adjust: 109.6903%;
  ascent-override: 89.7072%;
  descent-override: 26.6204%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-grotesk-700.woff2") format("woff2");
  size-adjust: 109.6903%;
  ascent-override: 89.7072%;
  descent-override: 26.6204%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/newsreader-300.woff2") format("woff2");
  size-adjust: 96.1192%;
  ascent-override: 76.4676%;
  descent-override: 27.5699%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/newsreader-300-italic.woff2") format("woff2");
  size-adjust: 96.1192%;
  ascent-override: 76.4676%;
  descent-override: 27.5699%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/newsreader-400.woff2") format("woff2");
  size-adjust: 96.1192%;
  ascent-override: 76.4676%;
  descent-override: 27.5699%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400.woff2") format("woff2");
  size-adjust: 101.9834%;
  ascent-override: 109.8218%;
  descent-override: 35.3979%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700.woff2") format("woff2");
  size-adjust: 101.9834%;
  ascent-override: 109.8218%;
  descent-override: 35.3979%;
  line-gap-override: 0%;
}

@view-transition {
  navigation: auto;
}

/* ---- Tokens ---- */
:root {
  color-scheme: light;
  /* Warm Harvest palette, ground truth: Software Theme Spec - Standalone.html */
  --base: #E2DCCE;
  --shadow-lo: #C0B9A6;
  --shadow-hi: #F5F0E4;
  --panel: #EBE6DA;
  --signal: #C86A38;
  --signal-deep: #8C4A1F;
  --signal-bright: #F0B689;
  --support: #4E7C74;
  --support-deep: #365D57;
  --ink: #3B372E;
  --muted: #8B8471;
  --muted-text: #5F584B;

  /* Surfaces mold with flat base + shadows, no gradients */
  --grad-raised: #E2DCCE;
  --grad-inset: #E2DCCE;

  /* Elevation recipes: contact shadow + soft dual shadow */
  --raised:
    1px 1px 2px rgba(163, 156, 138, .5),
    8px 8px 18px var(--shadow-lo),
    -8px -8px 18px var(--shadow-hi);
  --raised-deep:
    2px 2px 4px rgba(163, 156, 138, .55),
    12px 12px 26px rgba(192, 185, 166, .95),
    -12px -12px 26px rgba(245, 240, 228, .95);
  --inset:
    inset 8px 8px 18px var(--shadow-lo),
    inset -8px -8px 18px var(--shadow-hi);
  --low:
    1px 1px 1px rgba(163, 156, 138, .45),
    3px 3px 7px var(--shadow-lo),
    -3px -3px 7px var(--shadow-hi);
  --low-inset:
    inset 3px 3px 7px var(--shadow-lo),
    inset -3px -3px 7px var(--shadow-hi);

  /* Inset recipes for ink-colored wells: same offsets and light direction,
     opacities tuned for dark surfaces */
  --dark-inset:
    inset 8px 8px 18px rgba(0, 0, 0, .28),
    inset -8px -8px 18px rgba(245, 240, 228, .12);
  --dark-low-inset:
    inset 3px 3px 7px rgba(0, 0, 0, .28),
    inset -3px -3px 7px rgba(245, 240, 228, .12);

  /* Pressed states on colored fills self-shadow in their own hue */
  --inset-signal:
    inset 4px 4px 9px #5F3315,
    inset -4px -4px 9px #B4682F;
  --inset-support:
    inset 4px 4px 9px #35564F,
    inset -4px -4px 9px #6A9A90;

  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* Responsive */
  --touch-min: 44px;
}

/* ---- Base ---- */
html {
  min-width: 320px;
  background: var(--base);
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--panel);
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--panel);
}

::-webkit-scrollbar-thumb {
  border: 3px solid var(--panel);
  border-radius: 999px;
  background: var(--base);
}

::selection {
  background: var(--signal);
  color: var(--shadow-hi);
}

a:focus-visible {
  outline: 2px solid var(--signal-deep);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---- Reusable surfaces ---- */
.pf-surface {
  border-radius: var(--radius-lg);
  background: var(--grad-raised);
  box-shadow: var(--raised);
}

.pf-well {
  background: var(--grad-inset);
  box-shadow: var(--inset);
}

/* ---- Skip link ---- */
.pf-skip {
  position: absolute;
  top: 16px;
  left: -9999px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  background: var(--grad-raised);
  box-shadow: var(--low);
  font-family: "Space Grotesk", sans-serif;
  font-size: .73rem;
  font-weight: 700;
}

.pf-skip:focus {
  left: 16px;
}

/* ---- Shared chrome (pf-) ----
   Scoped pf tokens insulate the chrome from per-page token drift. */
.pf-topbar, .pf-crumbs, .pf-author, .pf-pagenav, .pf-footer {
  --pf-base: #E2DCCE;
  --pf-shadow-lo: #C0B9A6;
  --pf-shadow-hi: #F5F0E4;
  --pf-panel: #EBE6DA;
  --pf-signal: #C86A38;
  --pf-signal-deep: #8C4A1F;
  --pf-support: #4E7C74;
  --pf-ink: #3B372E;
  --pf-muted: #8B8471;
  --pf-muted-text: #5F584B;
  --pf-grad-raised: #E2DCCE;
  --pf-grad-inset: #E2DCCE;
  --pf-raised:
    1px 1px 2px rgba(163, 156, 138, .5),
    8px 8px 18px var(--pf-shadow-lo),
    -8px -8px 18px var(--pf-shadow-hi);
  --pf-low:
    1px 1px 1px rgba(163, 156, 138, .45),
    3px 3px 7px var(--pf-shadow-lo),
    -3px -3px 7px var(--pf-shadow-hi);
  --pf-low-inset:
    inset 3px 3px 7px var(--pf-shadow-lo),
    inset -3px -3px 7px var(--pf-shadow-hi);
  --pf-ease: cubic-bezier(.2, 0, 0, 1);
  --pf-touch-min: 44px;
}

.pf-topbar {
  display: flex;
  min-height: 64px;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.pf-brand {
  display: inline-flex;
  min-width: 0;
  gap: 13px;
  align-items: center;
  color: var(--pf-ink);
  text-decoration: none;
}

.pf-brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--pf-grad-raised);
  box-shadow: var(--pf-low);
}

.pf-brand-mark::before {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(59, 55, 46, .48);
  border-radius: 50%;
  content: "";
  box-shadow: var(--pf-low-inset);
}

.pf-brand-mark::after {
  position: absolute;
  top: 17px;
  left: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  content: "";
  background: var(--pf-signal);
  box-shadow:
    8px -4px 0 -2px var(--pf-support),
    -6px 8px 0 -2px var(--pf-muted);
}

.pf-brand-title {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: -.035em;
}

.pf-brand-subtitle {
  display: block;
  margin-top: 3px;
  color: var(--pf-muted-text);
  font-family: "Space Mono", monospace;
  font-size: .59rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pf-topbar-controls {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.pf-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 12px 4px 0;
  color: var(--pf-muted-text);
  font-family: "Space Mono", monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pf-crumbs a {
  color: var(--pf-muted-text);
  text-decoration: none;
  transition: color 140ms var(--pf-ease);
}

.pf-crumbs a:hover {
  color: var(--pf-signal-deep);
}

.pf-crumbs [aria-current] {
  color: var(--pf-ink);
}

.pf-author {
  margin-top: 26px;
  padding: 12px;
  border-radius: 22px;
  background: var(--pf-grad-raised);
  box-shadow: var(--pf-raised);
}

.pf-author-panel {
  padding: 20px;
  border-radius: 14px;
  background: var(--pf-panel);
}

.pf-author-panel p {
  margin: 0 0 16px;
  color: var(--pf-ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.55;
}

.pf-author-panel strong {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -.02em;
}

.pf-author-panel a {
  color: var(--pf-signal-deep);
}

.pf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.pf-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 12px;
  color: var(--pf-ink, var(--ink));
  text-decoration: none;
  background: var(--grad-raised);
  box-shadow: var(--low);
  font-family: "Space Grotesk", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  transition:
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease),
    color 140ms var(--ease),
    background 140ms var(--ease);
}

.pf-chip:hover {
  transform: translateY(-2px);
  color: var(--signal-deep);
  box-shadow:
    1px 1px 2px rgba(163, 156, 138, .5),
    5px 5px 10px var(--shadow-lo),
    -5px -5px 10px var(--shadow-hi);
}

.pf-chip:active {
  transform: translateY(1px);
  background: var(--grad-inset);
  box-shadow: var(--low-inset);
  transition-duration: 140ms;
}

.pf-tbd {
  color: var(--muted-text);
  cursor: default;
  background: transparent;
  box-shadow: none;
  outline: 1px dashed rgba(59, 55, 46, .35);
  outline-offset: -1px;
}

.pf-tbd::after {
  content: "soon";
  margin-left: 9px;
  color: var(--support-deep);
  font-family: "Space Mono", monospace;
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pf-tbd:hover {
  transform: none;
  color: var(--muted-text);
  background: transparent;
  box-shadow: none;
}

.pf-pagenav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 10px 4px;
  color: var(--pf-muted-text);
  font-family: "Space Mono", monospace;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pf-pagenav a {
  color: var(--pf-signal-deep);
  text-decoration: none;
}

.pf-pagenav a:hover {
  text-decoration: underline;
}

.pf-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 22px 4px 0;
  color: var(--pf-muted-text);
  font-family: "Space Mono", monospace;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pf-topbar a:focus-visible,
.pf-crumbs a:focus-visible,
.pf-author a:focus-visible,
.pf-pagenav a:focus-visible,
.pf-skip:focus-visible {
  outline: 2px solid var(--pf-signal-deep, var(--signal-deep));
  outline-offset: 4px;
  border-radius: 6px;
}

@media (hover: none) {
  .pf-chip:hover {
    transform: none;
  }
}

@media (max-width: 680px) {
  .pf-topbar {
    gap: 12px;
  }

  .pf-brand-subtitle {
    display: none;
  }

  .pf-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* Chrome adaptations at phone-portrait sizes. See spec §3. */
  .pf-topbar {
    min-height: 56px;
  }

  .pf-topbar-controls > * {
    flex-basis: auto;
  }

  .pf-topbar-controls > *:only-child {
    flex-basis: 100%;
  }

  .pf-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .pf-brand-mark::before {
    inset: 8px;
  }

  .pf-brand-mark::after {
    top: 15px;
    left: 15px;
    width: 7px;
    height: 7px;
  }

  .pf-chip,
  .pf-tbd {
    min-height: var(--pf-touch-min);
    padding: 10px 14px;
  }

  .pf-pagenav {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-pagenav a {
    min-height: var(--pf-touch-min);
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
  }
}

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