:root {
  --bg: #0b0d0c;
  --panel: #12150f;
  --line: #2a2f24;
  --line-hi: #3d4433;
  --ink: #e8e6df;
  --ink-dim: #8b917e;
  --acid: #c8ff00;
  --magenta: #ff3ea5;
  --cyan: #35e0ff;
  --font-dot: "DotGothic16", monospace;
  --font-mono: "IBM Plex Mono", monospace;
  --font-body: "Zen Kaku Gothic New", sans-serif;
}
* { box-sizing: border-box; margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 70% -10%, #1a2012 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #1b1020 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.9;
  padding: 44px 20px 90px;
}
.crt {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,.13) 3px, rgba(0,0,0,.13) 4px);
  mix-blend-mode: multiply;
}
main { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }

.logo {
  font-family: var(--font-dot); font-size: 24px; letter-spacing: 2px;
  color: var(--acid); text-decoration: none;
  text-shadow: 0 0 12px rgba(200,255,0,.4);
}
h1 {
  font-size: clamp(24px, 5vw, 33px); font-weight: 700; line-height: 1.5;
  margin: 20px 0 14px; text-wrap: balance;
}
.lede { color: var(--ink-dim); max-width: 60ch; }
.lede b { color: var(--ink); font-weight: 500; }

.cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.btn {
  font-family: var(--font-dot); font-size: 13px; letter-spacing: 1px;
  padding: 9px 18px; text-decoration: none; display: inline-block;
  background: #1a1e15; color: var(--ink); border: 1px solid var(--line-hi);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn:hover { background: #242a1b; }
.btn.primary { background: var(--acid); color: #0b0d0c; border-color: var(--acid); font-weight: 600; }
.btn.primary:hover { background: #d9ff3d; }

h2 {
  font-family: var(--font-dot); font-size: 17px; font-weight: 400; letter-spacing: 2px;
  margin: 52px 0 6px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
h2 .jp { color: var(--ink-dim); font-size: 13px; letter-spacing: 0; margin-left: 8px; }

.feat { display: grid; gap: 16px; margin-top: 20px; }
.feat-row { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: baseline; }
.feat-row dt {
  font-family: var(--font-dot); font-size: 13px; letter-spacing: 1px; color: var(--acid);
}
.feat-row dd { margin: 0; font-size: 14px; }
.feat-row dd small { display: block; color: var(--ink-dim); font-size: 12.5px; line-height: 1.75; }

.card {
  background: var(--panel); border: 1px solid var(--line-hi);
  padding: 18px 20px; margin-top: 20px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.card.privacy { border-left: 3px solid var(--cyan); }
.card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.card ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.card li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 13.5px; }
.card li span:first-child { color: var(--cyan); }
.card.free li span:first-child { color: var(--acid); }
.card p.note { font-size: 12.5px; color: var(--ink-dim); margin-top: 12px; }

.try { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.try a {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--cyan);
  border: 1px solid var(--line); padding: 5px 11px; text-decoration: none;
}
.try a:hover { border-color: var(--cyan); }

.tech { font-size: 13.5px; color: var(--ink-dim); margin-top: 16px; }
.tech code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }

footer {
  margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12px; color: #5a6150; display: flex; flex-wrap: wrap; gap: 14px;
}
footer a { color: var(--ink-dim); }
@media (max-width: 560px) {
  .feat-row { grid-template-columns: 1fr; gap: 2px; }
}

.langlink {
  float: right; margin-top: 8px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-dim); text-decoration: none;
  border: 1px solid var(--line-hi); padding: 3px 10px;
}
.langlink:hover { color: var(--acid); border-color: var(--acid); }

.try button {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--cyan);
  background: none; border: 1px solid var(--line); padding: 5px 11px; cursor: pointer;
}
.try button:hover { border-color: var(--cyan); }
.try button.sel { color: var(--acid); border-color: var(--acid); background: #1c2210; }
.try-frame-wrap {
  margin-top: 14px; border: 1px solid var(--line-hi); background: #000;
  aspect-ratio: 3 / 2; overflow: hidden;
  box-shadow: 0 0 40px rgba(200, 255, 0, .07), 0 20px 50px rgba(0, 0, 0, .5);
}
#try-frame { width: 100%; height: 100%; border: 0; display: block; }