/* A restrained academic identity; spacing follows a four-pixel rhythm. */
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;
  --corner:2px; --corner-dialog:4px;
  --panel:#172131; --library-rule:#344052;
}
html,body { background:#111a28; }
header { background:#111a28; }
button,button.primary,input,select,textarea,.tools .settings-menu button,
.auth-card input:not([type=checkbox]),.account-dialog input:not([type=checkbox]),
.account-dialog textarea,.account-dialog select,.writing-editor textarea,
.display-settings>summary,.display-settings[open]>summary,
.settings-menu,header nav button,header nav button.active,
.subject-card,.lecture-card,.library-record,.lesson-row,
.study-panel,.word-card,.resume-card,.side-note,.empty,
.auth-card,.auth-example,.password-field,.explore-world,.update-entry,
.stage-world,.scene,.steps span,.teaching-path span,.tag,
.answer .key,.feedback,.summary-strip span,.draft-preview,
.micro-animation span,.simple-help,.quick-check,.watch-out,
.english-box,.example,.vocab-inline button,.learning-goal {
  border-radius:var(--corner);
}
dialog,.account-dialog { border-radius:var(--corner-dialog); }
.brand { gap:var(--space-3); font-size:29px; }
.brand .brand-mark { width:44px; height:44px; display:block; border-radius:2px; background:none; flex:none; }
.brand small { font:9px/1.4 Arial,sans-serif; letter-spacing:2px; margin:0; color:#b7a68e; text-align:right; }
.brand:hover { background:transparent; }
header nav { gap:var(--space-2); }
header nav button { border-radius:0; }
header nav button.active { background:transparent; border-bottom:2px solid var(--bronze); color:#eed8b8; }
main { max-width:1280px; padding:var(--space-8) 40px 48px; }
.library-welcome { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center; margin-bottom:var(--space-6); }
.library-intro { padding:0; margin:0; }
.library-intro h1 { font-size:36px; line-height:1.4; margin-bottom:var(--space-2); }
.library-intro p { font-size:16px; margin:0; }
.resume-card { background:#1c293c; padding:var(--space-3) var(--space-4); margin:0 0 var(--space-6); }
.resume-card strong { font-size:18px; }
.resume-card small { font-size:12px; }
.library-welcome .resume-card { margin:0; }
.subject-search { max-width:730px; gap:var(--space-4); }
.subject-search input { min-height:48px; }
.section-top { margin:var(--space-8) 0 var(--space-4); }
.section-top h2 { font-size:24px; }
.subject-grid { gap:var(--space-6); }
.subject-card { display:flex; flex-direction:column; background:var(--panel); border:1px solid #334053; box-shadow:none; overflow:hidden; }
.subject-card:hover { transform:none; border-color:#958269; }
.subject-photo { display:block; flex:none; width:100%; aspect-ratio:2/1; overflow:hidden; background:#283340; }
.subject-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.subject-content { display:flex; flex-direction:column; flex:1; padding:var(--space-4) var(--space-5) 0; }
.subject-content h3 { font-size:23px; line-height:1.5; margin:0; }
.subject-content .subject-code { font-size:13px; color:#c7cbd0; margin:var(--space-1) 0 var(--space-4); }
.subject-meta { gap:var(--space-2); justify-content:space-between; margin:0 0 var(--space-3); font-size:12px; }
.subject-content>.progress { height:3px; border-radius:0; margin-top:auto; }
.subject-open { display:flex; justify-content:space-between; align-items:center; width:calc(100% + 40px); margin:var(--space-4) -20px 0; padding:var(--space-3) var(--space-5); min-height:48px; border:0; border-top:1px solid #344052; border-radius:0; font-size:14px; }
.library-shortcuts { gap:var(--space-3); margin:var(--space-6) 0 var(--space-4); }
.library-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); padding:0 0 var(--space-6); margin:0 0 var(--space-6); }
.library-heading>div { min-width:0; }
.library-heading .subject-photo { width:240px; aspect-ratio:3/2; }
.library-heading h1 { font-size:36px; line-height:1.4; }
.library-heading .subject-english { margin:var(--space-2) 0 var(--space-3); }
.library-heading .eyebrow { margin-bottom:var(--space-2); }
.lecture-grid,.lesson-list,.glossary-grid { gap:var(--space-4); }
.library-record { padding:var(--space-6); gap:var(--space-6); }
.record-category { margin-bottom:var(--space-2); }
.lecture-facts { margin:var(--space-3) 0 var(--space-4); }
.record-footer { padding-top:var(--space-4); }
.lesson-row { padding:var(--space-4) var(--space-5); }
.study-panel,.tutor-layout .study-panel { padding:var(--space-6); }
.explain { animation:none; }
.study-panel h2 { margin-bottom:var(--space-4); }
.steps { gap:var(--space-1); margin:var(--space-4) 0 var(--space-6); }
.answer { border-radius:var(--corner); }
.answer .key { flex:0 0 26px; width:26px; height:26px; }
.bottom-actions { gap:var(--space-2); }
.progress { border-radius:0; }
.auth-photograph { margin:var(--space-6) 0; max-width:460px; aspect-ratio:2/1; overflow:hidden; }
.auth-photograph img { width:100%; height:100%; object-fit:cover; display:block; }
.site-footer { max-width:1280px; margin:0 auto; padding:var(--space-6) 40px; }
.footer-mark { width:32px; height:32px; display:inline-block; vertical-align:middle; margin-inline-end:var(--space-2); }
.site-footer strong { font-size:20px; vertical-align:middle; }
.site-footer strong span { font-size:12px; }

@media(max-width:1100px) {
  main { padding-inline:var(--space-6); }
  .subject-grid { gap:var(--space-4); }
}
@media(max-width:760px) {
  main,.auth-gate main { padding:var(--space-6) var(--space-4) var(--space-8); }
  header,.auth-gate header { padding:var(--space-3) var(--space-4); min-height:72px; }
  .brand { gap:var(--space-2); font-size:24px; }
  .brand .brand-mark { width:32px; height:36px; object-fit:contain; }
  .brand small { display:none; }
  header nav { gap:var(--space-1); box-shadow:none; padding:var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom)); }
  header nav button,header nav button.active { border:0; border-top:2px solid transparent; border-radius:0; padding:6px 2px; }
  header nav button.active { background:#223045; border-top-color:var(--bronze); }
  .library-welcome { display:flex; flex-direction:column; align-items:stretch; gap:var(--space-5); margin-bottom:var(--space-5); }
  .library-intro { margin:0; }
  .library-intro h1 { font-size:29px; margin-bottom:var(--space-1); }
  .library-intro p { font-size:14px; }
  .resume-card { margin-bottom:var(--space-5); padding:var(--space-3) var(--space-4); gap:var(--space-3); }
  .resume-card strong { font-size:18px; }
  .subject-search label { margin-bottom:var(--space-2); }
  .subject-grid { gap:var(--space-3); }
  .section-top { margin:var(--space-6) 0 var(--space-3); }
  .section-top h2 { font-size:22px; }
  .subject-card { display:grid; grid-template-columns:96px minmax(0,1fr); }
  .subject-card .subject-photo { aspect-ratio:auto; height:100%; }
  .subject-content { padding:var(--space-3) var(--space-3) 0; }
  .subject-content h3 { font-size:20px; line-height:1.45; }
  .subject-content .subject-code { font-size:12px; margin:var(--space-1) 0 var(--space-3); }
  .subject-meta { font-size:11px; gap:var(--space-1) var(--space-2); margin-bottom:var(--space-2); }
  .subject-open { margin:var(--space-3) -12px 0; width:calc(100% + 24px); padding:var(--space-2) var(--space-3); min-height:44px; }
  .library-heading { gap:var(--space-4); align-items:flex-start; padding-bottom:var(--space-5); margin-bottom:var(--space-5); }
  .library-heading .subject-photo { width:88px; aspect-ratio:3/4; }
  .library-heading h1 { font-size:27px; }
  .library-heading .subject-english { font-size:14px; margin:var(--space-1) 0 var(--space-2); }
  .library-heading p:last-child { font-size:14px; line-height:1.8; }
  .library-heading .eyebrow { display:none; }
  .library-record { padding:var(--space-4); }
  .lesson-row { padding:var(--space-4); }
  .study-panel,.tutor-layout .study-panel { padding:var(--space-4); }
  .study-panel h2 { font-size:25px; }
  .auth-card { padding:var(--space-5) var(--space-4); }
  .auth-photograph { display:none; }
  .site-footer { padding:var(--space-6) var(--space-4); }
  .site-footer strong { font-size:18px; }
  .footer-mark { width:28px; height:28px; }
  .settings-menu { border-radius:var(--corner); }
  dialog,.account-dialog { border-radius:var(--corner-dialog); }
}
@media(max-width:359px) {
  header,.auth-gate header,main,.auth-gate main { padding-inline:var(--space-3); }
  .brand { gap:6px; font-size:22px; }
  .brand .brand-mark { width:28px; height:32px; }
  .subject-card { grid-template-columns:76px minmax(0,1fr); }
  .subject-content h3 { font-size:19px; }
  .subject-content .subject-code { font-size:11px; }
  .library-heading .subject-photo { width:64px; aspect-ratio:1/2; }
  .library-heading h1 { font-size:25px; }
  .study-panel,.tutor-layout .study-panel { padding:var(--space-4) var(--space-3); }
}