/* =====================================================================
   加载动画「研墨成章」 + 登录页「书房扉页」
   ===================================================================== */
body { overflow: hidden; background: #F3EEE3 var(--paper); }

/* ---------------------------------------------------------- 加载动画 */
#loader { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #FBF8F1 0%, #F3EEE3 60%, #EBE4D5 100%);
  transition: opacity .9s var(--ease), filter .9s; }
#loader::before { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: 1; pointer-events: none; }
#loader.out { opacity: 0; filter: blur(6px); pointer-events: none; }
.ld-lines { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 calc(4.2rem - 1px), rgba(200, 71, 45, .09) calc(4.2rem - 1px) 4.2rem);
  -webkit-mask: linear-gradient(180deg, transparent, #000 15%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 15%, #000 70%, transparent); }
.ld-drops i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(31, 42, 46, .22) 0%, rgba(31, 42, 46, .08) 40%, transparent 70%); transform: scale(0); animation: ink-drop 4.5s ease-out forwards; }
@keyframes ink-drop { 0% { transform: scale(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.ld-chars span { position: absolute; bottom: -3rem; font-family: var(--kai); color: rgba(31, 42, 46, .1); animation: ld-rise linear infinite; user-select: none; }
@keyframes ld-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: .9; } 100% { transform: translateY(-110vh); opacity: 0; } }
.ld-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; overflow: visible; }
.ld-hills .h1 { animation: hill 18s ease-in-out infinite alternate; }
.ld-hills .h2 { animation: hill 14s ease-in-out infinite alternate-reverse; }
.ld-hills .h3 { animation: hill 11s ease-in-out infinite alternate; }
.ld-hills .sun { animation: sun 4s ease-out forwards; }
@keyframes hill { to { transform: translateX(-40px); } }
@keyframes sun { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: .75; } }
.ld-hills .birds { animation: birds 14s linear infinite; }
@keyframes birds { from { transform: translate(200px, 110px); } to { transform: translate(1500px, 40px); } }
#ldCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-top { position: absolute; top: 7vh; left: 0; right: 0; text-align: center; opacity: 0; animation: fade-in 1s .2s forwards; }
.ld-top .eyebrow::before, .ld-top .eyebrow::after { content: ""; display: inline-block; width: 3rem; height: 1px; background: var(--ink-4); vertical-align: middle; margin: 0 1rem; }
.ld-seal { position: absolute; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: 1fr 1fr; direction: rtl; width: 4.6rem; height: 4.6rem; padding: .35rem;
  background: var(--red); color: #FFF4E8; font-family: var(--kai); font-weight: 700; font-size: 1.3rem; line-height: 1; border-radius: .35rem; opacity: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 232, .8), 0 6px 14px -6px rgba(200, 71, 45, .6); }
.ld-seal span { display: grid; place-items: center; }
.ld-seal.on { animation: stamp .55s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.ld-info { position: absolute; left: 0; right: 0; margin: 0 auto; top: 63vh; width: min(34rem, 86vw); text-align: center; opacity: 0; animation: fade-up .9s .9s var(--ease) forwards; }
.ld-sub { font-size: 1.15rem; color: var(--ink); letter-spacing: .4em; }
.ld-bar { margin: 1.3rem auto .6rem; height: 2px; background: rgba(31, 42, 46, .12); position: relative; }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .25s linear; }
.ld-bar b { position: absolute; top: 50%; left: 0; width: .7rem; height: .7rem; transform: translate(-50%, -50%) rotate(45deg); background: var(--red); transition: left .25s linear; }
.ld-status { display: flex; justify-content: space-between; font-size: .95rem; color: var(--ink-2); }
.ld-status b { color: var(--ink); font-family: var(--serif); font-weight: 900; }
.ld-steps { display: flex; justify-content: center; margin-top: 1rem; gap: 0; }
.ld-steps span { position: relative; font-size: .86rem; color: var(--ink-4); padding: 0 .85rem; transition: color .4s; font-family: var(--serif); font-weight: 700; }
.ld-steps span + span::before { content: "·"; position: absolute; left: -.2rem; color: var(--ink-4); }
.ld-steps span.on { color: var(--ink); }
.ld-steps span.on::after { content: ""; position: absolute; left: 50%; bottom: -.45rem; width: .32rem; height: .32rem; background: var(--red); transform: translateX(-50%) rotate(45deg); }
.ld-foot { position: absolute; bottom: 2.6vh; left: 0; right: 0; text-align: center; font-size: .8rem; color: var(--ink-2); letter-spacing: .14em; opacity: 0; animation: fade-in 1s 1.2s forwards; z-index: 2; }
.ld-skip { position: absolute; right: 1.8rem; top: 1.5rem; border: 1px solid var(--line); background: rgba(255, 254, 251, .8); border-radius: .4rem; padding: .3rem .9rem; font-size: .82rem; color: var(--ink-3); cursor: pointer; transition: all .2s; z-index: 3; }
.ld-skip:hover { color: var(--ink); border-color: var(--ink); }

/* ---------------------------------------------------------- 登录 */
#login { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.4rem; overflow: auto; }
.is-loading #login { visibility: hidden; }
.lg-bg { position: fixed; inset: 0; z-index: -1; background: #F1ECE1 var(--paper); }
.lg-bg::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 calc(4.2rem - 1px), rgba(200, 71, 45, .06) calc(4.2rem - 1px) 4.2rem); }
.lg-bg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40vh; background: radial-gradient(ellipse at 70% 120%, rgba(95, 125, 120, .22), transparent 60%); }

.lg-book { width: min(82rem, 100%); min-height: min(48rem, calc(100vh - 4.5rem)); display: grid; grid-template-columns: 1.22fr 1fr; position: relative;
  background: #FFFEFA; border: 1px solid var(--line); border-radius: .5rem; box-shadow: 0 1px 0 #fff inset, 0 40px 80px -36px rgba(64, 52, 30, .45), 0 2px 6px rgba(64, 52, 30, .06); }
.lg-book::after { content: ""; position: absolute; top: 0; bottom: 0; left: 55%; width: 2.4rem; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(64, 52, 30, .07) 45%, rgba(64, 52, 30, .1) 50%, rgba(64, 52, 30, .04) 56%, transparent); }
.ready .lg-book { animation: book-in 1s var(--ease) both; }
@keyframes book-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

.lg-left { position: relative; overflow: hidden; padding: 2.2rem 2.8rem 2rem; display: flex; flex-direction: column; border-right: 1px solid var(--line-2);
  background: linear-gradient(180deg, #FBF7EE, #F6F0E3); border-radius: .5rem 0 0 .5rem; }
.lg-head { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; border-bottom: 3px double rgba(31, 42, 46, .5); }
.lg-head b { font-size: 1.5rem; letter-spacing: .2em; display: block; line-height: 1.2; }
.lg-vol { margin-left: auto; font-family: var(--serif); font-weight: 700; font-size: .85rem; letter-spacing: .3em; color: var(--ink-3); }
.lg-body { display: grid; grid-template-columns: auto 1fr; gap: 2.2rem; margin-top: 1.6rem; position: relative; z-index: 1; flex: 1; }
.lg-vert { writing-mode: vertical-rl; font-size: 2.65rem; line-height: 1.55; letter-spacing: .14em; color: var(--ink); font-weight: 700; padding-top: .2rem; display: flex; gap: .2rem; }
.lg-vert p { margin: 0; }
.ready .lg-vert p { animation: vert-in 1.2s var(--ease) both; }
.ready .lg-vert p:nth-child(2) { animation-delay: .35s; }
@keyframes vert-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.lg-vert em { font-style: normal; color: var(--red); position: relative; }
.lg-vert em::after { content: ""; position: absolute; right: -.35rem; top: .1em; bottom: .1em; width: 2px; background: var(--red); opacity: .5; }
.lg-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.lg-preface { font-size: .98rem; line-height: 1.95; color: var(--ink-2); text-align: justify; margin-top: .3rem; }
.lg-preface::first-letter { font-family: var(--serif); font-weight: 900; font-size: 2.6em; float: left; line-height: 1; margin: .1em .15em 0 0; color: var(--red); }
.lg-preface b { color: var(--primary); }
.lg-note { position: relative; padding: .9rem 1rem; border: 1px solid #EAD9C9; border-radius: .4rem; display: flex; flex-direction: column; gap: .5rem; min-height: 9.6rem;
  background-color: #FFFDF8; background-image: linear-gradient(rgba(200, 71, 45, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 71, 45, .08) 1px, transparent 1px); background-size: 1.6rem 1.6rem; }
.nt { display: flex; align-items: center; gap: .55rem; opacity: 0; transform: translateY(6px); transition: all .5s var(--ease); }
.nt.show { opacity: 1; transform: none; }
.nt p { font-family: var(--kai); font-size: 1.02rem; padding: .32rem .75rem; border-radius: .35rem; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.nt.me { justify-content: flex-end; }
.nt.me p { background: var(--primary-50); border-color: #CFE2DD; color: var(--primary-d); }
.lg-stamp { position: absolute; right: .9rem; bottom: .7rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font-style: normal; font-family: var(--kai); font-weight: 700; color: var(--red);
  border: 2px solid var(--red); border-radius: .3rem; transform: rotate(-8deg); opacity: 0; font-size: 1.2rem; }
.nt.show .lg-stamp { animation: stamp .5s .35s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.lg-toc { margin-top: .2rem; }
.lg-toc a { display: flex; align-items: baseline; gap: .7rem; padding: .42rem 0; border-bottom: 1px dashed var(--line); transition: padding .25s var(--ease); }
.lg-toc a:hover { padding-left: .4rem; }
.lg-toc .no { font-family: var(--serif); font-weight: 900; color: var(--red); width: 1.4rem; font-size: 1rem; }
.lg-toc b { font-family: var(--serif); font-weight: 700; font-size: 1rem; letter-spacing: .06em; }
.lg-toc i { flex: 1; border-bottom: 1px dotted var(--ink-4); transform: translateY(-.25rem); min-width: 1rem; }
.lg-toc small { font-size: .82rem; color: var(--ink-3); }
.lg-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 7rem; z-index: 0; opacity: .9; }

.lg-right { display: flex; align-items: center; justify-content: center; padding: 2.2rem 3rem; position: relative; }
.lg-form { width: min(24rem, 100%); }
.ready .lg-form > * { animation: fade-up .7s var(--ease) both; }
.ready .lg-form > *:nth-child(2) { animation-delay: .08s; } .ready .lg-form > *:nth-child(3) { animation-delay: .14s; }
.ready .lg-form > *:nth-child(4) { animation-delay: .2s; } .ready .lg-form > *:nth-child(5) { animation-delay: .26s; }
.ready .lg-form > *:nth-child(6) { animation-delay: .32s; } .ready .lg-form > *:nth-child(7) { animation-delay: .38s; }
.ready .lg-form > *:nth-child(8) { animation-delay: .44s; } .ready .lg-form > *:nth-child(9) { animation-delay: .5s; } .ready .lg-form > *:nth-child(10) { animation-delay: .56s; }
.lg-form h2 { font-size: 2.4rem; margin: .3rem 0 .2rem; letter-spacing: .14em; }
.lg-tip { color: var(--ink-3); font-size: .9rem; margin-bottom: 1.8rem; }
.lg-field { margin-bottom: 1.2rem; }
.lg-field label { font-family: var(--serif); font-weight: 700; font-size: .84rem; color: var(--ink-2); letter-spacing: .2em; }
.lg-input { position: relative; border-bottom: 1.5px solid var(--ink-4); transition: border-color .25s; }
.lg-input::after { content: ""; position: absolute; left: 0; bottom: -1.5px; height: 1.5px; width: 0; background: var(--ink); transition: width .4s var(--ease); }
.lg-input:focus-within::after { width: 100%; }
.lg-input > .i { position: absolute; left: .1rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.lg-input input { width: 100%; height: 2.9rem; border: 0; outline: none; background: transparent; padding: 0 2.4rem 0 1.9rem; font-size: 1.08rem; letter-spacing: .04em; }
.lg-eye { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: .4rem; }
.lg-eye:hover { color: var(--ink); }
.lg-opts { display: flex; justify-content: space-between; align-items: center; margin: .2rem 0 1.5rem; font-size: .86rem; color: var(--ink-2); }
.lg-check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; user-select: none; }
.lg-check input { display: none; }
.lg-check span { width: 1rem; height: 1rem; border: 1.5px solid var(--ink-3); border-radius: .2rem; display: grid; place-items: center; transition: all .2s; }
.lg-check input:checked + span { background: var(--ink); border-color: var(--ink); }
.lg-check input:checked + span::after { content: ""; width: .28rem; height: .52rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.lg-demo-tag { font-family: var(--kai); color: var(--red); border: 1px solid rgba(200, 71, 45, .5); padding: 0 .45rem; border-radius: .2rem; font-size: .84rem; transform: rotate(-2deg); }
.lg-submit { width: 100%; height: 3.3rem; border: 0; border-radius: .35rem; background: var(--ink); color: #FBF7EE; font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .3em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .6rem; position: relative; overflow: hidden; transition: background .25s; }
.lg-submit::before { content: ""; position: absolute; inset: 0; background: var(--primary); transform: translateX(-101%); transition: transform .45s var(--ease); }
.lg-submit:hover::before { transform: none; }
.lg-submit > * { position: relative; }
.lg-submit .i { transition: transform .3s var(--ease); }
.lg-submit:hover .i { transform: translateX(5px); }
.lg-submit.ok::before { transform: none; }
.lg-meta { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1.7rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lg-meta div { text-align: center; padding: .65rem 0; }
.lg-meta div + div { border-left: 1px dashed var(--line); }
.lg-meta b { display: block; font-size: 1.6rem; line-height: 1.2; color: var(--ink); }
.lg-meta small { font-size: .74rem; color: var(--ink-3); }
.lg-model { margin-top: 1rem; display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--primary); font-weight: 600; }
.lg-quote { margin-top: 1rem; font-size: 1.1rem; color: var(--ink-2); }
.lg-quote span { font-size: .85rem; color: var(--ink-3); margin-left: .6rem; }
.lg-footer { margin-top: .9rem; font-size: .78rem; color: var(--ink-3); letter-spacing: .1em; }
.shake-x { animation: shake-x .45s; }
@keyframes shake-x { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
#lgWipe { position: fixed; inset: 0; z-index: 150; pointer-events: none; background: #1F2A2E var(--paper); display: grid; place-items: center;
  clip-path: circle(0 at var(--wx, 50%) var(--wy, 50%)); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1); }
#lgWipe.go { clip-path: circle(150% at var(--wx, 50%) var(--wy, 50%)); }
#lgWipe span { font-size: 3.6rem; color: #F4EEE2; letter-spacing: .4em; opacity: 0; transition: opacity .5s .45s; }
#lgWipe.go span { opacity: 1; }

@media (max-width: 1100px) { .lg-book { grid-template-columns: 1fr; } .lg-book::after, .lg-left { display: none; } }
@media (max-height: 780px) and (min-width: 1101px) { .lg-note { display: none; } .lg-vert { font-size: 2.2rem; } }

/* ---------- 身份切换：老师 / 学生 ---------- */
.lg-role { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .9rem 0 .65rem; padding: .3rem; border: 1px solid var(--line); border-radius: .5rem; background: rgba(255, 253, 248, .7); }
.lg-role button { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 0; border-radius: .38rem; background: transparent; cursor: pointer; text-align: left; color: var(--ink-3); transition: color .3s; }
.lg-role button .i { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.lg-role button b { display: block; font-family: var(--serif); font-size: 1rem; letter-spacing: .12em; color: inherit; }
.lg-role button small { display: block; font-size: .72rem; color: var(--ink-4); letter-spacing: .04em; }
.lg-role button.on { color: #FBF7EE; }
.lg-role button.on small { color: rgba(251, 247, 238, .72); }
.lg-role-ink { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; left: .3rem; width: calc(50% - .55rem); border-radius: .38rem; background: var(--ink); transition: transform .45s var(--ease), background .45s; box-shadow: 0 6px 16px -8px rgba(31, 42, 46, .6); }
.lg-role[data-role="student"] .lg-role-ink { transform: translateX(calc(100% + .5rem)); background: var(--primary); }
.lg-role[data-role="student"] ~ .lg-opts .lg-demo-tag { color: var(--primary); border-color: rgba(30, 111, 102, .5); }
.lg-tip { margin-bottom: 1.2rem; transition: opacity .25s; }
.lg-model { flex-wrap: wrap; row-gap: .3rem; }
.lg-loop { flex-basis: 100%; font-family: var(--kai); font-weight: 400; font-size: .84rem; color: var(--ink-3); letter-spacing: .04em; }
.is-student .lg-submit::before { background: var(--red); }