:root{
  --paper:#f3eee2; --paper-2:#ece4d3; --card:#fbf8f1;
  --ink:#1c2620; --ink-soft:#4a5a50; --dim:#7a8578;
  --pine:#1f7a44; --pine-deep:#123f27; --signal:#c2691a;
  --line:#ddd2bf; --line-soft:#e7dece;
  --fresh:#e3f0e5; --fresh-b:#3f9b5a; --mid:#f6ecd4; --mid-b:#c79320; --old:#f4e2dd; --old-b:#c15a45;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --disp:"Archivo","Segoe UI",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:var(--pine); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono)}
h1,h2,h3{font-family:var(--disp); line-height:1.08; letter-spacing:-.01em; margin:0}
:focus-visible{outline:3px solid var(--signal); outline-offset:2px; border-radius:4px}

.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pine); display:inline-flex; gap:10px; align-items:center}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--signal); display:inline-block}

/* nav */
.nav{position:sticky; top:0; z-index:20; background:rgba(243,238,226,.86);
  backdrop-filter:saturate(1.3) blur(8px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800;
  font-size:20px; letter-spacing:-.02em; color:var(--pine-deep)}
.brand svg{display:block; flex:none}
.nav .links{display:flex; gap:24px; margin-left:auto; align-items:center}
.nav .links a:not(.btn){color:var(--ink-soft); font-weight:600; font-size:15px}
.nav .links a:hover{color:var(--pine-deep); text-decoration:none}
.nav .links a[aria-current="page"]{color:var(--pine-deep)}
.nav .links a[aria-current="page"]:not(.btn){border-bottom:2px solid var(--signal); padding-bottom:2px}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-family:var(--disp);
  border-radius:10px; padding:11px 18px; font-size:15.5px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .12s ease, background .12s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--pine); color:#fff; box-shadow:0 2px 0 var(--pine-deep)}
.btn-primary:hover{background:#1c6c3d}
.btn-ghost{border-color:var(--line); color:var(--pine-deep); background:var(--card)}
.btn-ghost:hover{border-color:var(--pine)}
.nav .btn{padding:9px 15px; font-size:14.5px}

/* hero */
.hero{padding:64px 0 40px}
.hero .wrap{display:grid; grid-template-columns:1.05fr 1fr; gap:52px; align-items:center}
.hero h1{font-weight:900; font-size:clamp(38px,5.4vw,62px); color:var(--pine-deep); margin:16px 0 0}
.hero h1 .u{color:var(--pine)}
.hero .lede{font-size:19px; color:var(--ink-soft); margin:18px 0 26px; max-width:34ch}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .meta{margin-top:22px; font-family:var(--mono); font-size:12.5px; color:var(--dim); line-height:1.9}
.hero .meta b{color:var(--pine); font-weight:600}

/* signature spot list */
.console{background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 44px -24px rgba(18,63,39,.5), 0 2px 0 var(--line-soft); overflow:hidden}
.console-bar{display:flex; align-items:center; gap:8px; padding:11px 14px;
  background:var(--pine-deep); color:#dfeee4; font-family:var(--mono); font-size:12px}
.console-bar .dot{width:9px; height:9px; border-radius:50%; background:#5ec27f}
.console-bar .grow{margin-left:auto; opacity:.8}
.spot{display:grid; grid-template-columns:64px 1fr auto; gap:2px 12px; align-items:center;
  padding:11px 14px; border-bottom:1px solid var(--line-soft); border-left:3px solid transparent}
.spot:last-child{border-bottom:0}
.spot.fresh{background:var(--fresh); border-left-color:var(--fresh-b)}
.spot.mid{background:var(--mid); border-left-color:var(--mid-b)}
.spot.old{background:var(--old); border-left-color:var(--old-b)}
.spot .freq{grid-row:span 2; font-family:var(--mono); font-weight:700; font-size:19px; color:var(--pine-deep)}
.spot .freq small{display:block; font-size:11px; font-weight:400; color:var(--dim)}
.spot .l1{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.spot .call{font-family:var(--mono); font-weight:700; font-size:15px}
.spot .cc{font-family:var(--mono); font-size:10px; color:#fff; background:var(--pine); padding:1px 5px; border-radius:4px}
.spot .prog{font-family:var(--mono); font-size:10px; font-weight:700; color:var(--pine-deep); border:1px solid var(--pine); border-radius:4px; padding:0 5px}
.spot .flag{font-family:var(--mono); font-size:10px; font-weight:700; color:#2b6b41; background:#dcefe1; border:1px solid #bcdcc6; border-radius:4px; padding:1px 6px}
.spot .flag.atno{color:#8a5412; background:#f6e8cf; border-color:#e3c98d}
.spot .l2{grid-column:2; font-size:13px; color:var(--ink-soft)}
.spot .l2 .ref{font-family:var(--mono); color:var(--pine-deep); font-weight:600}
.spot .age{grid-row:span 2; align-self:center; font-family:var(--mono); font-size:12px; color:var(--dim); text-align:right}

/* generic section */
.section{padding:64px 0}
.section-head{max-width:62ch}
.section-head h2{font-weight:800; font-size:clamp(28px,3.4vw,40px); color:var(--pine-deep); margin:12px 0 0}
.section-head p{color:var(--ink-soft); margin:14px 0 0; font-size:18px}

/* programs strip */
.programs{background:var(--pine-deep); color:#e7f1ea}
.programs .wrap{display:flex; align-items:center; gap:14px 26px; flex-wrap:wrap; padding:26px 24px}
.programs .lab{font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#93c7a6}
.programs .chips{display:flex; gap:10px; flex-wrap:wrap}
.programs .chip{font-family:var(--mono); font-weight:700; font-size:14px; border:1px solid #35624a; border-radius:999px; padding:6px 14px; color:#eaf4ee}
.programs .also{margin-left:auto; font-size:14px; color:#9dc6ad}
.programs .also b{color:#fff; font-family:var(--mono); font-weight:700}

/* feature cards */
.features .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px}
.card .ic{width:34px; height:34px; color:var(--pine)}
.card h3{font-size:19px; font-weight:700; color:var(--pine-deep); margin:14px 0 8px}
.card p{margin:0; font-size:15.5px; color:var(--ink-soft); line-height:1.55}
.card .k{font-family:var(--mono); color:var(--pine); font-size:.92em}

/* install steps */
.install{background:var(--paper-2)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:38px}
.step{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px}
.step .n{font-family:var(--mono); font-weight:700; font-size:13px; color:#fff; background:var(--pine);
  width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center}
.step h3{font-size:16.5px; font-weight:700; color:var(--pine-deep); margin:14px 0 6px}
.step p{margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.5}
.step code, .install code{font-family:var(--mono); font-size:.9em; background:var(--paper-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--pine-deep)}
.install .note{margin-top:24px; font-size:15px; color:var(--ink-soft); max-width:66ch}
.install .note b{color:var(--pine-deep)}

/* freshness callout */
.fresh-note{background:var(--card); border:1px solid var(--line); border-radius:16px;
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding:30px 34px}
.fresh-note h2{font-weight:800; font-size:clamp(24px,3vw,32px); color:var(--pine-deep)}
.fresh-note p{color:var(--ink-soft); margin:12px 0 0; max-width:52ch}
.legend{display:flex; flex-direction:column; gap:10px; font-family:var(--mono); font-size:13px}
.legend span{display:flex; align-items:center; gap:10px; white-space:nowrap}
.legend i{width:34px; height:18px; border-radius:5px; display:inline-block; border-left:3px solid}
.legend .lf{background:var(--fresh); border-left-color:var(--fresh-b)}
.legend .lm{background:var(--mid); border-left-color:var(--mid-b)}
.legend .lo{background:var(--old); border-left-color:var(--old-b)}

/* download / CTA band */
.get{background:var(--pine-deep); color:#eaf4ee; text-align:center}
.get .wrap{padding:66px 24px}
.get h2{font-weight:900; font-size:clamp(30px,4vw,46px); color:#fff}
.get p{margin:16px auto 26px; max-width:46ch; color:#bfe0cc}
.get .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.get .btn-primary{background:var(--signal); box-shadow:0 2px 0 #8a4a12}
.get .btn-primary:hover{background:#a95a15}
.get .btn-ghost{background:transparent; border-color:#3d6a51; color:#eaf4ee}

/* content pages */
.page-header{padding:52px 0 30px; border-bottom:1px solid var(--line); background:var(--card)}
.page-header h1{font-weight:900; font-size:clamp(30px,4.4vw,50px); color:var(--pine-deep); margin:12px 0 0}
.page-header .lede{font-size:19px; color:var(--ink-soft); margin:16px 0 0; max-width:58ch}
.article{padding:44px 0 64px}
.prose{max-width:770px}
.prose h2{font-family:var(--disp); font-weight:800; font-size:26px; color:var(--pine-deep);
  margin:36px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line-soft)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--disp); font-weight:700; font-size:19px; color:var(--pine); margin:24px 0 6px}
.prose p,.prose li{font-size:16.5px; color:var(--ink); line-height:1.65}
.prose ul,.prose ol{padding-left:22px; margin:10px 0}
.prose li{margin:6px 0}
.prose a:not(.btn){color:var(--pine); font-weight:600}
.prose strong{color:var(--pine-deep)}
.prose code{font-family:var(--mono); font-size:.9em; background:var(--paper-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--pine-deep)}
.prose pre{background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; overflow:auto}
.prose pre code{background:none; border:0; padding:0}
.prose hr{border:0; border-top:1px solid var(--line); margin:28px 0}
.prose blockquote{border-left:3px solid var(--pine); background:var(--card); margin:14px 0; padding:6px 14px; color:var(--ink-soft)}
.prose table{border-collapse:collapse; width:100%; margin:16px 0; font-size:15px; display:block; overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line); padding:8px 11px; text-align:left; vertical-align:top}
.prose th{background:var(--paper-2); color:var(--pine-deep)}
.btn-primary.big{padding:13px 24px; font-size:16.5px}
.pagelinks{margin-top:26px; display:flex; gap:14px; flex-wrap:wrap}
.dl-block{margin:4px 0 20px}
.dl-alt{margin:16px 0 4px; font-size:15px; color:var(--ink-soft)}
.dl-alt a{font-weight:700}
.dl-alt a.dl-detected{color:var(--pine-deep)}
.dl-note{margin:6px 0 0; font-size:13.5px; color:var(--dim)}

/* about the creator */
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:center}
.about-photo img{width:100%; display:block; border-radius:16px; border:1px solid var(--line); box-shadow:0 18px 44px -24px rgba(18,63,39,.5)}
.about-text h2{font-weight:800; font-size:clamp(26px,3.2vw,38px); color:var(--pine-deep); margin:12px 0 14px}
.about-text p{color:var(--ink-soft); font-size:16.5px; line-height:1.62; margin:12px 0; max-width:58ch}
.about-text .sig{font-family:var(--disp); font-weight:700; color:var(--pine-deep); margin:16px 0 22px}
/* screenshots */
.shots{background:var(--paper-2)}
.shot{margin:30px 0 0; text-align:center}
.shot img{width:100%; max-width:1040px; display:inline-block; border-radius:14px; border:1px solid var(--line); box-shadow:0 20px 50px -26px rgba(18,63,39,.55)}
.shot figcaption{margin:12px 0 0; font-size:13.5px; color:var(--dim); font-family:var(--mono)}

/* footer */
.foot{background:var(--paper); border-top:1px solid var(--line)}
.foot .wrap{padding:34px 24px; display:flex; gap:16px 28px; flex-wrap:wrap; align-items:center; font-size:14px; color:var(--dim)}
.foot .brand{font-size:17px}
.foot .sep{color:var(--line)}
.foot .mono{font-family:var(--mono); font-size:12.5px}
.foot-right{margin-left:auto; display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap}
.foot-donate{display:inline-flex; align-items:center; gap:7px; font-family:var(--disp);
  font-weight:700; font-size:14px; color:#fff; background:var(--signal); border-radius:8px; padding:7px 15px;
  text-decoration:none; transition:background .12s ease, transform .12s ease}
.foot-donate:hover{background:#a95a15; text-decoration:none; transform:translateY(-1px)}
.foot .k73{font-family:var(--mono); font-weight:700; color:var(--pine); letter-spacing:.1em}

/* responsive */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:36px}
  .features .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .fresh-note{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr; gap:28px}
  .programs .also{margin-left:0; flex-basis:100%}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav .links a:not(.btn){display:none}
  .features .grid,.faq .grid,.steps{grid-template-columns:1fr}
  .section{padding:48px 0}
  .foot .k73{margin-left:0}
}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .console{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .console .spot{opacity:0; animation:slidein .5s ease forwards}
  .console .spot:nth-child(2){animation-delay:.18s}
  .console .spot:nth-child(3){animation-delay:.30s}
  .console .spot:nth-child(4){animation-delay:.42s}
  .console .spot:nth-child(5){animation-delay:.54s}
  .console .spot:nth-child(6){animation-delay:.66s}
  @keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
  @keyframes slidein{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:none}}
}

/* My Passion page */
.passion-photo{margin:0 0 26px; text-align:center}
.passion-photo img{width:100%; max-width:430px; display:inline-block; border-radius:16px;
  border:1px solid var(--line); box-shadow:0 18px 44px -24px rgba(18,63,39,.5)}
.passion-photo figcaption{margin-top:11px; font-size:13.5px; color:var(--dim); font-family:var(--mono)}
.hunt-questions{list-style:none; margin:22px 0; padding:16px 20px 18px; background:var(--paper-2);
  border:1px solid var(--line); border-left:3px solid var(--signal); border-radius:12px}
.hunt-questions li{position:relative; padding-left:22px; margin:11px 0; color:var(--ink); line-height:1.5}
.hunt-questions li::before{content:""; position:absolute; left:2px; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--signal)}
.pullquote{margin:24px 0; padding:4px 0 4px 22px; border-left:4px solid var(--pine);
  font-family:var(--disp); font-weight:700; font-size:clamp(20px,2.6vw,26px); line-height:1.3;
  color:var(--pine-deep); font-style:italic}
.prose .sig{font-family:var(--disp); font-weight:700; color:var(--pine-deep); font-size:18px; margin:24px 0 18px}
.passion-cta{margin-top:6px}

/* footer disclaimer link */
.foot-link{font-family:var(--mono); font-size:12.5px; color:var(--pine-deep); text-decoration:none}
.foot-link:hover{text-decoration:underline}

/* Passion page hero + chips */
.passion-hero{background:var(--paper-2); border-bottom:1px solid var(--line)}
.passion-hero-grid{display:grid; grid-template-columns:minmax(280px,330px) 1fr; gap:52px; align-items:center; padding:56px 0}
.passion-hero-photo{margin:0}
.passion-hero-photo img{width:100%; height:auto; display:block; border-radius:18px; border:1px solid var(--line); box-shadow:0 24px 60px -30px rgba(18,63,39,.55)}
.passion-hero-text h1{font-family:var(--disp); font-weight:800; font-size:clamp(30px,4vw,46px);
  color:var(--pine-deep); line-height:1.06; margin:12px 0 4px}
.passion-hero-sub{font-family:var(--disp); font-weight:600; font-size:clamp(17px,2.2vw,22px);
  color:var(--signal); margin:0 0 18px}
.passion-hero-text .lede{font-size:18px; color:var(--ink-soft); margin:0 0 22px; max-width:46ch}
.passion-chips{display:flex; flex-wrap:wrap; gap:8px}
.pchip{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.05em; padding:5px 12px;
  border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--pine-deep)}
.passion-prose{max-width:64ch}
.passion-prose .pullquote:first-letter{text-transform:none}
@media (max-width:820px){
  .passion-hero-grid{grid-template-columns:1fr; gap:24px; padding:34px 0}
}

/* Cross-platform section: Windows / macOS / Linux cards */
.platforms{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.plat-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 22px;text-align:center;transition:transform .12s ease,box-shadow .12s ease}
.plat-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(28,38,32,.08)}
.plat-icon{width:60px;height:60px;margin:0 auto 16px;color:var(--pine)}
.plat-icon svg{width:100%;height:100%;display:block}
.plat-card h3{margin:0 0 6px;font-size:19px;color:var(--ink)}
.plat-card p{margin:0;color:var(--dim);font-size:15px;line-height:1.5}
.plat-card a{color:var(--pine);font-weight:600;text-decoration:none}
.plat-card a:hover{text-decoration:underline}
@media(max-width:720px){.platforms{grid-template-columns:1fr;gap:14px}}