/* ================================================================ Hugging Face deck runtime CSS. Palette + typography are set as CSS variables in :root and can be overridden per-deck via the deck's template.md → injected into the element inline. ================================================================ */ :root{ /* HF brand palette (defaults; overridable per deck) */ --bg:#0a0b12; --bg2:#12131f; --ink:#e7e9f3; --muted:#9aa0bd; --faint:#5b6187; --hf:#FFD21E; --hf-deep:#FF9D0B; --hf-dim:rgba(255,210,30,.12); --accent:#30a2ff; --accent-dim:rgba(48,162,255,.15); --good:#21de75; --warn:#ff6b6b; --line:rgba(255,255,255,.08); --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif; --ease:cubic-bezier(.4,0,.2,1); --dur:.6s; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background:var(--bg); color:var(--ink); font-family:var(--sans); overflow:hidden; -webkit-font-smoothing:antialiased; user-select:none; cursor:default; } #app{position:fixed; inset:0; overflow:hidden} /* backdrop */ #world{position:absolute; inset:0; z-index:0; background: radial-gradient(80% 60% at 15% 0%, var(--hf-dim), transparent 60%), radial-gradient(70% 60% at 100% 100%, rgba(255,157,11,.08), transparent 60%), linear-gradient(180deg,#12110b,#0a0b12 60%); } .brand-tag{position:absolute; top:26px; left:30px; display:inline-flex; align-items:center; gap:10px; font:700 12px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--hf); opacity:.75} .brand-tag img{height:22px; width:auto; display:block} .venue-tag{position:absolute; top:26px; right:30px; font:600 11px/1.4 var(--mono); letter-spacing:.06em; color:var(--faint); text-align:right} .venue-tag b{color:var(--muted); font-weight:700} /* scene container */ #scene{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:80px 4vw 90px} .pane{width:100%; max-width:1500px; opacity:0; transform:translateY(18px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .pane.in{opacity:1; transform:none} /* HUD */ #hud{position:absolute; z-index:6; inset:0; pointer-events:none} #act{position:absolute; bottom:26px; left:30px; font:700 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted)} #counter{position:absolute; bottom:26px; right:30px; font:600 11px/1 var(--mono); color:var(--faint); letter-spacing:.14em} #progress{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:7px; pointer-events:auto} .dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14); cursor:pointer; transition:background .3s, transform .3s} .dot:hover{transform:scale(1.3)} .dot.on{background:var(--hf); box-shadow:0 0 12px var(--hf)} /* Deploy button (top-right, subtle) */ #deploy-btn{position:absolute; top:26px; right:30px; z-index:8; padding:8px 14px; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted); font:700 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; pointer-events:auto; opacity:0; transition:all .3s var(--ease)} #deploy-btn.ready{opacity:1} #deploy-btn:hover{color:var(--hf); border-color:var(--hf); background:rgba(255,210,30,.08)} #deploy-btn.busy{color:var(--hf); border-color:var(--hf); background:rgba(255,210,30,.12); pointer-events:none} #deploy-btn.ok{color:var(--good); border-color:var(--good); background:rgba(33,222,117,.1)} #deploy-btn.err{color:var(--warn); border-color:var(--warn); background:rgba(255,107,107,.1)} /* Deploy modal */ #deploy-modal{position:fixed; inset:0; z-index:20; background:rgba(10,11,18,.85); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px} #deploy-modal.open{display:flex} .dm-box{width:100%; max-width:520px; padding:28px 30px; border:1px solid var(--line); border-radius:16px; background:var(--bg); box-shadow:0 40px 100px -20px rgba(0,0,0,.6)} .dm-box h3{margin-bottom:8px} .dm-box .dm-desc{color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:18px} .dm-box label{display:block; font:700 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:6px} .dm-box input{width:100%; padding:10px 12px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px; color:var(--ink); font:600 14px/1 var(--mono); outline:none; user-select:text; cursor:text} .dm-box input:focus{border-color:var(--hf)} .dm-box .dm-check{margin-top:12px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px} .dm-box .dm-check input{width:auto} .dm-box .dm-actions{margin-top:22px; display:flex; gap:10px; justify-content:flex-end} .dm-box button{padding:10px 18px; border-radius:8px; font:700 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--muted); transition:all .2s} .dm-box button:hover{color:var(--ink); border-color:rgba(255,255,255,.2)} .dm-box button.primary{background:var(--hf); color:#1a1030; border-color:var(--hf)} .dm-box button.primary:hover{background:var(--hf-deep); border-color:var(--hf-deep); color:#1a1030} .dm-box .dm-status{margin-top:14px; font:600 12px/1.4 var(--mono); color:var(--muted); min-height:1em} .dm-box .dm-status.ok{color:var(--good)} .dm-box .dm-status.err{color:var(--warn)} /* typography */ h1{font-size:clamp(30px,5.4vw,72px); font-weight:800; line-height:1.02; letter-spacing:-.02em} h2{font-size:clamp(24px,3.6vw,46px); font-weight:750; line-height:1.06; letter-spacing:-.015em} h3{font-size:clamp(18px,2.2vw,28px); font-weight:700; line-height:1.15; letter-spacing:-.01em} .kicker{font:700 12px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--hf); margin-bottom:20px} .ja{font:600 clamp(13px,1.4vw,17px)/1.45 var(--mono); color:var(--hf-deep); letter-spacing:.02em; margin-top:10px; opacity:.92} .section-title .ja{margin-top:18px; font-size:clamp(15px,1.6vw,19px)} .pill .tja{font:500 12px/1.4 var(--mono); color:var(--hf-deep); margin-top:4px; letter-spacing:.02em; opacity:.9} .lead{font-size:clamp(16px,1.9vw,22px); color:var(--muted); line-height:1.5; max-width:60ch} .tiny{font:600 11px/1.3 var(--mono); letter-spacing:.04em; color:var(--faint)} .accent{color:var(--hf)} .accent-o{color:var(--hf-deep)} .accent-b{color:var(--accent)} .good{color:var(--good)} .mono{font-family:var(--mono)} .ic-inline{height:1em; width:auto; vertical-align:-0.16em; margin:0 .07em; display:inline-block} /* reusable bits */ .grid2{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center} .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} .grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px} @media(max-width:900px){.grid2,.grid3,.grid4{grid-template-columns:1fr; gap:22px}} .chiprow{display:flex; flex-wrap:wrap; gap:9px; margin-top:8px} .chip{font:600 12.5px/1 var(--mono); padding:8px 12px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--muted); white-space:nowrap} .chip b{color:var(--ink)} .chip.h{border-color:rgba(255,210,30,.4); color:var(--hf)} .title-badge{display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--line); border-radius:100px; font:600 13px/1 var(--mono); color:var(--muted); margin-bottom:26px; background:rgba(255,255,255,.02)} .title-badge img{height:18px} /* stat blocks */ .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:16px} @media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{padding:22px 22px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(255,210,30,.05),rgba(255,255,255,.01)); opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .stat.show{opacity:1; transform:none} .stat .n{font:800 clamp(28px,4.2vw,56px)/1 var(--sans); color:var(--hf); letter-spacing:-.02em} .stat .u{font:600 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:12px} .stat .d{font:500 clamp(12px,1.2vw,14px)/1.45 var(--sans); color:var(--faint); margin-top:8px} /* Stats scene with a hero chart on the left */ .stats-with-chart{display:grid; grid-template-columns:1.4fr 1fr; gap:28px; margin-top:22px; align-items:stretch} .stats-with-chart.stacked{grid-template-columns:1fr; gap:18px} @media(max-width:900px){.stats-with-chart{grid-template-columns:1fr}} /* Stacked layout: let the chart take the full pane width. A generous max-height keeps everything on-screen; the banner below stays compact. */ .stats-with-chart.stacked .stats-chart{width:100%; margin-inline:auto} .stats-with-chart.stacked .growth-svg{width:100%; height:auto; max-height:62vh} /* Big single-stat banner — one horizontal line with the number and caption side-by-side */ .stats-banner{padding:16px 32px; border:1px solid rgba(255,210,30,.4); border-radius:14px; background:linear-gradient(135deg, rgba(255,210,30,.14), rgba(255,157,11,.05)); box-shadow:0 0 50px -20px var(--hf); display:flex; align-items:baseline; justify-content:center; gap:16px; flex-wrap:wrap; opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .stats-banner.show{opacity:1; transform:none} .stats-banner .n{font:800 clamp(28px,4vw,48px)/1 var(--sans); color:var(--hf); letter-spacing:-.02em} .stats-banner .u{font:600 clamp(13px,1.5vw,20px)/1.35 var(--sans); color:var(--ink); margin-top:0; letter-spacing:.01em} .stats-chart{position:relative; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,#12111f,#0c0d18); overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.5); padding:18px 20px 24px; opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .stats-chart.show{opacity:1; transform:none} .stats-chart.raster{padding:0; background:#fff} .stats-chart.raster img{display:block; width:100%; height:auto} .stats-chart .source{position:absolute; bottom:8px; right:12px; font:600 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); background:rgba(10,11,18,.7); padding:4px 8px; border-radius:5px} .stats-chart.raster .source{color:#5b5b70; background:rgba(255,255,255,.7)} /* Native SVG growth chart with milestone markers. Timing story (mystery = the speculative extension of the curve): 0.2s – 2.0s solid growth line strokes in 0.8s – 2.4s milestone avatars / dots / labels fade in in sync 2.0s – 3.0s dashed mystery line fades in as if the chart kept going 3.0s – 3.6s mystery dot, avatar, cycling images and side label appear The `.mystery-elem` class is applied by the builder to every element that belongs to a `mystery: true` milestone; it bumps the entrance delay so those parts land AFTER the mystery segment of the line has finished. */ .growth-svg{display:block; width:100%; height:auto; overflow:visible} .growth-svg .grow-line{stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 1.8s var(--ease) .2s forwards} .growth-svg .grow-line-mystery{opacity:0; animation:fadeIn 1s var(--ease) 2s forwards} .growth-svg .grow-area,.growth-svg .grow-dot,.growth-svg .grow-lbl,.growth-svg .grow-count, .growth-svg .grow-marker,.growth-svg .grow-avatar{opacity:0; animation:fadeIn .6s var(--ease) forwards} .growth-svg .grow-area{animation-delay:.6s} .growth-svg .grow-marker{animation-delay:1.6s; animation-duration:.4s} .growth-svg .grow-dot{animation-delay:1.7s; animation-duration:.4s} .growth-svg .grow-avatar{animation-delay:1.9s; animation-duration:.5s} .growth-svg .grow-lbl,.growth-svg .grow-count{animation-delay:2.1s; animation-duration:.5s} /* Everything belonging to the mystery milestone waits for the dashed line */ .growth-svg .mystery-elem{animation-delay:3.0s !important; animation-duration:.6s !important} .growth-svg .mystery-elem.grow-marker{animation-delay:3.0s !important} .growth-svg .mystery-elem.grow-dot{animation-delay:3.1s !important} .growth-svg .mystery-elem.grow-avatar{animation-delay:3.2s !important} .growth-svg .mystery-elem.grow-side{animation-delay:3.4s !important} .reduce .growth-svg *{animation:none!important; stroke-dashoffset:0!important; opacity:1!important} .growth-svg .grow-title{font:800 15px/1 var(--sans); fill:var(--ink); letter-spacing:-.01em} .growth-svg .grow-lbl{font:700 11px/1.15 var(--sans); fill:var(--ink)} .growth-svg .grow-count{font:800 12px/1 var(--sans); fill:var(--hf); letter-spacing:-.01em} .growth-svg .grow-axis{font:600 10px/1 var(--mono); fill:var(--faint); letter-spacing:.02em} .growth-svg .grow-side{font:700 12px/1.2 var(--mono); fill:var(--hf); letter-spacing:.03em; opacity:0; animation:fadeIn .5s var(--ease) 2.1s forwards} /* Cycling avatars for the mystery milestone. `.on` = currently visible; JS toggles the class after render at a fixed interval to cross-fade. `animation:none` is defensive so the sibling `.grow-avatar` fadeIn (which uses `forwards` and would freeze everything at opacity:1) can never leak in. */ .growth-svg .cycle-img{opacity:0; transition:opacity .6s ease-in-out; animation:none !important} .growth-svg .cycle-img.on{opacity:1} .stats-side{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start} .stats-side .stat{padding:18px 20px} .stats-side .stat .n{font-size:clamp(24px,3vw,38px)} .stats-side .stat.hero{grid-column:1 / -1; background:linear-gradient(135deg,rgba(255,210,30,.14),rgba(255,157,11,.06)); border-color:rgba(255,210,30,.4); box-shadow:0 0 30px -14px var(--hf)} .stats-side .stat.hero .n{font-size:clamp(30px,3.5vw,44px)} /* pill list */ .pills{display:flex; flex-direction:column; gap:14px; margin-top:6px} .pill{display:flex; gap:16px; align-items:flex-start; padding:16px 18px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .pill.show{opacity:1; transform:none} .pill .num{font:800 15px/1 var(--mono); color:var(--hf); min-width:26px; padding-top:2px} .pill .t{font-weight:650; font-size:clamp(15px,1.6vw,19px); color:var(--ink)} .pill .d{font-size:clamp(12px,1.35vw,15px); color:var(--muted); margin-top:5px; line-height:1.5} .pill .d code{font-family:var(--mono); color:var(--ink); font-size:.92em} .pill.hero{border-color:rgba(255,210,30,.45); background:rgba(255,210,30,.06); box-shadow:0 0 30px -14px var(--hf)} /* team cards */ .team{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:10px} @media(max-width:1100px){.team{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){.team{grid-template-columns:repeat(2,1fr)}} .tcard{padding:18px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .tcard.show{opacity:1; transform:none} .tcard .av{width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--hf),var(--hf-deep)); margin-bottom:14px; display:flex; align-items:center; justify-content:center; font:800 22px/1 var(--sans); color:#1a1030; border:2px solid rgba(255,255,255,.1); overflow:hidden; position:relative} .tcard .av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block} .tcard .nm{font-weight:700; font-size:15px; letter-spacing:-.01em} .tcard .role{font:600 11px/1.35 var(--mono); color:var(--hf); margin-top:6px; letter-spacing:.02em; text-transform:none} .tcard .bio{font:500 12px/1.5 var(--sans); color:var(--muted); margin-top:10px} .tcard.lead .av{background:linear-gradient(135deg,#fff,var(--hf))} /* concentric diagram */ .concentric{position:relative; height:clamp(360px,52vh,520px); display:flex; align-items:center; justify-content:center} .ring{position:absolute; border-radius:50%; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .8s var(--ease); opacity:0; transform:scale(.94)} .ring.show{opacity:1; transform:scale(1)} .ring.r1{width:180px; height:180px; background:radial-gradient(circle,rgba(255,210,30,.18),rgba(255,210,30,.04)); border-color:rgba(255,210,30,.55); box-shadow:0 0 40px -10px var(--hf)} .ring.r2{width:320px; height:320px; border-color:rgba(255,157,11,.4)} .ring.r3{width:460px; height:460px; border-color:rgba(48,162,255,.28)} .ring.r4{width:600px; height:600px; border-color:rgba(255,255,255,.09)} .ring .lbl{position:absolute; font:700 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); background:var(--bg); padding:6px 12px; border-radius:100px; border:1px solid var(--line); white-space:nowrap} .ring.r1 .lbl{color:var(--hf); border-color:rgba(255,210,30,.4); top:50%; transform:translate(-50%,-50%); left:50%; background:transparent; border:none; font-size:13px} .ring.r1 .lbl b{display:block; font:800 15px/1.2 var(--sans); letter-spacing:-.01em; text-transform:none; color:var(--ink); margin-top:4px} .ring.r2 .lbl{top:-1px; left:50%; transform:translate(-50%,-50%); color:var(--hf-deep); border-color:rgba(255,157,11,.4)} .ring.r3 .lbl{bottom:-1px; left:50%; transform:translate(-50%,50%); color:var(--accent); border-color:rgba(48,162,255,.35)} .ring.r4 .lbl{top:50%; right:-1px; transform:translate(50%,-50%); color:var(--muted)} /* logos row */ .logos{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px} .logo{padding:8px 14px; border:1px solid var(--line); border-radius:8px; font:600 12.5px/1 var(--mono); color:var(--muted); background:rgba(255,255,255,.02); opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease)} .logo.show{opacity:1; transform:none} .logo.hi{color:var(--hf); border-color:rgba(255,210,30,.4)} /* two pillars */ .pillars-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px} @media(max-width:900px){.pillars-grid{grid-template-columns:1fr}} .pcol{padding:26px 28px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,rgba(255,210,30,.05),rgba(255,255,255,.01)); opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .pcol.show{opacity:1; transform:none} .pcol .badge{display:inline-block; padding:4px 10px; border-radius:100px; border:1px solid rgba(255,210,30,.4); font:700 10px/1 var(--mono); letter-spacing:.12em; color:var(--hf); text-transform:uppercase; margin-bottom:14px} .pcol.main{border-color:rgba(255,210,30,.45); box-shadow:0 0 40px -18px var(--hf)} .pcol.main .badge{background:rgba(255,210,30,.12)} .pcol h3{margin-bottom:12px} .pcol .body{font-size:15.5px; color:var(--muted); line-height:1.6} .pcol ul{margin-top:12px; padding-left:18px} .pcol li{margin:6px 0; color:var(--muted); font-size:14.5px} /* section divider */ .section-title{text-align:center} .section-title .n{font:800 clamp(80px,14vw,180px)/1 var(--sans); color:var(--hf); opacity:.18; letter-spacing:-.03em; margin-bottom:-30px} .section-title h1{margin-top:20px} .section-title .sub{font-size:clamp(16px,1.9vw,22px); color:var(--muted); margin-top:18px} /* framed figure */ .figure{margin-top:22px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .figure.priceshot{background:#0e0f1a; border-color:rgba(255,255,255,.05); box-shadow:0 30px 60px -30px rgba(0,0,0,.6)} .figure.priceshot img{background:#0e0f1a} .figure.show{opacity:1; transform:none} .figure img{display:block; width:100%; height:auto} .figure.cap{position:relative} .figure .capbar{position:absolute; top:12px; left:14px; font:700 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); background:rgba(255,255,255,.85); padding:6px 10px; border-radius:6px; border:1px solid rgba(0,0,0,.06)} /* quote */ .quote{padding:26px 30px; border-left:3px solid var(--hf); background:rgba(255,210,30,.04); border-radius:0 12px 12px 0; margin-top:18px} .quote .q{font:500 clamp(16px,1.8vw,22px)/1.5 var(--sans); color:var(--ink); font-style:italic} .quote .a{margin-top:14px; font:600 12.5px/1 var(--mono); color:var(--hf); letter-spacing:.06em} /* Business (Enterprise + Pricing) */ .bizgrid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:26px} @media(max-width:900px){.bizgrid{grid-template-columns:1fr}} .biz{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.02); opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease)} .biz.show{opacity:1; transform:none} .biz:hover{border-color:rgba(255,210,30,.35)} .bizimg{aspect-ratio:1200/630; background:#0e0f1a; overflow:hidden} .bizimg img{display:block; width:100%; height:100%; object-fit:cover} .bizbody{padding:16px 18px} .biztag{font:700 15px/1 var(--sans); color:var(--hf); letter-spacing:.01em} .bizdesc{font:500 13.5px/1.5 var(--sans); color:var(--muted); margin-top:7px} /* Products (Buckets + Jobs) + tech (CDN, Xet) */ .proddgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:26px} @media(max-width:900px){.proddgrid{grid-template-columns:1fr}} .prod{padding:22px 24px; border:1px solid rgba(255,210,30,.4); border-radius:14px; background:linear-gradient(180deg,rgba(255,210,30,.08),rgba(255,255,255,.01)); opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .prod.show{opacity:1; transform:none} .prodname{font:800 22px/1.1 var(--sans); color:var(--ink); letter-spacing:-.01em} .prodkind{font:700 11px/1 var(--mono); color:var(--hf); letter-spacing:.14em; text-transform:uppercase; margin-top:8px} .prodbody{font:500 14px/1.55 var(--sans); color:var(--muted); margin-top:14px} .tech{margin-top:24px; padding:18px 22px; border:1px dashed var(--line); border-radius:14px; background:rgba(255,255,255,.015); opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .tech.show{opacity:1; transform:none} .tech .tcap{font:600 11px/1 var(--mono); color:var(--faint); letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px} .tech .trow{display:grid; grid-template-columns:1fr 1fr; gap:22px} @media(max-width:800px){.tech .trow{grid-template-columns:1fr}} .titem .tname{font:800 17px/1 var(--sans); color:var(--hf-deep); letter-spacing:-.01em} .titem .tdesc{font:500 13.5px/1.5 var(--sans); color:var(--muted); margin-top:6px} /* Ecosystem "do it once" diagram */ .eco-hero{margin:24px auto 0; padding:20px 30px 22px; border:1.5px solid var(--hf); border-radius:16px; background:radial-gradient(120% 200% at 50% -30%, rgba(255,210,30,.18), rgba(255,210,30,.02) 60%); box-shadow:0 0 70px -22px var(--hf); display:flex; align-items:center; justify-content:center; gap:20px; max-width:820px; text-align:left; position:relative; opacity:0; transform:translateY(12px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .eco-hero.show{opacity:1; transform:none} .eco-hero .eco-hf{height:44px; width:auto; flex:none} .eco-hero .eco-body{display:flex; flex-direction:column; gap:4px} .eco-hero .eco-name{font:800 clamp(20px,2.4vw,28px)/1 var(--mono); color:var(--ink); letter-spacing:-.01em} .eco-hero .eco-tag{font:600 clamp(11px,1.2vw,14px)/1.3 var(--sans); color:var(--muted); letter-spacing:.01em} .eco-hero .eco-tag b{color:var(--hf); font-weight:700} .eco-connector{display:flex; justify-content:center; margin-top:8px; height:24px; position:relative} .eco-connector svg{width:min(80%,720px); height:100%; overflow:visible} .eco-connector .cline{stroke:var(--hf); stroke-width:1.5; fill:none; opacity:.55; stroke-dasharray:120; stroke-dashoffset:120; animation:ecoDraw 1s var(--ease) .4s forwards} @keyframes ecoDraw{to{stroke-dashoffset:0}} .reduce .eco-connector .cline{stroke-dashoffset:0!important; animation:none} .eco-cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; margin-top:2px} @media(max-width:900px){.eco-cols{grid-template-columns:1fr}} .eco-col{padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); max-height:46vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,210,30,.3) transparent; opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .eco-col.show{opacity:1; transform:none} .eco-col::-webkit-scrollbar{width:6px} .eco-col::-webkit-scrollbar-track{background:transparent} .eco-col::-webkit-scrollbar-thumb{background:rgba(255,210,30,.25); border-radius:6px} .eco-col::-webkit-scrollbar-thumb:hover{background:rgba(255,210,30,.45)} .eco-col.scrollable{position:relative} .eco-col.scrollable::after{content:""; position:sticky; bottom:0; left:0; right:0; display:block; height:24px; margin-top:-24px; pointer-events:none; background:linear-gradient(0deg, rgba(10,11,18,.85), transparent)} .eco-cap{font:700 11.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; padding-bottom:8px; border-bottom:1px dashed var(--line); display:flex; align-items:baseline; justify-content:space-between; gap:8px} .eco-cap b{color:var(--hf); font-weight:800} .eco-cap .cja{font:500 10px/1 var(--mono); color:var(--hf-deep); letter-spacing:.06em; text-transform:none; opacity:.85} .eco-grid{display:grid; gap:7px} .eco-grid.three{grid-template-columns:repeat(3,1fr)} .eco-grid.one{grid-template-columns:1fr} .eco-logo{display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.96); min-height:44px; overflow:hidden; opacity:0; transform:scale(.94); transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .3s, box-shadow .3s} .eco-logo.show{opacity:1; transform:none} .eco-logo:hover{border-color:var(--hf); box-shadow:0 0 20px -8px var(--hf)} .eco-logo img{width:28px; height:28px; object-fit:contain; flex:none; border-radius:5px} .eco-logo .name{font:700 11px/1.15 var(--sans); color:#1a1030; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .eco-grid.one .eco-logo{min-height:50px} .eco-grid.one .eco-logo img{width:32px; height:32px} .eco-grid.one .eco-logo .name{font-size:12px} .eco-logo.hf{background:linear-gradient(135deg,#FFD21E 0%,#FF9D0B 100%); border-color:rgba(255,157,11,.55)} .eco-logo.hf .name{color:#1a1030; font-weight:800} .eco-logo.hf img{background:transparent} /* Brand pair (PyTorch Day) */ .brandpair{display:inline-flex; align-items:center; gap:24px; margin:8px 0 4px} .brandpair .blogo{height:clamp(60px,10vh,96px); width:auto; display:block} .brandpair .blogo.torch{filter:brightness(1.15)} .brandpair .x{font:300 clamp(36px,6vw,64px)/1 var(--sans); color:var(--faint)} /* Modular timeline chart */ .chart{margin-top:22px; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(255,210,30,.03),rgba(48,162,255,.02)); box-shadow:0 30px 60px -30px rgba(0,0,0,.5)} .chart svg{display:block; width:100%; height:auto} .chart svg .lineTot,.chart svg .lineMod{stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 1.8s var(--ease) .2s forwards} .chart svg .lineMod{animation-delay:.9s; animation-duration:1.4s} .chart svg .areaTot,.chart svg .areaMod,.chart svg .dotTot,.chart svg .dotMod, .chart svg .marker,.chart svg .markerL{opacity:0; animation:fadeIn .8s var(--ease) 1.3s forwards} .chart svg .areaTot{animation-delay:1s} .chart svg .dotMod{animation-delay:1.9s} @keyframes draw{to{stroke-dashoffset:0}} @keyframes fadeIn{to{opacity:1}} .reduce .chart svg *{animation:none!important; stroke-dashoffset:0!important; opacity:1!important} .legend2{display:flex; gap:24px; margin-top:14px; justify-content:center; font:600 12.5px/1 var(--mono); color:var(--muted)} .legend2 .leg{display:inline-flex; align-items:center; gap:8px} .legend2 .sw{width:14px; height:14px; border-radius:4px; display:inline-block} .legend2 .sw.hf{background:#FFD21E} .legend2 .sw.ac{background:#30a2ff} /* Hub landing cards */ .hubgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px} .hubgrid.four{grid-template-columns:repeat(2,1fr); gap:14px} @media(max-width:900px){.hubgrid,.hubgrid.four{grid-template-columns:1fr}} .hubcard{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.02); opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease)} .hubcard.show{opacity:1; transform:none} .hubcard:hover{border-color:rgba(255,210,30,.35)} .hubimg{aspect-ratio:1200/630; background:#0e0f1a; overflow:hidden} .hubimg img{display:block; width:100%; height:100%; object-fit:cover} .hubbody{padding:14px 16px} .hubname{font:700 15px/1 var(--sans); color:var(--hf); letter-spacing:.01em} .hubdesc{font:500 13px/1.5 var(--sans); color:var(--muted); margin-top:6px} .hublist{list-style:none; margin:12px 0 0; padding:0} .hublist li{position:relative; padding-left:16px; margin:6px 0; font:500 12.5px/1.5 var(--sans); color:var(--muted)} .hublist li::before{content:""; position:absolute; left:4px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--hf); opacity:.8} .hublist li b{color:var(--ink); font-weight:700} /* Hub in "columns" layout: category header + stack of sub-cards */ .hubgrouplist{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px} @media(max-width:900px){.hubgrouplist{grid-template-columns:1fr}} .hubgroup{display:flex; flex-direction:column; gap:10px; opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .hubgroup.show{opacity:1; transform:none} .hubgroup-head{padding:0 0 14px; border-bottom:1px solid var(--line); margin-bottom:8px} .hubgroup-thumb{aspect-ratio:1200/630; border-radius:10px; overflow:hidden; background:#0e0f1a; border:1px solid var(--line); margin-bottom:12px} .hubgroup-thumb img{display:block; width:100%; height:100%; object-fit:cover} .hubgroup-kicker{font:700 10.5px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin-bottom:8px} .hubgroup-name{font:800 clamp(20px,2.4vw,26px)/1.1 var(--sans); color:var(--hf); letter-spacing:-.01em} .hubgroup-desc{font:500 clamp(12px,1.2vw,13.5px)/1.45 var(--sans); color:var(--muted); margin-top:8px} .hubgroup-item{padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); transition:border-color .3s ease, background .3s ease} .hubgroup-item:hover{border-color:rgba(255,210,30,.35); background:rgba(255,210,30,.03)} .hubgroup-item .n{font:700 14.5px/1.2 var(--sans); color:var(--ink); letter-spacing:-.01em} .hubgroup-item .d{font:500 12.5px/1.5 var(--sans); color:var(--muted); margin-top:5px} /* Timeline (vertical, default) */ .timeline{display:flex; flex-direction:column; gap:12px; margin-top:24px; position:relative; padding-left:20px} .timeline::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg, rgba(255,210,30,.55), rgba(255,210,30,.1))} .tl-item{display:grid; grid-template-columns:80px 1fr; gap:18px; align-items:baseline; padding:8px 0; position:relative; opacity:0; transform:translateX(-10px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .tl-item::before{content:""; position:absolute; left:-20px; top:14px; width:10px; height:10px; border-radius:50%; background:var(--hf); box-shadow:0 0 12px -2px var(--hf)} .tl-item.show{opacity:1; transform:none} .tl-year{font:800 16px/1 var(--mono); color:var(--hf); letter-spacing:-.01em} .tl-title{font:700 15px/1.2 var(--sans); color:var(--ink)} .tl-desc{font:500 13px/1.5 var(--sans); color:var(--muted); margin-top:4px} /* Timeline (horizontal, layout: horizontal) */ .tl-h{position:relative; margin-top:40px; height:clamp(360px, 54vh, 520px); overflow-x:auto; overflow-y:hidden; padding:0 20px} .tl-h::-webkit-scrollbar{height:6px} .tl-h::-webkit-scrollbar-thumb{background:rgba(255,210,30,.25); border-radius:6px} .tl-h-inner{position:relative; height:100%; min-width:100%} .tl-h-line{position:absolute; top:50%; left:0; right:0; height:2px; transform:translateY(-1px); border-radius:2px; background:linear-gradient(90deg, rgba(255,210,30,.15), var(--hf) 12%, var(--hf-deep) 88%, rgba(255,157,11,.15)); box-shadow:0 0 24px -6px var(--hf)} .tl-h .ev{position:absolute; top:50%; width:150px; transform:translateX(-50%); opacity:0; transition:opacity var(--dur) var(--ease)} .tl-h .ev.show{opacity:1} .tl-h .ev.wide{width:200px} .tl-h .ev .dot{position:absolute; left:50%; top:-7px; width:14px; height:14px; border-radius:50%; transform:translateX(-50%); background:var(--hf); box-shadow:0 0 14px -1px var(--hf); z-index:3; border:2px solid var(--bg)} .tl-h .ev .stem{position:absolute; left:50%; width:1px; background:var(--hf); opacity:.4; transform:translateX(-.5px)} .tl-h .ev .card{position:absolute; left:50%; width:100%; transform:translateX(-50%); padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:rgba(18,17,11,.75); backdrop-filter:blur(6px); text-align:center} /* branch up / branch down with two possible heights */ .tl-h .ev.up.h1 .stem{bottom:8px; height:26px} .tl-h .ev.up.h1 .card{bottom:38px} .tl-h .ev.up.h2 .stem{bottom:8px; height:66px} .tl-h .ev.up.h2 .card{bottom:78px} .tl-h .ev.down.h1 .stem{top:8px; height:26px} .tl-h .ev.down.h1 .card{top:38px} .tl-h .ev.down.h2 .stem{top:8px; height:66px} .tl-h .ev.down.h2 .card{top:78px} .tl-h .year{font:700 11px/1 var(--mono); color:var(--hf); letter-spacing:.06em; text-transform:uppercase} .tl-h .title{font:700 13.5px/1.25 var(--sans); color:var(--ink); margin-top:6px; letter-spacing:-.01em} .tl-h .desc{font:500 11.5px/1.4 var(--sans); color:var(--muted); margin-top:5px} .tl-h .icons{display:flex; gap:6px; justify-content:center; margin-top:9px; flex-wrap:wrap} .tl-h .icons img{width:22px; height:22px; border-radius:5px; background:#fff; padding:2px; object-fit:contain; border:1px solid rgba(255,255,255,.1)} /* Model thumbnails grid (infinite vertical scroll) */ .modelscroll{position:relative; margin-top:22px; height:min(52vh,540px); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:linear-gradient(180deg,rgba(255,210,30,.03),rgba(255,255,255,.01))} .modelscroll::before,.modelscroll::after{content:""; position:absolute; left:0; right:0; height:80px; z-index:2; pointer-events:none} .modelscroll::before{top:0; background:linear-gradient(180deg,#0a0b12,transparent)} .modelscroll::after{bottom:0; background:linear-gradient(0deg,#0a0b12,transparent)} .modelscroll .inner{padding:20px} .modeltrack{display:flex; flex-direction:column; gap:14px} .modelgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px} @media(max-width:1100px){.modelgrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){.modelgrid{grid-template-columns:repeat(2,1fr)}} .modeltrack.loop{animation:modelscroll 25s linear infinite; animation-delay:1s} @keyframes modelscroll{from{transform:translateY(0)} to{transform:translateY(-50%)}} .reduce .modeltrack.loop{animation:none} .modelcard{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#0e0f1a; aspect-ratio:1200/630; opacity:0; transform:translateY(14px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease)} .modelcard.show{opacity:1; transform:none} .modelcard:hover{border-color:rgba(255,210,30,.4)} .modelcard img{display:block; width:100%; height:100%; object-fit:cover} /* GitHub stars viz (grouped by vertical) */ .ghsections{display:grid; grid-template-columns:1fr 1fr; column-gap:36px; row-gap:20px; margin-top:22px} @media(max-width:900px){.ghsections{grid-template-columns:1fr}} .ghsec{display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateY(10px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .ghsec.show{opacity:1; transform:none} .ghsec.wide{grid-column:1 / -1} .ghhead{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:6px; border-bottom:1px solid var(--line); margin-bottom:4px} .ghhead .name{font:700 11.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--hf)} .ghhead .name .ja{display:inline; font:500 10.5px/1 var(--mono); color:var(--hf-deep); letter-spacing:.06em; margin-left:10px; text-transform:none; opacity:.85} .ghhead .tot{font:700 12px/1 var(--mono); color:var(--faint); letter-spacing:.04em} .ghhead .tot b{color:var(--ink); font-weight:800} .ghrow{display:grid; grid-template-columns:130px 44px 1fr 74px; gap:10px; align-items:center} .ghrow .lbl{font:700 13.5px/1.1 var(--mono); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .ghrow .tag{font:600 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding:4px 6px; border:1px solid var(--line); border-radius:5px; text-align:center} .ghrow .bartrack{position:relative; height:16px; background:rgba(255,255,255,.04); border-radius:5px; overflow:hidden} .ghrow .barfill{position:absolute; inset:0; width:0; border-radius:5px; background:linear-gradient(90deg,var(--hf-deep),var(--hf)); transition:width 1.4s var(--ease); box-shadow:0 0 16px -6px var(--hf)} .ghrow .stars{font:800 13.5px/1 var(--sans); color:var(--hf); text-align:right; letter-spacing:-.01em; white-space:nowrap} .ghfoot{font:500 11.5px/1.4 var(--mono); color:var(--faint); margin-top:18px; letter-spacing:.02em; text-align:center} /* "Contributing to" strip: infinite left-to-right marquee with soft edges */ .gh-contrib{margin-top:24px; padding-top:20px; border-top:1px dashed var(--line); opacity:0; transform:translateY(8px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)} .gh-contrib.show{opacity:1; transform:none} .gh-contrib .label{font:700 11.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; text-align:center} .gh-contrib .stripwrap{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)} .gh-contrib .strip{display:flex; gap:16px; width:max-content; animation:contribScroll 32s linear infinite} .gh-contrib .strip:hover{animation-play-state:paused} @keyframes contribScroll{from{transform:translateX(0)} to{transform:translateX(-50%)}} .reduce .gh-contrib .strip{animation:none} .gh-contrib .item{display:inline-flex; align-items:center; gap:12px; padding:10px 20px 10px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); flex:none; transition:border-color .3s ease, background .3s ease} .gh-contrib .item:hover{border-color:rgba(255,210,30,.4); background:rgba(255,210,30,.05)} .gh-contrib .item img{width:36px; height:36px; border-radius:7px; background:#fff; padding:3px; object-fit:contain; flex:none} .gh-contrib .item .n{font:700 15px/1 var(--sans); color:var(--ink); letter-spacing:-.01em; white-space:nowrap} /* Preloader */ #preloader{position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .6s var(--ease)} #preloader.done{opacity:0; pointer-events:none} #preloader .pl-inner{display:flex; flex-direction:column; align-items:center; gap:20px; min-width:min(320px, 80vw)} #preloader .pl-logo{height:64px; width:auto; animation:pl-pulse 2s ease-in-out infinite} @keyframes pl-pulse{0%,100%{opacity:.85; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)}} #preloader .pl-title{font:700 12px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--hf)} #preloader .pl-bar{width:100%; height:4px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden} #preloader .pl-fill{height:100%; width:0; border-radius:3px; background:linear-gradient(90deg, var(--hf-deep), var(--hf)); box-shadow:0 0 12px -2px var(--hf); transition:width .3s var(--ease)} #preloader .pl-status{font:600 11px/1 var(--mono); letter-spacing:.06em; color:var(--faint); min-height:1em} .reduce #preloader .pl-logo{animation:none} .reduce *{transition:none!important; animation:none!important}