:root {
  --island-primary: #19c8b9;
  --island-primary-hover: #3dd4c6;
  --island-text: #794f27;
  --island-body: #725d42;
  --island-muted: #8a7b66;
  --island-bg: #f8f8f0;
  --island-content: rgb(247, 243, 223);
  --island-border: #c4b89e;
  --island-border-strong: #9f927d;
  --island-yellow: #ffcc00;
  --island-shadow-btn: #bdaea0;
  --island-shadow: rgba(61, 52, 40, 0.12);
  --island-header-offset: 80px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--island-header-offset);
  overflow-x: hidden;
}

body {
  color: var(--island-body) !important;
  background:
    radial-gradient(circle, rgba(25, 200, 185, 0.12) 1.5px, transparent 1.5px) 0 0/28px 28px,
    radial-gradient(circle, rgba(255, 204, 0, 0.10) 1px, transparent 1px) 7px 7px/14px 14px,
    var(--island-bg) !important;
  font-family: Nunito, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  min-height: 0;
}

body > header {
  position: sticky !important;
  top: 0;
  z-index: 50;
  background: rgba(248, 248, 240, 0.92) !important;
  border-bottom: 2px solid rgba(196, 184, 158, 0.55);
  box-shadow: none !important;
  backdrop-filter: blur(16px);
}

body > header nav {
  min-height: 72px;
}

body > header a:first-child {
  color: var(--island-text) !important;
  font-weight: 900 !important;
}

body > header:not(.site-header) a:first-child::before {
  content: "流";
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  margin-right: 8px;
  color: #fff9e3;
  background: var(--island-primary);
  border: 2px solid #0ea99d;
  border-radius: 11px;
  box-shadow: 0 3px 0 #0ea99d;
  font-size: 16px;
  transform: rotate(-4deg);
}

body > header h1,
main h1,
section h1,
main h2,
section h2,
main h3,
section h3 {
  color: var(--island-text) !important;
  letter-spacing: 0.02em;
}

#nav-subtitle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  color: #fff !important;
  background: #e59266;
  clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%, 8% 50%);
  font-weight: 900 !important;
  filter: drop-shadow(0 2px 0 rgba(121, 79, 39, 0.18));
}

main,
body > section {
  background: transparent !important;
}

main.container,
main[class*="max-w-"],
section > .container.max-w-4xl,
section > .container.max-w-5xl,
section > .container.max-w-6xl {
  background: var(--island-content);
  border: none;
  border-radius: 20px;
  box-shadow: none;
}

.island-card {
  border-radius: 20px !important;
  background: rgb(247, 243, 223) !important;
  background-clip: padding-box;
  padding: clamp(18px, 4vw, 24px) clamp(20px, 4vw, 28px);
  color: #725d42;
  border: none;
  box-shadow: none;
}

.island-card > h2,
.island-card > .section-header h2 {
  margin: 0 0 18px;
}

.policy-content .island-card {
  margin: 1rem 0;
}

.policy-content .safety-notice {
  margin: 1rem 0;
  padding: clamp(16px, 4vw, 22px);
  color: #725d42;
  background: rgb(247, 243, 223) !important;
  border-radius: 20px !important;
  background-clip: padding-box;
}

.policy-content .island-card p:last-child {
  margin-bottom: 0;
}

.island-item-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.15em;
  margin-right: 0.2em;
  object-fit: contain;
}

.policy-content .safety-notice-line {
  margin-bottom: 0 !important;
}

.island-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 9999px !important;
  background-clip: padding-box;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.island-pill--orange { background: #e59266; color: #fff; }
.island-pill--teal { background: #82d5bb; color: #fff; }
.island-pill--blue { background: #889df0; color: #fff; }
.island-pill--green { background: #8ac68a; color: #fff; }
.island-pill--yellow { background: #f7cd67; color: #725d42; }
.island-pill--pink { background: #f8a6b2; color: #fff; }
.island-pill--purple { background: #b77dee; color: #fff; }

.island-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.island-anchor {
  scroll-margin-top: var(--island-header-offset);
}

.policy-content {
  max-width: 860px;
  margin: 0 auto;
}

.policy-content h1 {
  margin-bottom: 10px !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 900 !important;
}

.policy-content h2 {
  margin-top: 2.75rem !important;
  padding-bottom: 0.55rem !important;
  border-bottom: 2px dashed rgba(159, 146, 125, 0.45) !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
}

.policy-content h3 {
  color: var(--island-text) !important;
  font-weight: 900 !important;
}

.policy-content p,
.policy-content li {
  color: var(--island-body) !important;
  line-height: 1.9 !important;
}

.policy-content li::before {
  color: var(--island-primary) !important;
}

.policy-content a,
a {
  color: var(--island-text);
  text-underline-offset: 3px;
}

.policy-content a:hover,
a:hover {
  color: #5f3c1b;
}

.lang-btn {
  min-height: 36px;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: var(--island-text) !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lang-btn:hover {
  background: rgba(25, 200, 185, 0.1) !important;
}

.lang-btn.active {
  color: #fff9e3 !important;
  background: #0cc0b5 !important;
  box-shadow: 0 3px 0 #0ea99d !important;
}

.flex.gap-2.border,
div[class*="border-purple-300"] {
  gap: 4px !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, 0.62) !important;
  border: 2px solid var(--island-border) !important;
  border-radius: 22px !important;
}

#back-link,
a[href="privacy-policies.html"].text-sm,
a[href="index.html"].font-bold {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  color: var(--island-text) !important;
  background: #fffdf3;
  border: 2px solid var(--island-border-strong);
  border-radius: 999px;
  font-weight: 900 !important;
  text-decoration: none;
}

.policy-shell {
  color: var(--island-body);
}

body > footer {
  color: #fff8de !important;
  background: #6e8f5b !important;
  border-top: 0;
  padding-top: 0 !important;
}

body > footer:not(.footer) {
  border-top: 0;
}

body > footer a,
body > footer p,
body > footer span {
  color: #fff8de !important;
}

.theme-credit {
  margin-top: 14px;
  color: rgba(255, 248, 222, 0.86) !important;
  font-size: 13px;
  text-align: center;
}

.theme-credit a {
  text-decoration: underline;
}

@media (max-width: 640px) {
  :root {
    --island-header-offset: 76px;
  }

  body > header nav {
    min-height: 64px;
  }

  #nav-subtitle {
    display: none;
  }

  main.container,
  main[class*="max-w-"] {
    border-radius: 20px;
  }

  .policy-shell {
    padding-bottom: 32px;
  }
}