*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, system-ui, Inter, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

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

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
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;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

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

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
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 */
}

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

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* WCAG 2.2 (2.4.11): the focus indicator needs >= 3:1 against adjacent
     colour. Full-strength accent is 4.73:1. The previous 40% tint measured
     1.76:1 — it looked designed and was invisible. */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  border-radius: 0.25rem;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #bd5330;
  outline-style: solid;
}

/* Optical: the currency sign sits at cap height rather than floating on the
     baseline at a smaller size. */

.cur {
  font-size: 0.5em;
  font-weight: 600;
  align-self: flex-start;
  margin-top: 0.14em;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* ---------------------------------------------------------- primitives */

.ls-tnum {
  font-variant-numeric: tabular-nums;
}

.ls-skip {
  position: absolute;
  left: 18px;
  top: 0.75rem;
  z-index: 1000;
  --tw-translate-y: -160%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(27 27 25 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  font-weight: 650;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 1px 2px rgb(20 20 14 / .1), 0 14px 30px -12px rgb(20 20 14 / .28);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ls-skip:focus-visible {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

/* ---------------------------------------------------------- actions
     Namespaced. The old `.pill` carried `margin-left:auto`, which silently
     threw the lead item's actions to the far right of a different component;
     `.quiet` styled both a button and a section. Prefixing makes that
     class of collision impossible. */

.ls-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 13px;
  font-weight: 620;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.ls-btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ls-btn-primary:disabled:hover {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.ls-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(189 83 48 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ls-btn-primary:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.ls-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 13px;
  font-weight: 620;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.ls-btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ls-btn-secondary:disabled:hover {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.ls-btn-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 239 / var(--tw-bg-opacity, 1));
  font-weight: 580;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-btn-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 233 / var(--tw-bg-opacity, 1));
}

.ls-btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 13px;
  font-weight: 620;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.ls-btn-tertiary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ls-btn-tertiary:disabled:hover {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.ls-btn-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-weight: 580;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ls-btn-tertiary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 239 / var(--tw-bg-opacity, 1));
}

.ls-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 13px;
  font-weight: 620;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.ls-btn-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ls-btn-ghost:disabled:hover {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.ls-btn-ghost {
  background-color: transparent;
  font-weight: 560;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-btn-ghost:hover {
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 13px;
  font-weight: 620;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.ls-btn-danger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ls-btn-danger:disabled:hover {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.ls-btn-danger {
  --tw-text-opacity: 1;
  color: rgb(179 56 46 / var(--tw-text-opacity, 1));
  box-shadow: 0 0 0 1px rgb(179 56 46 / .3);
}

/* ---------------------------------------------------------- surfaces
     The three tiers differ by SURFACE, which is the interruption promise
     made visible: elevated = act on it, ring = being held, well = merely true. */

.ls-box-act {
  overflow: hidden;
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055), 0 2px 4px rgb(30 30 22 / .04), 0 10px 24px -8px rgb(30 30 22 / .11);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 2px 4px var(--tw-shadow-color), 0 10px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Watching and Noticed are NOT cards.
     Only the tier that asks you to decide gets a surface of its own; give a
     card to all three and elevation stops meaning anything. These two are
     hairline-separated rows straight on the canvas, and the tier is carried
     by type weight and colour instead of by a container. Six containers on
     one screen is what made the page read as furniture. */

.ls-list .ls-row {
  padding-left: 0px;
  padding-right: 0px;
}

.ls-list-quiet .ls-row {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.ls-list-quiet .ls-row-title {
  font-weight: 560;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
}

/* ---------------------------------------------------------- sections */

.ls-sect {
  margin-bottom: 34px;
}

.ls-sect-head {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ls-sect-title {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.014em;
  font-weight: 650;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-sect-count {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

/* ---------------------------------------------------------- needs-you item */

.ls-item {
  display: flex;
  gap: 0.875rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 18px;
  padding-bottom: 18px;
}

.ls-item + .ls-item {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 221 / var(--tw-border-opacity, 1));
}

/* rules only INSIDE a box */

.ls-item-lead {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.ls-item-title {
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: -0.014em;
  font-weight: 620;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-item-lead .ls-item-title {
  font-size: 18.5px;
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 620;
}

.ls-item-body {
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 1.55;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
}

.ls-item-lead .ls-item-body {
  margin-top: 0.375rem;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.008em;
}

.ls-item-body b {
  font-weight: 640;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* The four beats of a decision, in order:
     what happened (kicker + title) → what it means (consequence + threshold)
     → what we think (recommendation) → what you can do (actions).
     Everything else drops to the quiet footer. Before this, five facts sat at
     the same visual weight and the card stated a problem without ever
     offering a judgement. */

.ls-kicker {
  margin-bottom: 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #9c4528;
}

/* A glyph, not just a hue — nothing here may depend on colour alone. */

.ls-kicker svg {
  height: 0.875rem;
  width: 0.875rem;
}

.ls-consequence {
  margin-top: 0.5rem;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-consequence b {
  font-weight: 640;
}

.ls-pattern {
  margin-top: 0.625rem;
  font-size: 14px;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
}

/* THE CASH LINE — a Trend Line from charts-visual-design@0.7.0.

     What this replaced: an abstract track running £0–£15,000 with a hatched
     shortfall. It failed Tufte's only real test — every mark should carry a
     fact. That bar encoded a range nobody asked about, could not say WHEN the
     trouble arrives, and needed a key before it meant anything.

     This draws the actual balance across the days ahead, the buffer as one
     dashed rule, and labels the crossing point in place. No axes, no
     gridlines, no legend, no colour doing work that a word should do. */

.ls-spark {
  margin-top: 1rem;
}

.ls-spark svg {
  display: block;
  overflow: visible;
}

.ls-spark .line   {
  fill: none;
  stroke: #1b1b19;
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ls-spark .under  {
  fill: none;
  stroke: #b3382e;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ls-spark .buffer {
  stroke: #69695f;
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.ls-spark .dot    {
  fill: #b3382e;
}

.ls-spark .lbl    {
  font-size: 11px;
  fill: #69695f;
}

.ls-spark .lbl-b  {
  font-size: 11.5px;
  font-weight: 620;
  fill: #1b1b19;
}

.ls-spark .lbl-n  {
  font-size: 11.5px;
  font-weight: 620;
  fill: #b3382e;
}

.ls-rec {
  margin-top: 1rem;
  display: flex;
  gap: 0.625rem;
  border-radius: 8px;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 14px;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
  background: color-mix(in srgb, #bd5330 7%, transparent);
}

.ls-rec-mark {
  margin-top: 3px;
  height: 0.875rem;
  width: 0.875rem;
  flex-shrink: 0;
  color: #9c4528;
}

.ls-rec b {
  font-weight: 640;
}

/* Everything the card no longer needs at a glance, plus the way in to the
     reasoning. Trust needs an inspectable path, not a longer card. */

.ls-cardfoot {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.25rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 221 / var(--tw-border-opacity, 1));
  padding-top: 0.75rem;
  font-size: 12px;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-cardfoot button {
  font-weight: 560;
  text-decoration-line: underline;
  text-underline-offset: 2px;
  color: #9c4528;
}

/* "Something else" — the two buttons are the common cases, not the only
     ones. Without this the user's only honest move is to ignore the card. */

.ls-more {
  margin-top: 0.75rem;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 239 / var(--tw-bg-opacity, 1));
  padding: 0.875rem;
}

.ls-more-opt {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  border-radius: 7px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: left;
  font-size: 13.5px;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
}

.ls-more-opt:hover {
  background: color-mix(in srgb, #1b1b19 6%, transparent);
}

.ls-more-note {
  margin-top: 0.5rem;
  width: 100%;
  border-radius: 7px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 13.5px;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* The reasoning panel. Simple on the surface, depth on demand. */

.ls-why {
  margin-top: 0.75rem;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 239 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.ls-why-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 13px;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
}

.ls-why-row + .ls-why-row {
  border-top: 1px solid color-mix(in srgb, #1b1b19 6%, transparent);
}

.ls-why-row b {
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-why-total {
  margin-top: 0.25rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 221 / var(--tw-border-opacity, 1));
  padding-top: 0.625rem;
  font-size: 13px;
  font-weight: 620;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

/* A confirmation, not a suggestion. This item wants one bit of training
     data, so it gets a question and two answers — and the affirmative says
     what happens next rather than the vague "Confirm". */

.ls-confirm {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 18px;
  padding-bottom: 18px;
}

.ls-confirm-q {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.012em;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-confirm-b {
  margin-top: 0.25rem;
  font-size: 13.5px;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
}

/* An item that has just moved into Watching. Fades, so the eye is caught
     once and then left alone. */

.ls-landed {
  animation: ls-land 2.2s ease-out;
}

@keyframes ls-land {
  0%   {
    background: color-mix(in srgb, #1e7a46 14%, transparent);
  }

  100% {
    background: transparent;
  }
}

/* ---------------------------------------------------------- rows */

.ls-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

/* A full-strength rule between two quiet rows read as heavy. These divide
     siblings inside a container, so they only need to be perceptible. */

.ls-row + .ls-row {
  border-top: 1px solid color-mix(in srgb, #1b1b19 6%, transparent);
}

.ls-row-title {
  font-size: 14px;
  font-weight: 590;
  letter-spacing: -0.01em;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-row-body {
  font-size: 13.5px;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

/* ---------------------------------------------------------- marks */

.ls-mark {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  width: 34px;
  height: 34px;
}

.ls-mark-lg {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 15px;
}

.ls-mark-sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

/* For findings whose subject is a category, not a brand — there is no logo
     to show, so the icon carries the shape of the finding. */

.ls-glyph {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  border-radius: 8px;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
  width: 28px;
  height: 28px;
  background: color-mix(in srgb, #1b1b19 6%, transparent);
}

.ls-glyph svg {
  height: 1rem;
  width: 1rem;
}

/* ---------------------------------------------------------- the number */

.ls-cash {
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(23 22 27 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(243 239 230 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px rgb(20 20 14 / .1), 0 14px 30px -12px rgb(20 20 14 / .28);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ls-cash-label {
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.09em;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(143 137 126 / var(--tw-text-opacity, 1));
}

.ls-cash-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  --tw-text-opacity: 1;
  color: rgb(154 148 136 / var(--tw-text-opacity, 1));
}

.ls-cash-row b {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(243 239 230 / var(--tw-text-opacity, 1));
}

/* ---------------------------------------------------------- chat */

.ls-msg {
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.75rem;
}

.ls-msg-you {
  justify-content: flex-end;
}

.ls-msg-text {
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-msg-you .ls-msg-text {
  max-width: 76%;
  border-radius: 18px 18px 5px 18px;
  --tw-bg-opacity: 1;
  background-color: rgb(233 233 226 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.ls-avatar {
  margin-top: 0.125rem;
  display: grid;
  height: 26px;
  width: 26px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(27 27 25 / var(--tw-bg-opacity, 1));
}

/* Borrowed from the shipped iOS input: a generous pill, a terracotta caret
     standing in for the cursor, and a near-black send button. The dark button
     is the point — a terracotta circle competed with the accent everywhere
     else on the page; near-black reads as "commit" and stays quiet. */

.ls-ask {
  display: flex;
  height: 56px;
  cursor: text;
  align-items: center;
  gap: 0.75rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.25rem;
  padding-right: 0.625rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, #1b1b19 9%, transparent),
                0 8px 26px -12px rgb(30 30 22 / .22);
}

.ls-ask:focus-within {
  box-shadow: 0 0 0 1px color-mix(in srgb, #1b1b19 16%, transparent),
                0 10px 30px -12px rgb(30 30 22 / .26);
}

.ls-ask-caret {
  height: 19px;
  width: 2px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: #bd5330;
}

.ls-ask-placeholder {
  flex: 1 1 0%;
  font-size: 15.5px;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-send {
  display: grid;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  background: #17161b;
}

.ls-send:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ls-dock {
  position: sticky;
  bottom: 0px;
  z-index: 30;
  padding-bottom: 1.5rem;
  padding-top: 1.75rem;
  background: linear-gradient(to top, #f4f4ef 62%, transparent);
}

/* ---------------------------------------------------------- the ask palette
     Reachable from anywhere with "/" or ⌘K. Dark on purpose: this register
     already uses ONE dark surface (#17161b) to mean "system / commit", so the
     overlay reads as a layer above the paper rather than another card on it.
     The first row is an ASK, not a search — the list underneath is a shortcut,
     not the point. */

.ls-pal-backdrop {
  position: fixed;
  inset: 0px;
  z-index: 900;
  background: rgb(14 14 10 / .42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.ls-pal-wrap {
  position: fixed;
  inset: 0px;
  z-index: 901;
  overflow-y: auto;
  padding: 1rem;
  padding-top: 12vh;
}

.ls-pal {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  border-radius: 20px;
  background: #17161b;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 70px -20px rgb(10 10 8 / .6);
}

.ls-pal-inputrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.ls-pal-input {
  height: 58px;
  width: 100%;
  border-width: 0px;
  background-color: transparent;
  font-size: 16px;
  --tw-text-opacity: 1;
  color: rgb(243 239 230 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ls-pal-input::-moz-placeholder {
  color: #8f897e;
}

.ls-pal-input::placeholder {
  color: #8f897e;
}

/* Quiet until there is something to send. The selected row already carries
     the accent; two accents in one panel and neither means anything. */

.ls-pal-enter {
  display: grid;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  font-size: 15px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  background: rgb(255 255 255 / .08);
  color: #8f897e;
}

.ls-pal-enter[data-live] {
  background: #bd5330;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ls-pal-list {
  max-height: 46vh;
  overflow-y: auto;
  border-top-width: 1px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-bottom: 0.625rem;
  padding-top: 0.25rem;
  border-color: rgb(255 255 255 / .08);
  scroll-padding-block: 34px 10px;
}

.ls-pal-group {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-bottom: 0.375rem;
  padding-top: 0.875rem;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8f897e;
}

.ls-pal-opt {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: left;
  font-size: 14px;
  --tw-text-opacity: 1;
  color: rgb(243 239 230 / var(--tw-text-opacity, 1));
}

.ls-pal-opt[aria-selected="true"] {
  background: #bd5330;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ls-pal-opt .ls-pal-glyph {
  display: grid;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 650;
  background: rgb(255 255 255 / .09);
  color: #9a9488;
}

.ls-pal-opt[aria-selected="true"] .ls-pal-glyph {
  background: rgb(255 255 255 / .22);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ls-pal-sub {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  color: #8f897e;
}

/* Pure white, not a tint. White-on-accent measures 4.73:1; at 78% it is
     3.51 and at 95% still 4.43 — nothing short of full white clears AA on
     this fill, so the qualifier stays subordinate by SIZE, not by opacity. */

.ls-pal-opt[aria-selected="true"] .ls-pal-sub {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ls-pal-empty {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
  font-size: 13.5px;
  color: #9a9488;
}

.ls-pal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  row-gap: 0.25rem;
  border-top-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 11.5px;
  border-color: rgb(255 255 255 / .08);
  background: rgb(255 255 255 / .03);
  color: #8f897e;
}

.ls-kbd {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
  display: inline-grid;
  height: 19px;
  min-width: 19px;
  place-items: center;
  border-radius: 5px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 10.5px;
  font-weight: 650;
  background: rgb(255 255 255 / .08);
  color: #9a9488;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09);
}

.ls-kbd[data-on] {
  background: #bd5330;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  box-shadow: none;
}

/* ---------------------------------------------------------- states
     Day one, syncing, all-clear, stale. The all-clear is the hard one: an
     agent that reports nothing must still show it looked. */

/* Left-aligned, on the same spine as everything else. A centred empty state
     is the reflex, and it breaks the one edge the whole page is built on. */

.ls-state {
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ls-state-title {
  font-size: 18.5px;
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 620;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-state-body {
  margin-top: 0.375rem;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
}

.ls-state-proof {
  margin-top: 1rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 221 / var(--tw-border-opacity, 1));
  padding-top: 0.875rem;
}

.ls-state-proof li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 13.5px;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
}

.ls-state-tick {
  display: grid;
  height: 18px;
  width: 18px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  background: color-mix(in srgb, #1e7a46 14%, transparent);
}

.ls-state-tick svg {
  height: 11px;
  width: 11px;
  stroke: #1e7a46;
}

/* the first-run ladder */

.ls-step {
  display: flex;
  gap: 1rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 229 221 / var(--tw-border-opacity, 1));
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ls-step:first-child {
  border-top-width: 0px;
  padding-top: 0px;
}

.ls-step-n {
  display: grid;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 650;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background: #1b1b19;
}

.ls-step-n[data-todo] {
  background: #e5e5dd;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-step-t {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-step-b {
  margin-top: 0.25rem;
  font-size: 13.5px;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

/* progress: a bar the agent fills while it reads your history */

.ls-prog {
  height: 0.375rem;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  background: rgb(255 255 255 / .14);
}

.ls-prog-fill {
  height: 100%;
  border-radius: 9999px;
  background: #e8683f;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------- transactions
     Borrowed from the shipped iOS screen: a date heading, then rows of
     logo / name / account+currency / amount. The second line names the
     ACCOUNT, which is the thing you actually need when three are connected. */

.ls-txn-head {
  margin-bottom: 0.5rem;
  margin-top: 2rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: -0.005em;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-txn-head:first-child {
  margin-top: 0px;
}

.ls-txn-headnote {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-txn-group {
  overflow: hidden;
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ls-txn {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.ls-txn + .ls-txn {
  border-top: 1px solid color-mix(in srgb, #1b1b19 6%, transparent);
}

.ls-txn .ls-mark {
  width: 32px;
  height: 32px;
}

.ls-txn-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 590;
  letter-spacing: -0.01em;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-txn-sub {
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-txn-dot {
  height: 0.5rem;
  width: 0.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
}

.ls-txn-right {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
}

.ls-txn-amt {
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  font-weight: 620;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-txn-conv {
  font-variant-numeric: tabular-nums;
  margin-top: 0.125rem;
  font-size: 12px;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

/* ---------------------------------------------------------- settings */

.ls-field {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 239 / var(--tw-bg-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #1b1b19 10%, transparent);
}

.ls-field:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #1b1b19 22%, transparent);
}

.ls-field-pre {
  font-size: 15px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-field-input {
  width: 110px;
  border-width: 0px;
  background-color: transparent;
  font-size: 15px;
  font-weight: 620;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ls-acct {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ls-acct + .ls-acct {
  border-top: 1px solid color-mix(in srgb, #1b1b19 6%, transparent);
}

.ls-acct-name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-acct-sub {
  margin-top: 0.125rem;
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-acct-right {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
}

.ls-acct-bal {
  font-size: 14.5px;
  font-weight: 620;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

/* Status carries a WORD, never colour alone. */

.ls-tag {
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  font-weight: 620;
}

.ls-tag-ok   {
  background: color-mix(in srgb, #1e7a46 12%, transparent);
  color: #1e7a46;
}

.ls-tag-warn {
  background: color-mix(in srgb, #bd5330 12%, transparent);
  color: #9c4528;
}

/* editable rows: label left, control right, error under the control */

.ls-row-f {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 0.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.ls-row-f + .ls-row-f {
  border-top: 1px solid color-mix(in srgb, #1b1b19 6%, transparent);
}

.ls-lab {
  width: 150px;
  flex-shrink: 0;
  padding-top: 0.625rem;
  font-size: 13.5px;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-inp-wrap {
  min-width: 240px;
  flex: 1 1 0%;
}

.ls-inp {
  width: 100%;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 239 / var(--tw-bg-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 14.5px;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #1b1b19 10%, transparent);
}

.ls-inp:focus {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #1b1b19 24%, transparent);
}

/* An invalid field carries a MESSAGE, so the ring is reinforcement, not the
     signal — colour alone never tells anyone what is wrong. */

.ls-inp[data-bad] {
  box-shadow: inset 0 0 0 1.5px #b3382e;
}

.ls-hint {
  margin-top: 0.375rem;
  font-size: 12.5px;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-err {
  margin-top: 0.375rem;
  font-size: 12.5px;
  font-weight: 560;
  line-height: 1.45;
  --tw-text-opacity: 1;
  color: rgb(179 56 46 / var(--tw-text-opacity, 1));
}

/* the org's own inbound address */

.ls-inbox {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 239 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #1b1b19 8%, transparent);
}

.ls-inbox-addr {
  min-width: 0px;
  flex: 1 1 0%;
  word-break: break-all;
  font-size: 13.5px;
  font-weight: 560;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ls-note {
  margin-top: 0.75rem;
  font-size: 12.5px;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-note summary {
  cursor: pointer;
  font-weight: 560;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
}

.ls-note p {
  margin-top: 0.5rem;
  max-width: 62ch;
  line-height: 1.55;
}

/* ---------------------------------------------------------- bank picker */

.ls-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #1b1b19 10%, transparent);
}

.ls-search:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #1b1b19 24%, transparent);
}

.ls-search-input {
  width: 100%;
  border-width: 0px;
  background-color: transparent;
  font-size: 15px;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ls-search-input::-moz-placeholder {
  color: #69695f;
}

.ls-search-input::placeholder {
  color: #69695f;
}

.ls-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.ls-search-spin {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border-width: 2px;
  border-color: color-mix(in srgb, #1b1b19 18%, transparent);
  border-top-color: #57574f;
  animation: ls-spin .7s linear infinite;
}

@keyframes ls-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-search-spin {
    animation-duration: 2s;
  }
}

.ls-bank-head {
  margin-bottom: 0.5rem;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.09em;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-bank-list {
  overflow: hidden;
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ls-bank {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
}

.ls-bank + .ls-bank {
  border-top: 1px solid color-mix(in srgb, #1b1b19 6%, transparent);
}

.ls-bank:hover {
  background: color-mix(in srgb, #1b1b19 4%, transparent);
}

.ls-bank-mark {
  display: grid;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background: #57574f;
}

.ls-bank-name {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 580;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.ls-bank-go {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.ls-bank-empty {
  border-radius: 14px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ---------------------------------------------------------- source chips */

.ls-chip {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  border-radius: 8px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 12px;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
}

.ls-chip:hover {
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

/* ---------------------------------------------------------- rail */

.ls-nav-item {
  position: relative;
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  border-radius: 8px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
}

.ls-nav-item:hover {
  background: color-mix(in srgb, #1b1b19 4%, transparent);
}

.ls-nav-item[data-on] {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
  background: color-mix(in srgb, #1b1b19 7%, transparent);
}

/* ---------------------------------------------------------- document register
     Warm paper, serif. The Rundown only — never a task screen.
     Card system borrowed from the shipped iOS Rundown: a tinted card on paper,
     a label row with a terracotta dot and the "Useful?" pair, serif headline,
     serif prose, then a hairline ledger. */

/* The Rundown is a BAND, not a card. It runs the full width of the viewport
     in warm paper, so the document register reads as a different object
     rather than one more card in the stack — and the sections inside it are
     divided by rules, never nested cards. Beige cards on a beige page was
     card-in-card, and it was the least premium thing on the screen. */

.ls-doc-sect {
  padding-bottom: 2.25rem;
}

.ls-doc-sect + .ls-doc-sect {
  border-top-width: 1px;
  padding-top: 2.25rem;
  border-color: color-mix(in srgb, #221d17 13%, transparent);
}

.ls-doc-sect:last-of-type {
  padding-bottom: 0px;
}

/* the band's masthead — the opener lives ON the paper, so nothing floats
     above it and no card has to appear or disappear */

.ls-doc-masthead {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
}

.ls-doc-rule {
  margin-bottom: 1.75rem;
  margin-top: 1.75rem;
  border-top-width: 1px;
  border-color: color-mix(in srgb, #221d17 13%, transparent);
}

.ls-doc-labelrow {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ls-doc-dot {
  height: 0.375rem;
  width: 0.375rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: #bd5330;
}

.ls-doc-useful {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Newsreader, Georgia, serif;
  font-size: 12.5px;
  font-style: italic;
  color: #666157;
}

.ls-doc-useful svg {
  height: 1rem;
  width: 1rem;
  opacity: 0.45;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
}

.ls-doc-useful button:hover svg {
  opacity: 0.9;
}

.ls-ledger {
  margin-top: 1.25rem;
  border-top-width: 1px;
  padding-top: 0.25rem;
  border-color: color-mix(in srgb, #221d17 12%, transparent);
}

.ls-ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top-width: 1px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  border-color: color-mix(in srgb, #221d17 10%, transparent);
}

.ls-ledger-row:first-child {
  border-top-width: 0px;
}

.ls-ledger-name {
  font-family: Newsreader, Georgia, serif;
  font-size: 16px;
  color: #221d17;
}

.ls-ledger-sub {
  margin-left: 0.5rem;
  font-size: 12.5px;
  color: #666157;
}

.ls-ledger-val {
  font-variant-numeric: tabular-nums;
  font-family: Fraunces, Georgia, Times New Roman, serif;
  font-size: 16px;
  color: #221d17;
}

.ls-doc-cta {
  margin-top: 1.5rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 9999px;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: 15px;
  font-weight: 620;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  background: #17161b;
}

.ls-doc-cta:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ls-doc-cta span {
  display: grid;
  height: 2rem;
  width: 2rem;
  place-items: center;
  border-radius: 9999px;
  font-size: 15px;
  background: rgb(255 255 255 / .14);
}

/* RANKED BARS in the document register — charts-visual-design@0.7.0.
     The contract's grammar is `name | track | value` at 16px, which is the
     approved mockup's layout; label-above-bar was tried and was a step back.
     A section gets bars instead of a ledger when the POINT is the proportion
     rather than the individual figures. */

.ls-bars {
  margin-top: 1.25rem;
  border-top-width: 1px;
  padding-top: 1rem;
  border-color: color-mix(in srgb, #221d17 12%, transparent);
}

.ls-bar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.ls-bar-name {
  width: 128px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Newsreader, Georgia, serif;
  font-size: 15px;
  color: #221d17;
}

.ls-bar-track {
  position: relative;
  height: 1rem;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, #221d17 7%, transparent);
}

.ls-bar-fill {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 3px;
  background: #bd5330;
}

.ls-bar-fill[data-quiet] {
  background: color-mix(in srgb, #221d17 38%, transparent);
}

.ls-bar-val {
  font-variant-numeric: tabular-nums;
  width: 86px;
  flex-shrink: 0;
  text-align: right;
  font-family: Fraunces, Georgia, Times New Roman, serif;
  font-size: 15px;
  color: #221d17;
}

.ls-doc {
  --tw-bg-opacity: 1;
  background-color: rgb(242 235 222 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(34 29 23 / var(--tw-text-opacity, 1));
}

.ls-doc-head {
  font-family: Fraunces, Georgia, Times New Roman, serif;
  font-size: 26px;
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-weight: 440;
  --tw-text-opacity: 1;
  color: rgb(34 29 23 / var(--tw-text-opacity, 1));
}

.ls-doc-prose {
  font-family: Newsreader, Georgia, serif;
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  --tw-text-opacity: 1;
  color: rgb(34 29 23 / var(--tw-text-opacity, 1));
}

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

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-5 {
  bottom: 1.25rem;
}

.left-0\.5 {
  left: 0.125rem;
}

.left-1\/2 {
  left: 50%;
}

.right-0\.5 {
  right: 0.125rem;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-7 {
  top: 1.75rem;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.-z-20 {
  z-index: -20;
}

.z-50 {
  z-index: 50;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-ml-2 {
  margin-left: -0.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-14 {
  margin-bottom: 56px;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-11 {
  margin-top: 2.75rem;
}

.mt-14 {
  margin-top: 56px;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-3\.5 {
  margin-top: 0.875rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 56px;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-56 {
  height: 14rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[15px\] {
  height: 15px;
}

.h-\[17px\] {
  height: 17px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[20px\] {
  height: 20px;
}

.h-\[22px\] {
  height: 22px;
}

.h-\[30px\] {
  height: 30px;
}

.h-\[92vh\] {
  height: 92vh;
}

.h-full {
  height: 100%;
}

.min-h-\[420px\] {
  min-height: 420px;
}

.min-h-\[620px\] {
  min-height: 620px;
}

.min-h-screen {
  min-height: 100vh;
}

.\!w-\[150px\] {
  width: 150px !important;
}

.\!w-\[92px\] {
  width: 92px !important;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 56px;
}

.w-24 {
  width: 6rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[132px\] {
  width: 132px;
}

.w-\[15px\] {
  width: 15px;
}

.w-\[17px\] {
  width: 17px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[234px\] {
  width: 234px;
}

.w-\[236px\] {
  width: 236px;
}

.w-\[30px\] {
  width: 30px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-\[1080px\] {
  max-width: 1080px;
}

.max-w-\[1180px\] {
  max-width: 1180px;
}

.max-w-\[15ch\] {
  max-width: 15ch;
}

.max-w-\[17ch\] {
  max-width: 17ch;
}

.max-w-\[18ch\] {
  max-width: 18ch;
}

.max-w-\[32ch\] {
  max-width: 32ch;
}

.max-w-\[34ch\] {
  max-width: 34ch;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[40ch\] {
  max-width: 40ch;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[42ch\] {
  max-width: 42ch;
}

.max-w-\[440px\] {
  max-width: 440px;
}

.max-w-\[46ch\] {
  max-width: 46ch;
}

.max-w-\[480px\] {
  max-width: 480px;
}

.max-w-\[48ch\] {
  max-width: 48ch;
}

.max-w-\[50ch\] {
  max-width: 50ch;
}

.max-w-\[52ch\] {
  max-width: 52ch;
}

.max-w-\[54ch\] {
  max-width: 54ch;
}

.max-w-\[560px\] {
  max-width: 560px;
}

.max-w-\[56ch\] {
  max-width: 56ch;
}

.max-w-\[62ch\] {
  max-width: 62ch;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[720px\] {
  max-width: 720px;
}

.max-w-\[820px\] {
  max-width: 820px;
}

.max-w-md {
  max-width: 28rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[\.98\] {
  --tw-scale-x: .98;
  --tw-scale-y: .98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-px {
  gap: 1px;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-wrap {
  text-wrap: wrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-\[26px\] {
  border-radius: 26px;
}

.rounded-\[5px\] {
  border-radius: 5px;
}

.rounded-\[6px\] {
  border-radius: 6px;
}

.rounded-card {
  border-radius: 14px;
}

.rounded-ctl {
  border-radius: 8px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-hero {
  border-radius: 20px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-\[1\.5px\] {
  border-width: 1.5px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-\[\#ded0b6\] {
  --tw-border-opacity: 1;
  border-color: rgb(222 208 182 / var(--tw-border-opacity, 1));
}

.border-dark-card {
  --tw-border-opacity: 1;
  border-color: rgb(23 22 27 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-rule {
  --tw-border-opacity: 1;
  border-color: rgb(229 229 221 / var(--tw-border-opacity, 1));
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}

.border-white\/40 {
  border-color: rgb(255 255 255 / 0.4);
}

.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.bg-\[\#00395d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 57 93 / var(--tw-bg-opacity, 1));
}

.bg-\[\#14233c\] {
  --tw-bg-opacity: 1;
  background-color: rgb(20 35 60 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2f2f38\] {
  --tw-bg-opacity: 1;
  background-color: rgb(47 47 56 / var(--tw-bg-opacity, 1));
}

.bg-\[\#4B1818\] {
  --tw-bg-opacity: 1;
  background-color: rgb(75 24 24 / var(--tw-bg-opacity, 1));
}

.bg-\[\#4a4a52\] {
  --tw-bg-opacity: 1;
  background-color: rgb(74 74 82 / var(--tw-bg-opacity, 1));
}

.bg-\[\#635BFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(99 91 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#d6d6cf\] {
  --tw-bg-opacity: 1;
  background-color: rgb(214 214 207 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e8232a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 35 42 / var(--tw-bg-opacity, 1));
}

.bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(189 83 48 / var(--tw-bg-opacity, 1));
}

.bg-canvas {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 239 / var(--tw-bg-opacity, 1));
}

.bg-card {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-dark-card {
  --tw-bg-opacity: 1;
  background-color: rgb(23 22 27 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(27 27 25 / var(--tw-bg-opacity, 1));
}

.bg-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(242 235 222 / var(--tw-bg-opacity, 1));
}

.bg-paper-sec {
  --tw-bg-opacity: 1;
  background-color: rgb(233 220 198 / var(--tw-bg-opacity, 1));
}

.bg-pos {
  --tw-bg-opacity: 1;
  background-color: rgb(30 122 70 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-well {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 233 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/\[\.09\] {
  background-color: rgb(255 255 255 / .09);
}

.stroke-current {
  stroke: currentColor;
}

.stroke-ink-2 {
  stroke: #57574f;
}

.stroke-neg {
  stroke: #b3382e;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-\[50\%_38\%\] {
  -o-object-position: 50% 38%;
     object-position: 50% 38%;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-4 {
  padding: 1rem;
}

.p-4\.5 {
  padding: 18px;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-11 {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 56px;
  padding-bottom: 56px;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-3\.5 {
  padding-bottom: 0.875rem;
}

.pb-7 {
  padding-bottom: 1.75rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pl-\[42px\] {
  padding-left: 42px;
}

.pr-1\.5 {
  padding-right: 0.375rem;
}

.pr-2\.5 {
  padding-right: 0.625rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-14 {
  padding-top: 56px;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-28 {
  padding-top: 7rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pt-9 {
  padding-top: 2.25rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-display {
  font-family: Fraunces, Georgia, Times New Roman, serif;
}

.font-read {
  font-family: Newsreader, Georgia, serif;
}

.font-sans {
  font-family: -apple-system, BlinkMacSystemFont, SF Pro Text, system-ui, Inter, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-8xl {
  font-size: 6rem;
  line-height: 1;
}

.text-\[10\.5px\] {
  font-size: 10.5px;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12\.5px\] {
  font-size: 12.5px;
}

.text-\[13\.5px\] {
  font-size: 13.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[21px\] {
  font-size: 21px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[34px\] {
  font-size: 34px;
}

.text-\[38px\] {
  font-size: 38px;
}

.text-\[44px\] {
  font-size: 44px;
}

.text-\[clamp\(34px\2c 3\.4vw\2c 46px\)\] {
  font-size: clamp(34px, 3.4vw, 46px);
}

.text-\[clamp\(34px\2c 3\.8vw\2c 50px\)\] {
  font-size: clamp(34px, 3.8vw, 50px);
}

.text-\[clamp\(34px\2c 3\.8vw\2c 52px\)\] {
  font-size: clamp(34px, 3.8vw, 52px);
}

.text-\[clamp\(38px\2c 4\.6vw\2c 62px\)\] {
  font-size: clamp(38px, 4.6vw, 62px);
}

.text-\[clamp\(40px\2c 4\.6vw\2c 60px\)\] {
  font-size: clamp(40px, 4.6vw, 60px);
}

.text-\[clamp\(44px\2c 6\.4vw\2c 86px\)\] {
  font-size: clamp(44px, 6.4vw, 86px);
}

.text-body {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.008em;
}

.text-edition {
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 420;
}

.text-label {
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0.09em;
  font-weight: 600;
}

.text-lede {
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -0.008em;
}

.text-meta {
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
}

.text-numeral {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.036em;
  font-weight: 700;
}

.text-section {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.014em;
  font-weight: 650;
}

.text-title {
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: -0.026em;
  font-weight: 660;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-\[400\] {
  font-weight: 400;
}

.font-\[500\] {
  font-weight: 500;
}

.font-\[560\] {
  font-weight: 560;
}

.font-\[580\] {
  font-weight: 580;
}

.font-\[590\] {
  font-weight: 590;
}

.font-\[600\] {
  font-weight: 600;
}

.font-\[620\] {
  font-weight: 620;
}

.font-\[640\] {
  font-weight: 640;
}

.font-\[650\] {
  font-weight: 650;
}

.font-\[660\] {
  font-weight: 660;
}

.font-\[700\] {
  font-weight: 700;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.italic {
  font-style: italic;
}

.leading-\[0\.98\] {
  line-height: 0.98;
}

.leading-\[0\.99\] {
  line-height: 0.99;
}

.leading-\[1\.05\] {
  line-height: 1.05;
}

.leading-\[1\.0\] {
  line-height: 1.0;
}

.leading-\[1\.15\] {
  line-height: 1.15;
}

.leading-\[1\.1\] {
  line-height: 1.1;
}

.leading-\[1\.22\] {
  line-height: 1.22;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-\[1\.55\] {
  line-height: 1.55;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}

.tracking-\[-0\.022em\] {
  letter-spacing: -0.022em;
}

.tracking-\[-0\.024em\] {
  letter-spacing: -0.024em;
}

.tracking-\[-0\.025em\] {
  letter-spacing: -0.025em;
}

.tracking-\[-0\.026em\] {
  letter-spacing: -0.026em;
}

.tracking-\[-0\.028em\] {
  letter-spacing: -0.028em;
}

.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}

.tracking-\[-0\.036em\] {
  letter-spacing: -0.036em;
}

.tracking-\[-0\.038em\] {
  letter-spacing: -0.038em;
}

.tracking-\[-0\.03em\] {
  letter-spacing: -0.03em;
}

.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}

.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}

.text-\[\#221d17\] {
  --tw-text-opacity: 1;
  color: rgb(34 29 23 / var(--tw-text-opacity, 1));
}

.text-\[\#4B1818\] {
  --tw-text-opacity: 1;
  color: rgb(75 24 24 / var(--tw-text-opacity, 1));
}

.text-\[\#5a5346\] {
  --tw-text-opacity: 1;
  color: rgb(90 83 70 / var(--tw-text-opacity, 1));
}

.text-\[\#8f897e\] {
  --tw-text-opacity: 1;
  color: rgb(143 137 126 / var(--tw-text-opacity, 1));
}

.text-\[\#948b7c\] {
  --tw-text-opacity: 1;
  color: rgb(148 139 124 / var(--tw-text-opacity, 1));
}

.text-\[\#9a9488\] {
  --tw-text-opacity: 1;
  color: rgb(154 148 136 / var(--tw-text-opacity, 1));
}

.text-\[\#cfc9bd\] {
  --tw-text-opacity: 1;
  color: rgb(207 201 189 / var(--tw-text-opacity, 1));
}

.text-\[\#e7e2d8\] {
  --tw-text-opacity: 1;
  color: rgb(231 226 216 / var(--tw-text-opacity, 1));
}

.text-accent-text {
  --tw-text-opacity: 1;
  color: rgb(156 69 40 / var(--tw-text-opacity, 1));
}

.text-canvas {
  --tw-text-opacity: 1;
  color: rgb(244 244 239 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.text-ink-2 {
  --tw-text-opacity: 1;
  color: rgb(87 87 79 / var(--tw-text-opacity, 1));
}

.text-ink-3 {
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.text-neg {
  --tw-text-opacity: 1;
  color: rgb(179 56 46 / var(--tw-text-opacity, 1));
}

.text-pos {
  --tw-text-opacity: 1;
  color: rgb(30 122 70 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}

.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}

.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}

.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}

.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

.underline {
  text-decoration-line: underline;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.accent-accent {
  accent-color: #bd5330;
}

.opacity-45 {
  opacity: 0.45;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-85 {
  opacity: 0.85;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1\.5px_\#b3382e\] {
  --tw-shadow: 0 0 0 1.5px #b3382e;
  --tw-shadow-colored: 0 0 0 1.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_rgb\(179_56_46_\/_\.3\)\] {
  --tw-shadow: 0 0 0 1px rgb(179 56 46 / .3);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_2px_\#bd5330\] {
  --tw-shadow: 0 0 0 2px #bd5330;
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-float {
  --tw-shadow: 0 1px 2px rgb(20 20 14 / .1), 0 14px 30px -12px rgb(20 20 14 / .28);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lift {
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055), 0 2px 4px rgb(30 30 22 / .04), 0 10px 24px -8px rgb(30 30 22 / .11);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 2px 4px var(--tw-shadow-color), 0 10px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-low {
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055), 0 1px 2px rgb(30 30 20 / .05);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-ring {
  --tw-shadow: 0 0 0 1px rgb(20 20 14 / .055);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.outline-2 {
  outline-width: 2px;
}

.outline-offset-2 {
  outline-offset: 2px;
}

.outline-accent {
  outline-color: #bd5330;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-110 {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.brightness-95 {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.sepia {
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-page {
  transition-duration: 400ms;
}

.duration-reveal {
  transition-duration: 240ms;
}

.duration-state {
  transition-duration: 120ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-move {
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* §11 of charts-visual-design@0.7.0: animation is required, and Reduce
     Motion replaces draw/grow/stagger with a single crossfade. */

/* ============================================================ BASE
   Everything below is expressed in tokens from tailwind.config.js. No raw
   hex in components; a colour that isn't in the config doesn't exist. */

.placeholder\:text-ink-3::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.placeholder\:text-ink-3::placeholder {
  --tw-text-opacity: 1;
  color: rgb(105 105 95 / var(--tw-text-opacity, 1));
}

.last\:border-0:last-child {
  border-width: 0px;
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-\[\#5C2020\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(92 32 32 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[rgb\(179_56_46_\/_\.06\)\]:hover {
  background-color: rgb(179 56 46 / .06);
}

.hover\:bg-canvas:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 239 / var(--tw-bg-opacity, 1));
}

.hover\:bg-well:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 233 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/90:hover {
  background-color: rgb(255 255 255 / 0.9);
}

.hover\:bg-white\/\[\.16\]:hover {
  background-color: rgb(255 255 255 / .16);
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:outline-2:focus {
  outline-width: 2px;
}

.focus\:outline-offset-2:focus {
  outline-offset: 2px;
}

.focus\:outline-accent:focus {
  outline-color: #bd5330;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:hover\:brightness-100:hover:disabled {
  --tw-brightness: brightness(1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-ink {
  --tw-text-opacity: 1;
  color: rgb(27 27 25 / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }
}

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}