/* rip3.info — "Lajur gel": protein-gel bench. Bench paper, Coomassie lanes, comb wells, marker ladder, blue-light imager. */
:root{
  --bench:#eceee8;--paper:#f9faf6;--paper-2:#f2f4ef;--ink:#141a2c;--ink-2:#454b5e;--line:#cfd3c9;--line-2:#b3b9ad;
  --blue:#2437a0;--blue-d:#18256e;--stain:#dfe4f4;--stain-2:#c3cbea;
  --gel:#0e1316;--gel-2:#161e23;--gel-line:#2b363d;--glow:#ff9442;--glow-2:#ffc28c;--gel-text:#e9ece7;--gel-mute:#a6b1b7;
  --ref:#c93d25;--leaf:#2c7f52;
  --fd:"Tomorrow","Plus Jakarta Sans",system-ui,sans-serif;--fb:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1240px;--gut:16px;
  /* game core tokens */
  --primary:var(--blue);--surface:var(--paper);--text:var(--ink);--muted:var(--ink-2);--border:var(--line);--font-head:var(--fd);--font-body:var(--fb)
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bench);color:var(--ink);font:400 1.0625rem/1.68 var(--fb);overflow-x:hidden;
  background-image:linear-gradient(90deg,rgba(20,26,44,.035) 1px,transparent 1px);background-size:88px 100%}
img,svg{display:block;max-width:100%}
a{color:var(--blue);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--blue-d);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ref);outline-offset:2px;border-radius:2px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
@media (min-width:700px){:root{--gut:28px}}
@media (min-width:1200px){:root{--gut:40px}}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:12px 16px;font-weight:700;text-decoration:none;border-radius:4px}
.skip:focus{top:12px;color:#fff}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header: bench label + comb ---------- */
.hd{position:relative;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.hd-row{display:flex;align-items:center;gap:10px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:48px;margin-right:auto}
.brand:hover{color:var(--ink)}
.tube-ico{width:20px;height:34px;flex:0 0 auto}
.t-cap{fill:var(--blue)}.t-body{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}.t-fill{fill:var(--stain-2)}
.brand:hover .t-fill{fill:var(--blue)}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font:700 1.55rem/1 var(--fd);letter-spacing:.02em}
.brand-tag{font:500 .72rem/1.2 var(--fd);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:5px;padding-top:4px;border-top:2px solid var(--blue);align-self:flex-start}
.lang{display:flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.lang a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;text-decoration:none;color:var(--ink);font:600 .85rem/1 var(--fd);letter-spacing:.06em}
.lang a+a{border-left:1px solid var(--line-2)}
.lang a[aria-current]{background:var(--ink);color:var(--paper)}
.lang a:hover:not([aria-current]){background:var(--stain)}
.lang-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--paper);font:600 .9rem/1 var(--fd);letter-spacing:.06em;cursor:pointer}
.menu-ico{display:grid;gap:4px;width:18px}
.menu-ico i{display:block;height:2px;background:currentColor;border-radius:1px;transition:transform .2s}
.menu-ico i:nth-child(2){width:60%}
.hd.is-open .menu-ico i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.is-open .menu-ico i:nth-child(2){opacity:0}
.hd.is-open .menu-ico i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-txt{display:none}
.hd-play{display:none;align-items:center;gap:9px;min-height:44px;padding:0 16px;border-radius:4px;background:var(--blue);color:#fff;text-decoration:none;font:600 .92rem/1 var(--fd);letter-spacing:.02em}
.hd-play:hover{background:var(--blue-d);color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 3px rgba(255,148,66,.3)}
@media (min-width:420px){.menu-txt{display:inline}}
@media (min-width:700px){.hd-play{display:inline-flex}}

/* comb: spine + wells */
.comb{display:none}
.hd.is-open .comb{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(20,26,44,.35)}
.comb ul{list-style:none;margin:0;padding:10px 0 14px;display:grid;gap:4px}
.comb a{display:flex;align-items:center;gap:12px;min-height:48px;padding:4px 8px;text-decoration:none;color:var(--ink);font:600 1rem/1.25 var(--fd);border-radius:4px}
.comb a:hover{background:var(--stain)}
.well{flex:0 0 auto;display:grid;place-items:center;width:34px;height:22px;border:1.5px solid var(--ink);border-top:0;border-radius:0 0 4px 4px;font:600 .7rem/1 var(--fd);color:var(--ink-2);background:var(--paper);transition:background .2s,color .2s}
.comb a:hover .well{background:var(--stain-2);color:var(--ink)}
.comb a[aria-current] .well{background:var(--blue);border-color:var(--blue);color:#fff}
.comb a[aria-current] .nav-t{box-shadow:inset 0 -3px 0 var(--glow)}
@media (min-width:980px){
  .menu-btn{display:none}
  .comb,.hd.is-open .comb{display:block;position:static;box-shadow:none;border:0;background:transparent}
  .comb .wrap{position:relative}
  .comb .wrap::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:5px;background:var(--ink);border-radius:0 0 2px 2px}
  .comb ul{grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;padding:5px 0 12px}
  .comb a{flex-direction:column;align-items:flex-start;gap:8px;padding:0 0 4px;border-radius:0;font-size:.95rem;min-height:0}
  .comb a:hover{background:transparent;color:var(--blue)}
  .well{width:44px;height:26px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;border-radius:4px;text-decoration:none;font:600 1rem/1.15 var(--fd);letter-spacing:.02em;text-align:center;transition:background .15s,color .15s,transform .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 1px 0 var(--blue-d),0 10px 24px -14px rgba(36,55,160,.9)}
.btn-blue:hover{background:var(--blue-d);color:#fff}
.btn-line{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-glow{background:var(--glow);color:#1d1006;box-shadow:0 0 0 1px var(--glow-2) inset,0 10px 28px -12px rgba(255,148,66,.7)}
.btn-glow:hover{background:var(--glow-2);color:#1d1006}

/* ---------- home hero ---------- */
.hero{padding:28px 0 36px}
.hero-grid{display:grid;gap:28px;align-items:start}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:7px 12px;background:var(--paper);border:1px solid var(--line-2);border-left:4px solid var(--ref);font:600 .78rem/1.3 var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.kick-dot{width:8px;height:8px;border-radius:50%;background:var(--ref)}
h1{font:700 clamp(2rem,1.2rem + 3.6vw,3.55rem)/1.04 var(--fd);letter-spacing:-.012em;margin:0 0 18px;color:var(--ink);text-wrap:balance}
.lead{font-size:1.14rem;line-height:1.62;color:var(--ink)}
.lead p{margin:0 0 12px;max-width:62ch}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 22px}
.reagents{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.reagents li{position:relative;padding:8px 12px 8px 22px;background:var(--paper);border:1px solid var(--line);border-radius:3px;font:500 .92rem/1.35 var(--fb);color:var(--ink-2)}
.reagents li::before{content:"";position:absolute;left:9px;top:9px;bottom:9px;width:4px;border-radius:2px;background:var(--blue)}
.reagents li:nth-child(2)::before{background:var(--glow)}
.reagents li:nth-child(3)::before{background:var(--leaf)}
@media (min-width:980px){
  .hero{padding:48px 0 52px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(380px,500px);gap:56px}
  .hero-copy{padding-top:18px;position:sticky;top:24px}
}

/* imager (game housing) */
.imager{width:100%;max-width:580px;margin-inline:auto;background:linear-gradient(180deg,#232b31,#171d21);border-radius:16px;padding:10px;box-shadow:0 1px 0 #3a454c inset,0 30px 60px -30px rgba(14,19,22,.75),0 0 0 1px #0a0e10;scroll-margin-top:12px;min-width:0}
.imager-top{display:flex;align-items:center;gap:12px;padding:6px 8px 12px}
.leds{display:flex;gap:6px}
.leds i{width:8px;height:8px;border-radius:50%;background:#3b474e}
.leds i:first-child{background:var(--glow);box-shadow:0 0 8px var(--glow)}
.leds i:nth-child(2){background:#3f7bd8}
.imager-t{margin:0;font:600 .8rem/1.2 var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--gel-mute)}
.imager-screen{background:radial-gradient(120% 70% at 50% 0%,#15283a 0,#0e1418 55%,#0b0f12 100%);border-radius:10px;padding:14px;border:1px solid #05080a}
@media (max-width:380px){.imager{padding:6px;border-radius:12px}.imager-screen{padding:10px 8px}}
@media (prefers-reduced-motion:no-preference){.leds i:first-child{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{50%{box-shadow:0 0 2px var(--glow);opacity:.7}}

/* gel figures */
.gel-bg{fill:var(--stain)}
.gel-well{fill:var(--paper);stroke:var(--stain-2);stroke-width:1}
.gel-band{fill:var(--blue)}
.gel-lad{fill:var(--blue);opacity:.8}
.gel-ref{fill:var(--ref);opacity:1}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--stain)}
.gel-strip{width:100%;height:56px}
@media (prefers-reduced-motion:no-preference){
  .gel-strip .gel-band{animation:migrate 1.6s cubic-bezier(.2,.7,.2,1) both}
  .gel-strip .gel-band:nth-of-type(3n){animation-duration:2.1s}
}
@keyframes migrate{from{transform:translateY(-10px)}to{transform:none}}

/* ---------- inner page header ---------- */
.run{padding:22px 0 30px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--paper),var(--bench))}
.run-grid{display:grid;gap:24px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:0 0 14px;padding:0;font:500 .9rem/1.3 var(--fd);letter-spacing:.03em}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:18px;height:2px;margin:0 10px;background:var(--line-2)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue)}
.crumbs [aria-current]{color:var(--ink-2)}
.slip{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:12px}
.slip-gel{border-radius:3px;overflow:hidden;border:1px solid var(--stain-2);align-self:stretch}
.gel-fig{width:100%;height:100%;min-height:120px}
.slip-t{margin:0 0 4px;font:700 1.08rem/1.25 var(--fd)}
.slip-p{margin:0 0 12px;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.slip .btn{min-height:46px;padding:10px 16px;font-size:.95rem}
@media (min-width:980px){
  .run{padding:30px 0 44px}
  .run-grid{grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:end}
  .slip{grid-template-columns:1fr;padding:14px}
  .gel-fig{height:150px}
}

/* ---------- bench: ladder + content ---------- */
.bench{display:grid;gap:28px;padding-top:30px;padding-bottom:40px}
.ladder{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:14px 14px 10px}
.ladder-t{margin:0 0 8px;font:600 .78rem/1.2 var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ladder ol{list-style:none;margin:0;padding:0 0 0 20px;position:relative}
.ladder ol::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:10px;border-radius:2px;background:var(--stain)}
.ladder a{position:relative;display:flex;align-items:center;min-height:44px;padding:6px 4px 6px 10px;text-decoration:none;color:var(--ink);font-size:.95rem;line-height:1.35;border-radius:3px}
.ladder a:hover{background:var(--stain);color:var(--blue-d)}
.rung{position:absolute;left:-16px;top:50%;width:10px;height:4px;margin-top:-2px;border-radius:2px;background:var(--blue);opacity:.55;transition:width .2s,opacity .2s,background .2s}
.ladder a.is-cur{color:var(--blue-d);font-weight:600}
.ladder a.is-cur .rung{background:var(--ref);opacity:1;width:16px;left:-19px}
.content{min-width:0;container-type:inline-size}
@media (min-width:1100px){
  .bench{grid-template-columns:260px minmax(0,760px);gap:64px;padding-top:44px;padding-bottom:56px}
  .bench-solo{grid-template-columns:minmax(0,760px)}
  .ladder{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow:auto;background:transparent;border:0;padding:0}
}

/* lanes */
.intro-rest p,.lane-body p{margin:0 0 1em;max-width:70ch}
.lane{position:relative;padding:4px 0 10px;margin:0 0 34px;scroll-margin-top:16px}
.lane-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 14px;padding-top:18px;border-top:1px solid var(--line-2)}
.lane-no{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:40px;padding:0 0 6px;background:var(--stain);border-radius:0 0 3px 3px;margin-top:-19px}
.lane-no b{display:grid;place-items:center;width:100%;height:24px;background:var(--ink);color:var(--paper);font:600 .78rem/1 var(--fd);letter-spacing:.04em}
.lane-no i{display:block;width:26px;height:3px;border-radius:2px;background:var(--blue);opacity:.8}
.lane-no i:nth-of-type(2){opacity:.45;width:22px}
.lane-no i:nth-of-type(3){opacity:.25}
.lane:nth-of-type(3n+2) .lane-no i:first-of-type{background:var(--ref);opacity:1}
h2{font:700 clamp(1.4rem,1.1rem + 1.2vw,1.9rem)/1.18 var(--fd);letter-spacing:-.005em;margin:0;color:var(--ink);text-wrap:balance;scroll-margin-top:16px}
h3{font:600 1.18rem/1.3 var(--fd);margin:1.4em 0 .5em}
.lane-body{padding-left:0}
@container (min-width:600px){.lane-body{padding-left:54px}}
.content strong{font-weight:700;color:var(--ink)}
.content ul,.content ol{margin:0 0 1.1em;padding:0;list-style:none;max-width:70ch}
.content li{position:relative;padding-left:30px;margin:0 0 .6em}
.content ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:14px;height:4px;border-radius:2px;background:var(--blue)}
.content ol{counter-reset:li}
.content ol>li{counter-increment:li}
.content ol>li::before{content:counter(li);position:absolute;left:0;top:.2em;display:grid;place-items:center;width:22px;height:20px;border:1.5px solid var(--ink);border-top:0;border-radius:0 0 3px 3px;font:600 .72rem/1 var(--fd)}
.content table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;margin:0 0 1.3em;font-size:.95rem;background:var(--paper);border:1px solid var(--line)}
.content th,.content td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;min-width:120px}
.content th{background:var(--stain);font:600 .88rem/1.3 var(--fd);letter-spacing:.02em}
.content small{font-size:.9rem}

/* faq: blot strips */
.faq{margin:10px 0 34px;scroll-margin-top:16px}
.faq h2{padding:18px 0 14px;border-top:3px solid var(--ink)}
.faq-list{display:grid;gap:8px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:4px}
.faq details[open]{border-color:var(--stain-2);box-shadow:inset 4px 0 0 var(--blue)}
.faq summary{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 14px;cursor:pointer;list-style:none;font:600 1.02rem/1.4 var(--fb)}
.faq summary::-webkit-details-marker{display:none}
.blot{flex:0 0 auto;width:12px;height:22px;border:1.5px solid var(--blue);border-radius:2px;background:linear-gradient(var(--blue),var(--blue)) no-repeat 50% 100%/100% 0;transition:background-size .25s}
details[open] .blot{background-size:100% 55%}
.q-t{flex:1 1 auto}
.q-pm{flex:0 0 auto;position:relative;width:16px;height:16px}
.q-pm::before,.q-pm::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink);transition:transform .2s}
.q-pm::after{transform:rotate(90deg)}
details[open] .q-pm::after{transform:none}
.faq .a{padding:0 16px 6px 40px}
.faq .a p{margin:0 0 .9em}

/* cta: loading dock */
.load{position:relative;margin:36px 0 10px;padding:30px 20px 22px;background:var(--gel);color:var(--gel-text);border-radius:8px;overflow:hidden}
.load-wells{position:absolute;left:20px;right:20px;top:0;display:flex;gap:10px}
.load-wells i{flex:1;height:10px;background:#26323a;border-radius:0 0 3px 3px}
.load-wells i:nth-child(2){background:var(--glow);box-shadow:0 0 12px rgba(255,148,66,.7)}
.load p{margin:0 0 16px;font:600 1.12rem/1.45 var(--fd);max-width:52ch}

/* ---------- related: tube rack ---------- */
.rack{background:var(--paper-2);border-top:1px solid var(--line);padding:34px 0 44px}
.rack-t{margin:0 0 18px;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.vials{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.vial{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:26px 16px 16px;background:var(--paper);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.vial:hover{color:var(--ink);border-color:var(--line-2);box-shadow:0 14px 28px -20px rgba(20,26,44,.6);transform:translateY(-2px)}
.vial-cap{position:absolute;left:16px;top:-1px;width:54px;height:12px;border-radius:0 0 4px 4px;background:var(--blue)}
.v2 .vial-cap{background:var(--ref)}.v3 .vial-cap{background:var(--leaf)}.v4 .vial-cap{background:#b35f1c}
.vial strong{font:600 1.08rem/1.3 var(--fd)}
.vial:hover strong{color:var(--blue)}
.vial-d{font-size:.95rem;line-height:1.5;color:var(--ink-2)}

/* ---------- footer: imager at rest ---------- */
.ft{background:var(--gel);color:var(--gel-text);padding:0 0 22px}
.ft-gel{border-bottom:1px solid var(--gel-line)}
.gel-foot{width:100%;height:64px}
.gel-foot .gel-bg{fill:#0f1a20}
.gel-foot .gel-well{fill:var(--gel);stroke:#23313a}
.gel-foot .gel-band,.gel-foot .gel-lad{fill:var(--glow)}
.gel-foot .gel-ref{fill:#ffd2a8}
.ft-grid{display:grid;gap:26px;padding-top:30px;padding-bottom:22px}
.ft .brand{color:var(--gel-text);margin:0 0 12px}
.ft .t-body{stroke:var(--gel-text)}.ft .t-cap{fill:var(--glow)}.ft .t-fill{fill:#3b4a54}
.ft .brand-tag{color:var(--gel-mute);border-top-color:var(--glow)}
.ft-disc{margin:0;font-size:.95rem;line-height:1.6;color:var(--gel-mute);max-width:52ch}
.ft h2{font:600 .8rem/1.2 var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--gel-mute);margin:0 0 8px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li a{display:flex;align-items:center;min-height:44px;color:var(--gel-text);text-decoration:none;font-size:.98rem}
.ft li a:hover{color:var(--glow-2);text-decoration:underline}
.ft :focus-visible{outline-color:var(--glow)}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--gel-line);font:500 .9rem/1.3 var(--fd);color:var(--gel-mute)}
.age{display:inline-grid;place-items:center;min-width:48px;height:32px;padding:0 8px;border:1.5px solid var(--glow);color:var(--glow-2);border-radius:3px;font:700 .95rem/1 var(--fd)}
@media (min-width:760px){.ft-grid{grid-template-columns:1.4fr 1fr 1fr;gap:40px}}

/* 404 */
.nf{padding:70px 0 90px}
.nf-code{margin:0;font:700 clamp(4rem,12vw,8rem)/1 var(--fd);color:var(--stain-2);letter-spacing:.04em}
.nf p{max-width:52ch}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}