@layer reset, tokens, base, chrome, content, patterns, responsive, motion, print;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; text-size-adjust: 100%; }
  body, h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
  img, svg, video { display: block; max-width: 100%; }
  button, a { font: inherit; }
  button { color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --amber-strong: oklch(76% .174 75);
    --amber-text: oklch(50% .145 62);
    --amber-soft: oklch(91% .075 82);
    --green: oklch(53% .126 155);
    --red: oklch(55% .19 28);
    --paper: oklch(96% .014 78);
    --paper-raised: oklch(98% .009 78);
    --paper-deep: oklch(91% .019 76);
    --ink: oklch(22% .018 70);
    --ink-muted: oklch(42% .023 70);
    --line: oklch(82% .025 75);
    --focus: oklch(50% .16 60);
    --shadow-soft: 0 18px 60px oklch(25% .03 70 / .12);
    --space-2xs: .25rem;
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --radius-sm: .75rem;
    --radius-md: 1.25rem;
    --radius-lg: 2rem;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --body-font: "Avenir Next", "PingFang TC", "Lantinghei TC", sans-serif;
    --display-font: "Songti TC", "LiSong Pro", serif;
    --measure: 46rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper: oklch(16% .012 73);
      --paper-raised: oklch(20% .014 73);
      --paper-deep: oklch(24% .017 73);
      --ink: oklch(94% .012 77);
      --ink-muted: oklch(73% .019 75);
      --line: oklch(34% .02 73);
      --amber-soft: oklch(34% .07 72);
      --amber-text: oklch(79% .15 78);
      --focus: oklch(82% .16 80);
      --shadow-soft: none;
    }
  }
}

@layer base {
  html {
    min-width: 0;
    overflow-x: clip;
    scroll-padding-top: 6rem;
    background: var(--paper);
  }

  body.ful-restyled {
    min-width: 0;
    overflow-x: clip;
    background:
      radial-gradient(circle at 100% 0, color-mix(in oklch, var(--amber-soft) 52%, transparent) 0 15rem, transparent 15.1rem),
      var(--paper);
    color: var(--ink);
    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 480;
    line-height: 1.78;
    font-kerning: normal;
  }

  a {
    color: inherit;
    text-decoration-color: color-mix(in oklch, var(--amber-text) 72%, transparent);
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
  }

  a:hover { text-decoration-color: var(--amber-text); }
  :focus-visible { outline: .1875rem solid var(--focus); outline-offset: .1875rem; }
  ::selection { background: var(--amber-strong); color: oklch(19% .02 70); }

  h1, h2, h3 {
    color: var(--ink);
    font-weight: 760;
    line-height: 1.18;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  h1 { font-family: var(--display-font); font-size: clamp(2rem, 1.1rem + 4.6vw, 4.75rem); line-height: 1.24; letter-spacing: -.03em; }
  /* .wb is set by restyle.py's script after inserting <wbr> between words; keep-all then only breaks there. */
  h1.wb, h2.wb { word-break: keep-all; overflow-wrap: break-word; }
  h2 { font-size: clamp(1.65rem, 4vw, 2.55rem); }
  h3 { font-size: clamp(1.13rem, 2.4vw, 1.35rem); }
  p, li, td, th { overflow-wrap: break-word; }
  code { font-size: .88em; overflow-wrap: anywhere; }
  strong, b { font-weight: 760; }

  .shell { width: min(100% - 2rem, 75rem); margin-inline: auto; }
  .skip {
    position: fixed;
    z-index: 500;
    top: var(--space-md);
    left: var(--space-md);
    min-height: 2.75rem;
    padding: .55rem 1rem;
    transform: translateY(-180%);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 800;
    text-decoration: none;
  }
  .skip:focus { transform: translateY(0); }
}

@layer chrome {
  .site-head {
    position: relative;
    z-index: 100;
    padding-top: max(.65rem, env(safe-area-inset-top));
    border-bottom: 1px solid color-mix(in oklch, var(--line) 72%, transparent);
    background: color-mix(in oklch, var(--paper) 94%, transparent);
  }

  .site-head .shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem var(--space-md);
    min-height: 4.5rem;
    padding-bottom: .65rem;
  }

  .brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .65rem;
    min-height: 2.75rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-decoration: none;
  }

  .brand .mark {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    place-items: center;
    border-radius: .65rem;
    background: var(--amber-strong);
    color: oklch(20% .035 66);
    font-size: .9rem;
    font-weight: 900;
    object-fit: cover;
  }

  .brand .sub { color: var(--ink-muted); font-size: .72rem; letter-spacing: .12em; }
  .site-nav { order: 3; display: flex; width: 100%; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    display: grid;
    min-height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    padding-inline: .75rem;
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: .88rem;
    font-weight: 680;
    text-decoration: none;
    white-space: nowrap;
  }
  .site-nav a:hover { background: var(--paper-deep); color: var(--ink); }
  .site-nav a[aria-current="page"] { background: var(--amber-soft); color: var(--ink); }

  .head-cta {
    display: grid;
    min-height: 2.75rem;
    margin-left: auto;
    place-items: center;
    padding-inline: .95rem;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
  }

  .site-foot {
    margin-top: clamp(4rem, 10vw, 8rem);
    padding-block: var(--space-2xl) calc(var(--space-2xl) + env(safe-area-inset-bottom));
    background: oklch(16% .012 73);
    color: oklch(94% .012 77);
  }

  .site-foot a { color: inherit; }
  .foot-grid { display: grid; gap: var(--space-xl); }
  .foot-grid > div { display: grid; align-content: start; gap: var(--space-sm); }
  .foot-grid p { max-width: 42rem; color: oklch(76% .018 75); font-size: .84rem; }
  .foot-nav { display: flex; flex-wrap: wrap; gap: .15rem 1.2rem; padding: 0; list-style: none; }
  .foot-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: oklch(88% .014 76); font-size: .86rem; }
  .foot-sister { padding-top: var(--space-xs); }
}

@layer content {
  .doc { min-width: 0; padding-top: clamp(1.4rem, 4vw, 2.75rem); }
  .crumb {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .45rem;
    max-width: var(--measure);
    color: var(--ink-muted);
    font-size: .81rem;
    font-weight: 650;
  }

  .doc-head {
    position: relative;
    display: grid;
    gap: var(--space-md);
    max-width: 58rem;
    padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.75rem, 6vw, 4.5rem);
  }

  .doc-head::before {
    content: "";
    width: 3.6rem;
    height: .22rem;
    border-radius: 999px;
    background: var(--amber-strong);
  }

  .doc-head .lede { max-width: 42rem; color: var(--ink-muted); font-size: clamp(1.05rem, 2.3vw, 1.27rem); line-height: 1.72; }
  .meta { color: var(--ink-muted); font-size: .8rem; line-height: 1.6; }

  article { min-width: 0; }
  article > .doc-head { max-width: 58rem; }
  .page-article article > .sec, .page-article .doc > .sec, .page-legal .sec, .page-support .sec { max-width: var(--measure); }

  .sec {
    min-width: 0;
    padding-block: clamp(2.25rem, 5vw, 4rem);
    border-top: 1px solid var(--line);
  }

  .sec > * + * { margin-top: 1rem; }
  .sec > h2 { margin-bottom: clamp(1.2rem, 3vw, 2rem); scroll-margin-top: 6rem; }
  .sec > h3 { margin-top: 2rem; }
  .sec p, .sec li { max-width: 72ch; }
  .sec ul, .sec ol { display: grid; gap: .72rem; padding-left: 1.35rem; }
  .sec li::marker { color: var(--amber-text); font-weight: 800; }
  .sec a:not(.btn):not(.feed-title) { font-weight: 650; }
  .note { color: var(--ink-muted); font-size: .91rem; line-height: 1.68; }

  .answer, .statement, .calc, .card, .hi {
    display: grid;
    gap: var(--space-sm);
    padding: clamp(1.1rem, 3vw, 1.65rem);
    border: 1px solid color-mix(in oklch, var(--amber-text) 28%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--amber-soft) 42%, var(--paper-raised));
  }
  .statement, .card { border-color: var(--line); background: var(--paper-raised); }
  .hi { background: var(--paper-deep); }

  .toc, .cat-nav, .toc-inline {
    max-width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper-raised);
  }
  .toc { display: grid; gap: var(--space-sm); }
  .toc ol { display: grid; gap: .35rem; padding-left: 1.25rem; }
  .cat-nav ul, .toc-inline ul { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; list-style: none; }
  .cat-nav a, .toc-inline a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: .85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: .86rem;
    font-weight: 720;
    text-decoration: none;
  }
  .cat-nav a:hover, .toc-inline a:hover { border-color: var(--amber-text); color: var(--ink); }

  .ref { margin-inline: .1em; font-size: .68em; line-height: 0; vertical-align: super; }
  /* Plain inline (not inline-grid) so CJK line breaking still keeps 「。」 attached to the badge. */
  .ref a {
    display: inline;
    padding: .12em .42em;
    border: 1px solid color-mix(in oklch, var(--amber-text) 48%, var(--line));
    border-radius: 999px;
    background: var(--amber-soft);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    text-decoration: none;
  }
  .ref a:hover { background: var(--amber-strong); color: oklch(20% .035 66); }

  .sources-section { max-width: min(100%, 58rem) !important; }
  .sources {
    display: grid;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--line);
    list-style: none; /* each item already starts with its literal [n] */
  }
  .sources li { max-width: none; padding-block: 1.15rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
  .sources .u { display: inline-block; max-width: 100%; color: var(--ink-muted); font-size: .8rem; overflow-wrap: anywhere; }

  .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper-raised);
    scrollbar-color: var(--amber-text) var(--paper-deep);
  }
  .table-scroll table { width: 100%; min-width: 100%; border: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .table-scroll th, .table-scroll td { padding: .7rem clamp(.6rem, 2vw, 1rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .table-scroll tr:last-child td { border-bottom: 0; }
  .table-scroll th:last-child, .table-scroll td:last-child { border-right: 0; }
  .table-scroll th { word-break: keep-all; background: var(--paper-deep); color: var(--ink); font-size: .82rem; font-weight: 800; letter-spacing: .02em; }
  .table-scroll td { color: var(--ink-muted); font-size: .9rem; }
}

@layer patterns {
  .guide-list {
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--line);
    list-style: none;
    counter-reset: guide;
  }
  .guide-list li {
    position: relative;
    display: grid;
    gap: .5rem;
    max-width: none;
    padding-block: 1.35rem;
    padding-left: 2.7rem;
    border-bottom: 1px solid var(--line);
    counter-increment: guide;
  }
  .guide-list li::before {
    content: counter(guide, decimal-leading-zero);
    position: absolute;
    top: 1.55rem;
    left: 0;
    color: var(--amber-text);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    letter-spacing: .08em;
  }
  .guide-list li > a { font-size: clamp(1.05rem, 2.3vw, 1.22rem); font-weight: 790 !important; line-height: 1.45; text-decoration: none; }
  .guide-list li > a::after { content: " →"; color: var(--amber-text); }
  .guide-list p { color: var(--ink-muted); font-size: .91rem; line-height: 1.7; }

  .feed-section { max-width: none !important; }
  .feed-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: var(--space-md) !important;
    padding: 0 !important;
    list-style: none;
  }
  .feed-item {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-sm);
    padding: clamp(1.2rem, 3vw, 1.65rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--paper-raised);
    transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out);
  }
  .feed-item:hover { transform: translateY(-.2rem); border-color: var(--amber-text); }
  .feed-title { font-size: 1.08rem; font-weight: 790; line-height: 1.48; text-decoration: none; }
  .feed-title::after { content: " ↗"; color: var(--amber-text); }
  .feed-sum { color: var(--ink-muted); font-size: .91rem; line-height: 1.68; }
  .feed-meta { order: 3; margin-top: auto !important; padding-top: var(--space-sm); color: var(--ink-muted); font-size: .75rem; line-height: 1.55; }

  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item:first-of-type { border-top: 1px solid var(--line); }
  .faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
    align-items: center;
    min-height: 4.75rem;
    padding-block: 1rem;
    cursor: pointer;
    list-style: none;
    font-size: 1.05rem;
    font-weight: 780;
    line-height: 1.5;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary h3 { font: inherit; letter-spacing: inherit; }
  .faq-item summary::after {
    content: "+";
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--paper-deep);
    color: var(--ink);
    font-size: 1.25rem;
    transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out);
  }
  .faq-item[open] summary::after { transform: rotate(45deg); background: var(--amber-soft); }
  .faq-body { display: grid; gap: .9rem; padding: 0 3.4rem 1.5rem 0; color: var(--ink-muted); }
  .faq-body ul, .faq-body ol { margin-top: 0 !important; }

  .app-callout {
    max-width: min(100%, 58rem) !important;
    margin-top: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--amber-strong);
    color: oklch(20% .035 66);
  }
  .app-callout h2, .app-callout h3, .app-callout p, .app-callout .note, .app-callout a { color: inherit; }
  .app-callout a { font-weight: 800 !important; }
  .app-callout .card { border-color: oklch(35% .05 68 / .2); background: oklch(97% .02 79 / .45); }

  .dl { display: grid; gap: var(--space-sm); }
  .btn {
    display: flex;
    min-height: 4.25rem;
    flex-direction: column;
    justify-content: center;
    padding: .7rem 1rem;
    border: 1px solid oklch(20% .035 66);
    border-radius: 1rem;
    background: oklch(20% .035 66);
    color: oklch(96% .01 78) !important;
    text-decoration: none;
  }
  .btn-k { font-size: 1rem; font-weight: 800; }
  .btn-s { color: oklch(80% .015 76); font-size: .72rem; }

  .related-section ul { padding: 0 !important; list-style: none; border-top: 1px solid var(--line); }
  .related-section li { padding-block: .85rem; border-bottom: 1px solid var(--line); }
  .related-section li a { display: inline-flex; align-items: center; min-height: 2.75rem; }

  /* The old floating 「目錄」 widget. restyle.py's script moves it under .doc-head (.jump-inline);
     it never floats over text. Without JS it has no links and stays hidden. */
  .jump { display: none; }
  .jump.jump-inline:has(.jump-panel a) { display: block; }
  .jump-inline { margin-block: 0 var(--space-xl); }
  .jump-btn {
    display: flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper-raised);
    color: var(--ink);
    cursor: pointer;
    font-size: .92rem;
    font-weight: 780;
    letter-spacing: .04em;
  }
  .jump-btn::after { content: ""; width: .5rem; height: .5rem; border: solid var(--amber-text); border-width: 0 2px 2px 0; transform: translateY(-.15rem) rotate(45deg); transition: transform 180ms var(--ease-out); }
  .jump-btn[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .jump-btn[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(-135deg); }
  .jump-panel {
    display: grid;
    padding: .35rem;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--paper-raised);
  }
  .jump-panel[hidden] { display: none; }
  .jump-panel a { display: flex; align-items: center; min-height: 2.75rem; padding: .45rem .75rem; border-radius: .75rem; color: var(--ink-muted); font-size: .86rem; font-weight: 680; text-decoration: none; }
  .jump-panel a:hover { background: var(--paper-deep); color: var(--ink); }
}

@layer responsive {
  @media (min-width: 44rem) {
    .dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feed-item { min-height: 16rem; }
    .foot-grid { grid-template-columns: 1.15fr .85fr; align-items: end; }
  }

  @media (min-width: 58rem) {
    .site-head { position: sticky; top: 0; }
    .site-head .shell { flex-wrap: nowrap; padding-bottom: 0; }
    .site-nav { order: initial; width: auto; margin-left: auto; overflow: visible; }
    .head-cta { margin-left: 0; }
    .page-article article, .page-legal .doc, .page-support .doc { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); column-gap: clamp(3rem, 8vw, 7rem); }
    .page-article article > *, .page-legal .doc > *, .page-support .doc > * { grid-column: 1; width: 100%; }
    .page-article article > .doc-head { grid-column: 1 / -1; }
    .page-legal .doc > .doc-head, .page-support .doc > .doc-head { grid-column: 1 / -1; }
    .page-article .sources-section, .page-article .app-callout { grid-column: 1 / -1; }
    .page-article .doc > .related-section { max-width: 58rem; }
    .page-article article > .jump-inline, .page-legal .doc > .jump-inline, .page-support .doc > .jump-inline {
      position: sticky;
      top: 6rem;
      grid-column: 2;
      grid-row: var(--toc-row, auto);
      align-self: start;
      max-width: 17rem;
      max-height: calc(100vh - 7rem);
      overflow-y: auto;
      margin: clamp(2.25rem, 5vw, 4rem) 0 0;
      padding-left: var(--space-lg);
      border-left: 1px solid var(--line);
    }
    :is(.page-article article, .page-legal .doc, .page-support .doc) > .jump-inline .jump-btn { display: none; }
    :is(.page-article article, .page-legal .doc, .page-support .doc) > .jump-inline .jump-panel { display: grid; padding: 0; border: 0; background: none; }
  }

  @media (max-width: 30rem) {
    .site-nav { gap: 0; }
    .site-nav a { padding-inline: .62rem; font-size: .84rem; }
  }

  @media (max-width: 24rem) {
    .shell { width: min(100% - 1.25rem, 75rem); }
    .brand .sub { display: none; }
    .head-cta { padding-inline: .75rem; }
    .doc-head { padding-top: 2rem; }
    h1 { font-size: 1.85rem; }
    .faq-body { padding-right: 0; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .doc-head { animation: page-enter 420ms var(--ease-out); }
    @keyframes page-enter {
      from { transform: translateY(.5rem); }
      to { transform: translateY(0); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }
}

@layer print {
  @media print {
    :root { color-scheme: light; --paper: #fff; --paper-raised: #fff; --paper-deep: #f2f2f2; --ink: #111; --ink-muted: #333; --line: #bbb; }
    .site-head, .site-foot, .jump, .head-cta { display: none !important; }
    body.ful-restyled { background: #fff; color: #111; font-size: 10pt; }
    .shell { width: 100%; }
    .doc { padding-top: 0; }
    .doc-head { padding-block: 1rem 1.5rem; }
    .sec { break-inside: avoid; padding-block: 1rem; }
    .faq-item > .faq-body { display: grid !important; }
    a { color: #111; }
  }
}