:root {
  color-scheme: light;
  --bg: #f6f3ee;
  --ink: #1d2230;
  --muted: #687084;
  --line: #d9d2c7;
  --paper: #fffdf8;
  --accent: #6d3de8;
  --accent-soft: #eee7ff;
  --term: #153e75;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

a {
  color: inherit;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 104px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 780;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.08;
}

h2 {
  font-size: 20px;
  line-height: 1.25;
}

p {
  margin: 10px 0 0;
  line-height: 1.72;
}

.source-link,
.quick-nav a {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  text-decoration: none;
  font-weight: 720;
}

.source-link {
  flex: 0 0 auto;
  padding: 10px 13px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 18px;
  align-items: start;
}

.viewer {
  height: min(760px, calc(100vh - 140px));
  min-height: 620px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fbf8f1;
}

.viewer-head span {
  color: var(--muted);
  font-size: 13px;
}

iframe {
  display: block;
  width: 100%;
  height: calc(100% - 46px);
  border: 0;
}

.study-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quick-nav {
  position: sticky;
  top: 122px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(246, 243, 238, 0.9);
  backdrop-filter: blur(10px);
  grid-column: 1 / -1;
}

.quick-nav a {
  min-height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 18px;
}

.intro {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: linear-gradient(180deg, #fffdf8, #f5efff);
}

.term-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.term {
  border: 1px solid #e3ddd2;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.term strong {
  display: block;
  color: var(--term);
  font-size: 15px;
}

.term span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}

.steps {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding-left: 22px;
}

.steps li {
  padding-left: 4px;
}

.steps strong,
.steps span {
  display: block;
}

.steps span {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.62;
}

.compact-list {
  margin: 12px 0 0;
  padding-left: 20px;
  line-height: 1.7;
}

.source-note {
  margin-bottom: 24px;
}

strong {
  color: #25143f;
}

@media (max-width: 1100px) {
  .viewer {
    height: 72vh;
    min-height: 520px;
  }

  .study-panel {
    grid-template-columns: 1fr;
  }

  .quick-nav {
    top: 104px;
  }
}

@media (max-width: 640px) {
  .topbar {
    display: grid;
    align-items: start;
    padding: 18px;
  }

  .layout {
    padding: 12px;
  }

  .viewer {
    height: 64vh;
    min-height: 430px;
  }

  .viewer-head {
    align-items: flex-start;
    display: grid;
  }

  .quick-nav {
    grid-template-columns: repeat(3, 1fr);
    position: static;
  }
}

:root{--accent:#8a4b38;--ink:#282825;--muted:#78756e;--line:#e5e0d8}body{background:#fcfcf9;color:var(--ink)}a{color:var(--accent)}.topbar{background:#fcfcf9}.portfolio-nav{padding:17px 24px;display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);font-size:13px}.portfolio-nav a,.portfolio-footer a{text-decoration:none}.portfolio-footer{text-align:center;padding:28px 20px 36px;font-size:12px;color:var(--muted);line-height:1.9}.demo-start{min-height:560px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:48px;text-align:center;background:linear-gradient(135deg,#f4efe8,#fcfbf8)}.demo-mark{font-family:Georgia,serif;font-size:clamp(44px,5vw,70px);color:#b0947b;letter-spacing:.05em}.demo-start h2{font-size:28px;color:var(--ink)}.demo-start p{max-width:450px;color:var(--muted);font-size:15px;line-height:1.9}.demo-start button{font:inherit;border:1px solid #34342e;border-radius:6px;background:#34342e;color:#fff;padding:12px 20px;cursor:pointer;display:flex;align-items:center;gap:28px}.demo-start>a{font-size:13px}.demo-start small{max-width:430px;font-size:12px;color:#999082;line-height:1.8}.demo-status{font-size:12px;color:var(--muted);line-height:1.8;margin:0;padding:12px 20px}.demo-status:empty{display:none}#demo-host iframe{display:block;border:0;width:100%;height:78vh;min-height:500px}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media(max-width:600px){.demo-start{min-height:390px;padding:30px 22px;gap:18px}.demo-start p{font-size:14px}.demo-start h2{font-size:25px}.portfolio-nav{padding:15px 18px}.demo-start button{font-size:13px}.viewer-head{flex-wrap:wrap}#demo-host iframe{height:70vh;min-height:430px}}
.viewer{height:auto;min-height:0}.topbar{position:relative}.quick-nav{top:12px}:root{--accent-soft:#f1e7df;--term:#815440}strong{color:#37322c}