:root{
  --bg:#fbfaf8; --text:#1b1b1d; --muted:#6a6a70; --faint:#9a9aa0;
  --rule:rgba(0,0,0,0.10); --rule-soft:rgba(0,0,0,0.06);
  --link:#1b1b1d; --link-hover:#000;
  --accent:#9a5b2e;
  --chip-bg:rgba(0,0,0,0.04); --chip-border:rgba(0,0,0,0.10);
  --shot-bg:#f1efea;
  --measure:42rem;
  --serif:Iowan Old Style,"Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#111113; --text:#ececee; --muted:#9d9da4; --faint:#6b6b72;
  --rule:rgba(255,255,255,0.14); --rule-soft:rgba(255,255,255,0.07);
  --link:#ececee; --link-hover:#fff;
  --accent:#d99a64;
  --chip-bg:rgba(255,255,255,0.07); --chip-border:rgba(255,255,255,0.14);
  --shot-bg:#1a1a1d;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px;}
a:hover{color:var(--link-hover)}
::selection{background:rgba(154,91,46,0.18)}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 1.5rem;}

.skip{position:absolute; left:-999px; top:0; background:var(--text); color:var(--bg);
  padding:.5rem .9rem; border-radius:0 0 8px 0; z-index:10; text-decoration:none; font-size:.9rem;}
.skip:focus{left:0; color:var(--bg)}

/* Nav */
.nav{border-bottom:1px solid var(--rule-soft);}
.nav-inner{max-width:var(--measure); margin:0 auto; padding:1.15rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.wordmark{font-family:var(--serif); font-size:1.18rem; font-weight:600; letter-spacing:.2px;
  text-decoration:none; color:var(--text);}
.wordmark:hover{color:var(--text)}
.nav-links{display:flex; align-items:center; gap:1.4rem; font-size:.95rem;}
.nav-links a{color:var(--muted); text-decoration:none;}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text)}
.theme-toggle{appearance:none; background:none; border:1px solid var(--rule);
  color:var(--muted); width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:color .15s,border-color .15s;}
.theme-toggle:hover{color:var(--text)}
.theme-toggle svg{width:17px; height:17px;}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:inline}

/* Intro (home) */
header.intro{padding:4.5rem 0 3rem;}
header.intro h1{font-family:var(--serif); font-weight:600; font-size:2.1rem;
  line-height:1.2; margin:0 0 1.1rem; letter-spacing:-.2px;}
header.intro p{margin:0 0 1rem; color:var(--text); font-size:1.12rem; line-height:1.7;}
header.intro p.lede{color:var(--muted);}
header.intro a{color:var(--text); text-decoration:underline; text-decoration-color:var(--rule);}
header.intro a:hover{text-decoration-color:var(--text)}

/* Section label + app list (home) */
.section-label{font-size:.8rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--faint); margin:0 0 .2rem; padding-top:2.5rem; border-top:1px solid var(--rule-soft);}
.apps{list-style:none; margin:.5rem 0 0; padding:0;}
.app-row{display:flex; align-items:flex-start; gap:1.1rem; padding:1.5rem 0;
  border-bottom:1px solid var(--rule-soft); text-decoration:none; color:var(--text);}
.app-row:last-child{border-bottom:0}
.app-row:hover .app-name{text-decoration:underline; text-decoration-color:var(--text);}
.app-icon{width:54px; height:54px; flex:none; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.10);}
.app-text{min-width:0}
.app-name{font-family:var(--serif); font-size:1.28rem; font-weight:600; line-height:1.2;
  display:inline; text-underline-offset:4px; text-decoration-color:transparent;}
.app-meta{display:inline; color:var(--faint); font-size:.85rem; font-family:var(--sans); margin-left:.6rem;}
.app-tag{margin:.3rem 0 0; color:var(--muted); font-size:1.02rem; line-height:1.55;}
.app-arrow{margin-left:auto; align-self:center; color:var(--faint); flex:none; font-size:1.1rem; padding-left:.5rem;}
.app-row:hover .app-arrow{color:var(--text)}

/* Principles (home) */
.principles-list{list-style:none; margin:.6rem 0 0; padding:0;}
.principles-list li{padding:.55rem 0; color:var(--muted); font-size:1.05rem; line-height:1.6;
  border-bottom:1px solid var(--rule-soft);}
.principles-list li:last-child{border-bottom:0}
.principles-list strong{color:var(--text); font-weight:600;}

/* Breadcrumb */
.crumb{font-size:.85rem; color:var(--faint); padding-top:2rem;}
.crumb a{color:var(--faint); text-decoration:none}
.crumb a:hover{color:var(--text)}
.crumb .sep{opacity:.6; padding:0 .35rem}

/* Hero (app) */
.hero{display:flex; gap:1.6rem; align-items:flex-start; padding:1.4rem 0 0;}
.hero-icon{width:104px; height:104px; flex:none; border-radius:22px; box-shadow:0 2px 8px rgba(0,0,0,.14);}
.hero-body{min-width:0; padding-top:.2rem;}
.hero h1{font-family:var(--serif); font-weight:600; font-size:2.2rem; line-height:1.1;
  margin:0 0 .35rem; letter-spacing:-.3px;}
.hero .tagline{font-size:1.18rem; color:var(--muted); margin:0 0 1rem; line-height:1.45;}
.meta-row{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.2rem;}
.chip{font-size:.82rem; padding:.28rem .7rem; border-radius:100px;
  background:var(--chip-bg); border:1px solid var(--chip-border); color:var(--muted);
  display:inline-flex; align-items:center; gap:.4rem;}
.chip .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block;}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem;}
.btn{display:inline-flex; align-items:center; gap:.5rem; font-size:.97rem; font-weight:500;
  background:var(--text); color:var(--bg); border:1px solid var(--text);
  padding:.62rem 1.15rem; border-radius:9px; text-decoration:none; line-height:1; transition:opacity .15s;}
.btn:hover{opacity:.85; color:var(--bg)}
.cta-row .btn{justify-content:center; min-width:150px;}
.req{font-size:.85rem; color:var(--faint);}
.promo{font-size:.9rem; color:var(--muted); margin-top:.9rem; line-height:1.5;}
.promo-tag{font-weight:600; color:var(--accent);}
.promo-code{font-weight:600; color:var(--text); background:var(--chip-bg); border:1px solid var(--chip-border); padding:.08rem .4rem; border-radius:6px;}
.req a{color:var(--muted)}

/* Sections */
section{padding-top:3rem;}
.rule{border:0; border-top:1px solid var(--rule-soft); margin:3rem 0 0;}
h2.sec{font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--faint);
  margin:0 0 1.1rem; font-weight:600;}
.prose p{margin:0 0 1rem; font-size:1.08rem; line-height:1.72;}
.prose p:last-child{margin-bottom:0}

/* Features */
.features{list-style:none; margin:0; padding:0;}
.features li{padding:1.2rem 0; border-top:1px solid var(--rule-soft);}
.features li:first-child{border-top:0; padding-top:0}
.features h3{font-family:var(--serif); font-size:1.16rem; font-weight:600; margin:0 0 .35rem;}
.features p{margin:0; color:var(--muted); font-size:1rem; line-height:1.62;}

/* Screenshots */
.shots{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.shot{aspect-ratio:4/3; background:var(--shot-bg); border:1px solid var(--rule-soft);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:.85rem; text-align:center; padding:1rem;}
.shots .wide{grid-column:1 / -1; aspect-ratio:16/9;}

/* Screenshot gallery (real images) */
.shots-full{display:flex; flex-direction:column; gap:1rem; margin:.2rem 0 0;}
.shots-full figure{margin:0;}
.shots-full img{display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid var(--rule-soft); box-shadow:0 2px 10px rgba(0,0,0,.16);}

/* Changelog */
.log{list-style:none; margin:0; padding:0;}
.log li{padding:1.2rem 0; border-top:1px solid var(--rule-soft); display:grid;
  grid-template-columns:7rem 1fr; gap:0 1.4rem;}
.log li:first-child{border-top:0; padding-top:0}
.log .ver{font-family:var(--serif); font-weight:600; font-size:1.05rem;}
.log .date{display:block; font-size:.8rem; color:var(--faint); margin-top:.15rem; font-family:var(--sans);}
.log .notes{margin:0; color:var(--muted); font-size:1rem; line-height:1.62;}

/* Privacy callout (app page) */
.callout{border:1px solid var(--rule); border-radius:12px; padding:1.3rem 1.4rem;
  display:flex; gap:1.1rem; align-items:flex-start;}
.callout .ico{flex:none; width:30px; height:30px; color:var(--accent); margin-top:.1rem;}
.callout h3{font-family:var(--serif); font-size:1.12rem; margin:0 0 .3rem; font-weight:600;}
.callout p{margin:0 0 .6rem; color:var(--muted); font-size:.98rem; line-height:1.6;}
.callout a{color:var(--text); font-weight:500; text-decoration:underline; text-decoration-color:var(--rule);}
.callout a:hover{text-decoration-color:var(--text)}

/* Document (about + privacy) */
.doc-head{padding:1.6rem 0 1.5rem;}
.doc-head h1{font-family:var(--serif); font-weight:600; font-size:2rem; line-height:1.15;
  margin:0 0 .5rem; letter-spacing:-.2px;}
.updated{font-size:.9rem; color:var(--faint);}
.summary{border:1px solid var(--rule); border-radius:12px; padding:1.2rem 1.4rem;
  margin:1.5rem 0 0; background:var(--chip-bg);}
.summary p{margin:0; color:var(--text); font-size:1rem; line-height:1.65;}
.summary strong{font-weight:600}
article{padding-top:1rem}
article h2{font-family:var(--serif); font-size:1.32rem; font-weight:600; line-height:1.25;
  margin:2.4rem 0 .7rem; letter-spacing:-.1px;}
article h2:first-of-type{margin-top:2rem}
article p{margin:0 0 1rem; font-size:1.05rem; line-height:1.72;}
article ul{margin:0 0 1rem; padding-left:1.2rem;}
article li{margin:0 0 .55rem; line-height:1.62;}
article a{color:var(--text); text-decoration:underline; text-decoration-color:var(--rule);}
article a:hover{text-decoration-color:var(--text)}
.lead{color:var(--muted)}
.nodata{display:inline-flex; align-items:center; gap:.45rem; font-weight:600;}
.nodata .tick{color:var(--accent)}

/* Footer */
footer{margin-top:4rem; border-top:1px solid var(--rule-soft); padding:2.5rem 0 4rem;}
.foot-grid{display:flex; flex-wrap:wrap; gap:2.5rem 3rem; margin-bottom:2rem;}
.foot-col h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--faint); margin:0 0 .7rem; font-weight:600;}
.foot-col ul{list-style:none; margin:0; padding:0;}
.foot-col li{margin:0 0 .45rem}
.foot-col a{color:var(--muted); text-decoration:none; font-size:.95rem;}
.foot-col a:hover{color:var(--text)}
.foot-bottom{display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center;
  color:var(--faint); font-size:.85rem; padding-top:1.5rem; border-top:1px solid var(--rule-soft);}
.foot-bottom a{color:var(--faint); text-decoration:none}
.foot-bottom a:hover{color:var(--text)}
.foot-bottom .sep{opacity:.5}

@media (max-width:560px){
  body{font-size:16px}
  header.intro{padding:3rem 0 2rem}
  header.intro h1{font-size:1.7rem}
  .hero{flex-direction:column; gap:1.1rem;}
  .hero-icon{width:84px; height:84px; border-radius:18px;}
  .hero h1{font-size:1.85rem}
  .shots{grid-template-columns:1fr}
  .shots .wide{aspect-ratio:4/3}
  .log li{grid-template-columns:1fr; gap:.3rem}
  .doc-head h1{font-size:1.65rem}
  .app-arrow{display:none}
  .nav-links{gap:1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}