:root {
  color-scheme: light;

  --rail: #141b2b;
  --rail-text: #e4e8f0;
  --rail-muted: #a7b1c4;
  --rail-raised: #1e2739;
  --rail-line: #3a4660;
  --ink: #182030;
  --ink-muted: #5c6575;
  --paper: #ffffff;
  --desk: #e6eaf1;
  --rule: #cfd5e0;
  --pen: #2f52d0;
  --press: #dbe3fb;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  --text-2xs: 0.8125rem;
  --text-xs: 0.875rem;
  --text-s: 0.9375rem;
  --text-m: 1.0625rem;
  --text-l: 1.25rem;
  --text-xl: 1.75rem;
  --text-hero: 2.5rem;

  --leading: 1.8;
  --leading-tight: 1.5;
  --radius: 6px;

  --rail-width: 26rem;
  /* 左欄的間距跟著視窗高度：高螢幕拉開，矮螢幕才收緊 */
  --rail-block: clamp(1rem, calc(1rem + (100vh - 650px) * 0.096), 4.5rem);
  --rail-inner: clamp(0.5625rem, calc(0.5625rem + (100vh - 650px) * 0.032), 1.75rem);
  --callout-gap: var(--sp-7);
  --slip-height: clamp(30rem, calc(100dvh - var(--sp-8)), 62rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: "Segoe UI", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
  font-size: var(--text-m);
  line-height: var(--leading);
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  line-height: var(--leading-tight);
  text-wrap: balance;
}

ol,
ul {
  list-style: none;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--pen);
  outline-offset: 2px;
}

.rail :focus-visible {
  outline-color: var(--paper);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 2;
  padding: var(--sp-2) var(--sp-4);
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.page {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  min-height: 100dvh;
}

/* --- 左欄：和程式側欄同色，下載鈕一直看得到 --- */
.rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: var(--rail-block);
  height: 100dvh;
  overflow-y: auto;
  padding: var(--rail-block) var(--sp-6);
  background: var(--rail);
  color: var(--rail-text);
  scrollbar-width: thin;
  scrollbar-color: var(--rail-line) transparent;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--paper);
  font-size: var(--text-l);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.brand img {
  border-radius: var(--radius);
}

/* 封面：品牌、標題、說明整組置中；下面的安裝步驟是清單，靠左 */
.cover {
  display: grid;
  justify-items: center;
  text-align: center;
}

.cover .brand {
  margin-block-end: calc(var(--rail-inner) * 1.5);
}

.cover h1 {
  color: var(--paper);
  font-size: var(--text-hero);
  letter-spacing: 0.01em;
}

.what {
  margin-block-start: var(--rail-inner);
  color: var(--paper);
  font-weight: 600;
  line-height: 1.7;
}

.lead {
  margin-block-start: calc(var(--rail-inner) * 0.5);
  color: var(--rail-muted);
  font-size: var(--text-s);
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.get {
  display: grid;
  gap: var(--rail-inner);
}

.download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 3.5rem;
  padding-inline: var(--sp-5);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-l);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease-out;
}

.download:hover {
  background: var(--press);
}

.download svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spec {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--sp-4);
  min-height: 1.6em;
  color: var(--rail-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.phone-note {
  display: none;
  color: var(--rail-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.install {
  padding: calc(var(--rail-inner) * 1.25) var(--sp-5);
  border-radius: var(--radius);
  background: var(--rail-raised);
  font-size: var(--text-s);
  line-height: 1.8;
}

.install h2 {
  margin-block-end: var(--rail-inner);
  color: var(--paper);
  font-size: var(--text-s);
}

.install ol {
  display: grid;
  gap: var(--rail-inner);
  counter-reset: step;
}

.install li {
  position: relative;
  padding-inline-start: 2rem;
  counter-increment: step;
}

.install li::before {
  content: counter(step);
  position: absolute;
  inset-block-start: calc((1.8em - 1.375rem) / 2);
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--rail-line);
  color: var(--paper);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

.act {
  display: block;
  margin-block-start: var(--sp-2);
}

/* 長得像 Windows 視窗上的按鈕，對照時認得出來 */
.key {
  display: inline-block;
  padding-inline: var(--sp-2);
  border: 1px solid var(--rail-line);
  border-radius: var(--sp-1);
  background: var(--rail);
  color: var(--paper);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.install small {
  display: block;
  margin-block-start: var(--sp-2);
  color: var(--rail-muted);
  font-size: var(--text-2xs);
}

.contact {
  margin-block-start: var(--rail-inner);
  padding-block-start: var(--rail-inner);
  border-block-start: 1px solid var(--rail-line);
  color: var(--rail-muted);
  font-size: var(--text-xs);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--sp-3);
}

.contact a {
  color: var(--rail-text);
}

/* --- 配送單：整張放進第一屏，四個說明對到紙上的位置 --- */
.sheet {
  display: grid;
  grid-template-columns: auto minmax(13rem, 21rem);
  gap: var(--callout-gap);
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--sp-5) var(--sp-6);
}

.sheet:focus {
  outline: none;
}

.slip {
  position: relative;
  height: var(--slip-height);
  aspect-ratio: 1800 / 2547;
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(20 27 43 / 0.16), 0 12px 32px rgb(20 27 43 / 0.14);
}

.slip img,
.slip .pen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slip figcaption {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  padding-block-start: var(--sp-1);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  text-align: center;
}

.pen {
  fill: none;
  stroke: var(--pen);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pen path {
  stroke-dasharray: 1;
  animation: pen-stroke var(--stroke-time, 0.28s) ease-out var(--stroke-start, 0s) both;
}

.ticks path:nth-child(1) { --stroke-start: 0.6s; }
.ticks path:nth-child(2) { --stroke-start: 0.95s; }
.ticks path:nth-child(3) { --stroke-start: 1.3s; }
.installer path { --stroke-start: 1.75s; --stroke-time: 0.7s; }
.date path { --stroke-time: 0.14s; }
.date path:nth-child(1) { --stroke-start: 2.55s; }
.date path:nth-child(2) { --stroke-start: 2.72s; }
.date path:nth-child(3) { --stroke-start: 2.89s; }
.date path:nth-child(4) { --stroke-start: 3.06s; }
.date path:nth-child(5) { --stroke-start: 3.23s; --stroke-time: 0.24s; }
.customer path { --stroke-start: 3.65s; --stroke-time: 1.1s; }

@keyframes pen-stroke {
  0% { opacity: 0; stroke-dashoffset: 1; }
  1% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

.callouts {
  position: relative;
  height: var(--slip-height);
}

.callout {
  position: absolute;
  inset-inline: 0;
}

.callout h3 {
  font-size: var(--text-m);
}

.callout p {
  color: var(--ink-muted);
  font-size: var(--text-s);
  line-height: 1.7;
}

.callout::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-end: calc(100% + var(--sp-3));
  width: calc(var(--callout-gap) - var(--sp-3));
  border-block-start: 1px solid var(--pen);
}

.at-page { top: 13%; }
.at-finish { top: 37%; }
.at-notes { top: 57%; }
.at-sign { top: 83%; }

/* --- 其他功能 --- */
.also,
.faq {
  padding: var(--sp-8) var(--sp-7);
}

.also {
  background: var(--paper);
}

.also h2,
.faq h2 {
  margin-block-end: var(--sp-6);
  font-size: var(--text-xl);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-7);
}

.facts article {
  padding-block-start: var(--sp-3);
  border-block-start: 2px solid var(--ink);
}

.facts h3 {
  margin-block-end: var(--sp-2);
  font-size: var(--text-l);
}

.faq dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-7);
}

.faq dt {
  font-weight: 700;
}

.foot {
  padding: var(--sp-5) var(--sp-7);
  border-block-start: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

/* --- 404 --- */
.lost {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--sp-4);
  min-height: 100dvh;
  padding: var(--sp-6) var(--sp-4);
  background: var(--rail);
  color: var(--rail-text);
}

.lost h1 {
  color: var(--paper);
  font-size: var(--text-hero);
}

/* --- 窄一點：說明排到配送單下面 --- */
@media (max-width: 76rem) {
  .sheet {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--sp-7);
    min-height: 0;
    padding-block: var(--sp-6) var(--sp-7);
  }

  .slip {
    height: auto;
    width: min(100%, 34rem);
  }

  .callouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-6);
    height: auto;
    width: 100%;
    padding-block-start: var(--sp-2);
  }

  .callout {
    position: static;
  }

  .callout::before {
    content: none;
  }

  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- 手機與平板：左欄變成頁首 --- */
@media (max-width: 58rem) {
  :root {
    --rail-block: var(--sp-6);
    --rail-inner: var(--sp-4);
  }

  .page {
    display: block;
  }

  .rail {
    position: static;
    height: auto;
    overflow: visible;
    padding-inline: var(--sp-4);
  }

  .sheet {
    padding-inline: var(--sp-4);
  }

  .also,
  .faq,
  .foot {
    padding-inline: var(--sp-4);
  }

  .also,
  .faq {
    padding-block: var(--sp-7);
  }

  .faq dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 34rem) {
  .callouts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (hover: none) and (pointer: coarse) {
  .phone-note {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .pen path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .download {
    transition: none;
  }
}