:root { --ink:#14251f; --muted:#667a72; --paper:#f4f0e5; --panel:#fffdf7; --maple:#b93227; --line:#d9d2bf; --terminal:#07130e; --terminal-ink:#d9e8de; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif; }
a { color:#7c201a; text-underline-offset:3px; }
a:hover { color:#a72f27; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #2774a8; outline-offset:3px; }
.skip-link { position:fixed; z-index:10; top:10px; left:10px; transform:translateY(-160%); border-radius:8px; padding:10px 14px; color:white; background:var(--ink); font-weight:800; }
.skip-link:focus { transform:translateY(0); }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.shell { width:min(1000px,calc(100% - 32px)); margin:28px auto 56px; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:3px solid var(--maple); }
.brand-link { flex:0 0 auto; color:inherit; text-decoration:none; }
.brand-link:hover { color:inherit; }
.brand { margin:0; font:700 clamp(30px,5vw,50px)/1.1 Georgia,"Noto Serif TC",serif; }
.brand small { display:block; margin-top:6px; color:var(--muted); font:500 12px/1.4 system-ui; letter-spacing:.12em; }
.mast-actions,.pager { display:flex; gap:8px; align-items:center; }
.mast-actions { flex-wrap:nowrap; max-width:100%; overflow-x:auto; padding:3px 3px 7px; scrollbar-width:thin; }
.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; border-radius:8px; padding:11px 14px; color:white; background:var(--maple); font-weight:700; text-decoration:none; }
.button:hover { color:white; background:#98251d; }
.button.secondary { border:1px solid #c9b8a5; color:#7c201a; background:transparent; }
.button.secondary:hover { color:#641713; background:#f2e5d7; }
.mast-actions .button { flex:0 0 auto; min-height:40px; border:1px solid #cf9d98; padding:9px 12px; color:#7c201a; background:transparent; white-space:nowrap; }
.mast-actions .button:hover { color:#641713; background:#f2e5d7; }
.search-form { margin-top:22px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.search-form input,.search-form select { min-width:0; min-height:44px; border:1px solid var(--line); border-radius:8px; padding:9px 10px; color:var(--ink); background:white; font:inherit; }
.search-primary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.search-filters { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.search-filters summary { width:max-content; max-width:100%; cursor:pointer; color:#7c201a; font-weight:700; }
.search-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
.search-summary { margin-top:22px; color:var(--muted); }
.search-result { margin-top:16px; border:1px solid var(--line); border-radius:12px; padding:18px; background:var(--panel); }
.search-result h3 { margin:8px 0; }
.search-result p { color:var(--muted); }
.search-result mark { color:inherit; background:#f5d788; }
.board-tools { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-top:22px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.board-filter { flex:1; }
.board-filter label { display:block; margin-bottom:7px; color:var(--muted); font-size:13px; font-weight:700; }
.board-filter-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.board-filter input { min-width:0; min-height:44px; border:1px solid var(--line); border-radius:8px; padding:9px 10px; color:var(--ink); background:white; font:inherit; }
.board-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.board-card { min-width:0; border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--panel); }
.board-card h2 { margin:10px 0 6px; overflow-wrap:anywhere; }
.board-card p { margin:0 0 14px; color:var(--muted); }
.board-actions { display:flex; flex-wrap:wrap; gap:8px; }
.empty-state { grid-column:1/-1; border:1px dashed var(--line); border-radius:12px; padding:24px; color:var(--muted); text-align:center; }
.article-list { list-style:none; margin:22px 0 0; padding:0; border-top:1px solid var(--line); }
.article-row { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:8px 16px; padding:14px 6px; border-bottom:1px solid var(--line); }
.article-row a { font-weight:700; }
.article-row span { color:var(--muted); font-size:13px; }
.gem-list { list-style:none; margin:22px 0 0; padding:0; border-top:1px solid var(--line); }
.gem-row { display:grid; grid-template-columns:72px minmax(0,1fr) 150px; gap:8px 16px; padding:14px 6px; border-bottom:1px solid var(--line); }
.gem-kind { color:var(--muted); font-size:12px; font-weight:800; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; color:var(--muted); font-size:14px; }
.breadcrumbs a { font-weight:700; }
.pager { flex-wrap:wrap; justify-content:space-between; margin-top:24px; }
.article-pager { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.article-pager .button { width:100%; }
.back-to-top { display:flex; justify-content:center; margin-top:24px; }
.article-head { margin-top:28px; }
.article-head h2 { overflow-wrap:anywhere; }
.article-head p { color:var(--muted); }
.profile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; }
.profile-stat { border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--panel); }
.profile-stat strong { display:block; margin-top:4px; font-size:20px; overflow-wrap:anywhere; }
.article-body { overflow-x:auto; margin-top:22px; border:1px solid #28563a; border-radius:12px; padding:20px; color:var(--terminal-ink); background:var(--terminal); box-shadow:0 0 45px rgba(52,214,113,.06) inset; font:14px/1.62 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.article-body a { color:#8bd8ff; text-decoration-color:#67afd0; font-weight:700; }
.article-body a:hover { color:#c4ebff; }
.opening-note { color:var(--muted); line-height:1.7; }
.opening-switch { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.opening-screen { min-height:620px; border-radius:0; line-height:1.18; white-space:pre; -webkit-overflow-scrolling:touch; }
.chip { display:inline-flex; margin-right:6px; border:1px solid var(--line); border-radius:999px; padding:5px 10px; color:var(--muted); background:white; font-size:13px; }
.ansi-bold { font-weight:800; } .ansi-underline { text-decoration:underline; }
.ansi-fg-black { color:#839188; } .ansi-fg-red { color:#d94b45; } .ansi-fg-green { color:#51b86b; } .ansi-fg-yellow { color:#c99b24; }
.ansi-fg-blue { color:#5187d8; } .ansi-fg-magenta { color:#b06bc2; } .ansi-fg-cyan { color:#48aeb4; } .ansi-fg-white { color:#e8ece9; }
.ansi-bg-black { background:#111; } .ansi-bg-red { background:#7d211c; } .ansi-bg-green { background:#1d682f; } .ansi-bg-yellow { background:#79621e; }
.ansi-bg-blue { background:#244b87; } .ansi-bg-magenta { background:#633474; } .ansi-bg-cyan { background:#286b70; } .ansi-bg-white { background:#d5d8d6; color:#111; }
@media(max-width:760px) {
  .shell { width:calc(100% - 24px); margin-top:16px; }
  .masthead { align-items:start; flex-direction:column; gap:12px; padding-bottom:12px; }
  .mast-actions { width:100%; }
  .search-form { padding:12px; }
  .search-filter-grid { grid-template-columns:1fr; }
  .board-tools { align-items:stretch; flex-direction:column; padding:12px; }
  .board-grid { grid-template-columns:1fr; gap:12px; }
  .article-row { grid-template-columns:1fr; }
  .gem-row { grid-template-columns:1fr; }
  .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .profile-stat { padding:10px; }
  .profile-stat strong { font-size:16px; }
  .pager .button { flex:1; }
  .article-head { margin-top:20px; }
  .article-head h2 { font-size:clamp(21px,7vw,28px); line-height:1.35; }
  .article-body { padding:14px; font-size:14px; line-height:1.72; }
  .opening-screen { font-size:12px; line-height:1.15; }
}
@media(orientation:landscape) and (max-height:600px) {
  .article-body:not(.opening-screen) { white-space:pre; overflow-wrap:normal; }
}