:root{
  color-scheme:dark;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#101218;
  color:#f0f0f6
}
*{
  box-sizing:border-box
}
body{
  margin:0
}
main{
  height:100svh;
  overflow:hidden;
  position:relative;
  background:radial-gradient(ellipse at 50% 40%,#293244,#0e1117 80%)
}
a{
  color:inherit;
  text-decoration:none
}
button,a{
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible{
  outline:2px solid #b5dcff;
  outline-offset:5px
}
.wall{
  position:absolute;
  inset:68px 22px 54px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  isolation:isolate
}
.column{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0
}
.tile{
  background:color-mix(in srgb,var(--bg) 95%,transparent);
  color:var(--fg);
  border:1px solid color-mix(in srgb,var(--fg) 15%,transparent);
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 5px 16px #0003;
  min-height:0;
  flex:var(--weight) 1 0;
  display:flex;
  flex-direction:column
}
.tile-header{
  display:flex;
  align-items:center;
  gap:7px;
  padding:12px 13px 10px;
  font:10px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.025em;
  color:var(--muted);
  border-bottom:1px solid color-mix(in srgb,var(--fg) 7%,transparent)
}
.dot{
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--accent);
  opacity:.85
}
.format{
  margin-left:auto;
  font-size:8px;
  text-transform:uppercase;
  opacity:.7
}
.code{
  margin:0;
  padding:13px 12px 8px;
  font:clamp(9px,.79vw,12px)/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;
  overflow:hidden;
  flex:1;
  white-space:pre
}
.line{
  display:block
}
.number{
  display:inline-block;
  width:23px;
  user-select:none;
  color:var(--muted);
  opacity:.45;
  font-size:.85em
}
.key{
  color:var(--key)
}
.string{
  color:var(--string)
}
.comment{
  color:var(--muted);
  font-style:italic
}
.section{
  color:var(--accent)
}
.tile-footer{
  padding:8px 13px 11px;
  display:flex;
  justify-content:space-between;
  gap:6px;
  font:8px ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.035em;
  color:var(--muted)
}
.vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 20%,#080b1118 58%,#080b1170 100%),linear-gradient(#101218 0%,transparent 13%,transparent 85%,#101218 100%)
}
.topbar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:65px;
  padding:0 33px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  z-index:2;
  background:linear-gradient(#101218e8,transparent)
}
.wordmark{
  font-size:21px;
  font-weight:700;
  letter-spacing:-1px
}
.wordmark span{
  color:#bad2ed;
  margin-right:9px;
  font-family:monospace
}
.github{
  font-size:11px;
  color:#c6c8d1
}
.github span{
  margin-left:8px
}
.presenter{
  position:absolute;
  left:clamp(24px, 5vw, 90px);
  top:49%;
  transform:translateY(-50%);
  width:440px;
  padding:28px 38px 25px;
  text-align:center;
  border:1px solid #d3e2ff42;
  border-radius:24px;
  background:linear-gradient(135deg,#323b4dda,#191f30e8 60%,#25343cde);
  box-shadow:0 25px 90px #0008,inset 0 1px 0 #ffffff19;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px)
}
.terminal-icon{
  width:43px;
  height:43px;
  border:1px solid #ccecff9c;
  border-radius:12px;
  margin:0 auto 19px;
  display:flex;
  align-items:center;
  justify-content:center;
  font:25px monospace;
  color:#d1f4fc;
  box-shadow:0 0 25px #92d8ef19
}
.terminal-icon span{
  font-size:20px
}
.eyebrow{
  font-size:9px;
  font-weight:600;
  letter-spacing:2.5px;
  color:#b5bbce
}
h1{
  font-size:62px;
  line-height:1.03;
  letter-spacing:-3.3px;
  margin:16px 0;
  background:linear-gradient(115deg,#dfb9fa 12%,#b8ccfb 48%,#a7eeee 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:650
}
.presenter p{
  font-size:15px;
  line-height:1.65;
  color:#d2d6e1;
  margin:0 0 23px
}
.features{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:10px;
  background:#0b102b60;
  border:1px solid #ffffff10
}
.features button{
  cursor:pointer;
  border:0;
  background:transparent;
  color:#aeb6c9;
  border-radius:7px;
  font-weight:500;
  font-family:inherit;
  font-size:11px;
  padding:9px 20px
}
.features button[aria-pressed=true]{
  background:#dce7ff1c;
  color:#f0f4ff;
  box-shadow:0 1px 4px #0002
}
.features button:hover{
  color:white;
  background:#dce7ff12
}
.feature-caption{
  font-size:10px;
  color:#a8b4c9;
  height:37px;
  padding-top:12px
}
.start{
  display:inline-flex;
  align-items:center;
  gap:34px;
  background:#e0e8f2;
  color:#202737;
  border:1px solid #fff6;
  border-radius:8px;
  padding:11px 19px;
  font-size:11px;
  font-weight:600;
  transition:background .2s
}
.start:hover{
  background:#fff
}
.footnote{
  display:block;
  font-size:9px;
  letter-spacing:.3px;
  color:#8e9ab0;
  margin-top:12px
}
footer{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 30px;
  font-size:9px;
  color:#929aa8;
  letter-spacing:.3px
}
footer i{
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#99c8b2;
  margin-right:7px
}
footer b{
  font-weight:400;
  margin:0 12px;
  color:#495363
}
.wall.changing{
  animation:refresh .35s ease
}
@keyframes refresh{
  from{
    opacity:.35
  }
  to{
    opacity:1
  }
}
@media(min-width:1700px){
  .wall{
    inset:70px 40px 55px;
    gap:16px
  }
  .column{
    gap:16px
  }
  .code{
    font-size:13px
  }
}
@media(max-width:850px){
  .wall{
    width:1180px;
    left:50%;
    margin-left:-590px;
    right:auto;
    gap:10px
  }
  .code{
    font-size:10px
  }
  .presenter{
    left:24px;
    width:390px;
    padding:25px 28px
  }
  h1{
    font-size:56px
  }
  footer span:last-child{
    display:none
  }
}
@media(max-width:460px){
  .presenter{
    left:20px;
    width:calc(100% - 40px);
    padding:24px
  }
  h1{
    font-size:52px
  }
  .topbar{
    padding:0 22px
  }
  .presenter p{
    font-size:14px
  }
  .eyebrow{
    font-size:8px
  }
  footer{
    justify-content:center
  }
  .wall{
    opacity:.75
  }
}
@media(max-height:650px){
  .presenter{
    padding-top:17px;
    padding-bottom:17px
  }
  .terminal-icon{
    display:none
  }
  h1{
    font-size:48px;
    margin:12px 0
  }
  .presenter p{
    margin-bottom:14px
  }
  .topbar{
    height:45px
  }
  .wall{
    top:48px
  }
}
@media(prefers-reduced-motion:reduce){
  .wall.changing{
    animation:none
  }
  *{
    transition:none!important
  }
}

/* The presenter covers the fixed two-column backdrop; topics fill the right. */
.wall {
  inset: 68px 22px 54px;
  width: auto;
  margin-left: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.presenter {
  left: 18px;
  top: 65px;
  bottom: 51px;
  width: calc((100% - 44px - 48px) * .4 + 20px);
  transform: none;
  padding: clamp(20px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  border-radius: 18px;
  background: linear-gradient(140deg, #30384df5, #191f30f7 65%, #263640f5);
}
.presenter .terminal-icon { margin: 0 0 20px; flex-shrink: 0; }
.presenter h1 { font-size: clamp(38px, 4.4vw, 65px); }
.presenter .intro { font-size: 13px; margin-bottom: 24px; }
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  background: none;
  padding: 0;
  border: none;
}
.features button {
  padding: 8px 10px;
  border: 1px solid #dce7ff20;
  background: #0b102b30;
  border-radius: 7px;
}
.features button[aria-pressed=true] {
  background: #bcd8ee;
  color: #202737;
  border-color: #bcd8ee;
}
.presenter-copy { min-height: 150px; margin: 23px 0 12px; }
.presenter-copy h2 { margin: 0 0 10px; font-size: 18px; font-weight: 550; letter-spacing: -.3px; }
.presenter-copy p { margin: 0; font-size: 13px; line-height: 1.7; color: #bac4d6; }
.tile-header { padding: 9px 11px; flex-shrink: 0; }
.code { padding: 10px 11px; font-size: clamp(8px, .68vw, 11px); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.code .line { display: inline; }
.example-note { color: var(--muted); font-style: italic; }
@media (max-width: 1000px) and (min-width: 701px) {
  .presenter { padding: 22px; }
  .presenter h1 { font-size: 43px; }
  .presenter .terminal-icon { display: none; }
  .presenter-copy { min-height: 175px; }
}
@media (max-width: 700px) {
  .wall { top: 295px; bottom: 38px; left: 12px; right: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; opacity: 1; }
  .backdrop-column { display: none; }
  .column { gap: 7px; }
  .presenter { left: 12px; right: 12px; top: 52px; bottom: auto; width: auto; height: 232px; padding: 16px; justify-content: flex-start; }
  .presenter .terminal-icon, .presenter .eyebrow, .presenter .intro, .presenter .footnote { display: none; }
  .presenter h1 { font-size: 26px; letter-spacing: -1px; margin: 0 0 12px; }
  .presenter h1 br { display: none; }
  .features { gap: 4px; }
  .features button { font-size: 10px; padding: 7px 8px; }
  .presenter-copy { min-height: 0; margin: 13px 0 0; }
  .presenter-copy h2 { font-size: 15px; margin-bottom: 6px; }
  .presenter-copy p { font-size: 11px; line-height: 1.55; }
  .presenter .start { position: absolute; top: 13px; right: 14px; padding: 7px 9px; font-size: 9px; gap: 8px; }
  .tile-header { font-size: 8px; padding: 7px; }
  .code { font-size: 7px; padding: 7px; }
}
@media (max-height: 650px) and (min-width: 701px) {
  .presenter { top: 47px; padding: 20px; }
  .presenter .terminal-icon, .presenter .intro, .presenter .footnote { display: none; }
  .presenter h1 { font-size: 38px; margin: 10px 0 15px; }
  .presenter-copy { min-height: 0; margin: 16px 0; }
}

/* One large example anchors each topic; eight smaller files fill around it. */
.topic-grid {
  grid-column: 3 / span 3;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.topic-grid .tile { min-width: 0; }
.superstar {
  grid-column: span 2;
  grid-row: span 2;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 10px 32px #0005, inset 0 1px 0 color-mix(in srgb, var(--accent) 15%, transparent);
}
.superstar .tile-header { padding: 13px 16px; font-size: 12px; }
.superstar .code { padding: 16px; font-size: clamp(10px, .85vw, 14px); line-height: 1.75; }
.superstar .example-note { color: var(--fg); }
@media (min-width: 1700px) {
  .topic-grid { gap: 16px; }
}
@media (max-width: 700px) {
  .topic-grid { grid-column: 1 / -1; gap: 7px; }
  .superstar .tile-header { padding: 8px; font-size: 9px; }
  .superstar .code { padding: 8px; font-size: 8px; line-height: 1.55; }
}

/* Fill the viewport at every zoom level; keep the presenter content-sized. */
body { min-height: 100svh; }
main { width: 100%; height: 100svh; }
.column { min-height: 0; }
.code {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
  white-space: pre;
  overflow-wrap: normal;
  font-size: 12px;
  line-height: 1.6;
}
.code:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.example-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.superstar .code { font-size: 14px; line-height: 1.75; }
.presenter {
  left: 46px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: calc((100% - 92px) * .4 - 36px);
  max-height: calc(100% - 190px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 28px;
  background: linear-gradient(140deg, #30384de8, #191f30ed 65%, #263640e8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.presenter h1 { font-size: 52px; }
.presenter .terminal-icon { margin-bottom: 16px; }
.presenter-copy { min-height: 0; margin: 20px 0; }
.presenter .start { flex-shrink: 0; }
@media (max-width: 1100px) and (min-width: 701px) {
  .presenter { left: 34px; width: calc((100% - 92px) * .4 - 12px); padding: 20px; }
  .presenter h1 { font-size: 38px; }
  .presenter .terminal-icon, .presenter .intro { display: none; }
}
@media (max-width: 700px) {
  .presenter { left: 12px; top: 52px; width: auto; height: 232px; max-height: none; transform: none; padding: 16px; }
  .presenter h1 { font-size: 26px; }
  .presenter-copy { margin: 13px 0 0; }
  .code { font-size: 11px; }
  .superstar .code { font-size: 12px; }
}
@media (max-height: 600px) and (min-width: 701px) {
  .presenter { max-height: calc(100% - 120px); padding: 18px; }
  .presenter h1 { font-size: 32px; }
}
@media (max-height: 500px) and (max-width: 700px) {
  .presenter { height: 175px; }
  .wall { top: 239px; bottom: 30px; }
}

/* A translucent terminal presenter. */
.presenter {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #d5dedb;
  border: 1px solid #a9c7bb45;
  border-radius: 10px;
  background: #111c1be6;
  box-shadow: 0 18px 60px #0007, inset 0 1px 0 #ffffff08;
  padding: 24px;
  scrollbar-color: #657e74 transparent;
}
.terminal-bar {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: -24px -24px 22px;
  padding: 12px 16px;
  border-bottom: 1px solid #a9c7bb25;
  background: #bacdc608;
  color: #92a99f;
  font-size: 10px;
}
.ascii-logo {
  margin: 0 0 22px;
  color: #a5d5b8;
  font: 12px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -0.35px;
  white-space: pre;
  flex-shrink: 0;
  text-shadow: 0 0 18px #a5d5b81a;
}
.presenter h1 {
  margin: 0 0 12px;
  color: #edf3ef;
  background: none;
  font-size: 25px;
  line-height: 1.3;
  letter-spacing: -1px;
  font-weight: 600;
}
.presenter h1::before { content: '> '; color: #a5d5b8; }
.presenter .intro {
  display: block;
  color: #9bafa5;
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 22px;
}
.presenter .features { gap: 6px; }
.presenter .features button {
  font: inherit;
  font-size: 10px;
  padding: 7px 8px;
  border: 1px solid #a9c7bb30;
  border-radius: 3px;
  background: transparent;
  color: #aebfb6;
}
.presenter .features button::before { content: '['; margin-right: 4px; color: #668c79; }
.presenter .features button::after { content: ']'; margin-left: 4px; color: #668c79; }
.presenter .features button:hover { background: #a5d5b815; color: #e8f5ed; }
.presenter .features button[aria-pressed=true] { background: #a5d5b8; border-color: #a5d5b8; color: #14231b; }
.presenter .features button[aria-pressed=true]::before,
.presenter .features button[aria-pressed=true]::after { color: #395d49; }
.presenter-copy { border-left: 2px solid #a5d5b84d; padding-left: 13px; }
.presenter-copy h2 { font-size: 14px; line-height: 1.5; letter-spacing: -.3px; color: #d9e7de; }
.presenter-copy p { font-size: 11px; line-height: 1.8; color: #aebfb6; }
.presenter .start { font-size: 11px; border-radius: 3px; background: transparent; color: #a5d5b8; border: 1px solid #a5d5b861; padding: 9px 12px; }
.presenter .start::before { content: '$'; color: #729780; }
.presenter .start:hover { background: #a5d5b815; }
.presenter .footnote { color: #758d80; font-size: 9px; }
@media (max-width: 1100px) and (min-width: 701px) {
  .ascii-logo { font-size: 9px; }
  .presenter { padding: 18px; }
  .terminal-bar { margin: -18px -18px 18px; }
}
@media (max-width: 700px) {
  .presenter { height: 270px; padding: 14px; }
  .terminal-bar { margin: -14px -14px 12px; padding: 8px 12px; }
  .ascii-logo { font-size: 6px; margin: 0 0 10px; line-height: 1.05; }
  .presenter h1 { font-size: 18px; margin-bottom: 6px; }
  .presenter .intro { font-size: 10px; margin-bottom: 10px; }
  .presenter .features { gap: 3px; }
  .presenter .features button { font-size: 9px; padding: 5px; }
  .presenter-copy { margin: 10px 0; }
  .presenter-copy h2 { font-size: 12px; }
  .presenter-copy p { font-size: 10px; }
  .presenter .start { position: static; padding: 6px 9px; }
  .wall { top: 334px; }
}
@media (max-height: 600px) and (min-width: 701px) {
  .ascii-logo { font-size: 8px; margin-bottom: 12px; }
  .presenter h1 { font-size: 21px; }
}
@media (max-height: 500px) and (max-width: 700px) {
  .presenter { height: 190px; }
  .wall { top: 254px; }
}

/* Plain monochrome terminal, in contrast to the editor palettes. */
.presenter {
  background: #080808eb;
  color: #ccc;
  border: 1px solid #666;
  border-radius: 2px;
  box-shadow: 0 12px 30px #0005;
  scrollbar-color: #777 transparent;
}
.presenter .ascii-logo { color: #ddd; text-shadow: none; }
.presenter .intro, .presenter-copy p { color: #aaa; }
.presenter-copy { border-left-color: #555; }
.presenter-copy h2 { color: #ddd; }
.presenter .features button {
  color: #bbb;
  border-color: #555;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.presenter .features button::before,
.presenter .features button::after { color: #888; }
.presenter .features button:hover { background: #252525; color: #eee; }
.presenter .features button[aria-pressed=true] { background: #ccc; color: #111; border-color: #ccc; }
.presenter .features button[aria-pressed=true]::before,
.presenter .features button[aria-pressed=true]::after { color: #444; }
.presenter .start { color: #ccc; border-color: #777; border-radius: 0; background: transparent; }
.presenter .start::before { color: #888; }
.presenter .start:hover { background: #252525; }
.presenter a:focus-visible, .presenter button:focus-visible { outline-color: #eee; }

.presenter .install-link { display: inline-block; margin-top: 8px; color: #ddd; text-decoration: none; }
.presenter .install-link:hover { color: #fff; }

.presenter-copy code { font: inherit; color: #eee; background: #ffffff10; border: 1px solid #ffffff18; padding: 1px 4px; border-radius: 2px; }

/* Drag handles live in the gutters, leaving code selection and scrolling intact. */
.presenter { z-index: 5; }
.layout-controls { display: flex; justify-content: space-between; align-self: stretch; gap: 10px; margin-bottom: 18px; }
.layout-controls button { font: 10px ui-monospace, monospace; color: #999; border: 0; background: transparent; padding: 7px 2px; }
.layout-controls button:hover { color: #eee; }
.presenter-grip { cursor: grab; touch-action: none; user-select: none; }
.presenter-grip.dragging { cursor: grabbing; }
.reset-layout { cursor: pointer; }
.topic-grid { position: relative; }
.grid-divider { position: absolute; z-index: 2; border: 0; padding: 0; margin: 0; background: transparent; touch-action: none; }
.grid-divider.columns { width: 12px; bottom: 0; transform: translateX(-50%); cursor: col-resize; }
.grid-divider.rows { height: 12px; right: 0; transform: translateY(-50%); cursor: row-resize; }
.grid-divider::after { content: ''; position: absolute; background: #a6b3c140; border-radius: 2px; }
.grid-divider.columns::after { width: 2px; height: 22px; left: 5px; top: 50%; }
.grid-divider.rows::after { height: 2px; width: 22px; top: 5px; left: 50%; }
.grid-divider:hover::after, .grid-divider.dragging::after, .grid-divider:focus-visible::after { background: #d4e2f0; }
@media (max-width: 700px) {
  .presenter { width: calc(100% - 24px); }
  .layout-controls { margin-bottom: 10px; }
}

/* The whole top strip is the window drag surface. */
.layout-controls { position: relative; margin: -24px -24px 18px; min-height: 30px; border-bottom: 1px solid #444; background: #ffffff05; }
.presenter-grip { flex: 1; min-width: 30px; cursor: grab; touch-action: none; }
.presenter-grip:focus-visible { outline: 1px solid #aaa; outline-offset: -3px; }
.layout-controls .reset-layout { margin: 0 10px; font-size: 9px; }
.wall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); }
.topic-grid { grid-column: 3; }
.wall-divider { top: 0; }
.wall-divider[hidden] { display: none; }
@media (max-width: 1100px) and (min-width: 701px) {
  .layout-controls { margin: -18px -18px 18px; }
}
@media (max-width: 700px) {
  .wall { grid-template-columns: minmax(0, 1fr); }
  .topic-grid { grid-column: 1; }
  .layout-controls { margin: -14px -14px 12px; }
}

/* Header presenter: navigation stays in one line; the topic explains itself. */
.site-header { position: absolute; inset: 0 0 auto; height: 120px; z-index: 5; display: flex; align-items: center; gap: 26px; padding: 16px 24px; background: transparent; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.brand { flex-shrink: 0; color: #bbb; }
.brand pre { margin: 0 0 8px; font: 12px/1.05 ui-monospace, monospace; white-space: pre; }
.brand span { font-size: 9px; }
.topic-controls { min-width: 0; flex: 1; }
.site-header .features { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.site-header .features button { white-space: nowrap; font: inherit; font-size: 11px; border-radius: 2px; color: #bbb; }
.site-header .features button[aria-pressed=true] { color: #111; background: #ccc; border-color: #ccc; }
.cycle-status { display: block; margin-top: 10px; font-size: 10px; color: #89948d; white-space: nowrap; }
.site-header .install-link { flex-shrink: 0; color: #ddd; text-decoration: none; }
.site-header .install-link { display: inline-flex; align-items: center; gap: 7px; }
.github-mark { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.settings { position: relative; flex-shrink: 0; }
.settings summary { cursor: pointer; list-style: none; font-size: 19px; color: #999; }
.settings summary::-webkit-details-marker { display: none; }
.settings-menu { position: absolute; right: 0; top: 30px; background: #151515; border: 1px solid #555; padding: 8px; width: 145px; }
.settings-menu button { width: 100%; padding: 8px; background: transparent; border: 0; color: #ccc; font: 11px monospace; text-align: left; cursor: pointer; }
.settings-menu button:hover { background: #333; }
.wall { top: 126px; bottom: 24px; }
.backdrop-column { display: grid; position: relative; grid-template-rows: repeat(3, minmax(0, 1fr)); }
@media(max-width:700px) {
  .site-header { gap: 12px; padding: 12px; height: 135px; flex-wrap: wrap; align-content: center; }
  .brand { margin-right: auto; }
  .brand pre { font-size: 9px; }
  .topic-controls { order: 4; flex: 1 0 100%; }
  .site-header .features button { padding: 5px 8px; font-size: 10px; }
  .cycle-status { margin-top: 5px; font-size: 9px; }
  .wall { top: 145px; bottom: 15px; }
  .backdrop-column { display: none; }
}

/* Thin, single-row header at every width. */
.site-header {
  height: 64px;
  padding: 10px 22px;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: center;
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand pre { margin: 0; font-size: 9px; }
.brand span { white-space: nowrap; }
.topic-controls { display: flex; align-items: center; gap: 18px; order: 0; flex: 1; overflow-x: auto; scrollbar-width: thin; }
.site-header .features { flex-shrink: 0; overflow: visible; }
.cycle-status { margin: 0; flex-shrink: 0; }
.wall { top: 74px; }
@media (max-width: 1000px) {
  .site-header { gap: 12px; padding-inline: 12px; }
  .brand { gap: 10px; }
  .brand pre { font-size: 7px; }
  .brand span { font-size: 8px; }
  .topic-controls { gap: 12px; }
}
@media (max-width: 700px) {
  .site-header { height: 56px; gap: 10px; }
  .brand { flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; margin-right: 0; }
  .brand pre, .brand span { flex-shrink: 0; }
  .topic-controls { flex: 1 0 90px; }
  .site-header .install-link { font-size: 10px; }
  .cycle-status { margin: 0; }
  .wall { top: 66px; }
}

/* Temporary smaller-grid preview: omit the far-left column and bottom row.
   Remove this section to restore all 15 examples. Data stays unchanged. */
.wall { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important; }
.backdrop-column:first-child { display: none; }
.backdrop-column:nth-child(2) { grid-column: 1; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
.backdrop-column:nth-child(2) > .tile:nth-child(3) { display: none; }
.topic-grid { grid-column: 2; grid-template-rows: repeat(3, minmax(0, 1fr)) !important; }
.topic-grid > .tile:nth-child(n+7) { display: none; }
/* Hide handles whose geometry refers to the temporarily removed tracks. */
.wall-divider, .backdrop-column > .grid-divider, .topic-grid > .grid-divider { display: none; }
@media (max-width: 700px) {
  .wall { grid-template-columns: minmax(0, 1fr) !important; }
  .backdrop-column:nth-child(2) { display: none; }
  .topic-grid { grid-column: 1; }
}

/* The notebook desk replaces the temporary reduced-grid experiment. */
.wall { display: block; overflow: hidden; isolation: isolate; }
.wall > .tile {
  display: flex;
  position: absolute;
  width: clamp(260px, 25vw, 390px);
  height: clamp(210px, 37vh, 355px);
  min-width: 0;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  border-radius: 7px;
  box-shadow: 0 12px 28px #0007, 0 2px 5px #0006;
  resize: both;
  overflow: hidden;
}
.wall > .superstar { width: clamp(330px, 35vw, 560px); height: clamp(290px, 49vh, 475px); }
.wall > .tile:focus-within { border-color: var(--accent); }
.wall > .tile .tile-header { cursor: grab; touch-action: none; user-select: none; }
.wall > .tile.dragging { box-shadow: 0 24px 48px #0009; }
.wall > .tile.dragging .tile-header { cursor: grabbing; }
.wall > .tile .resize-handle { position: absolute; z-index: 2; touch-action: none; }
.wall > .tile .resize-n, .wall > .tile .resize-s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.wall > .tile .resize-n { top: 0; }
.wall > .tile .resize-s { bottom: 0; }
.wall > .tile .resize-e, .wall > .tile .resize-w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.wall > .tile .resize-e { right: 0; }
.wall > .tile .resize-w { left: 0; }
.wall > .tile .resize-ne, .wall > .tile .resize-nw, .wall > .tile .resize-se, .wall > .tile .resize-sw { width: 14px; height: 14px; }
.wall > .tile .resize-ne { top: 0; right: 0; cursor: nesw-resize; }
.wall > .tile .resize-nw { top: 0; left: 0; cursor: nwse-resize; }
.wall > .tile .resize-se { right: 0; bottom: 0; cursor: nwse-resize; }
.wall > .tile .resize-sw { left: 0; bottom: 0; cursor: nesw-resize; }
.wall > .tile .code { font-size: 12px; }
.wall > .superstar .code { font-size: 13px; }
.wall > .tile .example-note { font-style: italic; color: var(--muted); }
@media(max-width:700px) {
  .wall > .tile { width: 245px; height: 230px; }
  .wall > .superstar { width: 295px; height: 300px; }
}

/* One desk, no topic navigation. */
.site-header .settings { margin-left: auto; }

/* More room for the two handwritten notes on initial load. */
.wall > .tile { width: clamp(300px, 31vw, 480px); height: clamp(260px, 45vh, 440px); }
.wall > .superstar { width: clamp(380px, 42vw, 680px); height: clamp(350px, 60vh, 590px); }
.site-header .install-link { margin-left: auto; }
@media (max-width: 700px) {
  .wall > .tile { width: 280px; height: 280px; }
  .wall > .superstar { width: 330px; height: 360px; }
}

/* Subtle desktop wallpaper beneath the notes and existing edge fades. */
main {
  background:
    linear-gradient(#10121888, #10121888),
    url('./bg.png') center / contain no-repeat,
    #101218;
}

.note-close { margin-left: auto; flex-shrink: 0; border: 0; background: transparent; color: var(--muted); font: 19px/1 monospace; padding: 2px 5px; cursor: pointer; }
.note-close:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 12%, transparent); }
.wall > .tile[hidden] { display: none; }
.notes-menu { position: relative; color: #bbb; flex-shrink: 0; }
.notes-menu summary { cursor: pointer; list-style: none; padding: 8px 0; }
.notes-menu summary::-webkit-details-marker { display: none; }
#notes-list { position: absolute; top: 100%; left: 0; width: min(320px, calc(100vw - 40px)); box-sizing: border-box; max-height: 60vh; overflow: auto; padding: 6px; border: 1px solid #555; background: #15171af5; box-shadow: 0 8px 24px #0007; }
.notes-intro { padding: 4px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid #ffffff20; font-size: 12px; line-height: 1.6; }
.notes-intro p { margin: 8px 0; }
.notes-intro p:first-child { color: #eee; }
.notes-intro a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#notes-list button { display: block; width: 100%; padding: 10px; text-align: left; font: 11px monospace; background: transparent; border: 0; color: #ccc; cursor: pointer; white-space: nowrap; }
#notes-list button:hover { background: #ffffff12; }

/* Taller pitch window, starting nearer the top of the desk. */
.wall > .tile,
.wall > .superstar { width: clamp(380px, 42vw, 680px); height: clamp(420px, 78vh, 820px); }
.wall > .tile .tile-header { padding: 13px 16px; font-size: 12px; }
@media (max-width: 700px) {
  .wall > .tile,
  .wall > .superstar { width: 330px; height: 360px; }
  .wall > .tile .tile-header { padding: 8px; font-size: 9px; }
}