@font-face { font-family:"Studio Display"; src:url("assets/fonts/noto-sans-sc-display-500.ttf") format("truetype"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"Studio Display"; src:url("assets/fonts/noto-sans-sc-display-600.ttf") format("truetype"); font-style:normal; font-weight:600; font-display:swap; }
:root { color-scheme: dark; --canvas:#1b2b39; --paper:rgba(27,43,57,.80); --white:rgba(221,236,246,.10); --ink:#f8fafb; --muted:#c9d6df; --peach:#c69b70; --pink:#a98276; --sky:#8eafc3; --butter:#ffe279; --line:rgba(225,239,249,.23); --blue:#bad7e8; --radius-lg:30px; --radius-pill:999px; --content:min(100% - 4rem,1280px); }
* { box-sizing:border-box; } html { background:var(--canvas); scroll-behavior:smooth; scrollbar-color:#9bb3c5 #233442; }
body { margin:0; min-width:320px; color:var(--ink); background:transparent; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Microsoft YaHei','PingFang SC','Segoe UI',sans-serif; font-size:16px; line-height:1.65; }
body::before { content:''; position:fixed; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(12,30,43,.65),rgba(17,37,51,.30) 55%,rgba(25,33,42,.28)),url('assets/glass-mountain-scene.png') center/cover; }
body::after { content:''; position:fixed; z-index:-1; inset:0; background:linear-gradient(0deg,rgba(12,28,40,.8),transparent 75%); pointer-events:none; }
[hidden] { display:none!important; } a { color:inherit; text-decoration:none; } button,input,textarea,select { font:inherit; } button { cursor:pointer; } button,a { -webkit-tap-highlight-color:transparent; } button:disabled { opacity:.5; cursor:not-allowed; } img { display:block; max-width:100%; height:auto; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Studio Display",-apple-system,"Microsoft YaHei",sans-serif; line-height:1.3; letter-spacing:-.025em; font-weight:500; text-wrap:balance; } h1 { font-size:clamp(2.7rem,4.8vw,4.8rem); } p { line-height:1.8; } ::selection { color:#1b2b39; background:#ffe279; } :focus-visible { outline:3px solid var(--butter); outline-offset:4px; } input,textarea { caret-color:var(--butter); }
.icon { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .section-shell { width:var(--content); margin-inline:auto; } .skip-link { position:fixed; top:-6rem; left:1rem; z-index:100; padding:.75rem 1rem; border-radius:14px; background:#fff; color:#1b2b39; } .skip-link:focus { top:1rem; }
.site-header { width:var(--content); min-height:106px; margin:auto; display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem; align-items:center; position:relative; z-index:20; } .wordmark { display:inline-flex; width:fit-content; gap:.8rem; align-items:center; font-size:1.2rem; font-weight:600; letter-spacing:-.025em; white-space:nowrap; } .brand-mark { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(221,236,246,.16); border:1px solid var(--line); backdrop-filter:blur(12px); } .brand-mark .icon { width:25px; height:25px; }
.site-nav { display:flex; align-items:center; gap:4px; padding:5px; border:1px solid var(--line); background:rgba(41,58,72,.55); backdrop-filter:blur(20px); border-radius:999px; } .site-nav a { display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; padding:.6rem 1.2rem; font-size:.85rem; border-radius:999px; transition:background .2s; } .site-nav .icon { width:17px; height:17px; } .site-nav a:hover { background:rgba(242,249,253,.13); } .site-nav a[aria-current='page'] { background:rgba(242,249,253,.20); } .header-note { justify-self:end; font-size:.78rem; color:var(--muted); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.8rem; min-height:48px; border:0; border-radius:999px; padding:.85rem 1.4rem; font-weight:500; line-height:1.35; transition:background .2s,transform .2s; } .button-primary { background:linear-gradient(100deg,#ffa756,#ffe279); color:#172a36; } .button-primary:hover { background:#ffe99a; transform:translateY(-2px); } .button-primary:active { transform:translateY(0) scale(.98); } .button-secondary { background:var(--white); color:var(--ink); } .button-secondary:hover { background:rgba(221,236,246,.20); }
.glass { border:1px solid var(--line); background:rgba(36,52,65,.66); backdrop-filter:blur(18px); border-radius:30px; } .home-main { padding:1.5rem 0 3rem; } .home-heading h1 { margin-bottom:.8rem; font-size:clamp(2.8rem,4.2vw,4.3rem); } .home-heading p { margin:0; color:var(--muted); font-size:.95rem; } .home-dashboard { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,1.4fr) minmax(0,1fr); gap:2.4rem; align-items:center; margin-top:2.2rem; } .home-left,.home-right { display:grid; gap:1.2rem; } .home-entry { padding:1.65rem; position:relative; transition:background .25s; } .home-entry:hover,.home-reading:hover { background:rgba(60,78,92,.79); } .home-entry>.icon { width:26px; height:26px; color:#e5d0a2; margin-bottom:.8rem; } .home-entry h2 { font-size:1.2rem; margin:0 0 .6rem; } .home-entry p { font-size:.78rem; color:var(--muted); margin:0; max-width:24em; } .entry-arrow { position:absolute; right:1.5rem; top:1.5rem; color:var(--muted); } .home-truth { background:rgba(69,61,63,.65); } .home-mingli { background:rgba(33,53,64,.7); }
.home-orbit { display:flex; align-items:center; flex-direction:column; min-width:0; } .orbit-button { position:relative; width:300px; height:300px; border:1px solid rgba(255,236,170,.8); border-radius:50%; background:rgba(31,45,55,.48); backdrop-filter:blur(6px); box-shadow:0 0 22px rgba(255,200,109,.35),inset 0 0 16px rgba(255,231,150,.18); display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--ink); transition:background .25s,transform .4s cubic-bezier(.16,1,.3,1); } .orbit-rim { position:absolute; inset:-9px; border-radius:50%; border:5px solid transparent; filter:drop-shadow(0 0 6px rgba(255,215,128,.8)); background:linear-gradient(135deg,#fff3be,#ba7b3b 25%,#ffe78d 46%,#824f3c 62%,#ffc56e 85%) border-box; mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0); mask-composite:exclude; pointer-events:none; } .orbit-button::after { content:''; inset:9px; position:absolute; border:1px solid rgba(255,231,161,.48); border-radius:50%; pointer-events:none; } .orbit-button>.icon { width:35px; height:35px; color:#ffe279; margin-bottom:1.1rem; } .orbit-button>span:not(.orbit-rim) { font-size:1.6rem; letter-spacing:.04em; } .orbit-button small { font-size:.8rem; color:#e6d2b1; margin-top:.55rem; } .orbit-button:hover { background:rgba(79,67,52,.62); transform:scale(1.025); } .orbit-button:active { transform:scale(.985); } .orbit-button.is-drawing .orbit-rim { animation:orbit-turn .65s cubic-bezier(.16,1,.3,1); } @keyframes orbit-turn { from { transform:rotate(-130deg); filter:brightness(1.4); } to { transform:rotate(0); filter:brightness(1); } }
.orbit-result { text-align:center; width:100%; margin-top:2rem; padding:1.15rem 1.4rem; min-height:110px; border-radius:24px; } .orbit-result h2 { font-size:1.2rem; line-height:1.55; margin:0 0 .45rem; } .orbit-result p { font-size:.78rem; color:var(--muted); margin:0; } .orbit-custom { display:flex; gap:.4rem; align-items:center; padding:.8rem; min-height:44px; font-size:.75rem; color:#e8dbbd; } .orbit-custom .icon { width:15px; height:15px; }
.home-reading { display:grid; grid-template-columns:88px minmax(0,1fr); gap:1.25rem; padding:1.4rem; align-items:center; transition:background .25s; } .home-reading img { width:88px; height:123px; object-fit:cover; border-radius:5px; } .home-reading h2 { font-size:1.1rem; line-height:1.6; margin:.45rem 0; } .home-reading span,.home-reading p { font-size:.72rem; color:var(--muted); } .home-reading p { margin-bottom:.5rem; } .home-reading .icon { width:17px; height:17px; } .home-shortcuts { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; } .home-shortcuts a { display:flex; align-items:center; gap:.6rem; min-height:48px; padding:.55rem 1.2rem; border:1px solid var(--line); border-radius:999px; background:rgba(28,44,57,.72); backdrop-filter:blur(12px); font-size:.8rem; } .home-shortcuts a:hover { background:rgba(74,88,96,.8); }
.library-main { min-height:calc(100svh - 200px); padding:2.8rem 0 3rem; } .library-heading h1 { font-size:2.7rem; margin-bottom:.7rem; } .library-heading p { color:var(--muted); font-size:1.05rem; margin-bottom:2.8rem; } .library-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3.5rem 2rem; background:rgba(18,32,43,.76); padding:2rem; border-radius:30px; backdrop-filter:blur(20px); } .library-book { min-width:0; } .library-book img { width:100%; aspect-ratio:3/4; object-fit:contain; border-radius:6px; } .library-book h2 { font-family:'Songti SC','SimSun',serif; font-size:1.45rem; line-height:1.55; font-weight:400; margin:1rem 0 .45rem; } .library-book p { color:var(--muted); font-size:.79rem; line-height:1.8; margin:0; } .library-book .book-subtitle { font-family:'Songti SC','SimSun',serif; font-size:.95rem; color:#e3e8ec; margin-bottom:.35rem; } .library-note { color:var(--muted); font-size:.78rem; margin:1.8rem 0 0; }
.decision-step { display:grid; gap:1rem; } .decision-step h2 { font-size:1.5rem; margin:.4rem 0; } .decision-step p { font-size:.9rem; color:var(--muted); margin:0; } .step-number { font-size:.75rem; color:#ffe279; } .decision-step label { display:grid; gap:.6rem; } .decision-step .button { justify-self:start; } .decision-actions { display:flex; gap:.7rem; flex-wrap:wrap; } .decision-feedback { color:#ffde9c; font-size:.85rem; margin:1rem 0 0; } .decision-feedback:empty { display:none; } .question-field { padding:1.2rem 0; border-top:1px solid var(--line); } .report-paper { padding:1.4rem; background:rgba(13,28,40,.76); border-radius:16px; overflow-wrap:anywhere; } .report-paper h2 { font-size:1.6rem; margin:2rem 0 .7rem; } .report-paper h2:first-child { margin-top:0; } .report-paper h3 { font-size:1.2rem; margin:1.5rem 0 .6rem; } .report-paper p,.report-paper li { color:var(--muted); font-size:.95rem; line-height:1.9; } .report-paper a { color:var(--butter); text-decoration:underline; } .report-paper pre { overflow:auto; background:var(--white); padding:1rem; border-radius:12px; } .report-paper code { font-size:.85em; } .report-paper table { display:block; overflow:auto; border-collapse:collapse; max-width:100%; } .report-paper td,.report-paper th { border:1px solid var(--line); padding:.7rem; min-width:6rem; } .report-paper blockquote { margin-inline:0; padding:1rem; background:var(--white); border-radius:12px; }
.site-footer { padding:1.3rem 0 1.8rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--muted); font-size:.75rem; } .site-footer p { margin:0; } .site-footer a { min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:1100px) { .home-dashboard { gap:1.4rem; grid-template-columns:1fr 1.2fr 1fr; } .home-entry { padding:1.2rem; } .home-reading { grid-template-columns:65px minmax(0,1fr); gap:.8rem; padding:1.1rem; } .home-reading img { width:65px; height:90px; } .orbit-button { width:250px; height:250px; } .header-note { display:none; } .site-header { grid-template-columns:1fr auto; } .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { :root { --content:min(100% - 2rem,680px); } body { padding-bottom:calc(90px + env(safe-area-inset-bottom)); } body::before { background-position:58% center; } .site-header { min-height:84px; } .wordmark { font-size:1.1rem; } .brand-mark { width:40px; height:40px; } .site-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:max(12px,env(safe-area-inset-bottom)); width:min(calc(100% - 2rem),430px); display:grid; grid-template-columns:repeat(3,1fr); border-radius:999px; background:rgba(32,48,62,.94); } .site-nav a { flex-direction:column; gap:3px; min-height:56px; font-size:.72rem; padding:.5rem; } .site-nav .icon { width:20px; height:20px; } .home-main { padding-top:1.2rem; } .home-heading h1 { font-size:2.85rem; } .home-heading p { font-size:.84rem; } .home-dashboard { display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; } .home-orbit { order:-1; width:100%; } .orbit-button { width:245px; height:245px; } .orbit-result { width:100%; margin-top:1.7rem; min-height:106px; } .home-left,.home-right { width:100%; grid-template-columns:1fr 1fr; gap:.7rem; } .home-entry { padding:1.1rem; border-radius:24px; min-height:162px; } .home-entry h2 { font-size:1rem; } .home-entry p { font-size:.73rem; } .entry-arrow { top:1.1rem; right:.9rem; } .home-reading { grid-template-columns:1fr; padding:1.1rem; border-radius:24px; } .home-reading img { display:none; } .home-reading h2 { font-size:1rem; } .home-mingli { display:flex; flex-direction:column; justify-content:center; } .home-shortcuts { gap:.5rem; margin-top:1.5rem; } .home-shortcuts a { font-size:.73rem; padding:.6rem .9rem; } .library-main { padding-top:1.5rem; } .library-heading h1 { font-size:2.5rem; } .library-heading p { font-size:.95rem; margin-bottom:1.8rem; } .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem; padding:1rem; border-radius:24px; } .library-book h2 { font-size:1.1rem; margin-top:.8rem; } .library-book p { font-size:.82rem; } .library-book .book-subtitle { font-size:.8rem; } .site-footer { font-size:.7rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition-duration:.01ms!important; } }