/* fsdsp56k splash */
body { background:
  radial-gradient(1100px 600px at 78% 8%, rgba(48, 185, 219, .13), transparent 60%),
  radial-gradient(900px 500px at 8% 30%, rgba(30, 97, 137, .16), transparent 60%),
  var(--bg); overflow-x: hidden; }
body::before { /* the board: a faint grid of traces */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(36, 57, 90, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(36, 57, 90, .28) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 0%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 0%, #000 0%, transparent 75%); }

.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
       background: linear-gradient(180deg, rgba(6, 10, 17, .86), rgba(6, 10, 17, .6)); border-bottom: 1px solid rgba(36, 57, 90, .5); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none !important; }
.brand img.icon { width: 30px; height: 30px; border-radius: 6px; }
.brand img.wordmark { display: block; width: auto; height: 26px; }
.nav nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav nav a { color: var(--fg-2); font: 500 14.5px/1 var(--f-body); }
.nav nav a:hover { color: var(--fg); text-decoration: none; }
.nav nav a.gh { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--fg); }
.nav nav a.gh:hover { border-color: var(--cyan); }
.nav nav a.gh svg { width: 16px; height: 16px; }

/* ---- hero ---- */
.hero { padding: 56px 0 30px; overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero-copy > * { flex: none; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 12px 7px 8px; border-radius: 999px;
          font: 500 calc(13px * var(--mono-scale) / .92)/1 var(--f-mono); color: var(--fg-2); background: rgba(13, 23, 38, .8); border: 1px solid var(--line-2); }
.kicker b { font-weight: 600; color: #04121a; background: var(--yellow); border-radius: 999px; padding: 4px 8px; }
.headline { margin: 0; font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
            font-size: calc(clamp(40px, 5.6vw, 74px) * var(--display-scale)); line-height: 1.02; color: #f3f7fb; text-wrap: balance; }
.headline .l2 { display: block; background: linear-gradient(92deg, #6be6ff 0%, #30b9db 40%, #fff3a0 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin: 24px 0 0; max-width: 36em; font-size: 18.5px; line-height: 1.6; color: var(--fg-2); }
.lede strong { color: var(--fg); font-weight: 600; }
.taglines { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.taglines li { display: flex; gap: 12px; align-items: baseline; font: 500 17px/1.4 var(--f-body); color: var(--fg); }
.taglines li::before { content: ""; flex: none; width: 8px; height: 8px; transform: translateY(-2px); background: var(--cyan-2); box-shadow: 0 0 10px var(--cyan-2); }
.taglines li:nth-child(2)::before { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.taglines li:nth-child(3)::before { background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.meta { margin: 20px 0 0; font: 400 calc(12.5px * var(--mono-scale) / .92)/1.5 var(--f-mono); color: var(--dim); }

/* pixel mode: the lettering follows the logo */
/* Both letterings are always laid out, stacked in one grid cell (hero.js wraps each .pxable's content in a
   .px-stack of .px-s, smooth, and .px-p, pixel): the cell is as large as the larger of the two, so switching only
   swaps which one is visible and nothing moves, at any width and in every pairing. */
.px-stack { display: inline-grid; vertical-align: top; max-width: 100%; }
.headline > .px-stack { display: grid; }
.px-stack > .px-s, .px-stack > .px-p { grid-area: 1 / 1; min-width: 0; }
.px-stack > .px-p { visibility: hidden; font-family: var(--f-pixel); font-weight: 400; letter-spacing: var(--pixel-track); }
:root.px-mode .px-stack > .px-p { visibility: visible; }
:root.px-mode .px-stack > .px-s { opacity: 0; }
.headline.pxable .px-p { font-size: calc(clamp(40px, 5.6vw, 74px) * var(--pixel-scale) * .86); line-height: 1.04; }
.kicker.pxable .px-p { font-size: calc(13px * var(--pixel-scale)); }
.headline .px-p .l2 { background: none; -webkit-text-fill-color: currentColor; color: var(--cyan-2); text-shadow: 3px 3px 0 #0b3a4a; }
.headline .px-p .l1 { text-shadow: 3px 3px 0 #1a2738; }

.hero-visual { display: grid; justify-items: center; gap: 16px; }
.stage-frame { position: relative; width: min(500px, 100%); padding: 10px; border-radius: 26px;
               background: linear-gradient(160deg, rgba(48, 185, 219, .35), rgba(30, 97, 137, .08) 40%, rgba(255, 176, 32, .18));
               box-shadow: 0 40px 120px rgba(0, 0, 0, .55), 0 0 90px rgba(48, 185, 219, .16); }
.stage-frame::before { /* a copper bar drifting behind the logo */
  content: ""; position: absolute; inset: -60px -40px; z-index: -1; border-radius: 50%; filter: blur(30px); opacity: .55;
  background: conic-gradient(from 0deg, rgba(48,185,219,.0), rgba(48,185,219,.35), rgba(255,243,160,.25), rgba(255,122,48,.2), rgba(48,185,219,0));
  animation: halo 18s linear infinite; }
@keyframes halo { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .stage-frame::before { animation: none; } }
#stage { position: relative; width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #081422; }
/* the logo: the exported house-rest.svg until the art's module mounts its live logo (.fsdsp56k-logo, LogoView) */
#stage .logo-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stage .fsdsp56k-logo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
#stage .fsdsp56k-logo > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stage .fsdsp56k-logo .glow { position: absolute; left: 0; top: 0; width: 512px; height: 512px; transform-origin: 0 0; pointer-events: none; will-change: opacity; }
#stage .fsdsp56k-logo .half, #stage .fsdsp56k-logo .glow canvas { position: absolute; left: 0; top: 0; width: 512px; height: 512px; max-width: none; will-change: opacity, transform; }
/* its own pixel canvas is the hero's source (hero.js copies it), never shown: the hero's overlay shows it */
#stage .fsdsp56k-logo .pixels { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; }
#pix { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.scan { position: absolute; inset: 10px; border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity .3s;
        background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); }
:root.px-mode .scan { opacity: 1; }
.hero-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.hero-controls .fx { font: 500 calc(12px * var(--mono-scale) / .92)/1 var(--f-mono); color: var(--dim); min-width: 24ch; white-space: nowrap; }
.hero-controls .fx b { color: var(--yellow); font-weight: 500; }
.hint { font: 400 calc(12px * var(--mono-scale) / .92)/1 var(--f-mono); color: var(--dim); opacity: .8; }

/* ---- the scroller ---- */
.scroller-band { position: relative; margin: 34px 0 0; overflow: hidden; contain: paint; border-block: 1px solid rgba(36, 57, 90, .6);
                 background: linear-gradient(180deg, rgba(10, 18, 32, .9), rgba(6, 10, 17, .9)); }
.scroller-band::before, .scroller-band::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; }
.scroller-band::before { top: 6px; background: linear-gradient(90deg, transparent, #1e6189, #30b9db, #fff3a0, #ffb020, #30b9db, #1e6189, transparent); opacity: .7; }
.scroller-band::after { bottom: 6px; background: linear-gradient(90deg, transparent, #1e6189, #30b9db, #1e6189, transparent); opacity: .5; }
#scroller { display: block; width: 100%; height: 92px; }

/* ---- sections ---- */
section.block { padding: 96px 0 0; }
/* a section's one heading: drawn by the art's HeadingsView (assets/headings), these rules are its words' look where
   the art is not shown (forced colours, print, no module) */
h2.section-h { margin: 0; font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
           font-size: calc(clamp(30px, 3.6vw, 46px) * var(--display-scale)); line-height: 1.08; color: #f3f7fb; max-width: 20em; text-wrap: balance; }
.section-lede { margin: 18px 0 0; max-width: 46em; color: var(--fg-2); font-size: 18px; }
.section-lede strong { color: #f3f7fb; font-weight: 600; }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.pillar { position: relative; padding: 26px 24px 24px; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2), var(--panel));
          border: 1px solid var(--line); overflow: hidden; }
.pillar::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: linear-gradient(90deg, var(--c, #30b9db), transparent); }
.pillar .n { font: 600 calc(12px * var(--mono-scale) / .92)/1 var(--f-mono); color: var(--c, #30b9db); letter-spacing: .1em; }
.pillar h3 { margin: 12px 0 10px; font: var(--display-weight) calc(22px * var(--display-scale))/1.2 var(--f-display); letter-spacing: var(--display-track); color: #f3f7fb; }
.pillar p { margin: 0; color: var(--fg-2); font-size: 15.5px; line-height: 1.6; }
.pillar code { color: var(--yellow); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
         background: rgba(10, 18, 32, .7); }
.stat { padding: 22px 24px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat .v { font: var(--display-weight) calc(34px * var(--display-scale))/1 var(--f-display); letter-spacing: var(--display-track); color: var(--yellow); }
.stat .v small { font-size: .5em; color: var(--fg-2); margin-left: 4px; }
.stat .k { margin-top: 10px; color: var(--fg-2); font-size: 14px; line-height: 1.45; }

/* ---- the code showcase ---- */
.showcase { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; margin-top: 44px; align-items: start; }
.notes { display: grid; gap: 14px; }
.note { padding: 18px 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.note h4 { margin: 0 0 6px; font: 600 15.5px/1.3 var(--f-body); color: var(--fg); display: flex; align-items: center; gap: 10px; }
.note h4 .tag { font: 500 calc(11px * var(--mono-scale) / .92)/1 var(--f-mono); color: #04121a; background: var(--cyan-2); padding: 4px 7px; border-radius: 5px; }
.note p { margin: 0; color: var(--fg-2); font-size: 14.5px; }
.note.verdict { border-color: rgba(94, 230, 160, .35); background: linear-gradient(180deg, rgba(94, 230, 160, .06), var(--panel)); }
.note.verdict .tag { background: var(--green); }

/* ---- commands ---- */
.cmd-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.cmd-group h3 { margin: 0 0 12px; font: 600 calc(12.5px * var(--mono-scale) / .92)/1 var(--f-mono); color: var(--dim); letter-spacing: .14em; text-transform: uppercase; }
.cmd-list { display: grid; gap: 10px; }
a.cmd { display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); text-decoration: none !important;
        transition: border-color .15s, transform .15s, background .15s; }
a.cmd:hover { border-color: var(--cyan); transform: translateY(-1px); background: var(--panel-2); }
a.cmd.sketch { border-style: dashed; }
.cmd-top { display: flex; align-items: baseline; gap: 10px; }
.cmd-name { font: 600 calc(15px * var(--mono-scale) / .92)/1.2 var(--f-mono); color: #f3f7fb; }
.cmd-name .grp { color: var(--orange); }
.cmd-badge { margin-left: auto; font: 500 calc(10.5px * var(--mono-scale) / .92)/1 var(--f-mono); color: var(--yellow); border: 1px dashed rgba(255, 243, 160, .5); border-radius: 5px; padding: 3px 6px; }
.cmd-desc { color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.cmd-flow { display: flex; align-items: center; gap: 6px; min-height: 32px; }
.cmd-flow .flow-in, .cmd-flow .flow-out, .cmd-flow .flow-hub { display: inline-flex; gap: 4px; }
.cmd-flow img.glyph { width: 32px; height: 32px; }
.cmd-flow .flow-hub img.glyph { filter: drop-shadow(0 0 6px rgba(48, 185, 219, .55)); }
.cmd-flow .flow-wire { flex: 1; height: 2px; min-width: 12px; background: linear-gradient(90deg, rgba(48,185,219,.2), #30b9db); position: relative; }
.cmd-flow .flow-wire::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left: 6px solid #30b9db; border-right: 0; }
a.cmd.sketch .flow-wire { background: repeating-linear-gradient(90deg, #30b9db 0 5px, transparent 5px 9px); }

/* ---- getting started ---- */
.start { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px; margin-top: 40px; align-items: start; }
.next { display: grid; gap: 12px; }
a.next-card { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); text-decoration: none !important; transition: border-color .15s, transform .15s; }
a.next-card:hover { border-color: var(--cyan); transform: translateX(2px); }
a.next-card .ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #0b1a2c; border: 1px solid var(--line-2); }
a.next-card .ic img { width: 32px; height: 32px; }
a.next-card b { display: block; font: 600 16px/1.3 var(--f-body); }
a.next-card span { color: var(--fg-2); font-size: 14px; }

/* ---- credits ---- */
.credits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 36px; }
.credit { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: rgba(13, 23, 38, .7); }
.credit b { display: block; font: 600 15.5px/1.3 var(--f-body); color: var(--fg); }
.credit span { display: block; margin-top: 4px; font-size: 14px; color: var(--fg-2); line-height: 1.5; }

footer.foot { margin-top: 110px; padding: 40px 0 110px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
footer.foot .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
footer.foot p { margin: 0 0 6px; max-width: 56em; }
footer.foot .links { display: flex; gap: 18px; }

/* ---- small screens ---- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-visual { order: -1; }
  .stage-frame { width: min(420px, 100%); }
  .pillars, .cmd-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase, .start { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .nav nav a:not(.gh):not(.keep) { display: none; }
  .hero { padding-top: 22px; }
  .stage-frame { width: min(300px, 82%); padding: 7px; border-radius: 20px; }
  #stage { border-radius: 14px; }
  .scan { inset: 7px; border-radius: 14px; }
  .hint { display: none; }
  .headline { font-size: calc(clamp(34px, 10vw, 46px) * var(--display-scale)); }
  .headline.pxable .px-p { font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: 1em; line-height: inherit; }
  .hero-controls .fx { flex-basis: 100%; text-align: center; }
  .lede { font-size: 17px; }
  .pillars, .cmd-groups { grid-template-columns: minmax(0, 1fr); }
  section.block { padding-top: 72px; }
  #scroller { height: 68px; }
  footer.foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .cta .btn { flex: 1 1 auto; justify-content: center; }
}