File size: 11,105 Bytes
03677d0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | /* Continuous infinity identity, shared by the app and exported SVG assets. */
.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; } }
/* Actual T5-style blocks, with residues appearing at the decoder output. */
.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; }
/* Full recorded sequence: each residue is an actual character from the archive. */
.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; }
}
|