:root {
   --ink: #211322;
   --ink-soft: #352038;
   --paper: #f8f1e8;
   --paper-deep: #eaded1;
   --white: #fffaf5;
   --muted: #746471;
   --line: rgba(33, 19, 34, 0.15);
   --line-light: rgba(255, 255, 255, 0.17);
   --accent: #ff775c;
   --accent-dark: #a43829;
   --accent-soft: #ffd9cf;
   --sage: #547a68;
   --sage-soft: #dce9e1;
   --gold: #a66d17;
   --gold-soft: #f4e3bf;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
   margin: 0;
   background: var(--paper);
   color: var(--ink);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.lab-nav {
   min-height: 84px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
   padding: 0 clamp(1.25rem, 5vw, 5rem);
   background: var(--ink);
   color: var(--white);
   border-bottom: 1px solid var(--line-light);
}

.lab-brand { font: 700 1.7rem/1 Georgia, "Times New Roman", serif; letter-spacing: -.08em; }
.lab-brand span { color: var(--accent); }

.lab-nav-meta {
   display: flex;
   gap: clamp(1rem, 4vw, 3rem);
   align-items: center;
   color: #cbbcc8;
   font-size: .72rem;
   font-weight: 750;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.lab-nav-meta a { padding-bottom: .25rem; border-bottom: 1px solid var(--accent); color: var(--white); }

.lab-hero {
   min-height: 620px;
   display: grid;
   align-content: center;
   grid-template-columns: minmax(0, 1.2fr) minmax(280px, .6fr);
   column-gap: clamp(3rem, 10vw, 10rem);
   padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem);
   background:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
      radial-gradient(circle at 76% 44%, rgba(255,119,92,.17), transparent 28%),
      var(--ink);
   background-size: 72px 72px, 72px 72px, auto, auto;
   color: var(--white);
}

.eyebrow {
   grid-column: 1 / -1;
   margin: 0 0 1.4rem;
   color: var(--accent);
   font-size: .7rem;
   font-weight: 850;
   letter-spacing: .17em;
   text-transform: uppercase;
}

.lab-hero h1 {
   margin: 0;
   font: 400 clamp(4.2rem, 8vw, 8.2rem)/.86 Georgia, "Times New Roman", serif;
   letter-spacing: -.065em;
}

.lab-hero h1 em { color: var(--accent); font-weight: 400; }
.hero-aside { align-self: end; }
.hero-aside > p { max-width: 500px; margin: 0 0 2rem; color: #d1c4ce; font-size: 1.03rem; line-height: 1.75; }
.hero-tech { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light); }
.hero-tech span { padding: .45rem .65rem; border: 1px solid var(--line-light); color: #cbbcc8; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

#bodyBlock {
   max-width: 1200px;
   margin: 0 auto;
   padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem);
}

#progressTracker {
   margin-bottom: 1px;
   padding: clamp(1.5rem, 3vw, 2.4rem);
   background: var(--ink-soft);
   color: var(--white);
}

#progressTracker h2 { margin: 0 0 1.5rem; font: 400 2rem/1 Georgia, "Times New Roman", serif; }

.progress-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-light); }

.progress-item {
   min-height: 120px;
   display: grid;
   grid-template-columns: auto 1fr;
   align-content: space-between;
   gap: .45rem 1rem;
   padding: 1rem;
   background: var(--ink-soft);
   transition: background 180ms ease;
}

.progress-item.completed { background: #344b40; }
.progress-number { color: var(--accent); font: 400 1.8rem/1 Georgia, "Times New Roman", serif; }
.progress-text { align-self: center; color: #d7ccd4; font-size: .68rem; line-height: 1.35; }
.progress-status { grid-column: 1 / -1; font-size: .95rem; }

#helpSection {
   margin-bottom: 2.5rem;
   padding: 1.25rem;
   border: 1px solid var(--line);
   background: var(--white);
}

#toggleHelp,
button {
   border: 0;
   border-radius: 0;
   background: var(--accent);
   color: var(--ink);
   cursor: pointer;
   font: 800 .74rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
   padding: .9rem 1.1rem;
   transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}

button:hover { transform: translateY(-2px); background: #ff947d; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(255,119,92,.35); outline-offset: 3px; }

#helpContent { margin-top: 1.25rem; padding: 1.5rem; background: var(--paper); border-left: 3px solid var(--accent); }
#helpContent h3 { margin-top: 0; font: 400 1.6rem/1.1 Georgia, "Times New Roman", serif; }
#helpContent ul { padding-left: 1.25rem; }
#helpContent li { margin: .45rem 0; }

code {
   padding: .16rem .34rem;
   background: var(--paper-deep);
   color: var(--accent-dark);
   font: 600 .86em/1.5 "SFMono-Regular", Consolas, monospace;
}

.problem-section {
   position: relative;
   margin-bottom: 1.25rem;
   padding: clamp(1.4rem, 3vw, 2.5rem);
   border: 1px solid var(--line);
   background: var(--white);
   transition: border-color 180ms ease, box-shadow 180ms ease;
}

.problem-section:hover { border-color: rgba(164,56,41,.45); box-shadow: 0 18px 40px rgba(33,19,34,.07); }
.problem-section.completed { border-left: 5px solid var(--sage); background: #f8fbf9; }
.problem-section.bonus { border-top: 5px solid var(--accent); background: #fff8f3; }

.problem-section > h2 {
   margin: 0 0 1.6rem;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: .55rem;
   font: 400 clamp(1.55rem, 3vw, 2.3rem)/1.1 Georgia, "Times New Roman", serif;
   letter-spacing: -.025em;
}

.difficulty,
.time-estimate {
   padding: .38rem .55rem;
   font: 850 .6rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.difficulty.beginner { background: var(--sage-soft); color: var(--sage); }
.difficulty.intermediate { background: var(--gold-soft); color: var(--gold); }
.difficulty.advanced { background: var(--accent-soft); color: var(--accent-dark); }
.time-estimate { background: var(--ink); color: var(--white); }

.problem-description { margin-bottom: 1.4rem; padding: 1.4rem; border-left: 3px solid var(--accent); background: var(--paper); }
.problem-description p:first-child { margin-top: 0; }
.problem-description ul { padding-left: 1.25rem; }
.problem-description li { margin: .4rem 0; }

.explanation-box { margin: 1.2rem 0; padding: 1.25rem; border: 1px solid #dcb663; background: var(--gold-soft); }
.explanation-box h4 { margin: 0 0 .65rem; color: #7b4c08; }

.check-work { margin-top: 1rem; background: var(--ink); color: var(--white); }
.check-work:hover { background: var(--ink-soft); }

#nameHeading {
   margin: 1.4rem 0;
   padding: clamp(1.5rem, 4vw, 2.6rem);
   background: var(--ink-soft);
   color: var(--white);
   cursor: pointer;
   font: 400 clamp(1.8rem, 4vw, 3.2rem)/1 Georgia, "Times New Roman", serif;
   text-align: center;
}

.myName { color: var(--accent); font-style: italic; font-weight: 400; }

#showHideBlock { margin: 1.2rem 0; padding: 1.4rem; border: 1px solid var(--line); background: var(--paper); }
#showHideLinks { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.2rem; }
#showHideLinks a { padding: .58rem .75rem; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: .72rem; font-weight: 800; }
#showHideLinks a:hover { border-color: var(--accent); color: var(--accent-dark); }
#toggleText { order: 3; margin-left: auto; background: var(--accent-soft) !important; }
#textContent p { line-height: 1.75; }

#labList { margin: 1.2rem 0; padding: 0; list-style: none; }
#labList li { position: relative; margin-bottom: 1px; padding: 1rem 3rem 1rem 1rem; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: background 160ms ease, padding 160ms ease; }
#labList li:hover { padding-left: 1.4rem; background: var(--accent-soft); }
#labList li::after { content: "↗"; position: absolute; right: 1rem; color: var(--accent-dark); }
#labList li.red { border-color: #c34a55; background: #f8dadd; color: #8e2630; font-weight: 750; }

#formChallenge { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 2rem; }
#userInput { min-width: 220px; flex: 1; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; padding: .85rem 1rem; }
#userInput:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(255,119,92,.14); }

#imageGallery { margin: 1rem 0 2rem; padding: 1rem; background: var(--ink-soft); text-align: center; }
#galleryImage { width: 100%; max-width: 620px; height: 300px; object-fit: cover; border: 1px solid var(--line-light); }
#imageControls { margin-top: .75rem; }

#accordion { margin-top: 1rem; }
.accordion-item { margin-bottom: 1px; border: 1px solid var(--line); }
.accordion-header { margin: 0; padding: 1rem 1.2rem; background: var(--ink-soft); color: var(--white); cursor: pointer; font-size: .9rem; transition: background 160ms ease; }
.accordion-header:hover { background: #4a2a4c; }
.accordion-content { display: none; padding: 1.25rem; background: var(--white); }
.accordion-content.active { display: block; }

#consoleOutput {
   min-height: 140px;
   max-height: 320px;
   overflow-y: auto;
   margin-top: 2rem;
   padding: 1.4rem;
   background: #160d17;
   color: #f2e9ef;
   font-family: "SFMono-Regular", Consolas, monospace;
}

#consoleOutput h3 { margin: 0 0 1rem; display: flex; justify-content: space-between; align-items: center; color: var(--white); font-family: inherit; font-size: .85rem; }
#clearConsole { padding: .55rem .7rem; background: var(--accent); }
#consoleContent { font-size: .76rem; line-height: 1.5; }
.console-message { padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.console-success { color: #8fd0ab; }
.console-error { color: #ff8b96; }
.console-info { color: #f4be78; }

.modal { display: none; position: fixed; z-index: 1000; inset: 0; padding: 1rem; background: rgba(25,12,26,.72); }
.modal-content { position: relative; max-width: 500px; margin: 15vh auto 0; padding: 2.5rem; background: var(--white); border-top: 5px solid var(--accent); text-align: center; animation: slideIn .25s ease; }
.modal-content h2 { font: 400 2rem/1.1 Georgia, "Times New Roman", serif; }
.close { position: absolute; right: 1rem; top: .65rem; color: var(--muted); cursor: pointer; font-size: 1.8rem; }
.close:hover { color: var(--ink); }

.lab-footer {
   min-height: 120px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 2rem;
   padding: 2rem clamp(1.25rem, 5vw, 5rem);
   background: var(--ink);
   color: #bcaeba;
   font-size: .72rem;
   letter-spacing: .07em;
}

@keyframes slideIn {
   from { transform: translateY(-20px); opacity: 0; }
   to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 900px) {
   .lab-hero { grid-template-columns: 1fr; }
   .hero-aside { margin-top: 2.5rem; }
   .progress-container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
   .lab-nav-meta > span { display: none; }
   .progress-container { grid-template-columns: 1fr; }
   .progress-item { min-height: 95px; }
   .problem-section > h2 { align-items: flex-start; flex-direction: column; }
   #showHideLinks { flex-direction: column; }
   #toggleText { margin-left: 0; order: 0; }
   #formChallenge { flex-direction: column; }
   #galleryImage { height: 210px; }
   .lab-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}