/* The Chart: the OS's start screen, as a leaderboard page. A stage at the top: at rest the title over the grid; as
   you scroll into the board it becomes the piece in focus, playing behind a scrim, with rank, title, maker, views.
   Below, the board: one row per piece with a bar drawn to its views. The row in focus opens. */
#oschart { position: fixed; inset: 0; z-index: 45; background: var(--ink); color: var(--bone); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; transition: opacity .6s var(--ease), transform .7s var(--ease); }
#oschart::-webkit-scrollbar { display: none; }
#oschart.off { opacity: 0; transform: translateY(-3%); pointer-events: none; }
#oschart .ch-grid { position: fixed; inset: -60px 0 0; background-image: radial-gradient(rgba(255, 250, 248, .13) 1px, transparent 1.6px); background-size: 26px 26px; background-position: 13px 13px; pointer-events: none; transition: opacity .6s var(--ease); }
/* the stage stays while the board scrolls under it */
#oschart .ch-stage { position: sticky; top: 0; height: 60vh; min-height: 420px; z-index: 2; overflow: hidden; }
#oschart .ch-media { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
#oschart .ch-media .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease), transform 1.2s var(--ease); transform: scale(1.06); }
#oschart .ch-media .layer.on { opacity: 1; transform: scale(1); }
#oschart .ch-media .layer video, #oschart .ch-media .layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#oschart .ch-media .layer video { opacity: 0; transition: opacity .8s var(--ease); }
#oschart .ch-media .layer.playing video { opacity: 1; }
#oschart .ch-media .scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--ink) 0%, rgba(14, 15, 18, .72) 30%, rgba(14, 15, 18, .15) 62%, rgba(14, 15, 18, .35) 100%); }
/* the scan: a hairline that crosses the stage when the piece changes */
#oschart .ch-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bone); box-shadow: 0 0 16px rgba(255, 250, 248, .8); opacity: 0; pointer-events: none; }
#oschart .ch-scan.go { animation: ch-scan .7s var(--ease) forwards; }
@keyframes ch-scan { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(60vh); opacity: 0; } }
/* corner brackets: the frame of a window, drawn when the stage holds a piece */
#oschart .ch-corner { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(255, 250, 248, .55); opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease); }
#oschart .ch-corner.tl { left: 6vw; top: 84px; border-right: 0; border-bottom: 0; transform: translate(-8px, -8px); }
#oschart .ch-corner.tr { right: 6vw; top: 84px; border-left: 0; border-bottom: 0; transform: translate(8px, -8px); }
#oschart .ch-corner.bl { left: 6vw; bottom: 26px; border-right: 0; border-top: 0; transform: translate(-8px, 8px); }
#oschart .ch-corner.br { right: 6vw; bottom: 26px; border-left: 0; border-top: 0; transform: translate(8px, 8px); }
#oschart.deep .ch-corner { opacity: 1; transform: none; }
/* the title, at rest */
#oschart .ch-title-block { position: absolute; left: 6vw; right: 6vw; bottom: 34px; display: grid; gap: 12px; transition: opacity .45s var(--ease), transform .6s var(--ease); }
#oschart.deep .ch-title-block { opacity: 0; transform: translateY(-16px); pointer-events: none; }
#oschart .ch-title-block .eyebrow .t { color: var(--bone-70); }
#oschart .ch-title { margin: 0; font-family: 'Doto', var(--mono); font-weight: 800; font-size: clamp(34px, 3.7vw, 62px); letter-spacing: .04em; line-height: 1.05; text-transform: uppercase; max-width: 22ch; }
#oschart .ch-sub { margin: 0; font-size: 16px; color: var(--bone-70); max-width: 62ch; }
#oschart .ch-wm { position: absolute; right: 6vw; top: 100px; display: inline-flex; align-items: flex-end; gap: .1em; font-family: var(--logo); font-weight: 900; font-size: 26px; line-height: .9; letter-spacing: -.02em; color: var(--bone); }
#oschart .ch-wm .px { display: grid; grid-template-rows: repeat(3, 1fr); gap: .045em; height: .72em; margin-bottom: .03em; }
#oschart .ch-wm .px i { display: block; width: .16em; height: .16em; }
#oschart .ch-wm .px i:nth-child(1) { background: var(--r); } #oschart .ch-wm .px i:nth-child(2) { background: var(--g); } #oschart .ch-wm .px i:nth-child(3) { background: var(--b); }
/* the piece's copy on the stage, once the board is in view */
#oschart .ch-copy { position: absolute; left: 6vw; right: 6vw; bottom: 34px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: end; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
#oschart.deep .ch-copy { opacity: 1; transform: none; }
#oschart .ch-copy .rank { font-family: 'Doto', var(--mono); font-weight: 800; font-size: clamp(72px, 9vw, 132px); line-height: .85; color: var(--bone); text-shadow: 0 0 30px rgba(255, 250, 248, .25); }
#oschart .ch-copy .rank small { display: block; font-size: 12px; letter-spacing: .16em; color: var(--bone-45); font-family: var(--mono); font-weight: 500; margin-top: 8px; }
#oschart .ch-copy .words { display: grid; gap: 8px; min-width: 0; }
#oschart .ch-copy .eyebrow .t { color: var(--bone-70); }
#oschart .ch-copy h2 { margin: 0; font: 700 clamp(22px, 2.3vw, 36px)/1.15 var(--sans); letter-spacing: -.01em; color: var(--bone); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#oschart .ch-copy .by { display: grid; gap: 4px; } #oschart .ch-copy .ch-byline { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-70); }
#oschart .ch-copy .reads { display: flex; gap: 10px; }
#oschart .ch-read { min-width: 150px; padding: 12px 14px; border: 1px solid rgba(255, 250, 248, .16); border-radius: 6px; background: rgba(14, 15, 18, .62); display: grid; gap: 5px; }
#oschart .ch-read span { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-45); }
#oschart .ch-read b { font-family: 'Doto', var(--mono); font-weight: 800; font-size: 34px; line-height: 1; color: var(--bone); }
/* the board */
#oschart .ch-board { position: relative; z-index: 1; padding: 160px 6vw 40vh; display: grid; gap: 8px; }
#oschart .ch-row { all: unset; position: relative; display: grid; grid-template-columns: 64px 128px minmax(0, 1fr) 150px; align-items: center; gap: 22px; padding: 12px 16px; border: 1px solid rgba(255, 250, 248, .08); border-radius: 8px; background: rgba(21, 22, 26, .55); cursor: pointer; outline: none; transition: grid-template-columns .5s var(--ease), padding .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
#oschart .ch-row { animation: ch-in .8s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
@keyframes ch-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* a row that entered since the last visit waits for the board to settle, then slides in from the left; ease out, long tail, nothing bounces */
#oschart .ch-row.fresh { animation: ch-enter .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--rows) * 60ms + 420ms); }
#oschart .ch-row.fresh .bar i { animation-delay: calc(var(--rows) * 60ms + 900ms); }
@keyframes ch-enter { from { opacity: 0; transform: translateX(-28px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
#oschart .ch-title-block > .eyebrow { animation: ch-in .9s var(--ease) both; }
#oschart .ch-title .caret { display: inline-block; width: .5em; height: .82em; margin-left: .1em; vertical-align: -.04em; background: var(--bone); box-shadow: 0 0 12px rgba(255, 250, 248, .5); animation: ch-blink .8s steps(1) infinite; }
#oschart .ch-sub { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .8s var(--ease); } #oschart .ch-title-block.typed .ch-sub { opacity: 1; transform: none; }
#oschart .ch-row:hover { border-color: rgba(255, 250, 248, .2); }
#oschart .ch-row.on { grid-template-columns: 64px 208px minmax(0, 1fr) 150px; padding: 16px 18px; border-color: rgba(255, 250, 248, .35); background: rgba(21, 22, 26, .9); }
#oschart .ch-row .rk { font-family: 'Doto', var(--mono); font-weight: 800; font-size: 30px; line-height: 1; color: var(--bone-45); transition: color .3s; }
#oschart .ch-row.on .rk { color: var(--bone); text-shadow: 0 0 14px rgba(255, 250, 248, .35); }
#oschart .ch-row .win { position: relative; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
#oschart .ch-row .win img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.7) saturate(.85); transition: filter .5s var(--ease), transform .8s var(--ease); }
#oschart .ch-row.on .win img { filter: none; transform: scale(1.04); }
#oschart .ch-row .win .px { position: absolute; left: 8px; top: 8px; width: 6px; height: 6px; background: var(--g); box-shadow: 0 0 8px var(--g); }
#oschart .ch-row .body { display: grid; gap: 6px; min-width: 0; }
#oschart .ch-row .nm { font: 600 15px/1.25 var(--sans); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#oschart .ch-row.on .nm { white-space: normal; overflow: visible; }
#oschart .ch-row .by { font: 500 9.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#oschart .ch-row .by .new { color: var(--g); margin-left: 10px; }
#oschart .ch-row .by .new i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; vertical-align: 1px; background: var(--g); box-shadow: 0 0 8px var(--g); animation: ch-blink 1.2s steps(1) infinite; }
#oschart .ch-row .bar { position: relative; height: 2px; background: rgba(255, 250, 248, .1); border-radius: 1px; overflow: hidden; }
#oschart .ch-row .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: linear-gradient(to right, rgba(255, 250, 248, .35), var(--bone)); transform: scaleX(0); transform-origin: left; animation: ch-bar 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 200ms); }
@keyframes ch-bar { to { transform: none; } }
#oschart .ch-row .meta { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease); }
#oschart .ch-row.on .meta { max-height: 40px; opacity: 1; }
#oschart .ch-row .vw { text-align: right; font-family: 'Doto', var(--mono); font-weight: 800; font-size: 26px; line-height: 1; color: var(--bone); }
#oschart .ch-row .vw small { display: block; font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); margin-top: 6px; }
#oschart .ch-row .cn { position: absolute; width: 10px; height: 10px; border: 1px solid rgba(255, 250, 248, .6); opacity: 0; transition: opacity .35s var(--ease), transform .45s var(--ease); }
#oschart .ch-row .cn.tl { left: -1px; top: -1px; border-right: 0; border-bottom: 0; transform: translate(4px, 4px); }
#oschart .ch-row .cn.tr { right: -1px; top: -1px; border-left: 0; border-bottom: 0; transform: translate(-4px, 4px); }
#oschart .ch-row .cn.bl { left: -1px; bottom: -1px; border-right: 0; border-top: 0; transform: translate(4px, -4px); }
#oschart .ch-row .cn.br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; transform: translate(-4px, -4px); }
#oschart .ch-row.on .cn { opacity: 1; transform: none; }
/* the foot: keys and the way in */
#oschart .ch-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; padding: 18px 6vw 22px; display: flex; justify-content: space-between; align-items: center; gap: 24px; background: linear-gradient(to top, var(--ink) 55%, transparent); }
#oschart .ch-hint { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); display: flex; gap: 18px; }
#oschart .ch-hint b { color: var(--bone); font-weight: 500; border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; margin-right: 6px; }
#oschart .ch-begin { all: unset; cursor: pointer; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone); padding: 12px 18px; border: 1px solid rgba(255, 250, 248, .35); border-radius: 4px; background: rgba(21, 22, 26, .8); transition: border-color .3s, background .3s; }
#oschart .ch-begin:hover, #oschart .ch-begin:focus-visible { border-color: var(--bone); background: rgba(255, 250, 248, .06); }
#oschart .ch-loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-45); }
#oschart .ch-loading i { width: 6px; height: 6px; background: var(--bone-45); animation: ch-blink 1.1s steps(1) infinite; }
#oschart .ch-loading i:nth-child(2) { animation-delay: .35s; } #oschart .ch-loading i:nth-child(3) { animation-delay: .7s; }
@keyframes ch-blink { 50% { opacity: .15; } }
body.chart-open #dock, body.chart-open #hints { opacity: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #oschart .ch-row, #oschart .ch-row.fresh, #oschart .ch-title-block > .eyebrow, #oschart .ch-row .by .new i { animation: none; } #oschart .ch-sub { transition: none; } #oschart .ch-row .bar i { animation: none; transform: none; } #oschart .ch-scan.go { animation: none; } #oschart .ch-media .layer { transition: opacity .3s; transform: none; } }
@media (max-width: 900px) { #oschart .ch-row, #oschart .ch-row.on { grid-template-columns: 44px 96px minmax(0, 1fr); } #oschart .ch-row .vw { display: none; } #oschart .ch-copy { grid-template-columns: auto 1fr; } #oschart .ch-copy .reads { display: none; } }
#oschart .ch-maker { all: unset; cursor: pointer; margin-left: 10px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-70); border-bottom: 1px solid rgba(255, 250, 248, .25); } #oschart .ch-maker:hover { color: var(--bone); border-color: var(--bone); }