/* transactology.xyz */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #FFFFFF; color: #0A0A0A; font-family: 'Work Sans', sans-serif; font-weight: 400; line-height: 1.6; }
.section-heading { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.5rem; color: #0A0A0A; margin-bottom: 1.5rem; }
.lab-label { font-family: 'Fira Mono', monospace; font-size: 0.65rem; color: #8E8E93; position: fixed; top: 1rem; right: 1rem; z-index: 10; }
.hero { padding: 4rem 2rem 2rem; text-align: center; }
.hero-inner { max-width: 800px; margin: 0 auto; }
.hero-fragments { margin-bottom: 1rem; }
.frag { font-family: 'Sora', sans-serif; font-weight: 900; display: inline-block; }
.frag-1 { font-size: 4rem; transform: rotate(-3deg) translateY(-5px); color: #0A0A0A; letter-spacing: -0.05em; }
.frag-2 { font-size: 3rem; transform: rotate(2deg) translateY(8px); color: #FF2D55; letter-spacing: 0.1em; }
.frag-3 { font-size: 3.5rem; transform: rotate(-1deg) translateY(-3px); color: #0A0A0A; letter-spacing: -0.02em; }
.frag-4 { font-size: 2rem; transform: rotate(4deg) translateY(5px); color: #5856D6; letter-spacing: 0.05em; }
.hero-sub { font-size: 1rem; color: #8E8E93; }
.experiments { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; }
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.exp-card { background: #F2F2F7; padding: 1.5rem; position: relative; border-left: 4px solid #FF2D55; }
.exp-id { font-family: 'Fira Mono', monospace; font-size: 0.65rem; color: #8E8E93; display: block; margin-bottom: 0.25rem; }
.exp-status { font-family: 'Fira Mono', monospace; font-size: 0.65rem; padding: 2px 10px; border-radius: 999px; display: inline-block; margin-bottom: 0.5rem; }
.exp-status.active { background: rgba(52,199,89,0.15); color: #34C759; }
.exp-status.concluded { background: rgba(142,142,147,0.15); color: #8E8E93; }
.exp-status.theoretical { background: rgba(255,149,0,0.15); color: #FF9500; }
.exp-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.1rem; color: #0A0A0A; margin-bottom: 0.35rem; }
.exp-desc { font-size: 0.9rem; color: #8E8E93; }
.viz { max-width: 900px; margin: 0 auto; padding: 0 2rem 2rem; }
.viz-panel { background: #F2F2F7; padding: 1.5rem; border: 2px solid #5856D6; }
.viz-svg { display: block; margin-bottom: 1rem; }
.viz-controls { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.viz-param { font-family: 'Fira Mono', monospace; font-size: 0.8rem; color: #8E8E93; }
.viz-param strong { color: #0A0A0A; }
.footer { position: relative; min-height: 250px; padding: 2rem; }
.footer-scatter { position: relative; max-width: 900px; margin: 0 auto; min-height: 200px; }
.scatter-link { position: absolute; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 0.9rem; color: #5856D6; text-decoration: none; }
.whats-next { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); font-family: 'Sora', sans-serif; font-weight: 900; font-size: 1.8rem; color: #FF2D55; }
.footer-copy { font-family: 'Fira Mono', monospace; font-size: 0.7rem; color: #8E8E93; text-align: center; margin-top: 2rem; }
@media (max-width: 640px) { .exp-grid { grid-template-columns: 1fr; } .frag { font-size: 2rem !important; } }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }