:root {
      color-scheme: light dark;
      --paper:#f7f8f4; --surface:#ffffff; --surface-2:#edf1eb; --ink:#12211c; --muted:#53615c;
      --line:#d5ddd7; --brand:#087f6b; --brand-2:#055c50; --accent:#e77720; --soft:#dff2ec;
      --code:#10231f; --code-ink:#e7fff7; --shadow:0 18px 50px rgba(24,45,37,.10);
      --radius:18px; --max:1160px;
    }
    @media (prefers-color-scheme: dark){
      :root{--paper:#0f1714;--surface:#15211d;--surface-2:#1c2a25;--ink:#f1f7f3;--muted:#b6c3bd;--line:#31433b;--brand:#57d0b5;--brand-2:#90e5d1;--accent:#ffac68;--soft:#17372f;--code:#08110f;--code-ink:#dcfff5;--shadow:0 20px 55px rgba(0,0,0,.28)}
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans",sans-serif;line-height:1.62}
    button,input{font:inherit}
    a{color:inherit}
    img{display:block;max-width:100%}
    .sitebar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
    .navwrap{max-width:var(--max);margin:auto;min-height:64px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .home-mark{border:0;background:none;color:var(--brand-2);font-weight:700;padding:10px 0;cursor:pointer;display:flex;align-items:center;gap:9px}
    .home-mark svg{width:22px;height:22px}
    .navlinks{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
    .navlinks button{border:0;background:transparent;color:var(--muted);padding:10px 12px;border-radius:9px;cursor:pointer;font-weight:600}
    .navlinks button:hover,.navlinks button:focus-visible{background:var(--surface-2);color:var(--ink);outline:none}
    main{min-height:70vh}
    .view{display:none}.view.active{display:block}
    .shell{max-width:var(--max);margin:auto;padding:0 24px}
    .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center;padding:64px 0 44px}
    .eyebrow{color:var(--brand-2);font-weight:700;font-size:.83rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px}
    h1,h2,h3{font-family:"Newsreader",serif;line-height:1.05;margin-top:0}
    h1{font-size:clamp(2.8rem,7vw,5.7rem);letter-spacing:-.045em;margin-bottom:22px;max-width:760px}
    .hero p{font-size:1.16rem;color:var(--muted);max-width:650px;margin:0 0 28px}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap}
    .btn{border:1px solid transparent;background:var(--brand);color:#fff;text-decoration:none;padding:12px 18px;border-radius:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
    .btn:hover{background:var(--brand-2)}
    .btn.secondary{background:transparent;border-color:var(--line);color:var(--ink)}
    .btn.secondary:hover{background:var(--surface)}
    .hero-media{position:relative}
    .hero-media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:28px 8px 28px 8px;box-shadow:var(--shadow)}
    .hero-note{position:absolute;left:-20px;bottom:20px;background:var(--surface);padding:13px 16px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);font-weight:700}
    .hero-note span{display:block;color:var(--muted);font-size:.78rem;font-weight:500}
    .section{padding:62px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
    .section-head h2{font-size:clamp(2.1rem,4vw,3.4rem);margin-bottom:4px;letter-spacing:-.025em}
    .section-head p{margin:0;color:var(--muted);max-width:580px}
    .goal-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
    .goal{border:0;border-right:1px solid var(--line);background:transparent;text-align:left;padding:20px;color:var(--ink);cursor:pointer;min-height:112px}
    .goal:last-child{border-right:0}.goal:hover{background:var(--soft)}
    .goal b{display:block;margin-bottom:6px}.goal span{font-size:.88rem;color:var(--muted)}
    .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
    .filter{border:1px solid var(--line);background:var(--surface);color:var(--muted);padding:8px 13px;border-radius:999px;cursor:pointer;font-weight:600}
    .filter.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
    .tutorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .card{background:var(--surface);border:1px solid var(--line);overflow:hidden;border-radius:16px;display:flex;flex-direction:column;min-width:0}
    .card[hidden]{display:none}
    .card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-2)}
    .card-body{padding:20px;display:flex;flex-direction:column;flex:1}
    .meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.78rem;font-weight:600;margin-bottom:10px}
    .card h3{font-size:1.55rem;margin-bottom:10px}
    .card p{color:var(--muted);margin:0 0 20px;flex:1}
    .read-link{border:0;background:none;padding:0;text-align:left;color:var(--brand-2);font-weight:700;cursor:pointer}
    .read-link:hover{text-decoration:underline}
    .ad-slot{margin:46px 0;border:1px dashed color-mix(in srgb,var(--muted) 55%,transparent);min-height:118px;display:grid;place-items:center;text-align:center;color:var(--muted);background:color-mix(in srgb,var(--surface) 72%,transparent);border-radius:10px;padding:20px}
    .ad-slot strong{display:block;color:var(--ink);font-size:.83rem;letter-spacing:.06em;text-transform:uppercase}.ad-slot span{font-size:.82rem}
    .roadmap{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;background:var(--ink);color:var(--paper);padding:36px;border-radius:24px}
    .roadmap h2{font-size:2.7rem;margin-bottom:12px}.roadmap p{color:color-mix(in srgb,var(--paper) 75%,transparent)}
    .steps{display:grid;gap:1px;background:color-mix(in srgb,var(--paper) 18%,transparent);border-radius:12px;overflow:hidden}
    .step{background:var(--ink);padding:18px;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
    .step b:first-child{color:var(--accent);font-family:"Newsreader",serif;font-size:1.4rem}.step span{display:block;font-size:.86rem;color:color-mix(in srgb,var(--paper) 68%,transparent);margin-top:2px}
    .tool-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line)}
    .tool-table th,.tool-table td{text-align:left;padding:15px;border-bottom:1px solid var(--line);vertical-align:top}
    .tool-table th{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.tool-table tr:last-child td{border-bottom:0}
    .price{font-weight:700;color:var(--brand-2);white-space:nowrap}
    .newsletter{margin:64px 0;background:var(--soft);display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:38px;border-radius:26px 8px 26px 8px;align-items:center}
    .newsletter h2{font-size:2.7rem;margin-bottom:10px}.newsletter p{color:var(--muted);margin:0}
    .signup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.signup input{min-width:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:13px 14px;border-radius:9px}.signup button{white-space:nowrap}
    .form-note,.form-status{display:block;grid-column:1/-1;font-size:.78rem;color:var(--muted);margin:0}.form-status{font-weight:600;color:var(--brand-2)}
    footer{border-top:1px solid var(--line);padding:34px 0 46px;color:var(--muted)}
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}.footer-grid h3{color:var(--ink);font-size:1.25rem;margin-bottom:7px}.footer-grid p{margin:0 0 10px}.footer-links{display:flex;gap:16px;flex-wrap:wrap;align-content:start;justify-content:flex-end}.footer-links button{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0}
    .article-wrap{max-width:860px;margin:auto;padding:38px 24px 80px}
    .back{border:0;background:none;color:var(--brand-2);padding:8px 0;font-weight:700;cursor:pointer;margin-bottom:22px}
    .article-head h1{font-size:clamp(2.8rem,7vw,5rem)}
    .article-deck{font-size:1.22rem;color:var(--muted);max-width:760px}
    .article-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.84rem;font-weight:600;margin:24px 0}
    .article-hero{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:22px 8px 22px 8px;margin:28px 0 42px}
    .article-body{font-size:1.05rem}.article-body h2{font-size:2.35rem;margin:56px 0 16px;scroll-margin-top:84px}.article-body h3{font-family:"IBM Plex Sans",sans-serif;font-size:1.25rem;line-height:1.3;margin:30px 0 8px}.article-body p{margin:0 0 18px}.article-body ul,.article-body ol{padding-left:24px;margin:0 0 22px}.article-body li{margin-bottom:9px}
    .takeaway{background:var(--soft);padding:22px 24px;border-radius:4px 18px 18px 4px;margin:28px 0}.takeaway strong{display:block;margin-bottom:6px}
    .prompt{background:var(--code);color:var(--code-ink);padding:20px;border-radius:12px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;line-height:1.6;margin:18px 0;white-space:pre-wrap}
    .checklist{list-style:none!important;padding:0!important;display:grid;gap:10px}.checklist li{background:var(--surface);border:1px solid var(--line);padding:13px 15px;border-radius:9px;margin:0!important}.checklist li::before{content:"✓";color:var(--brand);font-weight:800;margin-right:10px}
    .mini-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.94rem}.mini-table th,.mini-table td{border:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}.mini-table th{background:var(--surface-2)}
    .article-end{border-top:1px solid var(--line);margin-top:54px;padding-top:28px;display:flex;justify-content:space-between;gap:16px;align-items:center}
    .about-hero{max-width:850px;padding:72px 0 36px}.about-hero h1{font-size:clamp(3rem,7vw,5.6rem)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-bottom:70px}.about-panel{background:var(--surface);border:1px solid var(--line);padding:28px;border-radius:18px}.about-panel h2{font-size:2rem;margin-bottom:12px}.about-panel p{color:var(--muted)}
    .disclosure{background:var(--surface-2);padding:22px;border-radius:12px;margin:30px 0}.disclosure h2{font-size:1.45rem;margin-bottom:8px}.disclosure p{margin:0;color:var(--muted)}
    .source-note{font-size:.88rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:28px}.source-note a{color:var(--brand-2);font-weight:600}
    @media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:44px}.hero-media{max-width:700px}.goal-strip{grid-template-columns:1fr 1fr}.goal:nth-child(2){border-right:0}.goal:nth-child(-n+2){border-bottom:1px solid var(--line)}.tutorial-grid{grid-template-columns:1fr 1fr}.roadmap,.newsletter{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-links{justify-content:flex-start}.about-grid{grid-template-columns:1fr}}
    @media (max-width:620px){.navwrap{padding:0 16px}.home-mark span{display:none}.navlinks button{padding:9px 8px;font-size:.84rem}.shell{padding:0 16px}.hero{gap:26px}.hero-note{left:10px}.goal-strip{grid-template-columns:1fr}.goal{border-right:0;border-bottom:1px solid var(--line)!important}.goal:last-child{border-bottom:0!important}.section{padding:44px 0}.section-head{display:block}.tutorial-grid{grid-template-columns:1fr}.roadmap{padding:25px 20px}.tool-table thead{display:none}.tool-table,.tool-table tbody,.tool-table tr,.tool-table td{display:block}.tool-table tr{padding:14px;border-bottom:1px solid var(--line)}.tool-table td{border:0;padding:3px 0}.tool-table td::before{content:attr(data-label);font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--muted);display:block}.newsletter{padding:26px 20px}.signup{display:block}.signup .btn{width:100%;margin-top:10px}.article-wrap{padding:28px 16px 60px}.article-hero{aspect-ratio:4/3}.mini-table thead{display:none}.mini-table,.mini-table tbody,.mini-table tr,.mini-table td{display:block}.mini-table tr{border:1px solid var(--line);margin-bottom:10px}.mini-table td{border:0;border-bottom:1px solid var(--line)}.mini-table td:last-child{border-bottom:0}.article-end{align-items:flex-start;flex-direction:column}}
    @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  

/* ---- multi-page additions (nav/footer anchors, breadcrumbs, prev-next) ---- */
    .navlinks a{border:0;background:transparent;color:var(--muted);padding:10px 12px;border-radius:9px;cursor:pointer;font-weight:600}
.footer-links a{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:0}
a.home-mark{text-decoration:none}
.crumbs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:28px 0 4px;color:var(--muted);font-size:.92rem}
.crumbs a{text-decoration:none;color:var(--brand-2);font-weight:600}
.crumbs a:hover{text-decoration:underline}
.prevnext{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:46px 0 64px;padding-top:28px;border-top:1px solid var(--line)}
.prevnext a{text-decoration:none;font-weight:600;color:var(--brand-2);padding:10px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.prevnext a:hover{background:var(--surface-2)}
.prevnext .all-link{border-style:dashed}