/* ========================================================================== AWOKE — independent research peptide index dark clinical / instrument design system ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* surface — near-black, cool */ --bg:#07080a; --panel:#0d0f13; --panel-2:#12151c; --panel-3:#171b24; --line:#1e232d; --line-2:#161a22; /* text */ --txt:#e9ecf1; --muted:#98a0ae; --dim:#616a7a; /* signal — cyan is research, amber is supply. Set per section on . */ --cyan:#22d3ee; --cyan-dim:rgba(34,211,238,.12); --cyan-line:rgba(34,211,238,.35); --amber:#f0b429; --amber-dim:rgba(240,180,41,.12); --amber-line:rgba(240,180,41,.35); --accent:var(--cyan); --accent-dim:var(--cyan-dim); --accent-line:var(--cyan-line); --warn:#f59e0b; --danger:#f43f5e; /* tiers — green strong → crimson weak */ --t-s:#34d399; --t-a:#84cc16; --t-b:#eab308; --t-c:#f97316; --t-d:#ef4444; --t-f:#e11d48; /* type */ --display:'Archivo',ui-sans-serif,system-ui,sans-serif; --body:'Archivo',ui-sans-serif,system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --r:6px; --r-sm:4px; --wrap:1160px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font-family:var(--body); color:var(--txt); background:var(--bg); line-height:1.55; font-size:15px; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* faint instrument grid */ body::before{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px); background-size:64px 64px; } body::after{ content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(90vw 70vh at 50% -10%,rgba(34,211,238,.07),transparent 70%); } main,.topbar,.foot,.notice{position:relative;z-index:1} /* ---------- section modes ---------- */ body.mode-shop{ --accent:var(--amber); --accent-dim:var(--amber-dim); --accent-line:var(--amber-line); } body.mode-shop::after{ background:radial-gradient(90vw 70vh at 50% -10%,rgba(240,180,41,.06),transparent 70%); } .btn{color:#04212a} body.mode-shop .btn{color:#241a00} /* ghost/cyan variants keep readable text in both modes */ .btn-ghost,body.mode-shop .btn-ghost{color:var(--txt)} .btn-cyan,body.mode-shop .btn-cyan{color:#22d3ee} img{max-width:100%;display:block} a{color:inherit} /* ---------- type ---------- */ h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;line-height:1.1; letter-spacing:-.02em} h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.035em} h2{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.025em} h3{font-size:1.1rem} p{margin:0 0 1em} .micro{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em; text-transform:uppercase;color:var(--dim)} .micro-b{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--accent)} .lede{font-size:1.02rem;color:var(--muted);max-width:66ch} .small{font-size:.88rem;color:var(--muted)} .tiny{font-size:.76rem;color:var(--dim);line-height:1.6} .mono{font-family:var(--mono)} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} /* ---------- layout ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .wrap-wide{max-width:1420px;margin:0 auto;padding:0 24px} .stack>*+*{margin-top:8px} .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .spread{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .grid{display:grid;gap:1px;background:var(--line-2)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} section{margin:0 0 44px} /* section rule header */ .section-head{margin-bottom:20px;padding-top:22px;border-top:1px solid var(--line)} .section-head h2{margin-top:8px} /* ---------- panels ---------- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px} .card-lg{padding:30px} .card-flush{border-radius:0;border-left:0;border-right:0} /* grid children sit flush with a 1px hairline between */ .grid>.card{border:0;border-radius:0} .tap{cursor:pointer;transition:background .14s,border-color .14s} .tap:hover{background:var(--panel-2);border-color:var(--line)} /* ---------- index rows (replaces pastel tiles) ---------- */ .ix{display:block;text-decoration:none;background:var(--panel); border:1px solid var(--line);border-radius:var(--r);padding:0;overflow:hidden} .ix-row{display:flex;align-items:center;gap:18px;padding:18px 20px; border-bottom:1px solid var(--line-2);text-decoration:none;transition:background .14s} .ix-row:last-child{border-bottom:0} .ix-row:hover{background:var(--panel-2)} .ix-row:hover .ix-go{color:var(--accent);transform:translateX(3px)} .ix-n{font-family:var(--mono);font-size:.68rem;color:var(--dim);width:26px;flex:none} .ix-main{flex:1;min-width:0} .ix-title{font-family:var(--display);font-weight:700;font-size:1.02rem;display:block} .ix-sub{font-size:.82rem;color:var(--muted);display:block;margin-top:2px} .ix-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:var(--dim);flex:none} .ix-go{color:var(--dim);font-family:var(--mono);flex:none;transition:.14s} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;padding:12px 20px;border-radius:var(--r-sm); background:var(--accent);color:#04212a;border:1px solid var(--accent); text-decoration:none;cursor:pointer;transition:.14s;white-space:nowrap; } .btn:hover{background:#67e8f9;border-color:#67e8f9} .btn-ghost{background:transparent;color:var(--txt);border-color:var(--line)} .btn-ghost:hover{background:var(--panel-2);border-color:var(--dim);color:var(--txt)} .btn-sm{padding:9px 14px;font-size:.64rem} .btn-block{width:100%} .btn[disabled]{opacity:.4;cursor:not-allowed} /* ---------- tier marks ---------- */ .tier{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--mono);font-weight:600;width:30px;height:30px; border-radius:var(--r-sm);font-size:.86rem;flex:none; border:1px solid currentColor;background:rgba(255,255,255,.02); } .tier-lg{width:58px;height:58px;font-size:1.7rem;border-width:1px;border-radius:var(--r)} .tier-sm{width:22px;height:22px;font-size:.66rem} .tier-S{color:var(--t-s)}.tier-A{color:var(--t-a)}.tier-B{color:var(--t-b)} .tier-C{color:var(--t-c)}.tier-D{color:var(--t-d)}.tier-F{color:var(--t-f)} .pill{ display:inline-flex;align-items:center;gap:6px;font-family:var(--mono); font-size:.62rem;letter-spacing:.13em;text-transform:uppercase; padding:5px 10px;border-radius:var(--r-sm); background:var(--panel-2);border:1px solid var(--line);color:var(--muted); } .pill-brand{background:var(--accent-dim);border-color:var(--accent-line);color:var(--accent)} .pill-warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:var(--warn)} .pill-ok{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3);color:var(--t-s)} /* ---------- top bar ---------- */ .topbar{position:sticky;top:0;z-index:60;background:rgba(7,8,10,.9); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .topbar .wrap-wide{display:flex;align-items:center;gap:20px;height:56px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none} .brand-mark{display:flex;gap:2px;align-items:center;height:14px} .brand-mark i{width:2px;display:block;background:var(--accent)} .brand-name{font-family:var(--display);font-weight:800;font-size:1.05rem; letter-spacing:.14em;text-transform:uppercase} .topnav{display:flex;gap:0;margin-left:8px;overflow-x:auto;scrollbar-width:none;flex:1; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} .topnav::-webkit-scrollbar{display:none} /* `data-of` is set by app.js: 'r' = more to the right, 'l' = more to the left, 'b' = both. No attribute means everything fits and no fade is drawn. */ .topnav[data-of="r"]{mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)} .topnav[data-of="l"]{mask-image:linear-gradient(to right,transparent,#000 34px)} .topnav[data-of="b"]{mask-image:linear-gradient(to right,transparent,#000 34px, #000 calc(100% - 34px),transparent)} .topnav a{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;color:var(--dim);padding:8px 8px;white-space:nowrap; border-bottom:1px solid transparent;transition:.14s} .topnav a:hover{color:var(--txt)} .topnav a.on{color:var(--accent);border-bottom-color:var(--accent)} .topbar-right{display:flex;gap:8px;align-items:center;flex:none} .switcher{ display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem; letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--dim); padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-sm);transition:.14s; white-space:nowrap; } .switcher:hover{color:#f0b429;border-color:rgba(240,180,41,.4);background:rgba(240,180,41,.06)} .switcher-dot{width:6px;height:6px;border-radius:50%;background:#f0b429;flex:none} @media (max-width:760px){.switcher span{display:none}} @media (max-width:520px){.switcher{display:none}} /* ---------- hero ---------- */ .hero{padding:52px 0 22px} .hero-id{display:flex;align-items:center;gap:12px;margin-bottom:22px} .hero-id .brand-mark{height:22px} .hero-id .brand-mark i{width:3px} .hero-name{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,7vw,4.6rem); letter-spacing:.02em;text-transform:uppercase;line-height:.95} .hero h1{max-width:16ch} .hero-rule{height:1px;background:var(--line);margin:26px 0} /* readout strip */ .readout{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--panel)} .readout div{flex:1;padding:16px 18px;border-right:1px solid var(--line-2);min-width:0} .readout div:last-child{border-right:0} .readout b{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:600; letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums} .readout span{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em; text-transform:uppercase;color:var(--dim);display:block;margin-top:6px} .readout .hot{color:var(--accent)} /* ---------- ticker ---------- */ .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line); overflow:hidden;background:var(--panel);margin:0 0 44px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .ticker-track{display:flex;width:max-content;animation:slide 240s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tick{display:flex;align-items:center;gap:10px;padding:11px 20px;font-size:.78rem; color:var(--muted);white-space:nowrap;border-right:1px solid var(--line-2)} .tick b{color:var(--txt);font-family:var(--mono);font-size:.72rem;font-weight:500; letter-spacing:.06em;text-transform:uppercase} .tick-sym{font-family:var(--mono);font-size:.7rem;flex:none} .sym-up{color:var(--t-s)}.sym-down{color:var(--t-d)}.sym-alert{color:var(--warn)} .sym-note{color:var(--accent)}.sym-diamond{color:var(--muted)} @media (prefers-reduced-motion:reduce){.ticker-track{animation:none}} /* ---------- tier board strip ---------- */ .tierstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-2); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .tierstrip a{background:var(--panel);padding:18px 8px;text-align:center;text-decoration:none; transition:background .14s;display:block} .tierstrip a:hover{background:var(--panel-3)} .tierstrip b{font-family:var(--mono);font-size:1.5rem;font-weight:600;display:block;line-height:1} .tierstrip span{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em; text-transform:uppercase;color:var(--dim);display:block;margin-top:8px} /* ---------- data table ---------- */ .tbl{width:100%;border-collapse:collapse;font-size:.88rem;table-layout:fixed} .tbl thead th{ font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.15em; text-transform:uppercase;color:var(--dim);text-align:left;padding:10px 12px; border-bottom:1px solid var(--line);white-space:nowrap; } .tbl td{padding:13px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle} .tbl tbody tr{transition:background .12s;cursor:pointer} .tbl tbody tr:hover{background:var(--panel-2)} .tbl tbody tr:hover .t-name{color:var(--accent)} .t-idx{font-family:var(--mono);font-size:.7rem;color:var(--dim);width:38px; font-variant-numeric:tabular-nums} .t-name{font-family:var(--display);font-weight:700;font-size:.98rem;transition:color .12s; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .t-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase; color:var(--dim);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tbl td:nth-child(3){max-width:340px} .tbl td:nth-child(4){white-space:nowrap} .t-num{font-family:var(--mono);font-size:.78rem;color:var(--muted);text-align:right; font-variant-numeric:tabular-nums;white-space:nowrap} .tbl-wrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;background:var(--panel)} /* tier group header inside table */ .grp td{background:var(--panel-2);padding:10px 12px;border-bottom:1px solid var(--line)} .grp .row{gap:10px} /* compact row used in stacks / related */ .crow{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--panel); border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:.14s} .crow:hover{background:var(--panel-2);border-color:var(--dim)} .crow-main{flex:1;min-width:0} .crow-name{display:block;font-family:var(--display);font-weight:700;font-size:.98rem} .crow-sub{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em; text-transform:uppercase;color:var(--dim);margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crow-arrow{color:var(--dim);font-family:var(--mono);flex:none} /* ---------- filters ---------- */ .filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .chip{font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase; padding:8px 12px;border-radius:var(--r-sm);background:transparent; border:1px solid var(--line);color:var(--dim);cursor:pointer;transition:.14s} .chip:hover{color:var(--txt);border-color:var(--dim)} .chip.on{background:var(--accent-dim);border-color:var(--accent-line);color:var(--accent)} .search{width:100%;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line); background:var(--panel);font-family:var(--mono);font-size:.84rem;color:var(--txt)} .search:focus{outline:none;border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-dim)} .search::placeholder{color:var(--dim)} /* ---------- compound page ---------- */ .cp-head{padding:34px 0 6px} .cp-title{font-family:var(--display);font-weight:800;letter-spacing:-.035em; font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;margin:16px 0 12px} .cp-meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);line-height:1.8} .mode-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm); overflow:hidden} .mode-toggle button{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;padding:8px 14px;border:0;background:transparent;color:var(--dim); cursor:pointer;transition:.14s;border-right:1px solid var(--line)} .mode-toggle button:last-child{border-right:0} .mode-toggle button.on{background:var(--accent-dim);color:var(--accent)} .mech-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:18px} .mech-card h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase; color:var(--accent);margin-bottom:9px;font-weight:500} .mech-synth{border-left:2px solid var(--accent);background:var(--panel);padding:16px 18px; font-size:.92rem;color:var(--muted);border-radius:0 var(--r) var(--r) 0} .mech-synth b{color:var(--accent);font-family:var(--mono);font-size:.68rem; letter-spacing:.14em;text-transform:uppercase} .statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .statbox{background:var(--panel);padding:20px 16px;text-align:left} .statbox b{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:600; line-height:1.1;font-variant-numeric:tabular-nums} .statbox span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);display:block;margin-top:7px} /* evidence bars */ .eshape{display:flex;flex-direction:column;gap:8px} .ebar{display:grid;grid-template-columns:150px 1fr 34px;gap:12px;align-items:center} .ebar-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em; text-transform:uppercase;color:var(--dim)} .ebar-track{height:6px;background:var(--panel-3);border-radius:2px;overflow:hidden} .ebar-fill{height:100%;transition:width .6s cubic-bezier(.2,.8,.3,1)} .ebar-n{font-family:var(--mono);font-size:.7rem;text-align:right;color:var(--muted); font-variant-numeric:tabular-nums} .catch{background:rgba(245,158,11,.05);border:1px solid rgba(245,158,11,.25); border-radius:var(--r);padding:20px} .catch .micro-b{color:var(--warn)} .srcitem{padding:14px 0;border-bottom:1px solid var(--line-2)} .srcitem:last-child{border-bottom:0} .srcitem a{font-weight:600;text-decoration:none;font-size:.9rem;line-height:1.45; color:var(--txt)} .srcitem a:hover{color:var(--accent)} .fact-table{width:100%;border-collapse:collapse;font-size:.86rem} .fact-table td{padding:11px 0;border-bottom:1px solid var(--line-2);vertical-align:top} .fact-table td:first-child{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em; text-transform:uppercase;color:var(--dim);width:145px;padding-right:16px} .fact-table tr:last-child td{border-bottom:0} .seq{font-family:var(--mono);font-size:.72rem;word-break:break-all;line-height:1.75; color:var(--muted)} .checks{list-style:none;padding:0;margin:0} .checks li{position:relative;padding:9px 0 9px 24px;font-size:.88rem;color:var(--muted); border-bottom:1px solid var(--line-2)} .checks li:last-child{border-bottom:0} .checks li::before{content:'>';position:absolute;left:0;top:9px;color:var(--accent); font-family:var(--mono);font-size:.78rem} .checks.warn li::before{content:'!';color:var(--warn)} .checks.danger li::before{content:'x';color:var(--danger)} /* ---------- accordion ---------- */ .acc{border-bottom:1px solid var(--line-2)} .acc-btn{width:100%;display:flex;align-items:center;gap:16px;padding:18px 0;background:none; border:0;cursor:pointer;text-align:left;font-family:inherit;color:inherit} .acc-num{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;color:var(--dim);flex:none} .acc-title{font-family:var(--display);font-weight:700;font-size:1rem;flex:1} .acc-mark{color:var(--dim);font-family:var(--mono);transition:transform .2s;flex:none} .acc.open .acc-mark{transform:rotate(45deg);color:var(--accent)} .acc-body{display:none;padding:0 0 20px;color:var(--muted);font-size:.9rem;max-width:78ch} .acc.open .acc-body{display:block} /* ---------- gate ---------- */ .overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center; justify-content:center;padding:20px;background:rgba(4,5,7,.86);backdrop-filter:blur(10px)} .overlay.show{display:flex} .modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:34px 30px;max-width:430px;width:100%;max-height:92vh;overflow-y:auto} .modal .brand-mark{height:18px;margin-bottom:14px} .modal h2{font-size:1.35rem;margin:16px 0 10px;letter-spacing:-.02em} .field{width:100%;padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--line); font-family:var(--mono);font-size:.82rem;margin:16px 0 16px;background:var(--bg);color:var(--txt)} .field:focus{outline:none;border-color:var(--accent-line)} .field::placeholder{color:var(--dim)} select.field{cursor:pointer} .consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:.79rem; color:var(--muted);line-height:1.5;cursor:pointer} .consent input{margin:2px 0 0;width:15px;height:15px;flex:none;accent-color:var(--accent); cursor:pointer} .consent b{color:var(--txt)} .err{color:var(--danger);font-family:var(--mono);font-size:.68rem;line-height:1.6; margin:12px 0 0;display:none} .err.show{display:block} .linkbtn{background:none;border:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:var(--dim);cursor:pointer;padding:14px 0 4px; text-decoration:none;display:block;width:100%;text-align:center} .linkbtn:hover{color:var(--txt)} /* ---------- chat ---------- */ .chat{display:flex;flex-direction:column;gap:1px;min-height:44vh;background:var(--line-2); border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px} .msg{padding:18px 20px;font-size:.9rem;line-height:1.6;background:var(--panel)} .msg-u{background:var(--panel-3);color:var(--txt);font-family:var(--mono);font-size:.8rem} .msg-u::before{content:'> ';color:var(--accent)} .msg-a h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase; color:var(--accent);margin:0 0 10px;font-weight:500} .msg-a p{margin:0 0 10px;color:var(--muted)}.msg-a p:last-child{margin:0} .msg-a ul{margin:0 0 10px;padding-left:18px;color:var(--muted)} .msg-a li{margin-bottom:6px} .msg-a a{color:var(--accent);text-decoration:none} .msg-a a:hover{text-decoration:underline} .msg-a b{color:var(--txt)} .chatbar{display:flex;gap:8px} .chatbar input{flex:1;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line); font-family:var(--mono);font-size:.84rem;background:var(--panel);color:var(--txt)} .chatbar input:focus{outline:none;border-color:var(--accent-line)} .chatbar input::placeholder{color:var(--dim)} .suggest{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .typing span{display:inline-block;width:5px;height:5px;background:var(--accent);margin-right:4px; animation:blink 1.2s infinite} .typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s} @keyframes blink{0%,100%{opacity:.2}50%{opacity:1}} /* ---------- paywall ---------- */ .locked{position:relative;overflow:hidden} .locked .locked-body{filter:blur(5px);opacity:.28;pointer-events:none;user-select:none; max-height:210px;overflow:hidden} .locked-veil{position:absolute;inset:auto 0 0;padding:28px 22px 22px;text-align:center; background:linear-gradient(to bottom,transparent,var(--panel) 45%,var(--panel))} .price-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:30px} .price-card.featured{border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-dim),0 20px 60px rgba(34,211,238,.06)} .price-n{font-family:var(--mono);font-size:2.8rem;font-weight:600;line-height:1; letter-spacing:-.03em} .price-n sup{font-size:1.1rem;vertical-align:super} .strike{text-decoration:line-through;color:var(--dim)} /* ---------- COA ---------- */ .coa-line{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:13px 0;border-bottom:1px solid var(--line-2)} .coa-line:last-child{border-bottom:0} .coa-name{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase; color:var(--muted)} textarea.field{font-size:.76rem;line-height:1.7;min-height:200px;resize:vertical; font-family:var(--mono);text-align:left} /* ---------- market ---------- */ .lane{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2); border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .lane-box{background:var(--panel);padding:20px 16px} .lane-box b{display:block;font-family:var(--mono);font-size:1.35rem;font-weight:600; color:var(--accent)} .stage{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-2)} .stage:last-child{border-bottom:0} .stage-n{font-family:var(--mono);font-size:.66rem;color:var(--accent);border:1px solid var(--line); width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex:none; border-radius:var(--r-sm);background:var(--panel-2)} /* ---------- footer ---------- */ .foot{margin-top:60px;padding:36px 0 44px;border-top:1px solid var(--line)} .foot-links{display:flex;gap:0;flex-wrap:wrap;margin:16px 0} .foot-links a{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase; color:var(--dim);text-decoration:none;padding:6px 14px 6px 0} .foot-links a:hover{color:var(--accent)} .ruo{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--warn); border-radius:0 var(--r) var(--r) 0;padding:18px 20px;font-size:.79rem;color:var(--muted); line-height:1.7} .ruo b{color:var(--txt)} /* ---------- utils ---------- */ .hide{display:none !important} .center{text-align:center} .mt0{margin-top:0}.mb0{margin-bottom:0} .divider{height:1px;background:var(--line);margin:24px 0} .accent{color:var(--accent)} /* ---------- responsive ---------- */ @media (max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} .lane{grid-template-columns:repeat(2,1fr)} } /* ---------- index table on small screens ---------- `.tbl` is `table-layout:fixed`, and the two optional columns are hidden with `display:none` at narrow widths. Under the fixed algorithm those columns keep their allocated slots, so the freed width is NOT redistributed — the table was 359px wide with its visible columns summing to 225px, leaving 134px of dead space on the right and squeezing the compound name to 67px. Which is how "hgh-fragment-176-191" rendered as "hg…". Switch to auto layout below the breakpoint so the name column absorbs the slack, and let names wrap rather than ellipsing — a truncated compound name is useless on an index whose entire job is naming compounds. */ @media (max-width:900px){ .tbl{table-layout:auto} .tbl td:nth-child(3){max-width:none} .t-name,.t-sub{white-space:normal;overflow:visible;text-overflow:clip} .t-name{font-size:.92rem;line-height:1.25} .tbl td{padding:12px 10px} .tbl thead th{padding-left:10px;padding-right:10px} } /* ---------- top bar on small screens ---------- A phone cannot fit brand + 11 nav links + two buttons on one row. The nav is a flex item with `flex:1` (basis 0), so instead of overflowing it collapsed to ZERO width — the links vanished entirely and the cart button was pushed off the right edge. Fix: wrap the nav onto its own full-width scroll row, so the top row carries identity and actions only and every link stays reachable. */ @media (max-width:1365px){ .topbar .wrap-wide{flex-wrap:wrap;height:auto;padding-top:9px;gap:9px 12px} .brand{flex:1 1 auto;min-width:0} .brand-name{font-size:.98rem;letter-spacing:.11em} .topbar-right{flex:0 0 auto} .topnav{order:3;flex:1 0 100%;margin-left:0; border-top:1px solid var(--line-2)} .topnav a{padding:9px 10px} } /* On a phone the identity row and the action buttons must still share one line — three stacked rows turns a sticky header into a third of the screen. Shrink the wordmark and the buttons just enough that brand + $39/yr + cart fit at 360px. */ @media (max-width:560px){ .topbar .wrap-wide{gap:8px 10px;padding-top:8px} .brand-name{font-size:.82rem;letter-spacing:.06em} .brand-mark{height:12px} .topbar-right{gap:6px} .topbar-right .btn-sm{padding:7px 9px;font-size:.58rem} .topnav a{padding:9px 9px;font-size:.63rem} } /* 360px-class Androids and the iPhone SE need one more notch of squeeze. */ @media (max-width:380px){ .brand-name{font-size:.74rem;letter-spacing:.04em} .topbar-right .btn-sm{padding:6px 7px;font-size:.55rem} .topbar .wrap-wide{gap:6px 8px} } @media (max-width:640px){ body{font-size:14.5px} .wrap,.wrap-wide{padding:0 16px} .g2,.g3,.g4{grid-template-columns:1fr} .statgrid{grid-template-columns:1fr} .readout{flex-wrap:wrap} .readout div{min-width:50%;border-bottom:1px solid var(--line-2)} .tierstrip{grid-template-columns:repeat(3,1fr)} .card{padding:18px}.card-lg{padding:22px} .ebar{grid-template-columns:100px 1fr 28px} .fact-table td:first-child{width:112px} .hero{padding:36px 0 24px} .t-hide{display:none} } /* ========================================================== SUPPLY-SIDE COMPONENTS (shop) ========================================================== */ /* ---------- RUO banner: always visible, never dismissible ---------- */ .notice{background:rgba(240,180,41,.07);border-bottom:1px solid var(--accent-line); padding:9px 0;text-align:center} .notice p{margin:0;font-family:var(--mono);font-size:.63rem;letter-spacing:.13em; text-transform:uppercase;color:var(--accent)} /* ---------- product grid ---------- */ .prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px; background:var(--line-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .prod{background:var(--panel);padding:22px;text-decoration:none;display:flex; flex-direction:column;gap:10px;transition:background .14s} .prod:hover{background:var(--panel-2)} .prod:hover .prod-name{color:var(--accent)} .prod-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .prod-name{display:block;font-family:var(--display);font-weight:700;font-size:1.12rem; transition:color .14s;line-height:1.25} .prod-sub{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.11em; text-transform:uppercase;color:var(--dim);margin-top:5px;line-height:1.5; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .prod-top>span:first-child{min-width:0;flex:1} .prod-desc{font-size:.83rem;color:var(--muted);flex:1} .prod-foot{display:flex;justify-content:space-between;align-items:center; padding-top:12px;border-top:1px solid var(--line-2)} .prod-price{font-family:var(--mono);font-size:.95rem;color:var(--txt)} .prod-price small{color:var(--dim);font-size:.68rem} /* ---------- product page ---------- */ .opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px; border:1px solid var(--line);border-radius:var(--r);background:var(--panel);cursor:pointer; transition:.14s;margin-bottom:8px} .opt:hover{border-color:var(--dim)} .opt.on{border-color:var(--accent-line);background:var(--accent-dim)} .opt-mg{display:block;font-family:var(--mono);font-size:.92rem} .opt-sku{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em; color:var(--dim);margin-top:4px} .opt-price{font-family:var(--mono);font-size:1rem} .spec{width:100%;border-collapse:collapse;font-size:.86rem} .spec td{padding:11px 0;border-bottom:1px solid var(--line-2);vertical-align:top} .spec td:first-child{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em; text-transform:uppercase;color:var(--dim);width:150px;padding-right:16px} .spec tr:last-child td{border-bottom:0} .seq{font-family:var(--mono);font-size:.72rem;word-break:break-all;line-height:1.7;color:var(--muted)} .qty{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .qty button{background:var(--panel-2);border:0;color:var(--txt);width:38px;height:40px; font-family:var(--mono);font-size:1rem;cursor:pointer;transition:.14s} .qty button:hover{background:var(--panel-3);color:var(--accent)} .qty input{width:52px;height:40px;background:var(--panel);border:0;border-left:1px solid var(--line); border-right:1px solid var(--line);color:var(--txt);text-align:center; font-family:var(--mono);font-size:.9rem} /* ---------- cart ---------- */ .line{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2)} .line:last-child{border-bottom:0} .line-main{flex:1;min-width:0} .line-name{display:block;font-family:var(--display);font-weight:700;font-size:.98rem} .line-sku{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em; color:var(--dim);margin-top:4px} .line-price{font-family:var(--mono);font-size:.92rem;white-space:nowrap} .totals{border-top:1px solid var(--line);margin-top:8px;padding-top:16px} .totrow{display:flex;justify-content:space-between;padding:7px 0;font-size:.9rem;color:var(--muted)} .totrow.grand{font-family:var(--mono);font-size:1.2rem;color:var(--txt); border-top:1px solid var(--line-2);margin-top:8px;padding-top:14px} .field{width:100%;padding:13px 15px;border-radius:var(--r-sm);border:1px solid var(--line); font-family:var(--mono);font-size:.82rem;margin:0 0 12px;background:var(--bg);color:var(--txt)} .field:focus{outline:none;border-color:var(--accent-line)} .field::placeholder{color:var(--dim)} label.micro{display:block;margin-bottom:6px} .consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:.79rem; color:var(--muted);line-height:1.5;cursor:pointer} .consent input{margin:2px 0 0;width:15px;height:15px;flex:none;accent-color:var(--accent);cursor:pointer} .consent b{color:var(--txt)} .checks{list-style:none;padding:0;margin:0} .checks li{position:relative;padding:9px 0 9px 24px;font-size:.87rem;color:var(--muted); border-bottom:1px solid var(--line-2)} .checks li:last-child{border-bottom:0} .checks li::before{content:'>';position:absolute;left:0;top:9px;color:var(--accent); font-family:var(--mono);font-size:.76rem} /* ---------- RUO block ---------- */ .ruo{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--warn); border-radius:0 var(--r) var(--r) 0;padding:18px 20px;font-size:.79rem;color:var(--muted); line-height:1.7} .ruo b{color:var(--txt)} .ruo-hard{border-left-color:var(--danger);background:rgba(244,63,94,.04)} /* index cross-link block */ .xlink{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--panel); display:flex;gap:18px;align-items:center;flex-wrap:wrap} .xlink-mark{display:flex;gap:2px;align-items:center;height:16px;flex:none} .xlink-mark i{width:2px;display:block;background:#22d3ee} /* ========================================================== UNIFIED NAV + CROSS-SECTION COMPONENTS ========================================================== */ .navgroup{display:flex;align-items:center;gap:0;padding-right:10px;margin-right:4px; border-right:1px solid var(--line)} .navgroup:last-child{border-right:0;padding-right:0;margin-right:0} .navgroup-label{font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);padding:0 7px 0 2px;opacity:.55} .navgroup.on .navgroup-label{color:var(--accent);opacity:1} .pill-stock{background:rgba(240,180,41,.1);border-color:rgba(240,180,41,.35);color:#f0b429} .foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px; margin:22px 0 26px;max-width:640px} .foot-cols p.micro{margin:0 0 10px} .foot-cols a{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em; text-transform:uppercase;color:var(--dim);text-decoration:none;padding:5px 0} .foot-cols a:hover{color:var(--accent)} .buybox{border:1px solid var(--amber-line);background:rgba(240,180,41,.05); border-radius:var(--r);padding:20px} .buybox .micro-b{color:#f0b429} .btn-amber{background:#f0b429;border-color:#f0b429;color:#241a00} .btn-amber:hover{background:#f7c74f;border-color:#f7c74f;color:#241a00} .btn-cyan{background:transparent;color:#22d3ee;border-color:rgba(34,211,238,.4)} .btn-cyan:hover{background:rgba(34,211,238,.1);border-color:#22d3ee;color:#22d3ee} .wallet-opt{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 16px;border:1px solid var(--line);border-radius:var(--r); background:var(--panel);cursor:pointer;transition:.14s;margin-bottom:8px} .wallet-opt:hover{border-color:var(--dim)} .wallet-opt.on{border-color:var(--accent-line);background:var(--accent-dim)} .wallet-name{display:block;font-family:var(--mono);font-size:.9rem} .wallet-net{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em; text-transform:uppercase;color:var(--dim);margin-top:4px} .addrbox{background:var(--bg);border:1px solid var(--line);border-radius:var(--r); padding:16px;margin-top:12px} .addr{font-family:var(--mono);font-size:.78rem;word-break:break-all;line-height:1.7; color:var(--accent)} .qr{background:#fff;padding:12px;border-radius:var(--r);display:inline-block;line-height:0} .qr svg{display:block} .orderref{font-family:var(--mono);font-size:1.1rem;letter-spacing:.16em;color:var(--accent)} .step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)} .step:last-child{border-bottom:0} .step-n{font-family:var(--mono);font-size:.64rem;color:var(--accent);border:1px solid var(--line); width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:none; border-radius:var(--r-sm);background:var(--panel-2)} @media (max-width:900px){ .navgroup-label{display:none} .foot-cols{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .foot-cols{grid-template-columns:1fr} } /* ---------- cart lines on small screens ---------- `.line` is a single flex row: grade badge, name/SKU, quantity stepper, price, remove. The stepper alone is 128px and the buttons another ~140px, so at 393px the name/SKU block was left about 30px and wrapped one word per line. Give it two rows: identity on top, controls beneath. */ @media (max-width:560px){ .line{flex-wrap:wrap;gap:12px;padding:18px 0} .line > .tier{order:1;flex:0 0 auto} /* basis of nearly the full row is what actually forces the wrap. With `flex:1 1 auto` the block just shrank to 14px instead, because min-width:0 lets it collapse rather than push the controls onto a second line. */ .line-main{order:2;flex:1 1 calc(100% - 58px);min-width:0} .line .qty{order:3;flex:0 0 auto} .line-price{order:4;flex:1 1 auto;text-align:right;font-size:1.02rem} .line > .pill{order:5;flex:0 0 auto} .line-sku{margin-top:5px;line-height:1.55} }