html.gl{scroll-snap-type:y mandatory;background:#050505}
.gl body{background:#050505;overflow:visible}
.gl main{padding:0}
.gl .topbar{position:fixed;top:0;left:0;right:0;z-index:5;border-bottom:0;background:linear-gradient(#050505,#05050500)}
.gl-folio{font-family:"Favorit Mono",ui-monospace,monospace}
.gl-folio{position:fixed;right:28px;bottom:20px;z-index:5;font-size:11px;letter-spacing:1px;color:#555}

/* One moment per screen: the clip on the left, what it is and how we judge it on the right. */
.gl-page{min-height:100dvh;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr);gap:56px;align-items:center;padding:64px 56px 28px;box-sizing:border-box}
.gl-media{min-width:0;--w:min(100%,calc((100dvh - 250px) * 960 / 728))}
.gl-frame,.gl-lanes{width:var(--w);margin-left:auto;margin-right:auto}
.gl-frame{position:relative;aspect-ratio:960/728;background:#0d0d0d;border-radius:4px;overflow:hidden}
.gl-frame video,.gl-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gl-frame canvas{pointer-events:none}
.gl-error:not([hidden]){position:absolute;inset:auto 12px 12px;margin:0;padding:8px;background:#111d;color:#fff;font-size:13px}
.gl-text{max-width:480px}
.gl-moment h2{margin:14px 0 0;font-size:clamp(24px,2.3vw,34px);font-weight:400;letter-spacing:-.8px;line-height:1.12;color:#ededed}

/* Train score, then what makes the clip good (+) and bad (−) for training. */
.gl-grade{display:flex;align-items:center;gap:12px;margin:0}
.gl-grade b{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--c);border-radius:6px;font:500 30px/1 Inter,sans-serif;color:var(--c)}
.gl-grade span{display:flex;flex-direction:column;gap:2px;font:10px "Favorit Mono",ui-monospace,monospace;letter-spacing:1.4px;text-transform:uppercase;color:#777}
/* Under the video: the train score, then each hand's labels, then any tracking problem, with the playhead. */
.gl-lanes{position:relative;margin-top:12px;min-height:44px}
.gl-lane{display:grid;grid-template-columns:56px 1fr;align-items:center;height:18px;margin-bottom:3px}
.gl-lane>span{font:10px "Favorit Mono",ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase;color:#666}
.gl-lane>div{position:relative;height:100%;background:#0d0d0d;border-radius:2px;overflow:hidden}
.gl-lane i{position:absolute;top:0;bottom:0;box-sizing:border-box;padding:0 5px;border-right:1px solid #050505;font:normal 10px/18px "Favorit Mono",ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:clip}
.gl-lane .hold{background:#1f2937;color:#93c5fd}
.gl-lane .act{background:#3b0a3b;color:#f0abfc}
.gl-lane.two{height:37px}
.gl-lane.two i{bottom:auto;height:18px}
.gl-lane.two i.second{top:19px}
.gl-lane .ok{background:#4ade8055}
.gl-lane .flag{padding:0;border:0;background:#ff5050}
.gl-score{height:26px}
.gl-score svg{position:absolute;inset:0;width:100%;height:100%}
.gl-score path{fill:none;stroke:#ededed;stroke-width:1.5;vector-effect:non-scaling-stroke}
.gl-score line{stroke:#333;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.gl-head{position:absolute;top:0;bottom:3px;left:calc(56px + (100% - 56px) * var(--t,0));width:1px;background:#fff}
.gl-links{display:flex;gap:20px;margin:20px 0 0;font-size:13px}
.gl-links a{color:#ededed;border-bottom:1px solid #333}
.gl-links a:hover{border-color:#ff00ff}

/* Every moment: the skill switcher, then a dense grid of looping clips. */
.gl-next{grid-template-columns:1fr;justify-items:center;text-align:center}
.gl-next>div{width:min(100%,1100px)}
.gl-next h2{margin:0 0 20px;font-size:28px;font-weight:400;letter-spacing:-.6px;color:#ededed}
.gl-next p{max-width:600px;margin:0 auto 14px;font-size:16px;line-height:1.6;color:#999}
.gl-next .gl-cta{margin-top:10px}
.gl-next .gl-eps-intro{margin:56px auto 0}
.gl-cta{display:inline-block;padding:12px 20px;border:1px solid #ff00ff;border-radius:4px;font-size:15px;color:#ededed}
.gl-cta:hover{background:#ff00ff1f}
.gl-eps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:20px;text-align:left}
.gl-eps a{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#ededed}
.gl-eps img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;margin-bottom:6px;opacity:.85}
.gl-eps a:hover img{opacity:1}
.gl-eps b{font-weight:500}
.gl-eps small{font-size:12px;color:#777}
.gl-wall{scroll-snap-align:start;min-height:100dvh;padding:72px 6px 40px}
.gl-bar{padding:14px 0 6px}
/* Examples: plain text links under the filters; the one matching the current query is underlined. */
.gl-filters{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:0 22px 14px}
.gl-filters span{font:10px "Favorit Mono",ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase;color:#555}
.gl-filters button{flex:none;border:0;border-bottom:1px solid transparent;background:none;padding:2px 0;font-size:13px;color:#888;cursor:pointer}
.gl-filters button:hover{color:#ededed}
.gl-filters button[aria-pressed="true"]{color:#ededed;border-bottom-color:#ff00ff}
.gl-filters small{margin-left:5px;font-size:11px;opacity:.6}
.gl-q{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 22px 12px}
.gl-q label{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 10px;border:1px solid #262626;border-radius:4px;background:#0b0b0b}
.gl-q label.on{border-color:#ff00ff}
.gl-q span{font:10px "Favorit Mono",ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase;color:#777}
.gl-q select{field-sizing:content;max-width:200px;border:0;background:transparent;font-size:13px;color:#ededed;cursor:pointer}
.gl-q select option{background:#111}
.gl-q b{margin-left:auto;font:12px "Favorit Mono",ui-monospace,monospace;font-weight:400;color:#777}
.gl-q button{border:0;background:none;font-size:13px;color:#ededed;border-bottom:1px solid #333;cursor:pointer}
.gl-tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:row;gap:6px}
.gl-tile{position:relative;aspect-ratio:960/728;padding:0;border:0;border-radius:3px;overflow:hidden;background:#0d0d0d;text-align:left;cursor:pointer}
.gl-tile.big{grid-column:span 2;grid-row:span 2}
.gl-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gl-tile:hover video{transform:scale(1.04)}
.gl-desc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:10px;background:linear-gradient(transparent 15%,#000e)}
.gl-desc b{font-size:12px;font-weight:400;line-height:1.3;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gl-tile.big .gl-desc{padding:14px}
.gl-tile.big .gl-desc b{font-size:16px}
.gl-clip-meta{font:10px/1.4 "Favorit Mono",ui-monospace,monospace;color:#ccc}
.gl-tags{display:flex;flex-wrap:wrap;gap:5px;font-size:10px}
.gl-tags i{font:normal 10px "Favorit Mono",ui-monospace,monospace;letter-spacing:.6px;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid #ffffff33;color:#cfcfcf}

/* A wall tile, opened as a full moment page. */
.gl-view{width:min(1400px,94vw);max-width:none;max-height:94dvh;padding:0;border:1px solid #1f1f1f;border-radius:6px;background:#050505;color:#ededed}
.gl-view::backdrop{background:rgba(0,0,0,.8)}
.gl-view .gl-page{min-height:0;padding:40px}
.gl-x{position:absolute;top:10px;right:14px;z-index:1;padding:4px 10px;border:0;background:none;font-size:24px;color:#777;cursor:pointer}
.gl-x:hover{color:#ededed}

@media (max-width:900px){
  .gl-tiles{grid-template-columns:repeat(2,1fr)}
  .gl-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 12px 12px}
  .gl-wall{padding-top:60px}
  .gl-q{padding:0 12px 12px}
  .gl-view .gl-page{padding:40px 16px 24px}
  html.gl{scroll-snap-type:y proximity}
  .gl-page{grid-template-columns:1fr;gap:24px;padding:64px 16px 40px;align-content:start}
  .gl-text{max-width:none}
  .gl-folio{right:16px}
}


.gl-context{margin:10px 0 20px;font:11px/1.5 "Favorit Mono",ui-monospace,monospace;color:#999}

@media(max-width:600px){
  .gl-q label{min-height:44px;max-width:100%}
  .gl-q select{min-width:0;max-width:100%;font-size:16px}
  .gl-q button,.gl-filters button,.gl-text a{min-height:44px;display:inline-flex;align-items:center}
  .gl-filters{align-items:center}
  .gl-filters button{white-space:nowrap}
  .gl-tile,.gl-tile.big{aspect-ratio:auto;grid-column:auto;grid-row:auto;display:flex;flex-direction:column}
  .gl-tile video{position:static;aspect-ratio:960/728;height:auto;display:block}
  .gl-tile .gl-desc,.gl-tile.big .gl-desc{position:static;flex:1;background:#101010;padding:10px;gap:7px}
  .gl-tile .gl-desc b,.gl-tile.big .gl-desc b{font-size:13px;-webkit-line-clamp:3}
  .gl-clip-meta{font-size:10px}
  .gl-view{width:100%;max-height:100dvh;height:100dvh;margin:0;border:0;border-radius:0}
  .gl-view .gl-page{padding:56px 16px 24px}
  .gl-x{position:sticky;display:block;top:0;margin:0 0 -44px auto;right:0;width:44px;height:44px;background:#111;color:#ddd;z-index:2}
  .gl-folio{display:none}
}