.recovery-note {
  display: grid;
  grid-template-columns: auto 1fr minmax(230px, .55fr);
  gap: 24px;
  align-items: start;
  width: min(1180px, calc(100% - 48px));
  margin: -70px auto 110px;
  padding: 26px;
  border: 1px solid #d4b56e;
  border-radius: 22px;
  background: #fff4d5;
  box-shadow: 0 15px 40px rgba(84, 65, 18, .06);
}
.recovery-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #6b4d0d; color: #fff; font: 700 1.05rem Newsreader, serif; }
.recovery-note h2 { margin: 0 0 8px; font: 700 clamp(1.8rem, 4vw, 3rem)/1 Newsreader, serif; letter-spacing: -.035em; }
.recovery-note > div > p:last-child { max-width: 690px; margin: 0; color: #665c46; font-size: .82rem; }
.recovery-note dl { margin: 0; border-left: 1px solid #dfc987; padding-left: 20px; }
.recovery-note dl div { padding: 8px 0; border-bottom: 1px solid #e6d39c; }
.recovery-note dl div:last-child { border: 0; }
.recovery-note dt { font-size: .58rem; font-weight: 700; letter-spacing: .1em; color: #806b38; }
.recovery-note dd { margin: 2px 0 0; font-size: .78rem; font-weight: 700; }
.recovered-book { max-width: 360px; }
.recovered-label { display: inline-block; margin-bottom: 8px; padding: 4px 7px; border-radius: 5px; background: #f2dfae; color: #6b4d0d; font-size: .57rem; font-weight: 700; letter-spacing: .08em; }
.book-body small { display: block; margin-top: 12px; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.catalog-book .book-cover { min-height: 210px; }
.catalog-book.readable { outline: 2px solid #d4b56e; outline-offset: -2px; }
.book-abstract { display: -webkit-box; min-height: 4.4em; margin-top: 10px !important; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.catalog-book .button:disabled { margin-top: 16px; color: var(--muted); background: #eee9de; }
.read-story { margin-top: 16px; }
.reader[hidden] { display: none; }
.reader { margin-top: 32px; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); }
.reader-head { display: flex; justify-content: space-between; gap: 32px; padding: 28px; border-bottom: 1px solid var(--line); background: #eee7da; }
.reader-head h2 { font-size: clamp(2rem, 5vw, 4rem); }
.reader-head p:last-child { max-width: 720px; margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
.reader-close { align-self: start; white-space: nowrap; }
.reader-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.chapter-list { max-height: 78vh; overflow-y: auto; padding: 14px; border-right: 1px solid var(--line); background: #f4efe5; }
.chapter-list button { display: block; width: 100%; padding: 12px; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: .72rem; cursor: pointer; }
.chapter-list button:hover { background: #e9e1d2; }
.chapter-list button.active { background: var(--ink); color: #fff; }
.chapter { max-width: 780px; min-width: 0; margin: 0 auto; padding: 42px clamp(24px, 6vw, 72px); }
.chapter > small { color: var(--green); font-size: .66rem; font-weight: 700; letter-spacing: .08em; }
.chapter h3 { margin: 8px 0 28px; font: 700 clamp(2rem, 4vw, 3.2rem)/1.05 Newsreader, serif; }
.chapter-genre { margin: -12px 0 30px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f4efe5; }
.chapter-genre > small { display: block; margin-bottom: 8px; color: var(--muted); font-size: .62rem; }
.chapter-genre > div { display: flex; flex-wrap: wrap; gap: 7px; }
.chapter-genre span { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px; border-left: 4px solid var(--genre); border-radius: 8px; background: #fff; font-size: .7rem; }
.chapter-genre span strong { color: var(--genre); font-variant-numeric: tabular-nums; }
#chapterContent { white-space: pre-wrap; font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; }
.reader-controls { display: flex; justify-content: space-between; gap: 12px; margin-top: 42px; padding: 24px 0 0; border-top: 1px solid var(--line); background: transparent; }
.reader-controls button:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 900px) {
  .recovery-note { grid-template-columns: auto 1fr; }
  .recovery-note dl { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #dfc987; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .reader-layout { grid-template-columns: 1fr; }
  .chapter-list { display: flex; max-height: none; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .chapter-list button { min-width: 180px; }
}
@media (max-width: 560px) {
  .recovery-note { width: min(100% - 28px, 1180px); grid-template-columns: 1fr; margin-top: -70px; }
  .recovery-note dl { grid-template-columns: 1fr; }
  .recovery-mark { width: 44px; height: 44px; }
}

/* Per-story analytical cards: charts use recovered data only. */
.book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.catalog-book { min-width: 0; }
.catalog-book .book-cover {
  min-height: 25rem;
  background-image: linear-gradient(180deg, rgba(14, 34, 28, .04) 32%, rgba(14, 34, 28, .88) 100%), var(--cover);
}
.card-analytics {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: .65rem;
  margin: 1rem 0 .65rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line, #ded8cc);
}
.mini-chart { min-width: 0; padding: .65rem; border: 1px solid #e2dccf; border-radius: 14px; background: #fbf8f1; }
.mini-chart h4 { min-height: 2.5em; margin: 0 0 .25rem; color: #193b31; font: 650 .76rem/1.25 "IBM Plex Sans Thai", sans-serif; letter-spacing: .01em; }
.mini-chart canvas { display: block; width: 100%; height: 142px; overflow: hidden; border-radius: 12px; background: #fbf8f1; }
.data-note { display: block; min-height: 2.8em; margin-bottom: .75rem; }
.data-note.real-data { color: #17664e; }
.data-note.unavailable { color: #7b746b; }
.dna-card canvas { overflow: hidden; border-radius: 18px; background: #fbf8f1; }
.technical-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.technical-grid article { padding: 1.35rem; border: 1px solid #ded8cc; border-radius: 18px; background: #fbf8f1; }
.technical-grid article > span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #17372d; color: #fff; font-size: .68rem; font-weight: 700; }
.technical-grid h3 { margin: .9rem 0 .45rem; color: #17372d; font: 700 1.08rem/1.2 "IBM Plex Sans Thai", sans-serif; }
.technical-grid p { margin: 0; color: #68736e; font-size: .76rem; line-height: 1.7; }
@media (max-width: 860px) {
  .book-grid { grid-template-columns: 1fr; }
  .catalog-book .book-cover { min-height: 22rem; }
  .technical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .card-analytics { grid-template-columns: 1fr; }
  .mini-chart h4 { min-height: 0; }
  .technical-grid { grid-template-columns: 1fr; }
}

.reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.reading-card { overflow: hidden; border: 1px solid #dcd4c7; border-radius: 20px; background: #fffdf8; box-shadow: 0 12px 30px rgba(34, 48, 42, .06); }
.reading-cover { display: flex; min-height: 21rem; flex-direction: column; justify-content: space-between; padding: 1.1rem; color: #fff; background-image: linear-gradient(180deg, rgba(8, 24, 19, .08) 35%, rgba(8, 24, 19, .9) 100%), var(--reading-cover); background-position: center; background-size: cover; }
.reading-cover span { align-self: start; padding: .35rem .55rem; border-radius: 999px; background: rgba(255,255,255,.88); color: #17372d; font-size: .62rem; font-weight: 700; }
.reading-cover h3 { margin: 0; color: #fff; font: 700 2rem/1.02 Newsreader, "IBM Plex Sans Thai", serif; text-wrap: balance; }
.reading-card > div:last-child { padding: 1rem; }
.reading-card p { min-height: 4.8em; color: #68736e; font-size: .76rem; line-height: 1.6; }
.learned-story { outline: 3px solid #17664e; outline-offset: -3px; }
.learned-badge { align-self: start; margin-bottom: .2rem; padding: .35rem .55rem; border-radius: 999px; background: #dcebd9; color: #17664e; font-size: .58rem; font-weight: 700; letter-spacing: .07em; }
.story-certificate { margin: auto 0 1rem; overflow: hidden; border: 1px solid #ded8cc; border-radius: 15px; background: #fbf8f1; }
.story-certificate header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; border-bottom: 1px solid #e4ded3; }
.story-certificate header small { color: #17664e; font-size: .54rem; font-weight: 700; letter-spacing: .06em; }
.story-certificate header b { color: #68736e; font-size: .58rem; white-space: nowrap; }
.story-certificate > .certificate-plots { display: grid; grid-template-columns: minmax(168px, .9fr) minmax(0, 1.1fr); align-items: stretch; }
.certificate-plots figure { min-width: 0; margin: 0; overflow: hidden; }
.certificate-plots figure + figure { border-left: 1px solid #e4ded3; }
.certificate-plots figcaption { padding: .55rem .7rem 0; color: #59645f; font-size: .58rem; font-weight: 700; }
.story-certificate canvas { display: block; width: 100%; height: 158px; max-width: 100%; }
.story-certificate .certificate-donut { width: 158px; height: 158px; margin-inline: auto; aspect-ratio: 1; }
.reader-certificate img.certificate-donut { width: 158px; height: 158px; object-fit: contain; }
.reading-card .certificate-plots figure:first-child { position: absolute; left: -9999px; width: 158px; }
.reading-card .certificate-plots figure:last-child { grid-column: 1 / -1; border-left: 0; }
.certificate-top3 { padding: .9rem 1rem .75rem; border-top: 1px solid #e4ded3; }
.certificate-top3 > small { display: block; margin-bottom: .55rem; color: #17664e; font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.certificate-top3 > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.certificate-top3 span { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .55rem; border: 1px solid color-mix(in srgb, var(--gene) 45%, #ded7ca); border-radius: 999px; background: color-mix(in srgb, var(--gene) 10%, #fff); color: #28352f; font-size: .66rem; }
.certificate-top3 span b { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--gene); color: #fff; font-size: .58rem; }
.certificate-top3 span strong { color: var(--gene); font-variant-numeric: tabular-nums; }
.certificate-legend { display: flex; flex-wrap: wrap; gap: .35rem .75rem; padding: .65rem 1rem; border-bottom: 1px solid #eee8dd; color: #4f5d56; font-size: .62rem; }
.certificate-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.certificate-legend i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--gene); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.certificate-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;padding:.7rem 1rem;border-top:1px solid #e4ded3;background:#f2ede3;color:#68736e;font-size:.56rem}.certificate-meta span{display:flex;gap:.28rem;align-items:baseline}.certificate-meta b{color:#17664e;font-size:.5rem;letter-spacing:.08em}
@media (max-width: 560px) {
  .story-certificate > .certificate-plots { grid-template-columns: 1fr; }
  .certificate-plots figure + figure { border-left: 0; border-top: 1px solid #e4ded3; }
}
.learning-reader { margin-top: 1.25rem; overflow: hidden; border: 1px solid #dcd4c7; border-radius: 22px; background: #fffdf8; }
.learning-reader[hidden] { display: none; }
.learning-reader > header { display: flex; justify-content: space-between; gap: 2rem; padding: 1.5rem; border-bottom: 1px solid #dcd4c7; background: #eee7da; }
.learning-reader > header h2 { margin: .2rem 0; font-size: clamp(2rem, 5vw, 3.8rem); }
.learning-reader > header p:last-child { max-width: 720px; margin: 0; color: #68736e; }
.learning-reader > nav { display: flex; gap: .5rem; padding: .8rem 1.5rem; overflow-x: auto; border-bottom: 1px solid #dcd4c7; }
.learning-reader > nav button { padding: .65rem .85rem; border: 0; border-radius: 999px; background: #eee9de; white-space: nowrap; cursor: pointer; }
.learning-reader > nav button.active { background: #17372d; color: #fff; }
.learning-reader > article { max-width: 760px; margin: auto; padding: clamp(1.5rem, 5vw, 4rem); }
.learning-reader > article h3 { margin: .3rem 0 1.3rem; font: 700 2rem/1.1 Newsreader, "IBM Plex Sans Thai", serif; }
.learning-reader > article > p { font-size: 1rem; line-height: 1.95; }
.learning-reader .reader-layout { align-items: stretch; }
.learning-toc { min-width: 0; border-right: 1px solid #dcd4c7; background: #f4efe5; }
.toc-heading { position: sticky; top: 0; z-index: 2; display: grid; gap: .18rem; padding: 1.25rem 1.35rem 1rem; border-bottom: 1px solid #dcd4c7; background: rgba(244,239,229,.97); backdrop-filter: blur(8px); }
.toc-heading small { color: #17664e; font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.toc-heading strong { color: #17251f; font: 700 1.45rem/1.15 "Noto Serif Thai", Newsreader, serif; }
.toc-heading span { color: #68736e; font-size: .72rem; }
.learning-toc .chapter-list { max-height: 72vh; padding: .75rem; border: 0; }
.learning-toc .chapter-list button { display: grid; grid-template-columns: 2.1rem minmax(0,1fr); gap: .7rem; align-items: start; padding: .72rem .8rem; border-radius: 12px; color: #34413b; }
.learning-toc .chapter-list button span { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #d7cdbb; border-radius: 50%; color: #17664e; background: #fffaf0; font-size: .66rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.learning-toc .chapter-list button b { padding-top: .28rem; font-size: .78rem; font-weight: 600; line-height: 1.45; }
.learning-toc .chapter-list button:hover { background: #e8dfcf; }
.learning-toc .chapter-list button.active { background: #17372d; color: #fff; box-shadow: 0 8px 20px rgba(23,55,45,.14); }
.learning-toc .chapter-list button.active span { border-color: #efd28b; background: #efd28b; color: #17372d; }
.learning-chapter { width: 100%; max-width: 820px; }
.learning-chapter #learningChapterText { white-space: pre-wrap; overflow-wrap: anywhere; color: #303b36; font-family: "Noto Serif Thai", Newsreader, serif; font-size: 1.02rem; line-height: 2; }
.version-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.version-comparison > div { padding: 1.4rem; border-radius: 18px; background: #17372d; color: #e9f0ec; }
.version-comparison .kicker { color: #efbf56; }
.version-comparison h3 { margin: .4rem 0 .7rem; color: #fff; font: 700 1.25rem/1.25 "IBM Plex Sans Thai", sans-serif; }
.version-comparison p:last-child { margin-bottom: 0; font-size: .77rem; line-height: 1.75; }
.technical-longform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.technical-longform article { padding: 1.4rem; border: 1px solid #ded8cc; border-radius: 18px; background: #fffdf8; }
.technical-longform h3 { margin: 0 0 .75rem; color: #17372d; font: 700 1.08rem/1.3 "IBM Plex Sans Thai", sans-serif; }
.technical-longform p { color: #59645f; font-size: .76rem; line-height: 1.78; }
.workflow-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.workflow-link { display: flex; min-height: 13rem; flex-direction: column; justify-content: flex-end; padding: 1.5rem; border-radius: 20px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.workflow-link:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(22,48,39,.14); }
.workflow-link small { font-weight: 700; letter-spacing: .1em; }
.workflow-link strong { margin: .4rem 0 .8rem; font: 700 1.45rem/1.25 "IBM Plex Sans Thai", sans-serif; }
.workflow-link span { font-size: .75rem; line-height: 1.65; }
.learn-link { background: #17372d; color: #fff; }
.unlearn-link { border: 1px solid #bd5d4c; background: #fff5f0; color: #742e24; }
.credits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.credits-grid article { padding: 1.3rem; border-top: 4px solid #17372d; border-radius: 0 0 16px 16px; background: #eee7da; }
.credits-grid small { color: #17664e; font-weight: 700; letter-spacing: .08em; }
.credits-grid h3 { margin: .55rem 0; font: 700 1.1rem/1.2 "IBM Plex Sans Thai", sans-serif; }
.credits-grid p { margin: 0; color: #59645f; font-size: .8rem; line-height: 1.8; }
@media (max-width: 900px) {
  .reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .version-comparison, .credits-grid { grid-template-columns: 1fr; }
  .learning-toc { border-right: 0; border-bottom: 1px solid #dcd4c7; }
  .learning-toc .toc-heading { position: static; }
  .learning-toc .chapter-list { display: flex; max-height: none; overflow-x: auto; }
  .learning-toc .chapter-list button { min-width: 230px; }
}
@media (max-width: 640px) {
  .reading-grid, .technical-longform, .workflow-links { grid-template-columns: 1fr; }
  .learning-reader > header { flex-direction: column; }
}
.admin-main { padding-top: 5rem; }
.admin-hero { padding-bottom: 2rem; }
.admin-hero h1 { margin: .5rem 0 1rem; font: 700 clamp(3rem, 8vw, 6.5rem)/.88 Newsreader, "IBM Plex Sans Thai", serif; letter-spacing: -.05em; }
.admin-hero p:last-child { max-width: 760px; color: #68736e; line-height: 1.7; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 0; }
.admin-card { padding: 1.5rem; border: 1px solid #dcd4c7; border-radius: 22px; background: #fffdf8; }
.admin-card.danger { border-color: #d9a89d; background: #fff8f5; }
.admin-card h2 { margin: .2rem 0 1rem; font-size: 2.5rem; }
.admin-card label { display: grid; gap: .35rem; margin: .8rem 0; color: #254a3e; font-size: .75rem; font-weight: 700; }
.admin-card input:not([type="checkbox"]), .admin-card select, .admin-card textarea { width: 100%; padding: .8rem; border: 1px solid #dcd4c7; border-radius: 10px; background: #fff; font: inherit; }
.admin-card .consent { grid-template-columns: auto 1fr; align-items: start; font-weight: 500; }
.admin-card output { display: block; min-height: 4rem; margin-top: 1rem; padding: .8rem; overflow-wrap: anywhere; white-space: pre-wrap; border-radius: 10px; background: #eee9de; color: #59645f; font: .68rem/1.5 monospace; }
.issued-certificate { margin-top: 1rem; padding: 1rem; border: 2px solid #d4b56e; border-radius: 16px; background: #fffaf0; }
.issued-certificate[hidden] { display: none; }
.issued-certificate header { display: flex; justify-content: space-between; gap: .5rem; color: #17664e; font-size: .62rem; font-weight: 700; letter-spacing: .07em; }
.issued-certificate h3 { margin: .75rem 0 .2rem; color: #17372d; font: 700 1.4rem/1.2 "Noto Serif Thai", serif; }
.issued-certificate > p, .issued-certificate footer { color: #68736e; font-size: .66rem; }
.certificate-bars { display: grid; gap: .45rem; margin: 1rem 0; }
.certificate-bars > div { display: grid; grid-template-columns: 5.5rem minmax(0,1fr) 3.2rem; gap: .5rem; align-items: center; color: #59645f; font-size: .66rem; }
.certificate-bars i { display: block; height: .55rem; overflow: hidden; border-radius: 99px; background: #e8e1d5; }
.certificate-bars i::before { content: ""; display: block; width: var(--score); height: 100%; border-radius: inherit; background: var(--gene); }
.certificate-bars b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .admin-grid { grid-template-columns: 1fr; } }
body { font-family: "Noto Sans Thai", sans-serif; }
h1, h2, .hero h1, .section-head h2, .lab-copy h2 { font-family: "Noto Serif Thai", Newsreader, serif; font-weight: 700; }
.lab-copy h2 { max-width: 9ch; font-size: clamp(3.4rem, 7vw, 6.2rem); line-height: .98; letter-spacing: -.04em; }
.lab-card { border-radius: 22px; box-shadow: 0 22px 55px rgba(5,24,18,.16); }
.lab-card label { color: #17372d; font-size: .76rem; font-weight: 700; }
.lab-card textarea { padding: 1.15rem; border-radius: 14px; font-family: "Noto Serif Thai", serif; font-size: 1.08rem; line-height: 1.85; }
.gene-orbit { display: none; }
.gene-portrait { position: relative; min-height: 34rem; margin: 0; overflow: hidden; border: 1px solid #d9d0c1; border-radius: 28px; background: #fffaf0; box-shadow: 0 20px 50px rgba(34,48,42,.08); }
.gene-art { display: block; width: 100%; height: 34rem; object-fit: cover; object-position: 50% 54%; }
.gene-portrait figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem 1.7rem 1.45rem; background: linear-gradient(180deg,rgba(255,250,240,.94) 0,rgba(255,250,240,.08) 24%,rgba(255,250,240,0) 68%,rgba(255,250,240,.94) 100%); pointer-events: none; }
.gene-title small { display: block; color: #17664e; font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.gene-title strong { display: block; max-width: 12ch; margin-top: .25rem; color: #17372d; font: 700 2rem/1.05 "Noto Serif Thai",Newsreader,serif; }
.gene-portrait figcaption > p { max-width: 34rem; margin: 0; color: #53625c; font-size: .74rem; line-height: 1.55; }
.helix { position: absolute; inset: 9rem 2.5rem 6rem; }
.helix::before, .helix::after { content: ""; position: absolute; inset: 0; border: 3px solid #17372d; border-width: 0 3px; border-radius: 50%; transform: rotate(24deg); }
.helix::after { transform: rotate(-24deg); border-color: #d89d36; }
.helix i { position: absolute; left: 20%; width: 60%; height: 2px; background: linear-gradient(90deg,#b94c3e,#7656a7,#d89d36,#3c6f8c,#0d604c,#c2717d); transform-origin: center; }
.helix i:nth-child(1){top:8%;transform:rotate(22deg)}.helix i:nth-child(2){top:25%;transform:rotate(-22deg)}.helix i:nth-child(3){top:42%;transform:rotate(22deg)}.helix i:nth-child(4){top:59%;transform:rotate(-22deg)}.helix i:nth-child(5){top:76%;transform:rotate(22deg)}.helix i:nth-child(6){top:93%;transform:rotate(-22deg)}
.gene-labels { position: absolute; inset: 7.5rem 1.4rem 5.5rem; display: grid; grid-template-columns: 1fr 1fr; align-content: space-between; justify-content: space-between; pointer-events: none; }
.gene-labels span { width: max-content; max-width: 9rem; padding: .5rem .65rem .45rem; border-left: 5px solid var(--gene); border-radius: 10px; background: rgba(255,255,255,.92); color: #17372d; font-size: .68rem; font-weight: 700; box-shadow: 0 5px 16px rgba(34,48,42,.08); }
.gene-labels span:nth-child(even) { justify-self: end; }
.gene-labels small { display: block; margin-top: .1rem; color: #68736e; font-size: .58rem; font-weight: 500; }
.hero-detail { max-width: 760px; margin-top: 1rem; color: #59645f; font-size: .82rem; line-height: 1.8; }
#library .book-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.catalog-chip { min-width: 0; overflow: hidden; border: 1px solid #ded8cc; border-radius: 16px; background: #fff; box-shadow: 0 9px 22px rgba(31,45,39,.06); }
.catalog-chip header { display: flex; min-height: 7.5rem; flex-direction: column; justify-content: space-between; padding: 1rem; color: #fff; }
.catalog-chip span { font-size: .62rem; font-weight: 700; letter-spacing: .04em; opacity: .84; }
.catalog-chip strong { font: 700 1.02rem/1.25 "Noto Sans Thai", sans-serif; overflow-wrap: anywhere; }
.catalog-chip > div { padding: .8rem 1rem 1rem; }
.catalog-chip > div small { color: #17664e; font-size: .58rem; font-weight: 700; letter-spacing: .08em; }
.catalog-chip > div p { display: -webkit-box; min-height: 4.6em; margin: .4rem 0 0; overflow: hidden; color: #68736e; font-size: .68rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.catalog-chip.genre-mystery header { background: #66518c; }
.catalog-chip.genre-fantasy header { background: #b87c24; }
.catalog-chip.genre-science header { background: #386c86; }
.catalog-chip.genre-action header { background: #17664e; }
.catalog-chip.genre-drama header { background: #a95262; }
.permitted-story { outline: 2px solid #d4b56e; outline-offset: -2px; }
.permitted-story .reading-cover { min-height: 21rem; }
.permitted-dna { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: .65rem; margin: auto 0 1rem; }
.permitted-dna > div { min-width: 0; padding: .7rem; border: 1px solid #ded8cc; border-radius: 15px; background: #fbf8f1; }
.permitted-dna h4 { min-height: 2.4em; margin: 0 0 .25rem; color: #17372d; font: 700 .72rem/1.25 "IBM Plex Sans Thai", sans-serif; }
.permitted-dna canvas { display: block; width: 100%; height: 150px; border-radius: 12px; }
.technical-speed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.technical-speed article { padding: 1.25rem; border: 1px solid #d8ceb9; border-radius: 18px; background: #fff7e4; }
.technical-speed small { color: #17664e; font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
.technical-speed strong { display: block; margin: .45rem 0; color: #17372d; font: 700 1.65rem/1 Newsreader, serif; }
.technical-speed p { margin: 0; color: #59645f; font-size: .74rem; line-height: 1.7; }
.version-comparison { grid-template-columns: 1fr; gap: 1.25rem; }
.version-comparison > div { min-height: 15rem; padding: clamp(1.5rem, 4vw, 3rem); }
.version-comparison > div:nth-child(1) { background: #fff8e7; color: #4f493d; border: 1px solid #d9c98f; }
.version-comparison > div:nth-child(1) h3 { color: #17372d; }
.version-comparison > div:nth-child(2) { background: #315f78; }
.version-comparison > div:nth-child(3) { background: #17372d; }
.experiment-lead { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; margin-bottom: 1rem; padding: clamp(1.5rem,4vw,3rem); border-radius: 24px; background: #17372d; color: #fff; }
.experiment-lead small { color: #bad65c; font-size: .62rem; font-weight: 700; letter-spacing: .12em; }
.experiment-lead h3 { margin: .5rem 0 0; font: 700 clamp(1.8rem,3vw,3.2rem)/1.05 Newsreader,"IBM Plex Sans Thai",serif; }
.experiment-lead p { margin: 0; color: #bdc9c3; font-size: .8rem; line-height: 1.85; }
.experiment-facts { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); overflow: hidden; margin-bottom: 1rem; border: 1px solid #ded8cc; border-radius: 18px; background: #ded8cc; gap: 1px; }
.experiment-facts article { min-width: 0; padding: 1rem; background: #fffdf8; }
.experiment-facts small { color: #17664e; font-size: .55rem; font-weight: 700; letter-spacing: .08em; }
.experiment-facts strong { display: block; margin: .45rem 0; color: #17372d; font: 700 1.5rem/1 Newsreader,serif; }
.experiment-facts span { display: block; color: #68736e; font-size: .62rem; line-height: 1.5; }
.experiment-chapters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.experiment-chapters article { position: relative; padding: 1.5rem; overflow: hidden; border: 1px solid #ded8cc; border-radius: 18px; background: #fffdf8; }
.experiment-chapters article > span { color: #d89d36; font: 700 2rem/1 Newsreader,serif; }
.experiment-chapters h3 { margin: .45rem 0; color: #17372d; font: 700 1.25rem/1.2 Newsreader,"IBM Plex Sans Thai",serif; }
.experiment-chapters p { color: #59645f; font-size: .75rem; line-height: 1.82; }
.next-experiment { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; margin-top: 1rem; padding: clamp(1.5rem,4vw,3rem); border-radius: 24px; background: #315f78; color: #fff; }
.next-experiment .kicker { color: #e4c167; }
.next-experiment h3 { margin: .4rem 0; font: 700 2rem/1.1 Newsreader,"IBM Plex Sans Thai",serif; }
.next-experiment p { color: #d1e0e6; font-size: .76rem; line-height: 1.8; }
.next-experiment ol { margin: 0; padding: 0; list-style: none; counter-reset: fair-step; }
.next-experiment li { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.22); counter-increment: fair-step; font-size: .68rem; }
.next-experiment li b { color: #fff; }.next-experiment li span { color: #c9d9df; }
.experiment-conclusion { display: grid; grid-template-columns: 13rem 1fr; gap: 1.5rem; margin-top: 1rem; padding: 1.25rem 1.5rem; border: 1px solid #d9c98f; border-radius: 16px; background: #fff8e7; }
.experiment-conclusion strong { color: #17664e; }.experiment-conclusion p { margin: 0; color: #59645f; font-size: .75rem; line-height: 1.8; }
.reader-head { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; }
.reader-title { grid-column: 1; }
.reader-close { position: absolute; z-index: 3; top: 28px; right: 28px; }
.reader-title { display: none; min-width: 0; }
.reader-certificate { grid-column: 1 / -1; width: min(920px,100%); min-width: 0; margin-inline: auto; }
.reader-certificate .story-certificate { margin: 0; background: #fffdf8; box-shadow: 0 10px 26px rgba(31,45,39,.06); }
.certificate-story-intro { padding: clamp(1.25rem,3vw,2.15rem) clamp(1.25rem,4vw,3rem); padding-right: clamp(5.5rem,10vw,7rem); border-bottom: 1px solid #e4ded3; background: linear-gradient(135deg,#f7f0e2,#fffdf8 62%); }
.certificate-story-intro > p { margin: 0 0 .35rem !important; color: #17664e !important; font-size: .62rem !important; font-weight: 800; letter-spacing: .11em; }
.certificate-story-intro h2 { margin: 0; color: #17372d; font: 700 clamp(2rem,5vw,4.2rem)/.98 "Noto Serif Thai",Newsreader,serif; text-wrap: balance; }
.certificate-story-intro > div { max-width: 58rem; margin-top: .75rem; color: #68736e; font-size: .8rem; line-height: 1.75; }
.reader-certificate .story-certificate img.certificate-donut { display: block; width: 220px; height: 220px; margin-inline: auto; object-fit: contain; aspect-ratio: 1; }
.reader-certificate .story-certificate img.certificate-progress { display: block; width: 100%; height: 220px; object-fit: fill; }
.reader-certificate .story-certificate > .certificate-plots { grid-template-columns: minmax(250px,.75fr) minmax(0,1.75fr); }
.reader-certificate .certificate-top3 { padding-top: .65rem; padding-bottom: .65rem; }
.reader-chapter-scale { display: flex; justify-content: space-between; gap: 0; margin: -19px 16px 5px 20px; color: #68736e; pointer-events: none; }
.reader-chapter-scale span { display: grid; justify-items: center; min-width: 0; font-size: .48rem; font-variant-numeric: tabular-nums; }
.reader-chapter-scale i { display: block; width: 1px; height: 5px; margin-bottom: 1px; background: #59645f; }
.reader-chapter-scale b { font-weight: 600; }
.reader-axis-label { display: flex; align-items: baseline; justify-content: center; gap: .35rem; margin: -4px 1rem 12px; color: #68736e; font-size: .62rem; letter-spacing: .04em; }
.reader-axis-label::before,.reader-axis-label::after { content: ""; width: min(80px,15%); height: 1px; background: #d8d1c5; }
.reader-axis-label b { color: #17664e; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }

/* Reading mode uses the certificate itself as the primary card. */
.reader,
.learning-reader { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.reader-head,
.learning-reader > header { padding: 0; border: 0; background: transparent; }
.reader-head { width: min(1120px,100%); margin-inline: auto; }
.reader-certificate { width: min(1120px,100%); }
.reader-certificate .story-certificate { overflow: hidden; border: 2px solid #17664e; border-radius: 26px; background: #fffdf8; box-shadow: 0 22px 55px rgba(23,55,45,.13); }
.reader-certificate .story-certificate > header { padding: .75rem 1rem; border-bottom: 0; background: #17372d; }
.reader-certificate .story-certificate > header small,
.reader-certificate .story-certificate > header b { color: #fff8e8; }
.reader-certificate .story-certificate > header small { letter-spacing: .11em; }
.certificate-story-intro { border-bottom: 1px solid #dfcfac; background: radial-gradient(circle at 88% 20%,rgba(223,170,66,.2),transparent 28%),linear-gradient(135deg,#f4dfc1 0%,#fff8e9 52%,#e3efe6 100%); }
.reader-certificate .certificate-legend { padding: .8rem 1.25rem; background: #f8f2e7; }
.reader-certificate .certificate-plots figure:first-child { background: linear-gradient(180deg,#fffaf0,#f4ead7); }
.reader-certificate .certificate-plots figure:last-child { background: linear-gradient(180deg,#f7fbf8,#fffdf8); }
.reader-certificate .certificate-plots figcaption { color: #17372d; font-size: .65rem; letter-spacing: .025em; }
.reader-certificate .certificate-top3 { border-top-color: #dfcfac; background: #f8edcf; }
.reader-layout { width: min(1120px,100%); margin: 1.25rem auto 0; overflow: hidden; border: 1px solid #dcd4c7; border-radius: 24px; background: #fffdf8; box-shadow: 0 14px 34px rgba(31,45,39,.08); }
.reader-close { top: 3.15rem; right: 1rem; border-color: rgba(23,55,45,.18); background: rgba(255,253,248,.88); backdrop-filter: blur(8px); }
@media (max-width: 980px) { #library .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) { .experiment-facts { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 680px) { .reader-certificate .story-certificate > .certificate-plots { grid-template-columns: 1fr; } .reader-certificate .certificate-plots figure + figure { border-left: 0; border-top: 1px solid #e4ded3; } }

.timeline-donut-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2rem; margin: 1.25rem 0 1.5rem; padding: clamp(1.25rem,3vw,2.25rem); border: 1px solid #ded8cc; border-radius: 24px; background: #fffdf8; }
.timeline-donut-card h3 { margin: .25rem 0 .6rem; font-size: clamp(1.5rem,3vw,2.35rem); }
.timeline-donut-card p:last-child { max-width: 52rem; color: #68736e; }
.timeline-donut-card figure { display: grid; grid-template-columns: 240px minmax(130px,1fr); align-items: center; gap: 1rem; margin: 0; }
#timelineDonut { display: block; width: 240px; height: 240px; aspect-ratio: 1; }
#timelineDonutLegend { display: grid; gap: .4rem; color: #4f5d56; font-size: .72rem; }
#timelineDonutLegend span { display: flex; align-items: center; gap: .4rem; }
#timelineDonutLegend i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--gene); }
@media (max-width: 780px) { .timeline-donut-card { grid-template-columns: 1fr; text-align: center; } .timeline-donut-card figure { grid-template-columns: 1fr; justify-items: center; } #timelineDonutLegend { grid-template-columns: repeat(2,minmax(0,1fr)); text-align: left; } }

/* 2026.08 transparency and information architecture refresh */
.system-truth{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.4rem,4vw,4rem);margin:1.2rem auto 3rem;padding:clamp(1.4rem,4vw,3rem);border-radius:28px;background:linear-gradient(135deg,#112d25,#174c3d);color:#f9f4e8;box-shadow:0 24px 65px rgba(17,45,37,.18)}
.system-truth h2{margin:.35rem 0 .7rem;color:#fff8e8;font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.12}.system-truth p{color:#d5e4dc;line-height:1.75}.system-truth .kicker{color:#d9b867}.truth-grid{display:grid;gap:.65rem;margin:0}.truth-grid>div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:1rem;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:rgba(255,255,255,.06)}.truth-grid dt{color:#d9b867;font-size:.68rem;font-weight:800;letter-spacing:.12em}.truth-grid dd{margin:0}.truth-grid dd strong,.truth-grid dd span{display:block}.truth-grid dd span{margin-top:.22rem;color:#bdd0c7;font-size:.76rem;line-height:1.55}
.observatory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.observatory-grid article{min-height:150px;padding:1.25rem;border:1px solid #ded8cc;border-radius:20px;background:linear-gradient(145deg,#fffdf8,#f4ede0);box-shadow:0 12px 28px rgba(31,45,39,.05)}.observatory-grid small,.observatory-grid strong,.observatory-grid span{display:block}.observatory-grid small{color:#17664e;font-weight:800;letter-spacing:.1em}.observatory-grid strong{margin:.65rem 0 .35rem;color:#17372d;font:700 1.25rem/1.2 "Noto Serif Thai",serif}.observatory-grid span{color:#68736e;font-size:.76rem;line-height:1.55}
.explain-section{border-radius:30px;background:#efe5d2}.explain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.explain-grid article{padding:1.35rem;border-radius:20px;background:#fffdf8}.explain-grid article>span{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#17664e;color:white;font-weight:800}.explain-grid h3{margin:.8rem 0 .45rem;color:#17372d}.explain-grid p{color:#68736e;line-height:1.7}
.catalog-reference{display:none}.admin-scope{display:flex;gap:1rem;align-items:center;margin:1.25rem 0 0;padding:1rem 1.15rem;border:1px solid #d9b867;border-radius:18px;background:linear-gradient(135deg,#fff5d2,#fffaf0);color:#493b1f;box-shadow:0 8px 22px rgba(104,83,34,.06)}.admin-scope>i{display:grid;place-items:center;flex:0 0 3.25rem;height:3.25rem;border-radius:50%;background:#17372d;color:#fff8e8;font-size:.58rem;font-style:normal;font-weight:800;letter-spacing:.08em}.admin-scope div{min-width:0}.admin-scope strong,.admin-scope span{display:block}.admin-scope strong{margin-bottom:.18rem;color:#17372d}.admin-scope span{color:#6b604b;font-size:.78rem;line-height:1.55}.certificate-provenance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin:.9rem 0;padding:.75rem;border-radius:12px;background:#f0eadf;font-size:.68rem}.certificate-provenance span{display:flex;gap:.35rem}.certificate-provenance b{color:#17664e}
@media(max-width:820px){.system-truth{grid-template-columns:1fr}.truth-grid>div{grid-template-columns:1fr}.observatory-grid,.explain-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.observatory-grid,.explain-grid,.certificate-provenance{grid-template-columns:1fr}.system-truth{border-radius:20px}.admin-scope{align-items:flex-start}.admin-scope>i{flex-basis:2.7rem;height:2.7rem}}
@media(max-width:680px){.certificate-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
.admin-main>.admin-scope{width:min(1180px,calc(100% - 3rem));box-sizing:border-box;margin-inline:auto}

/* The former recovery card used a negative margin to overlap the metrics.
   It now follows System Status, so every introductory block gets its own space. */
.metrics{margin-bottom:28px}
.system-truth{width:min(1180px,calc(100% - 48px));margin:0 auto 24px}
.recovery-note{margin:0 auto 110px}
@media(max-width:560px){.system-truth,.recovery-note{width:min(100% - 28px,1180px)}.recovery-note{margin-top:0}}
@media (max-width: 760px) { .technical-speed { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .experiment-lead,.next-experiment,.experiment-chapters { grid-template-columns: 1fr; } }
@media (max-width: 560px) { #library .book-grid { grid-template-columns: 1fr; } .catalog-chip { min-height: 6.5rem; } .permitted-dna { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .experiment-facts { grid-template-columns: 1fr 1fr; } .experiment-conclusion,.next-experiment li { grid-template-columns: 1fr; } }