:root{
  --bg:#ffffff; --fg:#14131a; --muted:#6b6878; --line:#e7e5ee;
  --card:#faf9fc; --accent:#5b4bd6;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0d0c14; --fg:#f2f1f7; --muted:#9b98ab; --line:#232130;
         --card:#15141f; --accent:#a394ff; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:680px; margin:0 auto; padding:0 24px}
header{padding:72px 0 0}
.logo{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
  font-weight:650; letter-spacing:-.02em; font-size:19px;
}
.mark{
  width:26px; height:26px; border-radius:8px; flex:none;
  background:linear-gradient(140deg,var(--accent),#c9a2ff);
}
h1{
  font-size:clamp(30px,6vw,44px); line-height:1.15; letter-spacing:-.03em;
  font-weight:680; margin:56px 0 0; max-width:18ch;
}
.lede{color:var(--muted); font-size:clamp(17px,2.4vw,19px); margin:20px 0 0; max-width:46ch}
.updated{color:var(--muted); font-size:14px; margin:16px 0 0}
section{margin:72px 0 0}
h2{
  font-size:12px; font-weight:640; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 20px;
}
article h2{
  font-size:19px; font-weight:650; letter-spacing:-.01em; text-transform:none;
  color:var(--fg); margin:44px 0 14px;
}
article h3{font-size:16px; font-weight:640; margin:28px 0 10px}
article section{margin:0}
.app{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:14px; background:var(--card);
  padding:20px 22px; transition:border-color .18s ease, transform .18s ease;
}
.app:hover{border-color:var(--accent); transform:translateY(-1px)}
.app-name{font-weight:640; letter-spacing:-.01em}
.app-desc{color:var(--muted); font-size:15px; margin-top:4px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
ul{margin:0 0 16px; padding-left:22px}
li{margin:0 0 8px}
a{color:var(--accent)}
.contact a{font-weight:560}
.note{
  border:1px solid var(--line); background:var(--card); border-radius:12px;
  padding:16px 18px; font-size:15px; color:var(--muted); margin:0 0 16px;
}
table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:15px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:640; color:var(--muted); font-size:13px}
.tablewrap{overflow-x:auto}
footer{
  margin:88px 0 0; padding:28px 0 56px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;
  color:var(--muted); font-size:14px;
}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--fg)}
.spacer{flex:1 1 auto}
@media (max-width:520px){
  header{padding-top:48px}
  h1{margin-top:40px}
  section{margin-top:56px}
  footer{margin-top:64px}
}