body.tida-about-page { max-width: 540px; margin: 0 auto; padding: 0; background: #10171c; color: #e5dccb; font-family: "Segoe UI", Arial, sans-serif; line-height: 1.6; }
.tida-about-page *, .tida-about-page *::before, .tida-about-page *::after { box-sizing: border-box; }
.tida-about-page .bdr.bg_main { background: #10171c; }
.tida-about-page .light, .tida-about-page [class^="wr"] { background: none; padding: 0; margin: 0; border: 0; }
.tida-about-page .guest-form-header { background: #141f27; border-bottom: 1px solid #76613c77; }
.about-guide a { text-decoration: none; }
.about-guide .tida-icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; }
.about-guide a:focus-visible, .about-guide summary:focus-visible { outline: 2px solid #f1ce87; outline-offset: 3px; }
.about-cover { position: relative; height: 240px; overflow: hidden; background: #1b2b2d; border-bottom: 1px solid #957c4a; }
.about-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#07121d05, #0c151ba8 55%, #10171c); }
.about-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; }
.about-cover-copy { position: absolute; z-index: 1; bottom: 27px; left: 23px; right: 23px; text-shadow: 0 2px 5px #000; }
.about-eyebrow { display: block; color: #c4aa79; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.about-cover h1 { margin: 7px 0 9px; color: #f2e2c2; font: 32px/1.08 Georgia, serif; max-width: 295px; }
.about-cover p { max-width: 290px; margin: 0; color: #c3cfcf; font-size: 12px; line-height: 1.6; }
.about-cover-seal { position: absolute; z-index: 1; top: 18px; right: 18px; display: grid; place-items: center; width: 45px; height: 45px; color: #e6c88d; border: 1px solid #ba9a5e; border-radius: 50%; background: #101b23aa; }
.about-intro { padding: 21px 23px 24px; border-bottom: 1px solid #a68c5030; }
.about-intro p { margin: 0 0 15px; color: #bdc9cc; font-size: 13px; line-height: 1.85; }
.about-browser { display: flex; gap: 7px; align-items: center; color: #a8bd9e; font-size: 11px; }.about-browser .tida-icon { width: 17px; height: 17px; }
.about-classes, .about-chapters { padding: 25px 20px 0; }
.about-section-title { margin: 0 2px 17px; }.about-section-title h2 { margin: 5px 0 0; font: 23px/1.2 Georgia, serif; color: #e9d9b8; }.about-section-title p { margin: 8px 0 0; color: #93a7b0; font-size: 11px; }
.about-portraits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.about-portraits figure { margin: 0; overflow: hidden; padding: 4px; border: 1px solid #806e4b; border-radius: 9px; background: linear-gradient(#28353c, #16222a); }
.about-portraits img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 5px; }
.about-portraits figcaption { padding: 9px 0 6px; text-align: center; text-transform: capitalize; color: #ddc89f; font: 15px Georgia, serif; }
.about-chapter { margin-bottom: 11px; border: 1px solid #5e5c48; border-radius: 10px; overflow: hidden; background: #16232c; }
.about-chapter summary, .about-reference summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 13px 14px; cursor: pointer; }
.about-chapter summary::-webkit-details-marker, .about-reference summary::-webkit-details-marker { display: none; }
.about-chapter summary > .tida-icon, .about-reference summary > .tida-icon:last-child { width: 17px; margin-left: auto; color: #b39b6c; transition: transform .18s; }
.about-chapter[open] summary > .tida-icon, .about-reference[open] summary > .tida-icon:last-child { transform: rotate(90deg); }
.about-chapter[open] { border-color: #a38752; }.about-chapter[open] summary { background: linear-gradient(100deg, #353b31, #1a2931); }
.about-chapter-icon { display: grid; place-items: center; width: 39px; height: 43px; flex-shrink: 0; border: 1px solid #84734b; border-radius: 8px; color: #d8bd85; background: #0e1922; }
.about-chapter summary small { display: block; font-size: 9px; color: #a39c7d; letter-spacing: .1em; }.about-chapter summary strong { display: block; font: 16px/1.3 Georgia, serif; color: #ead9b6; }
.about-chapter-body { padding: 0 15px 17px; border-top: 1px solid #69735733; }.about-chapter-body p { margin: 13px 0 0; color: #b9c8ce; font-size: 13px; line-height: 1.75; }
.about-chapter-art { display: block; width: calc(100% + 30px); max-width: none; height: 133px; object-fit: cover; margin: 0 -15px 17px; }
.about-chapter--adventures .about-chapter-art { object-position: center 39%; }.about-chapter--clans .about-chapter-art { object-position: center 32%; }
.about-collection { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }.about-collection img { object-fit: cover; border: 1px solid #8b754d; border-radius: 5px; padding: 2px; background: #0d161d; }
.about-inline-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 9px; color: #d6b77b; font-size: 12px; }.about-inline-link .tida-icon { width: 17px; height: 17px; }
.about-reference { border-bottom: 1px solid #74674466; margin-top: 13px; }.about-reference summary { min-height: 60px; padding: 10px 3px; color: #c9b182; font-size: 13px; }.about-reference summary > .tida-icon { width: 21px; }.about-reference > div { padding: 0 4px 15px; font-size: 13px; color: #adbec6; }.about-reference ul { padding-left: 20px; margin: 0; }.about-reference li { margin-bottom: 10px; }
.about-start { padding: 26px 22px 20px; }.about-online { display: flex; gap: 5px; justify-content: center; align-items: center; margin-bottom: 17px; color: #a0b4ba; font-size: 11px; }.about-online strong { font-weight: 500; color: #d1dbc9; }.about-online i { width: 6px; height: 6px; background: #92bd74; border-radius: 50%; margin-right: 2px; box-shadow: 0 0 8px #92bd7444; }
.about-primary { display: flex; justify-content: center; align-items: center; gap: 13px; min-height: 58px; padding: 12px; color: #f5e5c2 !important; font: 20px Georgia, serif; border: 1px solid #e8c282; border-radius: 9px; background: linear-gradient(#ac7b3b, #785126 60%, #694521); box-shadow: inset 0 0 0 3px #735023, inset 0 0 0 4px #bc925253; text-shadow: 0 1px 2px #382713; }.about-primary .tida-icon:last-child { width: 18px; }
.about-signin { display: flex; align-items: center; justify-content: center; min-height: 48px; color: #c4ad82; font-size: 12px; font-weight: normal; }
.about-useful { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #675d4033; }.about-useful a { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; font-size: 11px; color: #aab8bc; }.about-useful .tida-icon { width: 17px; height: 17px; color: #c2a36d; }
@media (max-width: 350px) { .about-cover h1 { font-size: 28px; }.about-classes, .about-chapters { padding-left: 14px; padding-right: 14px; }.about-intro { padding-left: 17px; padding-right: 17px; }.about-portraits { gap: 8px; }.about-chapter summary { padding: 12px 10px; gap: 9px; }.about-chapter summary strong { font-size: 15px; }.about-start { padding-left: 15px; padding-right: 15px; } }
@media (prefers-reduced-motion: reduce) { .about-guide * { transition: none !important; } }