:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f0f3f7;
  --text: #17202a;
  --muted: #637083;
  --border: #d9e0e8;
  --accent: #2457d6;
  --accent-strong: #1845b8;
  --ok: #137a45;
  --warn: #9b6100;
  --error: #b42318;
  --shadow: 0 12px 36px rgba(28, 43, 69, .08);
  --radius: 18px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input { font: inherit; }
button, select { min-height: 44px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: rgba(246,248,251,.92);
  border-bottom: 1px solid rgba(217,224,232,.9);
}
.header-inner, .page, .footer-inner { width: min(calc(100% - 32px), var(--max)); margin: 0 auto; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display:flex; align-items:center; gap:10px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; background: var(--text); color:#fff; display:grid; place-items:center; font-size: 13px; }
.nav { display:flex; gap: 14px; align-items:center; flex-wrap: wrap; }
.nav a { color: var(--muted); font-size: .94rem; }
.lang-select { border:1px solid var(--border); background:var(--surface); border-radius: 11px; padding: 8px 32px 8px 10px; color: var(--text); }
.page { padding: 48px 0 80px; }
.hero { text-align:center; max-width: 760px; margin: 0 auto 34px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:7px 12px; color:var(--muted); font-size:.86rem; }
h1 { margin: 14px 0 12px; font-size: clamp(2rem, 5vw, 3.6rem); line-height:1.06; letter-spacing:-.045em; }
h2 { font-size: clamp(1.3rem, 3vw, 2rem); line-height:1.2; letter-spacing:-.025em; margin:0 0 12px; }
h3 { margin:0 0 8px; }
.hero p { color:var(--muted); font-size:1.06rem; margin:0 auto; max-width:660px; }
.trust-row { margin-top: 18px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; color:var(--muted); font-size:.9rem; }
.trust-pill { background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:7px 10px; }
.tool-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:14px; margin: 24px 0 36px; }
.tool-card { display:flex; flex-direction:column; min-height:170px; padding:20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text); box-shadow:0 4px 14px rgba(28,43,69,.035); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.tool-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#b9c5d4; text-decoration:none; }
.tool-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); margin-bottom:18px; }
.tool-card strong { font-size:1rem; }
.tool-card span { margin-top:6px; color:var(--muted); font-size:.9rem; }
.layout { display:grid; grid-template-columns: minmax(0,1fr) 240px; gap:22px; align-items:start; }
.tool-shell { min-width:0; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 18px rgba(28,43,69,.04); padding:24px; }
.panel + .panel { margin-top:18px; }
.tool-title-row { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.tool-intro { color:var(--muted); margin:0; max-width:720px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.btn { border:0; border-radius:12px; padding:11px 16px; background:var(--text); color:#fff; font-weight:700; }
.btn:hover { background:#0f151c; }
.btn.secondary { color:var(--text); background:var(--surface-2); border:1px solid var(--border); }
.btn.danger { background:var(--error); }
.control { display:grid; gap:7px; margin-top:16px; }
.control label { font-size:.86rem; color:var(--muted); font-weight:700; }
.control select, .control input { width:100%; border:1px solid var(--border); background:#fff; color:var(--text); border-radius:11px; padding:10px 12px; }
.status { margin-top:18px; border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:14px; }
.status[data-state="ok"] { border-color:#b9dcc9; background:#f1faf5; }
.status[data-state="warn"] { border-color:#ead7ac; background:#fff9ec; }
.status[data-state="error"] { border-color:#ecc1bd; background:#fff5f4; }
.status-title { font-weight:800; }
.status-detail { color:var(--muted); margin-top:4px; font-size:.92rem; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.metric { border:1px solid var(--border); border-radius:13px; padding:12px; background:#fff; min-width:0; }
.metric b { display:block; font-size:1.02rem; overflow-wrap:anywhere; }
.metric span { color:var(--muted); font-size:.78rem; }
.meter { height:12px; background:#e8edf3; border-radius:999px; overflow:hidden; margin-top:12px; }
.meter > i { display:block; width:0%; height:100%; background:var(--accent); border-radius:inherit; transition:width .08s linear; }
canvas.visual { width:100%; height:150px; display:block; margin-top:14px; background:#0e1420; border-radius:14px; }
video.preview { width:100%; aspect-ratio:16/9; background:#0b0f15; border-radius:14px; margin-top:16px; object-fit:contain; }
.snapshot { width:100%; border-radius:14px; margin-top:12px; display:none; }
.ad-slot { min-height: 180px; border:1px dashed #c4ccd6; border-radius:15px; color:#8994a3; display:grid; place-items:center; text-align:center; padding:12px; font-size:.78rem; background:rgba(255,255,255,.55); }
.ad-slot.inline { min-height:120px; margin:18px 0; }
.sidebar { display:grid; gap:18px; position:sticky; top:90px; }
.result-list { display:grid; gap:9px; margin-top:14px; }
.result-row { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); padding:9px 0; }
.result-row:last-child { border-bottom:0; }
.result-row span:first-child { color:var(--muted); }
.info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.info-card { border:1px solid var(--border); border-radius:15px; padding:16px; background:var(--surface); }
.info-card p, .content p, .content li { color:var(--muted); }
.content ul, .content ol { padding-left:22px; }
.related { display:flex; gap:10px; flex-wrap:wrap; }
.related a { display:inline-flex; padding:9px 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); }
.keyboard-board { margin-top:16px; display:grid; gap:7px; user-select:none; }
.key-row { display:flex; gap:6px; flex-wrap:nowrap; }
.key { flex:1 1 42px; min-width:34px; height:44px; border:1px solid var(--border); border-radius:9px; display:grid; place-items:center; font-size:.72rem; background:#fff; color:var(--muted); transition:.08s; }
.key[data-active="1"] { background:var(--text); color:#fff; transform:translateY(1px); }
.gamepad-view { margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pad-card { border:1px solid var(--border); border-radius:15px; padding:16px; }
.button-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pad-button { height:40px; border-radius:10px; border:1px solid var(--border); display:grid; place-items:center; background:#fff; font-size:.75rem; }
.pad-button[data-active="1"] { background:var(--text); color:#fff; }
.sticks { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stick-canvas { width:100%; aspect-ratio:1; background:#0e1420; border-radius:50%; }
.site-footer { border-top:1px solid var(--border); background:var(--surface); }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:28px 0 40px; color:var(--muted); font-size:.88rem; }
.footer-links { display:flex; gap:14px; flex-wrap:wrap; }
.dev-badge { position:fixed; bottom:12px; right:12px; z-index:30; background:#111827; color:#fff; border-radius:999px; padding:6px 10px; font-size:.72rem; opacity:.92; }
.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; }
@media (max-width: 980px) {
  .tool-grid { grid-template-columns:repeat(2,1fr); }
  .layout { grid-template-columns:1fr; }
  .sidebar { position:static; grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .header-inner, .page, .footer-inner { width:min(calc(100% - 22px), var(--max)); }
  .header-inner { min-height:60px; }
  .nav > a { display:none; }
  .page { padding:30px 0 56px; }
  .hero { margin-bottom:24px; }
  h1 { font-size:clamp(1.9rem, 10vw, 2.7rem); }
  .tool-grid { grid-template-columns:1fr; }
  .tool-card { min-height:120px; }
  .metrics { grid-template-columns:1fr 1fr; }
  .info-grid { grid-template-columns:1fr; }
  .sidebar { grid-template-columns:1fr; }
  .ad-slot { min-height:110px; }
  .gamepad-view { grid-template-columns:1fr; }
  .panel { padding:18px; border-radius:16px; }
  .actions .btn { flex:1 1 auto; }
}
.snapshot:not([hidden]) { display:block; }
@media (max-width: 980px) { .desktop-only { display:none !important; } }
/* v0.1.3 mobile reliability fix: keep the full keyboard inside a local scroller. */
@media (max-width: 640px) {
  .keyboard-board { overflow-x:auto; max-width:100%; padding-bottom:8px; }
  .keyboard-board .key-row { min-width:720px; }
}
/* v0.1.6 touchscreen full-viewport test + visual screen/pixel test. */
.touch-test-overlay { position:fixed; inset:0; z-index:99999; background:#f7f9fc; overflow:hidden; touch-action:none; overscroll-behavior:none; user-select:none; }
.touch-test-overlay[hidden] { display:none !important; }
.touch-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.touch-pad-hint { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:clamp(28px,8vw,72px); color:#4d5a6c; pointer-events:none; font-weight:800; font-size:clamp(1rem,4vw,1.35rem); }
.touch-hud { position:absolute; top:max(12px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(760px,calc(100% - 24px)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:8px; border-radius:16px; background:rgba(17,24,39,.76); color:#fff; backdrop-filter:blur(10px); pointer-events:none; }
.touch-hud>div { min-width:0; padding:7px 9px; text-align:center; }
.touch-hud b { display:block; font-size:1rem; }
.touch-hud span { display:block; opacity:.78; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.touch-controls { position:absolute; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; gap:8px; padding:8px; border-radius:14px; background:rgba(17,24,39,.76); backdrop-filter:blur(10px); }
.touch-control-btn { min-width:104px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; border-radius:10px; padding:10px 14px; font-weight:800; }
@media (max-width:640px) {
  .tool-card[data-tool="touch"] { order:-2; }
  .tool-card[data-tool="screen"] { order:-1; }
  .touch-hud { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .touch-controls { width:calc(100% - 20px); }
  .touch-control-btn { flex:1 1 50%; min-height:50px; }
}
.screen-test-overlay { position:fixed; inset:0; z-index:99999; background:#000; }
.screen-test-overlay[hidden] { display:none !important; }
.screen-color-label { position:absolute; top:14px; left:50%; transform:translateX(-50%); padding:8px 12px; border-radius:999px; background:rgba(17,24,39,.70); color:#fff; font-weight:800; font-size:.82rem; backdrop-filter:blur(8px); }
.screen-controls { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:calc(100% - 24px); padding:8px; border-radius:14px; background:rgba(17,24,39,.74); backdrop-filter:blur(8px); transition:opacity .15s ease; }
.screen-controls[data-hidden="1"] { opacity:0; pointer-events:none; }
.screen-test-overlay[data-controls-hidden="1"] .screen-color-label { opacity:0; }
.screen-control-btn { border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; border-radius:10px; padding:9px 12px; font-weight:800; }
.screen-reveal { position:absolute; right:12px; bottom:12px; width:46px; height:46px; border-radius:999px; border:1px solid rgba(255,255,255,.30); background:rgba(17,24,39,.45); color:#fff; font-weight:900; letter-spacing:2px; }
.screen-reveal[hidden] { display:none !important; }
@media (max-width:640px) {
  .tool-card[data-tool="touch"] { order:-2; }
  .tool-card[data-tool="screen"] { order:-1; }
  .screen-controls { bottom:12px; width:calc(100% - 20px); }
  .screen-control-btn { flex:1 1 44%; min-height:48px; }
}

/* v0.1.7 revenue layout: center the product, keep desktop ads in a true outer side rail. */
.page.page-revenue { width:min(calc(100% - 32px), 1520px); }
.page-revenue .layout { grid-template-columns:minmax(180px,1fr) minmax(0,920px) minmax(180px,1fr); gap:24px; }
.page-revenue .layout > :first-child { grid-column:2; min-width:0; }
.page-revenue .sidebar { grid-column:3; justify-self:start; width:180px; }
.ad-slot.rail { width:180px; min-height:600px; }
.ad-slot.inline { width:min(100%,728px); margin:24px auto; }
.compact-note { padding:18px 22px; }
@media (max-width:1180px) {
  .page.page-revenue { width:min(calc(100% - 32px),980px); }
  .page-revenue .layout { grid-template-columns:minmax(0,1fr); }
  .page-revenue .layout > :first-child { grid-column:1; }
  .page-revenue .sidebar { display:none !important; }
}
@media (max-width:640px) {
  .page.page-revenue { width:min(calc(100% - 22px),980px); }
  .ad-slot.inline { width:100%; }
}

/* v0.1.7 touchscreen controls can be hidden so the lower edge can be tested. */
.touch-controls { transition:opacity .15s ease; }
.touch-controls[data-hidden="1"] { opacity:0; pointer-events:none; }
.touch-reveal { position:absolute; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.30); background:rgba(17,24,39,.48); color:#fff; font-weight:900; letter-spacing:2px; backdrop-filter:blur(8px); }
.touch-reveal[hidden] { display:none !important; }

/* v0.1.8 mouse diagnostics + reaction-time test. */
.mouse-test-zone { margin-top:16px; min-height:360px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg,#fbfcfe,#f3f6fa); display:grid; place-items:center; padding:24px; position:relative; overflow:hidden; outline:none; user-select:none; }
.mouse-test-zone:focus-visible { box-shadow:0 0 0 3px rgba(16,185,129,.18); }
.mouse-illustration { width:180px; height:250px; border:2px solid #8b97a7; border-radius:90px 90px 78px 78px; position:relative; background:#fff; box-shadow:inset 0 0 0 8px #f3f6fa; }
.mouse-button-zone { position:absolute; top:8px; height:90px; border:1px solid #c9d1dc; background:#edf1f6; transition:.08s; }
.mouse-button-zone.left { left:8px; width:72px; border-radius:70px 18px 18px 8px; }
.mouse-button-zone.right { right:8px; width:72px; border-radius:18px 70px 8px 18px; }
.mouse-button-zone.middle { left:50%; top:24px; transform:translateX(-50%); width:24px; height:54px; border-radius:999px; z-index:2; }
.mouse-button-zone[data-active="1"], .mouse-side-zone[data-active="1"] { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(16,185,129,.13); }
.mouse-side-zone { position:absolute; left:-19px; width:30px; height:42px; border:1px solid #c9d1dc; border-radius:9px; display:grid; place-items:center; font-size:.7rem; font-weight:800; color:#667386; background:#fff; transition:.08s; }
.mouse-side-zone.back { top:102px; }.mouse-side-zone.forward { top:151px; }
.mouse-hint { position:absolute; left:16px; right:16px; bottom:16px; margin:0; text-align:center; color:var(--muted); font-size:.86rem; pointer-events:none; }
.mouse-position { position:absolute; top:14px; right:14px; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; font-size:.74rem; color:var(--muted); }
.mouse-position span { padding:6px 8px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.9); }
.reaction-pad { margin-top:16px; min-height:340px; border-radius:18px; border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; cursor:pointer; user-select:none; touch-action:manipulation; background:#eef2f7; transition:background .12s ease, color .12s ease; outline:none; }
.reaction-pad strong { font-size:clamp(2rem,7vw,4.4rem); line-height:1; letter-spacing:-.04em; }
.reaction-pad span { margin-top:14px; color:inherit; opacity:.76; font-size:.96rem; }
.reaction-pad[data-state="waiting"] { background:#f6e9b9; color:#5d4a06; }
.reaction-pad[data-state="go"] { background:#22c55e; color:#052e16; }
.reaction-pad[data-state="early"] { background:#fee2e2; color:#7f1d1d; }
.reaction-pad[data-state="result"] { background:#e0f2fe; color:#0c4a6e; }
.reaction-pad:focus-visible { box-shadow:0 0 0 3px rgba(16,185,129,.18); }
@media (max-width:640px){.tool-card[data-tool="reaction"]{order:-1}.tool-card[data-tool="mouse"]{order:1}.mouse-test-zone{min-height:300px}.mouse-illustration{transform:scale(.88)}.reaction-pad{min-height:300px}}


/* v1.0.0-rc1 theme: light UI remains the visual baseline; dark mode only remaps surfaces. */
.theme-toggle { width:44px; min-width:44px; height:44px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); display:grid; place-items:center; padding:0; }
.theme-toggle:hover { background:var(--surface-2); }
.theme-icon-dark { display:none; }
html[data-theme="dark"] .theme-icon-light { display:none; }
html[data-theme="dark"] .theme-icon-dark { display:inline; }
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b111b;
  --surface:#111a27;
  --surface-2:#182333;
  --text:#eef4fb;
  --muted:#a9b6c8;
  --border:#2a394d;
  --accent:#6f9bff;
  --accent-strong:#91b1ff;
  --ok:#59c78b;
  --warn:#f0b85b;
  --error:#ff7b70;
  --shadow:0 14px 40px rgba(0,0,0,.28);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg:#0b111b;
    --surface:#111a27;
    --surface-2:#182333;
    --text:#eef4fb;
    --muted:#a9b6c8;
    --border:#2a394d;
    --accent:#6f9bff;
    --accent-strong:#91b1ff;
    --ok:#59c78b;
    --warn:#f0b85b;
    --error:#ff7b70;
    --shadow:0 14px 40px rgba(0,0,0,.28);
  }
  html:not([data-theme]) .theme-icon-light { display:none; }
  html:not([data-theme]) .theme-icon-dark { display:inline; }
}
html[data-theme="dark"] .site-header { background:rgba(11,17,27,.92); border-bottom-color:rgba(42,57,77,.92); }
html[data-theme="dark"] .brand-mark { background:#eef4fb; color:#111827; }
html[data-theme="dark"] .control select,
html[data-theme="dark"] .control input { background:var(--surface); }
html[data-theme="dark"] .metric,
html[data-theme="dark"] .mouse-illustration,
html[data-theme="dark"] .mouse-side-zone { background:var(--surface); }
html[data-theme="dark"] .meter { background:#263448; }
html[data-theme="dark"] .ad-slot { background:rgba(17,26,39,.58); border-color:#3a4b61; }
html[data-theme="dark"] .status[data-state="ok"] { background:#10271d; border-color:#275a40; }
html[data-theme="dark"] .status[data-state="warn"] { background:#2b2313; border-color:#70572a; }
html[data-theme="dark"] .status[data-state="error"] { background:#2d1818; border-color:#72403b; }
html[data-theme="dark"] .mouse-test-zone { background:linear-gradient(180deg,#111a27,#0e1622); }
html[data-theme="dark"] .mouse-button-zone { background:#1d2a3a; border-color:#42536a; }
html[data-theme="dark"] .mouse-position span { background:rgba(17,26,39,.94); }
html[data-theme="dark"] .reaction-pad { background:#182333; }
html[data-theme="dark"] .reaction-pad[data-state="waiting"] { background:#4a3c17; color:#fff1b8; }
html[data-theme="dark"] .reaction-pad[data-state="go"] { background:#16723a; color:#f2fff7; }
html[data-theme="dark"] .reaction-pad[data-state="early"] { background:#5a2323; color:#ffe9e9; }
html[data-theme="dark"] .reaction-pad[data-state="result"] { background:#123a52; color:#dff4ff; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .site-header { background:rgba(11,17,27,.92); border-bottom-color:rgba(42,57,77,.92); }
  html:not([data-theme]) .brand-mark { background:#eef4fb; color:#111827; }
  html:not([data-theme]) .control select, html:not([data-theme]) .control input, html:not([data-theme]) .metric, html:not([data-theme]) .mouse-illustration, html:not([data-theme]) .mouse-side-zone { background:var(--surface); }
  html:not([data-theme]) .meter { background:#263448; }
  html:not([data-theme]) .ad-slot { background:rgba(17,26,39,.58); border-color:#3a4b61; }
  html:not([data-theme]) .status[data-state="ok"] { background:#10271d; border-color:#275a40; }
  html:not([data-theme]) .status[data-state="warn"] { background:#2b2313; border-color:#70572a; }
  html:not([data-theme]) .status[data-state="error"] { background:#2d1818; border-color:#72403b; }
  html:not([data-theme]) .mouse-test-zone { background:linear-gradient(180deg,#111a27,#0e1622); }
  html:not([data-theme]) .mouse-button-zone { background:#1d2a3a; border-color:#42536a; }
  html:not([data-theme]) .mouse-position span { background:rgba(17,26,39,.94); }
}
@media (max-width:640px) { .theme-toggle { width:42px; min-width:42px; height:42px; } }