/* SE201 Architecture Studio — shared visual system for the complete course area. */
:root {
  color-scheme: light;
  --se-bg: #f4f1ea;
  --se-bg-2: #ebe6dc;
  --se-paper: #fffdf8;
  --se-paper-2: #f8f4ec;
  --se-ink: #172126;
  --se-muted: #68747a;
  --se-faint: #9aa3a5;
  --se-line: #d9d4ca;
  --se-line-strong: #beb9af;
  --se-coral: #ef6a4c;
  --se-coral-ink: #bb3f28;
  --se-coral-soft: rgba(239, 106, 76, .12);
  --se-teal: #167f78;
  --se-teal-soft: rgba(22, 127, 120, .11);
  --se-yellow: #e2ad38;
  --se-success: #25845f;
  --se-danger: #c84d4d;
  --se-shadow: 0 18px 50px rgba(39, 45, 46, .09);
  --se-shadow-sm: 0 8px 24px rgba(39, 45, 46, .07);
  --se-radius-sm: 10px;
  --se-radius: 18px;
  --se-radius-lg: 28px;
  --se-sans: "Inter", "Avenir Next", "Segoe UI", sans-serif;
  --se-display: "Manrope", "Inter", "Avenir Next", sans-serif;
  --se-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --bg: var(--se-bg);
  --bg-void: var(--se-bg);
  --bg-surface: var(--se-paper);
  --bg-elevated: var(--se-paper-2);
  --surface: var(--se-paper);
  --surface-2: var(--se-paper-2);
  --surface-3: var(--se-bg-2);
  --text: var(--se-ink);
  --text-main: var(--se-ink);
  --text-primary: var(--se-ink);
  --text-secondary: var(--se-muted);
  --text-dim: var(--se-muted);
  --text-tertiary: var(--se-faint);
  --border: var(--se-line);
  --border-dim: var(--se-line);
  --border-med: var(--se-line-strong);
  --accent: var(--se-coral);
  --accent-ink: var(--se-coral-ink);
  --accent-soft: var(--se-coral-soft);
  --brand-purple: var(--se-coral);
  --brand-purple-dim: var(--se-coral-soft);
  --alert-red: var(--se-coral);
  --font-ui: var(--se-sans);
  --font-sans: var(--se-sans);
  --font-display: var(--se-display);
  --font-mono: var(--se-mono);
}

html[data-theme="dark"],
body.shoug-dark-mode {
  color-scheme: dark;
  --se-bg: #111718;
  --se-bg-2: #182021;
  --se-paper: #1b2425;
  --se-paper-2: #222d2e;
  --se-ink: #f1eee6;
  --se-muted: #adb7b5;
  --se-faint: #778382;
  --se-line: #344142;
  --se-line-strong: #4a5959;
  --se-coral: #ff8063;
  --se-coral-ink: #ff9c85;
  --se-coral-soft: rgba(255, 128, 99, .14);
  --se-teal: #5bc1b8;
  --se-teal-soft: rgba(91, 193, 184, .12);
  --se-yellow: #f0c45d;
  --se-success: #61c796;
  --se-danger: #ff8585;
  --se-shadow: 0 22px 58px rgba(0, 0, 0, .26);
  --se-shadow-sm: 0 10px 28px rgba(0, 0, 0, .2);
}

html {
  scroll-behavior: smooth;
  background: var(--se-bg) !important;
}

body,
body.shoug-light-mode,
body[data-theme="light"],
body[data-theme="dark"] {
  margin: 0 !important;
  padding: 0 !important;
  --bg: var(--se-bg) !important;
  --bg-void: var(--se-bg) !important;
  --bg-surface: var(--se-paper) !important;
  --bg-elevated: var(--se-paper-2) !important;
  --surface: var(--se-paper) !important;
  --surface-2: var(--se-paper-2) !important;
  --surface-3: var(--se-bg-2) !important;
  --text: var(--se-ink) !important;
  --text-main: var(--se-ink) !important;
  --text-primary: var(--se-ink) !important;
  --text-secondary: var(--se-muted) !important;
  --text-dim: var(--se-muted) !important;
  --text-dark: var(--se-faint) !important;
  --text-tertiary: var(--se-faint) !important;
  --border: var(--se-line) !important;
  --border-dim: var(--se-line) !important;
  --border-med: var(--se-line-strong) !important;
  --border-purple: var(--se-line) !important;
  --brand-purple: var(--se-coral) !important;
  --brand-purple-dim: var(--se-coral-soft) !important;
  background-color: var(--se-bg) !important;
  background-image:
    linear-gradient(rgba(22, 127, 120, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 127, 120, .035) 1px, transparent 1px),
    radial-gradient(circle at 8% 0%, var(--se-coral-soft), transparent 29rem),
    radial-gradient(circle at 94% 8%, var(--se-teal-soft), transparent 31rem) !important;
  background-size: 44px 44px, 44px 44px, auto, auto !important;
  color: var(--se-ink) !important;
  font-family: var(--se-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before,
body::after {
  display: none !important;
}

::selection {
  color: #fff;
  background: var(--se-coral);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--se-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--se-line-strong);
  border: 3px solid var(--se-bg);
  border-radius: 999px;
}

a {
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

button {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.course-code,
.course-name,
.ch-title,
.ps-title {
  color: var(--se-ink) !important;
  font-family: var(--se-display) !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
}

p,
li,
dd,
td,
.text-block,
.course-desc-brief {
  color: var(--se-muted);
}

code,
pre,
kbd,
.course-code,
.type-label,
.status-tag,
.tag-complete,
.topic-num,
.dir-num {
  font-family: var(--se-mono) !important;
}

/* New course navigation */
.se201-studio-bar {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  min-height: 64px;
  padding: 10px clamp(14px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 18px;
  background: color-mix(in srgb, var(--se-paper) 88%, transparent) !important;
  border-bottom: 1px solid var(--se-line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.se201-studio-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
  color: var(--se-ink) !important;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -.02em;
}

.se201-studio-mark {
  position: relative;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: var(--se-coral);
  box-shadow: inset -8px -8px 0 rgba(0, 0, 0, .07);
}

.se201-studio-mark::before,
.se201-studio-mark::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 99px;
}

.se201-studio-mark::before {
  width: 13px;
  height: 3px;
  left: 8px;
  top: 8px;
  box-shadow: 0 10px 0 #fff;
}

.se201-studio-mark::after {
  width: 3px;
  height: 13px;
  left: 13px;
  top: 8px;
  opacity: .7;
}

.se201-studio-brand small {
  display: block;
  margin-top: 1px;
  color: var(--se-muted);
  font: 600 9px/1 var(--se-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.se201-studio-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.se201-studio-nav a {
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--se-muted) !important;
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
}

.se201-studio-nav a:hover,
.se201-studio-nav a[aria-current="page"] {
  color: var(--se-ink) !important;
  background: var(--se-teal-soft);
}

.se201-theme-toggle {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--se-line);
  border-radius: 13px;
  color: var(--se-ink);
  background: var(--se-paper-2);
  cursor: pointer;
}

.se201-theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--se-coral);
  box-shadow: var(--se-shadow-sm);
}

.se201-theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* Replace the inherited global chrome without retaining its old aesthetic. */
.shoug-site-header,
.global-header,
.site-header {
  display: none !important;
}

.shoug-site-footer {
  background: var(--se-paper) !important;
  border: 0 !important;
  border-top: 1px solid var(--se-line) !important;
  color: var(--se-muted) !important;
  box-shadow: none !important;
}

.shoug-footer-brand,
.shoug-footer-link,
.shoug-footer-meta,
.shoug-footer-text,
.shoug-footer-label {
  color: var(--se-muted) !important;
}

.shoug-footer-brand {
  color: var(--se-ink) !important;
}

/* Course hubs and directory pages */
.se201-shell .app-layout {
  min-height: calc(100vh - 64px) !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
}

.se201-shell .sidebar,
.se201-shell .academic-sidebar {
  position: sticky !important;
  top: 64px !important;
  width: 252px !important;
  height: calc(100vh - 64px) !important;
  flex: 0 0 252px !important;
  padding: 18px 12px !important;
  overflow: auto !important;
  background: color-mix(in srgb, var(--se-paper) 82%, transparent) !important;
  border: 0 !important;
  border-right: 1px solid var(--se-line) !important;
  box-shadow: none !important;
}

.sidebar-header {
  height: auto !important;
  padding: 5px 9px 14px !important;
  border: 0 !important;
  background: transparent !important;
}

.sidebar-title {
  color: var(--se-faint) !important;
  font: 650 10px/1 var(--se-mono) !important;
  letter-spacing: .13em !important;
}

.sidebar-collapse-button {
  color: var(--se-muted) !important;
  border-radius: 8px;
}

.file-tree,
.tree-node,
.tree-children {
  background: transparent !important;
  border: 0 !important;
}

.tree-item {
  margin: 2px 0 !important;
}

.tree-file,
.tree-course-link {
  min-height: 32px !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--se-muted) !important;
  background: transparent !important;
  font: 550 11px/1.35 var(--se-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.tree-file:hover,
.tree-course-link:hover {
  color: var(--se-ink) !important;
  background: var(--se-paper-2) !important;
}

.file-active>.tree-file,
.tree-file.active {
  color: var(--se-coral-ink) !important;
  background: var(--se-coral-soft) !important;
  font-weight: 700 !important;
}

.tree-toggle,
.status-dot {
  color: var(--se-teal) !important;
  background: var(--se-teal) !important;
}

.tree-children {
  margin-left: 8px !important;
  padding-left: 8px !important;
  border-left: 1px solid var(--se-line) !important;
}

.main-wrapper,
.sys-main,
.main-content,
.content-area {
  min-width: 0 !important;
  width: auto !important;
  flex: 1 !important;
  height: auto !important;
  overflow: visible !important;
  color: var(--se-ink) !important;
  background: transparent !important;
}

.top-bar,
.content-topbar {
  position: sticky !important;
  top: 64px !important;
  z-index: 20 !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 10px clamp(18px, 4vw, 54px) !important;
  background: color-mix(in srgb, var(--se-bg) 88%, transparent) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--se-line) !important;
  backdrop-filter: blur(14px);
}

.breadcrumb,
.breadcrumb a,
.breadcrumb-link,
.current,
.sys-time {
  color: var(--se-muted) !important;
  font: 550 11px/1.5 var(--se-mono) !important;
  text-transform: none !important;
}

.separator,
.meta-sep {
  color: var(--se-coral) !important;
}

.content-scroll-area,
.directory-container,
.page-container {
  overflow: visible !important;
  background: transparent !important;
}

.page-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: clamp(38px, 6vw, 82px) clamp(20px, 5vw, 72px) 90px !important;
}

.content-scroll-area {
  height: auto !important;
}

.content-section,
.primary-content,
.meta-panel,
.content-header,
.page-header {
  background: transparent !important;
  border-color: var(--se-line) !important;
  color: var(--se-ink) !important;
  box-shadow: none !important;
}

.course-header {
  position: relative;
  padding: 2px 0 34px !important;
  border: 0 !important;
}

.course-header::before {
  display: none !important;
}

.course-code {
  font-size: clamp(4.4rem, 10vw, 8.5rem) !important;
  line-height: .86 !important;
  font-weight: 850 !important;
  color: var(--se-ink) !important;
}

.course-code::after {
  content: ".";
  color: var(--se-coral);
}

.course-name {
  margin-top: 18px !important;
  font-size: clamp(1.65rem, 3vw, 2.8rem) !important;
  font-weight: 720 !important;
}

.course-desc-brief {
  max-width: 760px;
  margin-top: 14px !important;
  font-size: clamp(1rem, 1.6vw, 1.18rem) !important;
  line-height: 1.75 !important;
}

.tag-complete,
.status-tag,
.available {
  display: inline-flex !important;
  align-items: center;
  padding: 7px 10px !important;
  border: 1px solid color-mix(in srgb, var(--se-success) 35%, transparent) !important;
  border-radius: 99px !important;
  color: var(--se-success) !important;
  background: color-mix(in srgb, var(--se-success) 10%, transparent) !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
}

.sub-nav,
.content-tabs,
.nav-strip {
  gap: 6px !important;
  padding: 5px !important;
  border: 1px solid var(--se-line) !important;
  border-radius: 14px !important;
  background: var(--se-paper-2) !important;
}

.sub-nav-item,
.tab,
.nav-link {
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: var(--se-muted) !important;
  background: transparent !important;
  font: 650 11px/1.3 var(--se-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sub-nav-item.active,
.tab.active,
.nav-link.active,
.sub-nav-item:hover,
.tab:hover {
  color: #fff !important;
  background: var(--se-coral) !important;
}

.grid-data-blocks {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.data-block,
.meta-panel,
.dir-row,
.topic-item,
.card,
.ps-card,
.question,
.quiz-card,
.result-card {
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-radius) !important;
  background: var(--se-paper) !important;
  box-shadow: var(--se-shadow-sm) !important;
  color: var(--se-ink) !important;
}

.data-block {
  padding: 19px !important;
}

.data-block-label,
.meta-key,
.section-label {
  color: var(--se-faint) !important;
  font: 700 10px/1.4 var(--se-mono) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.data-block-val,
.meta-val {
  color: var(--se-ink) !important;
  font-family: var(--se-sans) !important;
}

.section-label {
  margin: 48px 0 17px !important;
  padding: 0 !important;
  border: 0 !important;
}

.section-label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 3px;
  margin-right: 9px;
  border-radius: 9px;
  background: var(--se-coral);
  vertical-align: middle;
}

.topic-item {
  margin: 9px 0 !important;
  padding: 15px 18px !important;
  box-shadow: none !important;
}

.topic-item:hover {
  transform: translateX(4px);
  border-color: var(--se-coral) !important;
  box-shadow: var(--se-shadow-sm) !important;
}

.topic-num {
  color: var(--se-coral-ink) !important;
}

.topic-name {
  color: var(--se-ink) !important;
  font-weight: 650 !important;
}

.topic-meta {
  color: var(--se-faint) !important;
}

.learning-outcomes li::marker {
  color: var(--se-coral);
}

.meta-panel-container {
  width: min(100%, 310px) !important;
}

.meta-panel {
  overflow: hidden !important;
}

.meta-header,
.meta-footer {
  background: var(--se-paper-2) !important;
  border-color: var(--se-line) !important;
}

.barcode {
  opacity: .3;
  filter: grayscale(1);
}

.quick-link-btn,
.btn,
.action-btn,
.control-btn,
.submit-btn,
.restart-btn {
  border: 1px solid var(--se-line) !important;
  border-radius: 11px !important;
  color: var(--se-ink) !important;
  background: var(--se-paper-2) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.quick-link-btn:hover,
.btn:hover,
.action-btn:hover,
.control-btn:hover {
  transform: translateY(-2px);
  border-color: var(--se-coral) !important;
  color: var(--se-coral-ink) !important;
}

.btn-primary,
.submit-btn {
  color: #fff !important;
  border-color: var(--se-coral) !important;
  background: var(--se-coral) !important;
}

/* Collection cards and PDF wrappers */
.directory-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: clamp(32px, 5vw, 70px) clamp(18px, 4vw, 54px) 90px !important;
}

.content-header {
  margin-bottom: 24px !important;
  padding: 0 0 30px !important;
}

.content-header h1,
.page-header h1,
.ch-title {
  font-size: clamp(2.15rem, 5vw, 4.7rem) !important;
  line-height: 1 !important;
}

.dir-header {
  margin: 20px 0 10px !important;
  color: var(--se-faint) !important;
  font: 700 10px/1 var(--se-mono) !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.dir-row {
  min-height: 78px !important;
  margin: 9px 0 !important;
  padding: 13px 17px !important;
  box-shadow: none !important;
}

.dir-row:hover {
  transform: translateY(-3px) !important;
  border-color: var(--se-coral) !important;
  box-shadow: var(--se-shadow) !important;
}

.dir-num {
  color: var(--se-coral-ink) !important;
}

.dir-title {
  color: var(--se-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

.dir-arrow {
  color: var(--se-teal) !important;
}

.embed-area-wrapper,
.embed-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.embed-container {
  overflow: hidden !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-radius-lg) !important;
  background: var(--se-paper) !important;
  box-shadow: var(--se-shadow) !important;
}

.embed-container iframe,
iframe {
  border: 0 !important;
  background: var(--se-paper);
}

.action-buttons {
  gap: 9px !important;
}

/* Long-form guides, breakdowns, quizzes and mind maps */
.se201-content:not(.se201-shell) {
  min-height: 100vh;
}

.se201-content:not(.se201-shell)> :not(.se201-studio-bar):not(script):not(style):not(link) {
  position: relative;
}

.se201-content .container,
.se201-content .wrap,
.se201-content .quiz-container,
.se201-content main:not(.sys-main):not(.main-wrapper) {
  width: min(100% - 32px, 1040px) !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.se201-content .container,
.se201-content .wrap,
.se201-content .quiz-container {
  padding-top: clamp(34px, 6vw, 72px) !important;
  padding-bottom: 80px !important;
}

.se201-content header:not(.se201-studio-bar):not(.shoug-site-header) {
  background: transparent !important;
  border-color: var(--se-line) !important;
  color: var(--se-ink) !important;
  box-shadow: none !important;
}

.se201-content section,
.se201-content article {
  border-color: var(--se-line) !important;
  color: var(--se-ink) !important;
}

.se201-content nav:not(.se201-studio-nav) a,
.se201-content .toc a,
.se201-content .nav-link {
  color: var(--se-teal) !important;
}

.se201-content nav:not(.se201-studio-nav) a:hover,
.se201-content .toc a:hover {
  color: var(--se-coral-ink) !important;
}

.se201-content hr {
  border-color: var(--se-line) !important;
  background: var(--se-line) !important;
}

.se201-content .sg-theme-toggle,
.se201-content .theme-toggle,
.se201-content #themeToggle,
.se201-content #themeBtn {
  display: none !important;
}

.se201-content .card,
.se201-content .question,
.se201-content .quiz-card,
.se201-content .ps-card {
  padding: clamp(17px, 3vw, 28px) !important;
}

.option,
.answer-option,
.choice,
label.option {
  border: 1px solid var(--se-line) !important;
  border-radius: 12px !important;
  color: var(--se-muted) !important;
  background: var(--se-paper-2) !important;
}

.option:hover,
.answer-option:hover,
.choice:hover {
  color: var(--se-ink) !important;
  border-color: var(--se-teal) !important;
  background: var(--se-teal-soft) !important;
}

.correct {
  border-color: var(--se-success) !important;
  background: color-mix(in srgb, var(--se-success) 11%, var(--se-paper)) !important;
}

.incorrect,
.wrong {
  border-color: var(--se-danger) !important;
  background: color-mix(in srgb, var(--se-danger) 10%, var(--se-paper)) !important;
}

.highlight,
.key-point,
.clo-box,
.case-study,
.warning,
blockquote {
  border: 1px solid var(--se-line) !important;
  border-left: 4px solid var(--se-coral) !important;
  border-radius: 0 var(--se-radius) var(--se-radius) 0 !important;
  background: var(--se-paper) !important;
  color: var(--se-muted) !important;
  box-shadow: var(--se-shadow-sm) !important;
}

.toolbar,
.ps-head {
  color: var(--se-ink) !important;
  background: var(--se-paper) !important;
  border-color: var(--se-line) !important;
}

.slide-assistant-launch {
  border: 1px solid var(--se-line) !important;
  border-radius: 12px !important;
  color: var(--se-ink) !important;
  background: var(--se-paper) !important;
  box-shadow: var(--se-shadow-sm) !important;
}

.ps-card-head,
.ps-kicker,
.ps-num,
.leaf-dot,
.node-dot {
  color: var(--se-coral-ink) !important;
}

.ps-branch,
.ps-leaf,
.sr-item {
  border-color: var(--se-line) !important;
  background: var(--se-paper-2) !important;
  color: var(--se-muted) !important;
}

.ps-branch::before,
.ps-leaf::before,
.ps-leaf::after {
  border-color: var(--se-line-strong) !important;
}

table {
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-radius) !important;
  background: var(--se-paper) !important;
}

th {
  color: var(--se-ink) !important;
  background: var(--se-paper-2) !important;
}

th,
td {
  border-color: var(--se-line) !important;
}

pre {
  overflow: auto;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-radius) !important;
  color: var(--se-ink) !important;
  background: var(--se-paper-2) !important;
}

/* Motion: calm and purposeful, with an accessible opt-out. */
@keyframes se201-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.se201-ready .course-header,
.se201-ready .content-header,
.se201-ready .page-header,
.se201-ready .directory-container>*,
.se201-ready .primary-content>*,
.se201-ready .container>*,
.se201-ready .quiz-container>* {
  animation: se201-rise .55s cubic-bezier(.2, .7, .2, 1) both;
}

.se201-ready .directory-container>*:nth-child(2),
.se201-ready .primary-content>*:nth-child(2),
.se201-ready .container>*:nth-child(2) {
  animation-delay: .05s;
}

.se201-ready .directory-container>*:nth-child(3),
.se201-ready .primary-content>*:nth-child(3),
.se201-ready .container>*:nth-child(3) {
  animation-delay: .1s;
}

@media (max-width: 900px) {
  .se201-studio-nav a:nth-child(-n+2) {
    display: none;
  }

  .se201-shell .sidebar,
  .se201-shell .academic-sidebar {
    display: none !important;
  }

  .page-container {
    padding: 34px 18px 70px !important;
  }

  .grid-data-blocks {
    grid-template-columns: 1fr !important;
  }

  .meta-panel-container {
    width: 100% !important;
    max-width: none !important;
  }

  .primary-content {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 560px) {
  .se201-studio-bar {
    gap: 10px;
    min-height: 58px;
    padding: 8px 12px;
  }

  .se201-studio-brand span:last-child {
    display: none;
  }

  .se201-studio-nav {
    gap: 2px;
  }

  .se201-studio-nav a {
    padding: 8px;
    font-size: 11px;
  }

  .se201-theme-toggle {
    width: 38px;
    height: 38px;
  }

  .top-bar,
  .content-topbar {
    top: 58px !important;
  }

  .course-code {
    font-size: clamp(3.8rem, 23vw, 6rem) !important;
  }

  .sub-nav,
  .content-tabs,
  .nav-strip {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ========================================================================
   Contextual edition — page type controls density; chapter controls color.
   ======================================================================== */
.se201-content {
  --topic: #176b87;
  --topic-rgb: 23, 107, 135;
  --topic-2: #e06a47;
  --topic-soft: rgba(var(--topic-rgb), .11);
  --content-max: 1440px;
  --content-gutter: clamp(14px, 3.5vw, 64px);
}

.se201-topic-ethics {
  --topic: #7456a5;
  --topic-rgb: 116, 86, 165;
  --topic-2: #c69132;
}

.se201-topic-process {
  --topic: #1676a3;
  --topic-rgb: 22, 118, 163;
  --topic-2: #44a9b1;
}

.se201-topic-agile {
  --topic: #25805f;
  --topic-rgb: 37, 128, 95;
  --topic-2: #87a92f;
}

.se201-topic-management {
  --topic: #a65a19;
  --topic-rgb: 166, 90, 25;
  --topic-2: #d09a24;
}

.se201-topic-modeling {
  --topic: #8b4a86;
  --topic-rgb: 139, 74, 134;
  --topic-2: #3d78a6;
}

.se201-topic-requirements {
  --topic: #a34269;
  --topic-rgb: 163, 66, 105;
  --topic-2: #5974a5;
}

.se201-topic-design {
  --topic: #21778a;
  --topic-rgb: 33, 119, 138;
  --topic-2: #5269b0;
}

.se201-topic-construction {
  --topic: #c45b2e;
  --topic-rgb: 196, 91, 46;
  --topic-2: #267b85;
}

.se201-topic-testing {
  --topic: #b64149;
  --topic-rgb: 182, 65, 73;
  --topic-2: #567292;
}

html[data-theme="dark"] .se201-content {
  --topic-soft: rgba(var(--topic-rgb), .19);
}

.se201-content,
.se201-content.shoug-light-mode,
.se201-content.shoug-dark-mode {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  background-image:
    radial-gradient(circle at 0 0, var(--topic-soft), transparent min(46vw, 760px)),
    radial-gradient(circle at 100% 35%, color-mix(in srgb, var(--topic-2) 7%, transparent), transparent 36vw) !important;
  background-size: auto !important;
}

/* Compact contextual bar leaves the workspace to the material. */
.se201-content .se201-studio-bar {
  position: sticky !important;
  top: 0 !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 6px var(--content-gutter) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--topic) 20%, var(--se-line)) !important;
  background: color-mix(in srgb, var(--se-paper) 91%, transparent) !important;
}

.se201-content .se201-studio-brand {
  gap: 10px;
  font-size: 13px;
  line-height: 1.1;
}

.se201-content .se201-studio-brand small {
  margin: 0 0 3px;
  color: var(--topic);
  font-size: 8px;
}

.se201-content .se201-studio-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, var(--topic), var(--topic-2));
  box-shadow: none;
  font: 800 11px/1 var(--se-mono);
}

.se201-content .se201-studio-mark::before,
.se201-content .se201-studio-mark::after {
  display: none;
}

.se201-content .se201-studio-nav a {
  padding: 7px 10px;
  font-size: 11px;
}

.se201-content .se201-studio-nav a:hover {
  color: var(--topic) !important;
  background: var(--topic-soft) !important;
}

.se201-content .se201-theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.se201-content .se201-studio-bar .sg-page-search {
  flex: 0 1 290px !important;
  width: min(290px, 24vw) !important;
  min-width: 0 !important;
}

/* Remove old floating controls; one dependable toggle remains in the bar. */
.se201-content .sg-theme-toggle,
.se201-content .theme-toggle,
.se201-content #themeToggle,
.se201-content #themeBtn,
.se201-content [onclick="toggleTheme()"] {
  display: none !important;
}

/* Shared semantic recoloring removes the previous page palettes. */
.se201-content a:not(.se201-studio-brand):not(.se201-studio-nav a) {
  color: var(--topic) !important;
}

.se201-content h1,
.se201-content h2,
.se201-content h3,
.se201-content h4 {
  color: var(--se-ink) !important;
}

.se201-content h1,
.se201-content h2 {
  text-shadow: none !important;
}

.se201-content h2::before,
.se201-content .section h2::before {
  color: var(--topic) !important;
}

.se201-content .highlight,
.se201-content .key-point,
.se201-content .definition-box,
.se201-content .highlight-box,
.se201-content .info-box,
.se201-content .tip,
.se201-content .example,
.se201-content .formula,
.se201-content .critical,
.se201-content .scenario,
.se201-content .exam-example {
  border-color: color-mix(in srgb, var(--topic) 32%, var(--se-line)) !important;
  border-left-color: var(--topic) !important;
  background: var(--topic-soft) !important;
}

.se201-content .card-icon,
.se201-content .chapter-number,
.se201-content .question-number,
.se201-content .diagram-icon,
.se201-content .symbol-name {
  color: var(--topic) !important;
}

/* Slide breakdown: spacious editorial columns on wide screens. */
.se201-breakdown {
  --content-max: 1480px;
}

.se201-breakdown>.container,
.se201-breakdown>main,
.se201-breakdown>.content,
.se201-breakdown .container {
  width: min(calc(100% - (2 * var(--content-gutter))), var(--content-max)) !important;
  max-width: var(--content-max) !important;
  padding: clamp(30px, 4vw, 64px) 0 90px !important;
}

.se201-breakdown .header,
.se201-breakdown header:not(.se201-studio-bar) {
  min-height: 260px !important;
  display: grid !important;
  align-content: center !important;
  padding: clamp(34px, 6vw, 86px) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: clamp(20px, 3vw, 36px) !important;
  background: linear-gradient(135deg, var(--topic-soft), var(--se-paper) 62%) !important;
}

.se201-breakdown h1 {
  max-width: 1050px;
  font-size: clamp(2.4rem, 5vw, 5.8rem) !important;
  line-height: .98 !important;
}

.se201-breakdown .toc {
  margin: 24px 0 !important;
  padding: 18px clamp(18px, 3vw, 34px) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: 18px !important;
  background: var(--se-paper) !important;
}

.se201-breakdown .section {
  margin-block: clamp(18px, 3vw, 34px) !important;
  padding: clamp(24px, 4vw, 54px) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: 24px !important;
  background: var(--se-paper) !important;
  box-shadow: var(--se-shadow-sm) !important;
}

.se201-breakdown .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  gap: 16px !important;
}

.se201-breakdown .card {
  height: 100%;
  box-shadow: none !important;
  border-top: 4px solid var(--topic) !important;
}

.se201-breakdown .two-column {
  gap: clamp(18px, 3vw, 36px) !important;
}

/* Exams: quiet, narrower reading measure and strong interaction hierarchy. */
.se201-exam {
  --content-max: 1180px;
}

.se201-exam .container,
.se201-exam .quiz-container,
.se201-exam .wrap {
  width: min(calc(100% - (2 * var(--content-gutter))), var(--content-max)) !important;
  max-width: var(--content-max) !important;
  padding: clamp(28px, 4vw, 54px) 0 90px !important;
}

.se201-exam .header,
.se201-exam header:not(.se201-studio-bar) {
  padding: clamp(28px, 5vw, 60px) !important;
  border-radius: 26px !important;
  background: linear-gradient(125deg, var(--topic), color-mix(in srgb, var(--topic) 55%, #101820)) !important;
}

.se201-exam .header *,
.se201-exam header:not(.se201-studio-bar) * {
  color: #fff !important;
}

.se201-exam .question-block,
.se201-exam .question,
.se201-exam .quiz-card {
  margin: 18px 0 !important;
  padding: clamp(22px, 4vw, 42px) !important;
  border-radius: 22px !important;
  box-shadow: var(--se-shadow-sm) !important;
}

.se201-exam .question-header {
  border-color: var(--se-line) !important;
}

.se201-exam .option,
.se201-exam .answer-option,
.se201-exam .choice {
  min-height: 52px;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.se201-exam .exam-content,
.se201-exam .question-block,
.se201-exam .question,
.se201-exam .options,
.se201-exam .option,
.se201-exam .answer-option {
  max-width: 100% !important;
  min-width: 0 !important;
}

.se201-exam .option:hover,
.se201-exam .answer-option:hover {
  border-color: var(--topic) !important;
  background: var(--topic-soft) !important;
  transform: translateX(4px);
}

.se201-exam .submit-btn {
  min-height: 52px;
  padding-inline: 26px !important;
  border: 0 !important;
  background: var(--topic) !important;
}

/* Mind maps: use nearly the whole viewport and emphasize connected systems. */
.se201-mindmap {
  --content-max: 1720px;
}

.se201-mindmap {
  --accent: var(--topic) !important;
  --accent2: var(--topic-2) !important;
  --node-root: color-mix(in srgb, var(--topic) 18%, var(--se-paper)) !important;
  --node-root-border: var(--topic) !important;
  --node-l1: color-mix(in srgb, var(--topic) 11%, var(--se-paper)) !important;
  --node-l1-border: color-mix(in srgb, var(--topic) 78%, var(--se-line)) !important;
  --node-l2: color-mix(in srgb, var(--topic-2) 12%, var(--se-paper)) !important;
  --node-l2-border: var(--topic-2) !important;
  --node-l3: var(--se-paper-2) !important;
  --node-l3-border: var(--se-line-strong) !important;
  --node-selected: color-mix(in srgb, var(--topic) 22%, var(--se-paper)) !important;
  --node-selected-border: var(--topic) !important;
  --connector: color-mix(in srgb, var(--topic) 25%, var(--se-line)) !important;
}

.se201-mindmap .ps-head {
  width: min(calc(100% - (2 * var(--content-gutter))), var(--content-max)) !important;
  max-width: none !important;
  margin: clamp(24px, 3vw, 48px) auto 18px !important;
  padding: clamp(24px, 3vw, 44px) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, var(--topic-soft), var(--se-paper)) !important;
}

.se201-mindmap .ps-grid,
.se201-mindmap .ps-group,
.se201-mindmap main {
  width: min(calc(100% - (2 * var(--content-gutter))), var(--content-max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

.se201-mindmap .ps-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: clamp(14px, 2vw, 26px) !important;
}

.se201-mindmap .ps-card {
  border-top: 4px solid var(--topic) !important;
  box-shadow: var(--se-shadow-sm) !important;
}

.se201-mindmap .ps-num {
  color: var(--topic) !important;
  background: var(--topic-soft) !important;
}

.se201-mindmap .leaf-dot {
  background: var(--topic) !important;
}

/* Cheat sheets and diagram references: dense multi-column desktop canvas. */
.se201-reference {
  --content-max: 1680px;
}

.se201-reference .container,
.se201-reference .wrap,
.se201-reference main {
  width: min(calc(100% - (2 * var(--content-gutter))), var(--content-max)) !important;
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
  padding: clamp(24px, 3vw, 48px) 0 80px !important;
}

.se201-reference .content {
  gap: clamp(14px, 2vw, 28px) !important;
}

.se201-reference .menu {
  position: sticky !important;
  top: 76px !important;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow: auto;
  border-radius: 18px !important;
  background: var(--se-paper) !important;
}

.se201-reference .section,
.se201-reference .diagram-section {
  padding: clamp(22px, 3vw, 42px) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: 22px !important;
  background: var(--se-paper) !important;
}

.se201-reference .symbols-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
}

.se201-reference .symbol-card {
  border-color: var(--se-line) !important;
  border-radius: 16px !important;
  background: var(--se-paper-2) !important;
}

.se201-reference table {
  width: 100% !important;
}

@media (min-width: 1500px) {

  .se201-breakdown .section:has(.card-grid),
  .se201-breakdown .section:has(.two-column) {
    padding-inline: 64px !important;
  }

  .se201-exam .exam-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  .se201-exam .submit-section,
  .se201-exam .results {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .se201-content {
    --content-gutter: clamp(12px, 3vw, 24px);
  }

  .se201-content .se201-studio-nav a:first-child {
    display: none;
  }

  .se201-breakdown .header,
  .se201-breakdown header:not(.se201-studio-bar) {
    min-height: 210px !important;
    padding: 34px !important;
  }

  .se201-reference .content {
    display: block !important;
  }

  .se201-reference .menu {
    position: static !important;
    display: flex !important;
    overflow-x: auto !important;
    max-height: none;
    margin-bottom: 16px;
  }

  .se201-reference .menu-item {
    flex: 0 0 auto;
  }
}

@media (max-width: 600px) {
  .se201-content .se201-studio-bar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 5px 10px !important;
  }

  .se201-content .se201-studio-mark {
    width: 32px;
    height: 32px;
  }

  .se201-content .se201-studio-brand {
    max-width: calc(100vw - 150px);
  }

  .se201-content .se201-studio-brand>span:last-child {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .se201-content .se201-studio-nav a {
    display: none !important;
  }

  .se201-content .se201-studio-nav a:last-child {
    display: block !important;
  }

  .se201-content .se201-studio-bar .sg-page-search {
    display: none !important;
  }

  .se201-breakdown .header,
  .se201-breakdown header:not(.se201-studio-bar) {
    min-height: 170px !important;
    padding: 24px !important;
    border-radius: 20px !important;
  }

  .se201-breakdown h1 {
    font-size: clamp(2rem, 11vw, 3.4rem) !important;
  }

  .se201-breakdown .section,
  .se201-reference .section,
  .se201-reference .diagram-section {
    padding: 20px !important;
    border-radius: 18px !important;
  }

  .se201-exam .question-block,
  .se201-exam .question,
  .se201-exam .quiz-card {
    padding: 19px !important;
    border-radius: 18px !important;
  }

  .se201-mindmap .ps-grid {
    grid-template-columns: 1fr !important;
  }
}