/* The operations shell: readable controls sit in front of the illustrated scenes. */
:root {
  --ground:#080c11;
  --rail:#0c131b;
  --layer:#111a23;
  --inset:#0a1118;
  --raised:#17232e;
  --line:#2b3e4b;
  --edge:#3c5665;
  --text:#edf5f6;
  --muted:#a6bac3;
  --ice:#6df7e0;
  --copper:#ffba75;
  --green:#91e7b0;
  --amber:#ffcf86;
  --red:#ffaca6;
  --active:#132b30;
  --radius:10px;
  --mono:"Cascadia Mono",Consolas,"Liberation Mono",monospace;
}

#console {
  background:radial-gradient(ellipse at 85% 0%,#10212a 0%,transparent 45%),var(--ground);
}
#console :focus-visible, #palette :focus-visible { outline-color:var(--ice); }
.command { background:#0a1219; }
.command-top > .brand {
  color:var(--text);
  gap:11px;
  font-size:.92rem;
  letter-spacing:.12em;
  white-space:nowrap;
}
.command-top > .brand img { filter:drop-shadow(0 0 8px #60f3d861); }
.command-top > .brand small { color:var(--muted); letter-spacing:.15em; font-size:.58rem; }
.command-tools { gap:8px; }
.command-tools button {
  background:#0d1821;
  border-color:#2d4654;
  color:#deecef;
  border-radius:7px;
  min-height:40px;
}
.command-tools button:hover:not(:disabled) { background:#18313b; border-color:#599289; }
.command-tools #alerts { color:var(--copper); }
.identity {
  padding:.45rem .65rem;
  border:1px solid #2b4b4d;
  border-radius:999px;
  background:#102322;
  color:#c3e8df;
}
.desktop-crumb { font:600 .68rem/1.2 var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.desktop-crumb strong { color:var(--ice); }
@media (min-width:1050px) {
  #console { --rail-width:224px; --bar-height:68px; --page-gutter:clamp(24px,2.7vw,52px); }
  .command-top > .brand { padding:0 16px; background:#0b141c; }
  .command-tools { background:#0a1219; }
  #navigation { background:linear-gradient(165deg,#101d25,#0b131a 48%); padding:12px 12px 22px; }
  #navigation::before {
    content:"";
    flex:none;
    display:block;
    height:4px;
    margin:2px 6px 3px;
    background:repeating-linear-gradient(90deg,#55c7b499 0 4px,transparent 4px 7px) left / 65px 100% no-repeat;
  }
  .nav-group-name { padding:14px 10px 4px; color:#a2b7bf; }
  #navigation a { min-height:38px; }
  .stage { padding-top:25px; }
}
#navigation a { position:relative; color:#c4d3db; letter-spacing:.01em; }
#navigation a:hover { background:#172832; color:#f4fafb; }
#navigation a[aria-current] {
  background:linear-gradient(105deg,#214447,#12262d);
  border-color:#44776e;
  color:#e5fffa;
  box-shadow:inset 3px 0 0 var(--ice),0 6px 24px #0003;
}
#navigation .nav-icon { color:#87b4bc; }
#navigation a[aria-current] .nav-icon { color:var(--ice); }

/* Three scene planes: the coordinate grid, luminous illustration and heading. */
.obsidian-chapter {
  --scene-color:#6df7e0;
  --scene-light:#155756;
  min-height:clamp(234px,23vw,342px);
  align-items:center;
  border:1px solid #3b5663;
  border-radius:14px 14px 28px 14px;
  margin-bottom:24px;
  background:linear-gradient(120deg,#101c26 0%,#0c171f 50%,#10242a 100%);
  box-shadow:0 18px 52px #0005,inset 0 1px 0 #94ebe318;
}
.obsidian-chapter[data-scene=storage],.obsidian-chapter[data-scene=updates],.obsidian-chapter[data-scene=risks] {
  --scene-color:#ffba75;
  --scene-light:#754c29;
}
.obsidian-chapter[data-scene=docker],.obsidian-chapter[data-scene=ollama],.obsidian-chapter[data-scene=vps2] {
  --scene-color:#b5bdff;
  --scene-light:#4d5483;
}
.obsidian-chapter[data-scene=shell],.obsidian-chapter[data-scene=logs] { --scene-color:#91e7b0; --scene-light:#275c49; }
.obsidian-chapter .chapter-grid {
  inset:0;
  width:auto;
  opacity:.55;
  background:linear-gradient(#8fb7bb17 1px,transparent 1px),linear-gradient(90deg,#8fb7bb17 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(90deg,transparent,black 65%);
}
.obsidian-chapter .chapter-glow {
  opacity:.76;
  background:radial-gradient(ellipse at 80% 47%,var(--scene-light),transparent 57%);
}
.obsidian-chapter .chapter-art { width:64%; height:112%; top:-6%; right:-1%; opacity:1; }
.obsidian-chapter .chapter-sweep { display:none; }
.obsidian-chapter .chapter-copy { padding:clamp(24px,3.15vw,54px); max-width:61%; }
.obsidian-chapter .chapter-copy .eyebrow { color:var(--scene-color); }
.obsidian-chapter h1 {
  font-weight:780;
  font-size:clamp(2.5rem,4.7vw,5.4rem);
  line-height:.96;
  margin:.6rem 0 .85rem;
  letter-spacing:-.072em;
  text-shadow:0 6px 38px #030a0b;
}
.obsidian-chapter .chapter-copy > p:last-child { color:#c2d2d8; font-size:clamp(.86rem,1.1vw,1.02rem); max-width:47ch; }
.scene-id {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:clamp(14px,1.8vw,26px);
  color:#adc1ca;
  font:650 .63rem/1 var(--mono);
  letter-spacing:.15em;
}
.scene-id::before { content:""; width:19px; height:1px; background:var(--scene-color); box-shadow:0 0 10px var(--scene-color); }
.obsidian-chapter .scene-corners {
  position:absolute;
  z-index:1;
  inset:9px;
  pointer-events:none;
  opacity:.65;
  background:
    linear-gradient(var(--scene-color),var(--scene-color)) top left / 18px 1px,
    linear-gradient(var(--scene-color),var(--scene-color)) top left / 1px 13px,
    linear-gradient(var(--scene-color),var(--scene-color)) bottom right / 18px 1px,
    linear-gradient(var(--scene-color),var(--scene-color)) bottom right / 1px 13px;
  background-repeat:no-repeat;
}
.chapter-art .obsidian-orbit { transform-origin:400px 158px; animation:obsidian-turn 22s linear infinite; }
.chapter-art .obsidian-trace { stroke:var(--scene-color); }
.chapter-art .obsidian-index { fill:var(--scene-color); font:600 11px var(--mono); letter-spacing:2.3px; }
@keyframes obsidian-turn { to { transform:rotate(1turn); } }

#palette { border:1px solid #557e83; background:#101c25; box-shadow:0 24px 100px #000c; }
#palette .matches button { border-color:#344d58; background:#172832; }
#toast p { border-color:#46756f; background:#152c30; }
@media (max-width:1049px) {
  .command-top, #navigation, .stage { width:calc(100% - 32px); }
  .command-top { min-height:63px; }
  #navigation { padding-bottom:9px; }
  .obsidian-chapter .chapter-art { width:66%; }
  .obsidian-chapter .chapter-copy { max-width:68%; }
}
@media (max-width:620px) {
  .command-top, #navigation, .stage { width:calc(100% - 24px); }
  .command-top > .brand { font-size:.75rem; gap:7px; }
  .command-top > .brand img { width:30px; height:30px; }
  .command-top > .brand small { font-size:.52rem; }
  .command-tools button { padding-inline:.55rem; }
  .command-tools .identity { display:none; }
  .obsidian-chapter { align-items:end; min-height:270px; margin-bottom:16px; }
  .obsidian-chapter .chapter-art { top:-24%; right:-16%; width:106%; height:120%; opacity:.61; }
  .obsidian-chapter .chapter-copy { max-width:100%; padding:19px; background:linear-gradient(0deg,#0d181ff8 22%,#0d181f00 100%); }
  .obsidian-chapter h1 { font-size:clamp(2.05rem,9.2vw,3.2rem); }
  .obsidian-chapter .chapter-copy > p:last-child { font-size:.83rem; }
}
/* Motion follows the portal preference. Touch only trims the decorative effects. */
@media (pointer:coarse) {
  .obsidian-chapter .hero-spark { animation:none; }
  .obsidian-chapter .signal-travel > circle[filter] { display:none; }
}