/* ---------- Variables ---------- */
:root{
  font-size:16px;

  /* type scale */
  --scale-0: 1rem;
  --scale-1: 1.25rem;
  --scale-2: 1.563rem;
  --scale-3: 1.953rem;
  --scale-4: 2.441rem;
  --scale-5: 3.052rem;

  /* spacing */
  --spacing-xs: 0.5rem;
  --spacing-s: 1rem;
  --spacing-m: 1.5rem;
  --spacing-l: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;

  /* button defaults (can be overridden by modifier classes) */
  --button-text: #000000;
  --button-background: transparent;
  --button-border: none;

  /* colors */
  --link: #2457F5;
  --link-hover: #083BDA;
  --muted: gray;
  --page-bg: #f5f5f5;
  --card-bg: #ffffff;
}

/* ---------- Base / Typography ---------- */
body{
  margin:0;
  padding:0;
  background-color: var(--page-bg);
  color: #1a1a1a;
  font-family: -apple-system, HuaweiSans, "Helvetica Neue", Helvetica, Arial,
    "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei",
    "Microsoft JhengHei", "SimSun", sans-serif;
  font-size: var(--scale-1);
  font-weight:400;
  line-height:1.6;
  box-sizing:border-box; /* safe default (reset.css already sets this globally) */
}

h1{
  margin:0 0 var(--spacing-m) 0;
  font-size: var(--scale-4);
  font-weight:800;
  line-height:1.1;
  letter-spacing: -0.02em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Links */
a{ color: var(--link); text-decoration: underline; }
a:hover{ color: var(--link-hover); }

/* Lists */
ul{ list-style:none; padding:0; margin:0 0 var(--spacing-m) 0; }
ul li{ margin-bottom: var(--spacing-xs); }

/* ---------- Layout ---------- */
.container,
.container-left{
  position:relative;
  width:100%;
  max-width:37.5rem; /* 600px */
  margin:0 auto;
  box-sizing:border-box;
  padding: var(--spacing-xl) var(--spacing-m) 0 var(--spacing-m);
}

.container{ text-align:center; }
.container-left{ text-align:left; padding:0 var(--spacing-m); }
.container-left p{ margin-bottom: 1rem; }

/* Column / card */
.column{
  width:100%;
  padding:1rem;
  box-sizing:border-box;
  float:none;
  background-color: var(--card-bg);
  border-radius: 2rem;
  /* allow shrinking on small viewports (avoid forcing horizontal scroll) */
  min-width: 0;
}

/* paragraphs inside containers */
.container p{ margin:0 0 var(--spacing-xl) 0; font-size: var(--scale-1); line-height:1.6; }

/* avatar */
.avatar{
  width: 10rem;
  height: 10rem;
  object-fit: cover;
  background-position:center;
  margin: var(--spacing-l) auto;
  border: 1px solid #ccc;
  border-radius: 50%;
  display:block;
}

/* ---------- Buttons / Icons ---------- */
.button,
button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:90%;
  min-width:0;
  min-height:4rem;
  padding:0.75rem 1rem;
  font-size: 1.125rem;
  text-decoration:none;
  white-space: normal;
  background-color: var(--button-background);
  color: var(--button-text);
  border: var(--button-border);
  border-radius: 4rem;
  cursor:pointer;
  box-sizing:border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  line-height:1.3;
  transition: filter .2s ease, transform .2s ease;
}
.button:hover,
button:hover{
  color: var(--button-text);
  filter: brightness(90%);
  transform: translateY(-1px);
}

/* default button theme */
.button.button-default{
  --button-text: #ffffff;
  --button-background: #191919;
  --button-border: 1px solid #ffffff;
}
.button.button-default:hover{
  --button-background: #595959;
  filter: none;
  transform: none;
}

/* icon inside buttons */
.icon{
  width:1.25rem;
  height:1.25rem;
  margin-right:0.5rem;
  flex-shrink:0;
  filter: var(--icon-filter, none);
}

/* icon-only buttons */
p.button-icon-list{ user-select:none; }
.button-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:3rem;
  min-height:3rem;
  text-decoration:none;
  white-space:normal;
  background-color:#191919;
  border-radius:4rem;
  cursor:pointer;
  box-sizing:border-box;
  margin-bottom:1rem;
  text-align:center;
  line-height:1.3;
}
.button-icon:hover{ background-color:#595959; }

/* small stack divider */
h2.button-stack-divider{
  font-weight:bold;
  font-size:1rem;
  margin:2rem 0 1rem 0;
  text-align: center;
}

/* ---------- Sections / Nav / Headings ---------- */
nav{ margin: var(--spacing-l) 0; text-align:left; }
section{ margin: var(--spacing-xl) 0; text-align:left; }

h2{ font-size: var(--scale-3); font-weight:700; margin-bottom: var(--spacing-m); }
h3{ font-size: var(--scale-2); font-weight:600; margin: var(--spacing-l) 0 var(--spacing-s) 0; }

/* footer */
footer{ margin: var(--spacing-xxl) 0; font-size: var(--scale-0); color: var(--muted); }
footer a{ color: inherit; }

/* ---------- Themes (dark / auto) ---------- */
:root.theme-dark{ color-scheme: dark; }
:root.theme-dark body{ background-color: #121212; color: #ffffff; }
:root.theme-dark :focus-visible{ outline:2px solid #4899F7; outline-offset:2px; }
:root.theme-dark a:not(.button){ color: #4899F7; }
:root.theme-dark a:not(.button):hover{ color: #7AB8FF; }

:root.theme-auto{ color-scheme: light dark; }
@media (prefers-color-scheme: dark){
  :root.theme-auto body{ background-color: #121212; color: #ffffff; }
  :root.theme-auto :focus-visible{ outline:2px solid #4899F7; outline-offset:2px; }
  :root.theme-auto a:not(.button){ color: #4899F7; }
  :root.theme-auto a:not(.button):hover{ color: #7AB8FF; }
}

/* ---------- Responsive ---------- */
/* Larger breakpoints to adjust container width */
@media (min-width: 25rem){ /* 400px */
  .container{ width:85%; padding-left:0; padding-right:0; }
}

@media (min-width: 34.375rem){ /* 550px */
  .container{ width:80%; }
  .column, .columns, .column:first-child, .columns:first-child{ margin-left:0; }
}

/* Small screens: avoid forced widths, reduce spacing and font sizes */
@media (max-width:34.375rem){ /* 550px */
  h1{ font-size: var(--scale-4); } /* keep scale-4 but smaller rem mapping if needed */
  body{ font-size: var(--scale-0); }
  .container p{ font-size: var(--scale-0); }
  .avatar{ margin-bottom: var(--spacing-m); }
  footer{ margin: var(--spacing-xl) 0; }
  h1{ font-size: 2rem; } /* legacy fallback */
  body{ font-size: 1rem; } /* legacy fallback */
}

/* Prevent overflow and allow wrapping on narrow viewports */
@media (max-width: 43rem){ /* ~688px */
  .column{ min-width:0 !important; width:100%; padding:1rem; border-radius:1rem; }
  .container{ max-width:100%; padding-left:1rem; padding-right:1rem; }
  .button-icon-list, .button-stack, .button-stack > *{
    display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center;
  }
  /* general overflow-safe defaults */
  .container, .column, a, p, .button, button{ min-width:0; word-break:break-word; overflow-wrap:anywhere; }
}

/* ---------- Utilities / minor overrides ---------- */
.icon[role="img"]{ display:inline-block; }

footer p {
  font-size: var(--scale-0) !important;
  margin: 0.5rem 0 !important;
}