@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --ink:#172b36; --ice:#e7eff1; --paper:#f7f9f9; --teal:#126b78; --brass:#ad7744; --muted:#596c75; --line:#c5d2d6; font-family:'DM Sans',Arial,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--brass); outline-offset:3px; }
.masthead { display:flex; align-items:center; justify-content:space-between; padding:20px clamp(22px,5vw,80px); border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:25px; font-weight:700; letter-spacing:.055em; text-decoration:none; }
.brand span { color:var(--teal); }
.masthead-note,.eyebrow,footer { color:var(--muted); text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:700; }
main { max-width:1280px; margin:auto; padding:0 clamp(22px,5vw,80px) 100px; }
.intro { padding:clamp(52px,8vw,105px) 0 62px; max-width:800px; }
.eyebrow { margin:0 0 22px; }
h1,h2,h3 { font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:600; margin:0; }
h1 { font-size:clamp(55px,8vw,112px); line-height:.91; letter-spacing:-.022em; }
h1 em { color:var(--teal); font-style:normal; }
.intro-copy { max-width:530px; color:var(--muted); line-height:1.6; font-size:16px; margin:28px 0 0; }
.workspace { border-top:4px solid var(--ink); padding-top:28px; }
.lookup label,.share label { display:block; font-size:13px; font-weight:700; margin-bottom:10px; }
.search-row { display:flex; max-width:670px; gap:8px; }
input { min-width:0; border:1px solid var(--line); background:#fff; color:var(--ink); padding:13px 15px; border-radius:2px; }
.search-row input { flex:1; }
button { border:0; border-radius:2px; padding:13px 22px; background:var(--ink); color:#fff; font-weight:700; }
button:hover { background:var(--teal); }
.status { min-height:23px; margin:14px 0 0; color:var(--muted); font-size:13px; }
.status.error { color:#9c3f38; font-weight:700; }
.results { display:grid; max-width:670px; gap:5px; }
.results button { display:flex; justify-content:space-between; text-align:left; background:var(--ice); color:var(--ink); }
.results button:hover { background:#d5e5e8; }
.results small { color:var(--muted); }
#pack { margin-top:44px; }
.pack-head { display:flex; justify-content:space-between; align-items:end; gap:20px; padding-bottom:26px; }
.pack-head .eyebrow { margin-bottom:6px; }
h2 { font-size:clamp(39px,5vw,68px); line-height:1; }
#freeze { background:var(--teal); white-space:nowrap; }
#freeze:hover { background:var(--ink); }
.state-strip { display:grid; grid-template-columns:repeat(3,1fr); background:var(--ice); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.state { min-height:207px; padding:26px 28px 20px; display:flex; flex-direction:column; border-right:1px solid var(--line); }
.state:last-child { border-right:0; }
.stage-line { font-family:monospace; letter-spacing:.22em; color:var(--teal); font-size:18px; margin-bottom:18px; }
.stage-early .stage-line { color:var(--brass); }
.state-name { font-size:15px; font-weight:700; }
.state strong { font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:70px; line-height:1; font-weight:600; margin-top:4px; }
.state-help { font-size:12px; color:var(--muted); margin-top:auto; }
.clock-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:0; border-bottom:1px solid var(--line); }
.clock-strip div { padding:22px 28px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.clock-strip div:last-child { border-right:0; }
.clock-strip span { font-size:13px; font-weight:700; }
.clock-strip strong { font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-size:48px; line-height:1; font-weight:600; }
.clock-strip .state-help { font-weight:400; }
.share { background:#d9eaed; padding:18px; margin-top:18px; }
.share input { width:min(100%,630px); }
.share button { margin:6px 0; }
.listings-head { display:flex; align-items:baseline; justify-content:space-between; margin:35px 0 12px; border-bottom:1px solid var(--line); padding-bottom:12px; }
h3 { font-size:27px; }
#listing-total { color:var(--muted); font-size:12px; }
.listing { display:grid; grid-template-columns:155px 1fr auto; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding:17px 3px; }
.listing-state { font-size:12px; font-weight:700; color:var(--teal); }
.listing-url { overflow-wrap:anywhere; color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.listing-meta { color:var(--muted); font:12px monospace; white-space:nowrap; }
footer { max-width:1280px; margin:auto; padding:25px clamp(22px,5vw,80px) 40px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; }
@media(max-width:680px) { .masthead-note { display:none; } .intro { padding-bottom:45px; } .pack-head { align-items:start; flex-direction:column; } .state-strip,.clock-strip { grid-template-columns:1fr; } .state { min-height:125px; border-right:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr auto; gap:3px; } .clock-strip div { border-right:0; border-bottom:1px solid var(--line); } .stage-line { grid-column:1/-1; margin:0; } .state strong { grid-column:2; grid-row:2/4; font-size:52px; } .state-help { grid-column:1; } .listing { grid-template-columns:1fr; gap:5px; } footer { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }