:root {
--bg: #120B08;
--panel: #1E1510;
--panel-2: #2A1E17;
--line: #3A2B22;
--text: #F7F1EC;
--text-2: #CFC4BC;
--orange: #FF8A3D;
--orange-text: #FFA669;
--green-text: #7BE09A;
--green-bg: #10301C;
--amber-text: #FFC46B;
--amber-bg: #3A2808;
--red-text: #FF9C90;
--red-bg: #3A1512;
--tape-text: #1A1208;
--tape: #F2C230;
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
--display: -apple-system-headline, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
background: var(--bg);
color: var(--text);
font: 16px/1.4 var(--font);
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.defs { position: absolute; width: 0; height: 0; }
a { color: var(--orange-text); text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 3px; border-radius: 6px; }
.page {
position: relative; z-index: 1;
flex: 1;
display: grid;
grid-template-rows: auto auto;
align-content: space-evenly;
align-items: center;
gap: 2vh;
padding: max(2.5vh, 16px) 16px 0;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
.page { grid-template-columns: 1fr 1.1fr; grid-template-rows: 1fr; gap: 4vw; padding: 4vh 5vw 0; }
}
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo { width: clamp(64px, 14vh, 240px); height: auto; overflow: visible; }
@media (min-width: 900px) and (min-aspect-ratio: 1/1) { .logo { width: clamp(140px, 30vh, 280px); } }
.name {
margin: 1vh 0 0;
font: 700 clamp(30px, 6vh, 76px)/1.05 var(--display);
letter-spacing: -0.02em;
}
.tagline {
margin: 0.6vh 0 0;
font: 600 clamp(17px, 3.3vh, 40px)/1.2 var(--display);
white-space: nowrap;
letter-spacing: -0.01em;
}
.t1 { color: var(--text); }
.t2 { color: var(--orange-text); }
.pill {
margin: 1.4vh 0 0;
padding: 0.4em 1.1em;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel);
color: var(--text-2);
font-size: clamp(12.5px, 1.7vh, 17px);
font-weight: 500;
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
.tagline { display: flex; flex-direction: column; white-space: normal; }
.name { font-size: clamp(34px, 6.4vh, 76px); }
.tagline { font-size: clamp(20px, 3.6vh, 40px); }
.pill { margin-top: 1.8vh; }
}
.logo .loop, .logo .tail { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.logo .loop { animation: draw 1.4s cubic-bezier(.55,.1,.3,1) .2s both; }
.logo .tail { animation: draw .8s ease-out 1.2s both; }
.logo .knot { transform-box: fill-box; transform-origin: center; animation: pop .45s cubic-bezier(.3,1.6,.5,1) 1.5s both; }
.logo .card { transform-box: view-box; transform-origin: 292px 196px; opacity: 0; animation: card 2s cubic-bezier(.3,.7,.3,1) 1.5s both; }
.logo .rope { transform-box: view-box; transform-origin: 292px 196px; animation: catch .5s ease-in-out 2.55s both; }
.logo .play { transform-box: fill-box; transform-origin: 40% 50%; animation: pop .5s cubic-bezier(.3,1.7,.5,1) 3.25s both; }
.logo .sway { transform-box: view-box; transform-origin: 258px 478px; animation: sway 6s ease-in-out 4.2s infinite; }
.name { animation: rise .7s ease-out 3.6s both; }
.t1 { display: inline-block; animation: rise .7s ease-out 4.0s both; }
.t2 { display: inline-block; animation: rise .7s ease-out 4.4s both; }
.pill { animation: rise .7s ease-out 5.0s both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes card {
0%   { opacity: 0; transform: translate(220px, -120px) rotate(28deg) scale(.9); }
15%  { opacity: 1; }
55%  { opacity: 1; transform: translate(-30px, 0) rotate(-14deg) scale(1); }
70%  { opacity: 1; transform: translate(-30px, 0) rotate(-16deg) scale(.92); }
100% { opacity: 0; transform: translate(-30px, 0) rotate(-16deg) scale(0); }
}
@keyframes catch { 0%, 100% { transform: scale(1); } 45% { transform: scale(.93, .9); } }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(2.2deg); } 70% { transform: rotate(-2deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes stage-in { from { opacity: 0; transform: translateY(8px); visibility: hidden; } to { opacity: 1; transform: none; visibility: visible; } }
.stage {
width: 100%;
max-width: 640px;
justify-self: center;
align-self: center;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 20px;
padding: clamp(14px, 2.2vh, 28px) clamp(14px, 2.4vw, 32px) clamp(8px, 1.4vh, 16px);
animation: stage-in .8s ease-out 5.3s both;
min-height: 0;
}
.scenes { display: grid; }
.scene {
grid-area: 1 / 1;
visibility: hidden;
opacity: 0;
transition: opacity .45s ease, visibility 0s linear .45s;
min-width: 0;
}
.scene.is-active { visibility: visible; opacity: 1; transition: opacity .45s ease .1s, visibility 0s; }
.eyebrow {
margin: 0;
color: var(--orange-text);
font-size: clamp(13px, 1.7vh, 15px);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.scene h2 {
margin: .2em 0 0;
font: 650 clamp(18px, 2.7vh, 30px)/1.2 var(--display);
letter-spacing: -0.01em;
min-height: 2.4em;
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) { .scene h2 { min-height: 0; font-size: clamp(19px, 3vh, 30px); } }
.viz {
display: block;
width: 100%;
height: auto;
max-height: 33vh;
margin-top: 1vh;
font-family: var(--font);
overflow: visible;
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) { .viz { max-height: 46vh; } }
.controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 1vh; }
.dots { display: flex; gap: 2px; }
.dot, .pause {
appearance: none; border: 0; background: none; padding: 0; margin: 0;
width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
border-radius: 999px; color: var(--text-2);
}
.dot::before {
content: ""; width: 9px; height: 9px; border-radius: 50%;
background: transparent; border: 1.5px solid var(--text-2);
transition: background .2s, transform .2s;
}
.dot:hover::before { background: var(--text-2); }
.dot[aria-current="true"]::before { background: var(--orange); border-color: var(--orange); transform: scale(1.25); }
.pause svg { width: 14px; height: 14px; fill: currentColor; }
.pause[hidden] { display: none; }
.pause .i-play { display: none; }
.pause[aria-pressed="true"] .i-play { display: inline; }
.pause[aria-pressed="true"] .i-pause { display: none; }
.pause:hover { color: var(--text); }
.viz text { font-family: var(--font); }
.t-off { fill: var(--red-text); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; }
.ok-bg { fill: var(--green-bg); stroke: var(--green-text); stroke-opacity: .5; }
.warn-bg { fill: var(--amber-bg); stroke: var(--amber-text); stroke-opacity: .5; }
.t-ok { fill: var(--green-text); font-size: 15px; font-weight: 650; text-anchor: middle; }
.t-okk { fill: var(--green-text); font-size: 13.5px; font-weight: 600; text-anchor: middle; }
.t-warn { fill: var(--amber-text); font-size: 13.5px; font-weight: 600; text-anchor: middle; }
.col { fill: var(--panel-2); stroke: var(--line); }
.t-tape { fill: var(--tape-text); font-size: 14px; font-weight: 800; letter-spacing: .14em; text-anchor: middle; }
.row { fill: var(--bg); stroke: var(--line); }
.row-ok { fill: var(--green-bg); stroke: var(--green-text); stroke-opacity: .55; }
.t-roll { fill: var(--text); font-size: 14px; font-weight: 650; }
.track { fill: var(--line); }
.bar { fill: var(--green-text); transform-box: fill-box; transform-origin: left center; }
.t-safe { fill: var(--green-text); font-size: 13.5px; font-weight: 650; text-anchor: end; }
.folder { fill: var(--orange); opacity: .9; }
.t-tree { fill: var(--text); font-size: 15px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.viz .t-tree { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.t-top { font-weight: 700; }
.guides { stroke: var(--line); stroke-width: 1.5; }
.t-file { fill: var(--text-2); font-size: 12.5px; text-anchor: middle; }
.arrow, .wire { stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.chip-bg { fill: var(--panel-2); stroke: var(--line); }
.chip-ok { fill: var(--green-bg); stroke: var(--green-text); stroke-opacity: .55; }
.t-chip { fill: var(--text); font-size: 13.5px; font-weight: 600; }
.t-tick { fill: var(--green-text); font-size: 15px; font-weight: 700; text-anchor: end; }
.ico { fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pin { stroke: var(--amber-text); stroke-width: 1.5; stroke-dasharray: 3 3; }
.playhead { transform-box: view-box; transform: translateX(340px); }
.black, .silence { opacity: 0; }
.tile .off, .flag .bad { opacity: 0; }
[data-i="0"] { --i: 0; } [data-i="1"] { --i: 1; } [data-i="2"] { --i: 2; } [data-i="3"] { --i: 3; }
[data-i="4"] { --i: 4; } [data-i="5"] { --i: 5; } [data-i="6"] { --i: 6; }
.is-active .tile .off { animation: fade-out .35s ease calc(.5s + var(--i) * .28s) both; }
.is-active .tile { transform-box: fill-box; transform-origin: center; animation: flip .5s ease calc(.4s + var(--i) * .28s) both; }
.is-active .result { animation: rise .5s ease-out 2.4s both; }
.is-active .roll { animation: fade-in .3s ease calc(.2s + var(--i) * .85s) both; }
.is-active .roll .bar { animation: grow .6s linear calc(.3s + var(--i) * .85s) both; }
.is-active .roll .row-ok, .is-active .roll .t-safe { animation: fade-in .3s ease calc(.95s + var(--i) * .85s) both; }
.scene[data-name="Ingest"].is-active .result { animation-delay: 2.9s; }
.is-active .line { animation: slide .35s ease-out calc(.2s + var(--i) * .3s) both; }
.is-active .guides { animation: fade-in .4s ease 2.2s both; }
.is-active .arrow.a1 { animation: draw .5s ease-out .5s both; }
.is-active .arrow.a2 { animation: draw .5s ease-out 1.1s both; }
.is-active .chip.c1 { animation: rise .4s ease-out .9s both; }
.is-active .chip.c2 { animation: rise .4s ease-out 1.5s both; }
.is-active .chip .t-tick { animation: fade-in .3s ease 2.1s both; }
.is-active .playhead { animation: scan 2.4s linear .3s both; }
.is-active .black { animation: blip 3s linear 0s both; }
.is-active .silence { animation: blip 3s linear 0s both; }
.is-active .flag.f1 { animation: fade-in .3s ease 1.15s both; }
.is-active .flag.f2 { animation: fade-in .3s ease 1.65s both; }
.is-active .flag .bad { animation: fade-out .35s ease 2.9s both; }
.is-active .flag .good { animation: fade-in .35s ease 2.9s both; }
.scene[data-name="Video QC"].is-active .result { animation-delay: 3.2s; }
.is-active .wire.w1 { animation: draw .45s ease-out .4s both; }
.is-active .wire.w2 { animation: draw .45s ease-out 1.1s both; }
.is-active .wire.w3 { animation: draw .45s ease-out 1.8s both; }
.is-active .dest .chip-ok, .is-active .dest .t-tick { animation: fade-in .3s ease both; }
.is-active .dest.d1 .chip-ok, .is-active .dest.d1 .t-tick { animation-delay: .9s; }
.is-active .dest.d2 .chip-ok, .is-active .dest.d2 .t-tick { animation-delay: 1.6s; }
.is-active .dest.d3 .chip-ok, .is-active .dest.d3 .t-tick { animation-delay: 2.3s; }
@keyframes flip { 0% { transform: scale(1); } 50% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; } }
@keyframes scan { from { transform: translateX(0); } to { transform: translateX(340px); } }
@keyframes blip { 0%, 93% { opacity: 1; } 100% { opacity: 0; } }
.foot {
position: relative; z-index: 1;
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 4px 22px;
padding: 1.6vh 16px max(1.6vh, env(safe-area-inset-bottom));
color: var(--text-2);
font-size: 13px;
}
.foot nav { display: flex; gap: 18px; }
.foot p { margin: 0; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
.simple { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6vh 16px; max-width: 40rem; margin: 0 auto; }
.simple .mark { width: 96px; height: auto; }
.simple h1 { font: 700 clamp(28px, 5vh, 44px)/1.15 var(--display); margin: 2vh 0 1vh; letter-spacing: -0.02em; }
.simple p { color: var(--text-2); margin: .5em 0; }
.simple .links { display: flex; gap: 20px; justify-content: center; margin-top: 2vh; }