/* ZCYMP — OLED, one column, one typeface. Pure black; hairlines and white do all the work.
   Motion is spring physics driven by island.js. */

:root {
  --bg: #000;
  --raise: #0a0a0a;
  --line: #1f1f1f;
  --line2: #333;
  --text: #f3f5f7;
  --dim: #777;
  --mid: #a8a8a8;
  --col: 680px;
  --gutter: 20px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: #000; color: var(--text); color-scheme: dark; font: 400 16px/1.55 var(--sans); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
a { color: var(--text); text-decoration-color: var(--line2); text-underline-offset: 0.2em; transition: text-decoration-color .2s; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
::selection { background: #fff; color: #000; }
code { font-family: var(--mono); }
.wrap { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: var(--gutter); }

/* top bar */
.top { position: relative; display: flex; justify-content: space-between; align-items: center; max-width: var(--col); margin-inline: auto; padding: 52px var(--gutter) 0; }
.top a { color: var(--dim); text-decoration: none; font-size: .94rem; font-weight: 500; transition: color .2s; }
.top a:hover, .top .brand { color: #fff; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem !important; }
.brand img { border-radius: 8px; }
.top nav { display: flex; gap: 22px; }

/* island — --p is the spring (0 closed, 1 open, overshoots on purpose); --s is pull-down stretch */
.island { --p: 0; --s: 0px; position: fixed; z-index: 50; top: 0; left: 50%; translate: -50% 0; touch-action: pan-y;
  width: calc(184px + (min(360px, 100vw - 24px) - 184px) * var(--p));
  height: calc(34px + 110px * var(--p) + var(--s));
  border-radius: 0 0 calc(17px + 15px * var(--p)) calc(17px + 15px * var(--p));
  background: #000; color: #fff; overflow: hidden; cursor: default; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px #262626; will-change: width, height; }
.island .cover { position: absolute; border-radius: calc(7px + 6px * var(--p)); background: var(--art, linear-gradient(135deg, #fff, #555));
  left: calc(8px + 8px * var(--p)); top: calc(5px + 11px * var(--p)); width: calc(24px + 30px * var(--p)); height: calc(24px + 30px * var(--p)); }
.island .rest, .island .player { position: absolute; inset: 0; }
.island .rest { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 40px; opacity: clamp(0, 1 - var(--p) * 3, 1); }
.island .rest b { flex: 1; font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.island .player { opacity: clamp(0, (var(--p) - .35) * 2.6, 1); transform: translateY(calc((1 - var(--p)) * 8px)); pointer-events: none; }
.island.open .player { pointer-events: auto; }
.island.open .rest { pointer-events: none; }
.bars { display: flex; align-items: flex-end; gap: 2.5px; height: 12px; }
.bars i { width: 3px; height: 3px; border-radius: 2px; background: #fff; }
.island.playing .bars i { animation: bar .9s ease-in-out infinite alternate; }
.island.playing .bars i:nth-child(2) { animation-duration: .62s; animation-delay: -.3s; }
.island.playing .bars i:nth-child(3) { animation-duration: .78s; animation-delay: -.5s; }
@keyframes bar { to { height: 12px; } }
.island .meta { position: absolute; left: 80px; right: 54px; top: 19px; }
.island .meta b, .island .meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.island .meta b { font-size: .9rem; font-weight: 600; }
.island .meta span { font-size: .76rem; color: #8a8a8a; margin-top: 2px; }
.island button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; border-radius: 50%; transition: background .2s, color .2s; }
.island button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.island svg { display: block; }
.island .full { position: absolute; right: 14px; top: 18px; width: 28px; height: 28px; background: #1a1a1a; color: #bbb; }
.island .full:hover { background: #2a2a2a; color: #fff; }
.island .seek { position: absolute; left: 18px; right: 18px; top: 80px; display: flex; align-items: center; gap: 10px; font-size: .66rem; color: #777; font-variant-numeric: tabular-nums; }
.island .track { flex: 1; height: 4px; border-radius: 2px; background: #262626; overflow: hidden; }
.island .track i { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; }
.island .ctl { position: absolute; left: 0; right: 0; top: 98px; display: flex; justify-content: center; align-items: center; gap: 20px; }
.island .ctl button { width: 36px; height: 36px; color: #aaa; }
.island .ctl button:hover { color: #fff; }
.island .ctl .play { background: #fff; color: #000; }
.island .ctl .play:hover { color: #000; }
.island .i-pause, .island.playing .i-play { display: none; }
.island.playing .i-pause { display: block; }

/* hero */
.hero { padding-block: 72px 0; }
.hero h1 { font-size: clamp(2.1rem, 8vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.hero h1 span { color: var(--dim); }
.lede { margin-top: 22px; color: var(--mid); font-size: 1.08rem; line-height: 1.5; max-width: 48ch; }
.lede strong { color: #fff; font-weight: 600; }
.acts { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.fine { margin-top: 16px; font-size: .84rem; color: var(--dim); }
.hint { display: flex; gap: 8px; align-items: baseline; }
.hint::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #fff; translate: 0 -1px; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.no-hover { display: none; }
@media (hover: none) { .can-hover { display: none; } .no-hover { display: inline; } }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: .8em 1.4em; border-radius: 999px; background: #fff; color: #000; font-weight: 600; font-size: .96rem; text-decoration: none; border: 0; cursor: pointer; transition: transform .4s cubic-bezier(.3,1.7,.5,1), background .2s, color .2s, box-shadow .2s; }
.btn:hover { background: #e6e6e6; }
.btn:active { transform: scale(.95); transition-duration: .1s; }
.btn.quiet { background: none; color: var(--mid); padding-inline: .4em; font-weight: 500; }
.btn.quiet:hover { color: #fff; }
.btn.alt { background: none; color: #fff; box-shadow: inset 0 0 0 1px var(--line2); }
.btn.alt:hover { background: #fff; color: #000; box-shadow: none; }

.shot img { transition: opacity .5s; }
.shot { border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line); }
.stage { margin-top: 44px; }

/* sections */
.section { padding-block: 88px 0; }
.section h2 { font-size: 1.5rem; }
.intro { margin-top: 10px; color: var(--dim); max-width: 52ch; }
.intro a { color: var(--mid); }

.spec { margin: 26px 0 0; border-top: 1px solid var(--line); }
.spec > div { padding-block: 20px; border-bottom: 1px solid var(--line); }
.spec > div:hover dd { color: var(--mid); }
.spec dd { transition: color .3s; }
.spec dt { font-weight: 600; letter-spacing: -.015em; }
.spec dd { margin: 6px 0 0; color: var(--dim); }
.spec dd strong { color: #fff; font-weight: 600; }

.cut ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cut li { transition: color .2s, box-shadow .2s; }
.cut li:hover { color: var(--mid); box-shadow: inset 0 0 0 1px var(--line2); }
.cut li { padding: .38em .9em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); font-size: .9rem; text-decoration: line-through; text-decoration-color: #555; }

/* screens: a drag scroller with momentum */
.screens { margin: 26px calc(var(--gutter) * -1) 0; padding-inline: var(--gutter); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.screens::-webkit-scrollbar { display: none; }
.screens.drag { cursor: grabbing; scroll-snap-type: none; }
.screens.drag img { pointer-events: none; }
.screens figure { margin: 0; flex: none; width: min(86%, 560px); scroll-snap-align: start; }
.screens figcaption { margin-top: 12px; font-size: .88rem; color: var(--dim); }
.screens figcaption strong { color: #fff; font-weight: 600; }

.get { display: grid; gap: 12px; margin-top: 26px; }
.get article { background: var(--raise); border-radius: 20px; padding: 24px; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.get article { transition: box-shadow .3s, background .3s; }
.get article:hover { box-shadow: 0 0 0 1px var(--line2); background: #0f0f0f; }
.get article.main { box-shadow: 0 0 0 1px var(--line2); }
.get article.main:hover { box-shadow: 0 0 0 1px #555; }
.get h3 { font-size: 1.15rem; }
.get p { color: var(--dim); font-size: .94rem; }
.get .btn { margin-top: 6px; }
.sum { margin-top: 4px !important; font-size: .72rem !important; color: #555 !important; overflow-wrap: anywhere; line-height: 1.5; }
.sum code { color: #777; cursor: copy; transition: color .2s; }
.sum code:hover { color: #bbb; }
.sum.ok code { color: #fff; }
.notes { list-style: none; margin: 22px 0 0; padding: 0; color: var(--dim); font-size: .94rem; }
.notes li { padding-block: 14px; border-top: 1px solid var(--line); }
.notes strong { color: #fff; font-weight: 600; }

.credits { margin-top: 96px; border-top: 1px solid var(--line); padding-block: 40px 56px; }
.credits .by { font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; }
.credits dl { margin: 26px 0 0; display: grid; gap: 18px; }
.credits dt { font-weight: 600; font-size: .9rem; }
.credits dd { margin: 2px 0 0; color: var(--dim); font-size: .86rem; }
.credits .legal { margin-top: 30px; font-size: .78rem; color: #555; }
.credits a { color: var(--mid); }

/* docs: same column as every page */
.docs { padding-block: 64px 0; }
.docs aside { margin-bottom: 40px; }
.docs aside ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.docs aside a { display: block; padding: .38em .9em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); text-decoration: none; font-size: .88rem; transition: color .2s, box-shadow .2s, background .2s, transform .35s cubic-bezier(.3,1.7,.5,1); }
.docs aside a:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--line2); }
.docs aside a:active { transform: scale(.95); }
.docs aside a.on { background: #fff; color: #000; box-shadow: none; }
.docs article h1 { font-size: clamp(2.1rem, 8vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.docs article > .lede { margin-top: 16px; }
.docs article h2 { font-size: 1.4rem; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.docs article h3 { font-size: 1.02rem; margin-top: 28px; }
.docs article p, .docs article ul, .docs article ol.steps, .docs article table { margin-top: 12px; }
.docs article p, .docs article li { color: var(--mid); }
.docs article ul, .docs article ol.steps { padding-left: 1.2em; }
.docs article li { margin-top: 6px; }
.docs article li::marker { color: #555; }
.docs code { font-size: .85em; background: #151515; padding: .14em .45em; border-radius: 6px; overflow-wrap: anywhere; color: #ddd; }
.docs pre { margin: 14px 0 0; background: #0a0a0a; padding: 16px 18px; border-radius: 14px; overflow-x: auto; font-size: .85rem; line-height: 1.55; box-shadow: 0 0 0 1px var(--line); }
.docs pre code { background: none; padding: 0; }
.docs table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.docs th, .docs td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); color: var(--mid); }
.docs th { color: #fff; font-weight: 600; white-space: nowrap; }
.docs kbd { font: .8em var(--mono); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; padding: .1em .5em; background: #0f0f0f; white-space: nowrap; color: #ddd; }
.callout { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: var(--raise); box-shadow: 0 0 0 1px var(--line); color: var(--mid); }
.callout strong { color: #fff; }
.docs .table-wrap, .docs pre { max-width: 100%; }

.lost { min-height: 62vh; display: grid; align-content: center; gap: 18px; }
.lost h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); font-weight: 800; letter-spacing: -.045em; }
.lost p { color: var(--dim); }


/* final polish */
html { text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
.btn { gap: 8px; }
.btn svg { flex: none; transition: transform .4s cubic-bezier(.3,1.7,.5,1); }
.btn:hover svg { transform: translateY(2px); }
.top a[aria-current] { color: #fff; }
.top nav a { position: relative; }
.top nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: #fff; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #333; cursor: pointer; transition: width .45s cubic-bezier(.3,1.7,.5,1), background .25s; }
.dots button:hover { background: #666; }
.dots button.on { width: 20px; background: #fff; }
pre { scrollbar-width: thin; scrollbar-color: #333 transparent; }
img { -webkit-user-drag: none; }