@import url('./checklist-variants.css');
@import url('../shared/ducdz-foundation.css');

body[data-app="checklist"] {
  --ck-bg: var(--ducdz-bg);
  --ck-text: var(--ducdz-text);
  --ck-muted: var(--ducdz-muted);
  --ck-app-muted: var(--ducdz-muted);
  --ck-border: var(--ducdz-border);
  --ck-panel: var(--ducdz-panel);
  --ck-chip: var(--ducdz-chip);
  --ck-sand: var(--ducdz-sand);
  --ck-blue: var(--ducdz-blue);
  --ck-lavender: var(--ducdz-lavender);
  --ck-peach: var(--ducdz-peach);
  --ck-sage: var(--ducdz-sage);
  --ck-accent: var(--ducdz-accent);
  --ck-control-border: var(--ducdz-control-border);
  --ck-hover: var(--ducdz-hover);
  --ck-shadow: var(--ducdz-shadow);
  --ck-ease: cubic-bezier(.2, .75, .25, 1);
  margin: 0;
  padding: 0;
  padding-top: 0 !important;
  min-height: 100dvh;
  color: var(--ck-text);
  background: var(--ck-bg);
  font-family: var(--ducdz-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body[data-app="checklist"] *, body[data-app="checklist"] *::before, body[data-app="checklist"] *::after { box-sizing: border-box; }
body[data-app="checklist"] [hidden] { display: none !important; }
body[data-app="checklist"] button, body[data-app="checklist"] input { font: inherit; }
body[data-app="checklist"] button { color: inherit; cursor: pointer; touch-action: manipulation; }
body[data-app="checklist"] button, body[data-app="checklist"] a { -webkit-tap-highlight-color: transparent; }
body[data-app="checklist"] a { color: inherit; text-decoration: none; }
body[data-app="checklist"] svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body[data-app="checklist"] :focus-visible { outline: 2px solid var(--ck-text); outline-offset: 4px; }
body[data-app="checklist"] h1, body[data-app="checklist"] h2, body[data-app="checklist"] p { margin: 0; }
.skip-link { position: fixed; top: -70px; left: 20px; padding: 12px 18px; background: var(--ck-text); color: var(--ck-bg) !important; z-index: 100; border-radius: 10px; }
.skip-link:focus { top: 10px; }
.site-header { height: 57px; border-bottom: 1px solid var(--ck-border); position: relative; z-index: 30; }
.header-inner { width: min(1200px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; }
body[data-app="checklist"] .brand-mark { width: 25px; height: 25px; }
.desktop-nav { display: flex; align-items: center; gap: 26px; margin-left: 35px; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; border: 0; padding: 0; font-size: 13px !important; background: transparent; color: var(--ck-muted) !important; }
.nav-link.active, .nav-link:hover { color: var(--ck-text) !important; }
.nav-link svg { width: 13px !important; height: 13px !important; }
.header-actions { display: flex; align-items: center; gap: 17px; }
.search-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 0; min-height: 40px; border: 0; background: transparent; font-size: 13px !important; color: var(--ck-muted) !important; }
.search-toggle svg { width: 18px !important; height: 18px !important; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ck-muted) !important; }
.icon-button:hover { background: var(--ck-border); color: var(--ck-text) !important; }
.theme-toggle { width: 30px; }
.theme-toggle svg { width: 17px !important; height: 17px !important; }
.mobile-menu-toggle { display: none; }
.browse-dropdown { position: relative; }
.apps-dropdown { position: relative; }
.apps-dropdown > summary { list-style: none; cursor: pointer; }
.apps-dropdown > summary::-webkit-details-marker { display: none; }
.apps-dropdown[open] > summary { color: var(--ck-text) !important; }
.apps-menu { left: auto !important; right: -16px; min-width: 240px !important; }
.apps-menu a span { white-space: normal; }
.mobile-menu-label { display: block; margin: 12px 12px 4px; color: var(--ck-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.browse-menu { position: absolute; top: 45px; left: -20px; min-width: 230px; border: 1px solid var(--ck-border); border-radius: 14px; padding: 8px; background: var(--ck-panel); box-shadow: 0 12px 35px rgba(0, 0, 0, .07); }
.browse-menu a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; font-size: 13px; }
.browse-menu a:hover { background: var(--ck-border); }
.saved-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; font-size: 11px; background: var(--ck-border); border-radius: 6px; }
.mobile-menu { position: absolute; top: 56px; left: 0; right: 0; background: var(--ck-bg); border-bottom: 1px solid var(--ck-border); padding: 12px 20px 20px; box-shadow: 0 12px 18px rgba(0, 0, 0, .04); }
.mobile-menu a, .mobile-menu button { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border: 0; background: none; width: 100%; text-align: left; font-size: 14px; border-radius: 10px; }
.mobile-menu a:hover, .mobile-menu button:hover { background: var(--ck-border); }
.hero { text-align: center; padding: 88px 20px 38px; }
.hero h1 { font-size: 60px; line-height: 1.1; font-weight: 600; letter-spacing: -2.9px; }
.hero > p { max-width: 600px; margin: 19px auto 0 !important; font-size: 15px; line-height: 1.5; color: var(--ck-muted); letter-spacing: -.25px; }
.hero-note { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 31px; font-size: 12px; color: var(--ck-muted); }
.collection-stats { display: inline-flex; border-radius: 14px; overflow: hidden; background: var(--ck-chip); border: 1px solid var(--ck-border); }
.collection-stats > span { display: flex; align-items: center; gap: 5px; padding: 8px 10px; font-size: 11px; line-height: 1; }
.collection-stats > span + span { border-left: 1px solid var(--ck-border); }
.collection-stats strong { font-weight: 500; color: var(--ck-text); }
.collection-stats svg { width: 15px !important; height: 15px !important; color: var(--ck-text); }
.collection, .closing-note, .site-footer { width: min(1184px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.collection { scroll-margin-top: 24px; min-height: 220px; }
.app-hub { width: min(1184px, calc(100% - 48px)); margin: 6px auto 38px; scroll-margin-top: 24px; }
.app-hub-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.app-hub-heading h2 { font-size: 22px; font-weight: 600; letter-spacing: -.6px; }
.app-hub-heading p { color: var(--ck-muted); font-size: 13px; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px; border: 1px solid var(--ck-border); border-radius: 24px; transition: border-color .16s, transform .16s; }
.app-card:hover { transform: translateY(-3px); border-color: var(--ck-accent); }
.app-card-email { background: var(--ck-blue); }
.app-card-locket { background: var(--ck-sand); }
.app-card-video { background: var(--ck-lavender); }
.app-card-animation { background: var(--ck-sage); }
.app-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 14px; background: var(--ck-chip); }
body[data-app="checklist"] .app-card-icon svg { width: 25px; height: 25px; }
.app-card h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.4px; }
.app-card > p { color: var(--ck-app-muted); font-size: 13px; line-height: 1.65; margin-bottom: 20px !important; }
.app-card-action { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; font-size: 12px; font-weight: 500; }
.category-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.category-card { grid-column: span 2; min-height: 360px; border-radius: 24px; padding: 40px; scroll-margin-top: 30px; background: var(--category-color); }
.category-card:nth-child(n+4) { grid-column: span 3; min-height: 304px; }
.category-card[data-category="mobile"] { --category-color: var(--ck-sand); }
.category-card[data-category="apps"] { --category-color: var(--ck-blue); }
.category-card[data-category="website"] { --category-color: var(--ck-lavender); }
.category-card[data-category="components"] { --category-color: var(--ck-peach); }
.category-card[data-category="flows"] { --category-color: var(--ck-sage); }
.category-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.category-heading h2 { font-size: 31px; line-height: 1.3; letter-spacing: -1.2px; font-weight: 600; }
.view-all { border: 0; padding: 7px 12px; border-radius: 12px; background: var(--ck-border); font-size: 12px !important; white-space: nowrap; color: var(--ck-text) !important; }
.view-all:hover { background: color-mix(in srgb, var(--ck-text) 16%, transparent); }
.topic-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; align-content: flex-start; }
.topic { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--ck-chip); font-size: 14px !important; font-weight: 500; letter-spacing: -.3px; text-align: left; transition: background .15s, transform .15s; }
.topic:hover { background: color-mix(in srgb, var(--ck-panel) 96%, transparent); transform: translateY(-1px); }
.topic svg { width: 18px !important; height: 18px !important; }
.topic-progress { font-size: 11px; font-weight: 600; color: var(--ck-accent); white-space: nowrap; }
.topic.complete { box-shadow: inset 0 0 0 1px var(--ck-accent); }
.closing-note { display: flex; align-items: center; gap: 20px; padding: 40px 10px 36px; margin-top: 20px; }
.closing-note > svg { width: 32px !important; height: 32px !important; }
.closing-note h2 { font-size: 18px; font-weight: 600; letter-spacing: -.5px; }
.closing-note p { font-size: 13px; line-height: 1.65; color: var(--ck-muted); margin-top: 4px !important; }
.closing-note > button { margin-left: auto; white-space: nowrap; }
.text-button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; border: 0; background: transparent; padding: 4px 0; font-size: 13px !important; color: var(--ck-muted) !important; }
.text-button:hover { color: var(--ck-text) !important; }
.text-button:disabled { opacity: .4; cursor: default; }
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 22px 10px 28px; border-top: 1px solid var(--ck-border); font-size: 12px; color: var(--ck-muted); }
.empty-state { text-align: center; padding: 35px 16px 90px; }
.empty-icon { font-size: 45px; font-weight: 300; }
.empty-state h2 { margin-top: 18px !important; font-size: 26px; letter-spacing: -.8px; font-weight: 600; }
.empty-state p { margin: 14px 0 24px !important; color: var(--ck-muted); }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 12px 20px; min-height: 44px; border: 0; border-radius: 12px; color: var(--ck-bg) !important; background: var(--ck-text); font-size: 14px !important; }
.primary-button:hover { opacity: .88; }
.no-script { padding: 40px; text-align: center; }
body[data-app="checklist"] dialog { margin: auto; border: 1px solid var(--ck-border); padding: 0; color: var(--ck-text); background: var(--ck-bg); box-shadow: 0 25px 80px rgba(0, 0, 0, .15); }
body[data-app="checklist"] dialog::backdrop { background: rgba(20, 24, 21, .48); }
.search-dialog { width: min(580px, calc(100% - 32px)); max-height: min(640px, calc(100dvh - 80px)); border-radius: 20px; }
.search-field { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--ck-border); }
.search-field:focus-within { box-shadow: inset 0 -2px 0 var(--ck-text); }
.search-field > svg { color: var(--ck-muted); }
.search-field input { min-width: 0; width: 100%; border: 0; background: transparent; color: var(--ck-text); padding: 2px; outline: none !important; font-size: 16px !important; }
.search-field input::placeholder { color: var(--ck-muted); }
.escape-button { border: 1px solid var(--ck-border); padding: 4px 7px; background: var(--ck-panel); border-radius: 6px; font-size: 11px !important; }
.search-results { padding: 8px; max-height: 430px; overflow: auto; }
.search-result { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; padding: 12px; background: transparent; border-radius: 12px; text-align: left; }
.search-result:hover, .search-result:focus-visible { background: var(--ck-border); outline-offset: -2px; }
.search-result .result-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--result-color, var(--ck-sage)); flex-shrink: 0; }
.result-copy { flex: 1; min-width: 0; }
.result-copy strong { display: block; font-size: 14px; font-weight: 500; }
.result-copy small { display: block; font-size: 12px; color: var(--ck-muted); margin-top: 2px; }
.result-arrow { color: var(--ck-muted); }
.search-feedback { padding: 0 20px; font-size: 12px; color: var(--ck-muted); }
.search-feedback:not(:empty) { padding-top: 14px; padding-bottom: 20px; }
.search-footer { display: flex; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--ck-border); font-size: 11px; color: var(--ck-muted); }
.search-footer kbd { font-family: inherit; margin-right: 3px; }
.checklist-dialog { width: min(740px, calc(100% - 32px)); max-height: calc(100dvh - 64px); border-radius: 24px; overflow: auto; }
.detail-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--ck-border); position: sticky; top: 0; z-index: 2; background: var(--ck-bg); }
.detail-top > span { color: var(--ck-muted); font-size: 13px; }
.detail-body { padding: 30px 36px 28px; }
.detail-heading { display: flex; align-items: center; gap: 17px; }
.detail-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; flex-shrink: 0; }
.detail-icon svg { width: 27px !important; height: 27px !important; }
.detail-kicker { font-size: 10px; font-weight: 500; letter-spacing: 1.2px; color: var(--ck-muted); margin-bottom: 4px !important; }
.detail-heading h2 { font-size: 32px; line-height: 1.25; letter-spacing: -1px; font-weight: 600; }
.detail-description { color: var(--ck-muted); margin-top: 20px !important; font-size: 14px; line-height: 1.6; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--ck-border); background: var(--ck-chip); border-radius: 10px; font-size: 12px !important; }
.secondary-button[aria-pressed="true"] { background: var(--ck-sage); }
.secondary-button svg { width: 15px !important; height: 15px !important; }
.progress-heading { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.progress-heading > span { font-weight: 500; }
.progress-heading .text-button { min-height: 30px; font-size: 12px !important; }
.progress-track { height: 5px; background: var(--ck-border); border-radius: 10px; overflow: hidden; margin: 8px 0 16px; }
.progress-track > span { display: block; height: 100%; width: 0; background: var(--ck-accent); border-radius: inherit; transition: width .2s ease; }
.check-item { display: flex; gap: 13px; padding: 18px 0; border-bottom: 1px solid var(--ck-border); cursor: pointer; }
.check-item input { appearance: none; width: 22px; height: 22px; margin: 3px 0 0; border: 1.5px solid var(--ck-muted); border-radius: 7px; background: transparent; flex-shrink: 0; cursor: pointer; position: relative; }
.check-item input:checked { background: var(--ck-accent); border-color: var(--ck-accent); }
.check-item input:checked::after { content: ""; position: absolute; width: 6px; height: 10px; border: solid var(--ck-bg); border-width: 0 2px 2px 0; transform: rotate(45deg); left: 7px; top: 3px; }
.check-item strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; }
.check-item small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--ck-muted); }
.check-item:has(input:checked) strong { color: var(--ck-accent); }
.detail-footnote { margin-top: 20px !important; font-size: 11px; color: var(--ck-muted); text-align: center; }
.howto-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 64px); border-radius: 24px; padding: 36px !important; position: relative; }
.howto-close { position: absolute; right: 16px; top: 16px; }
.howto-mark { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: var(--ck-sage); color: var(--ck-accent); border-radius: 13px; font-size: 25px; margin-bottom: 20px; }
.howto-dialog h2 { font-size: 32px; font-weight: 600; letter-spacing: -1px; line-height: 1.2; }
.howto-dialog ol { margin: 24px 0; padding-left: 20px; }
.howto-dialog li { padding-left: 5px; margin-bottom: 18px; font-size: 14px; }
.howto-dialog li strong { display: block; font-weight: 500; }
.howto-dialog li span { display: block; margin-top: 4px; color: var(--ck-muted); font-size: 13px; }
.toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 15px); z-index: 100; display: flex; align-items: center; gap: 16px; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: var(--ck-text); color: var(--ck-bg); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: 0 5px 20px rgba(0,0,0,.1); }
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast button { border: 0; background: none; color: inherit; text-decoration: underline; font-size: 12px; white-space: nowrap; }
@media (max-width: 1150px) and (min-width: 761px) { .category-card { padding: 28px; }.category-heading h2 { font-size: 26px; }.view-all { padding: 7px 9px; font-size: 11px !important; }.topic { padding: 12px; font-size: 13px !important; } }
@media (max-width: 900px) { .desktop-nav { gap: 17px; margin-left: 0; }.header-inner { width: calc(100% - 40px); }.header-actions { gap: 8px; }.category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.category-card, .category-card:nth-child(n+4) { grid-column: span 1; min-height: 320px; }.category-card:last-child { grid-column: span 2; }.hero h1 { font-size: 54px; } }
@media (max-width: 600px) {
  .header-inner { width: calc(100% - 32px); }.site-brand { gap: 8px; font-size: 14px; }.brand-word { display: none; }.desktop-nav { display: none; }.header-actions { gap: 9px; }.mobile-menu-toggle { display: inline-flex; width: 28px; }.theme-toggle { display: none; }.search-toggle { gap: 8px; }
  .hero { padding: 87px 16px 39px; }.hero h1 { font-size: clamp(40px, 12.3vw, 48px); line-height: 1.13; letter-spacing: -1.8px; max-width: 350px; margin: 0 auto !important; }.hero > p { font-size: 14px; margin-top: 20px !important; line-height: 1.55; }.hero > p br { display: none; }.hero-note { flex-direction: column; gap: 12px; margin-top: 33px; font-size: 12px; }.collection-stats > span { padding: 9px 11px; }
  .collection, .closing-note, .site-footer { width: calc(100% - 32px); }.category-grid { grid-template-columns: 1fr; }.category-card, .category-card:nth-child(n+4), .category-card:last-child { grid-column: auto; min-height: 0; padding: 40px; }.category-heading h2 { font-size: 31px; }.topic-list { margin-top: 24px; }.topic { min-height: 48px; padding: 12px 15px; font-size: 14px !important; }.view-all { padding: 7px 10px; font-size: 11px !important; }
  .closing-note { padding: 33px 4px 28px; align-items: flex-start; flex-wrap: wrap; gap: 15px; }.closing-note > div { flex: 1; }.closing-note > button { margin-left: 48px; }.closing-note p { font-size: 12px; }.closing-note p br { display: none; }.site-footer { padding: 22px 4px; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 11px; }
  .checklist-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0 !important; }.detail-top { padding: 10px 18px; }.detail-body { padding: 25px 22px 30px; }.detail-heading h2 { font-size: 28px; }.detail-heading { gap: 12px; }.detail-icon { width: 50px; height: 50px; }.detail-description { font-size: 13px; }.detail-actions { margin: 20px 0 24px; }.search-dialog { max-height: calc(100dvh - 56px); }.search-results { max-height: calc(100dvh - 220px); }.search-footer { font-size: 10px; }.howto-dialog { padding: 30px !important; }.toast { bottom: 18px; font-size: 12px; width: max-content; }
}
@media (max-width: 350px) { .category-card, .category-card:nth-child(n+4) { padding: 28px 24px; }.category-heading h2 { font-size: 26px; }.topic { padding: 12px; font-size: 13px !important; } }
@media (prefers-reduced-motion: reduce) { body[data-app="checklist"] *, body[data-app="checklist"] *::before, body[data-app="checklist"] *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Dedicated checklist pages and complete category collections. */
.menu-count { margin-left: auto; font-size: 11px; color: var(--ck-muted); }
.category-heading h2 { min-width: 0; }
.view-all { display: inline-flex; align-items: center; gap: 6px; }
.category-total { font-size: 10px; opacity: .75; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.catalog-card { display: flex; align-items: flex-start; gap: 16px; padding: 25px; border: 1px solid var(--ck-border); border-radius: 20px; background: var(--ck-chip); transition: background .15s, border-color .15s; min-width: 0; }
.catalog-card:hover { background: var(--ck-panel); border-color: var(--ck-muted); }
.catalog-card.complete { border-color: var(--ck-accent); }
.catalog-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.catalog-copy { min-width: 0; flex: 1; }
.catalog-copy > small { display: block; font-size: 10px; color: var(--ck-muted); margin-bottom: 3px; }
.catalog-copy h2 { font-size: 18px; letter-spacing: -.4px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.catalog-copy p { font-size: 12px; line-height: 1.65; color: var(--ck-muted); margin-top: 9px !important; }
.catalog-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; font-size: 11px; color: var(--ck-muted); }
.catalog-arrow { color: var(--ck-muted); font-size: 18px; }
.category-page .hero { padding-top: 70px; padding-bottom: 48px; }
.category-page .hero h1 { font-size: 54px; }
body[data-app="checklist"][data-page="detail"] { --detail-panel: #fff; --detail-canvas: var(--ck-blue); --ck-muted: #625b54; --ck-accent: #684d95; --detail-tip: #8d580d; background: var(--detail-canvas); }
body[data-page="detail"][data-category="mobile"] { --detail-canvas: var(--ck-sand); }
body[data-page="detail"][data-category="website"] { --detail-canvas: var(--ck-lavender); }
body[data-page="detail"][data-category="components"] { --detail-canvas: var(--ck-peach); }
body[data-page="detail"][data-category="flows"] { --detail-canvas: var(--ck-sage); }
[data-theme="dark"] body[data-app="checklist"][data-page="detail"] { --detail-panel: #222522; --ck-muted: #bbb6ad; --ck-accent: #c6b1e9; --detail-tip: #edc37d; }
body[data-page="detail"] .mobile-menu { background: var(--detail-canvas); }
body[data-page="detail"] .browse-menu { background: var(--detail-panel); }
.checklist-page { width: min(1052px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0 64px; }
.page-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ck-muted); margin-bottom: 24px; flex-wrap: wrap; }
.page-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-breadcrumb [aria-current] { color: var(--ck-text); }
.page-intro { margin-bottom: 30px; }
.page-title-row { display: flex; align-items: center; gap: 17px; }
.page-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
body[data-app="checklist"] .page-icon svg { width: 53px; height: 53px; stroke-width: 1.35; }
.page-title-row h1 { font-size: 60px; font-weight: 600; letter-spacing: -2.6px; line-height: 1.15; overflow-wrap: anywhere; }
.page-category { color: var(--ck-muted); font-weight: 500; }
.page-description { max-width: 728px; margin-top: 19px !important; font-size: 15px; color: var(--ck-muted); line-height: 1.6; }
.page-intro-meta { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 22px; }
.page-intro-meta > span { font-size: 11px; color: var(--ck-muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-actions .secondary-button { background: var(--ck-chip); }
.page-columns { display: grid; grid-template-columns: minmax(0, 728px) 300px; gap: 24px; align-items: start; }
.page-primary, .page-sidebar { min-width: 0; }
.page-primary { display: flex; flex-direction: column; gap: 18px; }
.page-sidebar { display: flex; flex-direction: column; gap: 16px; }
.checklist-panel, .white-panel { background: var(--detail-panel); border-radius: 24px; }
.checklist-panel { overflow: hidden; }
.page-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 32px; }
.page-progress-head > p { font-size: 19px; font-weight: 600; letter-spacing: -.4px; }
.reset-button { background: transparent; border: 1px solid var(--ck-accent); color: var(--ck-accent) !important; border-radius: 12px; min-height: 36px; padding: 6px 12px; font-size: 13px !important; font-weight: 500; }
.reset-button:hover { background: color-mix(in srgb, var(--ck-accent) 6%, transparent); }
.reset-button:disabled { opacity: .45; cursor: default; }
.page-progress-track { height: 3px; background: var(--ck-border); overflow: hidden; }
.page-progress-track > span { display: block; height: 100%; background: var(--ck-accent); transition: width .2s; }
.check-group { scroll-margin-top: 24px; }
.check-group-heading { display: flex; align-items: center; gap: 13px; padding: 24px 32px 18px; border-bottom: 1px solid var(--ck-border); background: color-mix(in srgb, var(--detail-canvas) 25%, var(--detail-panel)); }
.group-number { font-size: 11px; color: var(--ck-muted); border: 1px solid var(--ck-border); width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.check-group-heading > div { flex: 1; min-width: 0; }
.check-group-heading h2 { font-size: 16px; font-weight: 600; letter-spacing: -.3px; line-height: 1.4; }
.check-group-heading p { margin-top: 3px !important; font-size: 12px; color: var(--ck-muted); line-height: 1.6; }
.group-progress { font-size: 11px; color: var(--ck-muted); flex-shrink: 0; }
.page-check-item { display: flex; align-items: flex-start; gap: 13px; padding: 24px 32px; border-bottom: 1px solid var(--ck-border); cursor: pointer; }
.page-check-item:last-child { border-bottom: 0; }
.page-check-item input { appearance: none; margin: 3px 0 0; width: 20px; height: 20px; border: 1.7px solid var(--ck-accent); border-radius: 6px; background: transparent; flex-shrink: 0; cursor: pointer; position: relative; }
.page-check-item input:checked { background: var(--ck-accent); }
.page-check-item input:checked::after { content: ""; position: absolute; width: 6px; height: 10px; border: solid var(--detail-panel); border-width: 0 2px 2px 0; transform: rotate(45deg); left: 5px; top: 1px; }
.page-check-copy { min-width: 0; flex: 1; }
.page-check-copy > strong { display: block; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -.35px; }
.page-check-description { display: block; margin-top: 5px; color: var(--ck-muted); font-size: 14px; line-height: 1.6; }
.page-check-item:has(input:checked) .page-check-copy > strong { color: var(--ck-accent); }
.optional-label { display: inline-block; margin-left: 8px; font-size: 10px; color: var(--ck-muted); border: 1px solid var(--ck-border); border-radius: 6px; padding: 2px 6px; vertical-align: middle; letter-spacing: 0; }
.item-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; color: var(--detail-tip); font-size: 13px; line-height: 1.6; }
body[data-app="checklist"] .item-tip svg { width: 18px; height: 18px; margin-top: 2px; stroke-width: 1.35; }
.item-example { display: block; margin-top: 9px; padding: 10px 12px; border-radius: 10px; background: var(--ck-border); font-size: 12px; line-height: 1.6; color: var(--ck-muted); }
.item-example b { font-size: 10px; margin-right: 4px; font-weight: 600; }
.page-storage-note { font-size: 11px; color: var(--ck-muted); padding: 18px 24px; border-top: 1px solid var(--ck-border); text-align: center; }
.white-panel { padding: 26px 28px; }
.white-panel h2 { font-size: 13px; font-weight: 500; color: var(--ck-muted); line-height: 1.5; }
.outline-panel nav { margin: 14px -10px -8px; }
.outline-panel a, .mobile-outline nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 8px; font-size: 12px; }
.outline-panel a:hover, .mobile-outline nav a:hover { background: var(--ck-border); }
.outline-panel a[aria-current], .mobile-outline nav a[aria-current] { background: var(--ck-border); font-weight: 600; }
.outline-panel a small, .mobile-outline a small { color: var(--ck-muted); font-size: 10px; flex-shrink: 0; }
.related-panel > div { margin: 15px -6px -6px; }
.related-link { display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px; border-radius: 8px; }
.related-link:hover { background: var(--ck-border); }
.related-link > svg { color: var(--ck-muted); margin-top: 2px; width: 18px !important; height: 18px !important; }
.related-link > span:nth-child(2) { min-width: 0; flex: 1; }
.related-link strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; }
.related-link small { display: block; font-size: 10px; color: var(--ck-muted); margin-top: 2px; }
.related-arrow { color: var(--ck-muted); font-size: 12px; }
.export-panel > p { font-size: 11px; line-height: 1.65; color: var(--ck-muted); margin: 8px 0 15px !important; }
.export-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; border: 1px solid var(--ck-border); border-radius: 10px; padding: 9px 10px; background: transparent; font-size: 12px !important; margin-top: 8px; }
.export-button:hover { background: var(--ck-border); }
.export-button svg { width: 15px !important; height: 15px !important; }
.export-divider { height: 1px; background: var(--ck-border); margin: 16px 0; }
.export-panel > small { display: block; font-size: 10px; color: var(--ck-muted); line-height: 1.65; margin-top: 15px; }
.sidebar-note .note-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--ck-border); border-radius: 10px; font-size: 18px; margin-bottom: 14px; }
.sidebar-note h2 { color: var(--ck-text); font-size: 18px; font-weight: 600; letter-spacing: -.4px; line-height: 1.4; }
.sidebar-note p { color: var(--ck-muted); font-size: 12px; line-height: 1.7; margin: 12px 0 16px !important; }
.sidebar-note a { font-size: 11px !important; }
.panel-eyebrow { font-size: 9px; letter-spacing: 1.3px; color: var(--ck-muted); margin-bottom: 7px !important; }
.guidance-panel, .examples-panel { padding: 30px 32px; }
.guidance-panel > h2, .examples-panel > h2 { font-size: 24px; font-weight: 600; letter-spacing: -.7px; color: var(--ck-text); }
.guidance-entry { display: flex; align-items: flex-start; gap: 16px; padding-top: 24px; }
.guidance-number { color: var(--ck-muted); font-size: 12px; border: 1px solid var(--ck-border); padding: 5px 8px; border-radius: 8px; flex-shrink: 0; }
.guidance-entry h3, .example-entry h3 { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; }
.guidance-entry p, .example-entry p { margin-top: 5px !important; font-size: 13px; line-height: 1.7; color: var(--ck-muted); }
.example-entry { position: relative; padding: 20px 20px 20px 50px; background: color-mix(in srgb, var(--detail-canvas) 55%, var(--detail-panel)); border-radius: 14px; margin-top: 16px; }
.example-mark { position: absolute; left: 20px; top: 23px; }
.example-mark svg { width: 17px !important; height: 17px !important; }
.checklist-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.checklist-pagination a { padding: 14px 4px; min-width: 0; }
.checklist-pagination a:last-child { text-align: right; }
.checklist-pagination small { display: block; font-size: 10px; color: var(--ck-muted); }
.checklist-pagination strong { display: block; font-size: 14px; font-weight: 500; margin-top: 3px; }
.checklist-pagination a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.detail-footer { width: min(1052px, calc(100% - 48px)); }
.mobile-outline { display: none; }
@media (max-width: 1050px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.catalog-card { padding: 23px; }.page-columns { grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; }.page-title-row h1 { font-size: 50px; }.white-panel { padding: 24px; } }
@media (max-width: 800px) {
  .page-columns { grid-template-columns: minmax(0, 1fr); }.page-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }.outline-panel { display: none; }.page-title-row h1 { font-size: 46px; letter-spacing: -1.6px; }.page-intro-meta { flex-wrap: wrap; }.mobile-outline { display: block; background: var(--ck-chip); border: 1px solid var(--ck-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; }.mobile-outline summary { font-size: 12px; cursor: pointer; }.mobile-outline nav { padding-top: 10px; }
}
@media (max-width: 600px) {
  .catalog-grid { grid-template-columns: 1fr; }.catalog-card { padding: 24px; }.category-page .hero { padding: 58px 20px 38px; }.category-page .hero h1 { font-size: 46px; }.checklist-page { width: calc(100% - 48px); padding: 30px 0 35px; }.page-breadcrumb { margin-bottom: 26px; font-size: 10px; gap: 6px; }.page-title-row { display: block; }.page-icon { margin-bottom: 17px; }body[data-app="checklist"] .page-icon svg { width: 46px; height: 46px; }.page-title-row h1 { font-size: 36px; letter-spacing: -1.35px; line-height: 1.25; }.page-category { font-size: 32px; }.page-description { margin-top: 14px !important; font-size: 14px; line-height: 1.6; }.page-intro-meta { margin-top: 18px; gap: 12px; }.page-actions { gap: 7px; }.page-actions .secondary-button { font-size: 11px !important; padding: 8px 10px; }.page-intro { margin-bottom: 22px; }.page-progress-head { padding: 18px 24px; }.page-progress-head > p { font-size: 16px; }.reset-button { font-size: 12px !important; padding: 6px 10px; }.page-check-item { padding: 24px; gap: 12px; }.page-check-copy > strong { font-size: 17px; }.page-check-description { font-size: 13px; }.item-tip { font-size: 12px; }.check-group-heading { padding: 20px 24px 16px; gap: 10px; }.check-group-heading h2 { font-size: 14px; }.check-group-heading p { font-size: 11px; }.group-number { width: 24px; height: 24px; font-size: 10px; }.group-progress { font-size: 10px; }.page-sidebar { display: flex; }.white-panel { padding: 25px; }.guidance-panel > h2, .examples-panel > h2 { font-size: 21px; }.guidance-entry { gap: 12px; }.guidance-entry h3 { font-size: 14px; }.guidance-entry p { font-size: 12px; }.example-entry { padding: 18px 18px 18px 42px; }.example-mark { left: 16px; top: 21px; }.example-entry p { font-size: 12px; }.page-primary { gap: 16px; }.checklist-pagination { gap: 12px; }.checklist-pagination strong { font-size: 12px; }.detail-footer { width: calc(100% - 48px); }
}
@media (max-width: 350px) { .checklist-page { width: calc(100% - 32px); }.page-title-row h1 { font-size: 32px; }.page-category { font-size: 28px; }.page-check-item { padding: 21px 20px; }.check-group-heading { padding: 18px 20px; }.page-progress-head { padding: 18px 20px; }.page-progress-head > p { font-size: 14px; }.page-intro-meta > span { font-size: 10px; }.category-total { display: none; } }
@media print {
  body[data-app="checklist"][data-page="detail"] { background: #fff; --ck-text: #171717; --ck-muted: #555; --detail-panel: #fff; --detail-canvas: #fff; --ck-accent: #171717; --detail-tip: #555; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .site-header, .page-breadcrumb, .page-actions, .page-sidebar, .mobile-outline, .checklist-pagination, .detail-footer, .toast, .reset-button, .page-storage-note { display: none !important; }.checklist-page { width: 100%; padding: 0; }.page-columns { display: block; }.page-title-row h1 { font-size: 30px; }.page-category { font-size: 22px; }.page-intro { margin-bottom: 20px; }.page-description { font-size: 12px; }.checklist-panel, .white-panel { border-radius: 0; box-shadow: none; }.page-progress-head { padding: 10px 0; }.check-group-heading { padding: 18px 0 10px; background: #fff; }.page-check-item { padding: 14px 0; break-inside: avoid; }.page-check-copy > strong { font-size: 13px; }.page-check-description, .item-tip { font-size: 11px; }.guidance-panel, .examples-panel { padding: 20px 0; }.guidance-entry, .example-entry { break-inside: avoid; }
}

/* Language controls and topic symbols retain their shape in long translations. */
.language-control { display: flex; align-items: center; gap: 6px; margin: 0; }
.language-submit { min-height: 38px; border: 1px solid var(--ck-border); border-radius: 10px; padding: 6px 8px; background: var(--ck-chip); color: var(--ck-text); font: inherit; font-size: 12px; cursor: pointer; }
body:has(.language-submit) .site-header { height: auto; min-height: 57px; }
body:has(.language-submit) .header-inner { height: auto; min-height: 57px; padding-block: 8px; flex-wrap: wrap; gap: 8px; }
body:has(.language-submit) .header-actions { max-width: 100%; min-width: 0; }
body:has(.language-submit) .language-control { flex-wrap: wrap; justify-content: flex-end; }
body:has(.language-submit) :is(.search-toggle, .mobile-menu-toggle, .theme-toggle, .browse-dropdown) { display: none; }
.language-picker { max-width: 128px; min-width: 0; min-height: 38px; border: 1px solid var(--ck-border); border-radius: 10px; padding: 6px 8px; background: var(--ck-chip); color: var(--ck-text); font: inherit; font-size: 12px; cursor: pointer; }
.category-heading h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body[data-app="checklist"] .category-heading h2 svg { width: 25px; height: 25px; stroke-width: 1.5; }
.topic > span:first-of-type { overflow-wrap: anywhere; }
.hero h1 { max-width: 780px; margin-inline: auto !important; overflow-wrap: anywhere; }
.page-title-row h1 { min-width: 0; }
.language-error { padding: 12px 20px; background: var(--ck-peach); font-size: 13px; text-align: center; }
.export-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.export-tools > p { grid-column: 1 / -1; font-size: 11px; color: var(--ck-muted); line-height: 1.6; margin-bottom: 3px !important; }
.export-tools .export-button { margin: 0; min-width: 0; padding: 9px 6px; font-size: 11px !important; }
body[data-app="checklist"] .export-tools svg { width: 16px; height: 16px; }

/* Flow walkthroughs use separate illustrated state cards. */
.flow-page .checklist-panel { background: transparent; overflow: visible; }
.flow-page .page-progress-head { background: var(--detail-panel); border-radius: 20px 20px 0 0; }
.flow-page .page-progress-track { border-radius: 0 0 20px 20px; background: var(--detail-panel); }
.flow-page .page-checklist-items { display: flex; flex-direction: column; gap: 24px; margin-top: 18px; }
.flow-page .check-group:not(.flow-group) { background: var(--detail-panel); border-radius: 24px; overflow: hidden; }
.flow-page .page-storage-note { margin-top: 18px; border: 0; }
.flow-group .check-group-heading { padding: 8px 4px 18px; background: transparent; border: 0; }
.flow-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--detail-panel); border-radius: 24px; overflow: hidden; margin-bottom: 20px; }
.flow-card:last-child { margin-bottom: 0; }
.flow-card-copy { align-self: center; padding: 28px; min-width: 0; }
.flow-step-number { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ck-muted); margin-bottom: 14px; }
.flow-card .page-check-item { padding: 0; border: 0; }
.flow-card .page-check-copy > strong { font-size: 20px; line-height: 1.35; }
.flow-card .page-check-description { font-size: 14px; margin-top: 9px; }
.flow-card-demo { display: flex; align-items: center; min-width: 0; background: color-mix(in srgb, var(--ck-text) 4%, var(--detail-panel)); border: 8px solid var(--detail-panel); border-radius: 24px; padding: 26px; }
.flow-demo { min-width: 0; width: 100%; font-size: 12px; line-height: 1.5; }
.demo-caption { color: var(--ck-muted); font-size: 10px; font-weight: 500; margin-bottom: 14px !important; }
.demo-caption { display: inline-block; }
body[data-app="checklist"] .demo-product { display: block; width: 100%; height: 105px; margin-bottom: 10px; color: var(--ck-accent); }
.demo-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 110px; padding: 16px 12px; border: 1px dashed var(--ck-muted); border-radius: 10px; text-align: center; cursor: pointer; }
.demo-drop.is-dragging { background: var(--ck-sage); border-color: var(--ck-accent); }
.demo-drop strong { font-size: 12px; font-weight: 500; }
.demo-drop .demo-muted { margin-top: 0 !important; }
progress.demo-progress { display: block; width: 100%; border: 0; appearance: none; }
progress.demo-progress::-webkit-progress-bar { background: var(--ck-border); border-radius: 6px; }
progress.demo-progress::-webkit-progress-value { background: var(--ck-accent); border-radius: 6px; }
progress.demo-progress::-moz-progress-bar { background: var(--ck-accent); border-radius: 6px; }
.demo-panel { padding: 18px; background: var(--detail-panel); border: 1px solid var(--ck-border); border-radius: 14px; }
.demo-label { display: block; font-size: 11px; font-weight: 500; margin-bottom: 6px; }
body[data-app="checklist"] .demo-input { display: block; width: 100%; min-width: 0; height: 38px; border: 1px solid var(--ck-muted); border-radius: 8px; padding: 7px 10px; color: var(--ck-text); background: var(--detail-panel); font-size: 12px; }
.demo-input[aria-invalid="true"] { border-color: #b33338; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.demo-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 10px; border: 1px solid var(--ck-border); border-radius: 8px; background: var(--detail-panel); font-size: 11px !important; line-height: 1.4; text-align: center; }
.demo-button.is-primary { background: #684d95; border-color: #684d95; color: #fff !important; }
.demo-button.is-danger { background: #b33338; border-color: #b33338; color: #fff !important; }
.demo-button:disabled { background: color-mix(in srgb, var(--ck-muted) 15%, var(--detail-panel)); border-color: transparent; color: var(--ck-muted) !important; cursor: default; }
.demo-feedback { margin-top: 10px !important; font-size: 11px; line-height: 1.6; color: var(--ck-muted); min-height: 18px; }
.demo-feedback[data-tone="error"] { color: #b33338; }
.demo-feedback[data-tone="success"] { color: #38624c; }
.demo-chip { display: inline-flex; padding: 4px 7px; border-radius: 6px; background: var(--ck-sage); font-size: 10px; }
.demo-choice { border: 1px solid var(--ck-border); border-radius: 7px; padding: 6px 9px; background: var(--detail-panel); font-size: 11px !important; }
.demo-choice[aria-pressed="true"] { border-color: var(--ck-accent); color: var(--ck-accent) !important; background: var(--ck-sage); }
.demo-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.demo-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--ck-border); padding: 9px; border-radius: 8px; }
.demo-row > span { min-width: 0; overflow-wrap: anywhere; }
.demo-progress { height: 5px; overflow: hidden; border-radius: 6px; background: var(--ck-border); margin-top: 12px; }
.demo-progress > span { display: block; height: 100%; background: var(--ck-accent); }
.demo-summary { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.demo-total { border-top: 1px solid var(--ck-border); padding-top: 9px; font-weight: 600; }
.demo-code { font: inherit; font-size: 18px; letter-spacing: 5px; padding: 10px 0; }
.demo-muted { font-size: 10px; color: var(--ck-muted); margin-top: 14px !important; line-height: 1.6; }
.demo-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--ck-border); border-top-color: var(--ck-accent); border-radius: 50%; animation: demo-spin 1s linear infinite; }
@keyframes demo-spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .demo-feedback[data-tone="error"] { color: #ffb2b4; }
[data-theme="dark"] .demo-feedback[data-tone="success"] { color: #a8cbb6; }
[data-theme="dark"] .demo-input[aria-invalid="true"] { border-color: #ffb2b4; }

/* Gesture examples expose both touch actions and keyboard controls. */
.gesture-lab { padding: 30px 32px; }
.gesture-lab > h2 { font-size: 24px; font-weight: 600; color: var(--ck-text); letter-spacing: -.6px; }
.gesture-layout { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; margin-top: 22px; align-items: center; }
.gesture-modes { display: flex; flex-wrap: wrap; gap: 7px; }
.gesture-modes button { border: 1px solid var(--ck-border); border-radius: 8px; background: transparent; padding: 7px 9px; font-size: 11px !important; line-height: 1.5; }
.gesture-modes button[aria-pressed="true"] { border-color: var(--ck-accent); color: var(--ck-accent); background: var(--ck-sage); }
.gesture-instruction { font-size: 12px; color: var(--ck-muted); line-height: 1.7; margin-top: 16px !important; }
.gesture-fallback { margin-top: 14px; }
.gesture-phone { position: relative; border: 3px solid var(--ck-text); border-radius: 28px; padding: 30px 12px 26px; width: 200px; min-height: 305px; background: var(--detail-panel); touch-action: none; user-select: none; overflow: hidden; }
.phone-island { position: absolute; width: 50px; height: 7px; background: var(--ck-text); left: 50%; top: 10px; transform: translateX(-50%); border-radius: 7px; }
.phone-heading { display: flex; align-items: center; gap: 6px; font-size: 10px; min-height: 26px; margin-bottom: 10px; }
.phone-heading button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; background: transparent; padding: 3px; }
body[data-app="checklist"] .phone-heading svg { width: 16px; height: 16px; }
.phone-home { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; border-radius: 4px; background: var(--ck-text); }
.phone-hint { position: absolute; left: 0; top: 110px; height: 42px; width: 20px; display: none; align-items: center; justify-content: center; background: var(--ck-accent); color: var(--detail-panel); border-radius: 0 8px 8px 0; }
.show-hint .phone-hint { display: flex; }
.gesture-list { display: flex; flex-direction: column; gap: 8px; }
.gesture-row { display: flex; align-items: center; gap: 6px; padding: 12px 8px; background: var(--ck-bg); border-radius: 9px; font-size: 11px; min-height: 46px; }
.gesture-row > span { flex: 1; min-width: 0; }
.gesture-row > button { display: none; border: 0; background: #b33338; color: #fff !important; border-radius: 6px; padding: 7px 5px; font-size: 10px !important; }
.gesture-row.show-actions > button { display: block; }
.gesture-context { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gesture-picture { overflow: hidden; height: 164px; border-radius: 12px; }
body[data-app="checklist"] .gesture-picture svg { width: 100%; height: 100%; transform: scale(var(--gesture-zoom, 1)); }
.gesture-received { box-shadow: 0 0 0 5px var(--ck-sage); }
@media (max-width: 1000px) and (min-width: 601px) { .desktop-nav { gap: 12px; margin-left: 0; }.header-actions { gap: 8px; }.search-toggle > span { display: none; }.language-picker { max-width: 110px; }.category-heading { flex-wrap: wrap; }.flow-card-demo { padding: 18px; }.flow-card-copy { padding: 24px; } }
@media (max-width: 600px) {
  .language-picker { max-width: 105px; min-height: 36px; font-size: 11px; padding: 6px; }.header-actions { gap: 8px; }.search-toggle > span { display: none; }.category-heading { align-items: flex-start; }.category-heading h2 { font-size: 27px; }.category-card { padding: 32px !important; }.view-all { white-space: normal; text-align: center; line-height: 1.4; }.flow-card { grid-template-columns: minmax(0, 1fr); }.flow-card-copy { padding: 26px; }.flow-card .page-check-copy > strong { font-size: 18px; }.flow-card-demo { padding: 24px; }.flow-card .page-check-description { font-size: 13px; }.gesture-lab { padding: 25px; }.gesture-lab > h2 { font-size: 21px; }.gesture-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }.gesture-phone { justify-self: center; }.flow-page .page-checklist-items { gap: 20px; }
}
@media (max-width: 350px) { .language-picker { max-width: 92px; }.header-actions { gap: 5px; }.category-heading h2 { font-size: 23px; }.category-card { padding: 26px 22px !important; }.page-actions .secondary-button { max-width: 100%; }.flow-card-demo { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .demo-spinner { animation: none; } }
@media print { .flow-card { break-inside: avoid; border: 1px solid #ddd; border-radius: 10px; }.flow-card-copy { padding: 15px; }.flow-card-demo { padding: 15px; }.export-tools, .gesture-lab { display: none !important; } }
@media (max-width: 1000px) { .desktop-nav { display: none; }.mobile-menu-toggle { display: inline-flex; }.mobile-menu { max-height: calc(100dvh - 57px); overflow-y: auto; overscroll-behavior: contain; } }
@media (max-width: 700px) { .app-hub-heading { align-items: flex-start; flex-direction: column; gap: 4px; }.app-grid { grid-template-columns: minmax(0, 1fr); }.app-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 24px; }.app-card-icon { grid-row: 1 / 4; margin-bottom: 0; }.app-card h3 { font-size: 19px; }.app-card > p { margin-bottom: 14px !important; }.app-card-action { grid-column: 2; } }
@media (max-width: 600px) { .app-hub { width: calc(100% - 32px); margin-bottom: 28px; }.app-hub-heading h2 { font-size: 20px; } }
@media print { .app-hub { display: none; } }


/* Catalogue hierarchy: show a useful overview, then browse focused collections. */
.hero { padding: 54px 20px 30px; }
.hero .hero-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--ck-accent); margin: 0 auto 14px !important; }
.hero h1 { font-size: clamp(36px, 4.2vw, 54px); letter-spacing: -.045em; line-height: 1.12; }
.hero > p { margin-top: 14px !important; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.hero-actions .primary-button, .hero-actions .secondary-button { min-height: 44px; font-size: 13px !important; padding: 10px 16px; gap: 10px; border-radius: 12px; }
.hero-actions svg { width: 17px !important; height: 17px !important; }
.hero-note { margin-top: 18px; }
.collection-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 20px 0 18px; }
.collection-heading h2 { font-size: 22px; font-weight: 600; letter-spacing: -.6px; }
.collection-heading p { font-size: 13px; color: var(--ck-muted); margin-top: 5px !important; }
.collection-heading > a { white-space: nowrap; font-size: 12px !important; }
.category-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.category-nav a, .category-outline a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12px; border: 1px solid var(--ck-border); border-radius: 10px; background: var(--ck-panel); }
.category-nav a:hover, .category-outline a:hover { border-color: var(--ck-accent); }
.category-nav a[aria-current="page"] { background: var(--ck-accent); color: var(--ck-bg); border-color: var(--ck-accent); }
.category-nav svg { width: 17px !important; height: 17px !important; }
.category-outline { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 26px; }
.category-outline a { border-radius: 20px; background: transparent; }
.category-outline small { color: var(--ck-muted); font-size: 10px; }
.category-card { min-height: 0; padding: 28px; border: 1px solid color-mix(in srgb, var(--ck-text) 9%, transparent); }
.category-card:nth-child(n+4) { min-height: 0; }
.category-heading { align-items: flex-start; }
.category-heading h2 { font-size: 27px; letter-spacing: -.8px; }
.category-description { font-size: 12px; color: var(--ck-muted); margin-top: 10px !important; min-height: 36px; }
.topic-list { gap: 8px; margin-top: 20px; }
.topic { min-height: 44px; padding: 10px 12px; font-size: 13px !important; border: 1px solid color-mix(in srgb, var(--ck-text) 6%, transparent); border-radius: 13px; }
.topic:hover { transform: none; border-color: var(--ck-accent); }
.view-all { padding: 7px 9px; font-size: 11px !important; border-radius: 10px; }
.category-total { font-size: 10px; opacity: .8; padding-left: 4px; }
.category-page .hero { text-align: left; width: min(1184px, calc(100% - 48px)); margin-inline: auto; padding: 38px 0 20px; }
.category-page .hero h1, .category-page .hero > p { margin-inline: 0 !important; }
.category-page .hero h1 { font-size: 44px; }
.category-page .hero-eyebrow, .category-page .hero-actions, .category-page .hero-note > span, .category-page #collectionHeading { display: none; }
.category-page .hero-note { justify-content: flex-start; margin-top: 16px; }
.category-page .collection { margin-top: 8px; }
.category-collections { display: grid; gap: 36px; }
.catalog-collection { scroll-margin-top: 24px; }
.catalog-collection-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ck-border); }
.catalog-collection-heading h2 { font-size: 23px; font-weight: 600; letter-spacing: -.6px; }
.catalog-collection-heading p { flex-basis: 100%; color: var(--ck-muted); font-size: 12px; order: 3; }
.catalog-collection-heading .collection-count, .catalog-collection-heading .count { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 7px; border: 1px solid var(--ck-border); border-radius: 8px; font-size: 11px; color: var(--ck-muted); }
.catalog-card { border: 1px solid var(--ck-border); padding: 24px; border-radius: 16px; transition: border-color .16s, background .16s; }
.catalog-card:hover { transform: none; border-color: var(--ck-accent); }
.catalog-card h2 { font-size: 19px; line-height: 1.35; }
.catalog-card p { margin-top: 7px !important; }
.catalog-grid { align-items: stretch; }
.app-hub { margin-top: 44px; margin-bottom: 28px; padding-top: 26px; border-top: 1px solid var(--ck-border); }
.app-hub-heading h2 { font-size: 18px; }
.app-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 12px; padding: 18px; border-radius: 16px; }
.app-card-icon { width: 38px; height: 38px; grid-row: 1 / 3; margin: 0; border-radius: 11px; }
.app-card h3 { font-size: 15px; margin: 0; }
.app-card > p { font-size: 12px; line-height: 1.5; margin-bottom: 0 !important; }
.app-card-action { grid-column: 2; margin-top: 8px; font-size: 11px; }
.app-card:hover { transform: none; }
.checklist-panel, .white-panel { border: 1px solid var(--ck-border); }
.check-group-heading { scroll-margin-top: 18px; }
.page-check-item { min-width: 0; }
.page-check-copy { min-width: 0; overflow-wrap: anywhere; }
.page-check-item:has(input:disabled) { cursor: default; }
.detail-resources { margin-top: 16px; display: grid; gap: 10px; }
.resource-link { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: var(--ck-chip); border: 1px solid var(--ck-border); border-radius: 12px; }
.resource-link span { min-width: 0; flex: 1; }
.resource-link strong { display: block; font-size: 13px; font-weight: 500; }
.resource-link small { display: block; margin-top: 3px; font-size: 11px; color: var(--ck-muted); }
.resource-link:hover { border-color: var(--ck-accent); }
.reference-note { font-size: 11px; color: var(--ck-muted); margin-top: 14px !important; line-height: 1.6; }
.detail-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 24px 0; }
.detail-tabs button, .detail-tabs a { min-height: 38px; padding: 8px 12px; font-size: 12px !important; border: 1px solid var(--ck-border); border-radius: 10px; background: var(--ck-panel); }
.detail-tabs [aria-selected="true"], .detail-tabs [aria-current="true"] { background: var(--ck-accent); color: var(--ck-bg); border-color: var(--ck-accent); }
.tools-section { width: min(1184px, calc(100% - 48px)); margin: 42px auto 0; scroll-margin-top: 24px; }
.tools-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tools-heading h2 { font-size: 24px; font-weight: 600; letter-spacing: -.7px; }
.tools-heading p { color: var(--ck-muted); font-size: 12px; }
.tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; background: var(--ck-panel); border: 1px solid var(--ck-border); border-radius: 18px; padding: 24px; min-width: 0; }
.tool-card h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.tool-card p { color: var(--ck-muted); font-size: 12px; line-height: 1.65; }
.tool-card > a { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; font-size: 12px; margin-top: auto; padding-top: 8px; }
.tool-card > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tool-card svg { width: 25px !important; height: 25px !important; color: var(--ck-accent); }
.tool-card details { font-size: 11px; color: var(--ck-muted); line-height: 1.7; }
.tool-card summary { cursor: pointer; min-height: 30px; display: flex; align-items: center; }
.tool-card details p { margin-top: 8px !important; font-size: 11px; }
.language-picker { max-width: 112px; }
.desktop-nav { gap: 20px; margin-left: 16px; }
.header-actions { gap: 12px; }
.no-script { padding: 16px; font-size: 12px; color: var(--ck-muted); }
@media (max-width: 1120px) {
  .category-card { padding: 24px; }
  .category-heading h2 { font-size: 24px; }
  .category-heading { flex-wrap: wrap; }
  .desktop-nav { gap: 14px; margin-left: 0; }
  .header-inner { gap: 12px; }
  .site-brand .brand-word { display: none; }
}
@media (max-width: 800px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-card, .category-card:nth-child(n+4) { grid-column: auto; }
  .category-card:last-child { grid-column: 1 / -1; }
  .collection-heading > a { display: none; }
  .tools-grid { grid-template-columns: 1fr; gap: 12px; }
  .tool-card { padding: 20px; }
  .tools-heading { display: block; }
  .tools-heading p { margin-top: 6px !important; }
  .app-grid { grid-template-columns: 1fr; gap: 10px; }
  .app-hub-heading { flex-wrap: wrap; gap: 5px; }
}
@media (max-width: 600px) {
  .hero { padding: 36px 20px 22px; }
  .hero h1 { font-size: 36px; }
  .hero > p { font-size: 13px; }
  .hero-note > span { display: none; }
  .collection, .app-hub, .tools-section { width: calc(100% - 32px); }
  .collection-heading { margin-top: 14px; }
  .collection-heading h2 { font-size: 20px; }
  .category-nav { gap: 6px; }
  .category-nav a { padding: 8px 10px; font-size: 11px; }
  .category-nav svg { width: 15px !important; height: 15px !important; }
  .category-grid { grid-template-columns: 1fr; gap: 12px; }
  .category-card:last-child { grid-column: auto; }
  .category-card { padding: 24px; border-radius: 20px; }
  .category-heading { flex-wrap: nowrap; }
  .category-heading h2 { font-size: 25px; }
  .category-description { min-height: 0; }
  .topic-list { margin-top: 16px; }
  .topic { padding: 10px 12px; min-height: 44px; }
  .category-page .hero { width: calc(100% - 32px); padding: 28px 0 14px; }
  .category-page .hero h1 { font-size: 36px; }
  .catalog-collection-heading h2 { font-size: 21px; }
  .catalog-collection-heading { margin-bottom: 12px; }
  .catalog-card { padding: 20px; }
  .checklist-page { width: calc(100% - 32px); }
  .page-check-item { padding: 20px; }
  .page-check-copy > strong { font-size: 16px; }
  .check-group-heading { padding: 20px; }
  .guidance-panel, .examples-panel { padding: 24px; }
  .detail-tabs { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-app="checklist"] *, body[data-app="checklist"] *::before, body[data-app="checklist"] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 760px) {
  .page-intro-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .page-intro-meta .page-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .page-intro-meta .page-actions .secondary-button { min-width: 0; min-height: 48px; white-space: normal; line-height: 1.3; justify-content: center; }
}

body[data-app="checklist"] :focus-visible { outline: 3px solid var(--ck-accent); outline-offset: 3px; }
.hero .hero-eyebrow { font-size: 11px; }
.hero > p, .page-description { color: var(--ck-muted); font-size: 16px; line-height: 1.65; }
.category-card { border-color: var(--ck-border); border-top: 3px solid var(--category-edge, var(--ck-accent)); }
.category-card[data-category="mobile"] { --category-edge: #967126; }
.category-card[data-category="apps"] { --category-edge: #43769d; }
.category-card[data-category="website"] { --category-edge: #8161a3; }
.category-card[data-category="components"] { --category-edge: #a5643d; }
.category-card[data-category="flows"] { --category-edge: #447d5e; }
[data-theme="dark"] .category-card { border-top-color: var(--ck-accent); }
.category-description, .catalog-card p, .collection-heading p, .catalog-collection-heading p, .tool-card p { font-size: 14px; line-height: 1.65; }
.category-heading h2 { font-weight: 650; }
.topic { background: var(--ck-chip); border-color: var(--ck-control-border); font-size: 14px !important; font-weight: 550; }
.category-total { color: inherit; opacity: 1; font-size: 11px; }
.view-all { background: var(--ck-panel); border: 1px solid var(--ck-control-border); min-height: 36px; font-size: 12px !important; }
.category-nav a, .category-outline a { border-color: var(--ck-control-border); font-size: 13px; }
.catalog-card, .tool-card { background: var(--ck-panel); }
.icon-button:hover, .browse-menu a:hover, .mobile-menu a:hover, .mobile-menu button:hover, .outline-panel a:hover, .outline-panel a[aria-current], .mobile-outline nav a:hover, .mobile-outline nav a[aria-current], .related-link:hover, .export-button:hover, .saved-count { background: var(--ck-hover); }
.app-card { border-color: var(--ck-control-border); }
.app-card h3 { font-size: 16px; }
.app-card > p, .app-card-action, .tools-heading p, .resource-link small, .reference-note { font-size: 13px; }
.white-panel h2 { color: var(--ck-text); font-weight: 600; }
.page-title-row h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.page-title-row .page-category { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--ck-control-border); border-radius: 9px; padding: 6px 10px; font-size: 13px; font-weight: 550; line-height: 1.5; letter-spacing: normal; background: var(--ck-chip); color: var(--ck-muted); }
.page-check-item { transition: border-color 140ms ease; }
.page-check-item:has(input:checked) { background: color-mix(in srgb, var(--ck-accent) 7%, var(--detail-panel)); }
.page-check-item:has(input:focus-visible) { box-shadow: inset 3px 0 var(--ck-accent); }
.page-check-copy > strong { font-weight: 600; }
.page-check-description { color: var(--ck-muted); font-size: 15px; line-height: 1.7; }
.page-storage-note, .group-progress, .page-intro-meta > span { font-size: 12px; }
.item-example { background: color-mix(in srgb, var(--detail-canvas) 58%, var(--detail-panel)); color: var(--ck-text); }
.search-dialog { width: min(660px, calc(100% - 32px)); }
.search-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 20px; border-bottom: 1px solid var(--ck-border); }
.search-filter { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 7px 11px; border: 1px solid var(--ck-control-border); border-radius: 9px; background: var(--ck-panel); color: var(--ck-text); font-size: 12px !important; }
.search-filter[aria-pressed="true"], .search-filter[aria-selected="true"] { background: var(--ck-accent); color: var(--ck-bg) !important; border-color: var(--ck-accent); }
.search-clear { flex-shrink: 0; min-height: 36px; padding: 6px 10px; border: 1px solid var(--ck-control-border); border-radius: 8px; background: var(--ck-panel); font-size: 12px !important; }
.search-result { border: 1px solid transparent; align-items: flex-start; }
.search-result:hover, .search-result:focus-visible { background: var(--ck-panel); border-color: var(--ck-control-border); }
.result-copy strong { font-weight: 600; }
.search-result-description { display: block; margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ck-muted); overflow-wrap: anywhere; }
.search-result mark { color: var(--ck-text); background: var(--ck-sand); border-radius: 3px; padding: 1px 0; font-weight: 650; }
.search-results { max-height: min(430px, 52dvh); overscroll-behavior: contain; }
.search-feedback:empty { display: none; }
.continue-section { width: min(1184px, calc(100% - 48px)); margin: 4px auto 30px; padding: 22px; border: 1px solid var(--ck-border); border-radius: 18px; background: var(--ck-panel); }
.continue-section h2 { font-size: 20px; font-weight: 650; letter-spacing: -.4px; }
.continue-section > p, .continue-heading p { font-size: 13px; color: var(--ck-muted); margin-top: 5px !important; }
.continue-heading { margin-bottom: 16px; }
.continue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.continue-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: start; gap: 10px; min-width: 0; padding: 17px; border: 1px solid var(--ck-control-border); border-radius: 12px; background: var(--ck-panel); }
.continue-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 36px; border-radius: 9px; background: var(--continue-color, var(--ck-sage)); }
body[data-app="checklist"] .continue-icon svg { width: 19px; height: 19px; }
.continue-copy { display: grid; gap: 5px; min-width: 0; }
.continue-copy strong { overflow-wrap: anywhere; }
.continue-progress { font-size: 12px; color: var(--ck-muted); }
.continue-track { display: block; height: 5px; margin-top: 3px; border-radius: 5px; background: var(--ck-border); overflow: hidden; }
.continue-track > span { display: block; height: 100%; border-radius: inherit; background: var(--ck-accent); }
.continue-arrow { color: var(--ck-accent); align-self: center; }
.continue-card strong { font-size: 15px; font-weight: 600; }
.continue-card small { font-size: 12px; color: var(--ck-muted); }
.continue-card progress { width: 100%; height: 6px; border: 0; border-radius: 6px; overflow: hidden; accent-color: var(--ck-accent); background: var(--ck-border); }
.continue-card progress::-webkit-progress-bar { background: var(--ck-border); }
.continue-card progress::-webkit-progress-value { background: var(--ck-accent); }
.continue-card progress::-moz-progress-bar { background: var(--ck-accent); }
.search-empty { display: grid; justify-items: center; gap: 12px; padding: 32px 20px; text-align: center; }
.search-empty h2, .search-empty h3, .search-empty strong { margin: 0; font-size: 22px; line-height: 1.35; color: var(--ck-text); }
body[data-app="checklist"] .search-empty > span > svg { width: 28px; height: 28px; }
.search-empty p { max-width: 40ch; font-size: 14px; line-height: 1.6; color: var(--ck-muted); }
.search-empty button, .search-retry { min-height: 42px; padding: 9px 15px; border: 1px solid var(--ck-control-border); border-radius: 10px; background: var(--ck-panel); font-size: 13px !important; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .page-title-row { animation: ck-settle 240ms var(--ck-ease); }
  .topic, .catalog-card, .app-card, .continue-card, .primary-button, .secondary-button, .view-all, .search-filter, .tool-card { transition: transform 160ms var(--ck-ease), border-color 140ms ease, box-shadow 160ms ease; }
  body[data-app="checklist"] dialog[open] { animation: ck-dialog-in 170ms var(--ck-ease); }
  body[data-app="checklist"] dialog[open]::backdrop { animation: ck-backdrop-in 140ms ease; }
  .browse-menu:not([hidden]), .apps-dropdown[open] .apps-menu { animation: ck-menu-in 140ms var(--ck-ease); }
  .page-check-item input:checked { animation: ck-check 180ms var(--ck-ease); }
  .topic:active, .catalog-card:active, .app-card:active, .continue-card:active, .primary-button:active, .secondary-button:active { transform: translateY(1px); }
  @media (hover: hover) and (pointer: fine) {
    .topic:hover, .view-all:hover { transform: translateY(-2px); box-shadow: 0 3px 0 color-mix(in srgb, var(--ck-text) 12%, transparent); }
    .catalog-card:hover, .app-card:hover, .continue-card:hover, .tool-card:focus-within { transform: translateY(-3px); box-shadow: var(--ck-shadow); border-color: var(--ck-accent); }
    .primary-button:hover, .secondary-button:hover { transform: translateY(-1px); box-shadow: 0 3px 0 color-mix(in srgb, var(--ck-text) 14%, transparent); }
  }
}
@keyframes ck-settle { from { transform: translateY(7px); } to { transform: translateY(0); } }
@keyframes ck-dialog-in { from { transform: translateY(10px); opacity: .92; } to { transform: translateY(0); opacity: 1; } }
@keyframes ck-backdrop-in { from { opacity: .7; } to { opacity: 1; } }
@keyframes ck-menu-in { from { transform: translateY(-4px); } to { transform: translateY(0); } }
@keyframes ck-check { 0% { transform: scale(.88); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (max-width: 760px) {
  .continue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hero > p, .page-description { font-size: 14px; }
  .category-description, .catalog-card p { font-size: 13px; }
  .category-heading { gap: 10px; }
  .category-heading h2 { font-size: 24px; }
  .view-all { padding-inline: 8px; }
  .continue-section { width: calc(100% - 32px); padding: 18px; }
  .continue-grid { grid-template-columns: 1fr; }
  .search-filters { padding: 12px; gap: 6px; }
  .search-filter { min-height: 40px; padding-inline: 9px; }
  .search-field { gap: 8px; padding-inline: 14px; }
  .search-clear { font-size: 11px !important; padding-inline: 7px; }
}
@media print { .continue-section { display: none !important; } }