@charset "UTF-8";
:root,
.theme-ns {
  --c-bg: #0A0A0B;
  --c-panel: #0F0F11;
  --c-surface: #151517;
  --c-surface-hover: #1A1A1D;
  --c-line: #232327;
  --c-line-strong: #2E2E33;
  --c-text: #EDEDEF;
  --c-text-sec: #919199;
  --c-muted: #919199;
  --c-dim: #5D5D65;
  --c-accent: #E6F07A;
  --c-accent-hover: #F2FC80;
  --c-on-accent: #101010;
  --c-accent-soft: rgba(255, 255, 255, 0.045);
  --c-accent-ring: rgba(230, 240, 122, 0.28);
  --c-focus: var(--c-accent);
  --c-accent-ink: var(--c-accent);
  --c-tint: 255, 255, 255;
  --c-danger: #E5735F;
  --c-danger-soft: rgba(229, 115, 95, 0.10);
  --c-success: #7CC48A;
  --c-warn: #E6C46A;
  --c-warn-soft: rgba(230, 196, 106, 0.10);
  --font-head: "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-card: 16px;
  --radius-control: 9px;
  --radius-group: 12px;
  --radius-tag: 7px;
  --focus-ring: 0 0 0 1px var(--c-accent), 0 0 0 4px var(--c-accent-ring);
  --glass-bg: rgba(24, 24, 28, 0.56);
  --glass-bg-hover: rgba(32, 32, 37, 0.62);
  --glass-bg-strong: rgba(13, 13, 15, 0.78);
  --glass-bg-soft: rgba(255, 255, 255, 0.025);
  --glass-solid: #151517;
  --glass-solid-strong: #0F0F11;
  --glass-border: rgba(255, 255, 255, 0.085);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.07);
  --glass-sheen: none;
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  --glass-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 56px -28px rgba(0, 0, 0, 0.8);
  --glass-blur: 18px;
  --glass-filter: blur(var(--glass-blur)) saturate(140%);
  --glass-filter-strong: blur(var(--glass-blur)) saturate(120%) brightness(0.55);
  --pill-bg: rgba(255, 255, 255, 0.03);
  --pill-active: rgba(255, 255, 255, 0.075);
  --pill-active-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
  --glow-accent: rgba(230, 240, 122, 0.075);
  --glow-accent-strong: rgba(230, 240, 122, 0.12);
  --glow-cool: rgba(150, 162, 186, 0.07);
  --wash-accent: none;
}

.theme-ns {
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media screen {
  [data-theme=light] .theme-ns {
    color-scheme: light;
    --c-bg: #ECEDEF;
    --c-panel: #F6F6F7;
    --c-surface: #FFFFFF;
    --c-surface-hover: #F1F1F3;
    --c-line: rgba(22, 22, 28, 0.09);
    --c-line-strong: rgba(22, 22, 28, 0.17);
    --c-text: #17171A;
    --c-text-sec: #46464E;
    --c-muted: #5A5A63;
    --c-dim: #8A8A94;
    --c-accent: #DCEB5E;
    --c-accent-hover: #D2E24C;
    --c-on-accent: #101010;
    --c-accent-soft: rgba(22, 22, 28, 0.045);
    --c-accent-ring: rgba(122, 138, 0, 0.32);
    --c-focus: #5C6600;
    --c-accent-ink: #5C6600;
    --c-tint: 22, 22, 28;
    --c-danger: #B23A26;
    --c-danger-soft: rgba(178, 58, 38, 0.09);
    --c-success: #276B35;
    --c-warn: #8A5F00;
    --c-warn-soft: rgba(196, 150, 30, 0.14);
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-bg-hover: rgba(255, 255, 255, 0.76);
    --glass-bg-strong: rgba(246, 246, 247, 0.76);
    --glass-filter-strong: blur(var(--glass-blur)) saturate(160%) brightness(1.08);
    --glass-bg-soft: rgba(255, 255, 255, 0.42);
    --glass-solid: #FAFAFB;
    --glass-solid-strong: #F4F4F5;
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-border-hover: rgba(255, 255, 255, 1);
    --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
    --glass-sheen: none;
    --glass-shadow: 0 0 0 1px rgba(22, 22, 28, 0.05), 0 1px 2px rgba(22, 22, 28, 0.05), 0 14px 32px -18px rgba(22, 22, 28, 0.22);
    --glass-shadow-lg: 0 0 0 1px rgba(22, 22, 28, 0.06), 0 2px 6px rgba(22, 22, 28, 0.06), 0 32px 72px -24px rgba(22, 22, 28, 0.3);
    --pill-bg: rgba(22, 22, 28, 0.045);
    --pill-active: #FFFFFF;
    --pill-active-shadow: 0 0 0 1px rgba(22, 22, 28, 0.05), 0 1px 3px rgba(22, 22, 28, 0.1);
    --glow-accent: rgba(214, 232, 76, 0.2);
    --glow-accent-strong: rgba(214, 232, 76, 0.32);
    --glow-cool: rgba(168, 178, 198, 0.28);
    --wash-accent: none;
    -webkit-font-smoothing: antialiased;
  }
  [data-theme=light] .theme-ns :focus-visible {
    outline-color: var(--c-focus);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-ns,
  [data-theme=light] .theme-ns {
    --glass-bg: var(--glass-solid);
    --glass-bg-hover: var(--c-surface-hover);
    --glass-bg-strong: var(--glass-solid-strong);
    --glass-filter: none;
    --glass-filter-strong: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .theme-ns,
  [data-theme=light] .theme-ns {
    --glass-bg: var(--glass-solid);
    --glass-bg-hover: var(--c-surface-hover);
    --glass-bg-strong: var(--glass-solid-strong);
    --glass-filter: none;
    --glass-filter-strong: none;
    --glass-bg-soft: transparent;
    --glass-sheen: none;
  }
}
.hidden {
  display: none !important;
}

.disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

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

.full-width {
  width: 100%;
}

.pointer {
  cursor: pointer;
}

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

.flex-row {
  display: flex;
  flex-direction: row;
}
@media (max-width: 500px) {
  .flex-row {
    flex-direction: column;
  }
}

.padding-md {
  padding: 1.5rem;
}

.text-center {
  text-align: center;
}
.text-center * {
  margin-left: auto;
  margin-right: auto;
}
.text-center h1 {
  max-width: 80%;
}
.text-center h2 {
  max-width: 70%;
}
.text-center p {
  max-width: 50%;
}
@media (max-width: 1200px) {
  .text-center h1, .text-center h2 {
    max-width: 80%;
  }
  .text-center p {
    max-width: 70%;
  }
}
@media (max-width: 500px) {
  .text-center h1, .text-center h2 {
    max-width: 100%;
  }
  .text-center p {
    max-width: 100%;
  }
}

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

.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html {
  font-size: 15px;
}

dialog {
  margin: auto;
}

body {
  min-height: 100dvh;
  background-color: var(--c-bg);
  font-family: var(--font-body);
}

h1 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 1200px) {
  h1 {
    font-size: 2.25rem;
  }
}

h2 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 1200px) {
  h2 {
    font-size: 1.5rem;
  }
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 1200px) {
  h3 {
    font-size: 1.125rem;
  }
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 1200px) {
  h4 {
    font-size: 0.875rem;
  }
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

:where(.theme-ns) {
  accent-color: var(--c-accent);
}

:where(body) :focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

:where(body) ::selection {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.theme-ns :where(h1, h2) {
  font-weight: 400;
  letter-spacing: -0.02em;
}

.theme-ns :where(h3, h4) {
  font-weight: 500;
  letter-spacing: -0.01em;
}

:where(p, li, dd, td, blockquote) a:where(:not([class])) {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 28%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
:where(p, li, dd, td, blockquote) a:where(:not([class])):hover {
  color: var(--c-text);
  text-decoration-color: var(--c-accent-ink);
}

:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=hidden]), select, textarea) {
  background-color: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  color: var(--c-text);
}
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=hidden]), select, textarea)::placeholder {
  color: var(--c-dim);
}
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=hidden]), select, textarea):focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}

.app-preview {
  --ap-min: 1024;
  position: relative;
  width: 100%;
  min-width: 0;
  text-align: left;
}
@media (max-width: 1000px) {
  .app-preview {
    --ap-min: 0;
  }
}
.app-preview__window {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1024/790;
  max-height: 680px;
  background-color: var(--glass-bg-strong);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media (max-width: 1000px) {
  .app-preview__window {
    aspect-ratio: auto;
    height: 540px;
    max-height: none;
  }
}
.app-preview__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.02);
}
.app-preview__dots {
  display: flex;
  gap: 6px;
  width: 42px;
  flex-shrink: 0;
}
.app-preview__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-line-strong);
}
.app-preview__address {
  flex: 1;
  min-width: 0;
  margin-right: 42px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--c-muted);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-preview__viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.app-preview .app-preview__screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transform-origin: 0 0;
  background: transparent;
  container: ap-screen/inline-size;
}
.app-preview .app-preview__screen.app-shell {
  background: transparent;
}
.app-preview .app-shell__body {
  height: 100%;
  min-height: 0;
}
.app-preview__panes {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.app-preview__pane {
  height: 100%;
}
.app-preview__main {
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.app-preview .rd-player {
  position: relative;
  top: auto;
}
.app-preview .hh-stepper {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.app-preview .hh-stepper::-webkit-scrollbar {
  display: none;
}
.app-preview .hh-stepper > li {
  flex: 1 0 auto;
  scroll-snap-align: start;
}
.app-preview .hh-stepper__item {
  padding-inline: 10px;
  white-space: nowrap;
}
.app-preview .cl-option {
  min-width: 0;
}
.app-preview .cl-choices {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.app-preview .cl-choices::-webkit-scrollbar {
  display: none;
}
.app-preview .cl-choices .cl-choice {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}
@container ap-screen (max-width: 1100px) {
  .app-preview .guide-tool--text span {
    display: none;
  }
}
.app-preview__page {
  width: 100%;
  aspect-ratio: 744/1040;
}
.app-preview__page--blok {
  aspect-ratio: 744/1076;
}
.app-preview__page img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}
@media (max-width: 900px) {
  .app-preview .guide-reader.sidebar-open .guide-sidebar {
    transform: translateX(-100%);
  }
  .app-preview .guide-tool[data-action=download] {
    display: none;
  }
}
.app-preview [data-app-preview-pane=shelters] .app-preview__main {
  padding: 0;
}
.app-preview .app-preview__shm {
  height: 100%;
  min-height: 0;
}
.app-preview__map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app-preview__map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-preview__map-controls .maplibregl-ctrl-group {
  display: flex;
  flex-direction: column;
}
.app-preview__map-controls button {
  padding: 0;
  border: 0;
}
.app-preview__map-attribution {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: 100%;
  padding: 2px 8px;
  overflow: hidden;
  border-top-left-radius: var(--radius-control);
  background: var(--glass-solid-strong, var(--c-panel));
  color: var(--c-text-sec);
  font-size: 11px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-preview--hero .app-preview__window {
  aspect-ratio: auto;
  height: clamp(520px, 46vw, 680px);
  max-height: none;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media (max-width: 1000px) {
  .app-preview--hero .app-preview__window {
    height: 560px;
  }
}

.app-preview--hero.app-preview--bare .app-preview__window {
  height: clamp(480px, 40vw, 580px);
}
@media (max-width: 1000px) {
  .app-preview--hero.app-preview--bare .app-preview__window {
    height: 560px;
  }
}

.app-preview--bare {
  --ap-min: 752;
}
@media (max-width: 1000px) {
  .app-preview--bare {
    --ap-min: 0;
  }
}
.app-preview--bare .app-preview__spread {
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.app-preview--bare .app-preview__spread .app-preview__page {
  flex: none;
  width: 100%;
  aspect-ratio: 744/1053;
}
.app-preview--bare .app-preview__spread .app-preview__page img {
  object-fit: cover;
  object-position: top;
}

:where(.app-preview .ap-h2) {
  display: block;
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
@media (max-width: 1200px) {
  :where(.app-preview .ap-h2) {
    font-size: 1.5rem;
  }
}

:where(.app-preview .ap-h3) {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
@media (max-width: 1200px) {
  :where(.app-preview .ap-h3) {
    font-size: 1.125rem;
  }
}

:where(.app-preview .ap-h4) {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
@media (max-width: 1200px) {
  :where(.app-preview .ap-h4) {
    font-size: 0.875rem;
  }
}

.home-app-demo,
.app-tab-section__demo {
  container: demo/inline-size;
  max-width: 730px;
}

.home-app-demo {
  display: block;
  width: 100%;
  margin: 1.5rem auto 0;
}

button, a.button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  border-radius: var(--radius-control);
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
}
button.small, a.button.small {
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}
button.medium, a.button.medium {
  line-height: 1.5;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}
button.large, a.button.large {
  line-height: 1.5;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
button.full-width, a.button.full-width {
  width: 100%;
}
button.primary, a.button.primary {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s;
  border-color: transparent;
  background-color: var(--c-accent);
  background-image: none;
  color: var(--c-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 22px -10px var(--glow-accent-strong);
}
button.primary:hover, a.button.primary:hover {
  border-color: transparent;
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 28px -8px var(--glow-accent-strong);
}
button.secondary, a.button.secondary {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s;
  border-color: var(--glass-border);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  color: var(--c-text);
  box-shadow: var(--glass-highlight);
}
button.secondary:hover, a.button.secondary:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
@media screen {
  [data-theme=light] .theme-ns button.secondary, [data-theme=light] .theme-ns a.button.secondary {
    border-color: var(--c-line-strong);
    box-shadow: 0 1px 2px rgba(22, 22, 28, 0.05);
  }
  [data-theme=light] .theme-ns button.secondary:hover, [data-theme=light] .theme-ns a.button.secondary:hover {
    border-color: rgba(22, 22, 28, 0.26);
  }
}
button.tertiary.light, a.button.tertiary.light {
  border: 1px solid var(--c-line);
  color: var(--c-text);
}
button.tertiary.light:hover, a.button.tertiary.light:hover {
  background-color: var(--c-surface);
  border-color: var(--c-line-strong);
  color: var(--c-text);
}
button.destructive, a.button.destructive {
  border: 1px solid transparent;
  background-color: var(--c-danger);
  color: var(--c-on-accent);
}
button.destructive:hover, a.button.destructive:hover {
  background-color: var(--c-danger);
  filter: brightness(1.05);
}
button.primary:disabled, button.secondary:disabled, button.tertiary:disabled, button.destructive:disabled, a.button.primary:disabled, a.button.secondary:disabled, a.button.tertiary:disabled, a.button.destructive:disabled {
  cursor: not-allowed !important;
  background-color: transparent !important;
  color: var(--c-dim) !important;
}
button.primary:disabled:hover, button.secondary:disabled:hover, button.tertiary:disabled:hover, button.destructive:disabled:hover, a.button.primary:disabled:hover, a.button.secondary:disabled:hover, a.button.tertiary:disabled:hover, a.button.destructive:disabled:hover {
  background-color: transparent !important;
  color: var(--c-dim) !important;
}
button .icon, a.button .icon {
  color: inherit;
}

.top-divider {
  border: solid var(--c-dim);
  border-width: 1px 0 0 0;
}

.carousel-section .note {
  color: var(--c-dim);
  margin: auto;
  opacity: 0.5;
}
.carousel-section .section-wrapper .title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.carousel-section .section-wrapper .title-wrapper .content {
  width: 40%;
  margin: auto;
}
@media (max-width: 1200px) {
  .carousel-section .section-wrapper .title-wrapper .content {
    width: 60%;
  }
}
@media (max-width: 500px) {
  .carousel-section .section-wrapper .title-wrapper .content {
    width: 100%;
  }
}
.carousel-section .section-wrapper .carousel-list {
  overflow-x: auto;
  padding-bottom: 1.5rem;
}
.carousel-section .section-wrapper .carousel-list .carousel-list-items {
  display: flex;
  gap: 1.5rem;
}
.carousel-section .section-wrapper .carousel-list .carousel-list-items .carousel-item {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  min-width: 32rem;
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  line-height: 1.3;
}
@media (max-width: 500px) {
  .carousel-section .section-wrapper .carousel-list .carousel-list-items .carousel-item {
    min-width: 24rem;
    max-width: 24rem;
  }
}
.carousel-section .section-wrapper .carousel-list .carousel-list-items .carousel-item .header p:nth-child(2) {
  margin-top: 0.125rem;
}
.carousel-section .section-wrapper .carousel-list .carousel-list-items .carousel-item p:not(.header) {
  color: var(--c-text-sec);
}

.cards-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (max-width: 500px) {
  .cards-carousel {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 0.75rem;
  }
}
.cards-carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  padding-bottom: 0.25rem;
}
@media (max-width: 500px) {
  .cards-carousel__track {
    order: 1;
    flex: 0 0 100%;
  }
}
.cards-carousel__track::-webkit-scrollbar {
  display: none;
}
.cards-carousel__track .landing-persona-card {
  flex: 0 0 320px;
  height: auto;
  align-self: stretch;
  scroll-snap-align: start;
}
@media (max-width: 500px) {
  .cards-carousel__track .landing-persona-card {
    flex: 0 0 80vw;
  }
}
.cards-carousel__arrow {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.cards-carousel__arrow:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.cards-carousel__arrow {
  cursor: pointer;
}
.cards-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
@media (max-width: 500px) {
  .cards-carousel__arrow {
    order: 2;
  }
}

.page-home .store-container .cards-carousel__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.landing-persona-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  height: 100%;
  transition: box-shadow 0.3s ease;
}
.landing-persona-card.high {
  min-height: 20rem;
}
.landing-persona-card.short {
  min-height: 14.5rem;
}
.landing-persona-card .landing-persona-card__quote-short, .landing-persona-card .landing-persona-card__quote-height {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--c-text-sec);
  line-height: 1.55;
  padding: 0;
  border: none;
  quotes: none;
}
.landing-persona-card__quote-height {
  height: 4rem;
}
.landing-persona-card__quote-short {
  height: 2rem;
}
.landing-persona-card__situation {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-text);
  line-height: 1.7;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}
.landing-persona-card__context {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-muted);
  margin: auto 0 0;
  padding-top: 1.25rem;
}

.landing .landing-persona-card,
.page-home .store-container .landing-persona-card {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
.landing .landing-persona-card__quote-height,
.page-home .store-container .landing-persona-card__quote-height {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.landing .landing-persona-card__situation,
.page-home .store-container .landing-persona-card__situation {
  color: var(--c-muted);
}
.landing .landing-persona-card__context,
.page-home .store-container .landing-persona-card__context {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.landing .landing-persona-card {
  align-items: start;
  height: 100%;
  transition: border-color 0.15s, background-color 0.15s;
}
.landing .landing-persona-card:hover {
  background-color: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}
.landing .landing-persona-card__situation {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}
.landing .landing-persona-card__context {
  margin: auto 0 0;
  padding-top: 1.25rem;
}

.page-home .store-container .landing-persona-card__context {
  margin-top: auto;
}

.input-list {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.25rem;
  width: 100%;
}
.input-list > .errors {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.375rem;
  align-self: stretch;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--c-danger) 40%, transparent);
  border-radius: var(--radius-control);
  background: var(--c-danger-soft);
}
.input-list > .errors p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-text);
}
.input-list > .errors p::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--c-danger);
}

.input-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.375rem;
  width: 100%;
  --field-bg: var(--c-panel);
  --field-border: color-mix(in srgb, var(--c-text) 40%, transparent);
  --field-border-hover: color-mix(in srgb, var(--c-text) 58%, transparent);
}
@media screen {
  [data-theme=light] .theme-ns .input-container {
    --field-bg: var(--c-surface);
    --field-border: color-mix(in srgb, var(--c-text) 50%, transparent);
    --field-border-hover: color-mix(in srgb, var(--c-text) 68%, transparent);
  }
}
.input-container label {
  font-size: 13px;
  color: var(--c-text-sec);
  font-weight: 400;
}
.input-container input {
  width: 100%;
  min-height: 44px;
  padding: 0 0.75rem;
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color 0.15s, box-shadow 0.15s;
}
@media (max-width: 500px) {
  .input-container input {
    font-size: 16px;
  }
}
.input-container input::placeholder {
  color: var(--c-muted);
  opacity: 1;
}
.input-container input:hover {
  border-color: var(--field-border-hover);
}
.input-container input:focus {
  outline: none;
  border-color: var(--c-focus);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.input-container input[aria-invalid=true] {
  border-color: var(--c-danger);
}
.input-container input[aria-invalid=true]:focus {
  box-shadow: 0 0 0 3px var(--c-danger-soft);
}
.input-container input:-webkit-autofill {
  -webkit-text-fill-color: var(--c-text);
  box-shadow: 0 0 0 1000px var(--field-bg) inset;
  caret-color: var(--c-text);
}
.input-container input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--field-bg) inset, 0 0 0 3px var(--c-accent-ring);
}
.input-container input.input-code {
  min-height: 50px;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.24em;
}
.input-container input.input-code::placeholder {
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0;
}
.input-container .input-help {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-muted);
}
.input-container .errors {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.25rem;
}
.input-container .errors p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-danger);
  font-weight: 500;
}

.icon {
  color: var(--c-muted);
}
.icon.small {
  width: 1rem;
  height: 1rem;
}
.icon.medium {
  width: 1.25rem;
  height: 1.25rem;
}
.icon.large {
  width: 1.5rem;
  height: 1.5rem;
}

.navbar {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  -webkit-backdrop-filter: var(--glass-filter-strong);
  backdrop-filter: var(--glass-filter-strong);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: none;
}
@media (max-width: 1200px) {
  .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.navbar .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  position: relative;
  background-color: var(--glass-bg-strong);
  padding: 1rem;
  color: var(--c-text);
}
@media (max-width: 1200px) {
  .navbar .container {
    padding: 0.75rem 1rem;
    background-color: var(--glass-solid-strong);
    background-image: none;
  }
}
.navbar .container .left, .navbar .container .right {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  height: 100%;
}
.navbar .container .left .content, .navbar .container .right .content {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1rem;
}
.navbar .container .left {
  width: 100%;
}
.navbar .container .left .logo-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.navbar .container .left .logo-text .logo {
  color: var(--c-text);
  overflow: visible;
}
.navbar .container .right {
  gap: 1.5rem;
}
@media (min-width: 1201px) {
  .navbar .container .right {
    gap: 0.25rem;
  }
}
@media (max-width: 1200px) {
  .navbar .container .right {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    padding: 0.5rem 1rem 2rem;
    overflow-y: auto;
    background-color: var(--c-bg);
  }
  .navbar .container .right .content {
    border-bottom: 1px solid var(--c-line);
    opacity: 0;
    transform: translateY(-0.25rem);
    transition: opacity 0s linear 0.25s, transform 0s linear 0.25s;
  }
  .navbar .container .right a {
    flex: 1;
    padding: 1.25rem 0;
    white-space: normal;
  }
}
.navbar .container .right a {
  color: var(--c-muted);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
@media (min-width: 1201px) {
  .navbar .container .right a {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-control);
  }
  .navbar .container .right a:hover {
    background-color: var(--pill-active);
    box-shadow: var(--pill-active-shadow);
    color: var(--c-text);
  }
}
.navbar .container .right .active {
  color: var(--c-text);
}
@media (min-width: 1201px) {
  .navbar .container .right .active {
    background-color: var(--pill-active);
    box-shadow: var(--pill-active-shadow);
    color: var(--c-text);
  }
  .navbar .container .right .active:hover {
    background-color: var(--pill-active);
    box-shadow: var(--pill-active-shadow);
    color: var(--c-text);
  }
}
.navbar .container .right .navbar-profile {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0;
  color: var(--c-muted);
  text-decoration: none;
  border-radius: 0.375rem;
  transition: color 0.2s;
}
.navbar .container .right .navbar-profile:hover {
  color: var(--c-text);
}
.navbar .container .right .navbar-profile svg {
  width: 16px;
  height: 16px;
}
.navbar .container .right .navbar-profile__label {
  display: none;
}
@media (max-width: 1200px) {
  .navbar .container .right .navbar-profile {
    gap: 0.75rem;
  }
  .navbar .container .right .navbar-profile__label {
    display: inline;
  }
}
@media (min-width: 1201px) {
  .navbar .container .right .navbar-profile {
    display: inline-grid;
    place-items: center;
    place-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    background-color: var(--glass-bg);
    background-image: var(--glass-sheen);
    box-shadow: var(--glass-highlight);
    color: var(--c-muted);
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
  }
  .navbar .container .right .navbar-profile:hover {
    border-color: var(--glass-border-hover);
    background-color: var(--glass-bg-hover);
    color: var(--c-text);
  }
  .navbar .container .right .navbar-profile:hover .icon {
    color: var(--c-text);
  }
}
.navbar .container .right .navbar-profile--app {
  color: var(--c-text);
}
.navbar .container .right .navbar-profile--app .icon {
  color: var(--c-text);
}
@media (min-width: 1201px) {
  .navbar .container .right .navbar-profile--app {
    background-color: var(--pill-active);
    border-color: var(--glass-border-hover);
  }
  .navbar .container .right .navbar-profile--app:hover {
    background-color: var(--pill-active);
    border-color: var(--glass-border-hover);
  }
}
.navbar .navbar-burger {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.navbar .navbar-burger:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.navbar .navbar-burger {
  flex-shrink: 0;
  color: var(--c-text);
  display: none;
}
@media (max-width: 1200px) {
  .navbar .navbar-burger {
    display: grid;
  }
}
.navbar .navbar-burger svg {
  width: 18px;
  height: 18px;
}
.navbar .navbar-burger__open, .navbar .navbar-burger__close {
  display: flex;
}
.navbar .navbar-burger__close {
  display: none;
}
@media (max-width: 1200px) {
  .navbar--open .container .right {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }
  .navbar--open .container .right .content {
    opacity: 1;
    transform: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .navbar--open .container .right .content:nth-child(1) {
    transition-delay: 0.11s;
  }
  .navbar--open .container .right .content:nth-child(2) {
    transition-delay: 0.16s;
  }
  .navbar--open .container .right .content:nth-child(3) {
    transition-delay: 0.21s;
  }
}
.navbar--open .navbar-burger__open {
  display: none;
}
.navbar--open .navbar-burger__close {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .navbar .container .right,
  .navbar .container .right .content {
    transform: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}
body.navbar-menu-open {
  overflow: hidden;
}

.theme-switch {
  display: none;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-control);
  border: 1px solid var(--glass-border);
  background-color: var(--pill-bg);
  box-shadow: var(--glass-highlight);
}
[data-theme] .theme-switch {
  display: inline-flex;
}
.theme-switch__option {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.theme-switch__option span {
  display: grid;
  place-items: center;
}
.theme-switch__option .icon {
  width: 15px;
  height: 15px;
}
.theme-switch__option:hover {
  color: var(--c-text);
}
.theme-switch__option:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}
[data-theme=light] .theme-switch__option[data-theme-option=light], [data-theme=dark] .theme-switch__option[data-theme-option=dark] {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}

.landing-footer {
  background: var(--c-bg);
  padding: 2rem 2.5rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 500px) {
  .landing-footer {
    padding: 1.5rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
  }
}
.landing-footer__left {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1.5rem;
}
.landing-footer__brand {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-text);
}
.landing-footer__sep {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--c-muted);
  opacity: 0.4;
}
.landing-footer__tagline {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-muted);
}
.landing-footer__right {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 1.25rem;
}
@media (max-width: 500px) {
  .landing-footer__right {
    flex-wrap: wrap;
  }
}
.landing-footer__link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-muted);
  text-decoration: none;
}
.landing-footer a.landing-footer__link {
  transition: color 0.15s;
}
.landing-footer a.landing-footer__link:hover {
  color: var(--c-text);
}

.share-badge {
  position: fixed;
  z-index: 90;
  bottom: calc(calc(50px + 1rem * 2 + env(safe-area-inset-bottom, 0px)) - 1rem + 0.75rem);
  left: 0;
  right: 0;
  width: fit-content;
  max-width: min(760px, 100vw - 2rem);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  background-color: var(--glass-bg-strong);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  -webkit-backdrop-filter: var(--glass-filter-strong);
  backdrop-filter: var(--glass-filter-strong);
  border-radius: var(--radius-group);
  color: var(--c-muted);
  font-size: 13px;
  line-height: 1.45;
}
.share-badge[hidden] {
  display: none;
}
.share-badge__icon {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 32px;
  height: 32px;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-control);
  color: var(--c-text);
}
.share-badge__icon .icon {
  width: 16px;
  height: 16px;
}
.share-badge--guest .share-badge__icon {
  background: transparent;
  color: var(--c-warn);
}
.share-badge__text {
  margin: 0;
  min-width: 0;
  color: var(--c-text);
}
.share-badge__actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 6px;
}
.share-badge__actions .button,
.share-badge__actions button {
  white-space: nowrap;
  font-size: 13px;
}
.share-badge__actions .button.secondary,
.share-badge__actions button.secondary {
  border-color: var(--c-line);
  background-color: var(--c-line);
  color: var(--c-text);
}
.share-badge__actions .button.secondary:hover,
.share-badge__actions button.secondary:hover {
  border-color: var(--c-line-strong);
  background-color: var(--c-line-strong);
  color: var(--c-text);
}
.share-badge__form {
  margin: 0;
}
.share-badge__status {
  flex-basis: 100%;
  order: 10;
  padding-left: calc(2rem + 0.75rem);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
}
.share-badge__status[hidden] {
  display: none;
}
.share-badge__dismiss {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-tag);
  background: none;
  color: var(--c-muted);
  transition: all 0.15s ease-in-out;
}
.share-badge__dismiss .icon {
  width: 0.95rem;
  height: 0.95rem;
}
.share-badge__dismiss:hover {
  background: var(--c-surface-hover);
  color: var(--c-text);
}
.share-badge__dismiss:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.share-badge:has(.share-badge__status:not([hidden])) {
  flex-wrap: wrap;
}
@media (max-width: 1000px) {
  .share-badge {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
    flex-wrap: wrap;
  }
  .share-badge__text {
    flex: 1 1 14rem;
  }
  .share-badge__actions {
    flex-wrap: wrap;
  }
}
@media (max-width: 500px) {
  .share-badge {
    align-items: flex-start;
  }
  .share-badge__icon {
    display: none;
  }
  .share-badge__text {
    flex-basis: calc(100% - 2.5rem);
  }
  .share-badge__actions {
    width: 100%;
  }
  .share-badge__actions .button,
  .share-badge__actions button {
    flex: 1 1 auto;
  }
  .share-badge__status {
    padding-left: 0;
  }
  .share-badge__dismiss {
    order: -1;
    margin-left: auto;
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
  }
  .share-badge--invite .share-badge__text {
    padding-right: 1.5rem;
  }
}

body:has(.share-badge:not([hidden])) .app-main:not(.app-main--flush) {
  padding-bottom: 6.5rem;
}
@media (max-width: 1000px) {
  body:has(.share-badge:not([hidden])) .app-main:not(.app-main--flush) {
    padding-bottom: 10rem;
  }
}

.app-messages {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}
.app-messages .auth-alert {
  margin: 0;
}

.share-confirm .account-dialog__actions form,
.join-modal .account-dialog__actions form {
  margin: 0;
}

.join-modal__step {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 1.25rem;
}
.join-modal__step[hidden] {
  display: none;
}
.join-modal .auth-alert[hidden] {
  display: none;
}

.app-screen.share-page {
  max-width: 900px;
  margin: 0;
}

.share-page__cards {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 1.25rem;
}
.share-page .account-card {
  max-width: none;
}
.share-page .account-form {
  gap: 1.25rem;
}
.share-page .auth-alert {
  margin-bottom: 1rem;
}
.share-page .auth-alert[hidden] {
  display: none;
}
.share-page__actions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.share-page__actions form {
  margin: 0;
}

.share-link {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}
.share-link__input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  color: var(--c-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.share-link__input::placeholder {
  color: var(--c-dim);
}
.share-link__input:hover {
  border-color: var(--c-line-strong);
}
.share-link__input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.share-link__input {
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.share-link button {
  flex-shrink: 0;
}
.share-link__status {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
}
.share-link__status[hidden] {
  display: none;
}
@media (max-width: 500px) {
  .share-link {
    flex-direction: column;
  }
  .share-link button {
    width: 100%;
  }
}

.share-slug {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
  gap: 0;
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  background: var(--c-panel);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.share-slug:hover {
  border-color: var(--c-line-strong);
}
.share-slug:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.share-slug__prefix {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0;
  padding: 0 0.25rem 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-muted);
  white-space: nowrap;
}
.account-form__field .share-slug input[type=text] {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 0;
  padding-left: 0;
}
.account-form__field .share-slug input[type=text], .account-form__field .share-slug input[type=text]:hover, .account-form__field .share-slug input[type=text]:focus {
  border: none;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 13px;
}
@media (max-width: 500px) {
  .share-slug {
    flex-direction: column;
  }
  .share-slug__prefix {
    padding: 0.5rem 0.75rem 0;
  }
  .account-form__field .share-slug input[type=text] {
    padding-left: 0.75rem;
  }
}

.share-members {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
}
.share-members__item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  font-size: 0.875rem;
  color: var(--c-text);
}
.share-members__item + .share-members__item {
  border-top: 1px solid var(--c-line);
}
.share-members__item form {
  margin: 0;
}
.share-members__meta {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
}
.share-members__empty {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  color: var(--c-muted);
}

body:has(> .app-dock) {
  padding-bottom: calc(50px + 1rem * 2 + env(safe-area-inset-bottom, 0px));
}
@media print {
  body:has(> .app-dock) {
    padding-bottom: 0;
  }
}

.app-dock {
  position: fixed;
  z-index: 95;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  left: 1rem;
  right: 1rem;
  width: fit-content;
  max-width: calc(100vw - 1rem * 2);
  height: 50px;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background-color: var(--glass-bg-strong);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  -webkit-backdrop-filter: var(--glass-filter-strong);
  backdrop-filter: var(--glass-filter-strong);
  border-radius: var(--radius-card);
}
.app-dock::-webkit-scrollbar {
  display: none;
}
@media print {
  .app-dock {
    display: none;
  }
}
@media (max-width: 500px) {
  .app-dock {
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    left: 0.75rem;
    right: 0.75rem;
    max-width: calc(100vw - 0.75rem * 2);
  }
}
.app-dock__nav {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0;
  width: max-content;
  height: 100%;
  padding: 5px;
}
.app-dock__group, .app-dock__footer {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  height: 100%;
}
.app-dock__footer, .app-dock__group--account {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--c-line);
}
.app-dock__group-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.app-dock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 2px;
  height: 100%;
}
.app-dock__list > li {
  position: relative;
  height: 100%;
}
.app-dock__more {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--c-muted);
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}
.app-dock__more:hover, .app-dock__more.is-active {
  color: var(--c-text);
}
.app-dock__more:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}
.app-dock__more-chevron {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s ease-in-out;
}
.app-dock__more:hover .app-dock__more-chevron {
  transform: translateX(2px);
}
.app-dock .app-tab {
  width: auto;
  height: 100%;
  padding: 0 12px;
  white-space: nowrap;
}
.app-dock .app-tab.has-info {
  padding-right: 38px;
}
.app-dock .app-tab__info {
  right: 5px;
}
.app-dock .app-tab__form {
  height: 100%;
}

.app-readonly-note {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1rem;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-control);
}
.app-readonly-note::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 5rem;
  background: var(--c-accent);
}
.app-readonly-note[hidden] {
  display: none;
}

.guide-reader.is-readonly .guide-tool[hidden],
.hh-app.is-readonly .landing-btn[hidden],
.hh-app.is-readonly .guide-link[hidden],
.hh-app.is-readonly .hh-file[hidden],
[data-checklist-app].is-readonly .guide-link[hidden] {
  display: none;
}

.guide-reader.is-readonly .guide-toc__toggle:disabled {
  cursor: default;
}
.guide-reader.is-readonly .guide-list__note--readonly {
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hh-app.is-readonly .hh-input:disabled {
  opacity: 1;
  color: var(--c-text);
  -webkit-text-fill-color: var(--c-text);
  background: transparent;
  border-style: dashed;
  border-color: var(--c-line-strong);
  cursor: default;
}
.hh-app.is-readonly .hh-input:disabled::placeholder {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hh-app.is-readonly select.hh-input:disabled {
  appearance: none;
}

[data-checklist-app].is-readonly .cl-item__main,
[data-checklist-app].is-readonly .cl-choice {
  cursor: default;
}
[data-checklist-app].is-readonly .cl-item__main input:disabled,
[data-checklist-app].is-readonly .cl-choice input:disabled {
  opacity: 1;
  cursor: default;
}
[data-checklist-app].is-readonly .cl-counter__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: 1100px;
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  list-style: none;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
@media (max-width: 500px) {
  .trust-strip {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }
}
.trust-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  color: var(--c-muted);
}
.trust-strip__item .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--c-text-sec);
}
.trust-strip__item a {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 3px;
}
.trust-strip__item a:hover {
  text-decoration-color: currentColor;
}

.upgrade-panel__box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}
@media (max-width: 500px) {
  .upgrade-panel__box {
    padding: 1.25rem 1rem;
  }
}
.upgrade-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.upgrade-panel__title {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.upgrade-panel__intro {
  margin: 0;
  color: var(--c-text-sec);
  line-height: 1.55;
}
.upgrade-panel__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (max-width: 640px) {
  .upgrade-panel__options {
    grid-template-columns: 1fr;
  }
}
.upgrade-panel__fine {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-muted);
}

.upgrade-option {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
.upgrade-option__title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.upgrade-option__sub {
  margin: 0;
  font-size: 14px;
  color: var(--c-text-sec);
}
.upgrade-option__list-title {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.upgrade-option__list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.upgrade-option__list li {
  padding: 6px 0;
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  color: var(--c-text-sec);
}
.upgrade-option__button {
  width: 100%;
  margin-top: 0.5rem;
}

.nl-form {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  text-align: left;
}
.nl-form .nl-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.nl-form .nl-form__row {
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 500px) {
  .nl-form .nl-form__row {
    flex-direction: column;
  }
}
.nl-form .nl-form__field {
  flex: 1;
  min-width: 0;
}
.nl-form .nl-form__field .nl-form__email {
  width: 100%;
  min-height: 40px;
  max-width: none;
  margin: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-control);
  background: var(--c-panel);
  color: var(--c-text);
  font: inherit;
  font-size: 0.875rem;
}
.nl-form .nl-form__field .nl-form__email::placeholder {
  color: var(--c-muted);
}
.nl-form .nl-form__field .nl-form__email:hover {
  border-color: var(--c-text-sec);
}
.nl-form .nl-form__field .nl-form__email:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.nl-form .nl-form__field .nl-form__email[aria-invalid=true] {
  border-color: var(--c-danger);
}
.nl-form .nl-form__submit {
  flex: none;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 500px) {
  .nl-form .nl-form__submit {
    width: 100%;
  }
}
.nl-form .nl-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
.nl-form .nl-form__error {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-danger);
}
.nl-form .nl-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.nl-form .nl-form__done {
  padding: 0.875rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  background: var(--c-panel);
}
.nl-form .nl-form__done:focus {
  outline: none;
}
.nl-form .nl-form__done-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-text);
}
.nl-form .nl-form__done-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-text-sec);
}

.nl-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-text-sec);
  cursor: pointer;
  text-align: left;
}
.nl-consent input[type=checkbox] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.nl-consent.nl-consent--signup {
  margin: 1rem 0 0.5rem;
}

.nl-form .nl-privacy,
.nl-privacy.nl-privacy--signup {
  margin: 0.75rem 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted);
  text-align: left;
}
.nl-form .nl-privacy a,
.nl-privacy.nl-privacy--signup a {
  color: var(--c-text-sec);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nl-privacy.nl-privacy--signup {
  margin-bottom: 1rem;
}

.nl-box {
  margin: 2rem 0;
  padding: 1.5rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen), var(--wash-accent);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  text-align: left;
}
@media (max-width: 500px) {
  .nl-box {
    padding: 1rem;
  }
}
.nl-box .nl-box__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
}
.nl-box .nl-box__text {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-text-sec);
}
.nl-box .nl-form {
  max-width: none;
}
.nl-box .nl-box__more {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-text-sec);
}
.nl-box .nl-box__more a {
  color: var(--c-text);
}
.nl-box.nl-box--review {
  margin: 1.5rem 0;
}

.home-newsletter {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

.nl-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.nl-page__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(64px + 3rem) 1.5rem 4rem;
}
@media (max-width: 500px) {
  .nl-page__main {
    padding: calc(64px + 1.5rem) 1rem 2.5rem;
  }
}
.nl-page__card {
  width: 100%;
  max-width: 34rem;
  padding: 2rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
@media (max-width: 500px) {
  .nl-page__card {
    padding: 1.5rem;
  }
}
.nl-page__title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-text);
}
.nl-page__text {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text-sec);
}
.nl-page__text a {
  color: var(--c-text);
}
.nl-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.nl-page__link {
  font-size: 0.875rem;
  color: var(--c-text-sec);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nl-page__link:hover {
  color: var(--c-text);
}

.account-dialog {
  width: min(90vw, 440px);
  padding: 1.5rem;
  color: var(--c-text);
  background-color: var(--glass-bg-strong);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  -webkit-backdrop-filter: var(--glass-filter-strong);
  backdrop-filter: var(--glass-filter-strong);
  border-radius: var(--radius-card);
}
.account-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}
@media screen {
  [data-theme=light] .theme-ns .account-dialog {
    background-color: var(--glass-solid);
    background-image: none;
    border-color: var(--c-line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  [data-theme=light] .theme-ns .account-dialog::backdrop {
    background: rgba(22, 22, 28, 0.32);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}
.account-dialog .account-form {
  margin-top: 0;
}
.account-dialog.hb-info {
  width: min(92vw, 520px);
}
.account-dialog.upgrade-panel {
  width: min(760px, 100% - 2 * 1rem);
  max-height: calc(100% - 2 * 1rem);
  padding: 0;
}
.account-dialog.upgrade-panel::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.account-dialog__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.account-dialog__close {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.account-dialog__close:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.account-dialog__close {
  flex: none;
  color: var(--c-text);
}
.account-dialog__close .icon {
  width: 16px;
  height: 16px;
}

.prose {
  color: var(--c-text);
}
.prose ul {
  margin-top: 0.75rem;
}
.prose ul li {
  margin-top: 0.375rem;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-muted);
}
.prose ul:not([class]) {
  padding-left: 1.25rem;
  list-style: disc;
}
.prose ul:not([class]) li::marker {
  color: var(--c-dim);
}
.prose .article-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}
.prose .article-checklist li {
  position: relative;
  margin-top: 0;
  padding-left: 28px;
}
.prose .article-checklist li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 3px;
  width: 11px;
  height: 5.5px;
  border-left: 1.5px solid var(--c-accent-ink);
  border-bottom: 1.5px solid var(--c-accent-ink);
  transform: rotate(-45deg);
  transform-origin: center;
}
.prose .article-table__wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-strong) transparent;
}
.prose .article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
}
.prose .article-table th,
.prose .article-table td {
  min-width: 8rem;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
@media (max-width: 500px) {
  .prose .article-table th,
  .prose .article-table td {
    padding: 10px 12px;
  }
}
.prose .article-table thead th {
  background-color: var(--c-panel);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
}
.prose .article-table tbody td:first-child {
  color: var(--c-text);
}
@media (max-width: 500px) {
  .prose .article-table th,
  .prose .article-table td {
    min-width: 10.5rem;
  }
  .prose .article-table th:first-child,
  .prose .article-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 7.5rem;
    max-width: 9rem;
    box-shadow: inset -1px 0 0 var(--c-line);
  }
  .prose .article-table th:first-child {
    background-color: var(--c-panel);
  }
  .prose .article-table td:first-child {
    background-color: var(--c-bg);
  }
}
.prose .article-table tbody tr:last-child td {
  border-bottom: 0;
}
.prose .article-table a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.prose .article-table a .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--c-muted);
}
.prose .article-callout {
  margin-top: 1.25rem;
  padding: 20px 24px;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
@media (max-width: 500px) {
  .prose .article-callout {
    padding: 18px;
  }
}
.prose .article-callout p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}
.prose .article-callout p + p {
  margin-top: 0.75rem;
}
.prose .article-callout strong {
  font-weight: 500;
  color: var(--c-text);
}
.prose img,
.prose figure {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 1.25rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
}
.prose figure img {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.prose figcaption {
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  color: var(--c-muted);
}
.prose blockquote {
  margin: 1.25rem 0 0;
  padding: 2px 0 2px 1.25rem;
  border-left: 1px solid var(--c-line-strong);
  color: var(--c-text-sec);
}
.prose blockquote p {
  margin-top: 0;
  color: var(--c-text-sec);
}
.prose code {
  padding: 1px 5px;
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  background: var(--glass-bg-soft);
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--c-text);
}
.prose pre {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text);
}
.prose pre code {
  padding: 0;
  border: 0;
  background: none;
}

.inpost-modal {
  background-color: var(--glass-solid-strong);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  border-radius: var(--radius-card);
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  position: fixed;
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
  z-index: 200;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 500px) {
  .inpost-modal {
    max-width: 90%;
  }
}
.inpost-modal .inpost-modal__step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  overflow-y: auto;
}
.inpost-modal .inpost-summary-tiles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex: 1;
}
@media (max-width: 1200px) {
  .inpost-modal .inpost-summary-tiles {
    flex-direction: column;
  }
}
.inpost-modal .inpost-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  align-items: start;
  gap: 1.25rem;
  width: 100%;
  max-width: 58rem;
}
@media (max-width: 1200px) {
  .inpost-modal .inpost-summary {
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
  }
}
.inpost-modal .inpost-summary__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  max-height: 30rem;
  overflow-y: auto;
}
.inpost-modal .inpost-summary__gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
}
@media (max-width: 1200px) {
  .inpost-modal .inpost-summary__gallery {
    display: flex;
    gap: 0.5rem;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }
  .inpost-modal .inpost-summary__gallery img {
    flex: 0 0 auto;
    width: 7rem;
    scroll-snap-align: start;
  }
}
.inpost-modal .inpost-summary .inpost-summary-tile {
  max-width: 100%;
  max-height: none;
  overflow-y: auto;
}
@media (max-width: 1200px) {
  .inpost-modal .inpost-summary .inpost-summary-tile {
    max-height: none;
    overflow-y: visible;
  }
}
.inpost-modal .inpost-summary[data-variant=go] .inpost-summary__gallery img:first-child {
  filter: brightness(0.945);
}
.inpost-modal .inpost-summary-tile {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 30rem;
  max-width: 20rem;
  height: 100%;
}
@media (max-width: 1200px) {
  .inpost-modal .inpost-summary-tile {
    max-width: 100%;
  }
}
.inpost-modal .inpost-summary-tile__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.inpost-modal .inpost-summary-tile__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text);
}
.inpost-modal .inpost-summary-tile__badge {
  padding: 2px 8px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-hover);
  border-radius: var(--radius-tag);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-text);
  align-self: flex-start;
}
.inpost-modal .inpost-summary-tile__kicker {
  align-self: flex-start;
  padding: 2px 8px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-tag);
  background: var(--c-accent-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-text);
}
.inpost-modal .inpost-summary-tile__price {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.inpost-modal .inpost-summary-tile__desc {
  font-size: 13px;
  color: var(--c-muted);
}
.inpost-modal .inpost-summary-tile__presale {
  color: var(--c-text);
}
.inpost-modal .inpost-summary-tile__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.inpost-modal .inpost-summary-tile__list li {
  font-size: 13px;
  color: var(--c-text-sec);
  padding-left: 1.25rem;
  position: relative;
}
.inpost-modal .inpost-summary-tile__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 600;
}
.inpost-modal .inpost-title-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
}
.inpost-modal .inpost-title-wrapper h4 {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.inpost-modal .inpost-title-wrapper h4:focus {
  outline: none;
}
.inpost-modal .inpost-title-wrapper .close-modal {
  background-color: transparent;
}
.inpost-modal .note {
  color: var(--c-muted);
  padding: 0.375rem 0.75rem;
  width: 100%;
  background-color: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  font-size: 13px;
}
.inpost-modal .inpost-modal__upgrade-note {
  color: var(--c-text);
  border: 1px solid var(--c-accent);
}
.inpost-modal .checkout-email {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--c-text);
}
.inpost-modal .checkout-email input {
  border: 1px solid var(--c-line);
  width: 100%;
}
.inpost-modal .checkout-email__hint {
  color: var(--c-muted);
  font-size: 13px;
}
.inpost-modal .delivery-options-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--c-text);
}
.inpost-modal .delivery-options-wrapper .select-wrapper {
  border: 1px solid var(--c-line);
}
.inpost-modal .delivery-options-wrapper .select-wrapper select {
  width: 100%;
}
.inpost-modal .geowidget-wrapper {
  overflow-y: auto;
  height: 100%;
  width: 100%;
}
.inpost-modal .geowidget-wrapper .geowidget {
  height: 100%;
  width: 100%;
  min-height: 600px;
}
.inpost-modal .courier-wrapper {
  height: 100%;
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.inpost-modal .courier-wrapper .courier-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.inpost-modal .courier-wrapper .courier-input-wrapper input {
  border: 1px solid var(--c-line);
  width: 100%;
}
.inpost-modal .courier-wrapper .autocomplete-results {
  background-color: var(--c-surface);
  border-radius: var(--radius-control);
}
.inpost-modal .courier-wrapper .autocomplete-results:not(:empty) {
  border: 1px solid var(--c-line);
}
.inpost-modal .courier-wrapper .autocomplete-results autocomplete-prediction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--c-text-sec);
  cursor: pointer;
}
.inpost-modal .courier-wrapper .autocomplete-results autocomplete-prediction:hover {
  background-color: var(--c-surface-hover);
  color: var(--c-text);
}
.inpost-modal .button-wrapper {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.inpost-modal .inpost-modal__step .button-wrapper {
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}
.inpost-modal .go-to-payment:disabled {
  border: 1px solid var(--c-line);
}
.inpost-modal .inpost-modal__close {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.inpost-modal .inpost-modal__close:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.inpost-modal .inpost-modal__close {
  flex: none;
  color: var(--c-text);
  cursor: pointer;
}
.inpost-modal .inpost-modal__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.inpost-modal .inpost-modal__close .icon {
  width: 16px;
  height: 16px;
}
.inpost-modal .inpost-choice {
  width: 100%;
  max-width: 58rem;
  margin: 0 auto;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.5rem;
}
@media (max-width: 1200px) {
  .inpost-modal .inpost-choice {
    max-width: 30rem;
    grid-template-columns: minmax(0, 1fr);
  }
}
.inpost-modal .inpost-choice__legend {
  grid-column: 1/-1;
  margin-bottom: 0.5rem;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.inpost-modal .inpost-choice__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 2px;
  padding: 0.75rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-control);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.inpost-modal .inpost-choice__option:hover {
  border-color: var(--glass-border-hover);
}
.inpost-modal .inpost-choice__option input {
  grid-row: span 2;
  margin: 0;
  accent-color: var(--c-accent);
}
.inpost-modal .inpost-choice__option:has(input:checked) {
  border-color: var(--c-accent);
  background-color: var(--c-accent-soft);
}
.inpost-modal .inpost-choice__option:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}
.inpost-modal .inpost-choice__name {
  font-size: 14px;
}
.inpost-modal .inpost-choice__price {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--c-text-sec);
}
.inpost-modal .inpost-choice-hint {
  width: 100%;
  max-width: 58rem;
  margin: 0 auto;
  font-size: 13px;
  color: var(--c-muted);
}
@media (max-width: 1200px) {
  .inpost-modal .inpost-choice-hint {
    max-width: 30rem;
  }
}
.inpost-modal .inpost-choice-hint a {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inpost-modal .inpost-choice-hint a:hover {
  color: var(--c-accent);
}
.inpost-modal .inpost-summary-tile__upgrade {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.inpost-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.6);
}

.inpost-modal .checkout-email label,
.inpost-modal .delivery-options-wrapper label,
.inpost-modal .courier-wrapper label {
  font-size: 13px;
  color: var(--c-muted);
}
.inpost-modal .checkout-email input,
.inpost-modal .courier-wrapper .courier-input-wrapper input,
.inpost-modal .delivery-options-wrapper .select-wrapper {
  background-color: var(--c-panel);
  border-color: var(--c-line);
  border-radius: var(--radius-control);
  color: var(--c-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.inpost-modal .checkout-email input:hover,
.inpost-modal .courier-wrapper .courier-input-wrapper input:hover,
.inpost-modal .delivery-options-wrapper .select-wrapper:hover {
  border-color: var(--c-line-strong);
}
.inpost-modal .checkout-email input,
.inpost-modal .courier-wrapper .courier-input-wrapper input {
  padding: 10px 0.75rem;
}
.inpost-modal .checkout-email input:focus,
.inpost-modal .courier-wrapper .courier-input-wrapper input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.inpost-modal .checkout-email input:invalid {
  border-color: var(--c-danger);
}
.inpost-modal .courier-wrapper .courier-input-wrapper input::placeholder {
  color: var(--c-dim);
}
.inpost-modal .delivery-options-wrapper .select-wrapper {
  padding: 10px 0.75rem;
}
.inpost-modal .delivery-options-wrapper .select-wrapper:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.inpost-modal .delivery-options-wrapper .select-wrapper select {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--c-text);
}
.inpost-modal .delivery-options-wrapper .select-wrapper select:focus {
  outline: none;
}
.inpost-modal .delivery-options-wrapper .select-wrapper select option {
  background-color: var(--c-panel);
  color: var(--c-text);
}

.landing {
  background: var(--c-bg);
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-body);
}
.landing .navbar {
  position: fixed;
  width: 100%;
}
.landing .landing-container {
  max-width: 1140px;
  margin: 0 auto;
}
.landing .landing-container--narrow {
  max-width: 680px;
}
.landing .landing-container--mid {
  max-width: 900px;
}
.landing .landing-container--center {
  text-align: center;
}
.landing .landing-section {
  padding: 6rem 2.5rem;
}
@media (max-width: 1200px) {
  .landing .landing-section {
    padding: 4rem 1.5rem;
  }
}
@media (max-width: 500px) {
  .landing .landing-section {
    padding: 3rem 1.25rem;
  }
}
.landing .landing-section.with-border {
  border-top: 1px solid var(--c-line);
}
.landing .landing-h2 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  line-height: 1.25;
  color: var(--c-text);
  margin-bottom: 1rem;
}
.landing .landing-h2--center {
  text-align: center;
}
.landing .landing-body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--c-text-sec);
  margin-bottom: 1rem;
}
.landing .landing-body--dim {
  color: var(--c-muted);
}
.landing .landing-body--center {
  text-align: center;
  margin-bottom: 3rem;
}
.landing .landing-text--blue {
  color: var(--c-accent-ink);
}
.landing .landing-strong {
  font-weight: 600;
  color: var(--c-text);
}
.landing .landing-layer-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.landing .landing-layer-label--blue {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.landing .landing-layer-label--blue::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 1.5px;
  background: var(--c-accent);
  vertical-align: 1px;
}
.landing .landing-privacy {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-muted);
  margin-top: 0.75rem;
}
.landing .landing-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text);
  display: inline-block;
  padding: 0.375rem 0.875rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-tag);
  background: var(--glass-bg);
  box-shadow: var(--glass-highlight);
}
.landing .landing-inline-badge {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  margin-top: 1.5rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background: var(--glass-bg);
  box-shadow: var(--glass-highlight);
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text);
}
.landing .landing-hero {
  background: var(--c-bg);
  padding-top: 9rem;
  padding-bottom: 6rem;
}
@media (max-width: 1200px) {
  .landing .landing-hero {
    padding-top: 8rem;
    padding-bottom: 4rem;
  }
}
@media (max-width: 500px) {
  .landing .landing-hero {
    padding-top: 7rem;
    padding-bottom: 3rem;
  }
}
.landing .landing-hero__title {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.875rem, 4.2vw, 2.75rem);
  line-height: 1.1;
  color: var(--c-text);
  margin-bottom: 1.25rem;
}
.landing .landing-hero__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-muted);
  max-width: 460px;
  margin-bottom: 2rem;
}
.landing .landing-pillar__row {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 4rem;
  margin-top: 1.25rem;
}
@media (max-width: 1200px) {
  .landing .landing-pillar__row {
    flex-direction: column;
  }
}
.landing .landing-pillar__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  gap: 0;
}
.landing .landing-pillar__text .landing-h2 {
  margin-top: 1rem;
}
.landing .landing-problem__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.landing .landing-problem__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text-sec);
  line-height: 1.6;
}
.landing .landing-problem__icon {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 2px;
}
.landing .landing-problem__icon--red {
  color: var(--c-danger);
}
.landing .landing-problem__icon--blue {
  color: var(--c-accent-ink);
}
.landing .landing-forwhom__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 1200px) {
  .landing .landing-forwhom__grid {
    grid-template-columns: 1fr;
  }
}
.landing .landing-cta__title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3.8vw, 2.125rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
  margin-bottom: 0.875rem;
}
.landing .landing-cta__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-muted);
  margin-bottom: 2.25rem;
  line-height: 1.6;
}
.landing .landing-cta__note {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c-muted);
}
.landing .landing-cta__link {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 28%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.landing .landing-cta__link:hover {
  color: var(--c-text);
  text-decoration-color: var(--c-accent-ink);
}

.landing-btn {
  line-height: 1.5;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s;
}
.landing-btn--primary {
  border-color: transparent;
  background-color: var(--c-accent);
  background-image: none;
  color: var(--c-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 22px -10px var(--glow-accent-strong);
}
.landing-btn--primary:hover {
  border-color: transparent;
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 28px -8px var(--glow-accent-strong);
}
.landing-btn--ghost {
  border-color: var(--glass-border);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  color: var(--c-text);
  box-shadow: var(--glass-highlight);
}
.landing-btn--ghost:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
@media screen {
  [data-theme=light] .theme-ns .landing-btn--ghost {
    border-color: var(--c-line-strong);
    box-shadow: 0 1px 2px rgba(22, 22, 28, 0.05);
  }
  [data-theme=light] .theme-ns .landing-btn--ghost:hover {
    border-color: rgba(22, 22, 28, 0.26);
  }
}
.landing-btn--lg {
  line-height: 1.5;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
.landing-btn--block {
  width: 100%;
}
.landing-btn--text {
  padding: 0.25rem 0;
  border-width: 0;
  background: transparent;
  color: var(--c-muted);
  justify-self: center;
}
.landing-btn--text:hover {
  color: var(--c-text);
}

.landing-faq__list {
  margin-top: 1rem;
}

.landing-faq-item {
  padding: 1.25rem 0;
  interpolate-size: allow-keywords;
}
.landing-faq-item:not(:last-of-type) {
  border-bottom: 1px solid var(--c-line);
}
.landing-faq-item__btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border: none;
  text-align: left;
  cursor: pointer;
}
.landing-faq-item__btn span:first-child {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.landing-faq-item__btn:focus-visible {
  outline-offset: 4px;
  border-radius: 0.25rem;
}
.landing-faq-item summary.landing-faq-item__btn {
  list-style: none;
  user-select: none;
}
.landing-faq-item summary.landing-faq-item__btn::-webkit-details-marker {
  display: none;
}
.landing-faq-item__icon {
  flex-shrink: 0;
  display: inline-block;
  width: 1.5rem;
  font-size: 1.25rem;
  font-weight: 300;
  text-align: center;
  color: var(--c-muted);
  transition: transform 0.3s ease-in-out, color 0.15s;
}
.landing-faq-item[open] .landing-faq-item__icon {
  transform: rotate(45deg);
  color: var(--c-accent-ink);
}
.landing-faq-item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
}
.landing-faq-item[open]::details-content {
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .landing-faq-item::details-content, .landing-faq-item__icon {
    transition: none;
  }
}
.landing-faq-item__answer p {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-text-sec);
  line-height: 1.75;
  margin: 0.875rem 0 0.125rem;
}

.landing-system-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 1200px) {
  .landing-system-cards {
    grid-template-columns: 1fr;
  }
}
.landing-system-cards__head {
  text-align: center;
  margin-bottom: 2rem;
}
.landing-system-cards__note {
  text-align: center;
  margin-top: 1.5rem;
}

.landing-system-card {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.landing-system-card--featured {
  border-color: var(--glass-border-hover);
}
.landing-system-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.landing-system-card__header h3 {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin: 0;
}
.landing-system-card__price {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-text);
  white-space: nowrap;
}
.landing-system-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.landing-system-card__list li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--c-text-sec);
  line-height: 1.5;
  padding-left: 1.25rem;
  position: relative;
}
.landing-system-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-accent-ink);
  font-weight: 600;
}

.landing-levels__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 1200px) {
  .landing-levels__grid {
    grid-template-columns: 1fr;
  }
}

.landing-level-card {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  gap: 0.625rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
}
.landing-level-card__title {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.landing-level-card__desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.landing.landing-page .landing-section.with-border {
  position: relative;
  border-top: none;
}
.landing.landing-page .landing-section.with-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  margin-inline: auto;
  width: min(1140px, 100% - 2 * 2.5rem);
  background: var(--c-line);
}
@media (max-width: 1200px) {
  .landing.landing-page .landing-section.with-border::before {
    width: min(1140px, 100% - 2 * 1.5rem);
  }
}
@media (max-width: 500px) {
  .landing.landing-page .landing-section.with-border::before {
    width: min(1140px, 100% - 2 * 1.25rem);
  }
}
.landing.landing-page .landing-hero.app-hero {
  padding-bottom: 0;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
  isolation: isolate;
}
.landing.landing-page .landing-hero.app-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(62% 40% at 50% 62%, var(--glow-accent-strong) 0%, transparent 70%), radial-gradient(18% 22% at 14% 80%, var(--glow-cool) 0%, transparent 70%), radial-gradient(18% 22% at 86% 80%, var(--glow-cool) 0%, transparent 70%);
  transition: opacity 1.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .landing.landing-page .landing-hero.app-hero::after {
    transition: none;
  }
}
:root.js:not(.is-loaded) .landing.landing-page .landing-hero.app-hero::after {
  opacity: 0;
}
.landing.landing-page .landing-hero.app-hero--text {
  padding-bottom: 6rem;
  border-bottom: 0;
}
.landing.landing-page .landing-hero.app-hero--text::after {
  background-image: radial-gradient(52% 46% at 50% 46%, var(--glow-accent) 0%, transparent 70%), radial-gradient(20% 30% at 16% 62%, var(--glow-cool) 0%, transparent 70%), radial-gradient(20% 30% at 84% 62%, var(--glow-cool) 0%, transparent 70%);
}
@media (max-width: 1200px) {
  .landing.landing-page .landing-hero.app-hero--text {
    padding-bottom: 4rem;
  }
}
@media (max-width: 500px) {
  .landing.landing-page .landing-hero.app-hero--text {
    padding-bottom: 3rem;
  }
}
.landing.landing-page .app-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.landing.landing-page .app-hero__text .landing-badge {
  max-width: 100%;
  text-wrap: balance;
}
.landing.landing-page .app-hero__text .landing-hero__title {
  margin-bottom: 20px;
  font-size: clamp(2.25rem, 5.2vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.landing.landing-page .app-hero__text .landing-hero__desc {
  max-width: 700px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
}
.landing.landing-page .app-hero__text .landing-hero__desc .landing-strong {
  color: var(--c-text);
}
.landing.landing-page .app-hero__text .landing-privacy {
  max-width: 600px;
  margin: 20px auto 0;
  font-size: 13px;
  line-height: 1.6;
}
.landing.landing-page .app-hero__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}
.landing.landing-page .app-hero__actions .landing-btn {
  display: inline-flex;
  align-items: center;
}
.landing.landing-page .app-hero__window {
  margin-top: 56px;
}
@media (max-width: 500px) {
  .landing.landing-page .app-hero__window {
    margin-top: 36px;
  }
}
.landing.landing-page .app-tab-section__points li {
  display: block;
  position: relative;
  padding-left: 1.75rem;
  color: var(--c-muted);
}
.landing.landing-page .app-tab-section__points li .icon {
  position: absolute;
  left: 0;
  top: 0.2rem;
  margin-top: 0;
}
.landing.landing-page .app-tab-section__points li a {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 28%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.landing.landing-page .app-tab-section__points li a:hover {
  color: var(--c-text);
  text-decoration-color: var(--c-accent-ink);
}

.page-home .store-container section.light {
  border: 0;
  background: none;
}
@media (max-width: 1200px) {
  .page-home .store-container section.light {
    margin-left: 0;
    margin-right: 0;
  }
}
.page-home .store-container section.home-box {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 2.5rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-highlight);
}
@media (max-width: 1200px) {
  .page-home .store-container section.home-box {
    width: auto;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    padding: 2.5rem 1.5rem;
  }
}
@media (max-width: 500px) {
  .page-home .store-container section.home-box {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 2rem 0;
  }
}
.page-home .store-container .title-wrapper h2,
.page-home .store-container .store-hero-text__heading h2 {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.page-home .store-container .title-wrapper p {
  color: var(--c-muted);
}
.page-home .store-container .home-app-cut {
  border-bottom: 1px solid var(--glass-border);
}
@media (min-width: 1001px) {
  .page-home .store-container .home-app-demo .app-preview {
    --ap-min: 1138;
  }
}
.page-home .store-container .home-app-demo .app-preview__window {
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.page-home .store-container .home-app-demo .app-preview__window .app-preview__viewport {
  flex: none;
  aspect-ratio: 1138/644;
}
@media (max-width: 1000px) {
  .page-home .store-container .home-app-demo .app-preview__window {
    height: 560px;
  }
  .page-home .store-container .home-app-demo .app-preview__window .app-preview__viewport {
    flex: 1 1 auto;
    aspect-ratio: auto;
  }
}
.page-home .store-container .blog-card {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  transition: border-color 0.15s, background-color 0.15s;
}
.page-home .store-container .blog-card:hover {
  background-color: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: none;
}
.page-home .store-container .blog-card__title {
  font-weight: 400;
  letter-spacing: -0.015em;
}
.page-home .store-container .blog-card__tag {
  background: var(--c-line);
  color: var(--c-text);
}
@media (max-width: 500px) {
  .page-home .store-container .home-box .store-hero-text .store-hero-text__subtitle,
  .page-home .store-container .home-box .store-hero-text .store-hero-text__trust,
  .page-home .store-container .home-box .store-hero-text .store-hero-text__actions {
    display: none;
  }
}

.blog-container {
  min-height: 100vh;
  color: var(--c-text);
}

.blog-hero {
  max-width: 1200px;
  padding: 4rem 1.5rem 2.5rem;
  margin: 0 auto;
}
@media (max-width: 500px) {
  .blog-hero {
    padding: 2.5rem 1.25rem 2rem;
  }
}
.blog-hero__inner {
  max-width: 820px;
}
.blog-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1.5rem;
}
.blog-hero h1 {
  margin-bottom: 20px;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--c-text);
}
.blog-hero p {
  max-width: 680px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-muted);
}

.blog-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: var(--glass-bg-soft);
  line-height: 1.5;
}

.blog-articles {
  max-width: 1200px;
  padding: 0 1.5rem;
  margin: 0 auto 4rem;
}
@media (max-width: 500px) {
  .blog-articles {
    padding: 0 1rem;
    margin-bottom: 2.5rem;
  }
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (max-width: 1200px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border-color: var(--c-line-strong);
}
.blog-card:hover .blog-card__link {
  color: var(--c-accent-hover);
}
.blog-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--c-muted);
}
.blog-card__tag {
  background: color-mix(in srgb, var(--c-accent) 10%, transparent);
  color: var(--c-accent);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
}
.blog-card__sep {
  color: var(--c-line-strong);
}
.blog-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.35;
  margin: 0;
}
.blog-card__excerpt {
  font-size: 0.875rem;
  color: var(--c-text-sec);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}
.blog-card__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-accent);
  margin-top: 0.5rem;
  transition: color 0.15s ease;
}

.blog-container .blog-grid {
  gap: 12px;
}
@media (min-width: 861px) {
  .blog-container .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.blog-container .blog-card {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  gap: 12px;
  padding: 22px 24px 24px;
  transition: border-color 0.15s, background-color 0.15s;
}
@media (max-width: 500px) {
  .blog-container .blog-card {
    padding: 20px;
  }
}
.blog-container .blog-card:hover {
  background-color: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.blog-container .blog-card:hover .blog-card__link {
  color: var(--c-text);
}
.blog-container .blog-card:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.blog-container .blog-card__meta {
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.5;
}
.blog-container .blog-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text);
  display: inline-block;
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: var(--c-line);
  line-height: 1.5;
}
.blog-container .blog-card__sep {
  color: var(--c-dim);
}
.blog-container .blog-card__title {
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--c-text);
}
.blog-container .blog-card__excerpt {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-muted);
}
.blog-container .blog-card__link {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text-sec);
  transition: color 0.15s;
}

.blog-seo {
  max-width: 720px;
  padding: 1.5rem 1.5rem 4rem;
  margin: 0 auto;
}
@media (max-width: 500px) {
  .blog-seo {
    padding: 1rem 1.25rem 2.5rem;
  }
}
.blog-seo h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--c-text);
}
.blog-seo p {
  margin-top: 1rem;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-muted);
}

.article-container {
  color: var(--c-text);
}
.article-container .article-breadcrumb {
  max-width: 720px;
  padding: 3rem 1.5rem 0;
  margin: 0 auto;
}
@media (max-width: 500px) {
  .article-container .article-breadcrumb {
    padding: 2rem 1.25rem 0;
  }
}
.article-container .article-breadcrumb a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.15s;
}
.article-container .article-breadcrumb a:hover {
  color: var(--c-text);
}
.article-container .article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.5;
}
.article-container .article-meta + .article-meta {
  margin-top: -0.5rem;
}
.article-container .article-meta__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text);
  display: inline-block;
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: var(--c-line);
  line-height: 1.5;
}
.article-container .article-meta__sep {
  font-size: 11px;
  color: var(--c-muted);
}
.article-container .article-meta span:not(.article-meta__tag):not(.article-meta__sep) {
  font-size: 11px;
  color: var(--c-muted);
}
.article-container .article-meta a {
  color: var(--c-text-sec);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.article-container .article-meta a:hover {
  color: var(--c-text);
  text-decoration-color: var(--c-accent-ink);
}
.article-container header, .article-container main {
  max-width: 720px;
  padding: 0 1.5rem;
  height: unset !important;
}
@media (max-width: 500px) {
  .article-container header, .article-container main {
    padding: 0 1.25rem;
  }
}
.article-container header p, .article-container main p {
  margin-top: 0.75rem;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
}
.article-container header strong, .article-container main strong {
  font-weight: 500;
  color: var(--c-text);
}
.article-container header em, .article-container main em {
  color: var(--c-text-sec);
}
.article-container header {
  margin: 2rem auto 0;
}
@media (max-width: 500px) {
  .article-container header {
    margin-top: 1.5rem;
  }
}
.article-container header h1 {
  margin: 0.5rem 0 20px;
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--c-text);
}
.article-container header p {
  font-size: 17px;
  line-height: 1.7;
}
@media (max-width: 500px) {
  .article-container header p {
    font-size: 16px;
  }
}
.article-container main {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 3rem auto 0;
  padding-bottom: 4rem;
}
@media (max-width: 500px) {
  .article-container main {
    gap: 2.5rem;
    margin-top: 2.5rem;
    padding-bottom: 3rem;
  }
}
.article-container main h2 {
  margin-bottom: 0.25rem;
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--c-text);
}
.article-container main h3 {
  margin-top: 1.5rem;
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--c-text);
}
.article-container main h4 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-text);
}
.article-container main a:where(:not([class])) {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 28%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.article-container main a:where(:not([class])):hover {
  color: var(--c-text);
  text-decoration-color: var(--c-accent-ink);
}
.article-container main .section-content {
  margin-top: 1rem;
}
.article-container .article-cta {
  line-height: 1.5;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s;
  border-color: transparent;
  background-color: var(--c-accent);
  background-image: none;
  color: var(--c-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 22px -10px var(--glow-accent-strong);
}
.article-container .article-cta:hover {
  border-color: transparent;
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  filter: brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 28px -8px var(--glow-accent-strong);
}
.article-container .article-cta {
  display: inline-block;
  max-width: 100%;
  margin-top: 1.5rem;
  text-align: center;
}
.article-container main a.secondary {
  line-height: 1.5;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s;
  border-color: var(--glass-border);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  color: var(--c-text);
  box-shadow: var(--glass-highlight);
}
.article-container main a.secondary:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
@media screen {
  [data-theme=light] .theme-ns .article-container main a.secondary {
    border-color: var(--c-line-strong);
    box-shadow: 0 1px 2px rgba(22, 22, 28, 0.05);
  }
  [data-theme=light] .theme-ns .article-container main a.secondary:hover {
    border-color: rgba(22, 22, 28, 0.26);
  }
}
.article-container main a.secondary {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.5rem;
  text-align: center;
}
.article-container .article-actions {
  text-align: center;
}
.article-container .article-actions--spaced {
  margin-top: 1.5rem;
}
.article-container .article-actions--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.article-container .article-founder-note {
  padding: 20px 24px;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
@media (max-width: 500px) {
  .article-container .article-founder-note {
    padding: 18px;
  }
}
.article-container .article-founder-note__label {
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.5;
}
.article-container .article-founder-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-muted);
}
.article-container .article-founder-note p + p {
  margin-top: 0.5rem;
}
.article-container .article-founder-note a {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 28%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.article-container .article-founder-note a:hover {
  color: var(--c-text);
  text-decoration-color: var(--c-accent-ink);
}
.article-container .landing-faq__list {
  margin-top: 1rem;
  border-top: 1px solid var(--c-line);
}
.article-container .landing-faq-item {
  border-bottom: 1px solid var(--c-line);
}
.article-container .landing-faq-item__btn {
  margin: 0;
  color: var(--c-text);
}
.article-container .landing-faq-item__btn span:first-child {
  font-size: 17px;
  line-height: 1.45;
}
.article-container .landing-faq-item__btn:focus-visible {
  outline-offset: 4px;
  border-radius: 4px;
}
.article-container .landing-faq-item__answer p {
  margin: 0.75rem 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
}
.article-container .article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}
@media (max-width: 500px) {
  .article-container .article-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}
.article-container .article-footer__back {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.15s;
}
.article-container .article-footer__back:hover {
  color: var(--c-text);
}
.article-container .article-footer__next {
  font-size: 15px;
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.article-container .article-footer__next:hover {
  color: var(--c-text);
  text-decoration-color: var(--c-accent-ink);
}

.app-page .hh-app-section {
  padding-top: 4rem;
}
.app-page .app-section {
  scroll-margin-top: 4.5rem;
}

.app-tab-section__row {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 4rem;
}
.app-tab-section__row--rev {
  flex-direction: row-reverse;
}
@media (max-width: 1200px) {
  .app-tab-section__row {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
  .app-tab-section__row--rev {
    flex-direction: column;
  }
}
.app-tab-section__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  gap: 0;
}
.app-tab-section__text .landing-h2 {
  margin-top: 1rem;
}
.app-tab-section__demo {
  flex: 0 0 54%;
  min-width: 0;
}
@media (max-width: 1200px) {
  .app-tab-section__demo {
    flex: 1 1 auto;
    width: 100%;
    margin-inline: auto;
  }
}
.app-tab-section__points {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.75rem;
}
.app-tab-section__points li {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-text-sec);
}
.app-tab-section__points li .icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  color: var(--c-accent-ink);
}
.app-tab-section__points li a {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: rgba(var(--c-tint), 0.3);
}
.app-tab-section__points li a:hover {
  color: var(--c-accent-ink);
}
.app-tab-section__cta {
  display: inline-block;
  margin-top: 2rem;
  text-decoration: none;
}

.hh-app-section {
  padding-top: 2.5rem;
}

.hh-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1000px) {
  .hh-app {
    grid-template-columns: 1fr;
  }
}
.hh-app__main {
  min-width: 0;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}
@media (max-width: 500px) {
  .hh-app__main {
    padding: 1rem;
  }
}
.hh-app__side {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 1rem;
  position: sticky;
  top: 5rem;
}
@media (max-width: 1000px) {
  .hh-app__side {
    position: static;
  }
}

.hh-app--single {
  grid-template-columns: 1fr;
}

.hh-statusbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hh-statusbar[hidden] {
  display: none;
}

.hh-view {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--glass-border);
  background-color: var(--pill-bg);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  flex: none;
  margin-left: auto;
}
@media (max-width: 500px) {
  .hh-view {
    width: 100%;
  }
}
.hh-view__option {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-muted);
  box-shadow: none;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.hh-view__option:hover {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.hh-view__option {
  font-family: var(--font-body);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.hh-view__option.is-active {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.hh-view__option:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}
.hh-view__icon {
  display: inline-flex;
}
.hh-view__icon .icon {
  width: 1rem;
  height: 1rem;
}

.hh-status {
  font-size: 0.875rem;
  color: var(--c-muted);
}
.hh-status a {
  color: var(--c-accent-ink);
}
.hh-status[data-tone=ok] {
  color: var(--c-success);
}
.hh-status[data-tone=warn] {
  color: var(--c-warn);
}

.hh-stepper {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-group);
  background: var(--c-panel);
}
.hh-stepper[hidden] {
  display: none;
}
@media (max-width: 1200px) {
  .hh-stepper {
    grid-template-columns: repeat(4, 1fr);
  }
}
.hh-stepper__item {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-muted);
  box-shadow: none;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.hh-stepper__item:hover {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.hh-stepper__item {
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
}
.hh-stepper__item.is-active {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.hh-stepper__item:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}
.hh-stepper__num {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--c-line);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text);
}
.hh-stepper__item:hover .hh-stepper__num, .hh-stepper__item.is-active .hh-stepper__num {
  background: var(--c-line-strong);
}

.hh-step__head {
  margin-bottom: 1.25rem;
}
.hh-step__source {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hh-step__title {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 26px;
  color: var(--c-text);
  margin: 0.25rem 0 0.5rem;
}
.hh-step__intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-muted);
}

.hh-subtitle {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin: 1.5rem 0 0.75rem;
}

.hh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 500px) {
  .hh-grid {
    grid-template-columns: 1fr;
  }
}

.hh-field {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.25rem;
  min-width: 0;
}
.hh-field--wide {
  grid-column: 1/-1;
}
.hh-field__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-muted);
}
.hh-field__hint {
  font-size: 0.75rem;
  color: var(--c-muted);
}

.hh-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 15px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  color: var(--c-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hh-input::placeholder {
  color: var(--c-dim);
}
.hh-input:hover {
  border-color: var(--c-line-strong);
}
.hh-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.hh-input[readonly] {
  color: var(--c-muted);
}

select.hh-input {
  appearance: auto;
}

.hh-cards {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.75rem;
}

.hh-card {
  padding: 1rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
}
.hh-card--accent {
  border-color: var(--c-line);
  background: var(--c-surface-hover);
}
.hh-card__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--c-text);
}

.hh-rows {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.5rem;
}

.hh-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 0.5rem;
  align-items: end;
}
@media (max-width: 500px) {
  .hh-row {
    grid-template-columns: 1fr;
  }
}

.hh-remove {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.hh-remove:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.hh-remove {
  align-self: end;
  margin-bottom: 0.25rem;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.hh-remove:hover {
  border-color: var(--c-danger);
  color: var(--c-danger);
}

.hh-actions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.hh-tip {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--c-line-strong);
  background: transparent;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}

.hh-empty {
  padding: 1rem;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-group);
  color: var(--c-muted);
  font-size: 0.875rem;
}

.hh-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}
.hh-nav[hidden] {
  display: none;
}

.hh-panel {
  padding: 1rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.75rem;
}
.hh-panel__title {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--c-text);
}
.hh-panel__title .icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-muted);
}
.hh-panel__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.hh-panel__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
}
.hh-panel__todo {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.hh-panel__todo:empty {
  display: none;
}
.hh-panel__todo strong {
  color: var(--c-text);
}
.hh-panel__todo ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 2px;
}
.hh-panel__ok {
  margin: 0;
  color: var(--c-success);
}
.hh-panel__actions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.hh-panel__actions--column {
  flex-direction: column;
  align-items: flex-start;
}

.hh-file {
  cursor: pointer;
}

.hh-todo {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem;
  margin: 0 -0.5rem;
  width: calc(100% + 1rem);
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.hh-todo__icon {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 28px;
  height: 28px;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-tag);
  color: var(--c-accent-ink);
}
.hh-todo__icon .icon {
  width: 0.9rem;
  height: 0.9rem;
}
.hh-todo:hover {
  background: var(--c-surface-hover);
  color: var(--c-text);
}
.hh-todo:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.hh-todo__link {
  display: inline-block;
  margin: 0.25rem 0 0.25rem 2.25rem;
  font-size: 0.75rem;
  color: var(--c-text);
}

.hh-sum-numbers {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hh-sum-numbers__item {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-tag);
  font-size: 0.75rem;
  color: var(--c-muted);
}
.hh-sum-numbers__item strong {
  color: var(--c-text);
  font-family: var(--font-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.hh-sum-stack {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.75rem;
}

.hh-sum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 500px) {
  .hh-sum-grid {
    grid-template-columns: 1fr;
  }
}

.hh-sum {
  padding: 1rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
}
.hh-sum__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.hh-sum__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
}
.hh-sum__edit {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-tag);
  background: transparent;
  color: var(--c-muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.hh-sum__edit:hover {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}
.hh-sum__empty, .hh-sum__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.hh-sum__text {
  white-space: pre-wrap;
}
.hh-sum__none {
  color: var(--c-muted);
}
.hh-sum__entry {
  padding: 0.75rem;
  border-radius: var(--radius-control);
  background: var(--c-panel);
}
.hh-sum__entry + .hh-sum__entry {
  margin-top: 0.5rem;
}
.hh-sum__entry--accent {
  background: var(--c-surface-hover);
}
.hh-sum__entry-title {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-weight: 500;
  color: var(--c-text);
}
.hh-sum__tag {
  padding: 1px 6px;
  border: 0;
  border-radius: 6px;
  background: var(--c-line);
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}
.hh-sum__pairs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0;
}
.hh-sum__pairs dt {
  font-size: 0.75rem;
  color: var(--c-muted);
}
.hh-sum__pairs dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--c-muted);
  overflow-wrap: anywhere;
}
.hh-sum__list {
  margin: 0;
}
.hh-sum__list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--c-line);
}
.hh-sum__list > div:first-child {
  border-top: none;
  padding-top: 0;
}
.hh-sum__list dt {
  font-size: 0.875rem;
  color: var(--c-muted);
}
.hh-sum__list dd {
  margin: 0;
  font-size: 0.875rem;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.plan-print {
  display: none;
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }
  body.print-a4,
  body.print-cards,
  body.print-checklist {
    background: #fff !important;
    color: #000;
  }
  body.print-a4 .landing,
  body.print-cards .landing,
  body.print-checklist .landing {
    display: none !important;
  }
  body.print-a4 .plan-print--a4,
  body.print-cards .plan-print--cards,
  body.print-checklist .plan-print--checklist {
    display: block;
    font-family: "Geist", Arial, sans-serif;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.35;
  }
  .pp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8mm;
    border-bottom: 2px solid #000;
    padding-bottom: 3mm;
    margin-bottom: 4mm;
  }
  .pp-head h1 {
    font-size: 18pt;
    margin: 0;
  }
  .pp-sub {
    margin: 1mm 0 0;
    color: #333;
  }
  .pp-emergency {
    font-size: 9pt;
    text-align: right;
    line-height: 1.5;
  }
  .pp-section {
    margin-bottom: 4mm;
    break-inside: avoid;
  }
  .pp-section h2 {
    font-size: 11pt;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1.5mm;
    border-bottom: 1px solid #999;
    padding-bottom: 0.5mm;
  }
  .pp-section p {
    margin: 0 0 1mm;
  }
  .pp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6mm;
  }
  .pp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
  }
  .pp-table th, .pp-table td {
    border: 1px solid #bbb;
    padding: 1mm 1.5mm;
    text-align: left;
    vertical-align: top;
  }
  .pp-table th {
    background: #eee;
    font-weight: 600;
  }
  .pp-note {
    font-size: 9pt;
    color: #333;
  }
  .pp-pre {
    white-space: pre-wrap;
  }
  .pp-empty {
    color: #666;
  }
  .pp-box {
    display: inline-block;
    width: 3.2mm;
    height: 3.2mm;
    border: 1px solid #000;
    line-height: 3.2mm;
    text-align: center;
    font-size: 8pt;
    font-weight: 700;
  }
  .pp-check {
    width: 6mm;
    text-align: center !important;
  }
  .pp-done td {
    color: #555;
  }
  .pp-foot {
    margin-top: 6mm;
    padding-top: 2mm;
    border-top: 1px solid #999;
    font-size: 8.5pt;
    color: #333;
  }
  .pc-title {
    font-size: 14pt;
    margin: 0 0 1mm;
  }
  .pc-hint {
    font-size: 9pt;
    color: #333;
    margin: 0 0 4mm;
  }
  .pc-grid {
    display: grid;
    grid-template-columns: repeat(2, 85.6mm);
    gap: 6mm 8mm;
  }
  .pc-card {
    width: 85.6mm;
    height: 54mm;
    box-sizing: border-box;
    border: 1px dashed #777;
    border-radius: 3mm;
    padding: 3mm 3.5mm;
    display: flex;
    flex-direction: column;
    font-size: 7.4pt;
    line-height: 1.3;
    break-inside: avoid;
    overflow: hidden;
  }
  .pc-card--back {
    background: #f4f4f4;
  }
  .pc-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #000;
    padding-bottom: 1mm;
    margin-bottom: 1.5mm;
  }
  .pc-card__brand {
    font-size: 6.5pt;
    letter-spacing: 0.12em;
    font-weight: 700;
  }
  .pc-card__name {
    font-weight: 700;
    font-size: 9pt;
  }
  .pc-card__body {
    flex: 1;
  }
  .pc-card__body p {
    margin: 0 0 0.8mm;
  }
  .pc-card__foot {
    border-top: 1px solid #999;
    padding-top: 1mm;
    font-size: 6.5pt;
    color: #333;
  }
}
.cl-section-title {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 22px;
  color: var(--c-text);
  margin: 0 0 0.75rem;
}

.cl-household {
  margin-bottom: 1.5rem;
}

.cl-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1200px) {
  .cl-counters {
    grid-template-columns: 1fr 1fr;
  }
}

.cl-counter {
  padding: 14px;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.5rem;
}
.cl-counter__label {
  font-size: 12px;
  color: var(--c-muted);
  min-height: 2.2em;
}
.cl-counter__controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.cl-counter__btn {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.cl-counter__btn:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.cl-counter__btn {
  color: var(--c-text);
  font-size: 15px;
  cursor: pointer;
}
.cl-counter__value {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.cl-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
}
@media (max-width: 1200px) {
  .cl-options {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.cl-option {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 0.5rem;
}
.cl-option--wide {
  grid-column: span 3;
}
@media (max-width: 1200px) {
  .cl-option--wide {
    grid-column: auto;
  }
}
.cl-option__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.cl-option__head .guide-link {
  font-size: 0.75rem;
}
.cl-option__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.cl-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-group);
  background: var(--c-panel);
  overflow: hidden;
}
@media (max-width: 1200px) {
  .cl-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 500px) {
  .cl-choices {
    grid-template-columns: 1fr;
  }
}
.cl-choices .cl-choice {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-muted);
  box-shadow: none;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.cl-choices .cl-choice:hover {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.cl-choices .cl-choice {
  border-radius: 8px;
}
.cl-choices .cl-choice:has(input:checked) {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}

.cl-choice {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  background: transparent;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--c-muted);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.cl-choice input {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--c-accent);
}
.cl-choice:hover, .cl-choice:has(input:checked) {
  border-color: var(--c-line);
  background: var(--c-surface-hover);
  color: var(--c-text);
}
.cl-choice:has(input:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.cl-progress {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  background: var(--c-panel);
}
.cl-progress__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--c-text);
}
.cl-progress__head span {
  font-family: var(--font-mono);
  font-size: 12px;
}

.cl-group {
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  scroll-margin-top: 5rem;
}
.cl-group__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.cl-group__head[data-fold-group] {
  cursor: pointer;
}
.cl-group__head[data-fold-group]:hover .cl-group__title {
  color: var(--c-text);
}
.cl-group__head[data-fold-group]:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
  border-radius: 0.375rem;
}
.cl-group__source {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.cl-group__title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin: 0.25rem 0;
}
.cl-group__intro {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.cl-group--locked {
  border-style: dashed;
  border-color: var(--c-line-strong);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.cl-group--locked .cl-group__head {
  margin-bottom: 0;
}
.cl-group--locked .cl-group__title {
  color: var(--c-muted);
}
.cl-group--locked:hover, .cl-group--locked:focus-visible {
  outline: none;
  background: var(--c-surface-hover);
}
.cl-group--locked:hover .cl-group__title, .cl-group--locked:focus-visible .cl-group__title {
  color: var(--c-text);
}
.cl-group--locked:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.cl-group__count {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  background: var(--c-line);
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.cl-group__count.is-complete {
  background: color-mix(in srgb, var(--c-success) 14%, transparent);
  color: var(--c-success);
}

.cl-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.25rem;
}

.cl-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem;
  border-radius: var(--radius-control);
}
.cl-item:hover {
  background: var(--c-surface-hover);
}
.cl-item__main {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.cl-item__main input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--c-accent);
  flex-shrink: 0;
  align-self: center;
}
.cl-item__text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 2px;
}
.cl-item__label {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--c-text);
}
.cl-item__qty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.cl-item__hint {
  font-size: 0.75rem;
  color: var(--c-muted);
}
.cl-item__kit {
  flex-shrink: 0;
  align-self: center;
  padding: 2px 0.5rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-success) 14%, transparent);
  color: var(--c-success);
  font-size: 0.75rem;
  white-space: nowrap;
}
.cl-item__link {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.75rem;
  color: var(--c-accent-ink);
  white-space: nowrap;
}
.cl-item__remove {
  width: 1.5rem;
  height: 1.5rem;
  align-self: center;
  border: none;
  border-radius: var(--radius-tag);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
}
.cl-item__remove:hover {
  color: var(--c-danger);
}
.cl-item.is-done .cl-item__label {
  color: var(--c-muted);
  text-decoration: line-through;
  text-decoration-color: var(--c-line-strong);
}

.cl-add {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.cl-add .hh-input {
  flex: 1;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

.cl-footer-actions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}

.cl-kit-hint {
  margin: 0 0 1rem;
  padding: 0.625rem 0.75rem;
  border-left: 2px solid var(--c-accent);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.cl-kit-hint__link {
  color: var(--c-text);
  white-space: nowrap;
}

.cl-group--locked + .cl-kit-hint {
  margin: -0.75rem 0 1.25rem;
}

.al-toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.al-toolbar__status {
  margin: 0;
  font-size: 0.875rem;
  color: var(--c-muted);
}

.al-visualizer {
  display: block;
  width: 100%;
  height: 80px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-panel);
}

.al-signals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 1200px) {
  .al-signals {
    grid-template-columns: 1fr;
  }
}

.al-signal {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0.75rem;
  align-content: start;
  padding: 1.5rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  transition: border-color 0.3s ease-in-out;
}
.al-signal > .al-wave {
  align-self: center;
}
.al-signal--alarm.is-playing {
  border-color: var(--c-danger);
}
.al-signal--clear.is-playing {
  border-color: var(--c-line-strong);
}
.al-signal__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.al-signal__title {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 26px;
  color: var(--c-text);
  margin: 0;
}
.al-signal__desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.al-signal .landing-btn {
  justify-self: start;
  align-self: start;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
}
.al-signal .landing-btn .icon {
  width: 1rem;
  height: 1rem;
}
.al-signal .landing-btn.is-playing {
  background: var(--c-danger);
  color: var(--c-on-accent);
}
.al-signal__todo {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.875rem;
  color: var(--c-muted);
}
.al-signal__todo > strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.75rem;
}
.al-signal__todo ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: al-step;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.5rem;
  line-height: 1.55;
}
.al-signal__todo li {
  counter-increment: al-step;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-control);
  background: var(--c-panel);
}
.al-signal__todo li::before {
  content: counter(al-step);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-danger) 15%, transparent);
  color: var(--c-danger);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}
.al-signal--clear .al-signal__todo li::before {
  background: var(--c-line);
  color: var(--c-text);
}

.al-wave {
  display: block;
  width: 100%;
  height: 40px;
  opacity: 0.9;
}
.al-signal--alarm .al-wave {
  color: var(--c-danger);
}
.al-signal--clear .al-wave {
  color: var(--c-accent);
}

.al-note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}

.al-quiz-section {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--c-line);
}

.al-best {
  font-size: 0.875rem;
  color: var(--c-success);
  margin: 0 0 1rem;
}

.al-quiz {
  max-width: 760px;
  padding: 1.5rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
.al-quiz__progress {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
.al-quiz__prompt {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  color: var(--c-text);
  margin: 0 0 1rem;
}
.al-quiz__listen {
  margin-bottom: 1rem;
}
.al-quiz__options {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.5rem;
}
.al-quiz__feedback {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-text-sec);
}
.al-quiz__feedback[data-tone=ok] {
  background: color-mix(in srgb, var(--c-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-success) 35%, transparent);
}
.al-quiz__feedback[data-tone=bad] {
  background: var(--c-danger-soft);
  border: 1px solid color-mix(in srgb, var(--c-danger) 35%, transparent);
}
.al-quiz__feedback strong {
  color: var(--c-text);
}
.al-quiz__actions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.al-quiz__actions .landing-btn {
  text-decoration: none;
}

.al-option {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.al-option:hover:not([disabled]) {
  border-color: var(--c-line-strong);
  background: var(--c-surface-hover);
}
.al-option[disabled] {
  cursor: default;
}
.al-option.is-correct {
  border-color: var(--c-success);
  background: color-mix(in srgb, var(--c-success) 12%, transparent);
}
.al-option.is-wrong {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

.al-result {
  text-align: center;
}
.al-result__score {
  display: block;
  font-family: var(--font-body);
  font-size: 3.75rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.al-result__verdict {
  margin: 1rem 0 0.5rem;
  font-size: 1.125rem;
  color: var(--c-text);
}
.al-result__best {
  margin: 0;
  font-size: 0.875rem;
  color: var(--c-muted);
}
.al-result .al-quiz__actions {
  justify-content: center;
}

.sh__shot {
  display: block;
  text-decoration: none;
}
.sh__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--c-line);
  transition: border-color 0.2s;
}
.sh__shot:hover img {
  border-color: var(--c-line-strong);
}
.sh__shot-caption {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-accent-ink);
}

.lm-page__main {
  max-width: calc(210mm + 2 * 1.5rem);
  margin: 0 auto;
  padding: calc(64px + 2rem) 1.5rem 3rem;
}
@media (max-width: 500px) {
  .lm-page__main {
    padding: calc(64px + 1rem) 0.75rem 2.5rem;
  }
}

.lm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.lm-toolbar__text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--c-text-sec);
}

.lm-sheet .pp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8mm;
  border-bottom: 2px solid #000;
  padding-bottom: 3mm;
  margin-bottom: 4mm;
}
.lm-sheet .pp-head h1 {
  font-size: 18pt;
  margin: 0;
}
.lm-sheet .pp-sub {
  margin: 1mm 0 0;
  color: #333;
}
.lm-sheet .pp-emergency {
  font-size: 9pt;
  text-align: right;
  line-height: 1.5;
}
.lm-sheet .pp-section {
  margin-bottom: 4mm;
  break-inside: avoid;
}
.lm-sheet .pp-section h2 {
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1.5mm;
  border-bottom: 1px solid #999;
  padding-bottom: 0.5mm;
}
.lm-sheet .pp-section p {
  margin: 0 0 1mm;
}
.lm-sheet .pp-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6mm;
}
.lm-sheet .pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9.5pt;
}
.lm-sheet .pp-table th, .lm-sheet .pp-table td {
  border: 1px solid #bbb;
  padding: 1mm 1.5mm;
  text-align: left;
  vertical-align: top;
}
.lm-sheet .pp-table th {
  background: #eee;
  font-weight: 600;
}
.lm-sheet .pp-note {
  font-size: 9pt;
  color: #333;
}
.lm-sheet .pp-pre {
  white-space: pre-wrap;
}
.lm-sheet .pp-empty {
  color: #666;
}
.lm-sheet .pp-box {
  display: inline-block;
  width: 3.2mm;
  height: 3.2mm;
  border: 1px solid #000;
  line-height: 3.2mm;
  text-align: center;
  font-size: 8pt;
  font-weight: 700;
}
.lm-sheet .pp-check {
  width: 6mm;
  text-align: center !important;
}
.lm-sheet .pp-done td {
  color: #555;
}
.lm-sheet .pp-foot {
  margin-top: 6mm;
  padding-top: 2mm;
  border-top: 1px solid #999;
  font-size: 8.5pt;
  color: #333;
}
.lm-sheet {
  box-sizing: border-box;
  width: 100%;
  max-width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 12mm;
  background: #fff;
  color: #000;
  font-family: "Geist", Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  border-radius: 2px;
}
@media (max-width: 500px) {
  .lm-sheet {
    min-height: 0;
    padding: 6mm;
  }
}
.lm-sheet__head {
  margin-bottom: 3mm;
}
.lm-sheet__head h1 {
  font-size: 17pt;
  line-height: 1.25;
  color: #000;
}
.lm-sheet__intro {
  margin: 0 0 4mm;
  font-size: 10pt;
  color: #333;
}
.lm-sheet__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5mm 7mm;
  margin: 0 0 6mm;
  font-size: 10pt;
}
.lm-sheet__groups {
  column-count: 2;
  column-gap: 8mm;
}
@media (max-width: 500px) {
  .lm-sheet__groups {
    column-count: 1;
  }
}
.lm-sheet__foot {
  margin-top: 4mm;
}

.lm-nowrap {
  white-space: nowrap;
}

.lm-group {
  break-inside: avoid;
  margin-bottom: 5mm;
}
.lm-group h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 3mm;
  color: #000;
}
.lm-group__page {
  flex: none;
  font-size: 8pt;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #777;
}

.lm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lm-list li {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  margin: 0 0 1.8mm;
}
.lm-list .pp-box {
  flex: none;
  transform: translateY(0.5mm);
}

.lm-after {
  max-width: 210mm;
  margin: 2rem auto 0;
}

@media print {
  html:has(body.lm-print-page),
  body.lm-print-page,
  body.lm-print-page .lm-page {
    background: #fff !important;
  }
  body.lm-print-page .lm-screen-only {
    display: none !important;
  }
  body.lm-print-page .lm-page__main {
    max-width: none;
    padding: 0;
  }
  body.lm-print-page .lm-sheet {
    max-width: none;
    min-height: 0;
    padding: 0;
    border-radius: 0;
  }
}
@property --table-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.store-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  color: var(--c-text);
}
.store-container .top-margin-sm {
  margin-top: 1rem !important;
}
.store-container .top-margin-md {
  margin-top: 2rem !important;
}
.store-container .top-padding-sm {
  padding-top: 1rem !important;
}
.store-container .image-wrapper > img {
  border-radius: 0.75rem;
}
.store-container .note {
  color: var(--c-muted) !important;
  text-align: center !important;
}
.store-container section button.center,
.store-container section a.button.center {
  margin: auto;
}
.store-container section.light {
  background-color: transparent;
  border: 1px solid var(--glass-border);
  margin: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--glass-highlight);
  max-width: calc(1200px - 5rem);
  padding: 2.5rem 0;
  width: 100%;
}
@media (max-width: 1200px) {
  .store-container section.light {
    padding: 2rem 0;
    margin: 0 1.5rem;
    width: unset;
  }
}
.store-container section.image-section {
  overflow: hidden;
}
.store-container section.image-section h3 {
  font-weight: 500;
}
.store-container section.image-section .two-columns-desktop {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.store-container section.image-section .two-columns-desktop > :first-child, .store-container section.image-section .two-columns-desktop > :nth-child(2) {
  width: 100%;
}
@media (max-width: 1200px) {
  .store-container section.image-section .two-columns-desktop > :first-child, .store-container section.image-section .two-columns-desktop > :nth-child(2) {
    width: 50%;
  }
}
@media (max-width: 500px) {
  .store-container section.image-section .two-columns-desktop > :first-child, .store-container section.image-section .two-columns-desktop > :nth-child(2) {
    width: 100%;
  }
}
@media (max-width: 1200px) {
  .store-container section.image-section .two-columns-desktop {
    gap: 1.5rem;
  }
}
@media (max-width: 500px) {
  .store-container section.image-section .two-columns-desktop {
    flex-direction: column;
    gap: 1rem;
  }
}
.store-container section.image-section .image-wrapper.scroll {
  overflow-x: auto;
  overflow-y: hidden;
  gap: 2rem;
  height: 35rem;
  display: flex;
  padding-bottom: 1.75rem;
}
.store-container section.image-section .image-wrapper.scroll img {
  max-width: unset;
}
.store-container section.image-section .image-wrapper.center {
  margin: auto;
}
.store-container section.image-section .image-wrapper.small {
  width: 12.5rem;
  height: auto;
}
@media (max-width: 1200px) {
  .store-container section.image-section .image-wrapper.small {
    width: 10rem;
  }
}
.store-container section .section-wrapper {
  max-width: 1200px;
  padding: 0 2.5rem;
  margin: auto;
  flex-direction: column;
  display: flex;
  width: 100%;
  gap: 2rem;
}
@media (max-width: 1200px) {
  .store-container section .section-wrapper {
    padding: 0 1.5rem;
  }
}
.store-container section .section-wrapper .table-wrapper {
  margin: auto;
  height: auto;
  overflow: hidden;
  scrollbar-width: thin;
  width: 100%;
  max-width: 1040px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.store-container section .section-wrapper .table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-strong) transparent;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--table-fade-end));
  mask-image: linear-gradient(to left, transparent, #000 var(--table-fade-end));
  transition: --table-fade-end 0.2s ease;
}
.store-container section .section-wrapper .table-scroll.has-more-end {
  --table-fade-end: 2.5rem;
}
.store-container section .section-wrapper .table-scroll.has-more-start th:first-child,
.store-container section .section-wrapper .table-scroll.has-more-start td:first-child {
  box-shadow: inset -1px 0 0 var(--c-line-strong);
}
.store-container section .section-wrapper table {
  border-collapse: collapse;
  margin: auto;
  width: 100%;
}
.store-container section .section-wrapper table th {
  min-width: 13rem;
}
@media (max-width: 1200px) {
  .store-container section .section-wrapper table th {
    min-width: 10rem;
  }
}
@media (max-width: 500px) {
  .store-container section .section-wrapper table th {
    min-width: 8.5rem;
  }
}
.store-container section .section-wrapper table th:first-child,
.store-container section .section-wrapper table td:first-child {
  position: sticky;
  left: 0;
  min-width: 25rem;
  overflow-x: auto;
  z-index: 1;
}
@media (max-width: 1200px) {
  .store-container section .section-wrapper table th:first-child,
  .store-container section .section-wrapper table td:first-child {
    min-width: 18rem;
  }
}
@media (max-width: 500px) {
  .store-container section .section-wrapper table th:first-child,
  .store-container section .section-wrapper table td:first-child {
    min-width: 9.5rem;
  }
}
.store-container section .section-wrapper table th:first-child {
  background-color: var(--c-panel);
}
.store-container section .section-wrapper table td:first-child {
  background-color: var(--c-bg);
}
.store-container section .section-wrapper table thead {
  background-color: var(--c-panel);
  position: sticky;
  top: 0;
  z-index: 2;
}
.store-container section .section-wrapper table thead .high {
  height: 2.25rem;
}
.store-container section .section-wrapper table thead th {
  vertical-align: top;
  padding: 0.75rem 0.75rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-muted);
}
.store-container section .section-wrapper table th:last-child,
.store-container section .section-wrapper table td:last-child {
  background-color: var(--c-surface);
}
.store-container section .section-wrapper table thead th:last-child {
  color: var(--c-text);
  box-shadow: inset 0 2px 0 var(--c-accent);
}
.store-container section .section-wrapper table th {
  text-align: left;
  padding: 0.5rem;
}
.store-container section .section-wrapper table th.padding-top {
  padding-top: 0.5rem;
}
.store-container section .section-wrapper table td:not(.name) {
  color: var(--c-muted);
  width: 14rem;
}
@media (max-width: 1200px) {
  .store-container section .section-wrapper table td:not(.name) {
    width: 12rem;
  }
}
@media (max-width: 500px) {
  .store-container section .section-wrapper table td:not(.name) {
    width: auto;
  }
}
.store-container section .section-wrapper table td {
  padding: 0.625rem 0.75rem;
}
.store-container section .section-wrapper table tbody > tr {
  border: solid var(--c-line);
  border-width: 1px 0 0 0;
}
.store-container section .section-wrapper table tbody > tr.price-row td {
  background-image: linear-gradient(color-mix(in srgb, var(--c-text) 4%, transparent), color-mix(in srgb, var(--c-text) 4%, transparent));
}
.store-container section .section-wrapper table tbody > tr.price-row td:not(.name) {
  color: var(--c-text-sec);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.store-container section .section-wrapper .title-wrapper:not(.two-columns) > p {
  margin-top: 0.5rem;
}
.store-container section .section-wrapper .title-wrapper > p {
  color: var(--c-text-sec);
}
.store-container section .section-wrapper .title-wrapper button,
.store-container section .section-wrapper .title-wrapper a.button {
  margin-top: 1rem;
}
.store-container section .section-wrapper .title-wrapper .title-actions {
  text-align: center;
  margin-top: 1rem;
}
.store-container section .section-wrapper .title-wrapper > p.title-lead {
  margin-top: 0.75rem;
}
.store-container .header-section {
  margin: 2.5rem auto auto auto;
  max-width: 1400px;
  padding: 0 2.5rem;
}
@media (max-width: 1200px) {
  .store-container .header-section {
    padding: 0 1.5rem;
  }
}
.store-container .header-section .note {
  margin-top: 1rem;
}
@media (max-width: 500px) {
  .store-container .header-section .product-wrapper {
    max-width: 100%;
  }
}
.store-container .header-section .product-wrapper .center {
  margin: auto;
}
.store-container .header-section .product-wrapper .product_card {
  height: 45rem;
  width: 22rem;
}
.store-container .header-section .product-wrapper .product_card .icon {
  color: var(--c-text);
}
.store-container .header-section .product-wrapper .details {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
@media (max-width: 500px) {
  .store-container .header-section .product-wrapper .details {
    max-width: 100%;
  }
}
.store-container .header-section .product-wrapper .details .image_and_overview {
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.store-container .header-section .product-wrapper .details .image_and_overview .overview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.store-container .header-section .product-wrapper .details .image_and_overview .overview li {
  list-style: disc;
  margin-left: 2rem;
}
.store-container .header-section .product-wrapper .details .image_and_overview .overview .product-title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem 0.75rem;
}
.store-container .header-section .product-wrapper .details .image_and_overview .overview .product-title h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}
.store-container .header-section .product-wrapper .details .image_and_overview .overview p {
  line-height: 1.4;
  color: var(--c-text);
}
.store-container .header-section .product-wrapper .details .image_and_overview .overview ul {
  color: var(--c-muted);
}
.store-container .header-section .product-wrapper .details .image_and_overview .overview li::marker {
  color: var(--c-dim);
}
.store-container .header-section .product-wrapper .buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.5rem;
}
.store-container main {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding: 0 0 2.5rem 0;
  background: var(--c-bg);
}
@media (max-width: 1200px) {
  .store-container main {
    gap: 0.5rem;
  }
}

.store-container .description-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  overflow-y: auto;
  background: inherit;
}
.store-container .description-wrapper .description {
  width: 100%;
}
.store-container .description-wrapper .description .content {
  color: var(--c-text);
}
.store-container .description-wrapper .description .content-list-wrapper {
  padding: 1rem 0;
}
.store-container .description-wrapper .description .content-list-wrapper > p {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.store-container .description-wrapper .description .content-list-wrapper .content-list {
  overflow-y: scroll;
  scrollbar-width: thin;
  height: 27rem;
  margin-top: 0.125rem;
}
.store-container .description-wrapper .description .content-list-wrapper .content-list li {
  color: var(--c-text-sec);
  padding: 7px 0.5rem 7px 0;
  border-top: 1px solid var(--c-line);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.store-container .images-wrapper {
  position: relative;
  border-radius: var(--radius-control);
  overflow: hidden;
  width: 100%;
}
.store-container .images-wrapper .navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem;
  z-index: 1;
  pointer-events: none;
}
.store-container .images-wrapper .navigation button {
  pointer-events: auto;
  width: 4rem;
  height: 100%;
}
@media (max-width: 500px) {
  .store-container .images-wrapper .navigation button {
    width: 2.5rem;
  }
}
.store-container .images-wrapper .navigation button svg {
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: var(--radius-tag);
  background-color: var(--glass-bg-strong);
  box-shadow: inset 0 0 0 1px var(--glass-border-hover);
  -webkit-backdrop-filter: var(--glass-filter-strong);
  backdrop-filter: var(--glass-filter-strong);
  color: var(--c-text);
  transition: background-color 0.15s;
}
.store-container .images-wrapper .navigation button:hover:not(:disabled) svg {
  background-color: var(--glass-bg-hover);
}
.store-container .images-wrapper .navigation button:disabled svg {
  opacity: 0.35;
}
.store-container .images-wrapper .images {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  width: 100%;
}
.store-container .images-wrapper .images::-webkit-scrollbar {
  display: none;
}
.store-container .images-wrapper .images img {
  width: 100%;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  scroll-snap-align: start;
  background-color: transparent;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
}
.store-container .product-title__price {
  margin-left: auto;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--c-text);
}

.store-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 3rem 0 5rem;
}
@media (max-width: 1200px) {
  .store-hero {
    gap: 1.25rem;
    padding: 2rem 1.5rem 1rem;
  }
}
@media (max-width: 500px) {
  .store-hero {
    gap: 1rem;
    padding: 1.5rem 1.5rem 0.5rem;
  }
}
.store-hero__badge {
  display: inline-block;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.store-hero__badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 1.5px;
  background: var(--c-accent);
  vertical-align: 1px;
}
.store-hero__title {
  max-width: 820px;
  margin: 0;
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--c-text);
  text-align: center;
}
@media (max-width: 500px) {
  .store-hero__title {
    font-size: 34px;
  }
}
@media (max-width: 1200px) {
  .store-hero__br {
    display: none;
  }
}
.store-hero__subtitle {
  font-size: 1.125rem;
  color: var(--c-muted);
  line-height: 1.65;
  max-width: 540px;
  text-align: center;
  margin: 0;
}
@media (max-width: 500px) {
  .store-hero__subtitle {
    font-size: 15px;
    line-height: 1.55;
  }
}
.store-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.store-hero__pillars {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  max-width: 760px;
  margin-top: 0.5rem;
}
@media (max-width: 1200px) {
  .store-hero__pillars {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 500px) {
  .store-hero__pillars {
    display: none;
    max-width: none;
  }
}
.store-hero__pillars--centered {
  margin-left: auto;
  margin-right: auto;
}
.store-hero__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.store-hero__divider::before, .store-hero__divider::after {
  content: "";
  width: 1px;
  flex: 1;
  background: var(--c-line);
}
.store-hero__divider span {
  width: 28px;
  height: 28px;
  background-color: var(--glass-bg-strong);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--c-muted);
  flex-shrink: 0;
}
@media (max-width: 1200px) {
  .store-hero__divider {
    flex-direction: row;
  }
  .store-hero__divider::before, .store-hero__divider::after {
    width: auto;
    height: 1px;
    flex: 1;
  }
}
.store-hero__pillar {
  position: relative;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.store-hero__pillar:hover {
  background-color: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  color: inherit;
}
.store-hero__pillar:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.store-hero__pillar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.store-hero__pillar-icon {
  width: 34px;
  height: 34px;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-muted);
}
.store-hero__pillar-icon svg {
  width: 16px;
  height: 16px;
}
.store-hero__pillar-label {
  display: inline-flex;
  order: -1;
  border: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-muted);
}
.store-hero__pillar-name {
  margin: 22px 0 0;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--c-text);
}
.store-hero__pillar--step .store-hero__pillar-icon {
  border-color: var(--glass-border-hover);
  background-color: var(--pill-active);
  color: var(--c-text);
}
.store-hero__pillar-desc {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.store-hero__pillar-more {
  margin-top: auto;
  font-size: 13px;
  color: var(--c-text);
}

.store-section-badge {
  display: inline-block;
  align-self: start;
  margin: 0 auto 1rem auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.store-section-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 1.5px;
  background: var(--c-accent);
  vertical-align: 1px;
}

.store-hero-text--center {
  text-align: center;
  align-items: center;
}
.store-hero-text--center .store-section-badge {
  align-self: center;
}
.store-hero-text--center .store-hero-text__trust {
  justify-content: center;
}
.store-hero-text--center .store-hero-text__actions {
  justify-content: center;
}
.store-hero-text__heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.store-hero-text__subtitle {
  max-width: 520px;
  color: var(--c-muted);
  line-height: 1.65;
  font-size: 1rem;
  text-align: center;
}
.store-hero-text__trust {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: flex-start;
}
.store-hero-text__trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 1.5rem;
  border-left: 1px solid var(--c-line);
}
.store-hero-text__trust-item:first-child {
  border-left: 0;
}
.store-hero-text__trust-number {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-text);
}
.store-hero-text__trust-label {
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.3;
}

.store-scenario-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 1200px) {
  .store-scenario-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .store-scenario-cards {
    grid-template-columns: 1fr;
  }
}

.store-scenario-card,
.store-equipment-category,
.store-72h__step {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  transition: border-color 0.15s, background-color 0.15s;
}
.store-scenario-card:hover,
.store-equipment-category:hover,
.store-72h__step:hover {
  background-color: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.store-scenario-card__title,
.store-equipment-category__title,
.store-72h__step-content h4 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.store-scenario-card__desc,
.store-equipment-category__desc,
.store-72h__step-content p {
  color: var(--c-muted);
}

.store-scenario-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.store-scenario-card__title {
  font-size: 1.125rem;
  color: var(--c-text);
  margin: 0;
}
.store-scenario-card__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
}

.store-aeo-block {
  max-width: 560px;
  margin: 0 auto;
  padding: 0.5rem 0;
}
.store-aeo-block__title {
  display: inline-block;
  border: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 12px;
}
.store-aeo-block__lead {
  font-size: 0.875rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.store-aeo-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.store-aeo-block__list li {
  font-size: 0.875rem;
  color: var(--c-muted);
  line-height: 1.65;
  padding-left: 0.75rem;
  position: relative;
}
.store-aeo-block__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-dim);
}
.store-aeo-block__list li strong {
  color: var(--c-text);
  font-weight: 500;
}
.store-aeo-block__note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-muted);
  margin-top: 1rem;
}

.store-rationale {
  display: flex;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 1200px) {
  .store-rationale {
    flex-direction: column;
    gap: 2rem;
  }
}
.store-rationale__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.store-rationale__text p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin: 0;
}
.store-rationale__text h2 {
  margin: 0;
}
.store-rationale__text .store-section-badge {
  margin-left: 0;
}
.store-rationale__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  min-width: 220px;
}
@media (max-width: 1200px) {
  .store-rationale__stats {
    flex-direction: row;
    justify-content: center;
    min-width: unset;
    align-self: stretch;
    gap: 2rem;
  }
}
@media (max-width: 500px) {
  .store-rationale__stats {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
}
.store-rationale__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 1rem 0;
  border-top: 1px solid var(--c-line);
}
.store-rationale__stat:last-child {
  border-bottom: 1px solid var(--c-line);
}
@media (max-width: 1200px) {
  .store-rationale__stat {
    flex: 1;
    border-bottom: 1px solid var(--c-line);
  }
}
@media (max-width: 500px) {
  .store-rationale__stat {
    border-bottom: 0;
  }
  .store-rationale__stat:last-child {
    border-bottom: 1px solid var(--c-line);
  }
}
.store-rationale__stat-number {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-text);
}
.store-rationale__stat-label {
  font-size: 13px;
  color: var(--c-muted);
}

.store-equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 1200px) {
  .store-equipment-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .store-equipment-grid {
    grid-template-columns: 1fr;
  }
}

.store-equipment-category {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.store-equipment-category__title {
  font-size: 1rem;
  color: var(--c-text);
  margin: 0;
}
.store-equipment-category__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
}

.store-differentiation {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.store-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 500px) {
  .store-diff-grid {
    grid-template-columns: 1fr;
  }
}

.store-diff-col {
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
}
.store-diff-col--no {
  background: transparent;
  border: 1px solid var(--c-line);
}
.store-diff-col--yes {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen), var(--wash-accent);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.store-diff-col__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 1rem;
}

.store-diff-col--no .store-diff-col__label {
  color: var(--c-muted);
}

.store-diff-col--yes .store-diff-col__label {
  color: var(--c-text);
}

.store-diff-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.store-diff-list li {
  font-size: 0.875rem;
  color: var(--c-muted);
  line-height: 1.6;
  padding-left: 1.25rem;
  position: relative;
}
.store-diff-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--c-line-strong);
}

.store-diff-col--yes .store-diff-list li {
  color: var(--c-text);
}
.store-diff-col--yes .store-diff-list li::before {
  background: var(--c-accent);
}

.store-72h {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.store-72h__header {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.store-72h__header p {
  color: var(--c-text-sec);
  line-height: 1.65;
  max-width: 500px;
  text-align: center;
  margin: 0;
}
.store-72h__timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1200px) {
  .store-72h__timeline {
    grid-template-columns: 1fr;
  }
}
.store-72h__step {
  position: relative;
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + 22px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.store-72h__step::before, .store-72h__step::after {
  content: "";
  position: absolute;
  bottom: 1.5rem;
  height: 4px;
  border-radius: 2px;
}
.store-72h__step::before {
  left: 1.5rem;
  right: 1.5rem;
  background: var(--c-line);
}
.store-72h__step::after {
  left: calc(1.5rem + (100% - 2 * 1.5rem) * var(--step-from));
  width: calc((100% - 2 * 1.5rem) * var(--step-span));
  background: var(--c-accent);
}
.store-72h__step:nth-child(1) {
  --step-from: 0;
  --step-span: 0.0833;
}
.store-72h__step:nth-child(2) {
  --step-from: 0.0833;
  --step-span: 0.25;
}
.store-72h__step:nth-child(3) {
  --step-from: 0.3333;
  --step-span: 0.6667;
}
.store-72h__step-time {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-text);
}
.store-72h__step-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.store-72h__step-content h4 {
  font-size: 1rem;
  color: var(--c-text);
  margin: 0;
}
.store-72h__step-content p {
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
}

.landing-bag-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 0 2.5rem;
}
@media (max-width: 1200px) {
  .landing-bag-row {
    padding: 0 1.5rem;
  }
}
@media (max-width: 500px) {
  .landing-bag-row {
    gap: 1.5rem;
    padding: 0 1rem;
  }
}
.landing-bag-row .title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.landing-bag-row__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  width: 100%;
  max-width: 960px;
  align-items: center;
}
@media (max-width: 1200px) {
  .landing-bag-row__text {
    align-items: center;
    text-align: center;
  }
  .landing-bag-row__text p {
    max-width: 80%;
    margin: auto;
  }
}
.landing-bag-row .products .bag-go .product_card,
.landing-bag-row .products .bag-essential .product_card,
.landing-bag-row .products .bag-pro .product_card {
  border-radius: var(--radius-card);
  border-color: var(--glass-border);
  border-style: solid;
  border-width: 1px;
}
.landing-bag-row .products .product-wrapper {
  display: flex;
  flex-direction: column;
}
.landing-bag-row .products .product-wrapper .product_card {
  width: 100%;
  height: auto;
  position: relative;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.landing-bag-row .products .product-wrapper .description-wrapper.product_card {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--glass-solid);
}
.landing-bag-row .products .product-wrapper .details.product_card {
  flex: 1;
}

.presale-badge {
  padding: 2px 8px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-hover);
  border-radius: var(--radius-tag);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}
.presale-badge::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--c-accent);
}

.details.product_card.is-tiltable,
.details.add-on-card.is-tiltable {
  transition: transform 0.25s ease, border-color 0.15s ease, background-color 0.15s ease;
  will-change: transform;
  transform-style: preserve-3d;
}
.details.product_card.is-tiltable:hover,
.details.add-on-card.is-tiltable:hover {
  background-color: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}

.store-container .header-section .product-wrapper .add-on-card {
  max-width: calc(44rem + 1 * 2rem);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
@media (max-width: 500px) {
  .store-container .header-section .product-wrapper .add-on-card {
    max-width: 100%;
  }
}
.store-container .header-section .product-wrapper .add-on-card .image_and_overview {
  gap: 2rem !important;
}
.store-container .header-section .product-wrapper .add-on-card .image_and_overview .images {
  min-width: calc(22rem - 2 * 1.5rem);
}
@media (max-width: 500px) {
  .store-container .header-section .product-wrapper .add-on-card .image_and_overview .images {
    min-width: unset;
  }
}
.store-container .header-section .product-wrapper .add-on-card .image_and_overview .images img {
  border-radius: var(--radius-control);
}
.store-container .header-section .product-wrapper .add-on-card.details .image_and_overview .overview .product-title {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.store-container .header-section .product-wrapper .add-on-card .product-title h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.landing-bag-row .products-row {
  --products-gap: 1.5rem;
  --products-bleed: 0px;
  --products-inset: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}
@media (max-width: 500px) {
  .landing-bag-row .products-row {
    --products-gap: 1rem;
    --products-bleed: 1rem;
    --products-inset: 1rem;
  }
}

.products-row__controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.products-row__controls[hidden] {
  display: none;
}

.products-row__arrow {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.products-row__arrow:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.products-row__arrow {
  cursor: pointer;
}
.products-row__arrow svg {
  width: 18px;
  height: 18px;
}
.products-row__arrow:hover:not(:disabled), .products-row__arrow:active:not(:disabled) {
  background-color: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  color: var(--c-text);
}
.products-row__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.products-row__note {
  max-width: 40rem;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--c-muted);
}

.products-row__dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 0.5rem;
}
.products-row__dots[hidden] {
  display: none;
}

.products-row__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.products-row__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-line-strong);
  transition: background-color 0.2s, width 0.2s;
}
.products-row__dot:hover::before {
  background: var(--c-muted);
}
.products-row__dot.is-filled::before {
  width: 18px;
  border-radius: 4px;
  background: var(--c-accent);
}
@media (prefers-reduced-motion: reduce) {
  .products-row__dot::before {
    transition: none;
  }
}

.landing-bag-row .products-row .products {
  display: flex;
  gap: var(--products-gap);
  width: auto;
  max-width: none;
  margin: -8px calc(-1 * var(--products-bleed)) 0;
  padding: 8px var(--products-inset) 1rem;
  scroll-padding-inline: var(--products-inset);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.landing-bag-row .products-row .products::-webkit-scrollbar {
  display: none;
}
.landing-bag-row .products-row .products > .product-wrapper {
  flex: 0 0 clamp(22rem, (100% - 2 * var(--products-gap)) / 3, 25rem);
  min-width: 0;
  scroll-snap-align: start;
}
.landing-bag-row .products-row .products > .product-wrapper:first-child {
  margin-left: auto;
}
.landing-bag-row .products-row .products > .product-wrapper:last-child {
  margin-right: auto;
}
@media (max-width: 500px) {
  .landing-bag-row .products-row .products > .product-wrapper {
    flex-basis: 85vw;
  }
}
.landing-bag-row .products-row .products .images {
  overscroll-behavior-x: contain;
}

.landing-bag-row .bag-go .images {
  background-color: #ECF0F3;
  isolation: isolate;
}
.landing-bag-row .bag-go .images img:first-child {
  mix-blend-mode: multiply;
}

.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: color-mix(in srgb, var(--c-bg) 94%, transparent);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.product-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}
.product-lightbox img {
  max-width: calc(90vw - 8rem);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-card);
  object-fit: contain;
  cursor: default;
}
.product-lightbox__prev, .product-lightbox__next {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.product-lightbox__prev:hover, .product-lightbox__next:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.product-lightbox__prev, .product-lightbox__next {
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  cursor: pointer;
}
.product-lightbox__prev svg, .product-lightbox__next svg {
  width: 1.25rem;
  height: 1.25rem;
}

.store-container--bag h1, .store-container--bag h2 {
  font-weight: 400;
  letter-spacing: -0.025em;
}
.store-container--bag .store-hero-text__heading h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-align: center;
  text-wrap: balance;
}
@media (max-width: 500px) {
  .store-container--bag .store-hero-text__trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.25rem;
    width: 100%;
  }
}
@media (max-width: 500px) {
  .store-container--bag .store-hero-text__trust-item {
    padding: 0 0.75rem;
  }
  .store-container--bag .store-hero-text__trust-item:nth-child(odd) {
    border-left: 0;
  }
}
@media (max-width: 500px) {
  .store-container--bag .landing-bag-row .products-row {
    --products-bleed: calc(1.5rem + 1rem);
  }
}
.store-container--bag .header-section .product-wrapper .title-wrapper h3 {
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
@media (max-width: 1200px) {
  .store-container--bag main {
    gap: 3.5rem;
  }
}
.store-container--bag .carousel-item .header p {
  color: var(--c-muted);
}
.store-container--bag .carousel-item .top-divider {
  border-color: var(--c-line);
  color: var(--c-text-sec);
}
@media (max-width: 1200px) {
  .store-container--bag .landing-section .landing-container {
    padding: 0 1.5rem;
  }
}
.store-container--bag .landing-body--dim {
  color: var(--c-muted);
}
.store-container--bag .landing-cta__link {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 28%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.store-container--bag .landing-cta__link:hover {
  text-decoration-color: var(--c-accent);
}
.store-container--bag .landing-system-intro {
  text-align: center;
  margin-bottom: 2rem;
}
.store-container--bag .landing-system-more {
  text-align: center;
  margin-top: 1rem;
}
.store-container--bag .landing-system-cards {
  grid-template-columns: minmax(0, 1fr);
  max-width: 30rem;
}
@media (min-width: 861px) {
  .store-container--bag .landing-system-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1040px;
  }
}
.store-container--bag .landing-system-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 0.5rem;
}
.store-container--bag .landing-system-card__header .presale-badge {
  margin-block: -4px;
}
.store-container--bag .landing-system-card__header h3 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-muted);
}
.store-container--bag .landing-system-card__price {
  grid-column: 1/-1;
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-text);
}
.store-container--bag .landing-system-card__list li {
  color: var(--c-text-sec);
}
.store-container--bag .landing-system-card--featured {
  position: relative;
  overflow: hidden;
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.store-container--bag .landing-system-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.07) 50%, transparent calc(50% + 0.5px)), linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(0, 0, 0, 0.07) 50%, transparent calc(50% + 0.5px));
}
.store-container--bag .landing-system-card--featured > * {
  position: relative;
}
.store-container--bag .landing-system-card--featured .landing-system-card__header h3 {
  color: color-mix(in srgb, var(--c-on-accent) 62%, transparent);
}
.store-container--bag .landing-system-card--featured .landing-system-card__price {
  color: var(--c-on-accent);
}
.store-container--bag .landing-system-card--featured .landing-system-card__list li {
  color: color-mix(in srgb, var(--c-on-accent) 78%, transparent);
}
.store-container--bag .landing-system-card--featured .landing-system-card__list li::before {
  color: var(--c-on-accent);
}
.store-container--bag .landing-system-card--featured .landing-btn--primary {
  background: var(--c-on-accent);
  color: var(--c-text);
  box-shadow: none;
}
.store-container--bag .landing-system-card--featured .landing-btn--primary:hover {
  background: var(--c-on-accent);
  filter: none;
  color: var(--c-accent);
}
.store-container--bag .landing-system-card--featured .landing-btn--primary:focus-visible {
  outline-color: var(--c-on-accent);
}

.owner-badge {
  padding: 2px 8px;
  border: 1px solid transparent;
  background: var(--c-accent-soft);
  border-radius: var(--radius-tag);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
  white-space: nowrap;
}

.store-container .header-section .product-wrapper .details .image_and_overview .overview .product-upgrade {
  width: 100%;
  margin-top: 0.25rem;
}

.ig-embed {
  background: #FFF;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  margin: 1px;
  max-width: 540px;
  min-width: 326px;
  padding: 0;
  width: calc(100% - 2px);
}
.ig-embed__body {
  padding: 16px;
}
.ig-embed__body > a {
  background: #FFFFFF;
  line-height: 0;
  padding: 0 0;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
.ig-embed__head {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ig-embed__avatar {
  background-color: #F4F4F4;
  border-radius: 50%;
  flex-grow: 0;
  height: 40px;
  margin-right: 14px;
  width: 40px;
}
.ig-embed__names {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}
.ig-embed__name {
  background-color: #F4F4F4;
  border-radius: 4px;
  flex-grow: 0;
  height: 14px;
  width: 100px;
  margin-bottom: 6px;
}
.ig-embed__name--short {
  width: 60px;
  margin-bottom: 0;
}
.ig-embed__space {
  padding: 12.5% 0;
}
.ig-embed__space--photo {
  padding: 19% 0;
}
.ig-embed__logo {
  display: block;
  height: 50px;
  margin: 0 auto 12px;
  width: 50px;
}
.ig-embed__cta-wrap {
  padding-top: 8px;
}
.ig-embed__cta {
  color: #3897f0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 550;
  line-height: 18px;
}
.ig-embed__actions {
  display: flex;
  flex-direction: row;
  margin-bottom: 14px;
  align-items: center;
}
.ig-embed__heart {
  background-color: #F4F4F4;
  border-radius: 50%;
  height: 12.5px;
  width: 12.5px;
}
.ig-embed__heart--left {
  transform: translateX(0px) translateY(7px);
}
.ig-embed__heart--right {
  transform: translateX(9px) translateY(-18px);
}
.ig-embed__heart-body {
  background-color: #F4F4F4;
  height: 12.5px;
  transform: rotate(-45deg) translateX(3px) translateY(1px);
  width: 12.5px;
  flex-grow: 0;
  margin-right: 14px;
  margin-left: 2px;
}
.ig-embed__comment {
  margin-left: 8px;
}
.ig-embed__comment-bubble {
  background-color: #F4F4F4;
  border-radius: 50%;
  flex-grow: 0;
  height: 20px;
  width: 20px;
}
.ig-embed__comment-tail {
  width: 0;
  height: 0;
  border-top: 2px solid transparent;
  border-left: 6px solid #f4f4f4;
  border-bottom: 2px solid transparent;
  transform: translateX(16px) translateY(-4px) rotate(30deg);
}
.ig-embed__save {
  margin-left: auto;
}
.ig-embed__save-top {
  width: 0px;
  border-top: 8px solid #F4F4F4;
  border-right: 8px solid transparent;
  transform: translateY(16px);
}
.ig-embed__save-body {
  background-color: #F4F4F4;
  flex-grow: 0;
  height: 12px;
  width: 16px;
  transform: translateY(-4px);
}
.ig-embed__save-tail {
  width: 0;
  height: 0;
  border-top: 8px solid #F4F4F4;
  border-left: 8px solid transparent;
  transform: translateY(-4px) translateX(8px);
}
.ig-embed__lines {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  margin-bottom: 24px;
}
.ig-embed__line {
  background-color: #F4F4F4;
  border-radius: 4px;
  flex-grow: 0;
  height: 14px;
  width: 224px;
  margin-bottom: 6px;
}
.ig-embed__line--short {
  width: 144px;
  margin-bottom: 0;
}
.ig-embed__caption {
  color: #c9c8cd;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 0;
  margin-top: 8px;
  overflow: hidden;
  padding: 8px 0 7px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ig-embed__caption a {
  color: #c9c8cd;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  line-height: 17px;
  text-decoration: none;
}

.guide-hero .landing-hero__desc {
  max-width: 720px;
}

.landing .landing-hero.guide-hero {
  background: var(--c-bg);
}
@media (max-width: 500px) {
  .landing .landing-hero.guide-hero {
    padding-top: calc(4rem + 1px + 1.25rem);
    padding-bottom: 1.25rem;
  }
  .landing .landing-hero.guide-hero .landing-hero__desc {
    margin-bottom: 0;
  }
}

.guide-reader-section {
  padding-top: 4rem;
}

.guide-credit {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--c-muted);
}
.guide-credit a {
  color: var(--c-text-sec);
}

.guide-tools__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 1200px) {
  .guide-tools__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .guide-tools__grid {
    grid-template-columns: 1fr;
  }
}

.guide-tool-card {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  transition: border-color 0.15s;
}
.guide-tool-card:hover {
  border-color: var(--c-line-strong);
}
.guide-tool-card__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.guide-tool-card__title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--c-text);
}
.guide-tool-card__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--c-muted);
  flex: 1;
}
.guide-tool-card__link {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-accent-ink);
}
.guide-tool-card__link .icon {
  width: 0.85rem;
  height: 0.85rem;
}
.guide-tool-card__link:hover {
  color: var(--c-accent-ink);
}

.guide-numbers {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
.guide-numbers__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 1rem;
}
.guide-numbers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: var(--c-muted);
}
.guide-numbers__list li {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: baseline;
  gap: 0.75rem;
}
.guide-numbers__list strong {
  flex: 0 0 6rem;
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.guide-articles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
@media (max-width: 500px) {
  .guide-articles__grid {
    grid-template-columns: 1fr;
  }
}

.guide-articles__all {
  margin-top: 2rem;
  text-align: center;
}

.guide-article-card {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem 1.5rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color 0.2s ease-in-out;
}
.guide-article-card:hover {
  border-color: var(--c-line-strong);
}
.guide-article-card:hover .guide-article-card__more {
  color: var(--c-accent-ink);
}
.guide-article-card__chapter {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.guide-article-card__title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--c-text);
  flex: 1;
}
.guide-article-card__more {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-accent-ink);
}

.guide-kit__actions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.guide-kit__actions .landing-btn {
  display: inline-block;
  text-decoration: none;
}

.guide-decalogue {
  padding: 1.5rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
.guide-decalogue__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
.guide-decalogue__list {
  margin: 0;
  padding-left: 1.5rem;
  list-style: decimal;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-text-sec);
}
.guide-decalogue__list li {
  display: list-item;
  padding-left: 0.25rem;
}
.guide-decalogue__list li::marker {
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-weight: 400;
}

.guide-reader {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(88vh, 1040px);
  min-height: 560px;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  overflow: hidden;
  outline: none;
}
.guide-reader:focus-visible {
  box-shadow: 0 0 0 1px var(--c-accent), 0 0 0 4px var(--c-accent-ring);
}
.guide-reader.is-fullscreen {
  height: 100vh;
  border: none;
  border-radius: 0;
  background: var(--c-bg);
  box-shadow: none;
}
@media (max-width: 500px) {
  .guide-reader {
    height: 82vh;
    min-height: 480px;
  }
}

.guide-toolbar {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--c-line);
  background: transparent;
  min-height: 3.25rem;
}
.guide-toolbar__group {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.25rem;
}
.guide-toolbar__nav {
  gap: 0.25rem;
}
.guide-toolbar__chapter {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 500px) {
  .guide-toolbar__chapter {
    display: none;
  }
}
.guide-toolbar__tools {
  margin-left: auto;
}
.guide-toolbar__page {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--c-muted);
}
.guide-toolbar__page input {
  width: 3.25rem;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  color: var(--c-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.guide-toolbar__page input::placeholder {
  color: var(--c-dim);
}
.guide-toolbar__page input:hover {
  border-color: var(--c-line-strong);
}
.guide-toolbar__page input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.guide-toolbar__page input {
  padding: 5px 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  -moz-appearance: textfield;
}
.guide-toolbar__page input::-webkit-outer-spin-button, .guide-toolbar__page input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.guide-toolbar__total {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
}
.guide-toolbar__sep {
  width: 1px;
  height: 1.5rem;
  background: var(--c-line);
  margin: 0 0.25rem;
}
@media (max-width: 500px) {
  .guide-toolbar__sep {
    display: none;
  }
}

.guide-tool {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0 0.5rem;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}
.guide-tool .icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}
.guide-tool:hover, .guide-tool.is-active {
  background: var(--c-surface-hover);
  color: var(--c-text);
  box-shadow: none;
}
.guide-tool.is-active .icon {
  fill: currentColor;
}
.guide-tool:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}
.guide-tool--label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 3.25rem;
}
@media (max-width: 1200px) {
  .guide-tool--text span {
    display: none;
  }
}

.guide-drawbar {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-panel);
}
.guide-drawbar[hidden] {
  display: none;
}
.guide-drawbar__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.guide-drawbar__group {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
}
.guide-drawbar__width {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 2.25rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-tag);
  background: transparent;
  cursor: pointer;
}
.guide-drawbar__width span {
  display: block;
  width: 1.25rem;
  border-radius: 5rem;
  background: var(--c-muted);
}
.guide-drawbar__width--thin span {
  height: 2px;
}
.guide-drawbar__width--medium span {
  height: 4px;
}
.guide-drawbar__width--thick span {
  height: 8px;
}
.guide-drawbar__width:hover, .guide-drawbar__width.is-active {
  border-color: transparent;
  background: var(--c-surface-hover);
}
.guide-drawbar__width:hover span, .guide-drawbar__width.is-active span {
  background: var(--c-text);
}
.guide-drawbar__done {
  margin-left: auto;
}
.guide-drawbar .guide-tool[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.guide-swatch {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 5rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.guide-swatch--yellow {
  background: #F5D04F;
}
.guide-swatch--green {
  background: #59A556;
}
.guide-swatch--blue {
  background: #0776ff;
}
.guide-swatch--pink {
  background: #f472b6;
}
.guide-swatch--ink-red {
  background: #e11d48;
}
.guide-swatch--ink-blue {
  background: #0776ff;
}
.guide-swatch--ink-black {
  background: #111827;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.guide-swatch--ink-green {
  background: #16a34a;
}
.guide-swatch--ink-yellow {
  background: #f5d04f;
}
.guide-swatch--button {
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  border-width: 2px;
  transition: transform 0.1s ease-in-out;
}
.guide-swatch--button:hover {
  transform: scale(1.12);
}
.guide-swatch--button.is-active {
  border-color: var(--c-text);
  box-shadow: 0 0 0 2px var(--c-surface);
}

.guide-resume {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--c-surface-hover);
  border-bottom: 1px solid var(--c-line);
  font-size: 0.875rem;
  color: var(--c-text);
}

.guide-body {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

.guide-viewer {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-bg);
  scroll-behavior: smooth;
}
.guide-viewer__status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  position: absolute;
  inset: 0;
  z-index: 3;
  text-align: center;
  color: var(--c-muted);
  font-size: 0.875rem;
  padding: 1.5rem;
}
.guide-viewer__status p {
  margin: 0;
}
.guide-viewer__status a {
  color: var(--c-accent-ink);
}
@media screen {
  [data-theme=light] .theme-ns .guide-viewer__status a {
    color: var(--c-text);
  }
  [data-theme=light] .theme-ns .guide-viewer__status a:hover {
    color: var(--c-text-sec);
  }
}
.guide-viewer__status.is-error {
  background: var(--c-bg);
}
.guide-viewer__status.is-error .landing-btn {
  display: inline-block;
  margin-top: 0.5rem;
  text-decoration: none;
}
.guide-viewer__fallback {
  font-size: 0.75rem;
  color: var(--c-muted);
}
.guide-viewer__spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--c-line-strong);
  border-top-color: var(--c-accent);
  border-radius: 5rem;
  animation: guide-spin 0.8s linear infinite;
}

@keyframes guide-spin {
  to {
    transform: rotate(360deg);
  }
}
.guide-pages {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem 1.5rem 4rem;
}
@media (max-width: 500px) {
  .guide-pages {
    padding: 0.75rem 0.75rem 3rem;
  }
}

.guide-page {
  position: relative;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 3px;
  overflow: visible;
}
@media screen {
  [data-theme=light] .theme-ns .guide-page {
    box-shadow: 0 0 0 1px rgba(22, 22, 28, 0.06), 0 10px 28px -16px rgba(22, 22, 28, 0.25);
  }
}
:where(.guide-pages) > .guide-page:not(.is-rendered) {
  background: linear-gradient(120deg, #f2f3f5 0%, #ffffff 45%, #f2f3f5 100%);
  background-size: 200% 100%;
  animation: guide-shimmer 1.6s ease-in-out infinite;
}
.guide-page__canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}
.guide-page__highlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.guide-page__text {
  z-index: 2;
}
.guide-page__ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
  overflow: visible;
}
.guide-page__badges {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 4;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.375rem;
  pointer-events: none;
}
.guide-page__badges > * {
  pointer-events: auto;
}
.guide-page__ribbon {
  display: block;
  width: 1rem;
  height: 1.5rem;
  margin-top: -0.5rem;
  background: var(--c-warn);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}
.guide-page__badge {
  padding: 2px 0.5rem;
  border: none;
  border-radius: 5rem;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
}
.guide-page__badge--muted {
  background: rgba(10, 10, 11, 0.78);
  color: var(--c-text);
  cursor: default;
}
@media screen {
  [data-theme=light] .theme-ns .guide-page__badge--muted {
    color: #EDEDEF;
  }
}
.guide-page__number {
  position: absolute;
  left: 0;
  bottom: -1.4rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

@keyframes guide-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.textLayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  line-height: 1;
  text-align: initial;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  user-select: text;
  -webkit-user-select: text;
}
.textLayer span, .textLayer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.textLayer ::selection {
  background: color-mix(in srgb, var(--c-accent) 30%, transparent);
}
.textLayer br::selection {
  background: transparent;
}

.guide-reader.ink-mode .guide-page__ink {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}
.guide-reader.ink-mode .guide-page__text {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.guide-reader.ink-mode.ink-mode--eraser .guide-page__ink {
  cursor: cell;
}

.guide-highlight {
  position: absolute;
  border-radius: 2px;
  mix-blend-mode: multiply;
  transition: box-shadow 0.15s ease-in-out;
}
.guide-highlight--yellow {
  background: rgba(245, 208, 79, 0.55);
}
.guide-highlight--green {
  background: rgba(116, 199, 109, 0.5);
}
.guide-highlight--blue {
  background: rgba(7, 118, 255, 0.35);
}
.guide-highlight--pink {
  background: rgba(244, 114, 182, 0.45);
}
.guide-highlight.is-active {
  box-shadow: 0 0 0 2px rgba(11, 20, 38, 0.6);
}

.guide-popover {
  position: absolute;
  z-index: 10;
  width: min(300px, 90%);
  transform: translateX(-50%);
  padding: 0.75rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-control);
  background: var(--c-surface);
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
}
.guide-popover[hidden] {
  display: none;
}
.guide-popover__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.guide-popover__title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
}
.guide-popover__close {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: var(--radius-tag);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
}
.guide-popover__close .icon {
  width: 0.9rem;
  height: 0.9rem;
}
.guide-popover__close:hover {
  color: var(--c-text);
  background: var(--c-surface-hover);
}
.guide-popover__quote {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-muted);
  font-style: italic;
}
.guide-popover__colors {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
}
.guide-popover__add-note {
  margin-left: auto;
}
.guide-popover__note {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
}
.guide-popover__actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 900px) {
  .guide-toolbar {
    gap: 0.25rem;
    padding: 0.5rem 0.5rem;
  }
  .guide-toolbar__tools {
    gap: 0;
  }
  .guide-toolbar [data-action=zoom-reset],
  .guide-toolbar [data-action=fullscreen],
  .guide-toolbar a[download] {
    display: none;
  }
  .guide-drawbar {
    gap: 0.5rem;
  }
  .guide-drawbar__label,
  .guide-drawbar .guide-toolbar__sep {
    display: none;
  }
  .guide-drawbar__done {
    padding: 0.375rem 0.75rem;
  }
  .guide-tool {
    min-width: 2rem;
    padding: 0 0.25rem;
  }
}
.guide-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0;
  width: 320px;
  flex-shrink: 0;
  border-right: 1px solid var(--c-line);
  background: transparent;
  min-height: 0;
  transition: margin-left 0.2s ease-in-out;
}
.guide-reader.sidebar-collapsed .guide-sidebar {
  margin-left: -320px;
}
.guide-sidebar__top {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--c-line);
}
.guide-sidebar__tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--glass-border);
  background-color: var(--pill-bg);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  align-items: stretch;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.guide-sidebar__tabs::-webkit-scrollbar {
  display: none;
}
.guide-sidebar__tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex: 1;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-muted);
  box-shadow: none;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.guide-sidebar__tab:hover {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.guide-sidebar__tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}
.guide-sidebar__tab.is-active {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.guide-sidebar__tab:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}
.guide-sidebar__count {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  background: var(--c-line);
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  min-width: 0;
}
.guide-sidebar__tab:hover .guide-sidebar__count, .guide-sidebar__tab.is-active .guide-sidebar__count {
  background: var(--c-line-strong);
  color: var(--c-text);
}
.guide-sidebar__close {
  display: none;
  margin: 0;
}
.guide-sidebar__meta {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--c-line);
}
.guide-sidebar__progress-label {
  font-size: 0.75rem;
  color: var(--c-muted);
  margin-bottom: 0.5rem;
}
.guide-sidebar__panels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.guide-sidebar__panel {
  padding: 0.75rem 0.5rem;
}
.guide-sidebar__footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
}
.guide-sidebar__status {
  margin: 0;
  font-size: 0.75rem;
  color: var(--c-muted);
}
.guide-sidebar__status[data-status=saved] {
  color: var(--c-success);
}
.guide-sidebar__status[data-status=error] {
  color: var(--c-danger);
}
.guide-sidebar__footer-actions {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.375rem;
}

.guide-progress {
  height: 4px;
  border-radius: 5rem;
  background: var(--c-line);
  overflow: hidden;
}
.guide-progress__bar {
  height: 100%;
  background: var(--c-accent);
  border-radius: 5rem;
  transition: width 0.4s ease-in-out;
}
@media screen {
  [data-theme=light] .theme-ns .guide-progress__bar {
    background: #9AAD1F;
  }
}
progress.guide-progress {
  appearance: none;
  display: block;
  width: 100%;
  border: 0;
}
progress.guide-progress::-webkit-progress-bar {
  background: transparent;
}
progress.guide-progress::-webkit-progress-value {
  border-radius: 5rem;
  background: var(--c-accent);
}
progress.guide-progress::-moz-progress-bar {
  border-radius: 5rem;
  background: var(--c-accent);
}
@media screen {
  [data-theme=light] .theme-ns progress.guide-progress::-webkit-progress-value {
    border-radius: 5rem;
    background: #9AAD1F;
  }
  [data-theme=light] .theme-ns progress.guide-progress::-moz-progress-bar {
    border-radius: 5rem;
    background: #9AAD1F;
  }
}

.guide-toc__section {
  margin-bottom: 0.75rem;
}
.guide-toc__heading {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding: 0.5rem 0.5rem 0.25rem;
}
.guide-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.guide-toc__row {
  position: relative;
}
.guide-toc__toggle {
  position: absolute;
  left: 0.5rem;
  top: calc(0.5rem + 0.1rem);
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--c-success);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.guide-toc__toggle svg {
  display: block;
  width: 100%;
  height: 100%;
}
.guide-toc__toggle:hover {
  transform: scale(1.1);
}
.guide-toc__toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.guide-toc__toggle.is-read:hover {
  color: var(--c-muted);
}
.guide-toc__ring-track, .guide-toc__ring-fill {
  fill: none;
  stroke-width: 3;
}
.guide-toc__ring-track {
  stroke: var(--c-line-strong);
  transition: stroke 0.15s ease-in-out;
}
.guide-toc__toggle:hover .guide-toc__ring-track {
  stroke: color-mix(in srgb, var(--c-success) 60%, transparent);
}
.guide-toc__ring-fill {
  stroke: currentColor;
  stroke-linecap: round;
}
.guide-toc__item {
  display: grid;
  grid-template-columns: 1rem 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.5rem;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--c-muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
.guide-toc__item:hover, .guide-toc__item.is-current {
  background: var(--c-surface-hover);
  color: var(--c-text);
  box-shadow: none;
}
.guide-toc__check {
  font-size: 0.75rem;
  color: var(--c-muted);
  text-align: center;
}
.guide-toc__title {
  min-width: 0;
}
.guide-toc__meta {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.guide-toc__bookmark {
  display: inline-block;
  width: 0.5rem;
  height: 0.7rem;
  background: var(--c-warn);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

.guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.25rem;
}
.guide-list__item {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 0.25rem;
  border-radius: var(--radius-control);
}
.guide-list__item:hover {
  background: var(--c-surface-hover);
}
.guide-list__item--note {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.75rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-control);
}
.guide-list__item--note:hover {
  background: transparent;
  border-color: var(--c-line-strong);
}
.guide-list__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.guide-list__main {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--c-muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.guide-list__page {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.guide-list__page--link {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.guide-list__page--link:hover {
  color: var(--c-text);
}
.guide-list__text {
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.guide-list__text mark {
  background: rgba(245, 208, 79, 0.55);
  color: var(--c-bg);
  border-radius: 2px;
  padding: 0 1px;
}
.guide-list__note {
  padding-left: 0.5rem;
  border-left: 2px solid var(--c-line-strong);
  color: var(--c-muted);
  font-style: italic;
  white-space: pre-line;
}
.guide-list__remove {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.375rem;
  border: none;
  border-radius: var(--radius-tag);
  background: transparent;
  color: var(--c-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.guide-list__remove:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.guide-empty {
  margin: 0;
  padding: 0.75rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}

.guide-search__field {
  position: relative;
  display: block;
}
.guide-search__field > .icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.9rem;
  height: 0.9rem;
  color: var(--c-muted);
  pointer-events: none;
}
.guide-search__input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  color: var(--c-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.guide-search__input::placeholder {
  color: var(--c-dim);
}
.guide-search__input:hover {
  border-color: var(--c-line-strong);
}
.guide-search__input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.guide-search__input::-webkit-search-cancel-button {
  cursor: pointer;
}
.guide-search__summary {
  margin: 0 0 0.5rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: var(--c-muted);
}

.guide-textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  resize: vertical;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  color: var(--c-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.guide-textarea::placeholder {
  color: var(--c-dim);
}
.guide-textarea:hover {
  border-color: var(--c-line-strong);
}
.guide-textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.guide-textarea--inline {
  background: transparent;
  border-color: transparent;
}
.guide-textarea--inline:hover {
  border-color: var(--c-line);
}
.guide-textarea--inline:focus {
  background: var(--c-panel);
}

.guide-composer {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  border-color: var(--c-line);
  background: var(--c-surface-hover);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
}
.guide-composer__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-text);
}
.guide-composer__actions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.75rem;
}

.guide-link {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--c-accent-ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.guide-link .icon {
  width: 0.9rem;
  height: 0.9rem;
}
.guide-link:hover {
  color: var(--c-accent-ink);
  text-decoration: underline;
}
.guide-link--danger, .guide-link--danger:hover {
  color: var(--c-danger);
}
@media screen {
  [data-theme=light] .theme-ns .guide-link {
    color: var(--c-text);
  }
  [data-theme=light] .theme-ns .guide-link:hover {
    color: var(--c-text-sec);
  }
}

@media (max-width: 900px) {
  .guide-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: min(320px, 88%);
    background-color: var(--glass-bg-strong);
    background-image: var(--glass-sheen);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
    -webkit-backdrop-filter: var(--glass-filter-strong);
    backdrop-filter: var(--glass-filter-strong);
    border-right: 1px solid var(--glass-border);
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
  }
  .guide-reader.sidebar-collapsed .guide-sidebar {
    margin-left: 0;
  }
  .guide-reader.sidebar-open .guide-sidebar {
    transform: translateX(0);
  }
  .guide-sidebar__close {
    display: flex;
  }
}
.landing.landing-page .app-tab-section__demo {
  max-width: none;
}
@media (min-width: 1201px) {
  .landing.landing-page .app-tab-section__demo {
    flex-basis: 58%;
  }
}
@media (min-width: 1201px) {
  .landing.landing-page .app-tab-section__row {
    gap: 48px;
  }
}
.landing.landing-page .app-kit-section {
  text-align: center;
}
.landing.landing-page .app-kit-section .landing-body {
  max-width: 680px;
  margin: 0.75rem auto 0;
}
.landing.landing-page .app-kit-section__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.success-page {
  display: flex;
  flex-direction: column;
}

.success-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: calc(4rem + 3.5rem) 1.5rem 5rem;
}
@media (max-width: 500px) {
  .success-container {
    padding: calc(4rem + 1.5rem) 1rem 3rem;
  }
}

.success-wrapper {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  padding: 2.5rem;
  color: var(--c-muted);
}
@media (max-width: 500px) {
  .success-wrapper {
    padding: 1.5rem 1.25rem;
  }
}
.success-wrapper .title {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  color: var(--c-text);
}
.success-wrapper .content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.success-wrapper .content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-muted);
}
.success-wrapper .content strong {
  color: var(--c-text);
  font-weight: 500;
}
.success-wrapper .content a {
  color: var(--c-accent-ink);
}
.success-wrapper .content p:first-child strong {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.success-wrapper .nl-box {
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  margin: 1.5rem 0 0;
  padding: 1.25rem;
}
@media (max-width: 500px) {
  .success-wrapper .nl-box {
    padding: 1rem;
  }
}

.success-next {
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1.25rem;
}
@media (max-width: 500px) {
  .success-next {
    padding: 1rem;
  }
}
.success-next__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
}
.success-next__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
}
.success-next__button {
  margin-top: 0.25rem;
  text-decoration: none;
}

.success-account {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line);
}
.success-account__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
}
.success-account__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
}
.success-account__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.success-account__choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg-soft);
  color: var(--c-text);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.success-account__choice:hover {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
  border-color: var(--glass-border-hover);
}
.success-account__choice:has(input:checked) {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
  border-color: var(--c-line-strong);
}
.success-account__choice:has(input:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.success-account__choice input {
  margin: 0;
}
.success-account button {
  margin: 0.5rem 0 0;
}
.success-account__link {
  align-self: flex-start;
  margin-top: 1.5rem;
  font-size: 15px;
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.success-account__link:hover {
  text-decoration-color: currentColor;
}

.success-note {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line);
}
.success-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}
.success-note p:last-child {
  color: var(--c-text);
}

.success-back {
  margin-top: 1.5rem;
  text-decoration: none;
}

.legal-container {
  max-width: 720px;
  margin: 4rem auto 5rem;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  color: var(--c-muted);
}
@media (max-width: 500px) {
  .legal-container {
    margin-top: 2.5rem;
    margin-bottom: 3rem;
    padding: 0 1.25rem;
  }
}
.legal-container .legal-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 1rem;
}
.legal-container h1 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4.2vw, 2.75rem);
  line-height: 1.1;
  color: var(--c-text);
}
.legal-container .legal-lead {
  margin: 0 0 2.5rem;
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-muted);
}
@media (max-width: 500px) {
  .legal-container .legal-lead {
    font-size: 16px;
  }
}
.legal-container .legal-toc {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 500px) {
  .legal-container .legal-toc {
    padding: 1.25rem;
  }
}
.legal-container .legal-toc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 0.75rem;
}
.legal-container .legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.legal-container .legal-toc a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.375rem 0;
  text-decoration: none;
  font-size: 15px;
  color: var(--c-text);
  transition: color 0.15s;
}
.legal-container .legal-toc a:hover {
  color: var(--c-accent-ink);
}
.legal-container .legal-toc a:hover .toc-num {
  color: var(--c-accent-ink);
}
.legal-container .legal-toc .toc-num {
  min-width: 1.5rem;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.legal-container .legal-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem 0;
  border-top: 1px solid var(--c-line);
  scroll-margin-top: calc(4rem + 1rem);
}
.legal-container h2 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.375rem);
  line-height: 1.3;
  color: var(--c-text);
}
.legal-container ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-container p,
.legal-container li {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
}
.legal-container li::marker {
  color: var(--c-dim);
}
.legal-container strong {
  color: var(--c-text);
  font-weight: 500;
}
.legal-container .legal-section a {
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.legal-container .legal-section a:hover {
  text-decoration-color: currentColor;
}

.auth-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100dvh - 4rem);
  padding: clamp(2rem, 11vh, 7rem) 1rem 4rem;
}
@media (max-width: 500px) {
  .auth-page {
    padding: 1.5rem 1rem 3rem;
  }
}

.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  border-radius: var(--radius-card);
  width: 100%;
  max-width: 28rem;
  padding: 2rem;
}
@media (max-width: 500px) {
  .auth-card {
    padding: 1.5rem 1.25rem;
  }
}
.auth-card--wide {
  max-width: 40rem;
}

.auth-card__head {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
}

.auth-form {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
  width: 100%;
}

.auth-form__consent {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.75rem;
}
.auth-form__consent .nl-consent,
.auth-form__consent .nl-privacy {
  margin: 0;
}

.auth-messages {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
}

.auth-qr {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: start;
  gap: 0;
  width: 100%;
}
.auth-qr img {
  display: block;
  border: 1px solid var(--c-line);
  border-radius: 0.5rem;
}

.g-recaptcha {
  margin: 0;
}

.auth-card__title {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  color: var(--c-text);
  text-wrap: balance;
}

.auth-card__lead {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.auth-card__lead strong {
  font-weight: 500;
  color: var(--c-text);
}

.auth-form button[type=submit],
.auth-card > .button {
  min-height: 44px;
  font-size: 1rem;
}

.auth-card__foot {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-muted);
}
.auth-card__foot p {
  margin: 0;
}
.auth-card__foot a {
  color: var(--c-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.auth-card__foot a:hover {
  text-decoration-color: currentColor;
}

.auth-card .auth-alert {
  align-items: flex-start;
  line-height: 1.5;
}
.auth-card .auth-alert::before {
  margin-top: 0.5em;
}
.auth-card .auth-alert strong {
  font-weight: 500;
}

@media (max-width: 500px) {
  .auth-card .recovery-codes-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.auth-card .recovery-code {
  overflow-wrap: anywhere;
  color: var(--c-text);
}

.account-shell {
  width: min(100%, 900px);
  margin: 0 auto;
  min-height: calc(100dvh - 4rem);
}

.account-page {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 2rem;
  padding: 2rem 2.5rem;
}
@media (max-width: 1200px) {
  .account-page {
    padding: 1.5rem;
    gap: 1.5rem;
  }
}
@media (max-width: 500px) {
  .account-page {
    padding: 1rem;
    gap: 1.25rem;
  }
}

.account-page__header {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.25rem;
  width: 100%;
}

.account-page__title {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.12;
  color: var(--c-text);
}

.account-page__subtitle {
  font-size: 1rem;
  color: var(--c-muted);
}

.account-card {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  width: 100%;
}

.account-card__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin-bottom: 0.25rem;
  display: flex;
  justify-content: space-between;
}

.account-card__body {
  font-size: 0.875rem;
  color: var(--c-muted);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.account-card--narrow {
  max-width: 520px;
}

.account-card__actions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.account-form {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
  width: 100%;
  margin-top: 1rem;
}

.account-form__field {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
}
.account-form__field label {
  font-size: 0.875rem;
  color: var(--c-muted);
}
.account-form__field input[type=email],
.account-form__field input[type=text],
.account-form__field input[type=password] {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  color: var(--c-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.account-form__field input[type=email]::placeholder,
.account-form__field input[type=text]::placeholder,
.account-form__field input[type=password]::placeholder {
  color: var(--c-dim);
}
.account-form__field input[type=email]:hover,
.account-form__field input[type=text]:hover,
.account-form__field input[type=password]:hover {
  border-color: var(--c-line-strong);
}
.account-form__field input[type=email]:focus,
.account-form__field input[type=text]:focus,
.account-form__field input[type=password]:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.account-form__field input[type=email],
.account-form__field input[type=text],
.account-form__field input[type=password] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

.account-form__checkbox {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}
.account-form__checkbox span {
  font-size: 0.875rem;
  color: var(--c-text);
}
.account-form__checkbox input[type=checkbox] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--c-accent);
  cursor: pointer;
}

.account-form__current-value {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--c-text);
}

.account-form__status {
  font-size: 0.875rem;
  color: var(--c-text);
  margin-top: 0.75rem;
}

.account-form__errors {
  font-size: 0.875rem;
  color: var(--c-danger);
}
.account-form__errors ul {
  list-style: none;
}

.account-form__hint {
  font-size: 0.75rem;
  color: var(--c-muted);
  line-height: 1.6;
}

.account-tabs {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin-top: -8px;
  padding: 3px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-group);
  background: var(--c-panel);
  overflow-x: auto;
}

.account-tabs__tab {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-muted);
  box-shadow: none;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.account-tabs__tab:hover {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.account-tabs__tab {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
.account-tabs__tab--active {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.account-tabs__tab:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.auth-alert {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  font-size: 13px;
  width: 100%;
}
.auth-alert::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.auth-alert--info {
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-text);
}
.auth-alert--info::before {
  background: var(--c-accent);
}
.auth-alert--warning {
  border: 1px solid color-mix(in srgb, var(--c-warn) 35%, transparent);
  background: var(--c-warn-soft);
  color: var(--c-text);
}
.auth-alert--warning::before {
  background: var(--c-warn);
}

.recovery-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.recovery-code {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  padding: 0.625rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--c-text);
  text-align: center;
  letter-spacing: 0.08em;
}

.landing.app-shell {
  overflow-x: clip;
  background: var(--c-bg);
}
.landing.app-shell .navbar {
  position: sticky;
}

.app-shell__body {
  min-height: calc(100dvh - 4rem);
}

.app-tab {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  color: var(--c-muted);
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.35;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.app-tab__icon {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 16px;
  height: 16px;
  color: inherit;
}
.app-tab__icon .icon {
  width: 16px;
  height: 16px;
}
.app-tab__text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1px;
  min-width: 0;
}
.app-tab__label {
  font-weight: 400;
  color: inherit;
}
.app-tab__badge {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.app-tab:hover, .app-tab.is-active {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.app-tab:hover .app-tab__icon, .app-tab.is-active .app-tab__icon {
  background: none;
  color: var(--c-text);
}
.app-tab:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}
.app-tab--button {
  background: none;
  border: none;
  cursor: pointer;
}
.app-tab__form {
  margin: 0;
}
.app-tab.has-info {
  padding-right: 40px;
}
.app-tab__info {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-tag);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.app-tab__info .icon {
  width: 15px;
  height: 15px;
}
.app-tab__info:hover {
  color: var(--c-text);
}
.app-tab__info:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 0;
}

.app-main {
  min-width: 0;
  padding: 2rem 2.5rem 4rem;
}
@media (max-width: 1200px) {
  .app-main {
    padding: 1.5rem 1.5rem 3rem;
  }
}
@media (max-width: 500px) {
  .app-main {
    padding: 1.25rem 1rem 2.5rem;
  }
}

.app-screen--sections .landing-section {
  padding: 2.5rem 0;
  background: transparent;
}
.app-screen--sections .landing-section:first-of-type {
  padding-top: 0;
  border-top: none;
}

.app-head {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 10px;
  margin-bottom: 28px;
}
.app-head__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.12;
  color: var(--c-text);
}
.app-head__desc {
  max-width: 82ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-muted);
}

.app-faq {
  margin-top: 2.5rem;
}
.app-faq__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: block;
}
.app-faq__title {
  margin: 0.25rem 0 0.5rem;
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: var(--c-text);
}
.app-faq__item {
  padding: 1.25rem 0;
}
.app-faq__item + .app-faq__item {
  border-top: 1px solid var(--c-line);
}
.app-faq__question {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--c-text);
}
.app-faq__question::-webkit-details-marker {
  display: none;
}
.app-faq__question:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
  border-radius: 0.375rem;
}
.app-faq__icon {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--c-accent-ink);
  transition: transform 0.3s ease-in-out;
}
.app-faq__item[open] .app-faq__icon {
  transform: rotate(45deg);
}
.app-faq__answer {
  margin-top: 0.875rem;
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-muted);
}
.app-faq__answer > p {
  margin: 0;
}
.app-faq__answer > p + p {
  margin-top: 0.75rem;
}
.app-faq__answer strong {
  color: var(--c-text);
  font-weight: 500;
}
.app-faq__answer a {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 28%, transparent);
  text-underline-offset: 3px;
}
.app-faq__answer a:hover {
  text-decoration-color: var(--c-accent-ink);
}

.app-main .guide-reader-section,
.app-main .hh-app-section {
  padding-top: 0;
}
.app-main .guide-credit {
  margin-top: 1rem;
}
.app-main .account-shell {
  width: 100%;
  max-width: 900px;
  margin: 0;
  min-height: 0;
}
.app-main .account-page {
  padding: 0;
}

.hb-shelf {
  margin: 0 0 32px;
}
.hb-shelf__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: block;
  margin-bottom: 10px;
}
.hb-shelf__list {
  list-style: none;
  margin: 0;
  padding: 3px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-group);
  background: var(--c-panel);
}
@media (max-width: 1200px) {
  .hb-shelf__list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hb-shelf__list::-webkit-scrollbar {
    display: none;
  }
}
.hb-shelf__entry {
  position: relative;
  min-width: 0;
}
@media (max-width: 1200px) {
  .hb-shelf__entry {
    flex: 0 0 240px;
  }
}
.hb-shelf__item {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 11px 40px 11px 12px;
  text-decoration: none;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-muted);
  box-shadow: none;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.hb-shelf__item:hover {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.hb-shelf__item.is-active {
  background-color: var(--pill-active);
  box-shadow: var(--pill-active-shadow);
  color: var(--c-text);
}
.hb-shelf__item:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}
.hb-shelf__cover {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--c-muted);
}
.hb-shelf__cover .icon {
  width: 16px;
  height: 16px;
}
.hb-shelf__item:hover .hb-shelf__cover, .hb-shelf__item.is-active .hb-shelf__cover {
  color: var(--c-text);
}
.hb-shelf__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--c-muted);
}
.hb-shelf__item:hover .hb-shelf__title, .hb-shelf__item.is-active .hb-shelf__title {
  color: var(--c-text);
}
.hb-shelf__item > .hb-shelf__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hb-shelf__info {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-tag);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.hb-shelf__info .icon {
  width: 15px;
  height: 15px;
}
.hb-shelf__info:hover {
  background: var(--pill-active);
  color: var(--c-text);
}
.hb-shelf__info:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 0;
}

.hb-info__kind {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: block;
  margin-bottom: 0.5rem;
}
.hb-info__title {
  margin: 0;
  font-weight: 500;
}
.hb-info__desc {
  margin: 0.75rem 0 0;
  color: var(--c-muted);
}
.hb-info__note {
  margin: 0.75rem 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-muted);
}
.hb-info__facts {
  display: grid;
  gap: 0.5rem;
  margin: 1.25rem 0 1.5rem;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}
.hb-info__facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
}
.hb-info__facts dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.hb-info__facts dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-text);
}
.hb-info__facts a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-info__howto {
  margin: 1.25rem 0 1.5rem;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}

.hb-tips-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: block;
  margin-bottom: 10px;
}

.app-info .guide-howto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 16px;
}
.app-info .guide-howto .guide-howto__item {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-muted);
}
.app-info .guide-howto .guide-howto__item .icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--c-muted);
}
.app-info .guide-howto .guide-howto__item strong {
  font-weight: 500;
  color: var(--c-text);
}
.app-info .guide-howto .guide-howto__item kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 0.375rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 5px;
  background: var(--c-surface);
  color: var(--c-text);
}

.rd-player {
  position: sticky;
  top: calc(4rem + 0.75rem);
  z-index: 5;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  backdrop-filter: blur(8px);
}
.rd-player[data-status=playing] {
  border-color: var(--c-line-strong);
}
.rd-player[data-status=error] {
  border-color: color-mix(in srgb, var(--c-danger) 45%, transparent);
}
.rd-player__toggle {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.rd-player__toggle:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.rd-player__toggle {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.rd-player__toggle:hover {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
  filter: brightness(1.05);
}
.rd-player__toggle {
  cursor: pointer;
}
.rd-player__toggle .icon {
  width: 1.35rem;
  height: 1.35rem;
}
.rd-player__toggle .rd-icon-pause {
  display: none;
}
.rd-player__toggle[aria-pressed=true] .rd-icon-play {
  display: none;
}
.rd-player__toggle[aria-pressed=true] .rd-icon-pause {
  display: block;
}
.rd-player__toggle:hover:not(:disabled) {
  background: var(--c-accent);
  filter: brightness(1.05);
}
.rd-player__toggle:disabled {
  border-color: var(--c-line);
  background: transparent;
  color: var(--c-muted);
  filter: none;
  cursor: default;
}
.rd-player__toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.rd-player__now {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1px;
  flex: 1;
  min-width: 12rem;
}
.rd-player__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.rd-player__name {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--c-text);
}
.rd-player__live {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
}
.rd-player__status {
  font-size: 12px;
  color: var(--c-muted);
}
.rd-player[data-status=playing] .rd-player__status {
  color: var(--c-success);
}
.rd-player[data-status=retrying] .rd-player__status {
  color: var(--c-warn);
}
.rd-player[data-status=error] .rd-player__status {
  color: var(--c-danger);
}
.rd-player__volume {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-muted);
}
.rd-player__volume .icon {
  width: 1rem;
  height: 1rem;
}
.rd-player__volume input {
  width: 7rem;
  accent-color: var(--c-accent);
}
.rd-player__link {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--c-muted);
  text-decoration: none;
}
.rd-player__link .icon {
  width: 0.8rem;
  height: 0.8rem;
}
.rd-player__link:hover {
  color: var(--c-text);
}
.rd-player__link[hidden] {
  display: none;
}
@media (max-width: 700px) {
  .rd-player {
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }
  .rd-player__volume {
    display: none;
  }
  .rd-player__link {
    width: 100%;
  }
}

.rd-eq {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  height: 12px;
}
.rd-eq i {
  display: block;
  width: 3px;
  height: 60%;
  border-radius: 1px;
  background: var(--c-success);
}
.rd-player:not([data-status=playing]) .rd-eq {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .rd-eq i {
    animation: rd-level 0.9s ease-in-out infinite alternate paused;
  }
  .rd-eq i:nth-child(2) {
    animation-delay: -0.3s;
  }
  .rd-eq i:nth-child(3) {
    animation-delay: -0.6s;
  }
  .rd-eq i:nth-child(4) {
    animation-delay: -0.15s;
  }
  .rd-player[data-status=playing] .rd-eq i, .rd-station.is-live .rd-eq i {
    animation-play-state: running;
  }
}

@keyframes rd-level {
  from {
    height: 20%;
  }
  to {
    height: 100%;
  }
}
.rd-group {
  margin-bottom: 2rem;
}
.rd-group__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.rd-group__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.rd-group__lead {
  margin: 0.25rem 0 0;
  max-width: 70ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}

.rd-where {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--c-muted);
}
.rd-where select {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-control);
  color: var(--c-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rd-where select::placeholder {
  color: var(--c-dim);
}
.rd-where select:hover {
  border-color: var(--c-line-strong);
}
.rd-where select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-ring);
}
.rd-where select {
  padding: 5px 8px;
  font-family: inherit;
  font-size: 0.875rem;
}

.rd-station {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.rd-station:hover, .rd-station.is-current {
  border-color: var(--c-line-strong);
  background: var(--c-surface);
}
.rd-station:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.rd-station__play {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.rd-station__play:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.rd-station__play .icon {
  width: 1rem;
  height: 1rem;
}
.rd-station__play .rd-icon-pause {
  display: none;
}
.rd-station:hover .rd-station__play, .rd-station.is-current .rd-station__play {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}
.rd-station[aria-pressed=true] .rd-station__play {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.rd-station[aria-pressed=true] .rd-station__play .rd-icon-play {
  display: none;
}
.rd-station[aria-pressed=true] .rd-station__play .rd-icon-pause {
  display: block;
}
.rd-station__text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 2px;
  min-width: 0;
}
.rd-station__name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--c-text);
}
.rd-station__lead {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.rd-station__meta {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--c-muted);
}
.rd-station .rd-eq {
  visibility: hidden;
  margin-top: 0.25rem;
}
.rd-station .rd-eq i {
  background: var(--c-accent);
}
.rd-station.is-live .rd-eq {
  visibility: visible;
}

.rd-shelf-tools {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.rd-shelf-nav {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 0.5rem;
}
.rd-more.is-static .rd-shelf-nav {
  display: none;
}
.rd-shelf-nav__btn {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.rd-shelf-nav__btn:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.rd-shelf-nav__btn {
  color: var(--c-text);
  cursor: pointer;
}
.rd-shelf-nav__btn .icon {
  width: 1rem;
  height: 1rem;
}
.rd-shelf-nav__btn:hover:not(:disabled) {
  border-color: var(--c-line-strong);
  background: transparent;
  color: var(--c-text);
}
.rd-shelf-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.rd-shelf-nav__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.rd-shelf {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
  gap: 2rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.25rem;
  padding: 0.5rem 0.25rem 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-strong) transparent;
}
.rd-shelf.has-after {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.rd-shelf.has-before {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem);
  mask-image: linear-gradient(to right, transparent, #000 3rem);
}
.rd-shelf.has-before.has-after {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
.rd-shelf::-webkit-scrollbar {
  height: 6px;
}
.rd-shelf::-webkit-scrollbar-track {
  border-radius: 5rem;
  background: transparent;
}
.rd-shelf::-webkit-scrollbar-thumb {
  border-radius: 5rem;
  background: var(--c-line-strong);
}
.rd-shelf::-webkit-scrollbar-thumb:hover {
  background: var(--c-muted);
}
.rd-shelf__group {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 1rem;
  flex-shrink: 0;
}
.rd-shelf__list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
  gap: 1rem;
}
.rd-shelf__list li {
  display: flex;
  flex-shrink: 0;
  width: 13.5rem;
  scroll-snap-align: start;
}
.rd-shelf__list li > .rd-station {
  flex: 1;
  height: auto;
}
.rd-shelf__list li.is-home {
  order: -1;
}
.rd-shelf__caption {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.rd-shelf__caption span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
@media (max-width: 700px) {
  .rd-shelf {
    gap: 1.5rem;
  }
  .rd-shelf__list li {
    width: 75vw;
    max-width: 13.5rem;
  }
}

.rd-station--card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  background: var(--c-surface);
  box-shadow: none;
}
.rd-station--card .rd-station__play {
  width: 38px;
  height: 38px;
  transition: all 0.15s ease-in-out;
}
.rd-station--card:hover .rd-station__play {
  background: transparent;
}
.rd-station--card[aria-pressed=true] .rd-station__play {
  background: var(--c-accent);
}
.rd-station--card .rd-station__text {
  flex: 1;
  width: 100%;
  gap: 0.25rem;
}
.rd-station--card .rd-station__badge {
  display: none;
  align-self: flex-start;
  margin-bottom: 0.25rem;
  padding: 2px 0.5rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-success) 14%, transparent);
  color: var(--c-success);
  font-size: 12px;
}
.is-home .rd-station--card .rd-station__badge {
  display: inline-block;
}
.rd-station--card .rd-station__lead {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-station--card .rd-station__meta {
  margin-top: auto;
  padding-top: 0.5rem;
}
.rd-station--card .rd-eq {
  position: absolute;
  top: 1.25rem;
  right: 1rem;
  margin: 0;
}

.rd-note {
  margin: 2rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-muted);
}

.rd-kit-hint {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.rd-kit-hint a {
  color: var(--c-text);
  white-space: nowrap;
}

.tr-facts {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1200px) {
  .tr-facts {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 500px) {
  .tr-facts {
    grid-template-columns: 1fr 1fr;
  }
}

.tr-fact {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 6px;
  padding: 14px 16px;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
}
.tr-fact strong {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
.tr-fact span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-muted);
}

.tr-h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  color: var(--c-text);
}

.tr-lead {
  margin: 0.5rem 0 0;
  max-width: 78ch;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--c-muted);
}

.tr-courses {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.tr-course {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  transition: border-color 0.15s;
}
.tr-course:hover {
  border-color: var(--c-line-strong);
}
.tr-course[open] {
  border-color: var(--c-line-strong);
  background: var(--c-surface);
}
.tr-course__summary {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.tr-course__summary::-webkit-details-marker {
  display: none;
}
.tr-course__summary:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 1rem;
}
.tr-course__icon {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 40px;
  height: 40px;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-control);
  color: var(--c-muted);
}
.tr-course__icon .icon {
  width: 1.2rem;
  height: 1.2rem;
}
.tr-course:hover .tr-course__icon, .tr-course[open] .tr-course__icon {
  color: var(--c-text);
}
.tr-course__head {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.tr-course__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: block;
}
.tr-course__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--c-text);
}
.tr-course__lead {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-muted);
}
.tr-course__toggle {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
}
.tr-course__toggle-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
}
@media (max-width: 500px) {
  .tr-course__toggle-text {
    display: none;
  }
}
.tr-course__chevron {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.tr-course__chevron:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.tr-course__chevron .icon {
  width: 1rem;
  height: 1rem;
}
.tr-course:hover .tr-course__chevron, .tr-course[open] .tr-course__chevron {
  border-color: var(--c-line-strong);
  background: transparent;
  color: var(--c-text);
}
.tr-course[open] .tr-course__chevron {
  transform: rotate(180deg);
}
.tr-course__body {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0 1.25rem 1.25rem;
  padding-left: calc(1.25rem + 2.5rem + 1rem);
}
@media (max-width: 500px) {
  .tr-course__body {
    padding-left: 1.25rem;
  }
}
.tr-course__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.tr-course__modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}
@media (max-width: 1200px) {
  .tr-course__modules {
    grid-template-columns: 1fr;
  }
}
.tr-course__modules li {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1px;
  padding-left: 0.75rem;
  border-left: 1px solid var(--c-line-strong);
  font-size: 0.875rem;
  line-height: 1.55;
}
.tr-course__modules strong {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--c-text);
}
.tr-course__modules span {
  color: var(--c-muted);
}
.tr-course__foot {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.875rem;
}
.tr-course__link {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--c-accent-ink);
}
.tr-course__link .icon {
  width: 0.85rem;
  height: 0.85rem;
}
.tr-course__link:hover {
  color: var(--c-accent-ink);
}
.tr-course__prepare {
  font-size: 0.75rem;
  color: var(--c-muted);
}
.tr-course__prepare a {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-accent) 28%, transparent);
  text-underline-offset: 2px;
}
.tr-course__prepare a:hover {
  color: var(--c-text);
  text-decoration-color: var(--c-accent-ink);
}

.tr-sources {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-line);
}
.tr-sources__list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  gap: 0.5rem 1.25rem;
  flex-wrap: wrap;
}
.tr-sources__list a {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--c-muted);
}
.tr-sources__list a .icon {
  width: 0.75rem;
  height: 0.75rem;
}
.tr-sources__list a:hover {
  color: var(--c-text);
}
.tr-sources__note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-muted);
}

.al-signal--clear .al-wave {
  color: var(--c-accent);
}

@media screen {
  [data-theme=light] .theme-ns .hh-tip,
  [data-theme=light] .theme-ns .cl-kit-hint {
    border-left-color: var(--c-accent-ink);
  }
}

@media screen {
  [data-theme=light] .theme-ns .share-badge__actions .button.secondary,
  [data-theme=light] .theme-ns .share-badge__actions button.secondary {
    border-color: var(--c-line);
    box-shadow: none;
  }
  [data-theme=light] .theme-ns .share-badge__actions .button.secondary:hover,
  [data-theme=light] .theme-ns .share-badge__actions button.secondary:hover {
    border-color: var(--c-line-strong);
  }
}

.app-main--flush {
  padding: 0;
}
@media (max-width: 1200px) {
  .app-main--flush {
    padding: 0;
  }
}
@media (max-width: 500px) {
  .app-main--flush {
    padding: 0;
  }
}

.shm {
  --shm-open: #7CC48A;
  --shm-hours: #E6C46A;
  --shm-request: #8DB0F2;
  --shm-unknown: #A1A1AA;
  --shm-cluster: #E6F07A;
  --shm-cluster-ring: rgba(230, 240, 122, 0.28);
  --shm-cluster-text: #101010;
  --shm-stroke: #0A0A0B;
  --shm-selected: #EDEDEF;
  --shm-me: #5B9BFF;
  --shm-me-ring: #FFFFFF;
  --shm-map-bg: #141417;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100dvh - var(--shm-top, 4rem) - calc(50px + 1rem * 2 + env(safe-area-inset-bottom, 0px)));
  min-height: 460px;
}
@media screen {
  [data-theme=light] .theme-ns .shm {
    --shm-open: #2F8A45;
    --shm-hours: #B7791F;
    --shm-request: #2F6FDB;
    --shm-unknown: #6B6B75;
    --shm-cluster: #DCEB5E;
    --shm-cluster-ring: rgba(92, 102, 0, 0.35);
    --shm-cluster-text: #17171A;
    --shm-stroke: #FFFFFF;
    --shm-selected: #17171A;
    --shm-me: #2563EB;
    --shm-me-ring: #FFFFFF;
    --shm-map-bg: #E4E5E8;
  }
}

.shm-bar {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.shm-bar__tools {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 1000px) {
  .shm-bar {
    padding: 0.625rem 0.75rem;
  }
}

.shm-btn {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s;
  border-color: var(--glass-border);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  color: var(--c-text);
  box-shadow: var(--glass-highlight);
}
.shm-btn:hover:not(:disabled) {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
@media screen {
  [data-theme=light] .theme-ns .shm-btn {
    border-color: var(--c-line-strong);
    box-shadow: 0 1px 2px rgba(22, 22, 28, 0.05);
  }
  [data-theme=light] .theme-ns .shm-btn:hover:not(:disabled) {
    border-color: rgba(22, 22, 28, 0.26);
  }
}
.shm-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  height: 38px;
  width: auto;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  white-space: nowrap;
}
.shm-btn .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.shm-btn[aria-pressed=true], .shm-btn[aria-expanded=true] {
  background-color: var(--c-surface-hover);
  border-color: var(--c-line-strong);
}
.shm-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.shm-btn[aria-busy=true] {
  opacity: 1;
  cursor: progress;
}
.shm-btn:focus-visible {
  outline: 2px solid var(--c-focus, var(--c-accent));
  outline-offset: 2px;
}
.shm-btn--accent {
  border-color: transparent;
  background-color: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: none;
}
.shm-btn--accent:hover:not(:disabled) {
  background-color: var(--c-accent-hover);
  border-color: transparent;
}
.shm-btn--accent[aria-expanded=true] {
  background-color: var(--c-accent-hover);
  border-color: transparent;
}
@media screen {
  [data-theme=light] .theme-ns .shm-btn {
    background-color: var(--c-surface);
  }
  [data-theme=light] .theme-ns .shm-btn--accent {
    border-color: transparent;
    background-color: var(--c-accent);
  }
}

.shm-icon-btn {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.shm-icon-btn:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.shm-icon-btn {
  flex-shrink: 0;
}
.shm-icon-btn .icon {
  width: 16px;
  height: 16px;
}

.shm-link {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--c-accent-ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.shm-link:hover {
  text-decoration-thickness: 2px;
}

.shm-finder {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
}
.shm-finder__slot {
  position: relative;
  display: flex;
  flex: 0 0 38px;
  min-width: 0;
  transition: flex-grow 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .shm-finder__slot {
    transition: none;
  }
}
.shm-finder[data-finder=search] .shm-search, .shm-finder[data-finder=region] .shm-jump {
  flex-grow: 1;
}
.shm-finder__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  animation: shm-fade-in 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .shm-finder__field {
    animation: none;
  }
}
.shm-finder__field[hidden] {
  display: none;
}
.shm-finder .shm-btn.shm-finder__toggle {
  width: 38px;
  padding: 0;
}
.shm-finder .shm-btn.shm-finder__toggle[hidden] {
  display: none;
}

@keyframes shm-fade-in {
  from {
    opacity: 0;
  }
}
.shm-search__icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  display: grid;
  color: var(--c-muted);
  pointer-events: none;
}
.shm-search__icon .icon {
  width: 16px;
  height: 16px;
}
.shm-search__input {
  width: 100%;
  height: 38px;
  padding: 0 0.75rem 0 2.25rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-control);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
}
.shm-search__input::placeholder {
  color: var(--c-dim);
}
.shm-search__input:focus-visible {
  border-color: var(--c-focus, var(--c-accent));
  box-shadow: var(--focus-ring);
}
.shm-search__input:disabled {
  opacity: 0.6;
}
.shm-search__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: min(380px, 60vh);
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-group);
  background: var(--glass-solid-strong, var(--c-panel));
  box-shadow: var(--glass-shadow-lg);
}
.shm-search__list[hidden] {
  display: none;
}
.shm-search__option {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
}
.shm-search__option:hover, .shm-search__option[aria-selected=true] {
  background: var(--c-surface-hover);
}
.shm-search__label {
  color: var(--c-text);
  font-size: 0.875rem;
  font-weight: 500;
}
.shm-search__sub {
  color: var(--c-muted);
  font-size: 0.75rem;
}
.shm-search__empty {
  padding: 0.5rem 0.75rem;
  color: var(--c-muted);
  font-size: 0.875rem;
}

.shm-filter {
  position: relative;
}
.shm-filter__badge {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 5rem;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.shm-filter__badge[hidden] {
  display: none;
}
.shm-filter__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 250px;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-group);
  background: var(--glass-solid-strong, var(--c-panel));
  box-shadow: var(--glass-shadow-lg);
}
.shm-filter__panel[hidden] {
  display: none;
}
.shm-filter__legend {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.5rem;
  padding: 0;
}
.shm-filter__options {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 2px;
}
.shm-filter__option {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}
.shm-filter__option:hover {
  background: var(--c-surface-hover);
}
.shm-filter__option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-accent-ink);
}
.shm-filter__text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex: 1;
}
.shm-filter__label {
  color: var(--c-text);
  font-size: 0.875rem;
}
.shm-filter__count {
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
@media (max-width: 1000px) {
  .shm-filter {
    position: static;
  }
  .shm-filter__panel {
    position: fixed;
    top: auto;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(50px + 1rem * 2 + env(safe-area-inset-bottom, 0px));
    z-index: 60;
  }
}

.shm-jump__select {
  width: 100%;
  height: 38px;
  padding: 0 2.25rem 0 0.75rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
}
.shm-jump__select:focus-visible {
  outline: 2px solid var(--c-focus, var(--c-accent));
  outline-offset: 2px;
}
.shm-jump__select:disabled {
  opacity: 0.6;
  cursor: default;
}
.shm-jump__select option {
  background: var(--c-panel);
  color: var(--c-text);
}
.shm-jump__chevron {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: grid;
  color: var(--c-muted);
  pointer-events: none;
}
.shm-jump__chevron .icon {
  width: 16px;
  height: 16px;
}
@media screen {
  [data-theme=light] .theme-ns .shm-jump .shm-jump__select {
    border-color: var(--c-line-strong);
    background-color: var(--c-surface);
  }
}

.shm-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--shm-map-bg);
}

.shm-map.shm-map {
  position: absolute;
  inset: 0;
}
.shm-map.shm-map[hidden] {
  display: none;
}

.shm-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100% - 2rem);
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 5rem;
  background: var(--c-panel);
  color: var(--c-text-sec);
  font-size: 0.875rem;
}
.shm-loading[hidden] {
  display: none;
}
.shm-loading__spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid rgba(var(--c-tint), 0.18);
  border-top-color: var(--c-accent-ink);
  border-radius: 50%;
  animation: shm-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .shm-loading__spinner {
    animation-duration: 2.4s;
  }
}
.shm[data-state=error] .shm-loading {
  border-color: var(--c-danger);
  color: var(--c-text);
}
.shm[data-state=error] .shm-loading .shm-loading__spinner {
  display: none;
}

@keyframes shm-spin {
  to {
    transform: rotate(360deg);
  }
}
.shm-messages {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: min(560px, 100% - 7rem);
  pointer-events: none;
}
.shm[data-mode=list] .shm-messages {
  position: static;
  transform: none;
  align-items: stretch;
  width: auto;
  max-width: none;
  margin: 0.75rem 0.75rem 0;
}
@media (max-width: 1000px) {
  .shm-messages {
    left: 0.75rem;
    align-items: flex-start;
    max-width: calc(100% - 5rem);
    transform: none;
  }
}

.shm-banner,
.shm-notice {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(230, 196, 106, 0.35);
  border-radius: var(--radius-control);
  background: var(--c-panel);
  box-shadow: var(--glass-shadow);
  color: var(--c-text);
  font-size: 0.875rem;
  line-height: 1.45;
  pointer-events: auto;
}
.shm-banner[hidden],
.shm-notice[hidden] {
  display: none;
}

.shm-notice {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 0.5rem;
  padding-right: 0.375rem;
}
.shm-notice__text {
  flex: 1;
  margin: 0;
  padding-top: 5px;
}
@media screen {
  [data-theme=light] .theme-ns .shm-notice {
    border-color: rgba(183, 121, 31, 0.45);
  }
}

.shm-panel,
.shm-list {
  position: absolute;
  top: 0.75rem;
  z-index: 8;
  width: 360px;
  max-height: calc(100% - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-card);
  background: var(--glass-solid-strong, var(--c-panel));
  box-shadow: var(--glass-shadow-lg);
  scrollbar-width: thin;
}
.shm-panel[hidden],
.shm-list[hidden] {
  display: none;
}

.shm-panel {
  left: 0.75rem;
}
.shm-panel__inner {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.75rem;
  padding: 1rem;
}
.shm-panel__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.shm-panel__kind {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.shm-panel__back {
  align-self: flex-start;
  font-size: 0.875rem;
}
.shm-panel__title {
  margin: 0;
  color: var(--c-text);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  outline: none;
}
.shm-panel__place {
  margin: -0.5rem 0 0;
  color: var(--c-text-sec);
  font-size: 0.875rem;
  line-height: 1.5;
}
.shm-panel__facts {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.625rem;
  margin: 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.shm-panel__fact {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.shm-panel__fact dt {
  color: var(--c-muted);
}
.shm-panel__fact dd {
  margin: 0;
  color: var(--c-text);
}
.shm-panel__coords {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.shm-panel__warning {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-control);
  background: var(--c-warn-soft);
  color: var(--c-text);
  font-size: 0.875rem;
  line-height: 1.5;
}
.shm-panel__warning .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-warn);
}
.shm-panel__actions {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.shm-panel__caveat {
  margin: 0;
  color: var(--c-muted);
  font-size: 0.75rem;
  line-height: 1.55;
}
.shm-panel__group {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shm-mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.shm-nav {
  position: relative;
}
.shm-nav__menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 12;
  min-width: 230px;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-group);
  background: var(--c-surface);
  box-shadow: var(--glass-shadow-lg);
}
.shm-nav__menu[hidden] {
  display: none;
}
.shm-nav__link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--c-text);
  font-size: 0.875rem;
  text-decoration: none;
}
.shm-nav__link:hover, .shm-nav__link:focus-visible {
  background: var(--c-surface-hover);
  outline: none;
}

.shm-list {
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.75rem 0.75rem;
}
.shm-list__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.25rem;
}
.shm-list__title {
  margin: 0;
  color: var(--c-text);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 500;
  outline: none;
}
.shm-list__note {
  margin: 0.25rem 0 0.5rem;
  padding: 0 0.25rem;
  color: var(--c-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
.shm-list__items {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shm[data-mode=list] .shm-list {
  position: static;
  width: auto;
  max-width: 720px;
  max-height: none;
  margin: 0.75rem auto;
  box-shadow: none;
}
.shm-list__head .shm-ctrl {
  margin-left: auto;
}
.shm[data-mode=list] .shm-list [data-list-close] {
  display: none;
}

.shm-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-text);
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  cursor: pointer;
}
.shm-row:hover, .shm-row:focus-visible {
  background: var(--c-surface-hover);
}
.shm-row:focus-visible {
  outline: 2px solid var(--c-focus, var(--c-accent));
  outline-offset: -2px;
}
.shm-row__text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.shm-row__title {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shm-row__sub {
  overflow: hidden;
  color: var(--c-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shm-row__distance {
  flex-shrink: 0;
  color: var(--c-text-sec);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.shm-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(var(--c-tint), 0.08);
}
.shm-dot--open {
  background: var(--shm-open);
}
.shm-dot--hours {
  background: var(--shm-hours);
}
.shm-dot--request {
  background: var(--shm-request);
}
.shm-dot--unknown {
  background: var(--shm-unknown);
}

.shm .shm-ctrl {
  display: grid;
  place-items: center;
  color: var(--c-text);
}
.shm .shm-ctrl .icon {
  width: 18px;
  height: 18px;
}
.shm .shm-ctrl[data-state=active] {
  color: var(--shm-me);
}
.shm .shm-ctrl[aria-busy=true] {
  cursor: progress;
}
.shm .shm-ctrl[aria-busy=true] .icon {
  animation: shm-pulse 0.9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .shm .shm-ctrl[aria-busy=true] .icon {
    animation: none;
    opacity: 0.45;
  }
}

@keyframes shm-pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}
.shm.has-list .maplibregl-ctrl-top-right {
  right: calc(360px + 0.75rem);
}
@media (max-width: 1000px) {
  .shm.has-list .maplibregl-ctrl-top-right {
    right: 0;
  }
}

@media (max-width: 1000px) {
  .shm-panel,
  .shm-list {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 62%;
    border-bottom: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .shm-panel::before,
  .shm-list::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 0.5rem;
    border-radius: 2px;
    background: rgba(var(--c-tint), 0.18);
  }
  .shm-panel {
    z-index: 9;
  }
  .shm-panel::before {
    margin-top: 0.5rem;
  }
  .shm-list {
    padding-top: 0.5rem;
  }
}
.shm-foot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}
.shm-foot p {
  margin: 0;
}
.shm:not([data-mode=list]) .shm-foot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.shm:not([data-mode=list]) .shm-foot__about {
  display: none;
}
@media (max-width: 1000px) {
  .shm-foot {
    padding: 0.375rem 0.75rem;
  }
}

.shm-status {
  color: var(--c-text-sec);
}

.shm-dialog__body {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.75rem;
}
.shm-dialog__body p {
  margin: 0;
}
.shm-dialog__body strong {
  color: var(--c-text);
  font-weight: 500;
}

.shm-dialog__asof {
  color: var(--c-text);
  font-weight: 500;
}
.shm-dialog__asof a {
  color: var(--c-accent-ink);
}

.shm-empty {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 620px;
  margin: 4rem auto;
  padding: 0 1.5rem;
}
.shm-empty__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: rgba(var(--c-tint), 0.05);
  color: var(--c-muted);
}
.shm-empty__icon .icon {
  width: 20px;
  height: 20px;
}
.shm-empty__title {
  margin: 0;
  color: var(--c-text);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 500;
}
.shm-empty__text {
  margin: 0;
  color: var(--c-text-sec);
  font-size: 1rem;
  line-height: 1.7;
}
.shm-empty__text a {
  color: var(--c-accent-ink);
}

.shm:has(.shm-empty) {
  display: block;
  height: auto;
  min-height: 0;
}

.shm .maplibregl-map {
  font-family: var(--font-body);
}

.shm .maplibregl-canvas:focus-visible {
  outline: 2px solid var(--c-focus, var(--c-accent));
  outline-offset: -2px;
}

.shm .maplibregl-ctrl-top-right {
  top: calc(0.75rem - 10px);
  right: calc(0.75rem - 10px);
}

.shm .maplibregl-ctrl-group {
  overflow: hidden;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-control);
  background: var(--glass-solid-strong, var(--c-panel));
  box-shadow: var(--glass-shadow);
}
.shm .maplibregl-ctrl-group:not(:empty) {
  box-shadow: var(--glass-shadow);
}
.shm .maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background-color: transparent;
}
.shm .maplibregl-ctrl-group button:hover:not(:disabled) {
  background-color: var(--c-surface-hover);
}
.shm .maplibregl-ctrl-group button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--c-focus, var(--c-accent));
}
.shm .maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--c-line);
}

.shm .maplibregl-ctrl-icon,
.shm .maplibregl-ctrl-attrib-button {
  filter: invert(0.92);
}
@media screen {
  [data-theme=light] .theme-ns .shm .maplibregl-ctrl-icon,
  [data-theme=light] .theme-ns .shm .maplibregl-ctrl-attrib-button {
    filter: none;
  }
}

.shm .maplibregl-ctrl-attrib,
.shm .maplibregl-ctrl-attrib-inner {
  color: var(--c-text-sec);
  font-size: 11px;
}
.shm .maplibregl-ctrl-attrib a,
.shm .maplibregl-ctrl-attrib-inner a {
  color: var(--c-text-sec);
}
.shm .maplibregl-ctrl-attrib.maplibregl-compact,
.shm .maplibregl-ctrl-attrib-inner.maplibregl-compact {
  border-radius: var(--radius-control);
  background-color: var(--glass-solid-strong, var(--c-panel));
}
.shm .maplibregl-ctrl-attrib:not(.maplibregl-compact),
.shm .maplibregl-ctrl-attrib-inner:not(.maplibregl-compact) {
  background-color: var(--glass-solid-strong, var(--c-panel));
}

.shm .maplibregl-ctrl-attrib-button {
  background-color: transparent;
}

@media (max-width: 1000px) {
  .shm.has-panel .maplibregl-ctrl-bottom-right,
  .shm.has-list .maplibregl-ctrl-bottom-right {
    visibility: hidden;
  }
}
@media (max-width: 500px) {
  .shm-bar {
    gap: 0.375rem;
  }
  .shm-bar__tools,
  .shm-finder {
    gap: 0.375rem;
  }
  .shm-btn__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .shm-filter .shm-btn,
  .shm-btn[data-list-toggle] {
    min-width: 38px;
    padding: 0 0.625rem;
  }
}
.ord-card {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  margin-bottom: 1rem;
}
@media (max-width: 500px) {
  .ord-card {
    padding: 1rem;
  }
}
.ord-card--status {
  padding: 1.75rem;
}
@media (max-width: 500px) {
  .ord-card--status {
    padding: 1.25rem 1rem;
  }
}
.ord-card__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.ord-card__heading {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.25rem;
  min-width: 0;
}
.ord-card__title {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-muted);
}
.ord-card__title .icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-muted);
}

.ord-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.ord-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 24px;
  color: var(--c-text);
}
.ord-title__qty {
  color: var(--c-muted);
}

.ord-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--c-muted);
}

.ord-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
.ord-badge--received {
  color: var(--c-muted);
  border-color: color-mix(in srgb, var(--c-muted) 35%, transparent);
  background: color-mix(in srgb, var(--c-muted) 8%, transparent);
}
.ord-badge--preparing {
  color: var(--c-warn);
  border-color: color-mix(in srgb, var(--c-warn) 35%, transparent);
  background: color-mix(in srgb, var(--c-warn) 8%, transparent);
}
.ord-badge--packed {
  color: var(--c-text);
  border-color: color-mix(in srgb, var(--c-text) 35%, transparent);
  background: color-mix(in srgb, var(--c-text) 8%, transparent);
}
.ord-badge--shipped {
  color: var(--c-on-accent);
  border-color: var(--c-accent);
  background: var(--c-accent);
}
.ord-badge--delivered {
  color: var(--c-success);
  border-color: color-mix(in srgb, var(--c-success) 35%, transparent);
  background: color-mix(in srgb, var(--c-success) 8%, transparent);
}
.ord-badge--cancelled {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 35%, transparent);
  background: color-mix(in srgb, var(--c-danger) 8%, transparent);
}

.ord-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 1.75rem 0 0.75rem;
  padding: 0;
}
@media (max-width: 640px) {
  .ord-steps {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
}

.ord-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 0.25rem;
}
.ord-step::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 50%;
  width: 100%;
  height: 1px;
  background: var(--c-line);
}
.ord-step:first-child::before {
  display: none;
}
.ord-step.is-done::before, .ord-step.is-current::before {
  background: var(--c-accent);
}
.ord-step__dot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-control);
  background: var(--c-surface);
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.ord-step__dot .icon {
  width: 0.9rem;
  height: 0.9rem;
}
.ord-step__label {
  font-size: 0.875rem;
  color: var(--c-muted);
}
.ord-step__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.ord-step.is-done .ord-step__dot {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.ord-step.is-done .ord-step__label {
  color: var(--c-muted);
}
.ord-step.is-current .ord-step__dot {
  border-color: var(--c-line-strong);
  background: var(--c-surface-hover);
  color: var(--c-text);
  box-shadow: none;
}
.ord-step.is-current .ord-step__label {
  color: var(--c-text);
  font-weight: 500;
}
@media (max-width: 640px) {
  .ord-step {
    flex-direction: row;
    gap: 0.75rem;
    text-align: left;
    padding: 0.25rem 0;
  }
  .ord-step::before {
    top: -0.5rem;
    left: calc(1rem - 1px);
    right: auto;
    width: 1px;
    height: 8px;
  }
  .ord-step__dot {
    margin-bottom: 0;
  }
  .ord-step__date {
    margin-left: auto;
  }
}

.ord-progress {
  height: 6px;
  border-radius: 5rem;
  background: var(--c-line);
  overflow: hidden;
  appearance: none;
  display: block;
  width: 100%;
  border: 0;
}
.ord-progress::-webkit-progress-bar {
  background: transparent;
}
.ord-progress::-webkit-progress-value {
  border-radius: 5rem;
  background: var(--c-accent);
}
.ord-progress::-moz-progress-bar {
  border-radius: 5rem;
  background: var(--c-accent);
}
.ord-progress--thin {
  height: 4px;
}
.ord-progress--green::-webkit-progress-value {
  border-radius: 5rem;
  background: var(--c-success);
}
.ord-progress--green::-moz-progress-bar {
  border-radius: 5rem;
  background: var(--c-success);
}

.ord-status-text {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-muted);
}
.ord-status-text strong {
  color: var(--c-text);
  font-weight: 500;
}
.ord-status-text__presale {
  margin-top: 0.5rem;
  color: var(--c-text);
}

.ord-packing {
  margin-top: 1.25rem;
  padding: 1rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
}
.ord-packing__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--c-muted);
}
.ord-packing__head span {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.5rem;
}
.ord-packing__head .icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-muted);
}
.ord-packing__head strong {
  color: var(--c-text);
  font-family: var(--font-mono);
  font-weight: 400;
}

.ord-tracking {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background-color: var(--glass-bg-soft);
  background-image: none;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
  border-radius: var(--radius-group);
  background: var(--c-panel);
}
.ord-tracking__text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.25rem;
}
.ord-tracking__number {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.ord-tracking .landing-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ord-tracking .landing-btn .icon {
  width: 1rem;
  height: 1rem;
}

.ord-notice {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.ord-notice strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--c-text);
}
.ord-notice p {
  margin: 0;
  color: var(--c-text-sec);
}
.ord-notice .icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 2px;
}
.ord-notice--cancelled {
  border: 1px solid color-mix(in srgb, var(--c-danger) 35%, transparent);
  background: var(--c-danger-soft);
}
.ord-notice--cancelled .icon {
  color: var(--c-danger);
}

.ord-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) {
  .ord-grid {
    grid-template-columns: 1fr;
  }
}
.ord-grid .ord-card {
  margin-bottom: 0;
}
.ord-grid + .ord-card {
  margin-top: 1rem;
}

.ord-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.75rem;
}
.ord-dl dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 2px;
}
.ord-dl dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--c-text);
}

.ord-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ord-timeline__item {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.875rem;
}
.ord-timeline__item:last-child {
  border-bottom: none;
}
.ord-timeline__date {
  flex-shrink: 0;
  min-width: 8.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.ord-timeline__label {
  color: var(--c-text);
}
.ord-timeline__note {
  color: var(--c-muted);
}

.ord-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 1.5rem 0 0.75rem;
}
.ord-section-title:first-of-type {
  margin-top: 0;
}

.ord-list {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.75rem;
}

.ord-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color 0.15s;
}
.ord-item:hover {
  border-color: var(--c-line-strong);
}
.ord-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: 0.5rem;
}
.ord-item__title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.ord-item__side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-end;
  gap: 0.5rem;
}
.ord-item__tracking {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-muted);
}
.ord-item__tracking .icon {
  width: 0.85rem;
  height: 0.85rem;
}
.ord-item__more {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--c-accent-ink);
}
.ord-item__more .icon {
  width: 0.9rem;
  height: 0.9rem;
}
@media (max-width: 500px) {
  .ord-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .ord-item__side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.ord-empty {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius-card);
  text-align: center;
}
.ord-empty__icon {
  display: inline-grid;
  place-items: center;
  place-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-control);
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  box-shadow: var(--glass-highlight);
  color: var(--c-muted);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.ord-empty__icon:hover {
  border-color: var(--glass-border-hover);
  background-color: var(--glass-bg-hover);
  color: var(--c-text);
}
.ord-empty__icon {
  color: var(--c-accent-ink);
}
.ord-empty__icon:hover {
  border-color: var(--c-line);
  color: var(--c-accent-ink);
}
.ord-empty__icon .icon {
  width: 1.4rem;
  height: 1.4rem;
}
.ord-empty__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 1.125rem;
  color: var(--c-text);
}
.ord-empty__desc {
  margin: 0 0 0.75rem;
  max-width: 48ch;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--c-muted);
}
.ord-empty__desc strong {
  color: var(--c-text);
}

.ord-back {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--c-muted);
  text-decoration: none;
}
.ord-back .icon {
  width: 0.9rem;
  height: 0.9rem;
}
.ord-back:hover {
  color: var(--c-text);
}

.landing .ord-track__section {
  padding-top: calc(4rem + 3.5rem);
  min-height: 100vh;
}
@media (max-width: 500px) {
  .landing .ord-track__section {
    padding-top: calc(4rem + 1.5rem);
  }
}

.ord-track__cta {
  margin-top: 1.5rem;
  text-align: center;
}

.ord-track__note {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}
.ord-track__note a {
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.ord-track__note a:hover {
  text-decoration-color: currentColor;
}

.ord-meta--upgrade {
  margin-top: 0.25rem;
}
.ord-meta--upgrade a {
  color: var(--c-text);
}

.ord-badge--upgraded {
  color: var(--c-text);
  border: 1px solid transparent;
  background: var(--c-accent-soft);
}

.ord-item__side .ord-badge--upgraded {
  margin-left: 0.25rem;
}

.ord-status-text__next {
  margin: 0.75rem 0 0;
  color: var(--c-muted);
}

.ord-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ord-upgrade {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-surface);
}
.ord-upgrade--done {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.ord-upgrade--done p {
  margin: 0;
  color: var(--c-muted);
}
.ord-upgrade--done a {
  color: var(--c-text);
}
.ord-upgrade__title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--c-text);
}
.ord-upgrade__text, .ord-upgrade__note {
  margin: 0;
  color: var(--c-muted);
  line-height: 1.55;
}
.ord-upgrade__note {
  font-size: 13px;
}
.ord-upgrade__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ord-upgrade__details summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--c-text);
}
.ord-upgrade__lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}
.ord-upgrade__list-title {
  margin: 0 0 0.25rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text);
}
.ord-upgrade__list {
  margin: 0;
  padding-left: 1rem;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-muted);
}

.notif-head {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--c-line);
}
.notif-head__title {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--c-text);
}
.notif-head__email {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-muted);
  overflow-wrap: anywhere;
}

.notif-state {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--c-text);
}

.offline-page {
  display: flex;
  flex-direction: column;
}
.offline-page .landing-hero {
  flex: 1;
  display: flex;
  align-items: center;
}
.offline-page .landing-hero .landing-container {
  width: 100%;
}
.offline-page .landing-hero__desc {
  max-width: none;
}
.offline-page .landing-problem__list {
  background-color: var(--glass-bg);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  border-radius: var(--radius-card);
  gap: 0;
  margin-top: 2rem;
  padding: 0.25rem 1.25rem;
}
.offline-page .landing-problem__item {
  align-items: baseline;
  padding: 0.875rem 0;
  font-size: 15px;
}
.offline-page .landing-problem__item + .landing-problem__item {
  border-top: 1px solid var(--c-line);
}
.offline-page .landing-problem__icon {
  margin-top: 0;
}
.offline-page .landing-cta__link {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s, color 0.15s;
}
.offline-page .landing-cta__link:hover {
  color: var(--c-accent-ink);
  text-decoration-color: currentColor;
}
.offline-page .landing-privacy {
  margin-top: 1.5rem;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
}

/*# sourceMappingURL=main.css.d455cabb1078.map */