:root{
  --ink:#0A0F1C;--ink2:#2A3142;--mute:#5E6678;--line:#E6E9EF;--soft:#F2F4F7;--soft2:#F7F8FA;
  --blue:#0057FF;--blue-d:#0045CC;--blue-t:rgba(0,87,255,.12);
  --mark:#FFE45C;--ok:#16A34A;--ok-t:#E6F6EC;--bad:#C21D1D;--bad-t:#FDECEC;--warn:#C2410C;
  --paperink:#1D2333;--sigink:#1F3AA8;
  --r-lg:28px;--r-md:18px;--r-sm:12px;
  --shadow:0 1px 0 rgba(10,15,28,.04),0 24px 50px -28px rgba(10,15,28,.38);
  --sans:"Geologica",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Literata",Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:17px;line-height:1.55}
img,svg,canvas{display:block}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
section[id]{scroll-margin-top:72px}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;text-decoration:none}
.brand svg{width:30px;height:30px}
.top-end{display:flex;align-items:center;gap:8px}
/* language menu: <details>, filled by tools/build.py */
.lsw{position:relative}
.lsw summary{list-style:none;display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;user-select:none;transition:background .15s}
.lsw summary::-webkit-details-marker{display:none}
.lsw summary:hover,.lsw[open] summary{background:var(--soft)}
.lsw summary svg{width:18px;height:18px}
.lsw summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);margin-inline-start:2px;opacity:.55}
.lsw ul{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;min-width:190px;list-style:none;padding:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.lsw a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:10px;font-size:15px;text-decoration:none}
.lsw a:hover{background:var(--soft)}
.lsw a[aria-current]{font-weight:600}
@media (max-width:480px){.top .wrap{gap:10px}.top-end{gap:6px}.lsw summary{padding:0 9px;gap:5px}.lsw summary::after{display:none}.top .btn-sm{padding:0 14px}.top .js-store{display:none}}
.lsw a[aria-current]::after{content:"";width:12px;height:7px;border:solid var(--blue);border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg)}
.top nav{display:flex;gap:26px;font-size:15px;color:var(--mute)}
.top nav a{text-decoration:none;transition:color .15s}
.top nav a:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;font-weight:500;font-size:16px;text-decoration:none;transition:background .15s,transform .15s,box-shadow .15s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d)}
.btn-ink{background:var(--ink);color:#fff}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--line);background:#fff}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px #C9CFDA}
.btn-sm{height:40px;padding:0 16px;font-size:15px}
.btn svg{width:20px;height:20px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* type */
h1{font-size:clamp(40px,5.4vw,74px);font-weight:600;letter-spacing:-.045em;line-height:1}
h2{font-size:clamp(32px,4vw,54px);font-weight:600;letter-spacing:-.04em;line-height:1.03}
h3{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.lede{font-size:19px;color:var(--mute);line-height:1.55;max-width:46ch}
.pain{font-family:var(--serif);font-size:clamp(20px,1.9vw,24px);line-height:1.4;color:var(--ink2);max-width:40ch;margin-bottom:22px;padding-left:20px;border-left:3px solid var(--mark)}

/* sections */
.blk{padding:120px 0;border-top:1px solid var(--line)}
.blk-head{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;align-items:end;margin-bottom:56px}
.blk-head .lede{justify-self:start}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:15px;opacity:0;pointer-events:none;transition:.25s;z-index:90;display:flex;gap:8px;align-items:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:#4ADE80}

@media (max-width:900px){
  .wrap{padding:0 16px}
  .top nav{display:none}
  .blk{padding:80px 0}
  .blk-head{grid-template-columns:1fr;gap:16px;margin-bottom:36px}
  body{font-size:16px}
  .lede{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* scripts Geologica/Literata don't cover: the browser falls back per glyph to these system faces */
:root:lang(ja){--sans:"Geologica","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;--serif:"Literata","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
:root:lang(ko){--sans:"Geologica","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;--serif:"Literata","AppleMyungjo","Nanum Myeongjo","Noto Serif KR",serif}
:root:lang(ar){--sans:"Geologica","SF Arabic","Geeza Pro","Noto Sans Arabic",Tahoma,sans-serif;--serif:"Literata","Noto Naskh Arabic","Geeza Pro",serif}
:lang(ja) body{line-break:strict}:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{word-break:auto-phrase}:lang(ko) body{line-break:strict;word-break:keep-all}
:lang(ja) h1,:lang(ja) h2,:lang(ko) h1,:lang(ko) h2,:lang(ar) h1,:lang(ar) h2{letter-spacing:0}

/* store button before release: same look, not a link */
.js-store[aria-disabled="true"]{cursor:default}
.js-store[aria-disabled="true"]:active{transform:none}
.btn-blue.js-store[aria-disabled="true"]:hover{background:var(--blue)}
.btn-ink.js-store[aria-disabled="true"]:hover{background:var(--ink)}
.soon{display:inline-block;font-size:.72em;font-weight:600;background:var(--mark);color:var(--ink);border-radius:999px;padding:1px 8px;margin-inline-start:2px}

/* language list in the footer */
.langs{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--mute);list-style:none;margin:0;padding:0}
.langs a{text-decoration:none}
.langs a:hover{color:var(--ink)}
.langs [aria-current]{color:var(--ink);font-weight:600}