:root {
  color-scheme: light;
  --ink: #263143;
  --muted: #5f6f82;
  --line: rgba(111, 132, 155, .26);
  --glass: rgba(255, 255, 255, .72);
  --mint: #54d7c0;
  --pink: #ff8fab;
  --blue: #79a7ff;
  --mango: #ffd166;
  --tea: #b56c38;
  --shadow: 0 28px 84px rgba(80, 74, 111, .14);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(180deg, #fffafd 0%, #eefbff 42%, #fff8e6 78%, #fff 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.72;
  letter-spacing: 0;
  overflow-x: hidden;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(121, 167, 255, .12) 1px, transparent 1px),
    linear-gradient(rgba(255, 143, 171, .11) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
body:after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(84, 215, 192, .14), transparent 28%, rgba(255, 209, 102, .18) 58%, transparent 86%);
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
p { margin: 0 0 16px; }
p, a, li, span, b, strong, small { overflow-wrap: anywhere; }
img { display: block; max-width: 100%; }
.tea-skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  background: #101828;
  color: #fff;
  padding: 8px 10px;
  z-index: 40;
}
.tea-skip-link:focus { top: 12px; }
.tea-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px max(20px, calc((100% - var(--max)) / 2));
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.tea-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 235px;
}
.tea-brand strong { display: block; font-size: 16px; line-height: 1.1; }
.tea-brand small { display: block; color: var(--muted); font-size: 12px; }
.tea-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 2px #362033, 0 12px 34px rgba(255, 143, 171, .24);
  position: relative;
  image-rendering: pixelated;
}
.tea-brand-mark:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 20px;
  height: 22px;
  background: #d89454;
  box-shadow: 0 -5px 0 #fff1e2, 0 5px 0 #b56c38, 6px 13px 0 #40202d, -6px 13px 0 #40202d, 13px 8px 0 var(--mint), -13px 8px 0 var(--pink);
}
.tea-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.tea-nav a {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #526277;
  font-weight: 800;
  font-size: 14px;
}
.tea-nav a:hover, .tea-nav a[aria-current="page"] {
  border-color: rgba(64, 32, 45, .18);
  background: #fff;
  color: #263143;
  box-shadow: 0 10px 28px rgba(80, 74, 111, .08);
}
.tea-menu-toggle {
  display: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 8px 13px;
  font-weight: 900;
}
.tea-page-intro {
  max-width: var(--max);
  margin: 0 auto;
  padding: 66px 22px 28px;
}
.tea-eyebrow, .tea-section-label {
  margin: 0 0 10px;
  color: #9b4d77;
  font: 800 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0;
}
h1, h2, h3 { letter-spacing: 0; line-height: 1.12; margin: 0; color: var(--ink); }
h1 { max-width: 960px; font-size: 66px; font-weight: 950; }
.tea-page-intro p:not(.tea-eyebrow) { max-width: 820px; margin-top: 18px; color: #4d5d70; font-size: 18px; }
.hero {
  max-width: var(--max);
  margin: 0 auto 70px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: 18px;
  align-items: stretch;
}
.tea-hero-art, .tea-hero-panel, .tea-address-board, .tea-device-strip, .tea-pricing-board, .tea-route-board, .tea-article-zone, .tea-answer-stack, .tea-source-panel, .tea-split-panels article, .tea-article-shell, .tea-support-grid article, .tea-status-stack article, .tea-download-row {
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  border-radius: 8px;
}
.tea-hero-art { margin: 0; min-height: 470px; overflow: hidden; position: relative; }
.tea-hero-art:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.24)); pointer-events: none; }
.tea-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.tea-hero-panel { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.tea-panel-title { display: flex; align-items: flex-start; gap: 14px; }
.tea-panel-title h2 { font-size: 35px; }
.tea-pixel-cup {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  background: #fff;
  box-shadow: 0 0 0 6px #40202d, 11px 0 0 var(--pink), 0 11px 0 var(--mango), 11px 11px 0 var(--mint), 22px 11px 0 var(--blue), 11px 22px 0 var(--tea);
  image-rendering: pixelated;
}
.tea-signal-grid, .tea-check-grid, .tea-device-grid, .tea-article-grid, .tea-status-stack, .tea-support-grid, .tea-download-grid { display: grid; gap: 12px; }
.tea-signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tea-check-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tea-device-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.tea-article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.tea-status-stack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tea-support-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tea-signal-grid article, .tea-check-grid article, .tea-device-card, .tea-price-row, .tea-route-item, .tea-article-card {
  border: 1px solid rgba(111, 132, 155, .24);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.58));
  border-radius: 8px;
}
.tea-signal-grid article { padding: 14px; min-height: 150px; }
.tea-check-grid article, .tea-support-grid article, .tea-status-stack article { padding: 16px; }
.tea-signal-grid span, .tea-check-grid span, .tea-device-card span, .tea-price-row span, .tea-route-item span, .tea-article-card time, .tea-article-card span, .tea-support-grid span, .tea-status-stack span, .tea-article-meta {
  font: 800 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #9b4d77;
  text-transform: uppercase;
  letter-spacing: 0;
}
.tea-signal-grid b, .tea-route-item b { display: block; margin: 7px 0 6px; color: #263143; }
.tea-signal-grid p, .tea-check-grid p, .tea-device-card p, .tea-price-row p, .tea-price-row small, .tea-route-item p, .tea-article-card p, .tea-support-grid p, .tea-status-stack p { color: var(--muted); margin: 0; }
.tea-hero-actions, .tea-article-links { display: flex; gap: 10px; flex-wrap: wrap; }
.button, .tea-split-panels a, .text-link, .tea-device-card a, .tea-article-links a, .tea-article-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: #263143;
  font-weight: 900;
}
.button.tea-primary { background: linear-gradient(135deg, #40202d, #ff8fab 58%, #ffd166); border-color: transparent; color: #fff; }
.button:hover, .tea-split-panels a:hover, .text-link:hover, .tea-device-card a:hover, .tea-article-links a:hover, .tea-article-card a:hover { border-color: #ff8fab; box-shadow: 0 10px 28px rgba(255, 143, 171, .16); }
.tea-address-board, .tea-device-strip, .tea-pricing-board, .tea-route-board, .tea-article-zone, .tea-answer-stack, .tea-source-panel, .tea-split-panels, .tea-article-shell, .tea-support-grid, .tea-status-stack, .tea-download-grid {
  max-width: var(--max);
  margin: 0 auto 62px;
  padding: 26px 22px;
}
.tea-address-board { display: grid; grid-template-columns: minmax(280px, .6fr) minmax(0, 1.4fr); gap: 20px; }
.tea-address-board.compact { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.tea-address-board > div > p:not(.tea-section-label), .tea-device-strip > p, .tea-route-board > div > p, .tea-source-panel p, .tea-split-panels p { color: #536477; }
.tea-device-card { padding: 20px; min-height: 210px; transition: transform .18s ease, border-color .18s ease; }
.tea-device-card:nth-child(1) { border-top: 5px solid var(--pink); }
.tea-device-card:nth-child(2) { border-top: 5px solid var(--mint); }
.tea-device-card:nth-child(3) { border-top: 5px solid var(--mango); }
.tea-device-card:nth-child(4) { border-top: 5px solid var(--blue); }
.tea-device-card:hover { transform: translateY(-3px); border-color: #ff8fab; }
.tea-device-card h3, .tea-device-card h2 { font-size: 23px; margin: 9px 0; }
.tea-device-card a { margin-top: 12px; }
.tea-price-table { display: grid; gap: 10px; margin-top: 18px; }
.tea-price-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .92fr); gap: 12px; align-items: start; padding: 16px; }
.tea-price-row b { color: #263143; }
.tea-route-board { display: grid; grid-template-columns: minmax(280px, .66fr) minmax(0, 1.34fr); gap: 22px; }
.tea-route-list { display: grid; gap: 10px; }
.tea-route-item { padding: 16px; border-left: 5px solid var(--pink); }
.tea-route-item:nth-child(2n) { border-left-color: var(--mint); }
.tea-route-item:nth-child(3n) { border-left-color: var(--mango); }
.tea-download-row { scroll-margin-top: 94px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .42fr); gap: 18px; align-items: start; padding: 22px; }
.tea-download-row h2 { font-size: 30px; margin: 8px 0; }
.tea-download-row p { color: #536477; }
.tea-download-row ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tea-download-row li { border: 1px solid rgba(155,77,119,.2); background: #fff; padding: 9px; font-weight: 900; color: #71435a; border-radius: 6px; }
.tea-pixel-dot { display: inline-block; width: 13px; height: 13px; background: var(--mint); box-shadow: 13px 0 0 var(--pink), 0 13px 0 var(--mango), 13px 13px 0 var(--blue); }
.tea-source-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .5fr); gap: 20px; align-items: start; }
.tea-step-list { margin: 0; padding-left: 22px; }
.tea-step-list li { margin: 8px 0; font-weight: 900; color: #263143; }
.tea-split-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 0; padding-bottom: 0; }
.tea-split-panels article { padding: 22px; }
.tea-answer-stack details { border: 1px solid rgba(111,132,155,.24); background: #fff; margin-top: 10px; padding: 14px 16px; border-radius: 8px; }
.tea-answer-stack summary { cursor: pointer; font-weight: 900; }
.tea-answer-stack p { color: #536477; margin-top: 10px; }
.tea-article-card { padding: 18px; min-height: 268px; display: flex; flex-direction: column; gap: 9px; }
.tea-article-card:hover { border-color: #ff8fab; }
.tea-article-card strong { font-size: 18px; line-height: 1.3; color: #263143; }
.tea-article-card a { margin-top: auto; }
.tea-article-shell { max-width: 920px; }
.tea-article-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.tea-article-shell h1 { font-size: 48px; }
.tea-article-shell .lead { max-width: 780px; margin: 14px 0 18px; color: #4d5d70; font-size: 18px; }
.tea-article-shell section { margin-top: 30px; }
.tea-article-shell h2 { font-size: 30px; margin-bottom: 10px; }
.tea-article-shell p { color: #435269; font-size: 17px; }
.tea-text-page p { max-width: 820px; }
.tea-page-actions { max-width: var(--max); margin-top: -40px; margin-bottom: 70px; padding: 0 22px; }
.tea-footer {
  max-width: var(--max);
  margin: 28px auto 0;
  padding: 34px 22px 44px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.3fr repeat(2, minmax(0, .62fr));
  gap: 20px;
}
.tea-footer p { color: #647184; margin-top: 8px; }
.tea-footer nav { display: grid; gap: 8px; }
.tea-footer span { font-weight: 900; color: #263143; }
.tea-footer a { color: #526073; }
@media (max-width: 980px) {
  h1 { font-size: 52px; }
  .tea-topbar { align-items: flex-start; flex-wrap: wrap; }
  .tea-menu-toggle { display: inline-flex; }
  .tea-nav { display: none; flex-basis: 100%; width: 100%; justify-content: flex-start; background: #fff; border: 1px solid var(--line); padding: 10px; border-radius: 8px; }
  .tea-nav.is-open { display: flex; }
  .hero, .tea-address-board, .tea-route-board, .tea-source-panel { grid-template-columns: 1fr; }
  .tea-check-grid, .tea-device-grid, .tea-article-grid, .tea-status-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tea-price-row { grid-template-columns: 1fr; }
  .tea-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tea-footer { grid-template-columns: 1fr 1fr; }
  .tea-hero-art { min-height: 340px; }
}
@media (max-width: 620px) {
  .tea-topbar { padding: 12px 16px; }
  .tea-brand { min-width: 0; }
  .tea-brand strong { font-size: 15px; }
  .tea-page-intro { padding: 46px 16px 24px; }
  h1 { font-size: 39px; }
  h2 { font-size: 27px; }
  .tea-page-intro p:not(.tea-eyebrow) { font-size: 16px; }
  .hero, .tea-address-board, .tea-device-strip, .tea-pricing-board, .tea-route-board, .tea-article-zone, .tea-answer-stack, .tea-source-panel, .tea-article-shell, .tea-support-grid, .tea-status-stack, .tea-download-grid {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 42px;
  }
  .tea-hero-panel { padding: 20px; }
  .tea-panel-title h2 { font-size: 28px; }
  .tea-signal-grid, .tea-check-grid, .tea-device-grid, .tea-article-grid, .tea-status-stack, .tea-support-grid, .tea-split-panels, .tea-download-row { grid-template-columns: 1fr; }
  .tea-download-row ul { grid-template-columns: 1fr; }
  .tea-hero-art { min-height: 250px; }
  .tea-article-shell h1 { font-size: 36px; }
  .tea-footer { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
}