@font-face{
  font-family: "Arimo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/arimo-latin.woff2") format("woff2");
}
@font-face{
  font-family: "Arimo";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/arimo-latin-italic.woff2") format("woff2");
}
@font-face{
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/gelasio-latin.woff2") format("woff2");
}
@font-face{
  font-family: "Gelasio";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/gelasio-latin-italic.woff2") format("woff2");
}
@font-face{
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/ebgaramond-latin.woff2") format("woff2");
}
@font-face{
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/ebgaramond-latin-italic.woff2") format("woff2");
}

/*
  // Basic usage in components:

  .component-title {
    @include heading-2;
  }

  .sidebar-label {
    @include label-text;
  }

  .button {
    @include button-text;
  }

  // With additional styles:

  .special-heading {
    @include heading-1;
    @include text-center;
    color: accent-colour();
  }
*/
:root {
  /* Accent blue */
  --accent-h: 210;
  --accent-s: 90%;
  --accent-l-100: 42%; /* default buttons, links */
  --accent-l-80: 55%; /* locked-in word count */
  --accent-l-60: 68%; /* hover/tabs */
  --accent-l-40: 82%; /* backgrounds, ribbons */
  --accent-l-20: 93%; /* pills, subtle fills */
  --accent-100: hsl(var(--accent-h) var(--accent-s) var(--accent-l-100));
  --accent-80: hsl(var(--accent-h) 70% var(--accent-l-80 ));
  --accent-60: hsl(var(--accent-h) 55% var(--accent-l-60 ));
  --accent-40: hsl(var(--accent-h) 45% var(--accent-l-40 ));
  --accent-20: hsl(var(--accent-h) 40% var(--accent-l-20 ));
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l-80));
  --accent-tint: hsl(var(--accent-h) 40% 92%); /* light tinted background */
  --accent-light: hsl(var(--accent-h) 80% 70%);
  /* Bonus (amber) */
  --bonus-h: calc(var(--accent-h) - 170);
  --bonus-s: 85%;
  --bonus-l-100: 40%;
  --bonus-l-80: 50%;
  --bonus-l-60: 60%;
  --bonus-l-40: 70%;
  --bonus-l-20: 80%;
  --bonus-100: hsl(var(--bonus-h) var(--bonus-s) var(--bonus-l-100));
  --bonus-80: hsl(var(--bonus-h) var(--bonus-s) var(--bonus-l-80));
  --bonus-60: hsl(var(--bonus-h) var(--bonus-s) var(--bonus-l-60));
  --bonus-40: hsl(var(--bonus-h) var(--bonus-s) var(--bonus-l-40));
  --bonus-20: hsl(var(--bonus-h) var(--bonus-s) var(--bonus-l-20));
  /* Success (green) */
  --success-h: 130;
  --success-s: 65%;
  --success-l-100: 35%;
  --success-l-80: 45%;
  --success-l-60: 55%;
  --success-l-40: 75%;
  --success-l-20: 90%;
  --success-100: hsl(var(--success-h) var(--success-s) var(--success-l-100));
  --success-80: hsl(var(--success-h) var(--success-s) var(--success-l-80));
  --success-60: hsl(var(--success-h) var(--success-s) var(--success-l-60));
  --success-40: hsl(var(--success-h) var(--success-s) var(--success-l-40));
  --success-20: hsl(var(--success-h) var(--success-s) var(--success-l-20));
  /* Workspace base colours */
  --base-main: hsl(40 20% 94%);
  --base-launch: hsl(120 20% 94%);
  --base-outline-tool: hsl(260 20% 94%);
  --base-settings: hsl(240 20% 94%);
  --base-archive: hsl(0 20% 89%);
  --base-challenges: hsl(130 25% 94%);
  --base-manage-project: hsl(30 25% 94%);
  --base-help: hsl(200 20% 94%);
  /* Greys (paper-inspired) */
  --text-1: hsl(0 0% 15%);
  --text-2: hsl(0 0% 45%);
  --surface: hsl(40 15% 98%);
  --surface-dim: hsl(40 10% 91%); /* shadowed / inactive paper */
  --surface-edge: hsl(40 10% 80%); /* cut edge border */
  --hover-overlay: hsl(0 0% 0% / 0.05); /* hover state overlay */
  /* Shadows (for elevation system) */
  --shadow-highlight: rgba(255, 255, 255, 0.6);
  --shadow-highlight-strong: rgba(255, 255, 255, 0.35);
  --shadow-dark: rgba(0, 0, 0, 0.12);
  --shadow-dark-subtle: rgba(0, 0, 0, 0.05);
  --shadow-ambient: rgba(0, 0, 0, 0.06);
  /* Typography Tokens - Hybrid Typography System */
  /* Font Families (bundled for cross-platform consistency) */
  --font-editor: 'EB Garamond', Georgia, serif;
  --font-heading: 'Gelasio', Georgia, serif;
  --font-ui: 'Arimo', system-ui, sans-serif;
  /* Font Weights (slightly heavier for better readability) */
  --font-weight-normal: 450;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  /* Typography Scale (8px baseline grid) */
  --type-heading-1: 2rem; /* 32px */
  --type-heading-2: 1.5rem; /* 24px */
  --type-heading-3: 1.25rem; /* 20px */
  --type-body: 1rem; /* 16px */
  --type-label: 0.875rem; /* 14px */
  --type-caption: 0.75rem; /* 12px */
  /* Paper Textures */
  --texture-fine: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  --texture-rough: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E");
  /* Tabs */
  --tab-height: 1.75rem;
  --tab-pad-x: 0.75rem;
  --tab-radius: 3px 3px 0 0;
  --tab-gap: 0.25rem;
  --tab-seam: rgba(0 0 0 / 0.09);
  --tab-shadow: 0 0.5px 1px rgba(0 0 0 / 0.12);
  --tab-bg: var(--surface) var(--texture-fine);
  /* Editor Appearance Settings */
  --font-editor: 'EB Garamond', serif;
  --editor-font-size: 16px;
  --editor-line-height: 1.6;
  /* Draft Colors (Light Mode) */
  --draft-base-s: 55%;
  --draft-base-l: 88%;
  --draft-light-s: 50%;
  --draft-light-l: 92%;
  --draft-dark-s: 60%;
  --draft-dark-l: 70%;
  /* Text in the draft's colour (progress-bar counts): the dark tone reads
     fine on light paper */
  --draft-text-s: 60%;
  --draft-text-l: 70%;
  /* Inkblot washes behind the draft headers: the light tone is too pale
     on light paper, so sit between it and the progress-bar tones */
  --draft-blot-s: 60%;
  --draft-blot-l: 78%;
  /* Words past the target on progress bars: deeper and far more saturated
     than the pastel fills, so the overshoot reads as the same draft, emphasised */
  --draft-over-s: 100%;
  --draft-over-l: 30%;
  --draft-0-base: hsl(270 55% 88%); /* Purple */
  --draft-0-light: hsl(270 50% 92%);
  --draft-0-dark: hsl(270 60% 70%);
  --draft-1-base: hsl(180 55% 88%); /* Cyan */
  --draft-1-light: hsl(180 50% 92%);
  --draft-1-dark: hsl(180 60% 70%);
  --draft-2-base: hsl(140 55% 88%); /* Green */
  --draft-2-light: hsl(140 50% 92%);
  --draft-2-dark: hsl(140 60% 70%);
  --draft-3-base: hsl(350 55% 88%); /* Pink */
  --draft-3-light: hsl(350 50% 92%);
  --draft-3-dark: hsl(350 60% 70%);
  --draft-4-base: hsl(320 55% 88%); /* Magenta */
  --draft-4-light: hsl(320 50% 92%);
  --draft-4-dark: hsl(320 60% 70%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    /* Dark Mode: Accent blue (increased lightness for dark backgrounds) */
    --accent-l-100: 65%; /* default buttons, links */
    --accent-l-80: 72%; /* locked-in word count */
    --accent-l-60: 78%; /* hover/tabs */
    --accent-l-40: 45%; /* backgrounds, ribbons */
    --accent-l-20: 35%; /* pills, subtle fills */
    --accent-tint: hsl(var(--accent-h) 40% 20%); /* dark tinted background */
    --accent-light: hsl(var(--accent-h) 70% 75%); /* lighter accent for dark mode */
    /* Dark Mode: Bonus amber */
    --bonus-l-100: 60%;
    --bonus-l-80: 67%;
    --bonus-l-60: 73%;
    --bonus-l-40: 55%;
    --bonus-l-20: 45%;
    /* Dark Mode: Success green */
    --success-l-100: 60%;
    --success-l-80: 52%;
    --success-l-60: 43%;
    --success-l-40: 35%;
    --success-l-20: 25%;
    /* Dark Mode: Workspace base colours */
    --base-main: hsl(40 10% 12%);
    --base-launch: hsl(120 10% 12%);
    --base-outline-tool: hsl(260 10% 12%);
    --base-settings: hsl(240 10% 12%);
    --base-archive: hsl(0 10% 12%);
    --base-challenges: hsl(130 15% 12%);
    --base-manage-project: hsl(30 15% 12%);
    --base-help: hsl(200 12% 12%);
    /* Dark Mode: Greys (warm dark paper aesthetic) */
    --text-1: hsl(40 20% 92%); /* high contrast body text */
    --text-2: hsl(40 12% 78%); /* medium contrast secondary text */
    --surface: hsl(40 10% 16%); /* cards and elevated surfaces */
    --surface-dim: hsl(40 8% 13%); /* shadowed / inactive paper */
    --surface-edge: hsl(40 8% 28%); /* borders and edges */
    --hover-overlay: hsl(0 0% 100% / 0.08); /* hover state overlay (lighter for dark mode) */
    /* Dark Mode: Shadows (subtle highlights instead of heavy shadows) */
    --shadow-highlight: rgba(255, 255, 255, 0.1);
    --shadow-highlight-strong: rgba(255, 255, 255, 0.08);
    --shadow-dark: rgba(0, 0, 0, 0.4);
    --shadow-dark-subtle: rgba(0, 0, 0, 0.3);
    --shadow-ambient: rgba(0, 0, 0, 0.3);
    /* Dark Mode: Tab styling adjustments */
    --tab-seam: rgba(0 0 0 / 0.3);
    --tab-shadow: 0 0.5px 1px rgba(0 0 0 / 0.5);
    /* Dark Mode: Paper Textures (reduced opacity for subtlety) */
    --texture-fine: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    --texture-rough: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
    /* Dark Mode: Draft Colors */
    --draft-base-s: 40%;
    --draft-base-l: 25%;
    --draft-light-s: 40%;
    --draft-light-l: 30%;
    --draft-dark-s: 50%;
    --draft-dark-l: 20%;
    /* Text in the draft's colour (progress-bar counts): the dark tone is far
       too dark to read on dark paper, so lift it well clear of the surface */
    --draft-text-s: 55%;
    --draft-text-l: 65%;
    /* Inkblot washes behind the draft headers: same as the light tone, which
       already reads vividly against dark surfaces */
    --draft-blot-s: 40%;
    --draft-blot-l: 30%;
    /* Words past the target on progress bars: deeper and far more saturated
       than the fills, so the overshoot reads as the same draft, emphasised */
    --draft-over-s: 100%;
    --draft-over-l: 12%;
    --draft-0-base: hsl(270 40% 25%);
    --draft-0-light: hsl(270 40% 30%);
    --draft-0-dark: hsl(270 50% 20%);
    --draft-1-base: hsl(180 40% 25%);
    --draft-1-light: hsl(180 40% 30%);
    --draft-1-dark: hsl(180 50% 20%);
    --draft-2-base: hsl(140 40% 25%);
    --draft-2-light: hsl(140 40% 30%);
    --draft-2-dark: hsl(140 50% 20%);
    --draft-3-base: hsl(350 40% 25%);
    --draft-3-light: hsl(350 40% 30%);
    --draft-3-dark: hsl(350 50% 20%);
    --draft-4-base: hsl(320 40% 25%);
    --draft-4-light: hsl(320 40% 30%);
    --draft-4-dark: hsl(320 50% 20%);
  }
}
:root[data-theme=dark] {
  /* Dark Mode: Accent blue (increased lightness for dark backgrounds) */
  --accent-l-100: 65%; /* default buttons, links */
  --accent-l-80: 72%; /* locked-in word count */
  --accent-l-60: 78%; /* hover/tabs */
  --accent-l-40: 45%; /* backgrounds, ribbons */
  --accent-l-20: 35%; /* pills, subtle fills */
  --accent-tint: hsl(var(--accent-h) 40% 20%); /* dark tinted background */
  --accent-light: hsl(var(--accent-h) 70% 75%); /* lighter accent for dark mode */
  /* Dark Mode: Bonus amber */
  --bonus-l-100: 60%;
  --bonus-l-80: 67%;
  --bonus-l-60: 73%;
  --bonus-l-40: 55%;
  --bonus-l-20: 45%;
  /* Dark Mode: Success green */
  --success-l-100: 60%;
  --success-l-80: 52%;
  --success-l-60: 43%;
  --success-l-40: 35%;
  --success-l-20: 25%;
  /* Dark Mode: Workspace base colours */
  --base-main: hsl(40 10% 12%);
  --base-launch: hsl(120 10% 12%);
  --base-outline-tool: hsl(260 10% 12%);
  --base-settings: hsl(240 10% 12%);
  --base-archive: hsl(0 10% 12%);
  --base-challenges: hsl(130 15% 12%);
  --base-manage-project: hsl(30 15% 12%);
  --base-help: hsl(200 12% 12%);
  /* Dark Mode: Greys (warm dark paper aesthetic) */
  --text-1: hsl(40 20% 92%); /* high contrast body text */
  --text-2: hsl(40 12% 78%); /* medium contrast secondary text */
  --surface: hsl(40 10% 16%); /* cards and elevated surfaces */
  --surface-dim: hsl(40 8% 13%); /* shadowed / inactive paper */
  --surface-edge: hsl(40 8% 28%); /* borders and edges */
  --hover-overlay: hsl(0 0% 100% / 0.08); /* hover state overlay (lighter for dark mode) */
  /* Dark Mode: Shadows (subtle highlights instead of heavy shadows) */
  --shadow-highlight: rgba(255, 255, 255, 0.1);
  --shadow-highlight-strong: rgba(255, 255, 255, 0.08);
  --shadow-dark: rgba(0, 0, 0, 0.4);
  --shadow-dark-subtle: rgba(0, 0, 0, 0.3);
  --shadow-ambient: rgba(0, 0, 0, 0.3);
  /* Dark Mode: Tab styling adjustments */
  --tab-seam: rgba(0 0 0 / 0.3);
  --tab-shadow: 0 0.5px 1px rgba(0 0 0 / 0.5);
  /* Dark Mode: Paper Textures (reduced opacity for subtlety) */
  --texture-fine: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  --texture-rough: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
  /* Dark Mode: Draft Colors */
  --draft-base-s: 40%;
  --draft-base-l: 25%;
  --draft-light-s: 40%;
  --draft-light-l: 30%;
  --draft-dark-s: 50%;
  --draft-dark-l: 20%;
  /* Text in the draft's colour (progress-bar counts): the dark tone is far
     too dark to read on dark paper, so lift it well clear of the surface */
  --draft-text-s: 55%;
  --draft-text-l: 65%;
  /* Inkblot washes behind the draft headers: same as the light tone, which
     already reads vividly against dark surfaces */
  --draft-blot-s: 40%;
  --draft-blot-l: 30%;
  /* Words past the target on progress bars: deeper and far more saturated
     than the fills, so the overshoot reads as the same draft, emphasised */
  --draft-over-s: 100%;
  --draft-over-l: 12%;
  --draft-0-base: hsl(270 40% 25%);
  --draft-0-light: hsl(270 40% 30%);
  --draft-0-dark: hsl(270 50% 20%);
  --draft-1-base: hsl(180 40% 25%);
  --draft-1-light: hsl(180 40% 30%);
  --draft-1-dark: hsl(180 50% 20%);
  --draft-2-base: hsl(140 40% 25%);
  --draft-2-light: hsl(140 40% 30%);
  --draft-2-dark: hsl(140 50% 20%);
  --draft-3-base: hsl(350 40% 25%);
  --draft-3-light: hsl(350 40% 30%);
  --draft-3-dark: hsl(350 50% 20%);
  --draft-4-base: hsl(320 40% 25%);
  --draft-4-light: hsl(320 40% 30%);
  --draft-4-dark: hsl(320 50% 20%);
}

:root {
  color: var(--text-1);
}
:root h1 {
  font: 500 var(--type-heading-1)/1.25 var(--font-heading);
  letter-spacing: -0.025em;
  color: var(--text-1);
}
:root h2 {
  font: 500 var(--type-heading-2)/1.25 var(--font-heading);
  letter-spacing: -0.015em;
  color: var(--text-1);
}
:root h3 {
  font: 500 var(--type-heading-3)/1.25 var(--font-heading);
  letter-spacing: -0.01em;
  color: var(--text-1);
}
:root h4 {
  font: 500 var(--type-label)/1.25 var(--font-heading);
  letter-spacing: -0.005em;
  color: var(--text-1);
}
:root p {
  font: 450 var(--type-body)/1.5 var(--font-ui);
  letter-spacing: 0;
  color: var(--text-1);
}
:root label {
  font: 500 var(--type-label)/1.25 var(--font-ui);
  letter-spacing: 0.025em;
  color: var(--text-1);
}
:root caption {
  font: 450 var(--type-caption)/1.4 var(--font-ui);
  letter-spacing: 0.015em;
  color: var(--text-1);
}
:root small {
  font: 450 var(--type-caption)/1.4 var(--font-ui);
  letter-spacing: 0.015em;
  color: var(--text-1);
}
:root nav {
  font: 500 var(--type-body)/1.25 var(--font-ui);
  letter-spacing: 0.01em;
  color: var(--text-1);
}
:root button {
  font: 500 var(--type-label)/1.25 var(--font-ui);
  letter-spacing: 0.025em;
  color: var(--text-1);
}
:root form-label {
  font: 500 var(--type-label)/1.25 var(--font-ui);
  letter-spacing: 0.025em;
  color: var(--text-1);
}

.fade-vertical-outer {
  position: relative;
  width: 100%;
  height: 100%;
}
.fade-vertical-outer::before, .fade-vertical-outer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2rem;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 150ms ease-out;
}
.fade-vertical-outer::before {
  top: 0;
  background: linear-gradient(to bottom, var(--pane-surface, var(--surface)) 0%, transparent 100%);
}
.fade-vertical-outer::after {
  bottom: 0;
  background: linear-gradient(to top, var(--pane-surface, var(--surface)) 0%, transparent 100%);
}
.fade-vertical-outer.at-top::before {
  opacity: 0;
}
.fade-vertical-outer.at-bottom::after {
  opacity: 0;
}
.fade-vertical-outer .fade-vertical-inner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  bottom: 0.5rem;
}

.fade-horizontal-outer {
  position: relative;
  width: 100%;
  height: 100%;
}
.fade-horizontal-outer::before, .fade-horizontal-outer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1rem;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 150ms ease-out;
}
.fade-horizontal-outer::before {
  left: 0;
  background: linear-gradient(to right, var(--surface) 0%, transparent 100%);
}
.fade-horizontal-outer::after {
  right: 0;
  background: linear-gradient(to left, var(--surface) 0%, transparent 100%);
}
.fade-horizontal-outer.at-left::before {
  opacity: 0;
}
.fade-horizontal-outer.at-right::after {
  opacity: 0;
}
.fade-horizontal-outer .fade-horizontal-inner {
  position: absolute;
  inset: 0;
  overflow-x: auto;
}

/* Page base (from the design's <helmet>) */
body{margin:0;background:var(--base-main) var(--texture-rough);background-blend-mode:multiply;font-family:var(--font-ui);color:var(--text-1)}
a{color:var(--accent-100);text-decoration:none}
a:hover{color:var(--accent-80);text-decoration:underline}
a:focus-visible{outline:2px solid var(--accent-100);outline-offset:3px}
img{display:block;max-width:100%}