anatomy / refinement-lab.css
betterwithage's picture
hf-sync: source 498de11e19d2436611085c9fc6825dac05727295 run 37304151762
246c9ea verified
Raw History Blame Contribute Delete
4.05 kB
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eef4ff;background:#050810;line-height:1.5;--line:rgba(139,175,255,.18);--panel:rgba(12,19,35,.78);--cyan:#7ce7ff;--violet:#b8a2ff;--muted:#9cacbf}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 15% 0%,rgba(32,92,160,.26),transparent 34rem),radial-gradient(circle at 90% 20%,rgba(99,63,180,.18),transparent 30rem),#050810}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;color:#000;padding:.75rem}.shell{width:min(1180px,calc(100% - 2rem));margin:auto;padding:clamp(2rem,6vw,5rem) 0}.hero{border:1px solid var(--line);background:linear-gradient(135deg,rgba(15,29,53,.92),rgba(8,12,23,.76));padding:clamp(1.5rem,5vw,4rem);border-radius:1.5rem;box-shadow:0 20px 80px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.06)}.eyebrow{font-size:.75rem;letter-spacing:.2em;color:var(--cyan);font-weight:700}h1{font-size:clamp(2.2rem,7vw,5.4rem);line-height:.96;letter-spacing:-.055em;margin:.75rem 0 1.25rem;background:linear-gradient(90deg,#fff,var(--cyan),var(--violet));-webkit-background-clip:text;color:transparent}.lede{max-width:78ch;font-size:clamp(1rem,2vw,1.2rem);color:#c7d2e3}.status-line{display:flex;align-items:center;gap:.65rem;margin-top:1.5rem;color:#d8e4f7}.dot{width:.7rem;height:.7rem;border-radius:50%;background:#758195;box-shadow:0 0 0 .3rem rgba(117,129,149,.12)}.dot.ready{background:#63f2bd;box-shadow:0 0 0 .3rem rgba(99,242,189,.12),0 0 22px rgba(99,242,189,.5)}.dot.blocked{background:#ffc86b;box-shadow:0 0 0 .3rem rgba(255,200,107,.12)}.pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.25rem 0}.pipeline article,.metrics div,.cards article{border:1px solid var(--line);background:var(--panel);border-radius:1rem;padding:1.25rem;backdrop-filter:blur(12px)}.pipeline span{color:var(--cyan);font-family:ui-monospace,monospace}.pipeline h2{margin:.45rem 0;font-size:1.05rem}.pipeline p{margin:0;color:var(--muted);font-size:.92rem}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0}.metrics span{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.metrics strong{display:block;margin-top:.45rem;font-family:ui-monospace,monospace;overflow-wrap:anywhere}.controls{display:flex;align-items:end;gap:.75rem;margin:2rem 0 1rem}.controls label{position:absolute;left:-9999px}.controls input{flex:1;min-height:44px;border-radius:.75rem;border:1px solid var(--line);background:#080d18;color:#fff;padding:.8rem 1rem}.controls button{min-height:44px;border:0;border-radius:.75rem;padding:.8rem 1.1rem;background:linear-gradient(120deg,var(--cyan),var(--violet));color:#08101c;font-weight:800;cursor:pointer}.controls input:focus-visible,.controls button:focus-visible{outline:3px solid #fff;outline-offset:3px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.section-head h2{font-size:clamp(1.4rem,4vw,2.2rem)}.section-head span{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.cards dl{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;margin:0}.cards dt{color:var(--muted)}.cards dd{margin:0;font-family:ui-monospace,monospace}.cards h3{margin-top:0;color:var(--cyan)}.empty{border:1px dashed var(--line);border-radius:1rem;padding:1.5rem;color:var(--muted)}footer{margin-top:3rem;border-top:1px solid var(--line);padding-top:1.5rem;color:var(--muted);font-size:.9rem}code{color:var(--cyan)}@media(max-width:800px){.pipeline{grid-template-columns:repeat(2,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr}}@media(max-width:480px){.shell{width:min(100% - 1rem,1180px)}.hero{padding:1.25rem}.pipeline,.metrics{grid-template-columns:1fr}.controls{align-items:stretch;flex-direction:column}.controls input,.controls button{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}