:root {
  --ink: #171812;
  --ink-soft: #25261f;
  --paper: #f1ede2;
  --paper-deep: #e6dfcf;
  --muted: #777468;
  --line: rgba(36, 35, 29, 0.14);
  --red: #a43a2d;
  --red-dark: #7f2a21;
  --jade: #3c675a;
  --ochre: #9b7134;
  --white: #fffdf7;
  --shadow: 0 18px 50px rgba(34, 31, 22, 0.08);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(164, 58, 45, 0.28); outline-offset: 3px;
}
.shell { min-height: 100vh; display: grid; grid-template-columns: 244px 1fr; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 244px; z-index: 10;
  display: flex; flex-direction: column; padding: 30px 20px 24px;
  color: #e9e5da; background: var(--ink);
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; background-image: radial-gradient(rgba(255,255,255,.12) .6px, transparent .6px); background-size: 9px 9px; }
.brand { position: relative; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; padding: 0 8px 28px; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); color: #d8b795; font: 26px/1 "STKaiti", "KaiTi", serif; transform: rotate(-3deg); }
.brand strong, .brand small { display: block; }
.brand strong { font: 22px/1.2 "STSong", "SimSun", serif; letter-spacing: .24em; }
.brand small { margin-top: 4px; color: #8f9187; font-size: 10px; letter-spacing: .15em; }
.nav-list { position: relative; display: grid; gap: 6px; }
.nav-item { border: 0; background: transparent; color: #989b90; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; cursor: pointer; text-align: left; text-decoration:none; transition: .2s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.05); }
.nav-item.active { color: white; background: rgba(255,255,255,.09); box-shadow: inset 3px 0 var(--red); }
.nav-icon { width: 25px; color: #c3a980; font: 17px "STKaiti", "KaiTi", serif; text-align: center; }
.sidebar-foot { position: relative; margin-top: auto; padding: 20px 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-foot p { margin: 12px 0 1px; font: 15px "STKaiti", "KaiTi", serif; letter-spacing: .25em; }
.sidebar-foot small { color: #777a71; font-size: 10px; }
.moon-orbit { width: 36px; height: 36px; border: 1px solid #706a5d; border-radius: 50%; position: relative; }
.moon-orbit::after { content:""; position:absolute; width:24px; height:24px; border:1px solid #706a5d; border-radius:50%; left:18px; top:5px; }
.moon-orbit span { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--red); right:-11px; top:14px; }
.main { grid-column: 2; min-width: 0; padding: 36px clamp(24px, 4vw, 64px) 64px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap: 24px; margin-bottom: 34px; }
.eyebrow { margin:0 0 5px; color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.topbar h1 { margin:0; font: 30px/1.2 "STSong", "SimSun", serif; letter-spacing:.12em; }
.top-actions { display:flex; gap: 10px; }
.icon-button, .quiet-button, .primary-button, .text-button { border:0; cursor:pointer; text-decoration:none; }
.icon-button { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.46); border:1px solid var(--line); }
.primary-button { padding: 11px 18px; border-radius: 9px; color:#fffaf1; background: var(--red); box-shadow: 0 7px 18px rgba(164,58,45,.18); transition: .2s; }
.primary-button:hover { background: var(--red-dark); transform: translateY(-1px); }
.view { display:none; animation: reveal .35s ease; }
.view.active { display:block; }
body:has(.view:target) .view.active:not(:target) { display:none; }
.view:target { display:block; }
@keyframes reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.hero-card { min-height: 310px; overflow:hidden; position:relative; display:grid; grid-template-columns: 1.55fr .85fr; background: var(--ink-soft); color:#f5f0e5; border-radius: var(--radius); box-shadow: var(--shadow); }
.hero-card::before { content:""; position:absolute; inset:0; opacity:.35; background-image: linear-gradient(115deg, transparent 50%, rgba(164,58,45,.12)), radial-gradient(rgba(255,255,255,.13) .5px, transparent .5px); background-size:auto, 8px 8px; }
.hero-copy { position:relative; z-index:1; padding: 42px clamp(28px, 4vw, 58px); }
.seal { display:inline-block; color:#e2b4a8; font-size:10px; font-weight:700; letter-spacing:.18em; border:1px solid rgba(196,88,72,.7); padding:4px 7px; }
.hero-kicker { color:#bcb9ae; margin:18px 0 7px; font-size:12px; letter-spacing:.08em; }
.hero-copy h2 { max-width:690px; font: clamp(27px, 3vw, 43px)/1.35 "STSong", "SimSun", serif; margin:0; letter-spacing:.05em; }
.hero-description { max-width:680px; color:#aaa99f; font-size:14px; margin:17px 0 22px; }
.text-button { background:transparent; color:#e8c0b7; padding:0; font-size:13px; font-weight:700; }
.text-button span { margin-left:9px; transition:.2s; display:inline-block; }
.text-button:hover span { transform:translateX(4px); }
.compass { display:grid; place-items:center; position:relative; min-height:310px; }
.compass-ring { width:220px; aspect-ratio:1; border:1px solid rgba(223,218,201,.25); border-radius:50%; position:relative; animation: compass-in 1s ease both; }
@keyframes compass-in { from { opacity:0; transform:scale(.8) rotate(-12deg); } }
.compass-ring::before, .compass-ring::after { content:""; position:absolute; border:1px solid rgba(223,218,201,.14); border-radius:50%; inset:25px; }
.compass-ring::after { inset:63px; background:rgba(164,58,45,.18); }
.compass-ring span { position:absolute; inset: 8px; text-align:center; transform:rotate(calc(var(--i) * 30deg)); font:15px "STKaiti", "KaiTi", serif; color:#c7bfae; }
.compass-ring b { position:absolute; inset:0; display:grid; place-items:center; color:#d0a399; font:36px "STKaiti", "KaiTi", serif; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:36px 0 17px; }
.section-heading span, .panel-title span { color:var(--red); font-size:10px; font-weight:700; letter-spacing:.16em; }
.section-heading h2, .panel-title h3 { margin:4px 0 0; font: 22px "STSong", "SimSun", serif; letter-spacing:.08em; }
.section-heading p { margin:0; color:var(--muted); font-size:12px; }
.discipline-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.discipline-card { position:relative; min-height:210px; padding:25px 22px; background:rgba(255,253,247,.62); border:1px solid var(--line); border-radius:14px; cursor:pointer; text-decoration:none; transition:.25s; overflow:hidden; }
.discipline-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); background:var(--white); }
.discipline-card::after { content:""; position:absolute; inset:auto -20px -35px auto; width:100px; height:100px; border:1px solid currentColor; opacity:.06; border-radius:50%; }
.discipline-card.vermilion { color:var(--red); }.discipline-card.jade { color:var(--jade); }.discipline-card.ochre { color:var(--ochre); }.discipline-card.ink { color:#4d4e47; }
.card-symbol { font:33px "STKaiti", "KaiTi", serif; }
.count { position:absolute; right:20px; top:18px; font-size:10px; opacity:.55; }
.discipline-card h3 { color:var(--ink); font:18px "STSong", "SimSun", serif; margin:15px 0 8px; }
.discipline-card p { color:var(--muted); font-size:12px; margin:0; line-height:1.7; }
.card-link { display:block; font-size:11px; font-weight:700; margin-top:18px; }
.lower-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:16px; margin-top:16px; }
.panel { background:rgba(255,253,247,.58); border:1px solid var(--line); border-radius:14px; padding:24px; }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.quiet-button { color:var(--muted); background:transparent; font-size:11px; }
.record-list { margin-top:16px; }
.record-row { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:12px; padding:13px 4px; border-top:1px solid var(--line); }
.record-row:first-child { border-top:0; }
.record-avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--jade); font:16px "STKaiti", serif; }
.record-row strong, .record-row small { display:block; }.record-row strong { font-size:13px; }.record-row small { color:var(--muted); font-size:10px; margin-top:2px; }.record-row time { color:var(--muted); font-size:10px; }
.principles-panel ol { list-style:none; padding:0; margin:15px 0 0; }
.principles-panel li { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); }
.principles-panel li b { color:var(--red); font:17px "STKaiti", serif; }.principles-panel li strong,.principles-panel li small { display:block; }.principles-panel li strong { font-size:12px; }.principles-panel li small { color:var(--muted); font-size:10px; }
.seal-outline { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--red); color:var(--red)!important; font:12px "STKaiti",serif!important; }
.module-intro { display:grid; grid-template-columns:80px minmax(0,760px); gap:25px; align-items:start; margin:15px 0 35px; }
.module-number { width:70px; height:70px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--red); font:27px "STKaiti",serif; }
.module-intro h2 { font:clamp(28px,4vw,44px) "STSong",serif; margin:3px 0 8px; }.module-intro p:last-child { color:var(--muted); margin:0; font-size:13px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:18px; align-items:start; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }
label { display:grid; gap:7px; } label > span { font-size:12px; font-weight:700; }
input, select, textarea { width:100%; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.48); color:var(--ink); padding:11px 12px; outline:none; transition:.2s; }
input:focus,select:focus,textarea:focus { border-color:rgba(164,58,45,.65); background:var(--white); }
textarea { resize:vertical; }.wide { grid-column:1/-1; } label small { color:var(--muted); font-size:10px; }.required-note { color:var(--muted)!important; }
.form-actions { display:flex; align-items:center; gap:14px; margin-top:22px; }.form-actions span,#note-status { color:var(--jade); font-size:11px; }
.check-list { list-style:none; padding:0; margin:20px 0; }.check-list li { display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line); }.check-list li > span { flex:0 0 28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--red); font:13px serif; }.check-list strong { font-size:12px; }.check-list p { color:var(--muted); font-size:11px; margin:3px 0 0; }
.notice { background:rgba(60,103,90,.08); border-left:3px solid var(--jade); padding:14px; }.notice strong { color:var(--jade); font-size:11px; }.notice p { color:var(--muted); font-size:10px; margin:4px 0 0; }
.study-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.palace-card { min-height:150px; padding:20px; border:1px solid var(--line); border-radius:12px; background:rgba(255,253,247,.55); }.palace-card span { color:var(--red); font:22px "STKaiti",serif; }.palace-card h3 { font:16px "STSong",serif; margin:13px 0 5px; }.palace-card p { color:var(--muted); font-size:11px; margin:0; }
.observation-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.observation-card h3 { font:25px "STSong",serif; margin:18px 0; }.observation-steps { display:grid; gap:8px; }.observation-steps > div { display:flex; gap:14px; align-items:center; padding:14px; background:rgba(255,255,255,.35); border-radius:9px; }.observation-steps b { color:var(--red); font:18px serif; }.observation-steps strong,.observation-steps small { display:block; }.observation-steps strong { font-size:12px; }.observation-steps small { color:var(--muted); font-size:10px; }
.note-composer { display:grid; gap:15px; align-content:start; }.note-composer .primary-button { justify-self:start; }
.archive-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }.search-box { max-width:350px; position:relative; display:block; }.search-box span { position:absolute; left:12px; top:9px; color:var(--muted); }.search-box input { padding-left:34px; }.archive-toolbar > span { color:var(--muted); font-size:11px; }
.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.archive-card { background:rgba(255,253,247,.6); border:1px solid var(--line); border-radius:13px; padding:20px; }.archive-card header { display:flex; justify-content:space-between; gap:12px; }.archive-card .tag { color:var(--jade); font-size:9px; letter-spacing:.1em; }.archive-card h3 { font:17px "STSong",serif; margin:8px 0 14px; }.archive-card dl { display:grid; grid-template-columns:auto 1fr; gap:7px 12px; margin:0; font-size:11px; }.archive-card dt { color:var(--muted); }.archive-card dd { margin:0; }.delete-button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; }.delete-button:hover { color:var(--red); }
.notes-section { margin-top:18px; }.notes-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:17px; }.note-item { padding:15px; border:1px solid var(--line); border-radius:9px; }.note-item header { display:flex; justify-content:space-between; }.note-item strong { font-size:12px; }.note-item p { color:var(--muted); font-size:11px; margin:8px 0 0; white-space:pre-wrap; }.empty-state { grid-column:1/-1; color:var(--muted); font-size:12px; text-align:center; padding:30px; border:1px dashed var(--line); border-radius:10px; }
.mobile-nav { display:none; }
.script-warning { position:fixed; z-index:40; left:14px; right:14px; bottom:82px; padding:12px 14px; border-radius:10px; color:#fff; background:#a43a2d; font-size:11px; box-shadow:var(--shadow); }
.toast { position:fixed; z-index:30; left:50%; bottom:25px; transform:translate(-50%,18px); background:var(--ink); color:#fff; border-radius:9px; padding:11px 16px; font-size:11px; opacity:0; pointer-events:none; transition:.25s; box-shadow:var(--shadow); }.toast.show { opacity:1; transform:translate(-50%,0); }
body.light-theme { --ink:#20211c; --ink-soft:#34352e; --paper:#faf7ef; --paper-deep:#eee7d8; }

@media (max-width: 1100px) { .discipline-grid { grid-template-columns:repeat(2,1fr); }.study-grid { grid-template-columns:repeat(3,1fr); }.archive-grid { grid-template-columns:repeat(2,1fr); }.compass-ring { width:180px; } }
@media (max-width: 760px) {
  .shell { display:block; }.sidebar { display:none; }.main { padding:24px 16px 92px; }.topbar { margin-bottom:25px; }.topbar h1 { font-size:24px; }.top-actions .icon-button { display:none; }.primary-button { padding:10px 13px; }
  .hero-card { display:block; min-height:auto; }.hero-copy { padding:30px 24px; }.hero-copy h2 { font-size:28px; }.compass { min-height:230px; margin-top:-20px; }.compass-ring { width:185px; }
  .section-heading { align-items:start; flex-direction:column; }.discipline-grid,.lower-grid,.workspace-grid,.observation-layout,.archive-grid { grid-template-columns:1fr; }.discipline-card { min-height:180px; }.module-intro { grid-template-columns:52px 1fr; gap:14px; }.module-number { width:48px; height:48px; font-size:20px; }.module-intro h2 { font-size:28px; }.form-grid { grid-template-columns:1fr; }.wide { grid-column:auto; }.study-grid { grid-template-columns:repeat(2,1fr); }.notes-list { grid-template-columns:1fr; }
  .mobile-nav { position:fixed; z-index:20; inset:auto 0 0; height:68px; display:grid; grid-template-columns:repeat(5,1fr); padding:7px 5px max(7px,env(safe-area-inset-bottom)); background:rgba(23,24,18,.96); backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.08); }.mobile-nav a { border:0; background:transparent; color:#8f9187; display:grid; place-items:center; align-content:center; gap:2px; font-size:9px; text-decoration:none; }.mobile-nav a span { font:17px "STKaiti",serif; }.mobile-nav a.active { color:#e6b4aa; }
}
@media (max-width: 420px) { .study-grid { grid-template-columns:1fr; }.top-actions .primary-button { font-size:0; width:42px; height:42px; padding:0; border-radius:50%; }.top-actions .primary-button::after { content:"＋"; font-size:20px; }.archive-toolbar { align-items:stretch; flex-direction:column; }.search-box { max-width:none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }