:root {
  color-scheme: dark;
  --canvas: #11141a;
  --surface: #171b22;
  --panel: #1d222b;
  --raised: #252b36;
  --line: #343c49;
  --control-line: #6d7d95;
  --ink: #e5eaf1;
  --muted: #a3adbc;
  --mint: #91cbb3;
  --violet: #b5acf0;
  --warning: #edb59a;
  --sans: "Segoe UI","Aptos",system-ui,sans-serif;
  --mono: "Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 30px;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
}

a {
  color: inherit;
  text-underline-offset: 4px;
}

button, input {
  font: inherit;
}

button {
  cursor: pointer;
}

button, a, input, summary {
  touch-action: manipulation;
}

button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

button {
  color: inherit;
}

::selection {
  background: #405349;
  color: #fff;
}

[hidden] {
  display: none!important;
}

code, kbd {
  font-family: var(--mono);
}

kbd {
  font-size: inherit;
  font-weight: 400;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 8px 16px;
  z-index: 10;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--canvas);
}

.skip-link:focus {
  transform: translateY(0);
}

.workspace {
  display: flex;
  flex-direction: column;
  max-width: 1380px;
  width: 100%;
  height: calc(100dvh - 60px);
  min-height: 550px;
  margin: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 61px;
  padding: 0 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}

.brand svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--mint);
  stroke-width: 1.6;
  flex-shrink: 0;
}

.brand-slash {
  color: #758294;
  font-weight: 400;
  margin: 0 3px;
}

.brand-type {
  font: 12px var(--mono);
  color: var(--muted);
}

.help-control {
  border: 0;
  padding: 7px 0 7px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.help-control kbd {
  color: var(--ink);
  border: 1px solid #566276;
  border-radius: 4px;
  padding: 3px 8px;
  margin-left: 9px;
  font-size: 11px;
}

.help-control:hover {
  color: var(--ink);
}

.workspace-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 234px minmax(0,1fr);
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 27px 14px 22px;
  background: #191e26;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.sidebar-identity {
  padding: 0 12px 23px;
}

.sidebar-identity strong {
  font-size: 15px;
  font-weight: 600;
}

.sidebar-identity p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
  margin: 7px 0 0;
  max-width: 170px;
}

.navigation summary {
  display: none;
}

.navigation-title {
  font-size: 12px;
  color: var(--muted);
  margin: 0 12px 9px;
}

.navigation a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 9px 12px;
  margin: 2px 0;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  color: #c4ccda;
}

.navigation a span {
  font: 11px var(--mono);
  color: #8795a9;
}

.navigation a:hover {
  background: var(--raised);
  color: var(--ink);
}

.navigation a[aria-current="page"] {
  background: #29313d;
  color: var(--ink);
}

.navigation a[aria-current="page"] span {
  color: var(--mint);
}

.sidebar-foot {
  margin-top: auto;
  padding: 40px 12px 0;
  font-size: 12px;
  color: var(--muted);
}

.sidebar-foot strong {
  font-weight: 500;
  color: #c9d0dc;
}

.sidebar-foot p {
  margin: 5px 0 14px;
  line-height: 1.6;
}

.sidebar-foot a {
  color: var(--mint);
  font-size: 12px;
  text-decoration: none;
}

.terminal {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.terminal:focus {
  outline-offset: -3px;
}

.terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 43px;
  background: #151920;
  border-bottom: 1px solid var(--line);
  font: 11px var(--mono);
  color: var(--muted);
}

.terminal-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  padding: 12px 24px;
  background: var(--surface);
  color: var(--ink);
  border-top: 2px solid var(--mint);
  border-right: 1px solid var(--line);
}

.terminal-tab>span {
  color: var(--mint);
}

#terminal-path {
  padding: 0 24px;
  overflow-wrap: anywhere;
}

.terminal-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 32px 42px 44px;
  scrollbar-color: #566276 var(--surface);
  scrollbar-width: thin;
}

.terminal-scroll:focus-visible {
  outline-offset: -3px;
}

.command-echo {
  font: 13px/1.6 var(--mono);
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--muted);
  margin: 0 0 27px;
  overflow-wrap: anywhere;
}

.command-echo>span:first-child {
  color: var(--mint);
}

.command-echo code {
  color: var(--ink);
  min-width: 0;
}

.result {
  max-width: 900px;
}

h1, h2, h3, p {
  overflow-wrap: anywhere;
}

h1 {
  font-size: clamp(26px,2.5vw,36px);
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 0 0 22px;
}

h1:focus {
  outline: none;
}

h1:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 7px;
}

h2 {
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -.015em;
  font-weight: 600;
  margin: 0 0 9px;
}

.welcome h1 {
  font-size: clamp(31px,3vw,44px);
  line-height: 1.18;
  margin: 0 0 15px;
}

.professional-role {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mint);
  margin: 0 0 22px;
}

.introduction {
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.75;
  color: #c7cfda;
  margin: 0 0 22px;
}

.welcome-guide {
  font-size: 14px;
  color: var(--muted);
  margin: 31px 0 20px;
  max-width: 65ch;
}

.command-button {
  border: 0;
  background: transparent;
  padding: 5px 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  border-radius: 2px;
}

.command-button code {
  color: var(--mint);
}

.command-button:hover code {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.welcome-guide .command-button, .command-error .command-button {
  background: #26342e;
  padding: 1px 7px;
  margin: 0 2px;
  border: 1px solid #496258;
  border-radius: 3px;
  line-height: 1.5;
}

.starting-points {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 24px;
}

.starting-points .command-button {
  padding: 19px 14px 19px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.starting-points .command-button+.command-button {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.starting-points code::before {
  content: "$ ";
  color: #889788;
}

.starting-points code {
  font-size: 14px;
}

.starting-points .command-button span {
  font-size: 12px;
}

.welcome-note {
  font-size: 12px;
  color: var(--muted);
  margin: 17px 0 0;
}

.section-intro {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 23px;
}

.command-directory {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.command-directory li {
  display: grid;
  grid-template-columns: 138px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: #c7cfda;
}

.command-directory .command-button {
  padding: 5px 0;
}

.keyboard-help {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin: 24px 0 0;
  max-width: 75ch;
}

.expertise {
  margin-top: 35px;
}

.expertise h2 {
  font-size: 18px;
  margin-bottom: 20px;
}

.facts {
  margin: 20px 0 0;
  border-top: 1px solid var(--line);
}

.fact-row {
  display: grid;
  grid-template-columns: 170px minmax(0,1fr);
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 17px 0;
  font-size: 14px;
}

.fact-row dt {
  font-size: 12px;
  color: var(--violet);
  font-weight: 500;
  padding-top: 2px;
}

.fact-row dd {
  margin: 0;
  color: #c7cfda;
  overflow-wrap: anywhere;
  line-height: 1.75;
}

.record {
  border-top: 1px solid var(--line);
  padding-top: 25px;
  margin-top: 25px;
}

.record+.record {
  margin-top: 33px;
}

.institution {
  color: #c7cfda;
  font-size: 15px;
  margin: 0 0 6px;
}

.metadata {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
}

.record-columns {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  margin-top: 28px;
}

.field-heading {
  font-size: 12px;
  color: var(--violet);
  font-weight: 500;
  margin: 0 0 12px;
  line-height: 1.5;
}

.detail-list {
  padding-left: 18px;
  margin: 0;
  color: #c7cfda;
  font-size: 14px;
}

.detail-list li {
  padding-left: 3px;
  margin: 0 0 10px;
}

.detail-list li::marker {
  color: #7c8b9f;
}

.research-status {
  display: table;
  margin: 0 0 22px;
  padding: 4px 9px;
  border: 1px solid #496258;
  border-radius: 3px;
  font: 11px/1.7 var(--mono);
  color: var(--mint);
}

.research-summary {
  font-size: 15px;
  color: #c7cfda;
  line-height: 1.8;
  margin: 23px 0;
}

.source-link {
  font-size: 14px;
  color: var(--mint);
  overflow-wrap: anywhere;
}

a.source-link {
  display: inline-block;
  margin-top: 19px;
}

.paper-list {
  padding-left: 22px;
  margin: 0;
}

.paper-list li {
  padding-left: 9px;
}

.paper-list li::marker {
  font: 12px var(--mono);
  color: var(--muted);
}

.citation {
  font-size: 17px;
  line-height: 1.85;
  color: #c7cfda;
  margin: 0 0 16px;
}

.qualification-detail {
  font-size: 14px;
  color: #c7cfda;
  line-height: 1.75;
  margin: 15px 0 0;
}

.contact-email {
  color: #c7cfda;
  font-size: 16px;
  margin: 7px 0 0;
}

.profile-heading {
  margin-top: 33px;
  font-size: 18px;
}

.profile-list {
  list-style: none;
  padding: 0;
  margin: 17px 0 0;
}

.profile-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.profile-list .source-link {
  margin: 0;
}

.profile-list span.source-link {
  color: #c7cfda;
}

.command-error {
  border-left: 2px solid var(--warning);
  background: #2c2524;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 13px;
  color: #e0c2b3;
}

.command-error strong {
  font-weight: 600;
  color: var(--warning);
}

.command-error p {
  margin: 6px 0 0;
}

.command-dock {
  flex-shrink: 0;
  background: #1b2029;
  border-top: 1px solid var(--line);
  padding: 13px 24px 12px;
  position: relative;
}

.command-feedback {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 9px;
  min-height: 17px;
}

#command-form {
  display: grid;
  grid-template-columns: 68px minmax(0,1fr);
  gap: 12px;
  align-items: center;
}

#command-form>label {
  font-size: 12px;
  color: #c7cfda;
}

.command-entry {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--control-line);
  border-radius: 4px;
  background: #12171e;
  padding: 5px 6px 5px 12px;
  gap: 10px;
}

.command-entry:focus-within {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px var(--violet);
}

.prompt-prefix {
  font: 13px var(--mono);
  color: var(--mint);
  white-space: nowrap;
}

#command-input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 14px/1.6 var(--mono);
  caret-color: var(--mint);
  padding: 0;
}

#command-input::placeholder {
  color: #8c99ab;
  opacity: 1;
}

.command-entry button {
  flex-shrink: 0;
  min-height: 32px;
  border: 0;
  border-radius: 3px;
  padding: 4px 12px;
  background: #33483f;
  color: #d5eee1;
  font: 12px var(--mono);
}

.command-entry button:hover {
  background: #405e50;
}

.command-entry button span {
  margin-left: 7px;
}

.command-tools {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-top: 8px;
  padding-left: 80px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

#command-hint {
  margin: 0;
}

#command-hint>span {
  padding: 0 7px;
}

#command-hint kbd+kbd {
  margin-left: 3px;
}

.session-history {
  position: relative;
  max-width: 45%;
}

.session-history summary {
  cursor: pointer;
  white-space: nowrap;
}

.session-history ol {
  position: absolute;
  bottom: 24px;
  right: 0;
  z-index: 2;
  margin: 0;
  padding: 12px 18px 12px 35px;
  width: min(360px,70vw);
  max-height: 230px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid #566276;
  font-size: 12px;
}

.session-history li {
  overflow-wrap: anywhere;
  margin: 5px 0;
}

.session-history code {
  color: var(--mint);
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 29px;
  padding: 0 16px;
  background: #232e32;
  color: #bdcfd0;
  font-size: 11px;
  gap: 20px;
}

.status-bar>span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-square {
  width: 5px;
  height: 5px;
  background: var(--mint);
}

@media (min-width: 761px) {
  .navigation:not([open]) nav {
    display: block;
  }
}

@media (max-width: 1050px) {
  body {
    padding: 16px;
  }

  .workspace {
    height: calc(100dvh - 32px);
  }

  .workspace-body {
    grid-template-columns: 210px minmax(0,1fr);
  }

  .terminal-scroll {
    padding: 28px;
  }

  .starting-points {
    grid-template-columns: 1fr;
  }

  .starting-points .command-button {
    padding: 11px 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  .starting-points .command-button+.command-button {
    padding: 11px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .record-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 760px) {
  body {
    padding: 0;
  }

  .workspace {
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .window-bar {
    min-height: 56px;
    padding: 0 19px;
    gap: 8px;
  }

  .brand {
    font-size: 13px;
    gap: 9px;
  }

  .brand-slash, .brand-type {
    display: none;
  }

  .help-control {
    font-size: 0;
  }

  .help-control kbd {
    font-size: 12px;
    margin-left: 0;
  }

  .workspace-body {
    display: flex;
    flex-direction: column;
  }

  .sidebar {
    display: block;
    flex-shrink: 0;
    padding: 0;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-identity, .sidebar-foot, .navigation-title {
    display: none;
  }

  .navigation summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 12px;
    color: #c7cfda;
  }

  .navigation summary::-webkit-details-marker {
    display: none;
  }

  .navigation[open] summary>span {
    transform: rotate(180deg);
  }

  .navigation nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 10px 10px;
    max-height: 34dvh;
    overflow-y: auto;
  }

  .navigation:not([open]) nav {
    display: none;
  }

  .navigation a {
    margin: 1px;
    min-height: 42px;
    font-size: 12px;
    padding: 8px 10px;
  }

  .terminal {
    flex: 1;
  }

  .terminal-bar {
    min-height: 36px;
  }

  .terminal-tab {
    padding: 8px 20px;
  }

  #terminal-path {
    padding: 0 19px;
  }

  .terminal-scroll {
    padding: 24px 22px 32px;
  }

  .command-echo {
    font-size: 12px;
    margin-bottom: 23px;
  }

  .welcome h1 {
    font-size: 31px;
    max-width: 12ch;
  }

  h1 {
    font-size: 27px;
    margin-bottom: 20px;
  }

  h2 {
    font-size: 19px;
  }

  .professional-role {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .introduction {
    font-size: 15px;
    line-height: 1.8;
  }

  .welcome-guide {
    margin-top: 25px;
    font-size: 13px;
  }

  .starting-points code {
    font-size: 13px;
  }

  .fact-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 15px 0;
  }

  .command-directory li {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 12px 0;
    font-size: 12px;
  }

  .command-directory .command-button {
    padding: 0;
  }

  .command-directory code {
    font-size: 14px;
  }

  .keyboard-help {
    font-size: 12px;
  }

  .command-dock {
    padding: 10px 16px;
  }

  .command-feedback {
    margin-bottom: 7px;
  }

  #command-form {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .command-entry {
    gap: 8px;
    padding-left: 10px;
  }

  #command-input {
    font-size: 16px;
  }

  #command-input::placeholder {
    font-size: 12px;
  }

  .command-entry button {
    min-height: 36px;
    padding: 4px 10px;
  }

  .command-entry button span {
    margin-left: 3px;
  }

  .command-tools {
    padding-left: 0;
    gap: 8px;
  }

  .status-bar {
    min-height: 27px;
    padding: 0 17px;
  }

  .status-bar>span:last-child {
    display: none;
  }

  .profile-list li {
    gap: 12px;
  }

  .profile-list .source-link {
    font-size: 13px;
  }

  .citation {
    font-size: 15px;
  }

  .record-columns {
    margin-top: 23px;
  }

  #command-hint>span {
    padding: 0 4px;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  body {
    padding: 0;
  }

  .workspace {
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
  }
}

@media (max-width: 760px) and (max-height: 620px) {
  .workspace {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .workspace-body, .terminal {
    flex: none;
  }

  .terminal-scroll {
    flex: none;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
}
