:root{
    /* Matcha (light) theme — mirrors the app's Matcha palette */
    --bg:#F3F5EC; --surface:#FFFFFF; --surface-2:#E9EDDC; --border:#DCE3CB;
    --text:#1F241A; --muted:#5C6551; --faint:#9BA588;
    --accent:#7A9A3E; --accent-2:#8FB255; --accent-soft:rgba(122,154,62,.12);
    --sakura:#e08bb0; --sakura-2:#f2b2cb;
    /* --gold:#c9a84c;
    --gold-2:#e4c979; */
    --gold-3:#c9a84c;
    --gold-4:#e4c979;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--text);font-family:'Inter','Noto Sans JP',sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  .wrap{max-width:1000px;margin:0 auto;padding:0 24px;}
  a{color:inherit;text-decoration:none;}
  .serif{font-family:'Source Serif 4','Noto Serif JP',serif;}
  .hero-title{
  width:100vw;
  margin-left:calc(50% - 50vw);
  text-align:center;
}
  /* blurred sakura tree in the background */
  .sakura-bg{position:fixed;right:-30px;bottom:-40px;width:min(62vw,660px);z-index:0;pointer-events:none;filter:blur(2px);opacity:.5;}
  .sakura-bg.tl{left:-60px;top:40px;right:auto;bottom:auto;width:min(40vw,380px);transform:scaleX(-1);opacity:.34;}

  nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);background:rgba(243,245,236,.8);border-bottom:1px solid var(--border);}
  nav .wrap{width:100%;max-width:none;display:flex;align-items:center;justify-content:space-between;height:66px;padding:0 48px;}
  /* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:800;
  font-size:20px;
  letter-spacing:-.3px;

  /* Dark rounded background */
  background:#0c0f15;
  color:#fff;
  padding:8px 14px;
  border-radius:14px;
}

.brand img{
  height:30px;
  width:30px;
  border-radius:8px;
  object-fit:cover;
}
  /* Japanese text serif styling only */
  .jp-serif{
    font-family:'Source Serif 4','Noto Serif JP',serif;
  }

  .brand-name{
    color:#fff;
  }

  /* Brand JP gold styling */
  .brand-name .jp{
    color:var(--gold-3);
    font-family:'Source Serif 4','Noto Serif JP',serif;
  }
  .nav-actions{display:flex;align-items:center;gap:20px;}
  .nav-actions .link{color:var(--muted);font-weight:600;font-size:14px;}
  .nav-actions .link:hover{color:var(--text);}
  .lang-toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;font-size:13px;font-weight:600;}
  .lang-toggle button{background:transparent;color:var(--muted);border:0;padding:6px 14px;cursor:pointer;font-family:inherit;}
  .lang-toggle button.active{background:var(--accent);color:#fff;}
  @media(max-width:640px){.nav-actions .link{display:none;}}

  header{text-align:center;padding:74px 0 26px;position:relative;z-index:1;}
  .eyebrow{display:inline-block;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;}
  h1{font-size:clamp(32px,5vw,50px);font-weight:700;line-height:1.12;letter-spacing:-.8px;margin-bottom:16px;}
  h1 .accent{
    background:linear-gradient(120deg,var(--gold-3),var(--gold-4) 100%,#f0dfa0);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:var(--gold);
  }
  header p{color:var(--muted);font-size:17px;max-width:600px;margin:0 auto;}

  section{padding:44px 0;position:relative;z-index:1;}
  .sec-head{margin-bottom:22px;}
  .sec-head[id]{scroll-margin-top:20px;}
  .sec-head .k{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;}
  .sec-head h2{font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:-.5px;margin-top:6px;}
  .sec-head p{color:var(--muted);font-size:15.5px;margin-top:8px;max-width:700px;}

  .cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
  .cat{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(31,36,26,.03);}
  .cat .dot{width:14px;height:14px;border-radius:5px;flex:0 0 auto;}
  .cat b{font-size:14.5px;font-weight:700;}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:24px 22px;box-shadow:0 6px 22px rgba(31,36,26,.05);}
  .tabs{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:4px;margin-bottom:18px;gap:2px;}
  .tabs button{background:transparent;color:var(--muted);border:0;border-radius:999px;padding:8px 18px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;}
  .tabs button.active{background:var(--accent);color:#fff;}
  .chart-scroll{overflow-x:auto;}
  .legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
  .legend span{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;}
  .legend i{width:9px;height:9px;border-radius:3px;display:inline-block;}
  .chart-note{color:var(--muted);font-size:13px;margin-top:12px;}

  .callout{background:var(--accent-soft);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:15px 17px;margin-top:16px;font-size:14px;color:var(--text);}
  .callout b{color:var(--accent);}


  .cmp{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(31,36,26,.05);
}
.cmp thead tr:first-child th:first-child{
  border-top-left-radius:16px;
}

.cmp thead tr:first-child th:last-child{
  border-top-right-radius:16px;
}

.cmp tbody tr:last-child td:first-child,
.cmp tbody tr:last-child th:first-child{
  border-bottom-left-radius:16px;
}

.cmp tbody tr:last-child td:last-child{
  border-bottom-right-radius:16px;
}
  .cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:14.5px;text-align:left;vertical-align:top;}
  .cmp thead th{background:var(--surface-2);font-size:17px;letter-spacing:.4px;font-weight:800;}
  .cmp th:first-child{color:var(--muted);font-weight:600;width:38%;}
  .cmp .pro{color:var(--accent);font-weight:700;}
  .cmp tr:last-child td{border-bottom:0;}

  .cmp thead .pro span{
  background:var(--gold-3);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
  .step{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 1px 2px rgba(31,36,26,.03);}
  .step .n{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px;}
  .step b{display:block;margin-bottom:5px;font-size:15px;}
  .step p{color:var(--muted);font-size:13.5px;}

  footer{border-top:1px solid var(--border);margin-top:40px;padding:34px 0;color:var(--muted);font-size:13px;text-align:center;position:relative;z-index:1;}
  footer a{color:var(--accent);}


  [data-en]{display:none;}
  html[lang="en"] [data-jp]{display:none;}
  html[lang="en"] [data-en]{display:revert;}

@media (max-width: 768px){
  nav .wrap{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    padding: 10px 16px 12px;
    gap: 10px;
  }

  .brand{
    align-self: flex-start;
    font-size: 16px;
    padding: 7px 12px;
    border-radius: 12px;
  }

  .brand img{
    width: 26px;
    height: 26px;
  }

  .nav-actions{
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 10px;
  }

  .nav-actions .link{
    display: inline-flex !important;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,.56);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .page-menu{
    min-width: 0;
    max-width: 100%;
  }

  .page-menu__primary{
    display: inline-flex;
    align-items: center;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .lang-toggle{
    margin-left: auto;
    font-size: 12px;
  }

  .lang-toggle button{
    padding: 6px 10px;
  }
}

@media (max-width: 420px){
  nav .wrap{
    padding: 10px 12px 12px;
    gap: 8px;
  }

  .brand{
    font-size: 15px;
  }

  .nav-actions{
    gap: 8px;
  }

  .nav-actions .link{
    min-height: 32px;
    padding: 0 10px;
    font-size: 11.5px;
  }

  .page-menu{
    max-width: calc(100vw - 120px);
  }

  .page-menu__primary{
    max-width: 100%;
  }

  .lang-toggle button{
    padding: 6px 8px;
  }
}