:root {

  --color-border-primary-10: color-mix(in oklch, var(--sp-color-primary) 10%, transparent);
  --color-border-primary-15: color-mix(in oklch, var(--sp-color-primary) 15%, transparent);
  --color-border-primary-20: color-mix(in oklch, var(--sp-color-primary) 20%, transparent);
  --color-background-dark: oklch(0.97 0.003 240);
  --color-text-inverted: oklch(0.15 0 0);
  --shadow-accent: 0 4px 12px oklch(0.75 0.16 52 / 0.3);
  --radius-xxl: 24px;
  --z-content: 10;
  --z-tooltip: 2000;
}

.is-hidden {
  display: none;
}

.guide-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--sp-color-bg);
}

.guide-background::before {
  content: '';
  position: fixed;
  top: -150px;
  right: -150px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--sp-color-primary) 25%, transparent) 0%,
    color-mix(in oklch, var(--sp-color-primary) 15%, transparent) 35%,
    color-mix(in oklch, var(--sp-color-primary) 5%, transparent) 70%,
    transparent 100%
  );
  animation: pulse-soft 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

.guide-background::after {
  content: '';
  position: fixed;
  bottom: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--sp-color-primary) 22%, transparent) 0%,
    color-mix(in oklch, var(--sp-color-primary) 12%, transparent) 40%,
    color-mix(in oklch, var(--sp-color-primary) 4%, transparent) 70%,
    transparent 100%
  );
  animation: pulse-soft 8s cubic-bezier(0.4, 0, 0.6, 1) infinite 2s;
  pointer-events: none;
}

.guide-shape-left {
  position: fixed;
  left: -150px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--sp-color-primary) 40%, transparent) 0%,
    color-mix(in oklch, var(--sp-color-primary) 22%, transparent) 30%,
    color-mix(in oklch, var(--sp-color-primary) 8%, transparent) 60%,
    transparent 100%
  );
  animation: pulse-soft 8s cubic-bezier(0.4, 0, 0.6, 1) infinite 4s;
  pointer-events: none;
  z-index: -1;
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.9; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateY(-50%) scale(1.05); }
}



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 1rem;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--sp-color-bg);
  color: var(--sp-color-text-primary);
  font-family: var(--sp-font-sans);
  line-height: 1.6;
}


.guide-list main a,
.guide-post a,
.post-content a {
  color: var(--sp-color-text-secondary);
  text-decoration: none;
  transition: color var(--sp-duration-fast) var(--sp-ease-default);
}

.guide-list main a:hover,
.guide-post a:hover,
.post-content a:hover {
  color: var(--sp-color-text-primary);
}

.guide-list main a:visited,
.guide-post a:visited,
.post-content a:visited {
  color: var(--sp-color-text-secondary);
}


svg {
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .guide-background::before,
  .guide-background::after,
  .guide-shape-left {
    animation: none;
  }

  .guide-list main a,
  .guide-post a,
  .post-content a {
    transition: none;
  }
}