:root {
  color-scheme: light;
  font-family: Inter, system-ui, sans-serif;
  --ink: #172b24;
  --muted: #53645d;
  --line: #dce4dd;
  --surface: #fff;
  --ground: #f2f5f0;
  --green: #1a5139;
  --soft: #e7f1e8;
  --radius: .85rem;
  background: var(--ground);
  color: var(--ink);
}
* { box-sizing: border-box }
body { margin: 0; font-size: .94rem; line-height: 1.5 }
button, input, textarea, select { font: inherit; color: inherit }
button, select, input:not([type=checkbox]), textarea { border: 1px solid var(--line); border-radius: .5rem; background: #fff; min-width: 0 }
button, select { min-height: 2.65rem; padding: .46rem .73rem }
input:not([type=checkbox]), textarea { padding: .6rem }
button { cursor: pointer; font-weight: 650 }
button:hover { background: var(--soft) }
button:disabled { opacity: .5; cursor: not-allowed }
a { color: var(--green); text-underline-offset: .2em }
:focus-visible { outline: 3px solid #a95813; outline-offset: 3px }
h1, h2, h3, p { margin-top: 0 }
h1 { margin-bottom: .34rem; font-size: clamp(1.8rem, 4vw, 3.1rem); letter-spacing: -.055em; line-height: 1.08 }
h2 { margin: 0 0 .55rem; font-size: 1.13rem; letter-spacing: -.025em }
h3 { margin: .8rem 0 .35rem; font-size: .98rem }
p { margin-bottom: .65rem }
label, summary { font-weight: 650 }
summary { cursor: pointer; padding: .35rem 0 }
details p { margin: .25rem 0 .7rem }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.skip:focus { position: fixed; top: .5rem; left: .5rem; z-index: 10; background: white; padding: .7rem }
.topbar { background: #fff; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; align-items: center; padding: .75rem clamp(1rem, 3vw, 3rem) }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 800; letter-spacing: -.03em }
.mark { display: grid; place-items: center; color: #fff; background: var(--green); width: 2rem; height: 2rem; border-radius: .55rem }
.parent, .topline { font-size: .82rem; color: var(--muted) }
.topline { margin-left: auto }
.shell { max-width: 1600px; margin: auto; padding: 1.5rem clamp(.7rem, 2.6vw, 2.5rem) 2rem }
.intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem }
.intro p { color: var(--muted) }
.company, .eyebrow { font-size: .76rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase }
.company span { color: #26784e; font-size: .62rem; margin-right: .35rem }
.clock { display: grid; flex: 0 0 auto; gap: .3rem; text-align: right; font-size: .8rem }
.clock strong { font-variant-numeric: tabular-nums }
.global-status { min-height: 1.7rem; color: var(--green); font-weight: 650; font-size: .82rem }
.studio { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0,1fr); gap: .95rem; align-items: start }
.main-area { min-width: 0 }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; min-width: 0 }
.sidebar { display: grid; gap: .52rem }
.sidebar label { font-size: .77rem; color: var(--muted); margin-top: .4rem }
.level, .chip { font-size: .75rem; padding: .27rem .52rem; background: var(--soft); color: var(--green); border-radius: .42rem; font-weight: 750; width: fit-content }
.level, #progress { margin: 0 }
#progress, .subtle { color: var(--muted); font-size: .8rem }
.activity-list { max-height: 28rem; overflow: auto; display: grid; align-content: start; gap: .35rem; padding: .1rem }
.activity { font-size: .8rem; text-align: left; font-weight: 600; width: 100% }
.activity[aria-current], button[aria-current] { background: var(--soft); border-color: #8eb49b; color: var(--green) }
.starter { margin-top: .5rem }
.view-nav, .actions, .resource-tabs, .insert { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center }
.view-nav { margin-bottom: .7rem }
.view-nav button { background: transparent; border-color: transparent }
.view-nav button[aria-current] { background: #fff; border-color: var(--line) }
.brief { margin-bottom: .7rem; border-left: 4px solid var(--green) }
.brief-head, .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; flex-wrap: wrap }
.eyebrow { color: var(--green); margin-bottom: .32rem }
.brief h2 { font-size: clamp(1.2rem,2vw,1.65rem) }
.guidance { color: var(--muted); font-size: .86rem }
.expert .guidance { display: none }
.panes { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr); gap: .7rem; align-items: start }
.resource-tabs { margin: .2rem 0 .7rem }
.resource-tabs button { font-size: .76rem; padding-inline: .48rem }
.resource-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .65rem; font-size: .8rem }
.table-scroll { overflow: auto; max-height: 24rem }
table { border-collapse: collapse; width: 100%; font-size: .8rem }
th, td { border: 1px solid var(--line); padding: .25rem .4rem; text-align: left; vertical-align: top }
th { background: var(--ground) }
td input { width: 7rem; max-width: 24vw; padding: .33rem !important; border: 0 !important }
.resource-card { border: 1px solid var(--line); border-radius: .55rem; padding: .65rem .8rem; margin: .55rem 0; overflow-wrap: anywhere }
.resource-card h3 { margin-top: 0 }
.file { color: var(--muted); font: .76rem ui-monospace, monospace }
#code { display: block; width: 100%; min-height: 16rem; resize: vertical; background: #162720; color: #f0f6f0; padding: .8rem; font: .82rem/1.6 ui-monospace, SFMono-Regular, monospace; tab-size: 2 }
.insert { margin: .55rem 0 .25rem; font-size: .78rem }
.insert select { flex: 1; max-width: 100% }
.primary { background: var(--green); color: #fff; border-color: var(--green) }
.primary:hover { background: #11442e }
.events, .observatory { margin-top: .7rem }
.event-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .82rem }
.event-controls select { max-width: 100% }
.observatory .actions { margin-bottom: .55rem }
pre { background: #eef3ee; color: #22332b; border-radius: .5rem; font: .78rem/1.5 ui-monospace, monospace; padding: .8rem; max-height: 23rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere }
.success { color: #185f36; font-weight: 650 }
.failure { color: #9b321e; font-weight: 650 }
.checklist { padding-left: 1.4rem }
.diff { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .6rem }
.graph { position: relative; background: #f3f7f2; border: 1px solid var(--line); border-radius: .65rem; margin: .75rem 0; padding: 1rem }
#edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.nodes { position: relative; display: grid; grid-template-columns: repeat(auto-fit,minmax(8rem,1fr)); gap: 1.25rem .85rem; align-items: stretch }
.node { min-width: 0; font-size: .8rem; overflow-wrap: anywhere; text-align: left; padding: .7rem; box-shadow: 0 2px 4px #182b1e10 }
.node small { display: block; color: var(--muted); font-weight: 500 }
.node-editor { display: flex; flex-wrap: wrap; align-items: end; gap: .55rem; margin-bottom: .7rem }
.node-editor label { display: grid; gap: .2rem; font-size: .78rem; min-width: 6.5rem; flex: 1 }
.node-editor button { flex-shrink: 0 }
.portfolio .actions { margin: .8rem 0 }
.file-upload { font-size: .82rem }
.footer { display: flex; flex-wrap: wrap; gap: .7rem 1rem; max-width: 1600px; margin: auto; padding: 1rem 2rem 2rem; font-size: .82rem; color: var(--muted) }
@media (max-width: 1050px) {
  .panes { grid-template-columns: minmax(0,1fr) }
}
@media (max-width: 650px) {
  .studio { grid-template-columns: minmax(0,1fr) }
  .activity-list { max-height: 10rem }
  .intro { align-items: flex-start; flex-direction: column }
  .clock { text-align: left; grid-template-columns: 1fr auto; align-items: center }
  .clock strong { grid-column: 1 }
  .clock button { grid-column: 2; grid-row: 1 / span 2 }
  .topline { margin-left: 0 }
  .diff { grid-template-columns: minmax(0,1fr) }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important } }