/* ==========================================================================
guide-uestc.css — uestc_ai skin for the AI 研究入门指南 second edition.
Hand-maintained subset of D:\Project\uestc_ai\app\globals.css. That file
cannot be linked or @import-ed: it opens with `@import "tailwindcss"`, which
needs a bundler and this repo has no build tooling beyond `marked`. So the
values are COPIED, not shared — when globals.css changes, re-check:
tokens globals.css:3-18 (palette)
shell globals.css:31-107 (.app-shell / sidebar / topbar / band)
buttons globals.css:81-93
markdown globals.css:288-301 (.markdown-body)
article globals.css:503-510 (.article-layout)
responsive globals.css:856-929
This file is linked LAST, after guide.css, fieldnotes.css and
guide-motion.css, so equal-specificity rules here win by source order. Three
things that order does NOT solve, handled explicitly below:
· `html[data-theme=dark]` is (0,1,1) and beats a plain `:root` (0,1,0)
whatever the order — see the neutralize block.
· `#nav`, `#toc`, `#opensearch`, `#menu`, `#mobile-search`, `#closesearch`,
`#searchinput`, `#results`, `#ama-app` are id selectors (1,0,0) in the
three stylesheets; every one is re-declared here at id specificity.
· 21 `!important` declarations exist upstream; the two that matter are
re-issued with `!important` in the same place they fight.
DELIBERATE DEVIATIONS from uestc_ai, both for long-form reading:
· article prose is 15px, not globals.css's 12px `.markdown-body p`. A
5,000-word essay at 12px is unusable; 15px sits between uestc_ai's 14px
body and the guide's original 16px.
· uestc_ai is light-only, so the theme toggle is emitted `hidden` (the
element must still exist — guide.js:3 dereferences it first thing) and
`--theme`-driven dark mode is neutralized rather than derived.
========================================================================== */
/* --- 1. Tokens ----------------------------------------------------------- */
:root {
/* uestc_ai palette (globals.css:3-18) */
--paper: #f4f1ea;
--paper-2: #e8e4db;
--surface: #fbfaf7;
--ink: #20211e;
--ink-2: #454740;
--muted: #777a72;
--quiet: #96988f;
--line: #d5d1c8;
--line-dark: #bdb9b0;
--coral: #c85c42;
--coral-dark: #a94833;
--sage: #768c73;
--sand: #d6b371;
--danger: #a94438;
/* Guide token names, aliased onto the palette above. Redefining these is
what re-skins every existing fragment — including the canvas animations,
which read them via getComputedStyle (guide-motion.js:7-9). */
--blue: var(--coral); /* primary accent, 51 uses upstream */
--orange: var(--sand); /* secondary accent, 7 uses */
--card: var(--surface); /* 13 uses */
--side: 242px; /* uestc_ai's .app-shell column */
/* --soft is color-mix(--ink 18%, transparent) upstream — an 18% wash that
reads far heavier than uestc_ai's opaque hairlines, so pin it. */
--soft: var(--line);
--serif: Georgia, "Times New Roman", "Songti SC", SimSun, serif;
--sans: "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
/* Canvas palette. --motion-result is the canvas "success" colour; left
derived it becomes color-mix(#c85c42 42%, #20211e) ≈ #7a3e2f, a muddy
brown. Sage is on-brand and legible on --paper-2. */
--motion-primary: var(--coral);
--motion-result: var(--sage);
--motion-signal: var(--coral-dark);
--motion-line: var(--line);
}
/* Dark mode is unreachable — the shell omits the bootstrap script that sets
data-theme, and pins form
controls. This block exists only to beat guide.css:2 and guide.css:17 on
specificity if the attribute is ever set anyway (stale cache, extension),
plus to kill the two !important dark rules upstream. */
html[data-theme=dark] {
--paper: #f4f1ea;
--paper-2: #e8e4db;
--card: #fbfaf7;
--ink: #20211e;
--muted: #777a72;
--line: #d5d1c8;
--blue: #c85c42;
--orange: #d6b371;
--soft: #d5d1c8;
--serif: Georgia, "Times New Roman", "Songti SC", SimSun, serif;
}
html[data-theme=dark] #ama-app .ama-primary { color: var(--paper) !important; }
html[data-theme=dark] .community-logo { filter: none; }
/* --- 2. Base ------------------------------------------------------------- */
body {
background: var(--paper);
background-image: none; /* kill guide.css:3's dot texture */
color: var(--ink);
font: 15px/1.7 var(--sans);
-webkit-font-smoothing: antialiased;
}
::selection { background: #e8b5a8; color: var(--ink); }
a:hover { color: var(--coral); }
button { border: 0; } /* guide.css:3 borders every button */
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 3px;
}
.skip { background: var(--ink); color: var(--paper); }
/* --- 3. Shell geometry --------------------------------------------------- */
.app-shell {
display: grid;
grid-template-columns: var(--side) minmax(0, 1fr);
min-height: 100dvh;
}
.app-main { min-width: 0; }
/* #nav keeps its id (guide.js:5,7 set inert/aria on it) and is re-declared at
id specificity because guide.css:5 also targets `#nav`. */
#nav.app-sidebar {
position: sticky;
inset: auto;
top: 0;
width: auto;
height: 100dvh;
padding: 25px 16px 17px;
border-right: 1px solid var(--line);
background: var(--paper-2);
overflow-y: auto;
display: flex;
flex-direction: column;
z-index: 20;
}
.brand-lockup { align-items: center; display: flex; gap: 11px; min-width: 0; padding: 0 8px 35px; }
.brand-mark { align-items: center; display: flex; flex: 0 0 40px; height: 40px; justify-content: center; overflow: hidden; width: 40px; }
.brand-mark img { border-radius: 50%; height: 100%; object-fit: contain; width: 100%; }
.brand-copy { min-width: 0; }
.brand-copy strong, .brand-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy strong { font-size: 14px; font-weight: 650; letter-spacing: 0; }
.brand-copy small { color: var(--quiet); font-size: 12px; letter-spacing: .12em; margin-top: 2px; }
#opensearch {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 8px 0;
margin: 0 0 26px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--line-dark);
color: var(--quiet);
font-size: 13px;
text-align: left;
}
#opensearch:hover { color: var(--ink); border-bottom-color: var(--ink); }
#opensearch kbd { font: 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--quiet); }
/* Grouped nav. .navgroup keeps its class — initNavigation() (guide-motion.js:828)
makes it a toggle and walks its following siblings. */
.navgroup {
color: #9b9d94;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin: 22px 9px 9px;
padding: 0 2px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.navgroup:first-of-type { margin-top: 0; }
.navgroup:after { content: '−'; font-size: 15px; color: var(--quiet); }
.navgroup[aria-expanded=false]:after { content: '+'; }
/* The collapsible links. #nav>a.nav-collapsed (guide-motion.css:5) is a child
selector, so these must stay DIRECT children of #nav. */
#nav > a {
display: block;
padding: 9px 11px;
margin: 2px 0;
font-size: 13px;
line-height: 1.5;
color: #65685f;
border: 0;
border-radius: 3px;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
#nav > a:hover { background: rgba(255, 255, 255, .55); color: var(--ink); transform: translateX(2px); }
#nav > a[aria-current=page] { background: var(--ink); color: var(--paper); font-weight: 600; }
#nav > a[aria-current=page]:hover { transform: none; color: var(--paper); }
#nav > a.nav-collapsed { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; }
.sidebar-source { margin: auto 8px 0; padding-top: 20px; font: 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--quiet); }
.sidebar-source a { color: inherit; }
.sidebar-source a:hover { color: var(--coral); }
.app-topbar {
align-items: center;
background: rgba(244, 241, 234, .92);
border-bottom: 1px solid var(--line);
display: flex;
height: 62px;
justify-content: space-between;
padding: 0 42px;
position: sticky;
top: 0;
z-index: 12;
backdrop-filter: blur(14px);
}
.topbar-context { align-items: center; color: var(--quiet); display: flex; font-size: 12px; gap: 8px; min-width: 0; }
.topbar-context i { color: var(--line-dark); font-style: normal; }
.topbar-context strong { color: var(--ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-context a:hover { color: var(--coral); }
.topbar-actions { align-items: center; display: flex; gap: 8px; }
.icon-button { align-items: center; background: transparent; border: 0; display: inline-flex; height: 34px; justify-content: center; padding: 0 10px; font-size: 13px; color: var(--ink-2); }
.icon-button:hover { background: rgba(32, 33, 30, .06); color: var(--ink); }
#language.outline-button { background: transparent; border: 1px solid var(--line-dark); color: var(--ink-2); font-size: 12px; padding: 7px 11px; min-height: 0; }
#language.outline-button:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
/* .icon-button sets display:inline-flex, which beats the UA [hidden] rule —
the theme toggle must be forced out explicitly or it reappears. */
#theme[hidden] { display: none !important; }
.page-title-band { align-items: end; border-bottom: 1px solid var(--line); display: flex; min-height: 156px; padding: 37px 50px 32px; }
.page-title-band > div { margin: 0 auto; max-width: 1260px; width: 100%; }
.page-title-band h1 {
font-family: var(--serif);
font-size: 42px;
font-weight: 400;
letter-spacing: 0;
line-height: 1.1;
margin: 13px 0 0;
max-width: 900px;
overflow-wrap: anywhere;
color: var(--ink);
}
html[lang=zh-CN] .page-title-band h1 { font-size: 40px; }
.eyebrow { align-items: center; color: var(--quiet); display: flex; font-size: 12px; gap: 9px; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow i { background: var(--coral); display: inline-block; height: 1px; width: 23px; }
.home-logo { display: block; width: 52px; height: auto; margin: 0 0 14px; float: none; }
main.app-content { margin: 0 auto; max-width: 1360px; min-height: calc(100dvh - 280px); padding: 43px 50px 80px; }
.app-footer { border-top: 1px solid var(--line); color: var(--quiet); display: flex; font-size: 12px; justify-content: space-between; gap: 20px; margin: 0 42px; padding: 21px 0 24px; }
.app-footer a { margin-left: 18px; }
.app-footer a:first-child { margin-left: 0; }
.app-footer a:hover { color: var(--coral); }
/* Sidebar scrim. The guide's own `.shade` rules (guide.css:9,12) don't match
because the element carries id #shade and class .sidebar-scrim; the open
state is body.navopen (guide.js:5,7), not uestc_ai's .is-open. */
#shade { display: none; }
/* guide.css styles #menu and #mobile-search at ID specificity, so the
.icon-button class alone loses. #mobile-search in particular is pinned there as
a floating FAB (position:fixed + bottom/right + an ink pill with an offset
shadow) — in the uestc shell it is a topbar action, and left as-is it floated
over the bar covering the hamburger entirely (46x28px overlap), which is what
made the mobile nav look absent. These overrides have to be id-level too. */
#menu, #mobile-search {
display: none;
position: static;
inset: auto;
z-index: auto;
background: transparent;
border: 0;
box-shadow: none;
height: 34px;
padding: 0 9px;
font-size: 13px;
color: var(--ink-2);
}
#menu:hover, #mobile-search:hover { background: rgba(32, 33, 30, .06); color: var(--ink); }
/* --- 4. Article ---------------------------------------------------------- */
.article-layout { display: grid; gap: 65px; grid-template-columns: minmax(0, 800px) 190px; justify-content: center; align-items: start; }
.markdown-body { max-width: none; padding: 0; min-width: 0; overflow-wrap: break-word; }
.markdown-body h1 { font-family: var(--serif); font-size: 30px; font-weight: 500; margin: 0 0 21px; color: var(--ink); }
.markdown-body h2 {
border-bottom: 1px solid var(--line);
border-top: 0;
font-family: var(--serif);
font-size: 25px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.3;
margin: 40px 0 16px;
padding: 0 0 9px;
color: var(--ink);
}
.markdown-body h3 { font-size: 16px; font-weight: 650; line-height: 1.5; margin: 29px 0 10px; color: var(--ink); }
.markdown-body p, .markdown-body li { color: #5e6159; font-size: 15px; line-height: 1.85; }
.markdown-body p { margin: 0 0 22px; }
.markdown-body ul, .markdown-body ol { padding-left: 24px; margin: 15px 0 26px; }
.markdown-body li { margin: 10px 0; }
.markdown-body li::marker { color: var(--quiet); }
.markdown-body a { color: var(--coral-dark); text-decoration: underline; text-underline-offset: 3px; }
.markdown-body a:hover { color: var(--coral); }
.markdown-body strong { font-weight: 650; color: var(--ink-2); }
.markdown-body blockquote { border-left: 3px solid var(--sand); background: transparent; margin: 26px 0; padding: 4px 0 4px 18px; }
.markdown-body blockquote p:last-child { margin-bottom: 0; }
.markdown-body code { background: #ebe7df; color: #8f4937; font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 2px 5px; }
.markdown-body pre { background: var(--ink); color: #e9e6dd; overflow-x: auto; padding: 17px; border: 0; }
.markdown-body pre code { background: transparent; color: inherit; padding: 0; }
.markdown-body img { border: 1px solid var(--line); display: block; height: auto; margin: 19px 0; max-width: 100%; }
.markdown-body hr { border: 0; border-top: 1px solid var(--line); margin: 35px 0; }
.markdown-body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.markdown-body th, .markdown-body td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; }
.markdown-body th { background: var(--surface); font-weight: 600; color: var(--ink-2); }
/* In-page TOC. Re-declared at id specificity to beat guide.css:6 (`#toc`) and
guide.css:8 (`body.home #toc`). uestc_ai puts the aside on the left; the DOM
order already matches, so no reordering is needed. */
#toc { position: sticky; top: 86px; align-self: start; max-height: calc(100dvh - 120px); overflow: auto; border-top: 1px solid var(--line-dark); padding-top: 15px; font-size: 12px; }
#toc strong { display: block; font: 700 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--quiet); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
#toc a { display: block; line-height: 1.6; margin-bottom: 12px; color: var(--muted); border: 0; }
#toc a:hover { color: var(--coral); }
#toc a.is-current { color: var(--coral-dark); font-weight: 600; }
body.home #toc { display: none; }
body.home .article-layout { grid-template-columns: minmax(0, 900px); }
.neighbors { margin-top: 65px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 20px 0; }
.neighbors a { display: flex; flex-direction: column; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.neighbors a:hover { color: var(--coral); }
.neighbors a:last-child { text-align: right; }
.neighbors small { color: var(--quiet); font: 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; margin-bottom: 7px; }
/* --- 5. Components uestc_ai has no analog for ---------------------------- */
/* 60 questions (research.html). is load-bearing:
guide.js:11 drives expand-all and search links straight to #q12. */
.qa { border-bottom: 1px solid var(--line); }
.qa summary { padding: 19px 34px 19px 0; font-size: 15px; line-height: 1.7; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:after { content: '+'; position: absolute; right: 6px; top: 18px; color: var(--coral); font-weight: 400; font-size: 17px; }
.qa[open] summary:after { content: '−'; }
.qa[open] summary, .qa summary:hover { color: var(--coral); }
.answer { padding: 2px 0 10px; }
.qa-tools { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 30px 0 6px; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--quiet); }
.qa-tools button { padding: 7px 12px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line-dark); background: transparent; }
.qa-tools button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Paper cards. fieldnotes.css gives them an ink border, a coral top rule and a
`3px 3px 0` offset shadow; guide-motion.css:5 adds a competing
translateY(-4px) hover. Flatten both to a uestc_ai hairline + soft lift. */
.paper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.paper-card { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; box-shadow: none; padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.paper-card:hover { border-color: var(--line-dark); box-shadow: 0 2px 10px rgba(32, 33, 30, .07); transform: translateY(-2px); }
.paper-card strong { font-size: 14px; line-height: 1.45; color: var(--ink); }
.paper-question { color: var(--muted); font-size: 12px; line-height: 1.65; }
.paper-open { margin-top: auto; color: var(--coral-dark); font-size: 12px; }
.paper-stamp b { font-family: var(--serif); font-size: 20px; color: var(--coral); font-weight: 400; }
.paper-stamp span { color: var(--quiet); font-size: 11px; }
.paper-art { background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; padding: 8px; display: flex; align-items: center; justify-content: center; }
.paper-art img { max-width: 100%; height: auto; }
.paper-library { margin-top: 12px; }
.paper-filters { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; margin: 22px 0 10px; align-items: end; }
.paper-filters label { display: grid; gap: 6px; color: var(--quiet); font-size: 12px; }
.paper-filters select, .paper-filters input { background: var(--surface); border: 1px solid var(--line-dark); color: var(--ink); font: inherit; font-size: 13px; min-height: 40px; padding: 8px 10px; width: 100%; }
#paper-count { color: var(--quiet); font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.paper-item[hidden] { display: none; }
/* Dialogs. globals.css styles only its `.dialog-layer` div, and