:root{color-scheme:light;--paper:#f7f7f1;--white:#fffefa;--ink:#202923;--forest:#17382a;--green:#315a44;--muted:#526158;--line:#dce2d8;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans)}
a{color:inherit}
button,input,select{font:inherit}
button,select{cursor:pointer}
svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
[hidden]{display:none!important}
:focus-visible{outline:2px solid #9b5d21;outline-offset:4px}
.wrap{width:min(1200px,calc(100% - 80px));margin-inline:auto}
.skip{position:absolute;left:1rem;top:-5rem;padding:12px;background:#fff;z-index:3}
.skip:focus{top:1rem}
.top{background:var(--white);border-bottom:1px solid #e1e6dc}
.top-inner{min-height:77px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:8px;background:var(--forest);color:#dfebda;font-size:18px}
.brand strong{font:700 25px/.94 var(--serif);letter-spacing:-.045em;display:block}
.brand small{display:block;font-size:9px;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.top nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-size:13px;font-weight:650}
.top nav a{text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--green);text-decoration:underline;text-underline-offset:5px}
.top nav .about{border:1px solid var(--line);padding:7px 13px;border-radius:6px}
.hero{background:#18392b;color:#fcf8e9;overflow:hidden}
.hero .wrap{position:relative;isolation:isolate;min-height:349px;display:flex;align-items:center}
.hero-art{position:absolute;right:-18px;top:0;width:min(56%,590px);height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.hero-copy{padding:45px 0 48px;max-width:58%}
.kicker{text-transform:uppercase;font-size:11px;font-weight:760;letter-spacing:.19em;color:var(--green);margin:0 0 12px}
.hero .kicker{display:flex;align-items:center;gap:10px;color:#ddcd9c}
.hero .kicker::before{content:"";width:20px;height:1px;background:#d2bc83}
h1,h2,h3,p{margin-top:0}
.hero h1{font:400 clamp(45px,5.1vw,76px)/.99 var(--serif);letter-spacing:-.051em;margin-bottom:17px}
.hero p:not(.kicker){color:#dae7db;max-width:465px;font-size:16px;margin-bottom:25px}
.primary{display:inline-flex;align-items:center;gap:12px;background:#e4d4a5;color:#23352a;padding:11px 16px;border-radius:6px;text-decoration:none;font-size:13px;font-weight:750}
.primary:hover{background:#f1e1b1}
.collections{padding:37px 0 42px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px}
.section-heading h2,.library-head h2{font:400 clamp(31px,4vw,44px)/1.05 var(--serif);letter-spacing:-.046em;margin:0}
.section-heading p:last-child:not(.kicker){margin:0;color:var(--muted);font-size:13px}
.collection-grid,.resource-grid{display:grid;gap:14px}
.collection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.collection{background:var(--white);border:1px solid var(--line);border-radius:9px;text-decoration:none;padding:15px 17px;display:grid;grid-template-columns:37px 1fr auto;align-items:center;column-gap:11px;min-height:73px}
.collection:hover,.resource-card:hover{border-color:#7b9985;background:#fcfdf6}
.collection strong{display:block;line-height:1.2;font-size:14px}
.collection small{font-size:11px;color:var(--muted)}
.collection-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:7px;font-size:16px}
.collection .direction{color:#527260;width:16px}
.notes{background:#e8efe4;color:#315a44}.mcqs{background:#ebedf6;color:#434e7e}.cases{background:#f3e9d8;color:#754d27}.practice{background:#f1e8ee;color:#704967}.resources{background:#eef1e8;color:#4b5d3f}
.library{border-top:1px solid var(--line);padding:35px 0 65px;scroll-margin-top:15px}
.library-head{margin-bottom:20px}
.library-head p:last-child{margin:8px 0 0;color:var(--muted)}
.filters{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:17px}
.fields{display:grid;grid-template-columns:minmax(210px,2.5fr) repeat(3,minmax(126px,1fr));gap:11px}
.fields label{font-size:11px;font-weight:750;display:block;color:#43564a}
.fields input,.fields select{margin-top:5px;display:block;width:100%;height:44px;border:1px solid #ccd7cb;border-radius:6px;background:#fff;color:var(--ink);padding:0 10px;font-size:13px}
.search-field{position:relative}
.search-field svg{position:absolute;left:11px;bottom:13px;color:#54705d;width:17px;height:17px;pointer-events:none}
.search-field input{padding-left:35px}
.tab-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button,.text-button,.outline-button{border:1px solid transparent;border-radius:6px;background:transparent;padding:6px 10px;font-size:12px;font-weight:650;color:var(--green)}
.tabs button:hover,.text-button:hover{background:#edf2e9}
.tabs button[aria-pressed=true]{background:var(--forest);color:#fff}
.text-button{white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.outline-button{border-color:#a7b7a8;background:var(--white);padding:9px 15px}
.outline-button:hover{background:#e8efe4}
.result-count{font-size:13px;color:var(--muted);min-height:1.5em;margin:0 0 10px}
.resource-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.resource-card{min-width:0;display:flex;flex-direction:column;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:9px;padding:17px;text-decoration:none}
.resource-kind{display:inline-flex;align-items:center;gap:5px;border-radius:4px;padding:3px 7px;font-size:10px;font-weight:750;letter-spacing:.03em}
.resource-card h3{font:700 21px/1.16 var(--serif);letter-spacing:-.02em;margin:11px 0 5px;overflow-wrap:anywhere}
.resource-meta{font-size:11px;font-weight:650;color:var(--muted)}
.resource-card p{margin:9px 0 15px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.resource-tail{margin-top:auto;width:100%;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e5eae1;padding-top:8px;font-size:12px;color:var(--green);font-weight:700}
.more-wrap{text-align:center;margin-top:20px}
.empty{border:1px dashed #bdcbbb;padding:25px 18px;text-align:center;border-radius:8px}
.empty h3{margin-bottom:5px}
.footer{border-top:1px solid var(--line);background:#eef1e8;padding:22px 0;color:#4d6053;font-size:12px}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footer a{text-underline-offset:3px}
.reader{padding:35px 0 66px;min-height:65vh}
.reader .crumb{display:inline-block;font-size:13px;font-weight:700;color:var(--green);margin:0 0 18px;text-decoration:none}
.reader .crumb:hover{text-decoration:underline}
.reader article{max-width:865px;margin:auto;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:clamp(20px,5vw,58px);overflow-wrap:anywhere}
.reader h1{font:400 clamp(33px,5vw,58px)/1.03 var(--serif);letter-spacing:-.045em;margin:14px 0}
.reader .article-meta{font-size:13px;color:var(--muted);padding-bottom:19px;border-bottom:1px solid var(--line);margin-bottom:25px}
.article-body{font-size:16px;line-height:1.68}
.article-body h2,.article-body h3,.article-body h4,.article-body h5,.article-body h6{line-height:1.25;margin:1.45em 0 .6em}
.article-body h2{font:700 28px/1.17 var(--serif)}
.article-body h3{font:700 22px/1.2 var(--serif)}
.article-body a{color:#246045;text-underline-offset:3px}
.article-body img,.article-body video{height:auto;max-width:100%}
.article-body figure{margin:15px 0}
.article-body figcaption{font-size:13px;color:var(--muted)}
.article-body ul,.article-body ol{padding-left:1.4em}
.article-body li{margin:4px 0}
.article-body blockquote{margin:16px 0;padding:8px 16px;border-left:3px solid #87a28a;background:#eef3eb}
.article-body hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.article-body table{border-collapse:collapse;font-size:14px;width:100%}
.article-body td,.article-body th{border:1px solid #cbd8cb;padding:7px 9px;text-align:left}
.table-scroll{overflow-x:auto;margin:12px 0}
.article-body pre{overflow:auto;background:#edf2e9;padding:12px;border-radius:5px}
.article-body details{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:12px 0}
.article-body summary{font-weight:700;cursor:pointer}
.reader-end{margin:24px 0 0;padding-top:15px;border-top:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;font-size:13px;color:var(--green)}
.archive-list{columns:2;column-gap:25px}.archive-list li{break-inside:avoid}
@media(max-width:880px){.wrap{width:calc(100% - 42px)}.top nav{gap:15px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{right:-28px;width:64%;object-fit:contain;object-position:right}.fields{grid-template-columns:repeat(3,minmax(0,1fr))}.fields .search-field{grid-column:1/-1}}
@media(max-width:610px){.wrap{width:calc(100% - 30px)}.top-inner{align-items:flex-start;flex-direction:column;justify-content:center;gap:12px;padding:12px 0}.top nav{gap:9px 13px;font-size:12px}.top nav .about{padding:0;border:0}.brand-icon{width:32px;height:32px}.brand strong{font-size:23px}.brand small{font-size:8px}.hero-copy{max-width:100%;padding:36px 0}.hero .wrap{min-height:287px}.hero h1{font-size:clamp(43px,11vw,60px)}.hero p:not(.kicker){font-size:14px;max-width:265px}.hero-art{width:84%;right:-26%;opacity:.29;object-fit:cover}.collections{padding:29px 0}.section-heading{display:block}.section-heading p:last-child:not(.kicker){margin-top:7px}.collection-grid,.resource-grid{gap:9px}.collection{padding:9px;grid-template-columns:29px 1fr;gap:7px;min-height:59px}.collection-icon{width:29px;height:29px}.collection .direction{display:none}.collection strong{font-size:13px}.library{padding-top:28px}.filters{padding:11px}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.fields label:last-child{grid-column:1/-1}.tab-row{align-items:flex-start}.tabs{gap:3px}.tabs button,.text-button{font-size:11px;padding:5px 7px}.resource-grid{grid-template-columns:1fr}.reader{padding-top:23px}.archive-list{columns:1}}
.practice-set fieldset{border:1px solid var(--line);border-radius:7px;margin:16px 0;padding:9px 13px}
.practice-set legend{font-weight:700;padding:0 4px;max-width:100%}
.practice-set label{display:flex;align-items:baseline;gap:9px;margin:4px 0;padding:4px}
.practice-set input{accent-color:var(--green)}
.practice-set .quiz-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.practice-set .quiz-actions span{font-size:13px;color:var(--muted)}
.notice{padding:12px 15px;border-left:3px solid #9ba888;background:#edf2e9}

.reader .study-article { max-width: 1100px; }
.study-layout {
  display: grid;
  grid-template-columns: minmax(155px, 1fr) minmax(0, 4fr);
  gap: clamp(18px, 3vw, 38px);
  align-items: start;
}
.study-contents-desktop {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 13px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.study-nav-title {
  margin: 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 750;
}
.study-layout .study-contents-mobile { display: none; }
.study-layout nav ul { padding: 0; margin: 8px 0 0; list-style: none; }
.study-layout nav li { margin: 0; }
.study-layout nav a {
  display: block;
  padding: 6px 2px;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
.study-layout nav a:hover, .study-layout nav a:focus-visible { text-decoration: underline; }
.study-content { min-width: 0; }
.study-content [id] { scroll-margin-top: 20px; }
.study-summary {
  padding: 18px 20px;
  margin: 0 0 25px;
  background: #f0f4eb;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.article-body .study-summary h2 { margin: 0 0 9px; }
.study-summary > :last-child, .study-recall > :last-child { margin-bottom: 0; }
.study-practice, .dda-example, .memory-group {
  margin-top: 28px;
  padding-top: 19px;
  border-top: 1px solid var(--line);
}
.article-body .study-practice h2, .article-body .dda-example h2, .article-body .memory-group h2 {
  margin-top: 0;
}
.study-inline-heading {
  display: block;
  margin-top: 1em;
  color: var(--green);
  font: 700 22px/1.3 var(--serif);
}
.study-recall p { margin-top: 9px; }
.memory-topic h3 { margin-bottom: 7px; }
.memory-topic h3 + p { margin-bottom: 8px; }
.memory-code {
  color: var(--green);
  background: #e2ecda;
  border-radius: 5px;
  padding: 2px 5px;
  font-weight: 750;
}
.memory-letter { color: var(--green); font-weight: 750; }
.study-layout table { background: var(--white); }
.study-layout thead { background: #eaf0e6; }
.study-layout th, .study-layout td { vertical-align: top; }
.memory-overview table { font-size: 13px; }
.memory-overview th { font-weight: 650; }
.dda-calculation {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: #eef3ea;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.dda-worked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 13px;
  align-items: start;
}
.dda-worked table { font-variant-numeric: tabular-nums; }
.dda-worked td:last-child { white-space: nowrap; }
.dda-worked .pixel-figure { margin: 12px 0; }
.pixel-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 310px;
  margin-inline: auto;
  background: #fbfcf8;
  border-radius: 7px;
  fill: none;
  stroke: none;
}
.pixel-cells { fill: #a5c4a7; }
.pixel-grid-lines { stroke: #a2ae9f; stroke-width: 1; }
.pixel-ideal { stroke: #214d39; stroke-width: 2; stroke-dasharray: 4 3; }
.pixel-labels { fill: #41554a; font: 11px var(--sans); text-anchor: middle; }
@media (max-width: 810px) {
  .study-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .study-contents-desktop { display: none; }
  .study-layout .study-contents-mobile { display: block; margin: 0; background: var(--paper); }
}
@media (max-width: 580px) {
  .study-summary { padding: 13px; }
  .dda-worked { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .study-layout th, .study-layout td { padding: 6px; }
}