:root{--paper:#FDF8EE;--ink:#211E1A;--muted:#6B645A;--line:#E6DFD1;--card:#FFFFFF;--sun:#FFC53D}
@media (prefers-color-scheme:dark){:root{--paper:#1A1815;--ink:#F4EFE6;--muted:#A79F93;--line:#34302A;--card:#24211D}}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.nav{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:28px}
.brand{font:400 28px/1 "Instrument Serif",Georgia,serif;text-decoration:none}
.nav nav{display:flex;gap:24px}
.nav nav a{text-decoration:none;color:var(--muted);font-weight:500}
.nav nav a:hover{color:var(--ink)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.hero{padding-top:72px;padding-bottom:88px}
h1{font:400 clamp(48px,8vw,96px)/1 "Instrument Serif",Georgia,serif;letter-spacing:-.01em;max-width:12ch}
.lede{margin-top:24px;font-size:21px;color:var(--muted);max-width:34ch}
section h2{font:400 40px/1.1 "Instrument Serif",Georgia,serif;margin-bottom:28px}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.app{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 14px 22px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.app:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(33,30,26,.08)}
.shot{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:var(--line)}
.app-head{display:flex;gap:12px;align-items:center;margin:18px 8px 10px}
.logo{width:48px;height:48px;border-radius:12px;object-fit:cover}
.logo.contain{object-fit:contain}
.app h3{font-size:20px;font-weight:600;line-height:1.2}
.tag{font-size:13px;color:var(--muted)}
.app p{margin:0 8px;color:var(--muted);flex:1}
.link{margin:16px 8px 0;font-weight:600;font-size:15px}
.app:hover .link{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:4px}
.split{display:grid;grid-template-columns:1fr 2fr;gap:24px;padding-top:96px}
.split h2{margin:0}
.split p+p{margin-top:14px}
.split p a{text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.big{font:400 40px/1.1 "Instrument Serif",Georgia,serif;margin-bottom:10px}
.foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:120px;padding-top:28px;padding-bottom:40px;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}
.doc{max-width:720px;padding-top:40px}
.doc h1{font-size:clamp(44px,7vw,64px);max-width:none}
.doc .updated{color:var(--muted);margin:12px 0 40px}
.doc h2{font:600 20px/1.3 Archivo,system-ui,sans-serif;margin:36px 0 10px}
.doc p,.doc li{color:var(--ink)}
.doc ul{padding-left:22px}.doc li+li{margin-top:6px}
@media (max-width:860px){.apps{grid-template-columns:1fr}.split{grid-template-columns:1fr;padding-top:72px}.hero{padding-top:40px;padding-bottom:64px}}
@media (max-width:480px){.wrap{padding:0 16px}.nav nav{gap:16px}.nav nav a{font-size:15px}}
@media (prefers-reduced-motion:reduce){.app{transition:none}.app:hover{transform:none}}