/* ==========================================================================
   Konstellation: theme tokens and atmosphere (drifting dust, grain, vignette)

   The look follows the emblem on the back of Slay the Veil: engraved silver on black,
   faceted gems, blade-edged gothic frames. The frame and gem art below is SVG
   (generated; the shapes are a double rule, sickle hooks and square-cut gems).
   ========================================================================== */

:root {
  --font-gothic: "Grenze Gotisch", "UnifrakturMaguntia", "Times New Roman", serif;
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-label: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-text: "EB Garamond", Garamond, Georgia, serif;
  --font-book: "EB Garamond", Garamond, Georgia, serif;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --font-mono: "Courier Prime", "Courier New", monospace;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --gutter: 16px;
  --topbar-h: 68px;
  --tabbar-h: 76px;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.7' intercept='-.35'/%3E%3CfeFuncG type='linear' slope='1.7' intercept='-.35'/%3E%3CfeFuncB type='linear' slope='1.7' intercept='-.35'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dark is the default: black, engraved silver, and nothing in the background but dust. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #020202;
  --bg-raise: #060606;
  --bg-haze: #101010;
  --panel: #0a0a0b;
  --panel-2: #0f0f10;
  --panel-3: #161617;
  --panel-4: #1f1f21;
  --ink: #ececec;
  --ink-2: #b6b6b6;
  --ink-3: #7b7b7b;
  --ink-4: #474747;
  --frame-hi: #d4d4d4;
  --frame-mid: #6c6c6c;
  --frame-lo: #2a2a2a;
  --line: rgba(255, 255, 255, .1);
  --page: #060606;
  --page-ink: #dcdcdc;
  --page-ink-2: #8d8d8d;
  --glow: 255, 255, 255;
  --metal: linear-gradient(180deg, #ffffff 0%, #d9d9d9 34%, #8f8f8f 52%, #e8e8e8 70%, #a8a8a8 100%);
  --metal-frame: linear-gradient(135deg, #ececec 0%, #8a8a8a 14%, #d4d4d4 28%, #474747 46%, #bebebe 62%, #545454 80%, #dedede 100%);
  --frame-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E %3Crect x='1.5' y='1.5' width='57' height='57' fill='none' stroke='%235a5a5a'/%3E %3Crect x='5.5' y='5.5' width='49' height='49' fill='none' stroke='%23262626'/%3E %3Cpath d='M11 1.5C12.5 4 14.5 5.5 18 5.5 M1.5 11C4 12.5 5.5 14.5 5.5 18 M49 1.5C47.5 4 45.5 5.5 42 5.5 M58.5 11C56 12.5 54.5 14.5 54.5 18 M11 58.5C12.5 56 14.5 54.5 18 54.5 M1.5 49C4 47.5 5.5 45.5 5.5 42 M49 58.5C47.5 56 45.5 54.5 42 54.5 M58.5 49C56 47.5 54.5 45.5 54.5 42' fill='none' stroke='%236a6a6a' stroke-width='.9' stroke-linecap='round'/%3E %3Cpath d='M5.5 1.0999999999999996L9.9 5.5L5.5 9.9L1.0999999999999996 5.5ZM54.5 1.0999999999999996L58.9 5.5L54.5 9.9L50.1 5.5ZM5.5 50.1L9.9 54.5L5.5 58.9L1.0999999999999996 54.5ZM54.5 50.1L58.9 54.5L54.5 58.9L50.1 54.5Z' fill='%23bdbdbd'/%3E %3Cpath d='M5.5 3.4L7.6 5.5L5.5 7.6L3.4 5.5ZM54.5 3.4L56.6 5.5L54.5 7.6L52.4 5.5ZM5.5 52.4L7.6 54.5L5.5 56.6L3.4 54.5ZM54.5 52.4L56.6 54.5L54.5 56.6L52.4 54.5Z' fill='%233a3a3a'/%3E %3C/svg%3E");
  --frame-art-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E %3Crect x='1.5' y='1.5' width='57' height='57' fill='none' stroke='%23a4a4a4'/%3E %3Crect x='5.5' y='5.5' width='49' height='49' fill='none' stroke='%233d3d3d'/%3E %3Cpath d='M11 1.5C12.5 4 14.5 5.5 18 5.5 M1.5 11C4 12.5 5.5 14.5 5.5 18 M49 1.5C47.5 4 45.5 5.5 42 5.5 M58.5 11C56 12.5 54.5 14.5 54.5 18 M11 58.5C12.5 56 14.5 54.5 18 54.5 M1.5 49C4 47.5 5.5 45.5 5.5 42 M49 58.5C47.5 56 45.5 54.5 42 54.5 M58.5 49C56 47.5 54.5 45.5 54.5 42' fill='none' stroke='%239a9a9a' stroke-width='.9' stroke-linecap='round'/%3E %3Cpath d='M5.5 1.0999999999999996L9.9 5.5L5.5 9.9L1.0999999999999996 5.5ZM54.5 1.0999999999999996L58.9 5.5L54.5 9.9L50.1 5.5ZM5.5 50.1L9.9 54.5L5.5 58.9L1.0999999999999996 54.5ZM54.5 50.1L58.9 54.5L54.5 58.9L50.1 54.5Z' fill='%23f2f2f2'/%3E %3Cpath d='M5.5 3.4L7.6 5.5L5.5 7.6L3.4 5.5ZM54.5 3.4L56.6 5.5L54.5 7.6L52.4 5.5ZM5.5 52.4L7.6 54.5L5.5 56.6L3.4 54.5ZM54.5 52.4L56.6 54.5L54.5 56.6L52.4 54.5Z' fill='%235a5a5a'/%3E %3C/svg%3E");
  --gem-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E %3Cpath d='M10 1 19 10 10 19 1 10Z' fill='%239c9c9c'/%3E %3Cpath d='M10 1 19 10 1 10Z' fill='%23f4f4f4'/%3E %3Cpath d='M10 5.6 14.4 10 10 14.4 5.6 10Z' fill='%233a3a3a'/%3E %3Cpath d='M10 1 19 10 10 19 1 10Z' fill='none' stroke='%23000' stroke-opacity='.6' stroke-width='.8'/%3E %3C/svg%3E");
  --dust-opacity: 1;
  --grain-opacity: .05;
  --vignette: rgba(0, 0, 0, .9);
  --shadow: 0 18px 40px rgba(0, 0, 0, .6);
  --backdrop: rgba(0, 0, 0, .88);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e6e6e6;
  --bg-raise: #ededed;
  --bg-haze: #f6f6f6;
  --panel: #f3f3f3;
  --panel-2: #ebebeb;
  --panel-3: #e0e0e0;
  --panel-4: #d4d4d4;
  --ink: #111;
  --ink-2: #3a3a3a;
  --ink-3: #6a6a6a;
  --ink-4: #a3a3a3;
  --frame-hi: #161616;
  --frame-mid: #707070;
  --frame-lo: #c4c4c4;
  --line: rgba(0, 0, 0, .14);
  --page: #f6f6f6;
  --page-ink: #151515;
  --page-ink-2: #5c5c5c;
  --glow: 255, 255, 255;
  --metal: linear-gradient(180deg, #3a3a3a 0%, #0c0c0c 45%, #2c2c2c 70%, #000 100%);
  --metal-frame: linear-gradient(135deg, #3a3a3a 0%, #9a9a9a 14%, #2a2a2a 30%, #b5b5b5 48%, #3a3a3a 66%, #8f8f8f 84%, #262626 100%);
  --frame-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E %3Crect x='1.5' y='1.5' width='57' height='57' fill='none' stroke='%23a8a8a8'/%3E %3Crect x='5.5' y='5.5' width='49' height='49' fill='none' stroke='%23d6d6d6'/%3E %3Cpath d='M11 1.5C12.5 4 14.5 5.5 18 5.5 M1.5 11C4 12.5 5.5 14.5 5.5 18 M49 1.5C47.5 4 45.5 5.5 42 5.5 M58.5 11C56 12.5 54.5 14.5 54.5 18 M11 58.5C12.5 56 14.5 54.5 18 54.5 M1.5 49C4 47.5 5.5 45.5 5.5 42 M49 58.5C47.5 56 45.5 54.5 42 54.5 M58.5 49C56 47.5 54.5 45.5 54.5 42' fill='none' stroke='%239a9a9a' stroke-width='.9' stroke-linecap='round'/%3E %3Cpath d='M5.5 1.0999999999999996L9.9 5.5L5.5 9.9L1.0999999999999996 5.5ZM54.5 1.0999999999999996L58.9 5.5L54.5 9.9L50.1 5.5ZM5.5 50.1L9.9 54.5L5.5 58.9L1.0999999999999996 54.5ZM54.5 50.1L58.9 54.5L54.5 58.9L50.1 54.5Z' fill='%233a3a3a'/%3E %3Cpath d='M5.5 3.4L7.6 5.5L5.5 7.6L3.4 5.5ZM54.5 3.4L56.6 5.5L54.5 7.6L52.4 5.5ZM5.5 52.4L7.6 54.5L5.5 56.6L3.4 54.5ZM54.5 52.4L56.6 54.5L54.5 56.6L52.4 54.5Z' fill='%23bdbdbd'/%3E %3C/svg%3E");
  --frame-art-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E %3Crect x='1.5' y='1.5' width='57' height='57' fill='none' stroke='%233c3c3c'/%3E %3Crect x='5.5' y='5.5' width='49' height='49' fill='none' stroke='%23b8b8b8'/%3E %3Cpath d='M11 1.5C12.5 4 14.5 5.5 18 5.5 M1.5 11C4 12.5 5.5 14.5 5.5 18 M49 1.5C47.5 4 45.5 5.5 42 5.5 M58.5 11C56 12.5 54.5 14.5 54.5 18 M11 58.5C12.5 56 14.5 54.5 18 54.5 M1.5 49C4 47.5 5.5 45.5 5.5 42 M49 58.5C47.5 56 45.5 54.5 42 54.5 M58.5 49C56 47.5 54.5 45.5 54.5 42' fill='none' stroke='%234a4a4a' stroke-width='.9' stroke-linecap='round'/%3E %3Cpath d='M5.5 1.0999999999999996L9.9 5.5L5.5 9.9L1.0999999999999996 5.5ZM54.5 1.0999999999999996L58.9 5.5L54.5 9.9L50.1 5.5ZM5.5 50.1L9.9 54.5L5.5 58.9L1.0999999999999996 54.5ZM54.5 50.1L58.9 54.5L54.5 58.9L50.1 54.5Z' fill='%23111111'/%3E %3Cpath d='M5.5 3.4L7.6 5.5L5.5 7.6L3.4 5.5ZM54.5 3.4L56.6 5.5L54.5 7.6L52.4 5.5ZM5.5 52.4L7.6 54.5L5.5 56.6L3.4 54.5ZM54.5 52.4L56.6 54.5L54.5 56.6L52.4 54.5Z' fill='%238a8a8a'/%3E %3C/svg%3E");
  --gem-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E %3Cpath d='M10 1 19 10 10 19 1 10Z' fill='%232a2a2a'/%3E %3Cpath d='M10 1 19 10 1 10Z' fill='%236a6a6a'/%3E %3Cpath d='M10 5.6 14.4 10 10 14.4 5.6 10Z' fill='%23bdbdbd'/%3E %3Cpath d='M10 1 19 10 10 19 1 10Z' fill='none' stroke='%23000' stroke-opacity='.6' stroke-width='.8'/%3E %3C/svg%3E");
  --dust-opacity: .5;
  --grain-opacity: .07;
  --vignette: rgba(0, 0, 0, .18);
  --shadow: 0 14px 30px rgba(0, 0, 0, .16);
  --backdrop: rgba(30, 30, 30, .5);
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--frame-lo) var(--bg); }

/* Scrolling panels keep a thin, dark rail. */
.drawer,
.editor-panel,
.modal-inner,
.page-viewport { scrollbar-width: thin; scrollbar-color: var(--frame-lo) transparent; }

html,
body { margin: 0; min-height: 100%; }

body {
  background-color: var(--bg);
  /* A faint light from above, as if through a high window. No shapes, only the falloff. */
  background-image: radial-gradient(110% 70% at 50% -12%, var(--bg-haze) 0%, var(--bg) 62%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

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

a { color: inherit; }

img { display: block; max-width: 100%; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible { outline: 1px solid var(--frame-hi); outline-offset: 3px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.noscript { position: relative; z-index: 5; padding: 40px; text-align: center; }

/* ------------------------------------------------------------ atmosphere */

.fx { position: fixed; inset: 0; pointer-events: none; }

.fx-dust {
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: var(--dust-opacity);
}

:root[data-theme="light"] .fx-dust { filter: invert(1); }

.no-dust .fx-dust { display: none; }

.fx-vignette {
  z-index: 2;
  background: radial-gradient(130% 95% at 50% 38%, transparent 52%, var(--vignette) 100%);
}

/* The grain lies still, like the tooth of old paper. */
.fx-grain {
  z-index: 1000;
  background-image: var(--noise);
  background-size: 220px 220px;
  opacity: var(--grain-opacity);
}

.no-grain .fx-grain { display: none; }

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