:root{
  --bg:#0b1117;
  --bg-elev:#121b24;
  --bg-elev-strong:#172330;
  --panel:rgba(15,23,31,0.84);
  --panel-strong:rgba(19,31,43,0.92);
  --panel-soft:rgba(24,38,51,0.62);
  --line:rgba(116,154,178,0.22);
  --line-strong:rgba(116,154,178,0.38);
  --text:#edf4fb;
  --text-soft:#b4c8d7;
  --text-faint:#90a8ba;
  --amber:#ffbf57;
  --amber-soft:rgba(255,191,87,0.18);
  --cyan:#4fe0d5;
  --cyan-soft:rgba(79,224,213,0.18);
  --green:#8dd76b;
  --red:#ff7f7f;
  --shadow:0 24px 80px rgba(0,0,0,0.35);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --page-gutter:1rem;
  --font-display:"Bahnschrift","Aptos Display","Segoe UI Variable","Segoe UI",sans-serif;
  --font-body:"Aptos","Segoe UI Variable","Segoe UI",sans-serif;
  --font-mono:"Cascadia Code","Consolas","SFMono-Regular",monospace;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  font-size:16px;
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(255,191,87,0.08), transparent 28rem),
    radial-gradient(circle at top right, rgba(79,224,213,0.09), transparent 30rem),
    linear-gradient(180deg, #0b1117 0%, #0c131a 35%, #101821 100%);
  font-family:var(--font-body);
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
}

button,
input{
  font:inherit;
}

code,
kbd{
  font-family:var(--font-mono);
}

code,
.code-token{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:0.1rem 0.45rem;
  border-radius:0.55rem;
  border:1px solid rgba(79,224,213,0.24);
  background:rgba(79,224,213,0.1);
  color:#a8f4ff;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.code-token--line{
  display:block;
  width:100%;
}

.backdrop{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.backdrop__grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:3.5rem 3.5rem;
  mask-image:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.15));
}

.backdrop__glow{
  position:absolute;
  width:28rem;
  height:28rem;
  border-radius:50%;
  filter:blur(55px);
  opacity:0.35;
  animation:drift 18s ease-in-out infinite;
}

.backdrop__glow--amber{
  top:-9rem;
  left:-8rem;
  background:rgba(255,191,87,0.36);
}

.backdrop__glow--cyan{
  right:-10rem;
  top:12rem;
  background:rgba(79,224,213,0.32);
  animation-delay:-7s;
}

@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(1.8rem,-1.4rem,0) scale(1.08);}
}

.hero{
  position:relative;
  padding:1.15rem var(--page-gutter) 0.95rem;
}

.hero__inner{
  position:relative;
  max-width:none;
  width:100%;
  margin:0 auto;
  padding:1.4rem 1.5rem;
  background:linear-gradient(135deg, rgba(20,32,43,0.9), rgba(14,22,30,0.75));
  border:1px solid rgba(116,154,178,0.16);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.hero__inner::before{
  content:"";
  position:absolute;
  inset:auto -5rem -7rem auto;
  width:19rem;
  height:19rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,224,213,0.28), transparent 70%);
}

.hero__inner::after{
  content:"";
  position:absolute;
  inset:-8rem auto auto -5rem;
  width:16rem;
  height:16rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,191,87,0.22), transparent 72%);
}

.hero__eyebrow{
  margin:0 0 0.8rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.84rem;
  color:var(--amber);
}

.hero__masthead{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(18rem, 0.95fr);
  gap:1rem;
  align-items:start;
}

.hero__intro{
  min-width:0;
}

.hero h1{
  position:relative;
  margin:0;
  max-width:42rem;
  font-family:var(--font-display);
  font-size:clamp(2rem, 4.2vw, 3.55rem);
  line-height:0.98;
  letter-spacing:-0.04em;
}

.hero h1 code{
  font-size:0.86em;
  color:var(--cyan);
}

.hero__notes{
  position:relative;
  border-radius:var(--radius-md);
  border:1px solid rgba(116,154,178,0.18);
  background:rgba(10,16,22,0.72);
  min-width:0;
}

.hero__notes summary{
  position:relative;
  list-style:none;
  padding:0.95rem 3.7rem 0.95rem 1rem;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:1rem;
  letter-spacing:-0.02em;
}

.hero__notes summary::-webkit-details-marker{
  display:none;
}

.hero__notes summary::after{
  content:"Show";
  position:absolute;
  top:50%;
  right:1rem;
  transform:translateY(-50%);
  font-family:var(--font-body);
  font-size:0.77rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--cyan);
}

.hero__notes[open] summary::after{
  content:"Hide";
  color:var(--amber);
}

.hero__notes p{
  margin:0;
  padding:0 1rem 1rem;
  border-top:1px solid rgba(116,154,178,0.16);
  color:var(--text-soft);
  font-size:0.93rem;
  line-height:1.58;
}

.top-stack{
  position:sticky;
  top:0;
  z-index:7;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

.info-strip{
  padding:0.65rem 0.8rem;
  background:rgba(12,19,25,0.88);
}

.hero__chips{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
  margin:0;
}

.metric-chip{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  min-width:0;
  padding:0.42rem 0.72rem;
  border-radius:999px;
  border:1px solid rgba(116,154,178,0.22);
  background:rgba(9,14,19,0.72);
}

.metric-chip__label{
  font-size:0.69rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-faint);
}

.metric-chip__value{
  font-family:var(--font-body);
  font-size:0.91rem;
  letter-spacing:-0.02em;
  color:var(--text);
}

.workspace{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  max-width:none;
  width:100%;
  margin:0 auto;
  padding:0 var(--page-gutter) 2.5rem;
  align-items:start;
  min-width:0;
}

.control-deck-shell{
  display:flex;
  flex-direction:column;
  gap:0.85rem;
  padding:0.85rem 0.95rem;
  transition:padding 180ms ease, gap 180ms ease;
}

.control-deck__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.control-deck__header-copy{
  min-width:0;
}

.control-deck__label{
  margin:0;
  font-size:0.73rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
}

.control-deck__summary{
  margin:0.2rem 0 0;
  color:var(--text-soft);
  font-size:0.9rem;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.control-deck__header-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
}

.control-deck{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr));
  gap:1rem;
  min-width:0;
}

.control-deck-shell.is-collapsed .control-deck{
  display:none;
}

.top-stack.is-condensed .control-deck-shell{
  gap:0.7rem;
  padding:0.72rem 0.8rem;
}

.top-stack.is-condensed .control-panel{
  padding:0.75rem;
}

.top-stack.is-condensed .control-panel .panel__heading{
  margin-bottom:0.45rem;
}

.top-stack.is-condensed .control-panel .panel__heading p,
.top-stack.is-condensed .toggle__hint,
.top-stack.is-condensed .shortcut-list{
  display:none;
}

.top-stack.is-condensed .toggle{
  gap:0;
  padding:0.58rem 0.7rem;
}

.top-stack.is-condensed .button-grid{
  gap:0.45rem;
}

.control-panel{
  height:100%;
}

.board{
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(23rem, 0.95fr);
  gap:1rem;
  min-width:0;
  align-items:start;
}

.board__pipeline,
.board__inspector{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  min-width:0;
}

.panel__heading{
  display:flex;
  flex-direction:column;
  gap:0.2rem;
  margin-bottom:1rem;
}

.panel__heading h2{
  margin:0;
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:-0.02em;
}

.panel__heading p{
  margin:0;
  color:var(--text-soft);
  font-size:0.88rem;
}

.panel,
.focus-card,
.toolbar{
  padding:1rem;
}

.toolbar{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "actions"
    "status"
    "breadcrumbs";
  gap:0.8rem;
  align-items:start;
  background:var(--panel-strong);
}

.toolbar__status{
  grid-area:status;
  display:flex;
  flex-direction:column;
  gap:0.15rem;
  min-width:0;
}

.toolbar__label{
  margin:0;
  font-size:0.79rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-soft);
}

.toolbar__status-line{
  margin:0;
  font-size:1rem;
  color:var(--text);
  overflow-wrap:anywhere;
}

.toolbar__actions{
  grid-area:actions;
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  justify-content:flex-start;
  justify-self:stretch;
  align-self:start;
  width:100%;
}

.btn{
  padding:0.75rem 1rem;
  border-radius:999px;
  border:1px solid var(--line-strong);
  color:var(--text);
  background:rgba(15,23,31,0.72);
  transition:transform 180ms ease, border-color 180ms ease, background 180ms ease;
  cursor:pointer;
}

.btn:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(255,191,87,0.42);
}

.btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.btn--accent{
  background:linear-gradient(135deg, rgba(255,191,87,0.2), rgba(79,224,213,0.14));
  border-color:rgba(255,191,87,0.46);
}

.btn--ghost{
  background:rgba(11,17,23,0.72);
  border-color:rgba(79,224,213,0.28);
}

.button-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
  gap:0.6rem;
}

.drawer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
  gap:1rem;
}

.toggle{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.18rem;
  padding:0.8rem 0.9rem;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:rgba(15,23,31,0.74);
  color:var(--text);
  cursor:pointer;
  transition:transform 180ms ease, border-color 180ms ease, background 180ms ease;
  text-align:left;
}

.toggle:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(79,224,213,0.46);
}

.toggle.is-active{
  background:linear-gradient(135deg, rgba(255,191,87,0.16), rgba(79,224,213,0.14));
  border-color:rgba(255,191,87,0.52);
}

.toggle:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.drawer{
  padding:0;
  overflow:hidden;
}

.drawer__summary{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0.18rem;
  list-style:none;
  padding:1rem 4rem 1rem 1rem;
  cursor:pointer;
}

.drawer__summary::-webkit-details-marker{
  display:none;
}

.drawer__summary::after{
  content:"Open";
  position:absolute;
  top:50%;
  right:1rem;
  transform:translateY(-50%);
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--cyan);
}

.drawer[open] .drawer__summary::after{
  content:"Hide";
  color:var(--amber);
}

.drawer__title{
  font-family:var(--font-display);
  font-size:1.02rem;
  letter-spacing:-0.02em;
}

.drawer__hint{
  color:var(--text-soft);
  font-size:0.87rem;
  line-height:1.45;
}

.drawer__body{
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  padding:0 1rem 1rem;
  border-top:1px solid rgba(116,154,178,0.16);
}

.drawer__body--details{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(13.5rem, 1fr));
  gap:0.8rem;
}

.toggle__title{
  font-weight:700;
}

.toggle__hint{
  font-size:0.82rem;
  color:var(--text-soft);
}

.search{
  display:flex;
  flex-direction:column;
  gap:0.45rem;
}

.search__label{
  font-size:0.8rem;
  color:var(--text-soft);
}

.search input{
  width:100%;
  padding:0.78rem 0.9rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:rgba(9,14,19,0.92);
  color:var(--text);
  outline:none;
}

.search input:focus{
  border-color:rgba(255,191,87,0.55);
  box-shadow:0 0 0 3px rgba(255,191,87,0.12);
}

.search-results,
.chapter-list,
.stack-panel,
.child-panel{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}

.search-card,
.chapter-card,
.stack-card,
.child-card,
.timeline-card{
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:rgba(13,19,26,0.8);
  color:var(--text);
}

.search-card,
.chapter-card,
.child-card,
.timeline-card{
  padding:0.9rem 0.95rem;
}

.search-card,
.chapter-card,
.child-card{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  cursor:pointer;
  transition:transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.search-card:hover,
.chapter-card:hover,
.child-card:hover,
.timeline-card:hover{
  transform:translateY(-1px);
  border-color:rgba(79,224,213,0.46);
}

.search-card.is-active,
.chapter-card.is-active,
.child-card.is-active,
.timeline-card.is-active{
  border-color:rgba(255,191,87,0.52);
  background:linear-gradient(135deg, rgba(255,191,87,0.12), rgba(79,224,213,0.08));
}

.card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.45rem;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:0.3rem;
  padding:0.24rem 0.58rem;
  border-radius:999px;
  border:1px solid rgba(116,154,178,0.24);
  background:rgba(116,154,178,0.08);
  color:var(--text-soft);
  font-size:0.74rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
}

.pill--accent{
  color:var(--amber);
  border-color:rgba(255,191,87,0.28);
  background:rgba(255,191,87,0.1);
}

.pill--cyan{
  color:var(--cyan);
  border-color:rgba(79,224,213,0.28);
  background:rgba(79,224,213,0.1);
}

.pill--green{
  color:var(--green);
  border-color:rgba(141,215,107,0.28);
  background:rgba(141,215,107,0.1);
}

.card__title{
  font-family:var(--font-display);
  font-size:0.99rem;
  letter-spacing:-0.02em;
  color:var(--text);
}

.card__hint{
  font-size:0.93rem;
  color:var(--text-soft);
  line-height:1.52;
  overflow-wrap:anywhere;
}

.breadcrumbs{
  grid-area:breadcrumbs;
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
}

.crumb{
  display:flex;
  align-items:center;
  gap:0.55rem;
  padding:0.45rem 0.72rem;
  border-radius:999px;
  background:rgba(12,19,25,0.88);
  border:1px solid var(--line);
  font-size:0.88rem;
  color:var(--text);
}

.crumb.is-current{
  border-color:rgba(255,191,87,0.5);
  color:var(--amber);
}

.crumb__index{
  display:inline-flex;
  width:1.45rem;
  height:1.45rem;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,191,87,0.14);
  color:var(--amber);
  font-size:0.72rem;
}

.focus-card{
  background:
    linear-gradient(135deg, rgba(17,28,38,0.96), rgba(13,20,27,0.88));
  overflow:hidden;
}

.focus-card.is-refreshing{
  animation:card-refresh 280ms ease;
}

@keyframes card-refresh{
  0%{transform:translateY(0);opacity:1;}
  50%{transform:translateY(6px);opacity:0.82;}
  100%{transform:translateY(0);opacity:1;}
}

.focus-card__header{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
}

.focus-card__title-block{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  min-width:min(100%, 26rem);
}

.focus-card__title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.55rem, 2.7vw, 2.25rem);
  line-height:1.02;
  letter-spacing:-0.035em;
}

.focus-card__summary{
  margin:1rem 0 0;
  font-size:1rem;
  color:var(--text-soft);
  max-width:none;
  line-height:1.62;
}

.focus-card__source{
  display:flex;
  flex-direction:column;
  gap:0.45rem;
  min-width:min(100%, 17rem);
}

.source-line{
  padding:0.72rem 0.8rem;
  border-radius:var(--radius-md);
  background:rgba(10,16,22,0.8);
  border:1px solid rgba(116,154,178,0.18);
}

.source-line__label{
  display:block;
  font-size:0.74rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-soft);
}

.source-line__value{
  display:block;
  margin-top:0.25rem;
  font-size:0.9rem;
  word-break:break-word;
}

.focus-card__progress{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));
  gap:0.8rem;
  margin-top:1.3rem;
}

.progress-box{
  padding:0.85rem 0.9rem;
  border-radius:var(--radius-md);
  background:rgba(12,19,25,0.75);
  border:1px solid var(--line);
  min-width:0;
}

.progress-box__label{
  display:block;
  font-size:0.79rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-soft);
}

.progress-box__value{
  display:block;
  margin-top:0.28rem;
  font-family:var(--font-display);
  font-size:1.06rem;
  color:var(--text);
}

.panel--branch{
  background:linear-gradient(135deg, rgba(18,29,39,0.95), rgba(14,23,31,0.82));
}

.stack-card{
  position:relative;
  padding:0.9rem 0.9rem 0.9rem 3.3rem;
}

.stack-card::before{
  content:"";
  position:absolute;
  left:1.1rem;
  top:0.9rem;
  bottom:-0.9rem;
  width:1px;
  background:linear-gradient(180deg, rgba(255,191,87,0.4), transparent);
}

.stack-card:last-child::before{
  bottom:1.2rem;
}

.stack-card__index{
  position:absolute;
  left:0.45rem;
  top:0.85rem;
  width:1.5rem;
  height:1.5rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,191,87,0.15);
  color:var(--amber);
  font-size:0.75rem;
}

.stack-card__title{
  font-weight:700;
}

.stack-card__line{
  margin-top:0.25rem;
  font-size:0.9rem;
}

.child-card__title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.75rem;
}

.child-card__step{
  display:block;
  margin-top:0.45rem;
}

.child-card__cta{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  font-size:0.88rem;
  color:var(--cyan);
}

.details-grid{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.detail-card{
  padding:1rem;
}

.detail-card h3{
  margin:0 0 0.65rem;
  font-family:var(--font-display);
  font-size:1.03rem;
  letter-spacing:-0.02em;
}

.detail-card p{
  margin:0;
  color:var(--text-soft);
}

.detail-list{
  margin:0;
  padding-left:1.1rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  color:var(--text-soft);
}

.detail-list li::marker{
  color:var(--amber);
}

.detail-card--spotlight{
  background:linear-gradient(135deg, rgba(255,191,87,0.11), rgba(79,224,213,0.08));
  border-color:rgba(255,191,87,0.24);
}

.detail-card--nested{
  padding:0.95rem;
  border-radius:var(--radius-md);
  border:1px solid rgba(116,154,178,0.18);
  background:rgba(10,16,22,0.76);
}

.timeline-panel{
  padding-bottom:0.8rem;
}

.timeline-panel__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.timeline-panel__header .panel__heading{
  margin-bottom:0;
}

.timeline-panel__actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
}

.timeline-shell{
  position:relative;
  min-width:0;
}

.timeline-viewport{
  max-height:26rem;
  overflow:hidden;
  padding:0.1rem 0.15rem 0.6rem 0;
  scroll-padding-block:7rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.timeline-panel.is-expanded .timeline-viewport{
  max-height:none;
  overflow:visible;
}

.timeline-viewport::-webkit-scrollbar{
  display:none;
}

.timeline-panel:not(.is-expanded) .timeline-shell::before,
.timeline-panel:not(.is-expanded) .timeline-shell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:3.2rem;
  z-index:2;
  pointer-events:none;
}

.timeline-panel:not(.is-expanded) .timeline-shell::before{
  top:0;
  background:linear-gradient(180deg, rgba(11,17,23,0.98), rgba(11,17,23,0));
}

.timeline-panel:not(.is-expanded) .timeline-shell::after{
  bottom:0;
  background:linear-gradient(0deg, rgba(11,17,23,0.98), rgba(11,17,23,0));
}

.timeline{
  display:grid;
  gap:0.75rem;
  grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom:0.3rem;
  align-items:stretch;
}

.timeline-card{
  min-width:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  cursor:pointer;
  transition:transform 180ms ease, border-color 180ms ease, background 180ms ease;
  height:100%;
  color:var(--text);
}

.timeline-card__index{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font-size:0.77rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-soft);
}

.timeline-card__title{
  display:block;
  margin-top:0.45rem;
  font-weight:700;
  color:var(--text);
  overflow-wrap:anywhere;
}

.timeline-card__hint{
  display:block;
  margin-top:0.35rem;
  font-size:0.9rem;
  line-height:1.5;
  width:100%;
}

.shortcut-list{
  margin:0;
  padding-left:1rem;
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  color:var(--text-soft);
}

kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.9rem;
  padding:0.18rem 0.42rem;
  margin-right:0.25rem;
  border-radius:0.45rem;
  border:1px solid rgba(116,154,178,0.28);
  background:rgba(8,12,17,0.95);
  color:var(--amber);
  font-size:0.82rem;
}

.empty-state{
  padding:1rem;
  border:1px dashed rgba(116,154,178,0.3);
  border-radius:var(--radius-md);
  color:var(--text-soft);
  background:rgba(10,16,22,0.72);
}

.footer{
  max-width:none;
  width:100%;
  margin:0 auto;
  padding:0 var(--page-gutter) 3rem;
  color:var(--text-soft);
  font-size:0.93rem;
}

.footer p{
  margin:0;
  padding:1rem 1.15rem;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:rgba(12,19,25,0.7);
}

.noscript{
  position:fixed;
  left:1rem;
  right:1rem;
  bottom:1rem;
  padding:1rem 1.1rem;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,127,127,0.4);
  background:rgba(66,19,19,0.9);
  color:#ffdede;
}

@media (max-width: 1120px){
  .hero__masthead,
  .board{
    grid-template-columns:1fr;
  }

  .timeline-panel__header{
    flex-direction:column;
  }
}

@media (max-width: 820px){
  :root{
    --page-gutter:0.8rem;
  }

  .hero{
    padding-top:0.8rem;
  }

  .hero__inner{
    padding:1rem;
  }

  .top-stack{
    gap:0.65rem;
  }

  .info-strip{
    padding:0.55rem 0.65rem;
  }

  .metric-chip{
    width:100%;
    justify-content:space-between;
  }

  .control-deck__header{
    flex-direction:column;
    align-items:flex-start;
  }

  .control-deck,
  .board,
  .drawer-grid,
  .focus-card__progress,
  .drawer__body--details{
    grid-template-columns:1fr;
  }

  .toolbar{
    padding:0.9rem;
    grid-template-columns:1fr;
    grid-template-areas:
      "actions"
      "status"
      "breadcrumbs";
    gap:0.8rem;
  }

  .toolbar__actions{
    justify-content:flex-start;
    justify-self:start;
  }

  .focus-card{
    padding:0.95rem;
  }
}