.terminal-workshop[data-terminal-workshop="algoritmos"] {
  --orange: #125d50;
  --orange-hover: #09483d;
  --orange-pale: #dcf0e7;
  --terminal: #102d29;
  --terminal-chrome: #173e36;
  --terminal-line: #4e786d;
  --terminal-tint: #c9e8dc;
  --terminal-highlight: #9be6ce;
  --terminal-badge: #b4ebd7;
  --terminal-result: #e1f2e9;
  --module-glow: #cee9da;
  --module-dots: #749c8a;
  --module-panel: #e7f2ea;
  --module-panel-border: #a6cabb;
}

.terminal-workshop[data-terminal-workshop="python"] {
  --orange: #20548b;
  --orange-hover: #193f68;
  --orange-pale: #e0ebfa;
  --terminal: #14243c;
  --terminal-chrome: #203751;
  --terminal-line: #536f91;
  --terminal-tint: #d0e0f4;
  --terminal-highlight: #ffe19b;
  --terminal-badge: #ffdf90;
  --terminal-result: #fff2d0;
  --module-glow: #d9e5f7;
  --module-dots: #8a9fbf;
  --module-panel: #eaf0f9;
  --module-panel-border: #afc2df;
}

.terminal-workshop[data-terminal-workshop="cpp"] {
  --orange: #3a448a;
  --orange-hover: #292e63;
  --orange-pale: #e7e6fa;
  --terminal: #202440;
  --terminal-chrome: #31375b;
  --terminal-line: #646d9f;
  --terminal-tint: #dfdfff;
  --terminal-highlight: #f8d78f;
  --terminal-badge: #f8d78f;
  --terminal-result: #f1eaff;
  --module-glow: #e3def8;
  --module-dots: #9588af;
  --module-panel: #efebfb;
  --module-panel-border: #b9afd9;
}

.terminal-workshop ::selection {
  color: var(--ink-deep);
  background: var(--orange-pale);
}

.terminal-workshop .nav-links {
  gap: .3rem clamp(.65rem, 1.6vw, 1.4rem);
}

.terminal-workshop .nav-links a[aria-current="page"] {
  color: var(--orange-hover);
  text-decoration: underline;
  text-underline-offset: .25em;
}

.terminal-workshop .hero {
  background:
    radial-gradient(ellipse at 79% 43%, var(--module-glow) 0, transparent 53%),
    linear-gradient(115deg, #fbf8f0, var(--page) 62%);
}

.terminal-workshop .hero::before {
  background-image: radial-gradient(var(--module-dots) 1px, transparent 1px);
}

.terminal-workshop .hero h1 {
  max-width: 14ch;
}

.terminal-code-window {
  margin: 0;
  border-color: var(--terminal-line);
}

.terminal-code-window .window-bar {
  border-color: var(--terminal-line);
  color: var(--terminal-tint);
}

.terminal-code-window .window-language {
  padding: .19rem .4rem;
  border-radius: .25rem;
  color: var(--terminal);
  background: var(--terminal-badge);
  font-weight: 750;
}

.terminal-code-window .code-preview .line-no {
  color: var(--terminal-tint);
}

.terminal-code-window .tok-command {
  color: var(--terminal-highlight);
  font-weight: 750;
}

.terminal-code-window .tok-op,
.terminal-code-window .tok-value {
  color: var(--terminal-tint);
}

.terminal-demo {
  display: grid;
  gap: .5rem;
  border-top: 1px solid var(--terminal-line);
  padding: .8rem 1rem 1rem;
  background: var(--terminal-chrome);
}

.terminal-demo-label {
  color: var(--terminal-tint);
  font: 650 .68rem/1.4 var(--mono);
  letter-spacing: .07em;
}

.terminal-demo-result {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .85rem;
  border-radius: .6rem;
  color: var(--terminal);
  background: var(--terminal-result);
}

.terminal-demo-result code {
  display: grid;
  place-items: center;
  width: 2.4rem;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border-radius: .45rem;
  background: var(--terminal-badge);
  font-size: 1.2rem;
  font-weight: 750;
}

.terminal-demo-result strong,
.terminal-demo-result small {
  display: block;
}

.terminal-project {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  border: 1px solid var(--module-panel-border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--module-panel);
}

.terminal-project > div {
  flex: 1 1 30rem;
}

.terminal-project h2 {
  margin-block: .45rem .7rem;
  color: var(--ink-deep);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -.045em;
}

.terminal-project p {
  max-width: 64ch;
  color: var(--muted);
}

.terminal-project a,
.terminal-workshop #referencias a {
  color: var(--orange-hover);
  font-weight: 700;
}

.terminal-workshop .editor {
  border-color: var(--terminal-line);
  tab-size: 4;
}

.program-input-panel,
.program-output-panel {
  display: grid;
  gap: .35rem;
}

#program-input,
#program-output {
  width: 100%;
  border: 1px solid var(--terminal-line);
  border-radius: .48rem;
  padding: .65rem .75rem;
  font: 500 .81rem/1.5 var(--mono);
}

#program-input {
  min-height: 3.65rem;
  resize: vertical;
  color: var(--ink-deep);
  background: var(--paper);
}

#program-output {
  min-height: 3rem;
  max-height: 13rem;
  overflow: auto;
  color: var(--terminal-tint);
  background: var(--terminal);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 54rem) {
  html:has(.terminal-workshop) {
    scroll-padding-top: 9rem;
  }

  .terminal-workshop .header-inner {
    flex-wrap: wrap;
    gap: .25rem .75rem;
    padding-block: .55rem;
  }

  .terminal-workshop .nav-links {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 0 .85rem;
  }

  .terminal-workshop .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
  }
}

.terminal-workshop[data-terminal-workshop="sql"] {
  --orange: #864521;
  --orange-hover: #673316;
  --orange-pale: #f8e8d6;
  --terminal: #37261f;
  --terminal-chrome: #4d352b;
  --terminal-line: #96705b;
  --terminal-tint: #fbe7d2;
  --terminal-highlight: #ffd69a;
  --terminal-badge: #f5ca8b;
  --terminal-result: #ffefd8;
  --module-glow: #f5debd;
  --module-dots: #ab896e;
  --module-panel: #f9eedc;
  --module-panel-border: #d5b99c;
}

#sql-results {
  overflow: auto;
  max-height: 20rem;
  border: 1px solid var(--module-panel-border);
  border-radius: .48rem;
}

#sql-results table {
  width: 100%;
  border-collapse: collapse;
  font: 500 .81rem/1.5 var(--mono);
}

#sql-results :is(th, td) {
  padding: .42rem .65rem;
  border-bottom: 1px solid var(--module-panel-border);
  text-align: start;
  overflow-wrap: anywhere;
}

#sql-results th {
  position: sticky;
  top: 0;
  color: var(--terminal);
  background: var(--terminal-result);
}

#sql-results td[data-null] {
  color: var(--muted);
  font-style: italic;
}