/* Linelet: guides and free daily puzzle, in the site design (matches index.html and privacy.html).
   One standalone stylesheet: fonts, palette, header, footer, reading layout and the tool.
   Nothing here comes from ../../shared/app.css any more. */

@font-face{font-family:'Rubik';font-style:italic;font-weight:400 900;font-display:swap;src:url(../assets/fonts/Rubik-italic-400_900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400 900;font-display:swap;src:url(../assets/fonts/Rubik-normal-400_900.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --paper:#e7f5fc;--ink:#12293f;--accent:#2f5fd0;--accent-text:#2f5fd0;--teal:#0b7f73;
  --card:#fffdf7;--card-line:#e4d9c2;--cta:#fffdf7;--surface:#fffdf7;
  --panel:linear-gradient(160deg,#12293f,#0a5f58);
  --cord-pink:#ff4e7e;--cord-orange:#ffa61f;--cord-blue:#3e74f0;--cord-teal:#12bfae;--cord-green:#5bc236;--cord-yellow:#ffc65c;
  --ink-soft:color-mix(in srgb,var(--ink) 84%,var(--paper));
  --muted:#446079;
  --line:color-mix(in srgb,var(--ink) 14%,transparent);
  --accent-soft:color-mix(in srgb,var(--accent) 12%,var(--paper));
  --accent-deep:var(--accent-text);
  --radius:24px;--radius-sm:16px;
  --max:1080px;
}

/* ---------- base, as privacy.html ---------- */
.skip-link{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 18px;border-radius:10px;background:var(--ink);color:var(--paper);font:600 15px/1.2 system-ui,sans-serif;text-decoration:none}.skip-link:focus{top:12px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Rubik',system-ui,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:#2f5fd0;text-underline-offset:3px}a:hover{opacity:.8}
img,svg{max-width:100%}
strong{font-weight:700}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;padding:16px clamp(20px,4vw,56px);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600}
.brand:hover{color:var(--ink);opacity:.8}
.brand img{width:30px;height:30px;border-radius:8px}
.top nav{display:flex;flex-wrap:wrap;gap:8px}
.top nav a{color:var(--ink);text-decoration:none;font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.top nav a:hover{border-color:var(--ink)}
/* On phones the four nav pills wrap to two rows; a sticky header that tall would cover a fifth of the
   screen (and the puzzle board), so below 640px it scrolls away with the page. */
@media (max-width:640px){.top{position:relative}}
[tabindex="-1"]:focus{outline:none}
.top nav a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

main{padding:clamp(40px,6vw,88px) clamp(20px,4vw,40px) clamp(64px,8vw,120px)}
.wrap{max-width:760px;margin:0 auto}

h1{font-family:'Rubik',system-ui,sans-serif;font-weight:400;font-size:clamp(40px,5.2vw,68px);line-height:1.02;letter-spacing:-.02em;margin:10px 0 20px;text-wrap:balance}
h2{font-family:'Rubik',system-ui,sans-serif;font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.15;margin:48px 0 12px;padding-top:24px;border-top:1px solid var(--line);text-wrap:balance}
h3{font-size:19px;font-weight:700;line-height:1.35;margin:28px 0 8px}
p{margin:0 0 16px}
ul,ol{padding-left:1.2em;margin:0 0 20px}li{margin:6px 0}

.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);font-weight:700;margin:0}
.lede{font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:34em;margin:0 0 14px}
.meta{font-size:15px;color:var(--muted)}

footer{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding:24px clamp(20px,4vw,56px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:14px;opacity:1}
footer a{color:inherit}

/* ---------- page head and breadcrumbs ---------- */
.gd-page-head{margin:0 0 8px}
.gd-page-head .meta{margin:0}
.gd-crumbs{font-size:14px;color:var(--muted);margin:0 0 22px}
.gd-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 8px}
.gd-crumbs li{margin:0}
.gd-crumbs li + li::before{content:"/";margin-right:8px;opacity:.6}
.gd-crumbs a{color:inherit}

/* ---------- article body ---------- */
.gd-article-body{padding-top:8px}
.prose > h2:first-child{margin-top:24px}
.prose figure{margin:24px 0}
.prose figcaption{font-size:15px;color:var(--muted);margin-top:8px}

/* A numbered list of steps or moves: a name, a time, and a plain description. */
.gd-moves{list-style:none;counter-reset:gd-move;padding:0;margin:12px 0 28px}
.gd-moves > li{counter-increment:gd-move;position:relative;padding:2px 0 16px 50px;margin:0}
.gd-moves > li::before{content:counter(gd-move);position:absolute;left:0;top:2px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;line-height:1;color:var(--paper);background:var(--ink)}
.gd-moves strong{color:var(--ink)}
.gd-time{font-size:14px;color:var(--muted);font-weight:700;margin-left:6px;white-space:nowrap}

/* Calm note box: same tint as the highlighted box on privacy.html. */
.gd-note{background:var(--accent-soft);border-radius:var(--radius-sm);padding:18px 22px;margin:24px 0;font-size:16px}
.gd-note p:last-child{margin-bottom:0}

/* Buttons: the pill used by the "Get the app" link on index.html. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 22px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:700 16px/1.2 'Rubik',system-ui,sans-serif;text-decoration:none;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);transition:transform .2s ease,opacity .2s ease}
.btn:hover{color:var(--paper);transform:translateY(-2px);opacity:.92}
.btn:active{transform:none}
.btn.secondary{background:transparent;color:var(--ink);box-shadow:none;border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.btn.secondary:hover{color:var(--ink);border-color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn[hidden]{display:none}

/* The one calm call to action at the end of each page. */
.gd-cta{margin:48px 0 0;padding:clamp(22px,4vw,32px);background:var(--panel);color:#fffdf7;border-radius:var(--radius)}
.gd-cta h2{margin:0 0 10px;padding:0;border:0;font-size:clamp(24px,2.6vw,30px)}
.gd-cta h2,.gd-cta p{color:#fffdf7}
.gd-cta .btn{background:#fffdf7;color:#12293f;border-color:#fffdf7;box-shadow:none}.gd-cta .btn:hover{color:#12293f}
.gd-cta .btn:focus-visible{outline-color:#fffdf7}
.gd-cta .btn{margin-top:4px}

/* Related links */
.gd-more{margin-top:40px}
.gd-more h2{font-size:clamp(22px,2.4vw,26px);margin:0 0 10px}
.gd-more ul{padding-left:1.2em}

/* Cards (guides index and tool panels) */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius);padding:clamp(20px,3vw,28px)}

/* ---------- guides index ---------- */
.gd-guide-grid{display:grid;gap:16px;grid-template-columns:1fr;margin:8px 0 0;padding:0;list-style:none}
@media (min-width:44rem){.gd-guide-grid{grid-template-columns:1fr 1fr}}
.gd-guide-grid > li{margin:0}
.gd-guide-grid .card{height:100%;display:flex;flex-direction:column;position:relative;transition:transform .25s ease}
.gd-guide-grid .card:hover{transform:translateY(-4px)}
.gd-guide-grid h2{font-size:clamp(21px,2.2vw,24px);line-height:1.25;margin:8px 0 8px;padding:0;border:0}
.gd-guide-grid h2 a{color:var(--ink);text-decoration:none}
.gd-guide-grid h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.gd-guide-grid h2 a:hover{text-decoration:underline}
.gd-guide-grid h2 a:focus-visible{outline:none}
.gd-guide-grid .card:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.gd-guide-grid p{color:var(--ink-soft);font-size:16px;margin:0 0 12px}
.gd-guide-grid .eyebrow{font-size:12px;color:var(--accent-text);margin:0}
.gd-guide-grid .meta{margin-top:auto;margin-bottom:0;font-size:14px;color:var(--muted)}

/* ---------- free daily puzzle ---------- */
.gd-play{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
@media (min-width:56rem){.gd-play{grid-template-columns:minmax(0,1fr) 20rem;gap:32px}}
.gd-board-card{padding:clamp(14px,3vw,26px);text-align:center;box-shadow:0 40px 80px -40px rgba(18,41,63,.3)}
.gd-board-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin:0 0 12px;font-size:15px;color:var(--ink-soft)}
.gd-board-meta strong{color:var(--ink)}
.gd-board-wrap{width:100%;max-width:34rem;margin:0 auto}
.gd-board{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:18px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gd-board:focus{outline:none}
.gd-board:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.gd-board .gd-tray{fill:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.gd-board .gd-cell{fill:var(--surface);stroke:color-mix(in srgb,var(--ink) 12%,transparent);stroke-width:1.5}
.gd-board .gd-wall{fill:color-mix(in srgb,var(--accent) 16%,var(--surface));stroke:color-mix(in srgb,var(--ink) 18%,transparent);stroke-width:1.5}
.gd-board .gd-hatch-line{stroke:color-mix(in srgb,var(--ink) 38%,transparent);stroke-width:6}
.gd-board .gd-cursor{fill:none;stroke:var(--accent-text);stroke-width:5;stroke-dasharray:10 7}
.gd-status{min-height:1.6em;margin:14px 0 0;font-size:16px;color:var(--ink-soft)}
.gd-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 0}
.gd-actions .btn{min-height:48px}
.gd-solved{margin:16px auto 0;max-width:28rem;padding:18px 22px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--card-line);color:var(--ink)}
.gd-solved[hidden]{display:none}
.gd-solved h2{margin:0 0 6px;padding:0;border:0;font-size:clamp(26px,3vw,32px)}
.gd-solved p{margin:0 0 10px;color:var(--ink)}
.gd-solved .meta{color:var(--ink)}
.gd-side-card{background:transparent;border:1px solid var(--line)}
.gd-side-card h2{margin:24px 0 8px;padding:0;border:0;font-size:22px}
.gd-side-card h2:first-child{margin-top:0}
.gd-side-card ul{padding-left:1.1em;margin:0 0 12px}
.gd-side-card li{margin:5px 0;color:var(--ink-soft);font-size:16px}
.gd-side-card p{font-size:16px;color:var(--ink-soft)}
.gd-rule-art{display:block;width:100%;height:auto;margin:14px auto 18px;border-radius:16px}
.gd-side-card .gd-rule-steps{list-style:none;counter-reset:rule;padding:0;margin:0}
.gd-rule-steps li{counter-increment:rule;display:flex;align-items:baseline;gap:9px;margin:0 0 11px!important;line-height:1.4}
.gd-rule-steps li::before{content:counter(rule);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0b7f73;color:#fffdf7;font-weight:800;font-size:13px}
.gd-side-card .gd-rule-note{font-size:14px;margin:10px 0 0}
.gd-rule-more{margin-top:17px;border-top:1px solid var(--line);padding-top:13px}
.gd-rule-more summary{cursor:pointer;font-weight:800;color:var(--ink);min-height:28px}
.gd-rule-more p{margin:10px 0 0}
.gd-side-card .gd-rule-tips{font-size:14px;margin:14px 0 0}

/* ---------- motion and print ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}html{scroll-behavior:auto !important}}
@media print{
  body{background:#fff;color:#000;font-size:12pt}
  .top,footer,.skip-link,.gd-cta,.gd-crumbs,.gd-controls,.gd-linkbtn,.gd-actions{display:none !important}
  main{padding:0}
  .wrap{max-width:none !important}
  a{color:#000}
  .card,.gd-note{background:none;border:1px solid #999}
  h2{break-after:avoid}
  .gd-moves > li{break-inside:avoid}
  .gd-moves > li::before{background:none;color:#000;border:1px solid #000}
}

/* ==========================================================================
   Article layout v2 (blog-style rollout, 23 Sep): same pattern as the
   Planted Habits and MoonEase pilot, in this site's own palette.
   Title band with topic chips and byline, featured image, sticky
   "On this page" contents with share buttons, in-body visuals, and related
   cards with images. Only pages with <main class="post"> use these rules,
   plus the image cards on the guides index and the free tool's head image.
   ========================================================================== */
main.post{max-width:none;margin:0;padding:0}
.post-band{padding:clamp(36px,6vw,80px) clamp(20px,4vw,56px) clamp(32px,5vw,60px);border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse 70% 90% at 88% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
             linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--paper)),var(--paper))}
.post-band-inner{max-width:1120px;margin:0 auto}
.post-band-text{max-width:820px}
.post-band .gd-crumbs{margin-bottom:22px}
.post-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.post-chips li{margin:0;font-size:13px;line-height:1.2;padding:6px 12px;border-radius:999px;color:var(--ink);
  background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.post-chips li:first-child{color:var(--paper);background:var(--ink);border-color:var(--ink);font-weight:600}
.post-band h1{margin:18px 0 18px;max-width:20ch;text-wrap:balance}
.post-band .lede{max-width:640px}
.post-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:22px 0 0;font-size:14.5px;color:var(--muted)}
.post-byline > span{display:inline-flex;align-items:center;gap:7px}
.post-byline img{width:30px;height:30px;border-radius:50%;background:var(--card)}
.post-byline .post-by{color:var(--ink);font-weight:600}
.post-byline svg{width:16px;height:16px;flex:none;opacity:.8}

.post-layout{max-width:1120px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,4vw,40px) clamp(64px,8vw,120px);display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.post-content{min-width:0;max-width:760px}
.post-content h2[id]{scroll-margin-top:96px}
.post-hero{margin:0 0 36px !important;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--card);border:1px solid var(--line)}
.post-hero img{display:block;width:100%;height:100%;object-fit:cover}

/* Contents + share. Phones: a small closed box above the article. Desktop: sticky left column. */
.post-aside{min-width:0}
.post-toc{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:4px 16px}
.post-toc-title{appearance:none;background:none;border:0;width:100%;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);text-align:left}
.post-toc-title::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.post-toc.is-open .post-toc-title::after{transform:rotate(225deg) translateY(-2px)}
.post-toc.is-collapsible:not(.is-open) ol{display:none}
.post-toc ol{list-style:none;margin:0 0 12px;padding:0;border-left:1px solid var(--line)}
.post-toc li{margin:0}
.post-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14.5px;line-height:1.4;color:var(--muted);text-decoration:none}
.post-toc a:hover{color:var(--ink)}
.post-toc a.is-current{color:var(--ink);border-left-color:var(--accent)}
.post-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.post-share-label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.post-share a,.post-share button{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;padding:0;cursor:pointer;color:var(--ink);background:transparent;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);font:inherit}
.post-share a:hover,.post-share button:hover{border-color:var(--ink);color:var(--ink)}
.post-share svg{width:17px;height:17px}
.post-share-status{font-size:13px;color:var(--accent-text);min-height:1em}
@media (min-width:1080px){
  .post-band-text{margin-left:calc(220px + 56px)}
  .post-layout{grid-template-columns:220px minmax(0,760px);gap:56px;justify-content:center}
  .post-aside{grid-column:1;grid-row:1}
  .post-content{grid-column:2;grid-row:1}
  .post-aside-inner{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding-bottom:12px}
  .post-toc{border:0;background:none;padding:0;border-radius:0}
  .post-toc-title{cursor:default;min-height:0;margin:0 0 12px}
  .post-toc-title::after{display:none}
  .post-toc.is-collapsible:not(.is-open) ol{display:block}
  .post-share{margin-top:28px}
}

/* In-body visuals */
.post-figure{margin:32px 0 !important;padding:clamp(18px,3vw,26px);border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.post-figure-title{font-size:clamp(21px,2.3vw,25px);line-height:1.2;font-weight:600;margin:0 0 4px;color:var(--ink)}
.post-figure-sub{font-size:14.5px;color:var(--muted);margin:0 0 18px}
.post-figure figcaption{font-size:14px;line-height:1.55;color:var(--muted);margin-top:16px}

/* A routine at a glance: one bar split by time, then the moves in order */
.post-time-bar{display:flex;gap:3px;height:44px;border-radius:12px;overflow:hidden;margin:0 0 6px}
.post-time-bar span{display:grid;place-items:center;min-width:0;font-size:12.5px;font-weight:600;color:var(--paper);background:var(--ink)}
.post-time-bar span:nth-child(3n+2){background:var(--accent)}
.post-time-bar span:nth-child(3n){background:color-mix(in srgb,var(--ink) 62%,var(--accent))}
.post-time-scale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin:0 0 18px}
.post-time-list{list-style:none;margin:0;padding:0;display:grid;gap:8px 20px;grid-template-columns:1fr}
@media (min-width:560px){.post-time-list{grid-template-columns:1fr 1fr}}
.post-time-list li{margin:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.35}
.post-time-list b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12.5px;color:var(--paper);background:var(--ink)}
.post-time-list li:nth-child(3n+2) b{background:var(--accent)}
.post-time-list li:nth-child(3n) b{background:color-mix(in srgb,var(--ink) 62%,var(--accent))}
.post-time-list em{font-style:normal;font-size:13px;color:var(--muted);white-space:nowrap}

/* Two sided cards: what is fine and what means stop, or two ways to do something */
.post-pair{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:600px){.post-pair{grid-template-columns:1fr 1fr}}
.post-pair > div{border-radius:16px;padding:16px 18px;background:color-mix(in srgb,var(--accent) 7%,var(--paper));border:1px solid var(--line)}
.post-pair > div.is-stop{background:color-mix(in srgb,var(--ink) 5%,var(--paper))}
.post-pair-title{font-weight:600;margin:0 0 10px;font-size:16.5px;line-height:1.3;display:flex;align-items:center;gap:10px}
.post-pair ul{list-style:none;margin:0;padding:0}
.post-pair li{margin:0;padding:6px 0 6px 28px;position:relative;font-size:15px;line-height:1.45}
.post-pair li::before{content:"";position:absolute;left:2px;top:9px;width:16px;height:16px;border-radius:50%;background:var(--accent)}
.post-pair li::after{content:"";position:absolute;left:7px;top:12px;width:4px;height:7px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.post-pair .is-stop li::before{background:transparent;border:2px solid color-mix(in srgb,var(--ink) 55%,transparent);width:12px;height:12px}
.post-pair .is-stop li::after{display:none}
.post-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;color:var(--paper);background:var(--accent)}
.post-icon svg{width:16px;height:16px}
.is-stop .post-icon{background:var(--ink)}

/* Checklist card */
.post-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px 22px;grid-template-columns:1fr}
@media (min-width:600px){.post-checks.two{grid-template-columns:1fr 1fr}}
.post-checks li{margin:0;position:relative;padding:2px 0 2px 34px;font-size:15.5px;line-height:1.45}
.post-checks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;background:var(--accent)}
.post-checks li::after{content:"";position:absolute;left:8px;top:6px;width:5px;height:10px;border:solid var(--paper);border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.post-checks strong{display:block}

/* Numbered steps */
.post-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr;counter-reset:ps}
@media (min-width:600px){.post-steps{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
.post-steps li{margin:0;counter-increment:ps;position:relative;padding:48px 16px 16px;border-radius:16px;background:color-mix(in srgb,var(--accent) 6%,var(--paper));border:1px solid var(--line);font-size:15px;line-height:1.45}
.post-steps li::before{content:counter(ps);position:absolute;left:16px;top:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--paper);background:var(--ink)}
.post-steps strong{display:block;margin-bottom:2px}

/* Callout */
.post-callout{margin:28px 0;padding:18px 22px;border-radius:16px;border-left:3px solid var(--accent);background:var(--accent-soft)}
.post-callout p{margin:0}
.post-callout .post-callout-lead{font-size:clamp(22px,2.4vw,27px);line-height:1.25;color:var(--ink);margin-bottom:6px}

/* Comparison table */
.post-table-wrap{margin:0;overflow-x:auto}
.post-table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.45}
.post-table th,.post-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.post-table thead th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.post-table tbody th{font-weight:600;color:var(--ink)}
.post-table tbody tr:last-child th,.post-table tbody tr:last-child td{border-bottom:0}
.post-table td{color:var(--ink-soft)}
@media (max-width:520px){.post-table{font-size:14px}.post-table th,.post-table td{padding:10px 7px}}

/* Related cards with images */
.post-related{margin-top:48px}
.post-related h2{margin:0 0 16px;padding-top:24px;font-size:clamp(24px,2.8vw,30px)}
.post-cards{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){.post-cards{grid-template-columns:1fr 1fr}}
.post-cards li{margin:0}
.post-card{display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.post-card:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-2px)}
.post-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--card)}
.post-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.post-card-body{display:block;padding:14px 18px 18px}
.post-card-body .eyebrow{font-size:11.5px;margin-bottom:6px}
.post-card-title{display:block;font-size:19px;line-height:1.3;font-weight:600}
.post-card-meta{display:block;font-size:13px;color:var(--muted);margin-top:8px}

/* Guides index: cards with a picture on top */
.gd-guide-grid .card.has-img{padding:0;overflow:hidden}
.gd-guide-grid .card-img{display:block;aspect-ratio:16/9;margin:0;background:var(--card);overflow:hidden}
.gd-guide-grid .card-img img{display:block;width:100%;height:100%;object-fit:cover}
.gd-guide-grid .card-text{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2.6vw,24px)}

/* Free tool: featured picture beside the heading on wide screens */
.gd-tool-head{display:grid;gap:22px;grid-template-columns:1fr;align-items:center;max-width:var(--max);margin:0 auto}
.gd-tool-head .wrap{margin:0;max-width:640px}
.gd-tool-hero{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:16/9;max-height:220px;background:var(--card);border:1px solid var(--line)}
.gd-tool-hero img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .gd-tool-head{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px}
  .gd-tool-hero{max-height:none}
}

@media print{
  .post-aside,.post-share,.post-related,.post-card-img,.gd-tool-hero{display:none!important}
  .post-band{background:none;padding:0}
  .post-band-text{margin-left:0}
  .post-layout{display:block;padding:0}
  .post-hero{border:0}
  .post-figure{break-inside:avoid}
}

/* Linelet only: solved example boards drawn from real free boards */
.ll-board-row{display:grid;gap:18px;grid-template-columns:1fr;align-items:center}
@media (min-width:620px){.ll-board-row{grid-template-columns:minmax(0,300px) minmax(0,1fr)}}
.ll-board{display:block;width:100%;max-width:300px;height:auto;margin:0 auto}
.ll-sum{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:15px}
.ll-sum li{margin:0;display:inline-flex;align-items:center;gap:6px}
.ll-sum i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--c)}
.ll-sum b{font-weight:700}
.ll-total{font-size:clamp(28px,4vw,36px);font-weight:500;line-height:1.1;margin:10px 0 4px;color:var(--ink)}
/* End markers: colour, number and shape together */
.ll-ends{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.ll-ends > div{text-align:center;border-radius:16px;padding:14px 10px;background:var(--paper);border:1px solid var(--line)}
.ll-ends svg{display:block;width:100%;max-width:260px;height:auto;margin:0 auto 8px}
.ll-ends span{font-size:14px;color:var(--muted)}
.ll-ends .ll-grey svg{filter:grayscale(1)}
/* Packs ladder: board counts as bars */
.ll-packs{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ll-packs li{margin:0;display:grid;grid-template-columns:minmax(0,118px) minmax(0,1fr);gap:10px;align-items:center;font-size:14px;line-height:1.3}
.ll-packs .nm{font-weight:600}
.ll-packs .bar{display:block;min-width:0}
.ll-packs .bar i{display:block;height:14px;border-radius:5px;width:calc(var(--n) / 60 * 100%);background:color-mix(in srgb,var(--cord-blue) 55%,var(--surface))}
.ll-packs .free .bar i{background:var(--cord-teal)}
.ll-packs .bar small{display:block;font-size:12.5px;line-height:1.3;color:var(--muted);margin-top:2px}
.ll-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);margin:14px 0 0}
.ll-key span{display:inline-flex;align-items:center;gap:6px}
.ll-key i{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--c)}
/* Level split: one bar of 560 */
.ll-split{display:flex;height:40px;border-radius:12px;overflow:hidden;gap:3px;margin:0 0 12px}
.ll-split span{display:grid;place-items:center;min-width:0;font-size:13px;font-weight:700;color:var(--ink)}
.ll-split .e{background:var(--cord-yellow)}
.ll-split .m{background:color-mix(in srgb,var(--cord-blue) 45%,var(--surface))}
.ll-split .a{background:var(--ink);color:var(--paper)}
.ll-split-legend{list-style:none;margin:0;padding:0;display:grid;gap:6px 18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));font-size:14.5px}
.ll-split-legend li{margin:0;display:flex;align-items:center;gap:8px}
.ll-split-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--c)}
/* Three kinds of thinking */
.ll-kinds{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:600px){.ll-kinds{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ll-kinds > div{border-radius:16px;padding:14px 16px;background:var(--paper);border:1px solid var(--line)}
.ll-kinds .ll-kind-title{font-weight:700;margin:0 0 8px;font-size:15.5px}
.ll-kinds ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ll-kinds li{margin:0;font-size:13.5px;padding:5px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.ll-kinds li.ours{background:var(--panel);border-color:transparent;color:#fffdf7;font-weight:700}

/* Linelet palette (4c4ef01c9): cream cards carry the warm card border */
.post-figure,.post-card,.post-hero,.gd-tool-hero,.post-table-wrap{border-color:var(--card-line)}
.post-toc{background:var(--card);border-color:var(--card-line)}
@media (min-width:1080px){.post-toc{background:none}}
.post-card-img,.gd-guide-grid .card-img{background:color-mix(in srgb,var(--cord-blue) 10%,var(--paper))}
.post-figure-title{color:var(--ink)}

/* ==========================================================================
   Light/dark switch (23 Sep): the same sun/moon button, head script and
   'linelet-theme' key as index.html, so a visitor's choice carries between
   the landing page and the guides. Light (the app's Paper theme) stays the
   default; dark is the app's Night theme, the palette index.html uses.
   Dark rules are screen only, so print always comes out light on paper.
   ========================================================================== */
:root{color-scheme:light}
.top nav{align-items:center}
.mode{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:0;cursor:pointer;background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--card-line),0 6px 14px -8px rgba(18,41,63,.45);transition:transform .2s}
.mode:hover{transform:rotate(-12deg)}
.mode:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.mode svg{width:22px;height:22px}
.mode .sun{display:none}
[data-theme="dark"] .mode .sun{display:block}[data-theme="dark"] .mode .moon{display:none}

@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#0e1a2f;--ink:#eef4ff;--accent:#8aa6ff;--accent-text:#8aa6ff;--teal:#3de0d0;
    --card:#172c4d;--card-line:#2c4b70;--cta:#172c4d;--surface:#172c4d;
    --panel:radial-gradient(90% 80% at 10% 0%,rgba(61,224,208,.16),transparent 60%),linear-gradient(160deg,#172c4d 0%,#29486a 100%);
    --muted:#b3c3e0;
    --line:rgba(190,224,255,.14);
    --accent-soft:color-mix(in srgb,var(--accent) 14%,var(--paper));
  }
  body{transition:background-color .3s}
  /* :where() keeps this at plain-element strength, so class rules (nav pills, cards, buttons) keep their own colours. */
  :where(:root[data-theme="dark"]) a{color:var(--accent)}
  :root[data-theme="dark"] .mode{box-shadow:inset 0 0 0 1px var(--card-line),0 6px 14px -8px rgba(0,0,0,.6)}
  :root[data-theme="dark"] .top{border-bottom-color:var(--line)}
  :root[data-theme="dark"] .gd-board-card{box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
  :root[data-theme="dark"] .gd-cta{border:1px solid rgba(159,180,216,.22)}
  :root[data-theme="dark"] .gd-cta .btn{background:#eef4ff;border-color:#eef4ff;color:#0e1a2f}
  :root[data-theme="dark"] .post-band{background:radial-gradient(ellipse 70% 90% at 88% 0%,rgba(61,224,208,.12),transparent 70%),linear-gradient(180deg,#132440,var(--paper))}
  :root[data-theme="dark"] .ll-split .e{color:#12293f}
  /* The footer "More apps" list carries inline Paper-theme colours from privacy.html (re-synced at deploy),
     so it needs !important to switch to the Night palette, the way index.html's footer looks in dark. */
  :root[data-theme="dark"] footer{border-top-color:var(--line)}
  :root[data-theme="dark"] footer nav[aria-label="More apps from JPott Studios"]{color:var(--muted) !important}
  :root[data-theme="dark"] footer nav[aria-label="More apps from JPott Studios"] a{color:var(--ink) !important}
  :root[data-theme="dark"] footer nav[aria-label="More apps from JPott Studios"] a span[style*="color"]{color:var(--muted) !important}
  /* Board pictures inside the articles are drawn with fixed Paper colours. In dark they take the same
     Night board colours as the free daily puzzle (tray, cells, walls), while the coloured lines and
     numbered ends stay exactly as they are. */
  :root[data-theme="dark"] .post-content svg [fill="#dee4f1"]{fill:color-mix(in srgb,var(--accent) 16%,var(--surface))}
  :root[data-theme="dark"] .post-content svg [fill="#fffdf7"]{fill:var(--surface)}
  :root[data-theme="dark"] .post-content svg [stroke="#dfe3e8"]{stroke:color-mix(in srgb,var(--ink) 12%,transparent)}
  :root[data-theme="dark"] .post-content svg [stroke="#a5acb1"]{stroke:rgba(238,244,255,.38)}
}

.post-photo{margin:36px 0;padding:0;border:0;background:none}.post-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px}.post-photo figcaption{text-align:left}

/* article calls to action (article_ctas.py) */
.jp-mid-cta{display:flex;align-items:center;gap:16px;margin:36px 0;padding:18px 20px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.jp-mid-cta img{flex:none;width:56px;height:56px;border-radius:14px}
.jp-mid-cta .jp-mid-txt{flex:1;min-width:0}
.jp-mid-cta .jp-mid-t{margin:0;font-weight:700;font-size:17px;line-height:1.3}
.jp-mid-cta .jp-mid-s{margin:2px 0 0;font-size:14.5px;line-height:1.45;opacity:.78}
.jp-mid-cta .btn{flex:none;white-space:nowrap}
@media (max-width:560px){.jp-mid-cta{flex-wrap:wrap}.jp-mid-cta .btn{width:100%}}
.jp-cta-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:14px}
.jp-cta-more .jp-badge{display:inline-flex;line-height:0;border-radius:8px}
.jp-cta-more .jp-badge img{height:44px;width:auto}
.jp-cta-more .jp-web{font-size:14.5px;font-weight:600;color:inherit;text-underline-offset:3px}
.jp-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.18);transform:translateY(140%);transition:transform .35s ease}
.jp-sticky.on{transform:none}
.jp-sticky img{width:36px;height:36px;border-radius:9px;flex:none}
.jp-sticky .jp-st-name{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-sticky .btn{min-height:40px;padding:8px 16px;white-space:nowrap}
.jp-sticky .jp-st-x{flex:none;width:36px;height:36px;border:0;background:none;color:inherit;font-size:22px;line-height:1;cursor:pointer;opacity:.6}
@media (min-width:761px){.jp-sticky{display:none}}
@media (prefers-reduced-motion:reduce){.jp-sticky{transition:none}}

/* ---------- one matching social video near the top of each article ---------- */
main figure.jp-video,article figure.jp-video{margin:2.2rem auto !important;padding:0 !important;max-width:360px;background:none !important;border:0 !important;text-align:center}
figure.jp-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:18px;background:#000;border:1px solid var(--line);box-shadow:0 10px 30px rgba(18,41,63,.28)}
figure.jp-video figcaption{margin-top:.8rem;font-size:1rem;line-height:1.4;color:var(--muted)}
@media print{figure.jp-video{display:none !important}}
.jp-top-cta{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:10px 12px;border-radius:16px;background:var(--card);border:1px solid var(--line);max-width:560px}
.jp-top-cta img{flex:none;width:40px;height:40px;border-radius:10px}
.jp-top-cta .jp-top-txt{flex:1;min-width:0;font-size:14.5px;line-height:1.35}
.jp-top-cta .jp-top-txt b{display:block;font-size:15.5px}
.jp-top-cta .btn{flex:none;white-space:nowrap;min-height:40px;padding:8px 16px}
@media (max-width:420px){.jp-top-cta{flex-wrap:wrap}.jp-top-cta .btn{width:100%}}