/* Task-specific reading and browsing layouts built on the TDesk foundations. */
.content-hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; align-items: center; }
.content-hero-layout h1 { max-width: 18ch; }
.content-hero-layout p { max-width: 56ch; }
.content-search { display: flex; align-items: center; gap: 12px; max-width: 680px; margin-top: 28px; padding: 8px 8px 8px 20px; background: var(--td-paper); border: 1px solid var(--td-line); border-radius: 14px; box-shadow: 0 5px 0 rgb(23 43 77 / 3%); }
.content-search > i { color: var(--td-muted); }
.content-search input { flex: 1; min-width: 0; width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--td-ink); font-size: 16px; outline: none; }
.content-search:focus-within { border-color: var(--td-blue); outline: 3px solid rgb(40 85 232 / 15%); }
.content-search .td-button { flex-shrink: 0; }
.content-emblem { position: relative; display: grid; width: 168px; height: 168px; margin: auto; place-items: center; background: var(--td-blue); border-radius: 42px 42px 42px 8px; color: white; transform: rotate(-6deg); }
.content-emblem > i { font-size: 62px; transform: rotate(6deg); }
.content-emblem::after { position: absolute; right: -20px; bottom: -15px; display: grid; width: 65px; height: 65px; place-items: center; border: 7px solid var(--td-mist); border-radius: 50%; color: var(--td-ink); background: var(--td-mint); content: '?'; font-size: 30px; font-weight: 700; transform: rotate(6deg); }
.content-toolbar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.content-toolbar h2 { font-size: 26px; }
.content-toolbar p, .content-meta { color: var(--td-muted); font-size: 13px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.knowledge-topic { padding: 28px; border: 1px solid var(--td-line); border-radius: 20px; }
.knowledge-topic-heading { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.knowledge-topic-heading h3 { font-size: 19px; letter-spacing: -.025em; }
.knowledge-topic-heading h3 a:hover { color: var(--td-blue); }
.knowledge-topic-heading p { margin-top: 2px; font-size: 12px; color: var(--td-muted); }
.content-topic-icon { display: grid; flex-shrink: 0; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #e6edff; color: var(--td-ink); font-size: 20px; }
.knowledge-topic:nth-child(2) .content-topic-icon { background: var(--td-lavender); }
.knowledge-topic:nth-child(3) .content-topic-icon { background: var(--td-mint); }
.knowledge-topic:nth-child(4) .content-topic-icon { background: var(--td-peach); }
.knowledge-topic > p { color: var(--td-muted); font-size: 14px; margin-bottom: 16px; }
.content-link-list { display: grid; gap: 4px; padding: 0; margin: 0; list-style: none; }
.content-link-list a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; font-size: 14px; font-weight: 500; line-height: 1.6; }
.content-link-list a:hover { color: var(--td-blue); }
.content-link-list i { color: var(--td-muted); font-size: 17px; flex-shrink: 0; }
.knowledge-topic .td-link { margin-top: 14px; }
.content-sidebar { display: flex; flex-direction: column; gap: 32px; }
.content-sidebar h2 { margin-bottom: 16px; font-size: 18px; letter-spacing: -.02em; }
.content-sidebar p { color: var(--td-muted); font-size: 14px; }
.content-sidebar .help-panel .td-link { margin-top: 16px; }
.content-category-nav { display: grid; gap: 6px; }
.content-category-nav a, .content-category-nav button { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; font-size: 14px; color: var(--td-muted); text-align: left; }
.content-category-nav :is(a, button):hover, .content-category-nav [aria-current="page"], .content-category-nav [aria-current="true"], .content-category-nav [aria-pressed="true"] { background: var(--td-mist); color: var(--td-blue); }
.content-category-nav span { font-size: 12px; }
.content-popular { list-style: none; padding: 0; margin: 0; }
.content-popular li + li { margin-top: 18px; }
.content-popular a { display: block; font-size: 14px; font-weight: 500; line-height: 1.7; }
.content-popular a:hover { color: var(--td-blue); }
.content-popular small { display: block; color: var(--td-muted); font-size: 12px; margin-top: 4px; }
.content-empty { padding: 40px; border: 1px dashed var(--td-line); border-radius: 20px; text-align: center; }
.content-empty h2 { font-size: 24px; margin-bottom: 12px; }
.content-empty p { margin-inline: auto; color: var(--td-muted); }
.content-empty .td-link { margin-top: 16px; }
.guide-collection + .guide-collection { margin-top: 36px; }
.guide-collection > h2 { font-size: 26px; margin-bottom: 20px; }
.guide-detail { border: 1px solid var(--td-line); border-radius: 16px; background: white; scroll-margin-top: 120px; }
.guide-detail + .guide-detail { margin-top: 12px; }
.guide-detail summary { display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 20px 24px; font-size: 16px; font-weight: 600; list-style: none; cursor: pointer; }
.guide-detail summary::-webkit-details-marker { display: none; }
.guide-detail summary > i { color: var(--td-blue); font-size: 21px; }
.guide-detail summary::after { content: '+'; font-size: 26px; font-weight: 400; margin-left: auto; padding-left: 12px; color: var(--td-muted); }
.guide-detail[open] { border-color: #bdcbf5; }
.guide-detail[open] summary { color: var(--td-blue); }
.guide-detail[open] summary::after { content: '−'; }
.guide-detail summary:focus-visible { outline-offset: -5px; border-radius: 16px; }
.guide-detail .article-content { padding: 0 24px 28px 59px; }
.guide-detail .article-content h3 { font-size: 18px; }
.guide-return { margin-top: 28px; }
.content-bottom-help { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 48px; padding: 28px 32px; border-radius: 20px; background: var(--td-mist); }
.content-bottom-help h2 { font-size: 21px; margin-bottom: 8px; }
.content-bottom-help p { font-size: 14px; color: var(--td-muted); }
.content-bottom-help .td-button { flex-shrink: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.journal-post { min-width: 0; }
.journal-post:first-child { grid-column: 1 / -1; }
.journal-image { display: block; overflow: hidden; border-radius: 20px; margin-bottom: 22px; background: var(--td-mist); }
.journal-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1.7; overflow: hidden; background: #e9efff; color: var(--td-blue); }
.journal-post:first-child .journal-art { aspect-ratio: 2.2; }
.journal-art::before, .journal-art::after { content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--td-blue); opacity: .18; }
.journal-art::before { top: 20%; left: 14%; }
.journal-art::after { bottom: 19%; right: 13%; width: 7px; height: 7px; }
.art-window { width: 59%; max-width: 360px; overflow: hidden; border: 1px solid #d4ddf1; border-radius: 14px; background: white; transform: rotate(-5deg); box-shadow: 0 9px 0 rgb(23 43 77 / 5%); }
.art-window-bar { display: flex; align-items: center; gap: 5px; height: 28px; padding-left: 12px; border-bottom: 1px solid var(--td-line); }
.art-window-bar span { width: 5px; height: 5px; border-radius: 50%; background: #c8d2e8; }
.art-window-body { display: grid; grid-template-columns: 26% 1fr; }
.art-side-menu { display: grid; align-content: start; gap: 12px; padding: 22px 12px; background: #f8faff; border-right: 1px solid var(--td-line); }
.art-side-menu b { height: 6px; border-radius: 4px; background: #dfe6f7; }
.art-side-menu b:first-child { background: #aabcf5; }
.art-app-canvas { display: grid; justify-items: start; align-content: center; gap: 12px; padding: 24px; }
.art-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 13px; background: var(--td-mist); font-size: 23px; }
.art-line { display: block; width: 60%; height: 6px; border-radius: 4px; background: #dfe6f2; }
.art-line--wide { width: 90%; }
.art-action { display: block; width: 58px; height: 19px; border-radius: 6px; background: var(--td-blue); margin-top: 2px; }
.art-badge { position: absolute; bottom: 17%; right: 17%; display: grid; place-items: center; width: 54px; height: 54px; border: 6px solid #e9efff; border-radius: 50%; background: var(--td-mint); color: var(--td-ink); font-size: 21px; transform: rotate(8deg); }
.journal-art--capture { background: #e5f4ed; }
.art-capture-frame { position: relative; width: 58%; max-width: 270px; padding: 13px; transform: rotate(4deg); }
.art-crop { position: absolute; width: 23px; height: 23px; border: 3px solid #3c8e6b; border-radius: 3px; }
.art-crop--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.art-crop--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.art-crop--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.art-crop--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.art-capture-paper { display: grid; gap: 10px; padding: 20px; border: 1px solid #d6e6df; border-radius: 10px; background: white; }
.art-capture-paper .art-icon { background: #e4f2eb; color: #3c8e6b; width: 100%; height: 45px; }
.art-selection { height: 21px; margin-top: -3px; border: 2px dashed #73b497; border-radius: 3px; background: #e5f4ed; }
.journal-art--capture .art-badge { background: #bfe2d0; border-color: #e5f4ed; right: 16%; bottom: 14%; }
.journal-art--repair { background: #f2ebfc; }
.art-repair-paper { position: relative; display: grid; grid-template-columns: 45px 1fr; gap: 18px; width: 60%; max-width: 290px; padding: 25px; border: 1px solid #e0d7ed; border-radius: 16px; background: white; transform: rotate(-5deg); box-shadow: 0 7px 0 rgb(23 43 77 / 4%); }
.art-repair-paper .art-icon { background: #eee6fb; color: #7356b6; }
.art-repair-lines { display: grid; align-content: center; gap: 10px; }
.art-progress { grid-column: 1 / -1; height: 8px; border-radius: 9px; background: #eee8f8; }
.art-progress b { display: block; height: 100%; width: 65%; border-radius: inherit; background: #a289d1; }
.journal-art--repair .art-badge { background: #dbcaf4; border-color: #f2ebfc; }
.journal-art--mobile { background: #fcebdc; }
.art-phone { position: relative; display: flex; flex-direction: column; gap: 14px; width: 110px; height: 190px; padding: 35px 10px 26px; border: 5px solid var(--td-ink); border-radius: 23px; background: white; transform: rotate(-9deg); }
.art-phone-speaker { position: absolute; top: 10px; left: 32px; width: 37px; height: 4px; border-radius: 5px; background: #d1d9e6; }
.art-mobile-chat { display: grid; place-items: center; width: 51px; height: 38px; border-radius: 12px 12px 12px 3px; background: var(--td-blue); color: white; font-size: 19px; }
.art-mobile-chat--reply { align-self: flex-end; background: var(--td-mint); color: var(--td-ink); border-radius: 12px 12px 3px 12px; }
.art-phone-home { position: absolute; bottom: 9px; left: 30px; width: 40px; height: 4px; border-radius: 5px; background: #d1d9e6; }
.art-float-chat { position: absolute; display: flex; justify-content: center; align-items: center; gap: 6px; right: 22%; top: 28%; width: 79px; height: 54px; border: 1px solid #ead4c0; border-radius: 16px 16px 16px 3px; background: white; transform: rotate(8deg); }
.art-float-chat span { width: 6px; height: 6px; border-radius: 50%; background: var(--td-ink); }
.journal-art--notes { background: #e6eef7; }
.art-notes-paper { display: grid; gap: 14px; width: 52%; max-width: 240px; padding: 22px; border: 1px solid #d2deed; border-radius: 4px 20px 4px 4px; background: white; transform: rotate(5deg); box-shadow: 0 8px 0 rgb(23 43 77 / 4%); }
.art-notes-paper .art-icon { width: 37px; height: 37px; font-size: 18px; background: #e9eff8; }
.art-note-row { display: flex; align-items: center; gap: 10px; color: #4c9571; font-size: 12px; }
.art-note-row .art-line { width: 75%; }
.journal-art--notes .art-badge { border-color: #e6eef7; background: #bdcfee; }
.journal-post .content-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; font-size: 12px; }
.journal-post .content-meta a { color: var(--td-blue); }
.journal-post h2 { margin-bottom: 12px; font-size: 23px; line-height: 1.4; }
.journal-post:first-child h2 { font-size: 31px; }
.journal-post h2 a:hover { color: var(--td-blue); }
.journal-post > p { font-size: 14px; color: var(--td-muted); line-height: 1.85; }
.journal-post .td-link { margin-top: 14px; }
.content-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.content-tags a { padding: 8px 13px; border-radius: 9px; background: #f3f5f8; color: var(--td-muted); font-size: 12px; min-height: 38px; display: inline-flex; align-items: center; }
.content-tags a:hover, .content-tags a[aria-current="true"] { color: var(--td-blue); background: var(--td-mist); }
.content-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; }
.content-pagination button { min-height: 44px; padding: 8px 16px; border: 0; background: #f2f4f8; border-radius: 10px; color: var(--td-ink); font-size: 13px; }
.content-pagination button[aria-disabled="true"] { color: #758095; cursor: default; }
.content-pagination span { min-width: 65px; text-align: center; font-size: 12px; color: var(--td-muted); }
.journal-reading { margin-top: 14px; scroll-margin-top: 120px; }
.journal-reading summary { list-style: none; cursor: pointer; }
.journal-reading summary::-webkit-details-marker { display: none; }
.journal-reading[open] summary i { transform: rotate(90deg); }
.journal-reading .article-content { margin-top: 16px; padding-left: 20px; border-left: 2px solid var(--td-line); }
.journal-post { scroll-margin-top: 120px; }
.blog-grid.is-enhanced .journal-post:first-child { grid-column: auto; }
.blog-grid.is-enhanced .journal-post:first-child .journal-art { aspect-ratio: 1.7; }
.blog-grid.is-enhanced .journal-post:first-child h2 { font-size: 23px; }
.blog-grid.is-enhanced .journal-post.is-featured { grid-column: 1 / -1; }
.blog-grid.is-enhanced .journal-post.is-featured .journal-art { aspect-ratio: 2.2; }
.blog-grid.is-enhanced .journal-post.is-featured h2 { font-size: 31px; }
.about-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; padding-block: 16px 64px; }
.about-intro h2 { max-width: 12ch; font-size: clamp(34px, 4vw, 48px); font-weight: 650; }
.about-intro p { color: var(--td-muted); font-size: 16px; line-height: 1.85; }
.about-intro p + p { margin-top: 18px; }
.about-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.about-value { padding: 36px 0; border-top: 1px solid var(--td-line); }
.about-value .content-topic-icon { margin-bottom: 20px; }
.about-value:nth-child(2) .content-topic-icon { background: var(--td-mint); }
.about-value:nth-child(3) .content-topic-icon { background: var(--td-peach); }
.about-value:nth-child(4) .content-topic-icon { background: var(--td-lavender); }
.about-value h3 { font-size: 23px; margin-bottom: 16px; }
.about-value p { color: var(--td-muted); font-size: 15px; line-height: 1.9; }
.about-value .td-link { margin-top: 16px; }
.about-statement { display: flex; justify-content: space-between; gap: 40px; align-items: center; padding: 48px; background: var(--td-blue); border-radius: 26px; margin-top: 32px; }
.about-statement h2 { color: white; font-size: 34px; max-width: 18ch; font-weight: 650; }
.about-statement .td-button { flex-shrink: 0; }
@media (max-width: 1050px) {
  .knowledge-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .content-hero-layout { grid-template-columns: minmax(0, 1fr) 170px; }
  .content-emblem { width: 140px; height: 140px; }
  .about-intro { gap: 48px; }
}
@media (max-width: 700px) {
  .content-hero-layout { grid-template-columns: 1fr; gap: 0; }
  .content-emblem { display: none; }
  .content-search { padding-left: 14px; gap: 8px; }
  .content-search .td-button { padding-inline: 15px; }
  .content-toolbar { flex-wrap: wrap; margin-bottom: 22px; }
  .knowledge-topic { padding: 24px; }
  .content-sidebar { padding-top: 8px; }
  .content-bottom-help { align-items: flex-start; flex-direction: column; padding: 24px; }
  .guide-detail summary { padding: 18px; font-size: 15px; gap: 12px; }
  .guide-detail .article-content { padding: 0 20px 24px; }
  .blog-grid { grid-template-columns: 1fr; }
  .journal-post:first-child h2 { font-size: 26px; }
  .journal-post:first-child .journal-art { aspect-ratio: 1.7; }
  .blog-grid.is-enhanced .journal-post.is-featured h2 { font-size: 26px; }
  .blog-grid.is-enhanced .journal-post.is-featured .journal-art { aspect-ratio: 1.7; }
  .art-window { width: 65%; }
  .art-app-canvas { padding: 17px; gap: 9px; }
  .art-window-bar { height: 23px; }
  .art-side-menu { padding: 18px 9px; gap: 10px; }
  .art-icon { width: 37px; height: 37px; font-size: 20px; }
  .art-phone { width: 94px; height: 159px; padding-top: 28px; gap: 9px; border-width: 4px; border-radius: 20px; }
  .art-phone-speaker { left: 25px; }
  .art-phone-home { left: 23px; }
  .art-mobile-chat { width: 46px; height: 32px; font-size: 16px; }
  .art-float-chat { right: 17%; width: 67px; height: 47px; }
  .art-capture-frame { width: 65%; }
  .art-capture-paper { padding: 14px; gap: 8px; }
  .art-repair-paper { width: 65%; padding: 20px; grid-template-columns: 37px 1fr; gap: 13px; }
  .art-badge { width: 46px; height: 46px; font-size: 18px; border-width: 5px; }
  .art-notes-paper { width: 57%; padding: 17px; gap: 10px; }
  .about-intro { grid-template-columns: 1fr; gap: 24px; padding-bottom: 40px; }
  .about-intro h2 { max-width: 17ch; }
  .about-values { grid-template-columns: 1fr; }
  .about-value { padding-block: 28px; }
  .about-statement { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 24px; }
  .about-statement h2 { font-size: 30px; }
}