/* Collection-first editorial presentation. Base content is complete without JS. */
:root { --paper: #f8f8f6; --ink: #242725; --muted: #646861; --line: #dedfd8; --red: #c9443b; --sand: #eeebe3; }
.site-icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.button { min-height: 50px; padding-inline: 23px; gap: 10px; border-radius: 7px; font-size: 14px; }
.button .site-icon { width: 18px; height: 18px; }
.button-outline { background: #ffffff70; }
.text-link { font-size: 13px; gap: 12px; }
.text-link .site-icon { width: 17px; height: 17px; }
.section { width: min(1170px, 88%); padding-block: 88px; }
h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.12; }
.eyebrow { font-size: 10px; letter-spacing: 1.6px; }
.collection-hero { padding-top: 32px; padding-bottom: 0; width: 100%; }
.collection-hero .hero-copy { width: min(1050px, 90%); animation: hero-enter .5s ease-out both; }
.collection-hero .hero-copy h1 { font-size: clamp(46px, 5.5vw, 76px); max-width: 1000px; margin: 20px auto 23px; line-height: 1.04; letter-spacing: -.065em; }
.collection-hero h1 em { font-style: normal; color: var(--red); }
.collection-hero .lead { max-width: 590px; font-size: 17px; line-height: 1.65; }
.collection-hero .hero-actions { margin-top: 27px; gap: 12px; }
.collection-hero .hero-note { transform: none; font-size: 11px; margin-top: 15px; color: var(--muted); }
.collection-hero .collection-showcase { width: min(1170px, 88%); margin: 40px auto 0; }
.collection-showcase { min-width: 0; }
.showcase-canvas { display: grid; grid-template-columns: .95fr 1.05fr; background: #fffefa; border: 1px solid #dddcd4; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px -30px #5d4e3245; }
.showcase-story { min-width: 0; border-right: 1px solid #e4e1d8; display: flex; flex-direction: column; }
.showcase-cover { background: #e7e1d3; overflow: hidden; }
.showcase-cover > img { display: block; width: 100%; height: auto; aspect-ratio: 2.14; object-fit: cover; object-position: 50% 58%; }
.hero-demo .showcase-cover > img { aspect-ratio: 2.6; }
.showcase-intro { padding: 26px 30px 24px; }
.showcase-byline { font-size: 9px; letter-spacing: 1.5px; color: #796e5b; font-weight: 600; }
.showcase-intro h3 { margin-top: 12px; font-size: clamp(24px, 2.5vw, 33px); line-height: 1.08; letter-spacing: -1.1px; max-width: 370px; }
.showcase-intro > p:not(.showcase-byline) { font-size: 12px; color: var(--muted); margin-top: 12px; max-width: 360px; line-height: 1.65; }
.showcase-meta { display: flex; align-items: center; gap: 12px; font-size: 10px; color: #756f60; margin-top: 20px; }
.showcase-route { padding: 24px 28px 17px; min-width: 0; }
.showcase-route-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 9px; letter-spacing: 1.4px; color: #716e62; font-weight: 600; margin-bottom: 16px; }
.showcase-route-heading > span { color: var(--red); font-size: 22px; line-height: 1; }
.showcase-video { border-top: 1px solid #e6e2d9; padding-block: 13px; }
.showcase-video-top { display: flex; gap: 10px; align-items: baseline; font-size: 11px; color: #494e43; margin-bottom: 10px; font-weight: 550; }
.showcase-chapter { color: #8d8674; font-size: 9px; font-variant-numeric: tabular-nums; }
.showcase-video-body { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; align-items: center; }
.showcase-thumbnail { aspect-ratio: 16 / 9; background: #e3ddd0; border-radius: 4px; overflow: hidden; }
.showcase-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-video h4 { font-size: 12px; font-weight: 600; line-height: 1.4; margin: 0; letter-spacing: -.1px; }
.showcase-video-body p { color: #686b62; font-size: 10px; margin-top: 4px; line-height: 1.4; }
.showcase-cue { color: #a23b31; display: flex; gap: 5px; align-items: center; font-size: 9px; margin-top: 7px; }
.showcase-cue .site-icon { width: 12px; height: 12px; }
.showcase-note { display: flex; align-items: flex-start; gap: 8px; font-size: 10px; color: #686249; line-height: 1.6; padding: 10px 12px; margin-top: 11px; background: #f1efe5; border-radius: 4px; }
.showcase-note .site-icon { width: 13px; height: 13px; margin-top: 2px; }
.showcase-link-strip { display: flex; align-items: center; gap: 8px; border-top: 1px solid #e6e2d9; padding-top: 12px; font-size: 9px; color: #676f5c; }
.showcase-link-strip .site-icon { width: 14px; height: 14px; }
.showcase-link-strip > .site-icon:last-child { margin-left: auto; }
.collection-showcase figcaption { padding-top: 18px; font-size: 11px; max-width: 610px; }
.collection-showcase figcaption strong { font-size: 13px; }
.collection-showcase figcaption > span { max-width: 580px; }
.showcase-annotation { display: flex; justify-content: center; gap: 22px; margin-top: 14px; font-size: 10px; color: #5d6659; }
.showcase-annotation > span { display: inline-flex; gap: 6px; align-items: center; }
.showcase-annotation .site-icon { width: 14px; height: 14px; }
.collection-showcase-compact .showcase-canvas { grid-template-columns: 1fr; background: #fffefa; }
.collection-showcase-compact .showcase-story { display: grid; grid-template-columns: .8fr 1.2fr; border-right: 0; border-bottom: 1px solid #e5e1d7; }
.collection-showcase-compact .showcase-cover > img { width: 100%; height: 100%; aspect-ratio: auto; min-height: 172px; object-position: 44% 55%; }
.collection-showcase-compact .showcase-intro { padding: 23px 22px; }
.collection-showcase-compact .showcase-intro h3 { font-size: 24px; letter-spacing: -.9px; }
.collection-showcase-compact .showcase-intro > p:not(.showcase-byline) { font-size: 10px; }
.collection-showcase-compact .showcase-byline { font-size: 8px; letter-spacing: 1px; }
.collection-showcase-compact .showcase-meta { margin-top: 12px; font-size: 9px; gap: 8px; }
.collection-showcase-compact .showcase-route { padding: 17px 23px; }
.collection-showcase-compact .showcase-video:last-of-type { padding-bottom: 6px; }
.collection-showcase-compact .showcase-video-body { grid-template-columns: 80px minmax(0, 1fr); }
.collection-showcase-compact .showcase-video-top { margin-bottom: 8px; }
.collection-showcase-compact .showcase-route-heading { margin-bottom: 12px; }
.collection-showcase-compact .showcase-video { padding-block: 11px; }
.collection-showcase-compact .showcase-note { margin-top: 9px; padding-block: 8px; }
.collection-showcase-compact .showcase-link-strip { margin-top: 0; }
.collection-manifesto { text-align: center; padding-top: 100px; padding-bottom: 45px; }
.collection-manifesto h2 { margin: 20px auto 24px; max-width: 800px; }
.collection-manifesto h2 > span { color: #7e8576; }
.collection-manifesto > p:last-child { max-width: 620px; margin-inline: auto; font-size: 16px; color: var(--muted); }
.collection-feature { grid-template-columns: .9fr 1.1fr; gap: 85px; padding-top: 50px; padding-bottom: 95px; }
.feature-copy p:not(.eyebrow) { font-size: 15px; }
.feature-points { list-style: none; margin: 25px 0; padding: 0; display: grid; gap: 14px; }
.feature-points li { display: flex; gap: 11px; align-items: center; font-size: 13px; color: #51594d; }
.feature-points .site-icon { width: 18px; height: 18px; color: #7b846e; }
.sharing-band { background: #eeefe8; }
.sharing-band .feature-row { grid-template-columns: 1.1fr .9fr; gap: 80px; }
.secondary-guide-link { display: table; margin-top: 18px; }
.section-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 35px; margin-bottom: 56px; }
.section-topline h2 { width: 65%; }
.use-case-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.use-case-list article { border-top: 1px solid #c9cbbf; padding-top: 20px; min-width: 0; }
.use-case-number { font-family: Georgia, serif; color: #939984; font-size: 35px; letter-spacing: -1px; }
.use-case-list h3 { font-size: 22px; line-height: 1.25; margin: 22px 0 16px; letter-spacing: -.6px; max-width: 270px; }
.use-case-list p { font-size: 14px; color: var(--muted); }
.use-case-list a { display: inline-flex; align-items: center; gap: 10px; margin-top: 23px; font-size: 12px; font-weight: 600; }
.use-case-list .site-icon { width: 16px; }
.collection-details { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; border-top: 1px solid var(--line); }
.collection-details h2 { margin-top: 20px; max-width: 450px; }
.detail-list { display: grid; gap: 27px; }
.detail-list > div { position: relative; padding-left: 36px; }
.detail-list > div > span { position: absolute; left: 0; top: 4px; font-size: 10px; color: #858b79; }
.detail-list h3 { font-size: 18px; }
.detail-list p { font-size: 14px; color: var(--muted); margin-top: 9px; }
.detail-list .text-link { margin-top: 12px; font-size: 12px; }
.bookmark-band { background: #f0eae2; }
.bookmark-section { display: grid; grid-template-columns: 150px 1fr; gap: 60px; align-items: center; max-width: 1000px; padding-block: 66px; }
.bookmark-symbol { display: grid; place-items: center; }
.bookmark-symbol .site-icon { width: 95px; height: 125px; stroke-width: .8; color: #b85443; transform: rotate(-9deg); }
.bookmark-section h2 { margin: 16px 0; font-size: 38px; }
.bookmark-section p:not(.eyebrow) { font-size: 15px; color: #6d665a; max-width: 650px; }
.bookmark-links { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 12px; }
.storage-section { border-top: 0; }
.storage-columns { gap: 70px; margin-top: 36px; }
.storage-columns > div { border-top: 1px solid var(--line); padding-top: 23px; }
.storage-columns h3 { font-size: 19px; }
.faq-section { grid-template-columns: .8fr 1.2fr; }
.final-cta { padding-top: 80px; padding-bottom: 85px; }
.final-cta h2 { max-width: 700px; font-size: clamp(38px, 4.6vw, 60px); }
.final-secondary { display: table; margin: 19px auto 0; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.footer-main { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 75px; }
.footer-about p { font-size: 14px; line-height: 1.75; margin-top: 17px; }
.footer-about .text-link { font-size: 12px; margin-top: 20px; }
.footer-main .footer-guide-group { display: flex; flex-direction: column; gap: 15px; align-items: flex-start; font-size: 12px; }
.footer-guide-group h2 { font-size: 12px; font-weight: 650; letter-spacing: 0; line-height: 1.5; margin-bottom: 5px; }
.footer-bottom { align-items: baseline; }
.footer-bottom p:nth-child(2) { margin-left: auto; text-align: right; }
/* All guides share the same editorial rhythm while retaining their search intent. */
.guide-intro { width: min(920px, 88%); padding: 26px 0 45px; }
.guide-intro h1 { font-size: clamp(40px, 4.7vw, 65px); max-width: 860px; }
.guide-intro .lead { max-width: 660px; font-size: 17px; }
.guide-intro .hero-actions { margin-top: 25px; }
.guide-visual { width: min(1000px, 88%); margin-bottom: 0; }
.guide-visual .collection-showcase-compact { max-width: 760px; margin-inline: auto; }
.guide-visual .collection-showcase-compact .showcase-canvas { grid-template-columns: 1fr 1fr; }
.guide-visual .collection-showcase-compact .showcase-story { display: flex; border-bottom: 0; border-right: 1px solid #e5e1d7; }
.guide-visual .collection-showcase-compact .showcase-cover > img { height: 180px; object-position: 50% 55%; }
.guide-visual .collection-showcase-compact .showcase-route { padding: 21px; }
.guide-visual .workflow-demo:not(.collection-showcase) { max-width: 850px; margin-inline: auto; }
.guide-section { gap: 85px; padding-block: 75px; }
.guide-section h2 { font-size: clamp(30px, 3.3vw, 42px); }
.prose p, .prose li { font-size: 15px; line-height: 1.85; }
.prose ol { margin: 0 0 22px; }
.prose ol li:first-child { margin-top: 0; }
.table-scroll-hint { display: none; }
/* The public example is deliberately independent of the account collection store. */
.example-page { padding-top: 26px; padding-bottom: 45px; }
.example-page .breadcrumbs { justify-content: flex-start; margin-bottom: 38px; }
.example-intro { max-width: 850px; }
.example-intro h1 { font-size: clamp(44px, 5.2vw, 72px); line-height: 1.05; max-width: 780px; margin: 18px 0 23px; }
.example-intro .lead { max-width: 690px; font-size: 17px; }
.example-meta { display: flex; gap: 15px; margin-top: 25px; font-size: 12px; color: #767968; }
.example-cover { margin-top: 35px; overflow: hidden; border-radius: 8px; background: #e6e0d4; }
.example-cover img { display: block; width: 100%; height: auto; max-height: 390px; object-fit: cover; object-position: 50% 58%; }
.example-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 85px; margin-top: 58px; }
.example-aside { align-self: start; position: sticky; top: 30px; }
.example-aside nav { display: grid; gap: 20px; }
.example-aside nav > p { margin-bottom: 5px; }
.example-aside nav > a { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 13px; line-height: 1.6; }
.example-aside nav > a > span { font-size: 10px; color: #919684; }
.example-aside > p { font-size: 11px; line-height: 1.8; color: #707467; margin-top: 35px; }
.example-aside > .text-link { margin-top: 18px; font-size: 11px; }
.example-chapter { scroll-margin-top: 32px; padding-bottom: 55px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
.example-chapter h2 { font-size: 37px; margin: 16px 0 18px; }
.example-chapter-intro { color: var(--muted); font-size: 15px; margin-bottom: 28px; }
.example-video { background: #fffefa; border: 1px solid #e1e0d7; border-radius: 8px; overflow: hidden; }
.example-video-link { display: grid; grid-template-columns: .95fr 1.05fr; gap: 23px; padding: 23px; align-items: center; }
.example-thumbnail { position: relative; aspect-ratio: 16 / 9; background: #e4dfd3; border-radius: 4px; overflow: hidden; }
.example-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.example-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 38px; height: 38px; background: #fffefaeb; color: var(--ink); border-radius: 50%; transition: transform .2s ease; }
.example-play svg { width: 16px; height: 16px; margin-left: -3px; }
.example-video-link:hover .example-play { transform: translate(-50%, -50%) scale(1.1); }
.example-video-link h3 { font-size: 19px; line-height: 1.3; margin-top: 8px; }
.example-original { font-size: 10px; color: #77796b; margin-top: 9px; line-height: 1.6; }
.example-author { font-size: 11px; color: #62695b; margin-top: 8px; }
.example-video-link .text-link { font-size: 11px; gap: 8px; margin-top: 9px; border: 0; }
.example-note { border-top: 1px solid #e7e3d8; margin: 0 23px; padding: 22px 0 25px; }
.example-note > p:not(.eyebrow) { margin-top: 10px; color: #5e6556; font-size: 14px; line-height: 1.85; }
.example-cue { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 11px; color: #a83f34; line-height: 1.7; }
.example-cue .site-icon { width: 15px; height: 15px; }
.example-exercise { border-left: 2px solid #b1b69e; padding: 0 0 0 20px; margin-top: 24px; }
.example-exercise p { font-size: 14px; color: #606954; margin-top: 8px; }
.example-ending h2 { margin: 16px 0 20px; }
.example-ending > p:not(.eyebrow) { color: var(--muted); font-size: 15px; margin-bottom: 25px; }
@media(prefers-reduced-motion:no-preference) {
  .collection-showcase[data-motion="playing"] .showcase-enter-cover { animation: showcase-arrive 850ms cubic-bezier(.2,.7,.2,1) both; }
  .collection-showcase[data-motion="playing"] .showcase-enter-1 { animation: showcase-arrive 650ms 200ms both; }
  .collection-showcase[data-motion="playing"] .showcase-enter-2 { animation: showcase-arrive 650ms 420ms both; }
  .collection-showcase[data-motion="playing"] .showcase-enter-3 { animation: showcase-arrive 650ms 640ms both; }
  .collection-showcase[data-motion="playing"] .showcase-enter-link { animation: showcase-arrive 600ms 1000ms both; }
  .collection-showcase.hero-demo[data-motion="playing"] .showcase-enter-cover { animation-duration: 935ms; }
  .collection-showcase.hero-demo[data-motion="playing"] .showcase-enter-1 { animation-delay: 220ms; }
  .collection-showcase.hero-demo[data-motion="playing"] .showcase-enter-2 { animation-delay: 460ms; }
  .collection-showcase.hero-demo[data-motion="playing"] .showcase-enter-3 { animation-delay: 700ms; }
  .collection-showcase.hero-demo[data-motion="playing"] .showcase-enter-link { animation-delay: 1100ms; }
  @keyframes showcase-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}
@media(min-width:1450px) { .collection-hero .hero-copy h1 { font-size: 78px; } }
@media(max-width:1000px) {
  .collection-feature, .sharing-band .feature-row { gap: 45px; }
  .showcase-intro { padding: 24px; }
  .showcase-route { padding: 22px; }
  .collection-details { gap: 55px; }
  .use-case-list { gap: 28px; }
  .footer-main { gap: 45px; }
  .example-layout { grid-template-columns: 205px minmax(0,1fr); gap: 45px; }
  .example-video-link { grid-template-columns: 1fr; gap: 20px; }
}
@media(max-width:700px) {
  .section { width: 88%; padding-block: 55px; }
  .collection-hero { padding-top: 27px; }
  .collection-hero .hero-copy { width: 90%; }
  .collection-hero .hero-copy h1 { font-size: clamp(37px, 9.3vw, 58px); line-height: 1.08; letter-spacing: -.055em; margin: 17px auto 22px; }
  .collection-hero .hero-copy h1 br { display: none; }
  .collection-hero h1 em { display: block; margin-top: 2px; }
  .collection-hero .lead { font-size: 15px; line-height: 1.7; max-width: 380px; }
  .collection-hero .hero-actions { gap: 10px; flex-wrap: wrap; margin-top: 24px; }
  .collection-hero .hero-actions .button { font-size: 12px; padding-inline: 15px; min-height: 46px; gap: 7px; }
  .collection-hero .hero-note { font-size: 10px; max-width: 280px; margin: 16px auto 0; }
  .collection-hero .collection-showcase { width: 88%; margin-top: 34px; }
  .showcase-canvas { grid-template-columns: 1fr; border-radius: 8px; }
  .showcase-story { border-right: 0; border-bottom: 1px solid #e4e1d8; }
  .showcase-cover > img { aspect-ratio: 2.15; object-position: 50% 55%; }
  .showcase-intro { padding: 21px 23px; }
  .showcase-intro h3 { font-size: 27px; max-width: 310px; }
  .showcase-route { padding: 19px 21px; }
  .showcase-route-heading { margin-bottom: 12px; }
  .showcase-video-top { font-size: 10px; }
  .showcase-video-body { grid-template-columns: 80px minmax(0,1fr); gap: 12px; }
  .showcase-video h4 { font-size: 11px; }
  .showcase-video-body p { font-size: 9px; }
  .showcase-cue { font-size: 9px; flex-wrap: wrap; }
  .showcase-note { font-size: 10px; }
  .collection-showcase figcaption { font-size: 10px; padding-top: 16px; }
  .collection-showcase figcaption strong { font-size: 12px; }
  .collection-manifesto { padding-top: 65px; padding-bottom: 25px; }
  .collection-manifesto h2 { font-size: 33px; }
  .collection-manifesto > p:last-child { font-size: 14px; }
  .collection-feature, .sharing-band .feature-row { grid-template-columns: 1fr; gap: 32px; padding-block: 40px; }
  .feature-copy p:not(.eyebrow) { font-size: 14px; }
  .feature-points { gap: 12px; margin-block: 20px; }
  .feature-points li { font-size: 12px; }
  .collection-showcase-compact .showcase-story { grid-template-columns: .7fr 1.3fr; }
  .collection-showcase-compact .showcase-intro { padding: 18px; }
  .collection-showcase-compact .showcase-intro h3 { font-size: 22px; }
  .collection-showcase-compact .showcase-meta { gap: 6px; font-size: 8px; }
  .collection-showcase-compact .showcase-route { padding: 17px; }
  .collection-showcase-compact .showcase-video-body { grid-template-columns: 72px minmax(0,1fr); gap: 10px; }
  .showcase-annotation { gap: 16px; font-size: 9px; flex-wrap: wrap; }
  .section-topline { display: block; margin-bottom: 32px; }
  .section-topline h2 { width: 100%; margin-top: 18px; }
  .use-case-list { grid-template-columns: 1fr; gap: 32px; }
  .use-case-list h3 { max-width: none; font-size: 23px; margin: 13px 0; }
  .use-case-number { font-size: 30px; }
  .use-case-list a { margin-top: 17px; }
  .collection-details { grid-template-columns: 1fr; gap: 35px; }
  .bookmark-section { grid-template-columns: 1fr; gap: 24px; }
  .bookmark-symbol { justify-content: start; }
  .bookmark-symbol .site-icon { width: 43px; height: 55px; }
  .bookmark-section h2 { font-size: 32px; }
  .bookmark-section p:not(.eyebrow) { font-size: 14px; }
  .bookmark-links { gap: 16px 25px; }
  .bookmark-links .text-link { font-size: 12px; }
  .storage-columns { gap: 27px; margin-top: 30px; }
  .storage-columns h3 { font-size: 18px; }
  .faq-section { grid-template-columns: 1fr; }
  .final-cta h2 { font-size: 40px; max-width: 380px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 38px 25px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-about p { font-size: 13px; }
  .footer-main .footer-guide-group { font-size: 11px; gap: 16px; }
  .footer-bottom { flex-wrap: wrap; gap: 18px; }
  .footer-bottom p:first-child { max-width: none; }
  .footer-bottom p:nth-child(2) { order: 3; width: 100%; text-align: left; margin: 0; max-width: none; }
  .footer-bottom a { margin-left: auto; }
  .guide-intro { padding-top: 19px; padding-bottom: 32px; }
  .guide-intro h1 { font-size: 39px; }
  .guide-intro .lead { font-size: 15px; }
  .guide-intro .hero-actions { flex-wrap: wrap; gap: 8px; }
  .guide-intro .button { font-size: 12px; padding-inline: 16px; }
  .guide-visual { width: 88%; }
  .guide-visual .collection-showcase-compact .showcase-canvas { grid-template-columns: 1fr; }
  .guide-visual .collection-showcase-compact .showcase-story { display: grid; grid-template-columns: .7fr 1.3fr; border-right: 0; border-bottom: 1px solid #e5e1d7; }
  .guide-visual .collection-showcase-compact .showcase-cover > img { height: 100%; min-height: 170px; }
  .guide-visual .collection-showcase-compact .showcase-route { padding: 18px; }
  .guide-section { gap: 28px; padding-block: 50px; }
  .prose p, .prose li { font-size: 14px; }
  .prose .table-scroll-hint { display: block; margin: 0 0 18px; font-size: 11px; color: var(--muted); }
  .example-page { padding-top: 20px; padding-bottom: 25px; }
  .example-page .breadcrumbs { margin-bottom: 28px; }
  .example-intro h1 { font-size: 45px; }
  .example-intro .lead { font-size: 15px; }
  .example-meta { margin-top: 21px; font-size: 11px; gap: 12px; }
  .example-cover { margin-top: 28px; }
  .example-cover img { min-height: 190px; }
  .example-layout { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .example-aside { position: static; }
  .example-aside nav { gap: 14px; }
  .example-aside > p { margin-top: 22px; max-width: 420px; }
  .example-chapter { padding-bottom: 35px; margin-bottom: 36px; }
  .example-chapter h2 { font-size: 32px; }
  .example-video-link { padding: 18px; gap: 20px; }
  .example-video-link h3 { font-size: 22px; }
  .example-note { margin-inline: 18px; padding-block: 20px; }
  .example-cue { flex-wrap: wrap; font-size: 10px; gap: 6px; }
  .example-exercise { padding-left: 16px; }
  .example-ending h2 { font-size: 37px; }
}
@media(max-width:359px) {
  .collection-hero .hero-copy h1 { font-size: 35px; }
  .collection-hero .hero-actions .button { width: 100%; }
  .showcase-intro { padding: 19px; }
  .showcase-route { padding: 17px; }
  .collection-showcase-compact .showcase-story { grid-template-columns: 1fr; }
  .collection-showcase-compact .showcase-cover > img { height: 130px; min-height: 130px; }
  .showcase-meta { flex-wrap: wrap; }
  .guide-intro h1 { font-size: 35px; }
}
@media(prefers-reduced-motion:reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bookmark-symbol .site-icon { transform: none; }
}

/* Topic-specific illustrations use the same vocabulary as the working editor. */
.workflow-sheet { background: #fffefa; border: 1px solid #ddded4; border-radius: 9px; box-shadow: 0 15px 40px -30px #514a353d; overflow: hidden; max-width: 620px; margin-inline: auto; }
.workflow-sheet-top { display: flex; align-items: center; justify-content: space-between; padding: 17px 23px; border-bottom: 1px solid #e4e3d9; gap: 15px; }
.workflow-sheet-top > span:first-child { display: inline-flex; align-items: center; font-size: 16px; font-weight: 650; letter-spacing: -.65px; }
.workflow-sheet-top .site-icon { width: 18px; height: 18px; color: var(--red); margin-right: 8px; }
.workflow-sheet-top > span:last-child { font-size: 8px; letter-spacing: 1px; color: #797c6b; }
.workflow-document { padding: 28px 32px 23px; }
.workflow-kicker { font-size: 8px; letter-spacing: 1.4px; color: #78816b; font-weight: 600; }
.workflow-document h3 { font-size: 32px; letter-spacing: -1.2px; line-height: 1.08; margin-top: 14px; }
.workflow-section-label { display: flex; gap: 11px; font-size: 12px; font-weight: 550; border-top: 1px solid #e1e0d4; padding-top: 22px; margin-top: 27px; }
.workflow-section-label > span { color: #818671; font-size: 10px; }
.workflow-picked-video { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 15px; align-items: center; margin-top: 17px; }
.workflow-picked-video img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #e6dfd0; }
.workflow-picked-video strong { font-size: 12px; line-height: 1.5; display: block; font-weight: 600; }
.workflow-picked-video span { display: block; font-size: 9px; color: var(--muted); margin-top: 5px; }
.workflow-author-note { margin-top: 21px; border-left: 2px solid #929c7b; padding: 2px 0 3px 15px; }
.workflow-author-note > span { display: flex; align-items: center; gap: 7px; color: #697553; font-size: 8px; letter-spacing: 1px; }
.workflow-author-note .site-icon { width: 13px; height: 13px; }
.workflow-author-note p { font-size: 12px; line-height: 1.8; color: #5c6350; margin-top: 7px; }
.workflow-cue-row { display: flex; gap: 8px; align-items: center; color: #a64034; font-size: 10px; margin-top: 19px; }
.workflow-cue-row .site-icon { width: 14px; height: 14px; }
.workflow-cue-row strong { font-weight: 500; }
.workflow-draft-footer { display: flex; align-items: center; gap: 7px; padding-top: 17px; margin-top: 23px; border-top: 1px solid #e3e2d6; font-size: 9px; color: #727664; line-height: 1.6; }
.workflow-draft-footer .site-icon { width: 13px; height: 13px; }
.workflow-access-list { margin-top: 27px; display: grid; gap: 10px; }
.workflow-access-row { display: flex; gap: 13px; align-items: center; padding: 17px 14px; border: 1px solid #e3e2d8; border-radius: 6px; }
.workflow-access-row > .site-icon { width: 19px; height: 19px; color: #778369; }
.workflow-access-row strong { font-size: 12px; font-weight: 600; }
.workflow-access-row p { font-size: 10px; line-height: 1.6; color: #747768; margin-top: 3px; }
.workflow-radio { margin-left: auto; flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid #c6cbb8; border-radius: 50%; }
.workflow-access-selected { background: #f0f2e9; border-color: #bdc9ad; }
.workflow-access-selected .workflow-radio { background: #778963; box-shadow: inset 0 0 0 3px #f0f2e9; border-color: #778963; }
.workflow-publish-result { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: #59664b; }
.workflow-publish-result .site-icon { width: 22px; height: 22px; }
.workflow-publish-result strong { font-size: 11px; font-weight: 600; }
.workflow-publish-result p { font-size: 10px; margin-top: 4px; }
.workflow-saved-collection { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; gap: 18px; padding-bottom: 22px; margin-top: 26px; border-bottom: 1px solid #dedfd2; }
.workflow-saved-collection > img { width: 100%; height: auto; aspect-ratio: 1.4; object-fit: cover; border-radius: 5px; }
.workflow-saved-collection strong { font-size: 15px; line-height: 1.3; display: block; }
.workflow-saved-collection span { display: block; margin-top: 10px; font-size: 9px; color: #74796b; }
.workflow-choice { display: flex; align-items: center; gap: 14px; padding-top: 24px; }
.workflow-choice .site-icon { width: 20px; height: 20px; color: #7d8e68; }
.workflow-choice strong { font-size: 12px; font-weight: 600; }
.workflow-choice p { font-size: 10px; color: #737968; margin-top: 5px; }
.workflow-metric-list { display: grid; gap: 22px; margin-top: 30px; }
.workflow-metric-list > div { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 6px 14px; border-bottom: 1px solid #e5e3d9; padding-bottom: 20px; }
.workflow-metric-list span { font-size: 10px; color: #919980; padding-top: 3px; }
.workflow-metric-list strong { font-size: 14px; font-weight: 600; }
.workflow-metric-list p { font-size: 11px; color: #737969; grid-column: 2; }
@media(max-width:700px) { .workflow-document { padding: 25px 23px 20px; } .workflow-document h3 { font-size: 30px; } .workflow-picked-video { grid-template-columns: 80px minmax(0,1fr); gap: 12px; } .workflow-picked-video strong { font-size: 11px; } .workflow-sheet-top { padding: 15px 20px; } .workflow-access-row { padding: 15px 12px; } .workflow-access-row p { font-size: 9px; } .workflow-publish-result strong { font-size: 10px; } }
/* Keep the finished desktop collection in the first screen alongside its promise. */
@media(min-width:701px) {
  .collection-hero { padding-top: 24px; }
  .collection-hero .hero-copy h1 { font-size: clamp(46px,4.7vw,68px); margin-top: 16px; margin-bottom: 18px; }
  .collection-hero .lead { font-size: 16px; line-height: 1.6; }
  .collection-hero .hero-actions { margin-top: 22px; }
  .collection-hero .hero-note { margin-top: 12px; }
  .collection-hero .collection-showcase { margin-top: 32px; }
  .hero-demo .showcase-route { padding: 20px 24px 16px; }
  .hero-demo .showcase-route-heading { margin-bottom: 12px; }
  .hero-demo .showcase-video { padding-block: 11px; }
  .hero-demo .showcase-video-top { margin-bottom: 8px; }
  .hero-demo .showcase-note { padding-block: 8px; }
  .hero-demo .showcase-link-strip { padding-top: 10px; }
  .hero-demo .showcase-intro h3 { font-size: 30px; }
  .hero-demo figcaption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}