| |
| .ouroboros-mark { display:block; width:50px; height:34px; overflow:visible; flex:none; } |
| .brand { gap:9px; } |
| .site-header .brand { letter-spacing:-1.2px; } |
| .mark-current { animation:infinity-current 9s linear infinite; } |
| .hero-brand-lockup { display:flex; align-items:center; gap:17px; margin:0 0 19px; } |
| .hero-brand-lockup .ouroboros-mark { width:105px; height:63px; } |
| .hero-brand-lockup>div { padding-left:17px; border-left:1px solid #d3dce6; } |
| .hero-brand-lockup>div>span { display:block; font:600 15px var(--display); color:#314760; letter-spacing:2.2px; } |
| .hero-brand-lockup p { font-size:7px; letter-spacing:1.1px; color:#71869d; margin-top:7px; line-height:1.7; } |
| .hero h1 { margin-top:15px; } |
| .page-loading .ouroboros-mark { width:105px; height:70px; } |
| .atlas-page-header>a:first-child { display:flex; align-items:center; gap:10px; } |
| .atlas-page-header .ouroboros-mark { width:47px; height:31px; } |
| .closing-loop { top:38px; width:440px; opacity:.075; } |
| .closing-loop .ouroboros-mark { width:100%; height:auto; } |
| .dual-symbol { width:76px; height:47px; display:flex; align-items:center; justify-content:center; top:57%; } |
| .dual-symbol .ouroboros-mark { width:76px; height:46px; } |
| @keyframes infinity-current { to { stroke-dashoffset:-100; } } |
| |
| .dual-diagram { grid-template-columns:1fr .6fr 1fr; gap:28px; padding:40px 50px; } |
| .modality-title { margin-bottom:26px; } |
| .model-node { display:flex; flex-direction:column; align-items:stretch; gap:15px; min-height:268px; padding:20px; } |
| .model-node::before { inset:5px -5px -5px 5px; } |
| .architecture-node-title { display:flex; align-items:center; justify-content:space-between; gap:8px; } |
| .architecture-node-title strong { font-size:16px; font-weight:500; } |
| .architecture-node-title small { font-size:8px; letter-spacing:1px; } |
| .stack-count { display:grid; place-items:center; width:32px; height:24px; border:1px solid #557592; border-radius:4px; font:10px var(--mono); color:#a1c4e6; } |
| .protein-modality .stack-count { border-color:#966950; color:#f0bc95; } |
| .transformer-stack { display:flex; flex-direction:column; gap:5px; position:relative; } |
| .transformer-row { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:29px; padding:7px 10px; border:1px solid #557a9a; border-radius:3px; background:#243b50; color:#b9d7f3; font-size:10px; line-height:1.3; } |
| .transformer-row small { font:6px var(--mono); color:#88abc9; margin:0; white-space:nowrap; } |
| .protein-modality .transformer-row { color:#f2c8a7; background:#49372e; border-color:#88614d; } |
| .protein-modality .transformer-row small { color:#c49778; } |
| .model-node[data-active=true] .attention-row { animation:block-focus-blue 5.8s ease-in-out infinite; } |
| .model-node[data-active=true] .cross-attention-row { animation:block-focus-blue 5.8s 1.2s ease-in-out infinite; } |
| .model-node[data-active=true] .feedforward-row { animation:block-focus-blue 5.8s 2.4s ease-in-out infinite; } |
| .protein-modality .model-node[data-active=true] .transformer-row { animation-name:block-focus-orange; } |
| .module-excerpt { display:flex; flex-direction:column; gap:8px; } |
| .excerpt-label { font:6.5px var(--mono); letter-spacing:1px; color:#8eacc6; } |
| .protein-modality .excerpt-label { color:#c49a7d; } |
| .excerpt-tiles { display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:27px; } |
| .input-tile,.output-tile { display:inline-flex; align-items:center; justify-content:center; min-height:23px; padding:3px 6px; border:1px solid #577e9f; border-radius:2px; background:#345674; font:10px var(--mono); color:#d2e7fa; } |
| .residue-excerpt .input-tile,.residue-excerpt .output-tile { width:18px; min-height:22px; padding:3px 0; border-color:#b87c54; background:#7d5036; color:#ffe0c0; } |
| .excerpt-ellipsis { font:10px var(--mono); opacity:.6; } |
| .output-excerpt { margin-top:auto; padding-top:10px; border-top:1px solid #537591; } |
| .protein-modality .output-excerpt { border-color:#8b624c; } |
| .output-excerpt[data-emitting=true] .output-tile { animation:token-eject 5.8s var(--token-delay) var(--ease-out) infinite both; } |
| .sharing-link { height:70px; justify-content:center; } |
| .sharing-link i { height:16px; } |
| .sharing-link span { background:var(--lab); padding:3px 7px; } |
| .cross-modal { padding-top:171px; } |
| .flow { position:relative; height:185px; } |
| .flow>span { display:block; font:9px var(--mono); letter-spacing:1.5px; } |
| .flow>small { font-size:8px; display:block; line-height:1.6; margin-top:10px; } |
| .projection-channel { position:relative; padding:17px 0 20px; margin:5px 0 0; color:#b4cbe1; } |
| .projection-line { position:absolute; left:0; right:0; top:48px; height:1px; background:linear-gradient(90deg,#78afe4,#df946c); } |
| .projection-line::after { content:'›'; position:absolute; right:-1px; top:-13px; color:#e3a077; font:23px Arial,sans-serif; } |
| .projection-reverse .projection-line::after { content:'‹'; right:auto; left:-1px; color:#8abceb; } |
| .projection-line i { position:absolute; width:4px; height:4px; top:-1.5px; left:0; background:#91bce4; animation:context-signal 3s linear infinite; } |
| .projection-line i:nth-child(2) { animation-delay:-1s; } |
| .projection-line i:nth-child(3) { animation-delay:-2s; } |
| .projection-reverse .projection-line i { animation-direction:reverse; background:#e3a077; } |
| .projection-block { display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; background:#223647; border:1px solid #627083; border-radius:4px; padding:11px 12px; width:83px; margin:auto; box-shadow:0 0 0 5px var(--lab); } |
| .projection-block>span { font-size:8px; color:#93acbf; } |
| .projection-block>strong { font:13px var(--mono); font-weight:400; color:#cfcee3; } |
| .projection-shape { display:block; margin-top:12px; font:7px var(--mono); color:#7893ab; letter-spacing:.3px; } |
| |
| .core-demo .protein-result { line-height:1; } |
| .residue-token { display:inline-grid; place-items:center; width:22px; height:25px; margin:2px; border:1px solid #dfb799; border-radius:3px; background:#f3dfcd; color:#ad5d37; font:12px var(--mono); vertical-align:top; } |
| .typewriter-ink .residue-pop { animation:residue-pop-in .3s cubic-bezier(.2,.8,.3,1.3) both; } |
| .protein-result .typing-caret { height:22px; margin:3px 2px; vertical-align:top; } |
| html[data-motion=paused] .output-tile,html[data-motion=paused] .residue-pop { animation:none!important; opacity:1; transform:none; } |
| @keyframes context-signal { from { left:0; } to { left:100%; } } |
| @keyframes token-eject { 0%,2% { opacity:0; transform:translateY(-13px) scale(.75); } 9% { opacity:1; transform:translateY(3px) scale(1.04); } 15%,84% { opacity:1; transform:translateY(0) scale(1); } 96%,100% { opacity:0; transform:translateY(0); } } |
| @keyframes residue-pop-in { from { opacity:0; transform:translateY(-14px) scale(.7); } to { opacity:1; transform:translateY(0) scale(1); } } |
| @keyframes block-focus-blue { 0%,65%,100% { border-color:#557a9a; background:#243b50; } 20%,36% { border-color:#95c5ed; background:#335676; } } |
| @keyframes block-focus-orange { 0%,65%,100% { border-color:#88614d; background:#49372e; } 20%,36% { border-color:#e1a67d; background:#70503b; } } |
| @media (max-width:1200px) { |
| .hero-brand-lockup { gap:12px; } |
| .hero-brand-lockup .ouroboros-mark { width:88px; height:53px; } |
| .hero-brand-lockup>div { padding-left:12px; } |
| .hero-brand-lockup>div>span { font-size:13px; } |
| .hero-brand-lockup p { font-size:6px; } |
| .dual-diagram { padding:35px 28px; gap:23px; } |
| .model-node { padding:17px; min-height:282px; } |
| .architecture-node-title strong { font-size:14px; } |
| .transformer-row { padding:7px 8px; font-size:9px; } |
| .cross-modal { padding-top:172px; } |
| } |
| @media (max-width:960px) and (min-width:781px) { |
| .site-header .ouroboros-mark { width:39px; height:28px; } |
| .hero-brand-lockup .ouroboros-mark { width:74px; height:45px; } |
| .hero-brand-lockup p { max-width:150px; } |
| .dual-diagram { grid-template-columns:1fr .5fr 1fr; gap:16px; } |
| .model-node { padding:15px; min-height:286px; } |
| .architecture-node-title strong { font-size:13px; } |
| .transformer-row small { display:none; } |
| } |
| @media (max-width:780px) { |
| .ouroboros-mark { width:44px; height:30px; } |
| .hero-brand-lockup { gap:14px; margin-bottom:19px; } |
| .hero-brand-lockup .ouroboros-mark { width:85px; height:51px; } |
| .hero-brand-lockup>div { padding-left:14px; } |
| .hero-brand-lockup>div>span { font-size:13px; letter-spacing:2px; } |
| .hero-brand-lockup p { font-size:6px; max-width:175px; } |
| .hero h1 { margin-top:10px; } |
| .dual-diagram { grid-template-columns:1fr 49px 1fr; gap:6px; padding:26px 12px; } |
| .model-node { min-height:320px; padding:12px 9px; gap:13px; } |
| .architecture-node-title { flex-direction:column; align-items:flex-start; gap:8px; } |
| .architecture-node-title strong { font-size:11px; line-height:1.4; } |
| .architecture-node-title small { font-size:6px; } |
| .stack-count { width:27px; height:20px; font-size:8px; } |
| .transformer-row { padding:7px 5px; font-size:8px; min-height:31px; line-height:1.4; } |
| .transformer-row small { display:none; } |
| .excerpt-label { font-size:5px; letter-spacing:.45px; line-height:1.6; } |
| .excerpt-tiles { gap:3px; } |
| .input-tile,.output-tile { font-size:8px; padding:3px 4px; min-height:19px; } |
| .residue-excerpt .input-tile,.residue-excerpt .output-tile { width:14px; min-height:18px; font-size:8px; } |
| .modality-title { margin-bottom:23px; } |
| .modality-title h3 { font-size:11px; min-height:29px; } |
| .sharing-link { height:65px; } |
| .sharing-link span { font-size:5px; padding:3px; } |
| .cross-modal { padding-top:236px; } |
| .flow { height:240px; } |
| .flow>span { font-size:5.5px; letter-spacing:.2px; } |
| .flow>small { font-size:5.5px; line-height:1.8; } |
| .projection-block { width:100%; padding:10px 4px; box-shadow:0 0 0 3px var(--lab); } |
| .projection-block>span { font-size:6px; } |
| .projection-block>strong { font-size:10px; } |
| .projection-shape { font-size:5px; letter-spacing:-.3px; } |
| .projection-line { left:-7px; right:-7px; } |
| .projection-line i { width:3px; height:3px; } |
| .dual-symbol,.dual-symbol .ouroboros-mark { width:47px; height:30px; } |
| .dual-symbol { top:57%; } |
| .closing-loop { width:330px; } |
| .residue-token { width:19px; height:23px; margin:2px; font-size:11px; } |
| } |
| @media (max-width:370px) { |
| .site-header .ouroboros-mark { width:37px; height:25px; } |
| .site-header .brand { font-size:19px; gap:6px; } |
| .hero-brand-lockup .ouroboros-mark { width:74px; height:45px; } |
| .hero-brand-lockup p { font-size:5.5px; } |
| .dual-diagram { grid-template-columns:1fr 39px 1fr; gap:5px; padding:24px 9px; } |
| .model-node { padding:11px 7px; } |
| .architecture-node-title strong { font-size:10px; } |
| .modality-title h3 { font-size:10px; } |
| .transformer-row { font-size:7px; } |
| .dual-symbol,.dual-symbol .ouroboros-mark { width:39px; } |
| } |
| @media (prefers-reduced-motion:reduce) { |
| .mark-current,.transformer-row,.output-tile,.residue-pop,.projection-line i { animation:none!important; } |
| .output-tile,.residue-pop { opacity:1; transform:none; } |
| } |
|
|
