/* Open Interest — site v0 */ * { box-sizing: border-box } body { margin: 0; background: #f2efe8; color: #0d0d0f; font: 15px/1.5 Inter, system-ui, sans-serif } a { color: #6b1f2a } a:hover { color: #5a1923 } .mono { font-family: "Geist Mono", ui-monospace, monospace } .anton { font-family: Anton, sans-serif; font-weight: 400 } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px } .topbar { background: #0d0d0f; color: #f2efe8; padding: 8px 16px; font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px } .chip { border: 1px solid rgba(242,239,232,.35); border-radius: 3px; padding: 4px 10px } .flick { display: inline-block; width: 6px; height: 6px; border-radius: 1px; background: #f0e3e3 } .f1 { animation: fx 2.3s steps(2,start) infinite } .f2 { animation: fx 3.1s steps(2,start) infinite .4s } .f3 { animation: fx 1.7s steps(2,start) infinite .9s } @keyframes fx { to { opacity: .25 } } .mast { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 24px 0 13px } .mast h1 { margin: 0; font-family: Anton, sans-serif; font-weight: 400; font-size: clamp(30px, 5vw, 44px); line-height: 1; letter-spacing: .005em } .mast .meta { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .14em; color: #4a4a52; text-transform: uppercase } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #6b1f2a; margin-right: 6px; animation: pulse 2.2s ease-in-out infinite } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } } .blink { animation: blink 1.1s steps(2,start) infinite } @keyframes blink { to { visibility: hidden } } .rule2 { height: 2px; background: #0d0d0f } nav.oi { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 0; border-bottom: 1px solid #0d0d0f; font-family: "Geist Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase } nav.oi a { text-decoration: none; color: #0d0d0f } nav.oi a:hover { color: #6b1f2a } nav.oi .on { color: #6b1f2a; font-weight: 500 } nav.oi .er { margin-left: auto; color: #6b1f2a } .strap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 10px 0; border-bottom: 1px solid #d8d5c8; font-size: 14px } .strap em { color: #4a4a52 } .strap .mono { font-size: 10px; letter-spacing: .1em; color: #828287; text-transform: uppercase } .ticker { overflow: hidden; background: #0d0d0f; color: #c9c7bf; border-radius: 2px; margin-top: 12px } .ticker-in { display: inline-flex; white-space: nowrap; animation: tick 48s linear infinite; font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 0 } .ticker-in:hover { animation-play-state: paused } .ticker-in span { padding: 0 26px } @keyframes tick { to { transform: translateX(-50%) } } @media (prefers-reduced-motion: reduce) { .ticker-in,.dot,.blink,.flick { animation: none } } .lead { background: #6b1f2a; color: #f2efe8; border-radius: 2px; padding: clamp(24px,4vw,44px); margin-top: 28px } .lead .tag { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .85; margin-bottom: 16px } .lead h2 { margin: 0 0 14px; font-family: Anton, sans-serif; font-weight: 400; font-size: clamp(38px,7vw,70px); line-height: .9; text-transform: uppercase; max-width: 860px } .lead p { margin: 0; font-size: 17px; max-width: 580px; opacity: .92 } .lead .rail { margin-top: 24px; padding-top: 13px; border-top: 1px solid rgba(242,239,232,.3); font-family: "Geist Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .9; display: flex; flex-wrap: wrap; gap: 6px 22px } .lead .rail a { color: #f2efe8 } .cols { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 36px } .main-col { flex: 999 1 560px; min-width: 0 } aside.rail-col { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px } .card { background: #fbfaf5; border: 1px solid #d8d5c8; border-radius: 2px; padding: 18px 20px } .card.burg { background: #f0e3e3; border-color: #6b1f2a } .card h3 { margin: 0 0 9px; font-family: Anton, sans-serif; font-weight: 400; font-size: 16px; letter-spacing: .04em; text-transform: uppercase } .card p { margin: 0 0 10px; font-size: 13px; color: #4a4a52 } .btn { display: inline-block; background: #6b1f2a; color: #f2efe8; text-decoration: none; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 2px; border: none; cursor: pointer } .btn.ink { background: #0d0d0f } .sect { font-family: Anton, sans-serif; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px } .item { padding: 17px 0 15px; border-bottom: 1px solid #e5e2d4 } .item .tag { font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: .16em; color: #6b1f2a; text-transform: uppercase; margin-bottom: 6px } .item h4 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.015em; line-height: 1.25 } .item p { margin: 0 0 9px; font-size: 14px; color: #4a4a52 } .item .prov { font-family: "Geist Mono", monospace; font-size: 9.5px; letter-spacing: .08em; color: #828287; text-transform: uppercase } .foot { background: #0d0d0f; color: #f2efe8; margin-top: 44px; padding: 24px 16px } .foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .85 } h2.page { margin: 34px 0 10px; font-family: Anton, sans-serif; font-weight: 400; font-size: clamp(34px,6vw,54px); line-height: .95; text-transform: uppercase } .eyebrow { font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .22em; color: #828287; text-transform: uppercase; margin-top: 34px } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px 40px } .qa { border-top: 1px solid #d8d5c8; padding-top: 15px } .qa h3 { margin: 0 0 9px; font-family: Anton, sans-serif; font-weight: 400; font-size: 18px; text-transform: uppercase } .qa h3::before { content: "/ "; color: #6b1f2a } .qa p { margin: 0; font-size: 14px; color: #4a4a52; line-height: 1.6 } /* dark engine pages */ body.dark { background: #0d0d0f; color: #e8e6dd; font-family: "Geist Mono", ui-monospace, monospace } body.dark a { color: #f0e3e3 } body.dark a:hover { color: #fff } .dk { border: 1px solid #2a2a2c; border-radius: 3px; padding: 14px 18px; background: transparent } .dk.hi { border-color: #c25663 } .lab { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: #6f6d66 } .jrow { border: 1px solid #1e1e20; background: #121214; border-radius: 3px; padding: 11px 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; text-decoration: none; font-size: 12px; color: #e8e6dd } .jrow:hover { border-color: #c25663 } .ddot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c25663; margin-right: 10px; animation: pulse 1.6s ease-in-out infinite } .banwall span { border: 1px solid #d8d5c8; border-radius: 3px; padding: 4px 10px; text-decoration: line-through; text-decoration-color: #6b1f2a; text-decoration-thickness: 2px; display: inline-block; margin: 0 8px 8px 0; font-family: "Geist Mono", monospace; font-size: 12px } body.dark .ticker { background: #121214; border: 1px solid #2a2a2c; margin: 0 } body.dark .ticker-in { color: #a8a69e } nav.oid { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-family: "Geist Mono", ui-monospace, monospace } nav.oid a { color: #a8a69e; text-decoration: none } nav.oid a:hover { color: #e8e6dd } nav.oid .on { margin-left: auto; color: #c25663 } nav.oi .ext { color: #828287 } nav.oi .ext:hover { color: #0d0d0f } .oi-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #0d0d0f; color: #f2efe8; border: 1px solid #6b1f2a; border-radius: 3px; padding: 12px 18px; font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; z-index: 50; max-width: min(90vw, 480px); text-align: center } /* --- mobile fixes (iPhone squash + ticker) --- */ .topbar > span:first-child { flex-wrap: wrap } @media (max-width: 640px) { .topbar { justify-content: center; text-align: center; letter-spacing: .12em; font-size: 9px } .mast { padding-top: 18px } nav.oi { gap: 6px 16px } nav.oi .er { margin-left: 0 } } .ticker-in { will-change: transform; transform: translate3d(0,0,0) } @keyframes tick { to { transform: translate3d(-50%, 0, 0) } } @media (prefers-reduced-motion: reduce) { .ticker { overflow-x: auto; -webkit-overflow-scrolling: touch } }