:root {
    color-scheme: light;
    --forest: #102f25;
    --forest-soft: #1d4939;
    --paper: #f2ead7;
    --paper-light: #fbf7eb;
    --ink: #1d2822;
    --ink-soft: #625f53;
    --line: #cec1a6;
    --orange: #e7742f;
    --orange-dark: #a84c22;
    --blue: #2f6e83;
    --purple: #765790;
    --serif: "STKaiti", "KaiTi", "Songti SC", serif;
    --sans: "LXGW WenKai", "Microsoft YaHei UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background:
        radial-gradient(circle at 88% 7%, rgba(231, 116, 47, .13), transparent 28rem),
        linear-gradient(115deg, rgba(16,47,37,.035) 1px, transparent 1px),
        var(--paper);
    background-size: auto, 38px 38px, auto;
    color: var(--ink);
    font-family: var(--sans);
}
a { color: inherit; }
.skip-link {
    position: fixed; z-index: 20; left: 20px; top: -60px;
    padding: 10px 16px; background: var(--forest); color: white;
}
.skip-link:focus { top: 12px; }
.paper-grain {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .28;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.portal-header {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    min-height: 88px; padding: 0 clamp(22px, 5vw, 74px);
    border-bottom: 1px solid rgba(16,47,37,.16);
}
.portal-brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; text-decoration: none; }
.portal-brand svg { width: 43px; fill: none; stroke: var(--forest); stroke-width: 1.7; }
.portal-brand strong { display: block; font-family: var(--serif); font-size: 19px; letter-spacing: .08em; }
.portal-brand small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 8px; letter-spacing: .16em; }
.portal-header nav { display: flex; gap: 7px; }
.portal-header nav a {
    padding: 8px 15px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 700;
}
.portal-header nav a:hover, .portal-header nav a:focus-visible { background: rgba(16,47,37,.09); }
.service-status {
    justify-self: end; display: flex; align-items: center; gap: 7px;
    color: var(--ink-soft); font-size: 12px;
}
.service-status i { width: 7px; height: 7px; border-radius: 50%; background: #d09b32; box-shadow: 0 0 0 4px rgba(208,155,50,.14); }
.service-status.online i { background: #3e8764; box-shadow: 0 0 0 4px rgba(62,135,100,.14); }
.service-status.offline i { background: #b85442; }
main { overflow: hidden; }
.portal-hero {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); gap: clamp(35px, 7vw, 100px);
    min-height: 690px; padding: clamp(70px, 9vw, 120px) clamp(24px, 8vw, 128px) 80px;
}
.hero-copy { max-width: 760px; animation: rise .75s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow {
    margin: 0 0 18px; color: var(--orange-dark); font-size: 11px; font-weight: 850;
    letter-spacing: .14em; text-transform: uppercase;
}
.hero-copy h1 {
    margin: 0; font-family: var(--serif); font-size: clamp(49px, 6.4vw, 92px);
    font-weight: 500; letter-spacing: -.055em; line-height: 1.04;
}
.hero-lead { max-width: 680px; margin: 28px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; margin-top: 37px; }
.hero-actions a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 23px;
    border: 1px solid var(--forest); border-radius: 3px; text-decoration: none; font-weight: 800; font-size: 13px;
}
.primary-action { background: var(--forest); color: var(--paper-light); }
.primary-action span { margin-left: 22px; font-size: 18px; transition: transform .2s ease; }
.primary-action:hover span { transform: translateX(4px); }
.secondary-action:hover { background: rgba(16,47,37,.07); }
.hero-stats { display: flex; gap: clamp(25px, 4vw, 58px); margin-top: 55px; }
.hero-stats div { display: grid; gap: 3px; }
.hero-stats strong { font-family: var(--serif); font-size: 31px; color: var(--forest); }
.hero-stats span { color: var(--ink-soft); font-size: 11px; }
.knowledge-orbit {
    position: relative; align-self: center; justify-self: center; width: min(41vw, 560px); aspect-ratio: 1;
    animation: fade .9s .18s both;
}
.orbit-note { position: absolute; top: -20px; right: 10%; color: var(--ink-soft); font-size: 8px; letter-spacing: .22em; }
.orbit-ring { position: absolute; inset: 6%; border: 1px solid rgba(16,47,37,.22); border-radius: 50%; }
.ring-one::before, .ring-one::after { position: absolute; content: ""; border-radius: 50%; background: var(--orange); }
.ring-one::before { width: 9px; height: 9px; left: 11%; top: 16%; }
.ring-one::after { width: 5px; height: 5px; right: 9%; bottom: 22%; }
.ring-two { inset: 23%; border-style: dashed; animation: spin 38s linear infinite; }
.orbit-core {
    position: absolute; inset: 34%; display: grid; place-content: center; text-align: center;
    border-radius: 50%; background: var(--forest); color: var(--paper-light);
    box-shadow: 0 24px 60px rgba(16,47,37,.28);
}
.orbit-core b { display: inline; font-family: var(--serif); font-size: clamp(28px, 4vw, 50px); font-weight: 500; }
.orbit-core em { padding: 0 6px; color: var(--orange); font-style: normal; }
.orbit-core small { display: block; margin-top: 8px; color: #bdcec4; font-size: 10px; line-height: 1.5; }
.orbit-node {
    position: absolute; display: grid; min-width: 130px; padding: 13px 18px;
    border: 1px solid rgba(16,47,37,.24); background: rgba(251,247,235,.91);
    box-shadow: 0 12px 28px rgba(48,55,48,.12); text-decoration: none;
    backdrop-filter: blur(6px); transition: transform .22s ease, box-shadow .22s ease;
}
.orbit-node:hover { transform: translateY(-4px); box-shadow: 0 19px 34px rgba(48,55,48,.17); }
.orbit-node b { font-family: var(--serif); font-size: 17px; }
.orbit-node small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }
.node-deep { left: 1%; top: 24%; border-left: 5px solid var(--blue); }
.node-english { right: 0; top: 18%; border-left: 5px solid var(--orange); }
.node-research { right: 7%; bottom: 11%; border-left: 5px solid var(--purple); }
.domain-section { padding: 95px clamp(24px, 7vw, 110px) 110px; background: var(--forest); color: var(--paper-light); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(280px, 470px); gap: 30px; align-items: end; margin-bottom: 46px; }
.section-heading .eyebrow { color: #ef9b62; }
.section-heading h2, .daily-intro h2, .source-standard h2 { margin: 0; font-family: var(--serif); font-size: clamp(32px, 4.5vw, 58px); font-weight: 500; line-height: 1.12; }
.section-heading > p { margin: 0; color: #bdcbc3; line-height: 1.8; font-size: 14px; }
.domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.domain-card {
    position: relative; display: flex; flex-direction: column; min-height: 510px; padding: 31px;
    overflow: hidden; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.055);
    transition: transform .25s ease, background .25s ease;
}
.domain-card:hover { transform: translateY(-7px); background: rgba(255,255,255,.08); }
.domain-number { position: absolute; right: 25px; top: 18px; color: rgba(255,255,255,.11); font-family: var(--serif); font-size: 78px; line-height: 1; }
.domain-en { position: relative; margin: 0 0 42px; color: #aabbb2; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.domain-card h3 { position: relative; margin: 0 0 18px; font-family: var(--serif); font-size: 32px; font-weight: 500; }
.domain-card > p:not(.domain-en) { min-height: 80px; margin: 0; color: #c9d3cd; font-size: 14px; line-height: 1.8; }
.topic-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin: 23px 0; padding: 0; list-style: none; }
.topic-cloud li { padding: 5px 8px; border: 1px solid rgba(255,255,255,.14); color: #d8dfda; font-size: 10px; }
.card-progress { margin-top: auto; }
.card-progress > span { display: block; height: 3px; background: rgba(255,255,255,.12); }
.card-progress i { display: block; width: 0; height: 100%; background: #eb8a4d; transition: width .7s ease; }
.card-progress b { display: block; margin-top: 9px; color: #acbcb3; font-size: 10px; font-weight: 500; }
.library-count { display: flex; align-items: end; gap: 10px; margin-top: auto; color: #acbcb3; }
.library-count strong { color: #c6add7; font-family: var(--serif); font-size: 35px; line-height: 1; }
.library-count span { font-size: 10px; }
.domain-card > a { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.14); color: white; text-decoration: none; font-weight: 800; font-size: 12px; }
.deep-card { box-shadow: inset 0 5px 0 var(--blue); }
.english-card { box-shadow: inset 0 5px 0 var(--orange); }
.research-card { box-shadow: inset 0 5px 0 var(--purple); }
.daily-section { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(45px, 9vw, 140px); padding: 115px clamp(24px, 9vw, 145px); }
.daily-intro > p:not(.eyebrow) { max-width: 520px; color: var(--ink-soft); line-height: 1.8; }
.daily-flow { margin: 0; padding: 0; list-style: none; }
.daily-flow li { display: grid; grid-template-columns: 86px 1fr; gap: 25px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.daily-flow li > span { color: var(--orange-dark); font-family: var(--serif); font-size: 18px; }
.daily-flow b { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.daily-flow p { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.source-standard {
    display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px;
    margin: 0 clamp(24px, 7vw, 110px) 110px; padding: 47px;
    border: 1px solid var(--line); background: var(--paper-light);
}
.source-standard h2 { font-size: clamp(28px, 3.5vw, 45px); }
.source-rules p { display: grid; grid-template-columns: 100px 1fr; gap: 20px; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.source-rules p:last-child { border: 0; }
.source-rules b { color: var(--forest); font-family: var(--serif); }
.source-rules span { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.portal-footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px clamp(24px, 7vw, 110px); background: #0b241c; color: #aabbb2; font-size: 11px; }
.portal-footer nav { display: flex; gap: 20px; }
.portal-footer a { text-decoration: none; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }
@media (max-width: 980px) {
    .portal-header { grid-template-columns: 1fr auto; }
    .portal-header nav { display: none; }
    .portal-hero { grid-template-columns: 1fr; }
    .knowledge-orbit { width: min(78vw, 520px); }
    .domain-grid { grid-template-columns: 1fr; }
    .domain-card { min-height: 390px; }
    .daily-section, .source-standard { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .portal-header { min-height: 72px; padding: 0 17px; }
    .portal-brand small, .service-status { display: none; }
    .portal-hero { min-height: auto; padding: 57px 20px 65px; }
    .hero-copy h1 { font-size: 48px; }
    .hero-actions { align-items: stretch; flex-direction: column; }
    .hero-stats { justify-content: space-between; gap: 13px; }
    .hero-stats strong { font-size: 25px; }
    .hero-stats span { font-size: 9px; }
    .knowledge-orbit { width: 92vw; margin-left: -5vw; }
    .orbit-node { min-width: 105px; padding: 10px 12px; }
    .node-deep { left: 0; }
    .node-english { right: -2px; }
    .domain-section { padding: 65px 17px 75px; }
    .section-heading { grid-template-columns: 1fr; }
    .domain-card { min-height: 450px; padding: 27px 23px; }
    .daily-section { padding: 76px 20px; }
    .daily-flow li { grid-template-columns: 65px 1fr; gap: 12px; }
    .source-standard { gap: 28px; margin: 0 17px 70px; padding: 27px 22px; }
    .source-rules p { grid-template-columns: 1fr; gap: 5px; }
    .portal-footer { align-items: flex-start; flex-direction: column; }
}