/* Blog article — BASE for every width (mobile first). OWNER: ARTICLE-UX. Linked media="all"; article.desktop.css adds the wide layout.
   Founder locks: no divider lines (only real cards have an outline), one type scale (mobile h1 30 · h2 24 · h3 19 · body 18/1.65),
   app tokens only (css/base.css). Every selector starts with .art or .art-main so nothing else on the site changes. */

.art-main { display: block; background: #fff; overflow-x: clip; }
.art { --col: 700px; --pad: var(--gutter); position: relative; padding-bottom: 72px; color: var(--ink); }
.art-col { width: 100%; max-width: calc(var(--col) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.art .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- XP reading bar (fixed under the header, shows once you start reading) ---------- */
.art .xp {
  --p: 0; position: fixed; z-index: 90; left: 0; right: 0; top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: 6px var(--gutter) 10px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 8px 16px -12px rgba(15, 26, 43, .16); transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.art .xp.is-on { opacity: 1; transform: none; pointer-events: auto; }
.art .xp-pill { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto; }
.art .xp-label { flex: none; font-size: 12.5px; line-height: 1; font-weight: 600; color: var(--accent-edge); letter-spacing: .01em; }
.art .xp-track { position: relative; flex: 1; height: 10px; margin: 0 14px; border-radius: 999px; background: var(--tint); }
.art .xp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, var(--sky), var(--accent)); box-shadow: 0 2px 8px rgba(var(--accent-rgb), .3); }
.art .xp-tip { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 0; height: 0; }
.art .xp-mira { position: absolute; left: -16px; top: -17px; width: 32px; height: auto; max-width: none; filter: drop-shadow(0 3px 4px rgba(15, 26, 43, .18)); transform-origin: 50% 90%; }
.art .xp-bubble { position: absolute; top: 22px; right: -12px; white-space: nowrap; padding: 6px 12px; border-radius: 12px; background: var(--deep); color: #fff;
  font-size: 13px; font-weight: 500; line-height: 1.2; box-shadow: var(--depth-deep); opacity: 0; transform: translateY(-4px) scale(.9); transition: opacity .3s var(--ease), transform .3s var(--spring); pointer-events: none; }
.art .xp.is-done .xp-bubble { opacity: 1; transform: none; }
.art .xp-pts { flex: none; min-width: 58px; text-align: right; font-size: 13.5px; font-weight: 500; color: var(--secondary); font-variant-numeric: tabular-nums; }
.art .xp-pts b { font-weight: 700; color: var(--ink); font-size: 15px; }
.art .xp-pts.bump { animation: art-bump .5s var(--spring); }
.art .xp-mira.hop { animation: art-hop .7s var(--spring); }
@media (max-width: 359.98px) { .art .xp-label { display: none; } }

/* ---------- hero ---------- */
.art-hero { position: relative; padding: 20px 0 8px; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-0) 46%, #fff 100%); }
.art-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; line-height: 1.4; color: var(--secondary); }
.art-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.art-crumbs li + li::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); border-radius: 1px; opacity: .55; margin-right: 2px; }
.art-crumbs a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; color: var(--accent-edge); }
.art-crumbs [aria-current] { color: var(--secondary); }
.art-kicker { display: block; margin-top: 16px; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--accent-edge); letter-spacing: .01em; }
.art-title { margin-top: 14px; font-size: 30px; line-height: 1.16; font-weight: 600; letter-spacing: -0.024em; color: var(--ink); text-wrap: balance; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--secondary); }
.art-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tint-line); }
.art-thumb { width: calc(100% - var(--pad) * 2); max-width: 920px; margin: 22px auto 0; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden;
  background: var(--sky-0); box-shadow: var(--depth-2); }
.art-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* the tokens this page uses for its little markers (no lines, ever) */
.art, .art-toast { --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c1 5.9 4.6 9.6 11 11-6.4 1.4-10 5.1-11 11-1-5.9-4.6-9.6-11-11C7.4 10.6 11 6.9 12 1z'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h.5A2.5 2.5 0 0 1 20 12.5v7A2.5 2.5 0 0 1 17.5 22h-11A2.5 2.5 0 0 1 4 19.5v-7A2.5 2.5 0 0 1 6.5 10H7zm2.5 0h5V8a2.5 2.5 0 0 0-5 0v2z'/%3E%3C/svg%3E"); }

/* ---------- the short answer + table of contents ---------- */
.art-lead { margin-top: 28px; }
.art-answer { position: relative; padding: 20px 20px 22px; border-radius: 24px; background: #fff; border: 1px solid var(--edge-tint); box-shadow: var(--highlight), var(--tint-sky-shadow); }
.art-answer-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--accent-edge); margin-bottom: 8px; }
.art-answer p { font-size: 18px; line-height: 1.65; font-weight: 400; color: var(--ink); text-wrap: pretty; }

.art-toc { width: calc(100% - var(--pad) * 2); max-width: var(--col); margin: 20px auto 0; padding: 18px 12px 14px; border-radius: 24px; background: var(--tint); }
.art-toc-title { padding: 0 8px 6px; font-size: 15px; font-weight: 600; color: var(--deep); }
.art-toc ol { counter-reset: toc; display: grid; gap: 2px; }
.art-toc a { counter-increment: toc; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 8px; border-radius: 14px;
  font-size: 16px; line-height: 1.35; font-weight: 450; color: var(--ink); transition: background .2s var(--ease); }
.art-toc a:active { background: rgba(255, 255, 255, .7); }
@media (hover: hover) { .art-toc a:hover { background: rgba(255, 255, 255, .75); } }
.art-toc .toc-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--accent-edge);
  font-size: 13.5px; font-weight: 700; box-shadow: var(--depth-1); transition: background .3s var(--ease), transform .4s var(--spring); }
.art-toc .toc-n::before { content: counter(toc); }
.art-toc a.is-read .toc-n { background: var(--leaf); color: #fff; transform: rotate(-6deg); }
.art-toc a.is-read .toc-n::before { content: ""; width: 14px; height: 14px; background: #fff; -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.art-toc-hint { margin-top: 6px; padding: 0 8px; font-size: 13.5px; line-height: 1.4; color: var(--secondary); }

/* ---------- body type ---------- */
.art-body { counter-reset: sec; margin-top: 44px; }
.art-sec { position: relative; scroll-margin-top: calc(var(--header-h) + 64px); }
.art-sec + .art-sec { margin-top: 60px; }
.art-sec-end { display: block; height: 1px; }
.art-body p, .art-body li { font-size: 18px; line-height: 1.65; font-weight: 350; color: var(--body); text-wrap: pretty; }
.art-body p + p { margin-top: 18px; }
.art-body b, .art-body strong { font-weight: 600; color: var(--ink); }
.art-body a:not(.m-btn):not(.m-link) { color: var(--accent); font-weight: 500; border-radius: 4px; transition: background .2s var(--ease), color .2s var(--ease); }
@media (hover: hover) { .art-body a:not(.m-btn):not(.m-link):hover { background: var(--tint); color: var(--accent-edge); } }

/* h2: bold deep blue with a tilted, numbered coin (the same coin as the table of contents) */
.art-sec > h2 { counter-increment: sec; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px;
  font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.018em; color: var(--deep); text-wrap: balance; }
.art-sec > h2::before { content: counter(sec); flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -2px; border-radius: 12px;
  background: var(--logo); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 0; transform: rotate(-7deg); box-shadow: var(--tint-sky-shadow); }
.art-sec:nth-of-type(4n+2) > h2::before { background: var(--leaf); box-shadow: var(--tint-mint-shadow); transform: rotate(6deg); }
.art-sec:nth-of-type(4n+3) > h2::before { background: var(--coral); box-shadow: var(--tint-coral-shadow); }
.art-sec:nth-of-type(4n+4) > h2::before { background: var(--deep-bright); box-shadow: var(--tint-sky-shadow); transform: rotate(5deg); }
.art-sec.is-read > h2::before { animation: art-coin .6s var(--spring); }

/* h3: blue, with a small gold sparkle */
.art-body h3 { display: flex; align-items: flex-start; gap: 10px; margin: 30px 0 10px; font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--accent-edge); text-wrap: balance; }
.art-body h3::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; background: var(--gold); -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; }
.art-sec > h2 + h3 { margin-top: 8px; }

/* lists: coloured dots and number coins, never rules */
.art-list, .art-quotes, .art-feats { display: grid; gap: 10px; margin: 16px 0 0; }
.art-list li, .art-feats li { position: relative; padding-left: 26px; }
.art-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(108, 192, 252, .18); }
.art-feats { gap: 14px; }
.art-feats li::before { content: ""; position: absolute; left: 0; top: .32em; width: 17px; height: 17px; background: var(--logo); -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; }
.art-quotes li { padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .8); color: var(--ink); font-weight: 400; }
.art-steps { counter-reset: st; display: grid; gap: 10px; margin: 14px 0 18px; }
.art-steps li { counter-increment: st; position: relative; padding-left: 42px; min-height: 30px; }
.art-steps li::before { content: counter(st); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--tint); color: var(--accent-edge); font-size: 14px; font-weight: 700; }
.art-more { margin-top: 18px; }

/* ---------- callout cards (pastel tints, a small label; no borders) ---------- */
.callout { --c: var(--accent-edge); margin: 26px 0; padding: 18px 20px 20px; border-radius: 22px; background: var(--tint); }
.callout.is-sun { --c: #8A5A00; background: var(--pale-sun); box-shadow: var(--tint-sun-shadow); }
.callout.is-mint { --c: #1D6E47; background: var(--pale-mint); box-shadow: var(--tint-mint-shadow); }
.callout.is-coral { --c: #A63A2F; background: var(--pale-coral); box-shadow: var(--tint-coral-shadow); }
.callout.is-sky { background: var(--tint); box-shadow: var(--tint-sky-shadow); }
.art-body .callout-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--c); }
.callout-label img { width: 36px; height: auto; margin: -8px 0 -6px -4px; }
.callout-ico { flex: none; width: 18px; height: 18px; background: var(--c); -webkit-mask: var(--sparkle) center / contain no-repeat; mask: var(--sparkle) center / contain no-repeat; }
.art-body .callout p:not(.callout-label) { color: var(--ink); font-weight: 400; }
.callout .art-list, .callout .art-quotes { margin-top: 4px; }
.callout .art-list li { color: var(--ink); font-weight: 400; }
.callout.is-sun .art-list li::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(245, 164, 0, .16); }

/* ---------- figures: a real app screen, placed on a soft sky ---------- */
.art-fig { margin: 30px 0; padding: 30px 16px 18px; border-radius: 28px; background: linear-gradient(180deg, var(--sky-0), var(--sky-1)); text-align: center; }
.art-fig.is-sun { background: linear-gradient(180deg, #F5F8FF, #E6ECFA); }
.art-fig.is-mint { background: linear-gradient(180deg, #F3FBF7, var(--pale-mint)); }
.art-fig-stage { position: relative; display: flex; justify-content: center; }
.art-fig-stage::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: min(230px, 64%); height: 24px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 26, 43, .2), rgba(15, 26, 43, 0)); pointer-events: none; }
.art-fig .phone { --w: min(250px, 66vw) !important; position: relative; z-index: 1; }
.art-body .art-fig figcaption { margin-top: 26px; font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--secondary); text-wrap: balance; }

/* ---------- shared moment card ---------- */
.moment { position: relative; margin: 30px 0; padding: 20px 18px; border-radius: 28px; background: #fff; border: 1px solid var(--edge); box-shadow: var(--highlight), var(--depth-2); }
.moment-head { margin-bottom: 14px; }
.art-body .moment-title { margin-top: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ink); letter-spacing: -0.012em; }
.art-body .moment-sub { margin-top: 4px; font-size: 15.5px; line-height: 1.45; color: var(--secondary); }
.art-body .moment p + p { margin-top: 0; }
.art-body .moment-privacy { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--soft); font-size: 13.5px; line-height: 1.45; font-weight: 400; color: var(--secondary); }
.lock-ico { flex: none; width: 14px; height: 14px; margin-top: 2px; background: var(--leaf); -webkit-mask: var(--lock) center / contain no-repeat; mask: var(--lock) center / contain no-repeat; }
.moment-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.moment-actions:not(:has(> :not([hidden]))) { display: none; }

/* buttons inside moments */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 500; box-shadow: var(--shadow-button); transition: transform .18s var(--ease), opacity .2s; }
.m-btn:active { transform: scale(.96); }
.m-btn.is-soft { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1px var(--edge), var(--depth-1); }
.m-btn[hidden] { display: none; }
.m-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--accent-edge);
  font-size: 14.5px; font-weight: 500; box-shadow: var(--depth-1); transition: transform .18s var(--ease); }
.m-chip:active { transform: scale(.95); }
.m-chip.is-plain { background: transparent; box-shadow: none; color: #8A5A00; }
.m-chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-chip svg.spin { animation: art-spin .6s var(--ease); }
.m-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; padding: 0 16px; border-radius: 999px; background: var(--tint); color: var(--accent-edge); font-size: 15px; font-weight: 600; }
.m-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); border-radius: 1px; }
.m-link[hidden] { display: none; }

/* Mira and her speech bubble */
.mira-says { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.mira-says img { flex: none; width: 58px; height: auto; filter: var(--art-drop); }
.mira-says img.pop { animation: art-pop .55s var(--spring); }
.art-body .mira-bubble { position: relative; flex: 1; min-width: 0; padding: 10px 14px; border-radius: 16px; background: var(--tint); font-size: 15.5px; line-height: 1.4; font-weight: 500; color: var(--deep); }
.mira-bubble::before { content: ""; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; background: var(--tint); transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.mira-bubble.pop { animation: art-pop-soft .45s var(--spring); }

/* ---------- mood tap ---------- */
.moment-mood { background: linear-gradient(180deg, #fff, var(--sky-0)); }
.mood-faces { display: flex; justify-content: space-between; gap: 4px; }
.mood-face { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 6px; border-radius: 18px;
  font-size: 13px; font-weight: 500; color: var(--secondary); transition: background .25s var(--ease), opacity .25s, color .25s; }
.mood-face img { width: min(52px, 100%); height: auto; transition: transform .35s var(--spring); }
.mood-face:active img { transform: scale(.9); }
.moment-mood.is-picked .mood-face { opacity: .5; }
.moment-mood.is-picked .mood-face[aria-pressed="true"] { opacity: 1; background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--depth-1); }
.mood-face[aria-pressed="true"] img { transform: scale(1.14) rotate(-6deg); }
@media (hover: hover) { .mood-face:hover img { transform: scale(1.08); } }

/* prompt groups (the mood picked above makes its group glow) */
.prompt-groups { display: grid; gap: 12px; margin-top: 24px; }
.prompt-group { padding: 16px 18px 18px; border-radius: 22px; background: var(--soft); transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--spring); scroll-margin-top: calc(var(--header-h) + 72px); }
.prompt-group:nth-child(1) { background: var(--pale-sun); }
.prompt-group:nth-child(2) { background: var(--pale-mint); }
.prompt-group:nth-child(3) { background: var(--tint); }
.prompt-group:nth-child(4) { background: var(--pale-coral); }
.prompt-group:nth-child(5) { background: #EEF0FA; }
.prompt-group.is-match { transform: scale(1.015); box-shadow: 0 0 0 3px var(--accent), var(--depth-2); }
.art-body .prompt-group h3 { align-items: center; margin: 0 0 8px; color: var(--ink); font-size: 18px; }
.art-body .prompt-group h3::before { display: none; }
.prompt-group h3 img { width: 30px; height: 30px; }
.prompt-group ol { display: grid; gap: 6px; }
.art-body .prompt-group li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.5; color: var(--ink); font-weight: 400; }
.prompt-group ol { counter-reset: pg; }
.prompt-group ol[start="4"] { counter-reset: pg 3; } .prompt-group ol[start="7"] { counter-reset: pg 6; }
.prompt-group ol[start="10"] { counter-reset: pg 9; } .prompt-group ol[start="13"] { counter-reset: pg 12; }
.prompt-group li { counter-increment: pg; }
.prompt-group li::before { content: counter(pg); position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--secondary); font-size: 12px; font-weight: 700; }

/* ---------- write your line ---------- */
.line-prompt { padding: 14px 16px 10px; border-radius: 20px; background: var(--pale-sun); }
.line-prompt-tag { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A5A00; }
.art-body .line-prompt-q { margin-top: 4px; font-size: 19px; line-height: 1.35; font-weight: 500; color: var(--ink); }
.line-prompt.is-none .line-prompt-q { color: var(--secondary); font-weight: 400; }
.line-prompt-q.swap { animation: art-swap .4s var(--ease); }
.line-prompt-btns { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 8px -6px 0; }
.line-prompt-btns [hidden] { display: none; }
.line-input { display: block; width: 100%; margin-top: 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--edge); background: #fff; resize: vertical; min-height: 96px;
  font: 400 18px/1.5 "Lexend", system-ui, sans-serif; color: var(--ink); box-shadow: inset 0 1px 2px rgba(15, 26, 43, .04); transition: border-color .2s, box-shadow .2s; }
.line-input::placeholder { color: #8A909C; }
.line-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14); }
.art-body .line-count { min-height: 22px; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--leaf); font-weight: 500; }
.line-save { width: 100%; margin-top: 4px; }
.line-saved-card { position: relative; padding: 16px 18px 18px; border-radius: 22px; background: #fff; border: 1px solid var(--edge-sun); box-shadow: var(--highlight), var(--tint-sun-shadow); }
.line-saved.pop .line-saved-card { animation: art-pop .6s var(--spring); }
.art-body .line-saved-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #8A5A00; }
.line-saved-face { width: 26px; height: 26px; }
.line-saved-face[hidden] { display: none; }
.art-body .line-saved-q { margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--secondary); }
.art-body .line-saved-text { margin-top: 6px; font-size: 19px; line-height: 1.45; font-weight: 450; color: var(--ink); overflow-wrap: anywhere; }
.sparkled { animation: none; box-shadow: 0 0 0 4px rgba(253, 189, 49, .5), var(--depth-2) !important; }

/* ---------- quiz ---------- */
.quiz-dots { display: flex; gap: 6px; margin: 14px 0 10px; }
.quiz-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tint-line); transition: background .3s, width .3s var(--ease); }
.quiz-dot.is-now { width: 26px; border-radius: 999px; background: var(--accent); }
.quiz-dot.is-done { background: var(--leaf); }
.art-body .quiz-ask { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.quiz-opts { display: grid; gap: 8px; }
.quiz-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--soft); text-align: left;
  font-size: 16px; line-height: 1.4; font-weight: 400; color: var(--ink); transition: background .2s var(--ease), transform .18s var(--ease), color .2s; }
.quiz-opt:active { transform: scale(.98); }
@media (hover: hover) { .quiz-opt:not([aria-disabled]):hover { background: var(--tint); } }
.quiz-letter { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--accent-edge); font-size: 13.5px; font-weight: 700; box-shadow: var(--depth-1); }
.quiz-opt.is-right { background: var(--pale-mint); color: #14532F; font-weight: 500; }
.quiz-opt.is-right .quiz-letter { background: var(--leaf); color: #fff; font-size: 0; }
.quiz-opt.is-right .quiz-letter::before { content: ""; width: 14px; height: 14px; background: #fff; -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.quiz-opt.is-wrong { background: var(--pale-coral); color: #8A2E25; }
.quiz-opt.is-wrong .quiz-letter { background: var(--coral); color: #fff; }
.quiz-opt[aria-disabled]:not(.is-right) { opacity: .7; cursor: default; }
.quiz-opt.shake { animation: art-shake .4s var(--ease); }
.quiz-result { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--pale-mint); }
.quiz-result[hidden] { display: none; }
.quiz-result img { width: 52px; height: 52px; animation: art-pop .6s var(--spring); }
.art-body .quiz-result p { font-size: 16px; color: #14532F; }

/* ---------- busy-day toggle ---------- */
.moment-busy { padding: 14px; background: linear-gradient(180deg, #fff, #FBFDFF); }
.busy-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px 8px 10px; border-radius: 18px; background: var(--pale-sun); text-align: left;
  font-size: 16px; line-height: 1.35; font-weight: 600; color: #6B4600; transition: background .25s var(--ease); }
.busy-switch { flex: none; position: relative; width: 50px; height: 30px; border-radius: 999px; background: #E9DDBE; transition: background .25s var(--ease); }
.busy-switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .18); transition: transform .3s var(--spring); }
.busy-toggle[aria-pressed="true"] { background: var(--tint); color: var(--accent-edge); }
.busy-toggle[aria-pressed="true"] .busy-switch { background: var(--accent); }
.busy-toggle[aria-pressed="true"] .busy-switch span { transform: translateX(20px); }
.busy-full { padding: 16px 6px 4px; }
.busy-full[hidden], .busy-panel[hidden] { display: none; }
.busy-panel { margin-top: 12px; padding: 16px; border-radius: 22px; background: var(--pale-mint); }
.busy-panel.pop { animation: art-pop-soft .45s var(--spring); }
.art-body .busy-title { font-size: 19px; font-weight: 600; color: #14532F; }
.art-body .busy-sub { margin-top: 2px; font-size: 14.5px; color: #2F6B4B; }
.busy-steps { display: grid; gap: 8px; margin-top: 12px; }
.busy-step { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px 8px 10px; border-radius: 16px; background: #fff; text-align: left;
  font-size: 16px; font-weight: 500; color: var(--ink); box-shadow: var(--depth-1); transition: transform .18s var(--ease), background .2s; }
.busy-step:active { transform: scale(.98); }
.busy-check { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pale-mint); box-shadow: inset 0 0 0 2px var(--mint); transition: background .25s, box-shadow .25s; }
.busy-step[aria-pressed="true"] { background: #F7FDFA; color: #14532F; }
.busy-step[aria-pressed="true"] .busy-check { background: var(--leaf); box-shadow: none; }
.busy-step[aria-pressed="true"] .busy-check::before { content: ""; width: 14px; height: 14px; background: #fff; -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.busy-step.tick .busy-check { animation: art-pop .45s var(--spring); }
.busy-panel .mira-bubble { background: #fff; }
.busy-panel .mira-bubble::before { background: #fff; }

/* ---------- FAQ (real cards, so they may have an outline) ---------- */
.faq-list { display: grid; gap: 10px; }
.faq-item { border-radius: 20px; background: #fff; border: 1px solid var(--edge); box-shadow: var(--highlight), var(--depth-1); transition: background .25s var(--ease), border-color .25s; }
.faq-item[open] { background: var(--selected); border-color: var(--edge-tint); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 14px 14px 14px 18px; cursor: pointer; list-style: none;
  font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--ink); border-radius: 20px; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230062B8' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .3s var(--spring), background-color .25s; }
.faq-item[open] .faq-q::after { transform: rotate(45deg); background-color: #fff; }
.faq-a { padding: 0 18px 18px; }
.art-body .faq-a p { font-size: 17px; line-height: 1.6; }

/* ---------- finish card (the app's deep-blue celebration) ---------- */
.art-finish { position: relative; margin-top: 64px; padding: 28px 18px 26px; border-radius: 32px; overflow: hidden; text-align: center; color: #fff;
  background: radial-gradient(120% 70% at 50% 0%, var(--deep-bright) 0%, rgba(61, 143, 230, 0) 70%), linear-gradient(180deg, #1552B4, var(--deep)); box-shadow: var(--depth-deep); }
.finish-art { width: 150px; height: auto; margin: 0 auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .28)); }
.finish-art.pop { animation: art-pop .8s var(--spring); }
.finish-title { margin-top: 14px; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.finish-line { margin: 10px auto 0; max-width: 34ch; font-size: 17px; line-height: 1.55; color: var(--deep-body); text-wrap: pretty; }
.finish-xp { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 14.5px; color: var(--deep-body); }
.finish-xp b { color: #fff; font-size: 17px; }
.finish-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--deep-line); }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; margin: 22px 0 0; padding: 16px 8px; border-radius: 24px; background: rgba(255, 255, 255, .08); }
.shelf-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shelf-item img { width: 48px; height: 48px; object-fit: contain; opacity: .5; transition: opacity .3s, transform .4s var(--spring); }
.shelf-item.is-earned img { opacity: 1; transform: scale(1.06); }
.shelf-name { font-size: 11.5px; line-height: 1.25; font-weight: 500; color: rgba(207, 230, 255, .6); text-wrap: balance; }
.shelf-item.is-earned .shelf-name { color: #fff; }
.finish-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }
.finish-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 15px; font-weight: 500; }
@media (hover: hover) { .finish-link:hover { background: rgba(255, 255, 255, .2); } }
.finish-small { font-size: 13.5px; line-height: 1.4; color: var(--deep-body); }
.art-finish :focus-visible { outline-color: #fff; }

/* ---------- related ---------- */
.art-related { margin-top: 48px; }
.related-title { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.018em; color: var(--deep); margin-bottom: 14px; }
.art-related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rel-card { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 14px 16px; border-radius: 22px; background: var(--tint); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.rel-card.is-sun { background: var(--pale-sun); } .rel-card.is-mint { background: var(--pale-mint); } .rel-card.is-coral { background: var(--pale-coral); }
.rel-card span { font-size: 14.5px; line-height: 1.4; color: var(--body); }
.rel-card b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.rel-card:active { transform: scale(.97); }
@media (hover: hover) { .rel-card:hover { transform: translateY(-3px); box-shadow: var(--depth-2); } }

/* ---------- toast + confetti (appended to body by js/article.js) ---------- */
.art-toast { position: fixed; z-index: 120; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
  width: fit-content; max-width: 440px; margin: 0 auto; padding: 8px 16px 8px 8px; border-radius: 18px; background: #fff; border: 1px solid var(--edge); box-shadow: var(--highlight), var(--depth-3);
  font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--ink); opacity: 0; transform: translateY(20px); pointer-events: none; }
.art-toast img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.art-toast span { flex: 1; min-width: 0; }
.art-toast b { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--tint); color: var(--accent-edge); font-size: 13px; font-weight: 700; }
.art-toast b:empty { display: none; }
.art-toast.is-on { animation: art-toast 2.1s var(--ease) forwards; }
.confetti { position: fixed; inset: 0; z-index: 130; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; width: 8px; height: 12px; margin: -6px 0 0 -4px; border-radius: 2px; animation: art-conf 1.5s cubic-bezier(.2, .7, .3, 1) forwards; }

/* ---------- motion ---------- */
@keyframes art-bump { 40% { transform: scale(1.22); } }
@keyframes art-hop { 30% { transform: translateY(-10px) rotate(-12deg); } 60% { transform: translateY(0) rotate(6deg); } }
@keyframes art-pop { 0% { transform: scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes art-pop-soft { 0% { transform: scale(.94); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes art-coin { 0% { transform: scale(.7) rotate(-30deg); } 100% { transform: scale(1) rotate(-7deg); } }
@keyframes art-swap { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes art-toast { 0% { opacity: 0; transform: translateY(20px) scale(.96); } 12%, 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes art-conf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 45% { transform: translate(calc(var(--x) * .85), var(--y)) rotate(calc(var(--r) * .5)); opacity: 1; }
  100% { transform: translate(var(--x), calc(var(--y) + 240px)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .art *, .art *::before, .art-toast { animation: none !important; transition: none !important; }
  .art-toast.is-on { opacity: 1; transform: none; }
  .confetti { display: none; }
}
.art .nw { white-space: nowrap; }

/* ---------- SEO-BLOG: author link, topic tags, older/newer pager (no lines: tints and spacing only) ---------- */
.art-author { color: var(--accent-edge); font-weight: 600; border-radius: 6px; }
@media (hover: hover) { .art-author:hover { background: var(--tint); } }
.art-meta > span { display: inline-flex; align-items: center; gap: 4px; }

.art-body .art-tags { margin-top: 40px; }
.art-body .art-tags-label { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--secondary); letter-spacing: .01em; margin-bottom: 10px; }
.art-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.art-body .art-tag-list li { font-size: inherit; line-height: inherit; }
.art-body .art-tag-list a.art-tag { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600;
  background: var(--tint); color: var(--accent-edge); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.art-body .art-tag-list a.art-tag.is-mint { background: var(--pale-mint); color: #1C7A4E; }
.art-body .art-tag-list a.art-tag.is-sun { background: var(--pale-sun); color: var(--ink); }
.art-body .art-tag-list a.art-tag:active { transform: scale(.96); }
@media (hover: hover) { .art-body .art-tag-list a.art-tag:hover { transform: translateY(-2px); box-shadow: var(--depth-1); } }

.art-pager { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.art-pager-link { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 16px 18px; border-radius: 22px; background: var(--tint);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.art-pager-link.is-next { background: var(--pale-mint); text-align: right; }
.art-pager-dir { font-size: 13.5px; font-weight: 600; color: var(--secondary); }
.art-pager-link b { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.art-pager-link:active { transform: scale(.97); }
@media (hover: hover) { .art-pager-link:hover { transform: translateY(-3px); box-shadow: var(--depth-2); } }
@media (min-width: 600px) { .art-pager { grid-template-columns: 1fr 1fr; } .art-pager-link.is-next:only-child { grid-column: 2; } }