:root {
    --bg: #000; --panel: #0a0a0d; --inner: #111116; --line: #ffffff12; --line2: #ffffff1f;
    --ink: #f1f1f4; --muted: #8b8b98; --dim: #5a5a66;
    --green: #3ef08a; --violet: #8b6cff; --pink: #e05cc8; --orange: #ff8a5c; --red: #ff5c5c; --gold: #f5c542;
  }
  * { box-sizing: border-box; margin: 0; }
  body { background: var(--bg); color: var(--ink); font: 14px/1.5 Manrope, system-ui, sans-serif; }
  .mono { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
  .app { display: grid; grid-template-columns: 232px 1fr; gap: 18px; max-width: 1340px; margin: 0 auto; padding: 18px; }

  .side { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 16px 12px; height: calc(100vh - 36px); position: sticky; top: 18px; display: flex; flex-direction: column; gap: 4px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; padding: 6px 8px 18px; }
  .brand small { font-family: "Noto Serif JP"; font-size: 14px; color: var(--muted); }
  .nav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--muted); font-weight: 500; }
  .nav svg { width: 17px; height: 17px; }
  .nav.on { color: var(--ink); background: linear-gradient(180deg, #22222c, #15151b); border: 1px solid var(--line2); }
  .side .mkt { margin-top: auto; background: var(--inner); border: 1px solid var(--line); border-radius: 14px; padding: 12px; font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
  .side .mkt b { color: var(--ink); font-weight: 600; }
  .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); margin-right: 6px; vertical-align: 1px; }

  .top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .search { flex: 1; max-width: 360px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 10px 14px; color: var(--dim); font-size: 13px; }
  .pill { border: 1px solid var(--line2); background: linear-gradient(180deg, #1a1a22, #0e0e12); border-radius: 12px; padding: 8px 14px; color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap; }
  .pill.on { color: var(--ink); background: linear-gradient(180deg, #2a2a36, #15151c); }
  .cta { border: 0; border-radius: 12px; padding: 9px 16px; font: 700 13px Manrope; color: #04130a; background: linear-gradient(180deg, #6cf5a8, var(--green)); }
  .me { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
  .me .av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #2a2a36, #111); border: 1px solid var(--line2); }

  .banner { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--line2); padding: 30px 32px; min-height: 200px;
    background: radial-gradient(600px 260px at 85% 40%, #3ef08a2b, transparent 60%), radial-gradient(500px 240px at 60% 120%, #8b6cff33, transparent 60%), linear-gradient(135deg, #0d1511, #0a0a0e); }
  .banner h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
  .banner h1 em { font-style: normal; color: var(--green); }
  .banner p { color: var(--muted); margin-top: 6px; }
  .banner .btns { display: flex; gap: 8px; margin-top: 20px; }
  .banner .mascot { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); filter: drop-shadow(0 0 40px #3ef08a55); }
  .rays { position: absolute; right: 0; top: 0; bottom: 0; width: 420px; background: repeating-linear-gradient(115deg, transparent 0 22px, #3ef08a08 22px 24px); mask-image: linear-gradient(90deg, transparent, #000 40%); }

  .sec { display: flex; align-items: baseline; margin: 26px 0 12px; }
  .sec h2 { font-size: 20px; font-weight: 700; }
  .sec a { margin-left: auto; color: var(--green); font-size: 13px; text-decoration: none; }
  .filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }

  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 16px; overflow: hidden; }
  .card::before { content: ""; position: absolute; inset: 0 20% auto; height: 1px; background: linear-gradient(90deg, transparent, #ffffff40, transparent); }
  .who { display: flex; align-items: center; gap: 10px; }
  .who .ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line2); background: #000; flex: none; }
  .who b { display: block; font-size: 15px; font-weight: 700; }
  .who small { color: var(--muted); font-size: 11.5px; }
  .copy { margin-left: auto; border: 0; border-radius: 999px; padding: 6px 14px; font: 700 12px Manrope; color: #04130a; background: var(--green); }
  .tag { font: 500 9.5px "JetBrains Mono"; color: var(--gold); border: 1px solid #f5c54255; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
  .roi { margin-top: 16px; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
  .roi b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--green); }
  .roi b.flat { color: var(--muted); }
  .spark { display: block; width: calc(100% + 32px); margin: 4px -16px 0; height: 78px; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; font-size: 11px; color: var(--muted); }
  .stats b { display: block; color: var(--ink); font: 500 13px "JetBrains Mono"; margin-top: 2px; }
  .stats > div:nth-child(2) { text-align: center; } .stats > div:nth-child(3) { text-align: right; }
  .rule { margin-top: 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
  .rule span { color: var(--ink); }
  .note { color: var(--dim); font-size: 11.5px; margin-top: 14px; }
  @media (max-width: 1100px) { .app { grid-template-columns: 1fr; } .side { display: none; } .cards { grid-template-columns: 1fr; } .banner .mascot { display: none; } }
a.pill, a.nav { text-decoration: none; }
button.pill { cursor: pointer; font-family: inherit; }
.card .spark { display: block; width: calc(100% + 32px); margin: 4px -16px 0; height: 78px; }
.roi b.down { color: var(--red); }
.roi b.up { color: var(--green); }
.banner h1, .banner p { max-width: calc(100% - 240px); }
.top .search { max-width: none; flex: 0 1 auto; }
@media (max-width: 1100px) { .banner h1, .banner p { max-width: none; } }
html[lang="ja"] body { font-family: Manrope, "Noto Sans JP", system-ui, sans-serif; }
html[lang="ja"] button, html[lang="ja"] .copy, html[lang="ja"] .go, html[lang="ja"] .pill, html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { font-family: Manrope, "Noto Sans JP", sans-serif; }

/* Phones and small tablets */
.app > main { min-width: 0; }            /* let the main column shrink instead of pushing past the screen */
@media (max-width: 1100px) {
  .app { padding: 12px; gap: 12px; }
  /* the sidebar becomes a compact top bar, so the menu and the language switch stay reachable */
  .side { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; height: auto; position: static; padding: 10px 12px; }
  .side .brand { padding: 0 8px 0 0; margin-right: auto; }
  .side .nav { padding: 8px 10px; font-size: 13px; }
  .side .nav svg { display: none; }
  .side #lang { margin-top: 0 !important; padding: 7px 10px; }
  .side .mkt { order: 10; width: 100%; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .banner { padding: 22px 20px; min-height: 0; }
  .banner h1 { font-size: 24px; }
  .top .search { white-space: normal; font-size: 12px; }
  .card { padding: 14px; border-radius: 18px; }
  .head { flex-wrap: wrap; }
  .head .r { margin-left: 0; }
  .who { flex-wrap: wrap; }
  .stats > div:nth-child(2), .stats > div:nth-child(3) { text-align: left; }
  table.log, .log { display: block; overflow-x: auto; white-space: normal; }
  .log td:nth-child(4) { min-width: 220px; }
}
#lang { font-family: "Noto Sans JP", Manrope, sans-serif; }