:root {
    --bg: #FFFFFF;
    --text: #050505;
    --text2: rgba(5,5,5,0.72);
    --text3: rgba(5,5,5,0.40);
    --rule: rgba(5,5,5,0.08);
    --glow: #FAF6ED;
    --serif: "Times New Roman", Times, "Noto Serif SC", "Songti SC", "Source Han Serif SC", STSong, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #101010;
      --text: #F5F5F5;
      --text2: rgba(245,245,245,0.72);
      --text3: rgba(245,245,245,0.40);
      --rule: rgba(245,245,245,0.10);
      --glow: #1C1A17;
    }
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: auto;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  :focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
  .page { height: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
  .stage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 0; padding-block: 24px; }
  .kyu { width: min(46vw, 30vh, 280px); aspect-ratio: 1; color: var(--text); display: block; }
  .word { margin-top: clamp(20px, 5vh, 48px); font: italic 400 clamp(56px, min(12vw, 11vh), 112px)/1 var(--serif); letter-spacing: 0.005em; }
  .line { margin-top: clamp(12px, 2.4vh, 24px); font-size: clamp(15px, 1.2vw + 8px, 19px); letter-spacing: 0.22em; color: var(--text2); font-weight: 400; padding-left: 0.22em; }
  .stores { margin-top: clamp(24px, 6vh, 56px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .store { height: 44px; padding: 0 22px 0 18px; border-radius: 999px; border: 0.5px solid var(--text); display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; text-decoration: none; color: inherit; }
  .store svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
  .store.solid { background: var(--text); color: var(--bg); }
  .store.solid small { color: var(--bg); opacity: .6; }
  .store small { font-size: 12px; color: var(--text3); font-weight: 400; }
  .foot { padding-block: 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 24px; justify-content: center; font-size: 11px; letter-spacing: 0.2em; color: var(--text3); text-transform: uppercase; }
  .rise { animation: rise 1100ms cubic-bezier(.2,.6,.2,1) both; }
  .rise.d1 { animation-delay: 200ms; } .rise.d2 { animation-delay: 400ms; } .rise.d3 { animation-delay: 600ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

  .page-content { width: min(100% - 32px, 760px); margin: 0 auto; padding: 36px 0 64px; border-top: 1px solid var(--rule, rgba(5,5,5,.1)); text-align: left; line-height: 1.7; }
  .page-content h1,.page-content h2 { margin: 0 0 12px; font-size: clamp(24px, 4vw, 34px); line-height: 1.25; }
  .page-content p { margin: 0 0 18px; color: var(--text2, #6b6966); }
  .page-content h3 { margin: 28px 0 12px; font-size: 20px; }
  .page-content h4 { margin: 18px 0 6px; font-size: 16px; }
  .page-content ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 18px; list-style-position: inside; }
  .page-content a { color: inherit; text-underline-offset: 3px; }