@font-face { font-family: MiSans; src: url("/brand-misans.woff2") format("woff2"); font-display: swap; }
#brandHomepage{color-scheme: light; --paper: #f4f3ec; --surface: #fcfbf6; --ink: #213f3a; --muted: #60716a; --accent: #9c5038; --accent-text: #fffaf0; --line: #d7d9cc; --wash: #e7eadc; --shadow: #293f3020; --serif: 'Noto Serif SC Variable','Songti SC',serif; --sans: MiSans,'Microsoft Yahei',sans-serif;}
body[data-theme="clay"] #brandHomepage{--paper: #e9dfd6; --surface: #faf5ef; --ink: #342f30; --muted: #66595a; --accent: #a95752; --accent-text: #ffffff; --line: rgba(52,47,48,.13); --wash: #dccdc2; --shadow: #43312f24; --sans: var(--serif);}
body[data-theme="valley"] #brandHomepage{color-scheme: dark; --paper: #132724; --surface: #24423c; --ink: #f2ebdd; --muted: #bdc8c0; --accent: #e28d78; --accent-text: #142521; --line: rgba(240,235,220,.15); --wash: #1a332f; --shadow: #050e0d47; --sans: 'IBM Plex Sans SC','Microsoft YaHei UI',sans-serif;}
#brandHomepage *{box-sizing: border-box;}
#brandHomepage{scroll-behavior: smooth; scroll-padding-top: 30px;}
#brandHomepage{margin: 0px; background: var(--paper); color: var(--ink); font: 15px/1.8 var(--sans); transition: background 0.35s, color 0.35s;}
#brandHomepage button,#brandHomepage input{font: inherit;}
#brandHomepage button,#brandHomepage a,#brandHomepage input,#brandHomepage summary{-webkit-tap-highlight-color: transparent;}
#brandHomepage button{cursor: pointer; color: inherit;}
#brandHomepage button:focus-visible,#brandHomepage a:focus-visible,#brandHomepage summary:focus-visible{outline: 2px solid var(--accent); outline-offset: 5px;}
#brandHomepage input:focus-visible{outline: 2px solid var(--accent); outline-offset: 2px;}
#brandHomepage a{color: inherit; text-decoration: none;}
#brandHomepage h1,#brandHomepage h2,#brandHomepage h3,#brandHomepage p{margin: 0px;}
#brandHomepage h1,#brandHomepage h2,#brandHomepage h3{font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em;}
#brandHomepage svg{display: block;}
#brandHomepage button{border: 0px;}
#brandHomepage [hidden]{display: none !important;}
#brandHomepage .preview-bar{display: flex; justify-content: space-between; gap: 20px; background: var(--ink); color: var(--paper); padding: 5px max(4vw, 20px); font-size: 10px; letter-spacing: 0.04em;}
#brandHomepage .masthead{max-width: 1480px; padding: 29px 5%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 40px;}
#brandHomepage .brand{display: flex; align-items: center; gap: 12px; white-space: nowrap;}
#brandHomepage .brand svg{width: 31px; height: 34px; fill: var(--accent); stroke: none;}
#brandHomepage .brand strong{font: 600 27px var(--serif); letter-spacing: 0.05em;}
#brandHomepage .brand span{font-size: 12px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 14px; margin-left: 2px;}
#brandHomepage .masthead nav{display: flex; gap: 38px; font-size: 13px; align-items: center;}
#brandHomepage .masthead nav a{display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent;}
#brandHomepage .masthead nav a:hover,#brandHomepage .masthead nav a[aria-current="page"]{border-color: var(--accent); color: var(--accent);}
#brandHomepage .hero{max-width: 1480px; position: relative; margin: auto; padding: 4px 4% 72px 7%; display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: center; min-height: 700px;}
#brandHomepage .hero-copy{position: relative; z-index: 1; padding: 10px 0px 25px;}
#brandHomepage .hero h1{font-size: clamp(34px, 3.3vw, 48px); letter-spacing: 0.015em; line-height: 1.55; margin-bottom: 30px;}
#brandHomepage .hero-kicker{font: 400 19px/1.6 var(--serif); color: var(--muted); letter-spacing: 0.12em; margin-bottom: 22px;}
#brandHomepage .scene-wordmark{position: absolute; top: 14px; left: 0px; width: 100%; margin: 0px; text-align: center; font: 400 clamp(30px, 3.8vw, 54px) / 1.3 Georgia, "Times New Roman", serif; letter-spacing: 0.015em; color: var(--ink); pointer-events: none;}
#brandHomepage .hero-description{font-size: 15px; line-height: 2; color: var(--muted); margin: 23px 0px 29px; letter-spacing: 0.02em;}
#brandHomepage .primary{display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 51px; padding: 12px 24px; background: var(--accent); color: var(--accent-text); font-size: 14px; border: 1px solid transparent; border-radius: 3px; transition: transform 0.2s, box-shadow 0.2s;}
#brandHomepage .primary svg{width: 21px; height: 21px; stroke: currentcolor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
#brandHomepage .primary:hover{transform: translateY(-2px); box-shadow: 0 7px 16px var(--shadow);}
#brandHomepage .trial-note{font-size: 11px; color: var(--muted); margin-top: 14px;}
#brandHomepage .scene-shell{position: relative; height: 655px; min-width: 0px; isolation: isolate;}
#brandHomepage .scene-shell canvas{display: block; width: 100%; height: 100%; touch-action: pan-y;}
#brandHomepage .scene-fallback{position: absolute; inset: 45% 14% auto; text-align: center; color: var(--muted); font-size: 13px;}
#brandHomepage .theme-picker{position: absolute; left: 7%; bottom: 31px; display: flex; gap: 19px;}
#brandHomepage .theme-picker button{display: flex; align-items: center; gap: 9px; min-height: 38px; background: transparent; font-size: 11px; padding: 4px 2px; color: var(--muted);}
#brandHomepage .theme-picker i{width: 13px; height: 13px; border-radius: 50%; background: rgb(113, 143, 126); box-shadow: rgba(0, 0, 0, 0.133) 0px 0px 0px 1px inset;}
#brandHomepage .theme-picker [data-theme-choice="clay"] i{background: rgb(169, 87, 82);}
#brandHomepage .theme-picker [data-theme-choice="valley"] i{background: rgb(40, 73, 75);}
#brandHomepage .theme-picker [aria-pressed="true"]{color: var(--ink);}
#brandHomepage .theme-picker [aria-pressed="true"] i{outline: 1px solid var(--ink); outline-offset: 4px;}
#brandHomepage .section{max-width: 1250px; margin: 0px auto; padding: 65px 4%;}
#brandHomepage .section h2{font-size: clamp(27px, 3.3vw, 43px); line-height: 1.5;}
#brandHomepage .features{border-top: 1px solid var(--line);}
#brandHomepage .features h2{margin-bottom: 42px;}
#brandHomepage .feature-grid{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr));}
#brandHomepage .feature-grid article{display: grid; grid-template-rows: 25px 44px auto; gap: 18px; align-content: start; border-right: 1px solid var(--line); padding: 4px 38px 12px;}
#brandHomepage .feature-grid article:first-child{padding-left: 0px;}
#brandHomepage .feature-grid article:last-child{border: 0px; padding-right: 0px;}
#brandHomepage .number{font: italic 17px / 25px Georgia, serif; color: var(--accent);}
#brandHomepage .feature-grid h3{font-size: 27px; line-height: 44px;}
#brandHomepage .feature-grid p{margin: 0px; font-size: 14px; line-height: 2; color: var(--muted); align-self: start;}
#brandHomepage .demo{padding-top: 10px; padding-bottom: 90px;}
#brandHomepage .video-frame{position:relative;border: 1px solid var(--line); padding: 7px; background: var(--surface); border-radius: 11px; box-shadow: 0 18px 45px var(--shadow);}
#brandHomepage #demoPauseButton{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;padding:0;background:var(--surface);color:var(--ink);cursor:pointer;font-size:16px;line-height:1;opacity:.9}
#brandHomepage #demoPauseButton[hidden]{display:none}
#brandHomepage video{display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 5px; background: var(--surface);}
#brandHomepage .faq{max-width: 950px; padding-top: 10px; padding-bottom: 75px;}
#brandHomepage .faq h2{font-size: 34px; margin-bottom: 35px; text-align: center;}
#brandHomepage .faq-list{border-top: 1px solid var(--line);}
#brandHomepage details{border-bottom: 1px solid var(--line);}
#brandHomepage summary{display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 75px; padding: 19px 0px; cursor: pointer; list-style: none; font-size: 15px;}
#brandHomepage summary::-webkit-details-marker{display: none;}
#brandHomepage summary span{font-size: 21px; color: var(--accent); font-weight: 300;}
#brandHomepage details[open] summary span{transform: rotate(45deg);}
#brandHomepage details p{padding: 0px 40px 24px 0px; color: var(--muted); font-size: 14px; line-height: 2;}
#brandHomepage .faq-more{margin: 28px 0 0; text-align: right;}
#brandHomepage .faq-more a{display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-size: 14px;}
#brandHomepage .faq-more a span{color: var(--accent); font-size: 19px; transition: transform .2s ease;}
#brandHomepage .faq-more a:hover span{transform: translateX(3px);}
#brandHomepage .closing{max-width: 1138px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--wash); padding: 47px 45px; margin: 15px auto 72px; border: 1px solid var(--line); border-radius: 3px;}
#brandHomepage .closing h2{font-size: 30px;}
#brandHomepage .site-footer{border-top: 1px solid var(--line); padding: 32px 6% 40px; text-align: center; color: var(--muted); font-size: 11px;}
#brandHomepage .legal-links{display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-bottom: 24px; font-size: 12px;}
#brandHomepage .legal-links a,#brandHomepage .footer-contact a{padding: 6px 0px;}
#brandHomepage .legal-links a:hover,#brandHomepage .footer-contact a:hover{text-decoration: underline;}
#brandHomepage .footer-contact{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 4px;}
#brandHomepage .essay-page{max-width: 760px; min-height: 65vh; margin: 45px auto 95px; padding: 0px 28px;}
#brandHomepage .back-link{display: inline-block; background: none; padding: 8px 0px; font-size: 12px; color: var(--muted); margin-bottom: 40px;}
#brandHomepage .back-link:hover{color: var(--accent);}
#brandHomepage .purpose-prose p{font: 400 18px/2.15 var(--serif); margin-bottom: 27px; letter-spacing: 0.015em;}
#brandHomepage .invitation{margin-top: 45px; border-top: 1px solid var(--line); padding-top: 28px; font-size: 14px; color: var(--muted);}
#brandHomepage .invitation a{display: inline-block; color: var(--accent); margin-top: 16px;}
#brandHomepage .library-page{max-width: 1170px; margin: 40px auto 95px; padding: 0px 36px; min-height: 65vh;}
#brandHomepage .library-heading{display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 32px; gap: 30px;}
#brandHomepage .library-heading h1{font-size: 48px; letter-spacing: 0.1em; margin-bottom: 13px;}
#brandHomepage .library-heading p{font-size: 15px; color: var(--muted);}
#brandHomepage .library-heading > span{font-size: 11px; color: var(--muted);}
#brandHomepage #collectionShelf h2{font-size: 27px; line-height: 1.6; margin: 35px 0px 25px;}
#brandHomepage .edition-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 28px;}
#brandHomepage .edition-card{padding: 0px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; text-align: left; background: var(--surface); transition: transform 0.2s, box-shadow 0.2s;}
#brandHomepage .edition-card:hover{transform: translateY(-4px); box-shadow: 0 14px 35px var(--shadow);}
#brandHomepage .cover{position: relative; aspect-ratio: 2.1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgb(212, 222, 209); color: rgb(54, 93, 83);}
#brandHomepage .cover svg{width: 85%; height: 85%; fill: none; stroke: currentcolor; stroke-width: 1.1; opacity: 0.8;}
#brandHomepage .cover > span{position: absolute; left: 22px; top: 12px; font: italic 18px Georgia, serif; opacity: 0.7;}
#brandHomepage .cover-boundaries{background: rgb(230, 210, 184); color: rgb(139, 87, 61);}
#brandHomepage .edition-copy{padding: 23px 26px;}
#brandHomepage .edition-copy h3{font-size: 27px; margin-bottom: 12px;}
#brandHomepage .edition-copy p{font-size: 13px; color: var(--muted); min-height: 54px;}
#brandHomepage .edition-copy > div{display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 15px; font-size: 11px;}
#brandHomepage .edition-copy > div span:last-child{color: var(--accent);}
#brandHomepage .reader-topline{display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 23px;}
#brandHomepage .reader-topline .back-link{margin: 0px;}
#brandHomepage .reading-options{display: flex; gap: 10px;}
#brandHomepage .reading-options button{background: none; border: 1px solid transparent; padding: 5px 10px; font-size: 12px;}
#brandHomepage .reading-options [aria-pressed="true"]{border-color: var(--line); background: var(--wash);}
#brandHomepage .collection-title{font-size: 36px; margin: 32px 0px 23px; line-height: 1.5;}
#brandHomepage .version-picker{display: flex; gap: 15px; flex-wrap: wrap;}
#brandHomepage .version-picker button{background: none; font-size: 12px; border-bottom: 1px solid var(--line); padding: 8px 3px;}
#brandHomepage .version-picker [aria-pressed="true"]{border-color: var(--accent); color: var(--accent);}
#brandHomepage #versionIntroduction{font-size: 14px; color: var(--muted); max-width: 750px; margin: 24px 0px 36px;}
#brandHomepage .reader-layout{display: grid; grid-template-columns: 190px minmax(0px, 1fr); gap: 50px; border-top: 1px solid var(--line); padding-top: 30px;}
#brandHomepage #chapterNavigation{position: sticky; top: 30px; align-self: start; display: flex; flex-direction: column; gap: 10px;}
#brandHomepage #chapterNavigation button{padding: 13px 12px; text-align: left; background: none; font-size: 12px; border-left: 2px solid transparent; line-height: 1.7;}
#brandHomepage #chapterNavigation [aria-current="true"]{border-color: var(--accent); background: var(--wash);}
#brandHomepage #chapterReader{max-width: 720px;}
#brandHomepage #chapterReader h3{font-size: 30px; line-height: 1.6; margin-bottom: 26px;}
#brandHomepage #chapterReader p{font: 400 18px/2.1 var(--serif); margin-bottom: 26px; text-indent: 0px; letter-spacing: 0.01em;}
#brandHomepage #chapterReader details{background: var(--wash); border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: initial; border-left: 2px solid var(--accent); padding: 0px 22px; margin-top: 35px;}
#brandHomepage #chapterReader summary{font-size: 14px; min-height: 62px;}
#brandHomepage #chapterReader details p{font: 14px/2 var(--sans); padding: 0px 0px 23px; margin: 0px;}
#brandHomepage #readerView[data-size="large"] #chapterReader > p{font-size: 21px;}
#brandHomepage dialog{width: min(470px, 100% - 30px); padding: 40px 39px 32px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink); max-height: calc(-36px + 100dvh); overflow: auto; box-shadow: rgba(6, 28, 52, 0.19) 0px 24px 85px;}
#brandHomepage dialog::backdrop{background: rgba(16, 44, 49, 0.373); backdrop-filter: blur(5px);}
#brandHomepage dialog[open]{animation: 0.23s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running dialog-in;}
#brandHomepage .dialog-close{position: absolute; right: 15px; top: 15px; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; line-height: 0; background: none; border-radius: 50%; transition: background 0.2s;}
#brandHomepage .dialog-close:hover{background: var(--wash);}
#brandHomepage .dialog-close svg{display: block; width: 22px; height: 22px; fill: none; stroke: currentcolor; stroke-width: 1.5;}
#brandHomepage .dialog-brand{font: 500 21px var(--serif); letter-spacing: 0.04em;}
#brandHomepage .dialog-brand span{font: 11px var(--sans); margin-left: 9px; color: var(--muted);}
#brandHomepage dialog h2{font-size: 31px; margin-top: 16px; line-height: 1.5;}
#brandHomepage .auth-tabs{display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); margin: 22px 0px 25px;}
#brandHomepage .auth-tabs button{padding: 10px; background: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px;}
#brandHomepage .auth-tabs [aria-selected="true"]{color: var(--ink); border-color: var(--accent);}
#brandHomepage .auth-form{display: flex; flex-direction: column; gap: 19px;}
#brandHomepage .auth-form label{font-size: 12px; display: flex; flex-direction: column; gap: 8px;}
#brandHomepage .auth-form input{min-width: 0px; width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); color: var(--ink); padding: 10px 13px; font-size: 14px;}
#brandHomepage .auth-form input::placeholder{color: var(--muted); opacity: 0.8;}
#brandHomepage .forgot{align-self: flex-end; font-size: 12px; background: none; color: var(--accent); padding: 3px 0px; margin-top: -6px;}
#brandHomepage .auth-submit{width: 100%; margin-top: 3px; gap: 14px;}
#brandHomepage .field-hint,#brandHomepage .consent-note{font-size: 11px; color: var(--muted); line-height: 1.8;}
#brandHomepage .field-hint{margin-top: -10px;}
#brandHomepage .consent-note{text-align: center;}
#brandHomepage .consent-note a{border-bottom: 1px solid var(--line); margin: 0px 3px;}
#brandHomepage .reset-description{font-size: 13px; color: var(--muted); margin-top: 22px;}
#brandHomepage .plain-link{background: none; font-size: 12px; color: var(--muted); padding: 4px;}
#brandHomepage #previewFeedback{font-size: 12px; border-top: 1px solid var(--line); color: var(--muted); padding-top: 18px; margin-top: 20px;}
#brandHomepage #previewFeedback a{color: var(--accent); text-decoration: underline;}
@keyframes dialog-in {0% { opacity: 0; transform: translateY(12px) scale(0.99); }
100% { opacity: 1; transform: none; }}
@media (min-width: 1600px) {#brandHomepage .hero{min-height: 780px;}
#brandHomepage .scene-shell{height: 710px;}
#brandHomepage .hero-copy{padding-left: 10px;}}
@media (max-width: 1080px) {#brandHomepage .masthead{padding: 22px 5%; gap: 20px;}
#brandHomepage .masthead nav{gap: 27px;}
#brandHomepage .hero{padding-left: 6%; padding-right: 2%; grid-template-columns: 0.86fr 1.14fr; min-height: 620px;}
#brandHomepage .scene-shell{height: 570px;}
#brandHomepage .hero h1{font-size: 36px;}
#brandHomepage .hero-description{font-size: 14px;}
#brandHomepage .brand span{display: none;}
#brandHomepage .feature-grid article{padding-left: 26px; padding-right: 26px;}
#brandHomepage .closing{margin-left: 5%; margin-right: 5%;}
#brandHomepage .theme-picker{left: 6%;}}
@media (max-width: 720px) {#brandHomepage .preview-bar{font-size: 9px; padding: 5px 5%; gap: 10px;}
#brandHomepage .preview-bar span:last-child{max-width: 170px; text-align: right;}
#brandHomepage .masthead{gap: 15px; padding: 20px 5%;}
#brandHomepage .brand{gap: 7px;}
#brandHomepage .brand strong{font-size: 22px;}
#brandHomepage .brand svg{width: 23px; height: 28px;}
#brandHomepage .masthead nav{gap: 18px; font-size: 12px;}
#brandHomepage .hero{display: flex; flex-direction: column; padding: 28px 5% 72px; min-height: unset;}
#brandHomepage .hero-copy{text-align: center; padding: 0px; align-self: stretch;}
#brandHomepage .hero h1{font-size: 34px;}
#brandHomepage .hero-kicker{font-size: 17px; margin-bottom: 17px;}
#brandHomepage .scene-wordmark{top: 18px; font-size: 44px;}
#brandHomepage .hero-description{font-size: 14px; margin: 20px 0px 23px;}
#brandHomepage .trial-note{margin-top: 12px;}
#brandHomepage .scene-shell{height: 550px; max-width: 590px; width: calc(100% + 20px); margin: 5px -10px -8px;}
#brandHomepage .theme-picker{left: 50%; transform: translateX(-50%); bottom: 15px; white-space: nowrap; gap: 20px;}
#brandHomepage .section{padding: 43px 6%;}
#brandHomepage .features h2{text-align: center; font-size: 29px; margin-bottom: 28px;}
#brandHomepage .feature-grid{grid-template-columns: 1fr;}
#brandHomepage .feature-grid article,#brandHomepage .feature-grid article:first-child,#brandHomepage .feature-grid article:last-child{grid-template-columns: 25px 1fr; grid-template-rows: 40px auto; gap: 8px 19px; padding: 22px 0px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: initial; border-bottom: 1px solid var(--line);}
#brandHomepage .feature-grid article:last-child{border: 0px;}
#brandHomepage .number{grid-area: 1 / 1; align-self: center;}
#brandHomepage .feature-grid h3{grid-area: 1 / 2; font-size: 24px; line-height: 40px;}
#brandHomepage .feature-grid p{grid-area: 2 / 2; font-size: 14px;}
#brandHomepage .demo{padding: 5px 4% 60px;}
#brandHomepage .video-frame{padding: 3px; border-radius: 7px;}
#brandHomepage .faq{padding-top: 5px; padding-bottom: 38px;}
#brandHomepage .faq h2{font-size: 27px; margin-bottom: 26px;}
#brandHomepage .faq summary{font-size: 14px;}
#brandHomepage .closing{padding: 34px 20px; flex-direction: column; text-align: center; margin: 20px 5% 44px; gap: 25px;}
#brandHomepage .closing h2{font-size: 25px;}
#brandHomepage .site-footer{font-size: 10px;}
#brandHomepage .legal-links{font-size: 11px; gap: 19px; margin-bottom: 19px;}
#brandHomepage .footer-contact{flex-direction: column; gap: 0px;}
#brandHomepage .essay-page{padding: 0px 26px; margin-top: 20px;}
#brandHomepage .purpose-prose p{font-size: 17px;}
#brandHomepage .library-page{padding: 0px 23px; margin: 22px auto 65px;}
#brandHomepage .library-heading{align-items: start; flex-direction: column; gap: 18px;}
#brandHomepage .library-heading h1{font-size: 39px;}
#brandHomepage .library-heading p{font-size: 14px;}
#brandHomepage .edition-grid{grid-template-columns: 1fr; gap: 25px;}
#brandHomepage #collectionShelf h2{font-size: 25px;}
#brandHomepage .edition-copy h3{font-size: 26px;}
#brandHomepage .edition-copy p{min-height: unset;}
#brandHomepage .reader-topline{gap: 16px;}
#brandHomepage .reader-layout{grid-template-columns: 1fr; gap: 28px; padding-top: 22px;}
#brandHomepage #chapterNavigation{position: static; flex-flow: wrap; gap: 5px;}
#brandHomepage #chapterNavigation button{padding: 9px; flex: 1 1 0%; min-width: 130px;}
#brandHomepage .collection-title{font-size: 28px; margin-top: 26px;}
#brandHomepage #chapterReader h3{font-size: 26px;}
#brandHomepage #chapterReader p{font-size: 17px;}
#brandHomepage dialog{padding: 34px 27px 27px;}
#brandHomepage dialog h2{font-size: 28px;}}
@media (max-width: 480px) {#brandHomepage .scene-shell{height: 430px;}
#brandHomepage .masthead nav{gap: 14px;}
#brandHomepage .brand svg{width: 19px;}
#brandHomepage .hero h1{font-size: clamp(26px, 7.5vw, 32px); letter-spacing: 0.01em;}
#brandHomepage .scene-wordmark{font-size: 34px; top: 13px;}
#brandHomepage .hero{padding-top: 23px;}}
@media (max-width: 360px) {#brandHomepage .brand svg{display: none;}
#brandHomepage .masthead nav{gap: 12px; font-size: 11px;}
#brandHomepage .scene-shell{height: 382px;}
#brandHomepage .hero h1{font-size: 25px;}
#brandHomepage .scene-wordmark{font-size: 30px;}
#brandHomepage .preview-bar{font-size: 8px;}
#brandHomepage .library-page{padding: 0px 19px;}}
@media (prefers-reduced-motion: reduce) {#brandHomepage{scroll-behavior: auto;}
#brandHomepage *,#brandHomepage ::before,#brandHomepage ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important;}}
#brandHomepage{--reading: var(--serif);}
body[data-theme="clay"] #brandHomepage{--reading: var(--serif);}
body[data-theme="valley"] #brandHomepage{--reading: var(--sans);}
#brandHomepage .purpose-prose p,#brandHomepage #chapterReader > p{font-family: var(--reading);}
body[data-theme="clay"] #brandHomepage .hero h1{font-family: var(--serif); font-weight: 400;}
body[data-theme="valley"] #brandHomepage h1,body[data-theme="valley"] #brandHomepage h2,body[data-theme="valley"] #brandHomepage h3{font-family: var(--sans); font-weight: 400; letter-spacing: 0.025em;}
#brandHomepage .legal-page{max-width: 810px; padding: 45px 35px 85px; margin: auto;}
#brandHomepage .legal-page > a:first-child{display: inline-block; margin-bottom: 28px; font-size: 13px; color: var(--accent);}
#brandHomepage .legal-page h1{font-size: 37px; margin: 12px 0px 25px;}
#brandHomepage .legal-page h2{font-size: 22px; margin: 34px 0px 13px;}
#brandHomepage .legal-page p{font-size: 14px; line-height: 2; margin: 0px 0px 13px;}
#brandHomepage .legal-page p a{color: var(--accent); text-decoration: underline;}
@media (max-width: 600px) {#brandHomepage .legal-page{padding: 24px 25px 55px;}
#brandHomepage .legal-page h1{font-size: 30px;}
#brandHomepage .legal-page h2{font-size: 20px;}}
#brandHomepage .scene-shell .scene-wordmark{position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0px; pointer-events: none;}
body[data-theme="mist"]{--bg:#f4f3ec;--surface:#fcfbf6;--surface-raised:#fcfbf6;--surface-soft:#e7eadc;--ink:#213f3a;--muted:#60716a;--faint:#60716a;--accent:#9c5038;--accent-strong:#82432f;--accent-ink:#fffaf0;--line:#d7d9cc;--line-strong:#acb6a6;--font-ui:MiSans,'Microsoft Yahei',sans-serif;--font-display:'Noto Serif SC Variable','Songti SC',serif;--font-reading:'Noto Serif SC Variable','Songti SC',serif}
body:has(#brandHomepage){background:var(--bg);margin:0}
body[data-stage="auth"] .app-shell{max-width:none;width:100%;padding:0;margin:0}
#authView{padding:0;min-height:100vh}
#landingPanel{width:100%;max-width:none;margin:0;padding:0}
#entryScene,#skipIntroButton{display:none!important}
#brandHomepage{display:block;width:100%;background:var(--paper);color:var(--ink);font:15px/1.8 var(--sans)}
#brandHomepage h1,#brandHomepage h2,#brandHomepage h3{max-width:none;transform:none}
#brandHomepage .hero{border:0;background:none;box-shadow:none;margin:0 auto}
#brandHomepage .theme-picker{position:absolute;border:0;box-shadow:none;width:auto;height:auto;background:none;padding:0;transform:none}
#brandHomepage .theme-picker button{width:auto;height:auto;min-height:36px;border:0;background:transparent;padding:4px 8px;color:var(--muted)}
#brandHomepage .theme-picker button[aria-checked="true"]{color:var(--ink)}
#brandHomepage button.primary{display:inline-flex;align-items:center;justify-content:center;width:auto;border:0;box-shadow:none;font:inherit}
#brandHomepage .masthead nav a{font-family:var(--sans)}
#brandHomepage .feature-grid article{box-shadow:none}
#brandHomepage .site-footer p{margin:0}
#brandHomepage .video-frame video{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
#brandHomepage .scene-shell canvas{width:100%;height:100%}
@media(max-width:760px){#brandHomepage .theme-picker{position:static;justify-content:center;grid-column:1;margin:5px 0 20px}#brandHomepage .masthead{gap:16px}}