/*
 * Copyright 2026 学记宝 / xuejibao.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root{
    --brand:#2f9a68;
    --brand-strong:#248556;
    --bg:#eef6f1;
    --bg-2:#f7faf8;
    --ink:#1f2a24;
    --muted:#5f6f66;
    --line:#d7e5dc;
    --fs-sm:0.875rem;
    --fs-base:1rem;
    --fs-lg:1.1875rem;
    --lh-body:1.55;
    --font:"Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
    --safe-top:env(safe-area-inset-top, 0px);
    --safe-bottom:env(safe-area-inset-bottom, 0px);
    --safe-left:env(safe-area-inset-left, 0px);
    --safe-right:env(safe-area-inset-right, 0px);
    color-scheme:light;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{
    height:100%;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    margin:0;
    min-height:100%;
    min-height:100dvh;
    font-family:var(--font);
    font-size:var(--fs-base);
    line-height:var(--lh-body);
    color:var(--ink);
    background:
      radial-gradient(900px 420px at 50% -8%, #dff0e6 0%, transparent 60%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 52%, #f4f8f5 100%);
  }
  .wrap{
    width:100%;
    max-width:40rem;
    margin:0 auto;
    padding:
      calc(var(--safe-top) + 20px)
      calc(var(--safe-right) + 16px)
      calc(var(--safe-bottom) + 36px)
      calc(var(--safe-left) + 16px);
  }
  .back{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin:0 0 20px;
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--brand-strong);
    text-decoration:none;
  }
  .back:hover{text-decoration:underline}
  .brand-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 18px;
  }
  .brand-row img{
    height:1.25rem;
    width:auto;
    display:block;
  }
  h1{
    margin:0;
    font-size:1.35rem;
    font-weight:650;
    letter-spacing:0.01em;
    line-height:1.3;
  }
  .lede,
  .note{
    margin:0 0 16px;
    font-size:var(--fs-sm);
    line-height:1.65;
    color:var(--muted);
  }
  .note{margin-bottom:28px}
  h2{
    margin:0 0 14px;
    font-size:var(--fs-lg);
    font-weight:650;
    color:var(--ink);
  }
  .faq{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .faq li{margin:0}
  .faq h3{
    margin:0 0 6px;
    font-size:var(--fs-sm);
    font-weight:650;
    color:var(--ink);
    line-height:1.45;
  }
  .faq p{
    margin:0;
    font-size:var(--fs-sm);
    line-height:1.65;
    color:var(--muted);
  }
  a{color:var(--brand-strong); text-decoration:none}
  a:hover{text-decoration:underline}
  .meta{
    margin:0 0 20px;
    font-size:0.8125rem;
    color:var(--muted);
  }
  .legal h2{
    margin:28px 0 10px;
    font-size:1.05rem;
  }
  .legal h3{
    margin:18px 0 8px;
    font-size:var(--fs-sm);
    font-weight:650;
    color:var(--ink);
  }
  .legal p,
  .legal li{
    margin:0 0 10px;
    font-size:var(--fs-sm);
    line-height:1.65;
    color:var(--muted);
  }
  .legal ul,
  .legal ol{
    margin:0 0 12px;
    padding-left:1.25em;
  }
  .legal li{margin-bottom:6px}
  .doc-nav{
    display:flex;
    flex-wrap:wrap;
    gap:12px 18px;
    margin:28px 0 0;
    padding-top:18px;
    border-top:1px solid var(--line);
    font-size:var(--fs-sm);
    font-weight:600;
  }
  @media (min-width: 600px){
    .wrap{padding-inline:24px; padding-top:calc(var(--safe-top) + 28px)}
    h1{font-size:1.5rem}
  }