:root{
  --ink:#10192E;
  --ink-soft:#3C475F;
  --muted:#6B7690;
  --paper:#F5F7FB;
  --card:#FFFFFF;
  --line:#DCE2EF;
  --cobalt:#2456E6;
  --cobalt-deep:#17368F;
  --cobalt-tint:#E9EFFD;
  --ok:#137A57;
  --warn-bg:#FFF6E5;
  --warn-line:#E8CE9A;
  --radius:14px;
  --maxw:1080px;
  --mono:'ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace',ui-monospace,'SFMono-Regular',Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  color:var(--ink);background:var(--paper);
  line-height:1.85;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--cobalt);text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{padding:84px 0}
.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;color:var(--cobalt);background:var(--cobalt-tint);
  border:1px solid #C6D5F8;border-radius:999px;padding:4px 14px;margin-bottom:16px;
}
h2{font-size:clamp(24px,3.4vw,34px);font-weight:700;line-height:1.4;letter-spacing:.01em;margin-bottom:14px}
.lead{color:var(--ink-soft);max-width:720px}
.kbd{
  display:inline-block;font-family:var(--mono);font-size:.86em;font-weight:600;
  background:#fff;border:1px solid #C3CCDF;border-bottom-width:3px;border-radius:7px;
  padding:1px 9px;color:var(--ink);white-space:nowrap;
}

/* header */
header{
  position:sticky;top:0;z-index:60;background:rgba(245,247,251,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink)}
.brand-mark{
  width:30px;height:30px;border-radius:8px;background:var(--cobalt);
  display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:13px;font-weight:600;
}
.brand small{font-weight:500;font-size:11px;color:var(--muted);display:block;line-height:1.2}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:14px}
.nav-links a{color:var(--ink-soft);font-weight:500}
.nav-links a:hover{color:var(--cobalt)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:15px;border-radius:10px;padding:13px 26px;
  border:2px solid var(--cobalt);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;
}
.btn-primary{background:var(--cobalt);color:#fff;box-shadow:0 4px 14px rgba(36,86,230,.28)}
.btn-primary:hover{background:var(--cobalt-deep);border-color:var(--cobalt-deep);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--cobalt)}
.btn-ghost:hover{background:var(--cobalt-tint)}
.btn-sm{padding:9px 18px;font-size:14px;border-width:1.5px}

/* hero */
.hero{padding:72px 0 64px;background:
  linear-gradient(180deg,#FFFFFF 0%,var(--paper) 100%);
  border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(30px,4.4vw,46px);font-weight:700;line-height:1.35;letter-spacing:.01em;margin:18px 0 20px}
.hero h1 .accent{color:var(--cobalt)}
.hero-sub{color:var(--ink-soft);font-size:17px;margin-bottom:28px;max-width:520px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:18px}
.hero-note{font-size:13px;color:var(--muted)}
.status-line{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.status-chip{
  font-size:12.5px;font-weight:600;color:var(--ink-soft);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:5px 14px;
}
.status-chip b{color:var(--cobalt)}

/* keycap signature */
.press-keys{display:inline-flex;gap:8px;vertical-align:-4px;margin:0 4px}
.press-keys .cap{
  font-family:var(--mono);font-weight:600;font-size:.62em;line-height:1;
  background:#fff;border:1.5px solid #B9C4DC;border-bottom-width:5px;border-radius:9px;
  padding:.34em .6em;color:var(--ink);
  animation:press 2.6s ease-in-out infinite;
}
.press-keys .cap:nth-child(2){animation-delay:.28s}
@keyframes press{
  0%,10%,26%,100%{transform:translateY(0);border-bottom-width:5px}
  16%{transform:translateY(3px);border-bottom-width:2px}
}
@media (prefers-reduced-motion:reduce){
  .press-keys .cap{animation:none}
  html{scroll-behavior:auto}
}

/* popup mock */
.mock{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(16,25,46,.14);overflow:hidden;
}
.mock-title{
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  background:#F0F3FA;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--muted);
}
.mock-dot{width:9px;height:9px;border-radius:50%;background:#CBD4E6}
.mock-search{
  margin:14px 14px 10px;display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--line);border-radius:10px;padding:9px 14px;
  color:var(--muted);font-size:14px;background:#FAFBFE;
}
.mock-search .cursor{width:1.5px;height:16px;background:var(--cobalt);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mock-search .cursor{animation:none}}
.mock-tabs{display:flex;gap:4px;padding:0 14px;border-bottom:1px solid var(--line)}
.mock-tab{
  border:none;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--muted);
  padding:8px 12px;border-bottom:2.5px solid transparent;cursor:pointer;
}
.mock-tab[aria-selected="true"]{color:var(--cobalt);border-bottom-color:var(--cobalt)}
.mock-list{list-style:none;padding:8px;min-height:238px}
.mock-item{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;font-size:13.5px;
}
.mock-item.sel{background:var(--cobalt-tint)}
.mock-item .tag{
  flex-shrink:0;font-family:var(--mono);font-size:10.5px;font-weight:600;
  color:var(--cobalt-deep);background:#E4EBFC;border-radius:5px;padding:2px 7px;
}
.mock-item .tag.fav{color:#8A6100;background:#FBF0D3}
.mock-item .tag.snip{color:#0C6B4C;background:#DDF2E9}
.mock-item .tag.fill{color:#8A2E7A;background:#F6E4F2}
.mock-item .body{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.mock-foot{
  display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);background:#FAFBFE;flex-wrap:wrap;
}

/* trust strip */
.trust{background:var(--ink);color:#fff;padding:26px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.trust-item b{display:block;font-size:16.5px;letter-spacing:.02em}
.trust-item span{font-size:12px;color:#AAB6D3}

/* problem */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.pane{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px}
.pane h3{font-size:18px;margin-bottom:14px}
.pane.before h3{color:var(--muted)}
.pane.after{border-color:#BFCFF6;background:linear-gradient(180deg,#FBFCFF,#F3F6FE)}
.pane.after h3{color:var(--cobalt)}
.pane ul{list-style:none}
.pane li{padding:7px 0 7px 30px;position:relative;color:var(--ink-soft);font-size:15px}
.pane.before li::before{content:"×";position:absolute;left:4px;color:#B6BFD2;font-weight:700}
.pane.after li::before{content:"✓";position:absolute;left:4px;color:var(--ok);font-weight:700}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.feat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;transition:transform .15s ease,box-shadow .15s ease;
}
.feat:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(16,25,46,.08)}
.feat .f-key{
  display:inline-block;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--cobalt);
  background:var(--cobalt-tint);border-radius:6px;padding:3px 10px;margin-bottom:14px;
}
.feat h3{font-size:17.5px;margin-bottom:8px}
.feat p{font-size:14px;color:var(--ink-soft)}

/* smart fill */
.sf{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:36px}
.code{
  background:var(--ink);color:#DCE4F7;border-radius:12px;padding:22px 24px;
  font-family:var(--mono);font-size:13px;line-height:1.9;overflow-x:auto;
}
.code .cm{color:#7C89A8}
.code .kw{color:#8FB0FF}
.sf-steps{list-style:none;counter-reset:sf}
.sf-steps li{
  counter-increment:sf;position:relative;padding:10px 0 10px 52px;color:var(--ink-soft);font-size:15px;
}
.sf-steps li::before{
  content:counter(sf);position:absolute;left:0;top:8px;width:34px;height:34px;border-radius:10px;
  background:var(--cobalt-tint);color:var(--cobalt-deep);font-family:var(--mono);font-weight:600;
  display:grid;place-items:center;font-size:14px;
}
.sf-steps b{color:var(--ink)}

/* shortcuts */
.sc-table{width:100%;border-collapse:collapse;margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sc-table th,.sc-table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px}
.sc-table th{background:#F0F3FA;font-size:13px;color:var(--ink-soft);letter-spacing:.04em}
.sc-table tr:last-child td{border-bottom:none}
table{border-spacing:0}
.table-scroll{overflow-x:auto}
.table-scroll .sc-table{min-width:560px}

/* privacy */
.privacy{background:var(--ink);color:#EAEFFA}
.privacy h2{color:#fff}
.privacy .lead{color:#B7C2DD}
.pv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.pv-card{background:#18233D;border:1px solid #2A3859;border-radius:var(--radius);padding:26px 24px}
.pv-card h3{font-size:16px;color:#fff;margin-bottom:8px}
.pv-card p{font-size:13.5px;color:#AAB6D3}
.pv-card .pv-tag{font-family:var(--mono);font-size:11.5px;color:#8FB0FF;letter-spacing:.08em;display:block;margin-bottom:12px}
.pv-note{margin-top:26px;font-size:13px;color:#8794B3}

/* license / release */
.lic-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.lic-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;position:relative}
.lic-card.em{border:2px solid var(--cobalt)}
.lic-badge{
  position:absolute;top:-13px;left:26px;background:var(--cobalt);color:#fff;
  font-size:12px;font-weight:700;border-radius:999px;padding:3px 14px;letter-spacing:.05em;
}
.lic-card h3{font-size:19px;margin-bottom:6px}
.lic-price{font-size:26px;font-weight:700;margin:10px 0 4px}
.lic-price small{font-size:13px;font-weight:500;color:var(--muted)}
.lic-card ul{list-style:none;margin-top:16px}
.lic-card li{padding:6px 0 6px 26px;position:relative;font-size:14px;color:var(--ink-soft)}
.lic-card li::before{content:"✓";position:absolute;left:2px;color:var(--ok);font-weight:700}
.roadmap{margin-top:30px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:18px 22px;font-size:14px;color:#6B5518}

/* downloads */
.dl-note{margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;font-size:13.5px;color:var(--ink-soft)}
.dl-note b{color:var(--ink)}

/* FAQ */
details{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:0 24px;margin-top:14px;
}
summary{
  cursor:pointer;font-weight:700;font-size:15.5px;padding:18px 0;list-style:none;position:relative;padding-right:34px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:22px;color:var(--cobalt);font-weight:400}
details[open] summary::after{content:"−"}
details p{padding:0 0 20px;color:var(--ink-soft);font-size:14.5px}

/* final cta */
.final{background:linear-gradient(135deg,var(--cobalt-deep),var(--cobalt));color:#fff;text-align:center}
.final h2{color:#fff}
.final p{color:#D6E0FA;max-width:640px;margin:0 auto 30px}
.final .btn-primary{background:#fff;color:var(--cobalt);border-color:#fff}
.final .btn-primary:hover{background:#EDF2FE;border-color:#EDF2FE;color:var(--cobalt-deep)}

/* footer */
footer{background:var(--ink);color:#8794B3;padding:44px 0;font-size:13px}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer a{color:#B7C2DD}
footer a:hover{color:#fff}
.foot-brand{color:#fff;font-weight:700;font-size:15px;margin-bottom:8px}

@media (max-width:900px){
  .hero-grid,.sf-grid,.pair,.lic-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .pv-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .nav-links{display:none}
  section{padding:64px 0}
}
@media (max-width:560px){
  .feat-grid{grid-template-columns:1fr}
  .hero{padding:52px 0 48px}
}

/* inline-style attrs → utility (CSP style-src self対応) */
.u0{background:#22304F;border-color:#33456E;color:#8FB0FF}
.u1{color:#fff}
.u2{font-family:var(--mono);font-size:12px;color:var(--muted)}
.u3{margin-left:12px}
.u4{margin-left:6px}
.u5{margin-top:20px}
.u6{margin-top:20px;font-size:13.5px;color:var(--muted)}
.u7{margin-top:30px;border-top:1px solid #2A3859;padding-top:18px;color:#5E6B8C}
.u8{padding-top:0}
.u9{width:100%}