@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700;
  src: url("assets/space-grotesk-latin.woff2") format("woff2"); font-display: swap;
}
:root {
  color-scheme: dark;
  --v1-text: #dceffb; --v1-muted: #adc0d2; --v1-cyan: #4af0ff;
  --v1-blue: #91bfff; --v1-border: #263342; --v1-radius: 8px;
  --display: "Space Grotesk", -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 7.5rem; }
body { margin: 0; background: #06090e; color: var(--v1-text); font: 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
a { color: inherit; text-underline-offset: .25em; }
:focus-visible { outline: 2px solid var(--v1-cyan); outline-offset: 4px; }
section { padding: clamp(3.2rem, 6vw, 5.5rem) 0; }
h1, h2, h3, .brand { font-family: var(--display); }
h1, h2, h3, p { margin: 0; }
h2 { font-size: clamp(2rem, 3.9vw, 3.55rem); line-height: 1.08; letter-spacing: -.055em; }
h3 { line-height: 1.22; }
.site-header { position: sticky; top: 0; z-index: 5; background: #080e16f5; border-bottom: 1px solid var(--v1-border); }
.header-inner, .nav, .brand, .cta-row, .footer-inner, .footer-links { display: flex; align-items: center; }
.header-inner, .footer-inner { justify-content: space-between; gap: 1rem; }
.header-inner { min-height: 6.5rem; padding-block: .5rem; flex-wrap: wrap; }
.brand { gap: .85rem; text-decoration: none; text-transform: uppercase; font-size: clamp(1.65rem, 2.5vw, 2.3rem); line-height: 1.05; font-weight: 700; letter-spacing: .065em; white-space: nowrap; }
.brand img { width: clamp(4.25rem, 6.5vw, 5.75rem); height: auto; flex: none; }
.nav, .footer-links { gap: clamp(.9rem, 3vw, 2.2rem); }
.nav a, .footer-links a { font-size: .95rem; color: var(--v1-muted); text-decoration: none; padding: .7rem 0; }
.nav a:hover, .nav a[aria-current], .footer-links a:hover, .hero-link:hover { color: var(--v1-cyan); }
.hero { position:relative; isolation:isolate; overflow:hidden; padding:clamp(2rem,4.8vw,4.6rem) 0; border-bottom:1px solid #314150; background:#09131f; }
.hero-art { position:absolute; inset:0; z-index:-2; pointer-events:none; }
.hero-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,#040b13b8 0%,#060d17bf 32%,#08121c66 48%,transparent 65%),
    linear-gradient(0deg,#03091266,transparent 14%,transparent 90%,#0a12231a); }
.hero-inner { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(1rem, 4vw, 4rem); }
.status-pill, .section-label { font: 600 .74rem/1.5 var(--mono); color: var(--v1-cyan); text-transform: uppercase; letter-spacing: .16em; }
.status-pill { display: flex; gap: .7rem; align-items: center; margin-bottom: 1.45rem; }
.dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--v1-cyan); box-shadow: 0 0 12px #4af0ff90; }
.hero h1 { font-size: clamp(3.3rem, 6.4vw, 6.15rem); letter-spacing: -.07em; font-weight: 700; line-height: .98; }
.hero h1 span { color: #b6d5ee; }
.lede, .section-intro, .protocol-story .storage-copy { color: var(--v1-muted); font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 55ch; }
.lede { margin: 1.5rem 0 1.85rem; max-width: 35ch; }
.cta-row { gap: 1.45rem; flex-wrap: wrap; }
.btn, .hero-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; text-decoration: none; }
.btn { justify-content: center; border-radius: 5px; padding: .64rem 1.15rem; border: 1px solid #43818a; }
.btn-primary { background: #75eef5; color: #03131b; }
.btn-primary:hover { background: #b3f8ff; }
.btn-secondary { background: #0b171f; color: var(--v1-cyan); }
.hero-link { gap: .7rem; } .hero-link span { color: var(--v1-cyan); }
.section-label { margin-bottom: .8rem; } .section-intro { margin: 1rem 0 1.8rem; }
#jarvis { padding-bottom: 0; }
.panel { border: 1px solid #34485e; border-radius: 12px; background: radial-gradient(ellipse at 12% 0%,#233a6a48,transparent 55%), #0a111c; padding: clamp(1.3rem, 4vw, 3rem); }
.jarvis-head { display: grid; grid-template-columns: clamp(6rem, 15vw, 11rem) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-bottom: 1.25rem; }
.jarvis-head .section-intro { margin-bottom: 0; }
.voice-orb { aspect-ratio: 1; position: relative; display: grid; place-items:center; border-radius:50%; border:1px solid #344cd6; background: radial-gradient(circle, #050810 40%,#141f49 55%,#4370fb 58%,#131c3e 62%,#132250 68%,#3c59bf 70%,#09101c 73%); box-shadow: 0 0 30px #4467ff30; }
.voice-orb i { width: 36%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle at 44% 36%,white 0%,#daeaff 13%,#8ab2ff 34%,#507dff 65%,#233c8b 97%); box-shadow:0 0 18px #477fff96; }
.card p, .note { color:var(--v1-muted); }
.note { color:var(--v1-muted); } .rows strong { color:var(--v1-text); }
.note { margin-top:1.4rem; padding-left:1rem; border-left:2px solid #49777f; font-size:.92rem; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,6vw,5rem); }
.card { padding:1.3rem 0; border-top:1px solid var(--v1-border); }
.card h3 { color:var(--v1-text); font-size:1.25rem; } .card p { margin:.38rem 0 0; }
#privacy-summary, #contact { border-top:1px solid var(--v1-border); }
#privacy-summary { background:linear-gradient(95deg,#0d1822,#090e15); }
.site-footer { padding:2.5rem 0; border-top:1px solid var(--v1-border); font-size:.9rem; color:var(--v1-muted); }
.footer-inner, .footer-links { flex-wrap:wrap; }
/* ---------- prose (privacy / support) ---------- */
.prose { max-width: 42rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul { padding-left: 1.25rem; color: var(--v1-muted); }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--v1-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose a:hover { color: var(--v1-cyan); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--v1-border); vertical-align: top; }
.prose th { color: var(--v1-text); font-weight: 650; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.prose td { color: var(--v1-muted); }
.meta { color: var(--v1-muted); font-size: 0.9375rem; border-bottom: 1px solid var(--v1-border); padding-bottom: 1.5rem; margin-bottom: 0.5rem; }
.meta strong { color: var(--v1-text); font-weight: 600; }
.callout {
  background: rgba(88,162,255,0.07); border: 1px solid var(--v1-border);
  border-radius: var(--v1-radius); padding: 1.125rem 1.25rem; margin: 1.5rem 0;
  font-size: 0.9375rem; color: var(--v1-muted);
}
.callout strong { color: var(--v1-text); }


.prose p { margin-bottom: 1rem; }
.prose h1 { font-size:clamp(2.7rem,6vw,4rem); line-height:1.08; letter-spacing:-.06em; margin:0 0 1.5rem; }
.prose h2 { font-size:clamp(1.55rem,3vw,2.15rem); margin-bottom:.8rem; }
@media(max-width: 700px) {
 .header-inner { min-height:5rem; } .brand { font-size:clamp(1.4rem,4.7vw,1.7rem); gap:.65rem; } .brand img { width:4rem; }
 .nav { gap:.85rem; } .nav a { font-size:.85rem; }
 .hero-inner { grid-template-columns:1fr; gap:1.5rem; } .hero { padding-top:2.65rem; padding-bottom:1.7rem; }
 .hero-copy { max-width:31rem; }
 .hero h1 { font-size:clamp(3.25rem,10vw,4.6rem); } .lede { margin:1rem 0 1.3rem; }
 .grid { grid-template-columns:1fr; } .jarvis-head { grid-template-columns:1fr; gap:1rem; } .voice-orb { width:4.5rem; }
}
@media(max-width: 700px) {
 .header-inner { gap:0; padding:.4rem 0 0; }
 .nav { width:100%; justify-content:space-between; } .nav a { padding:.55rem 0; min-height:44px; display:grid; align-content:center; }
 html { scroll-padding-top:7.5rem; }
}

/* The public preview uses native controls and illustrative records throughout. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.hero h1 span { color:#abd7f5; background:linear-gradient(110deg,#eef8ff,#87c8ff 64%,#8babbf); background-clip:text; -webkit-text-fill-color:transparent; }
.hero .status-pill { display:inline-flex; letter-spacing:.13em; border:1px solid #224453; border-radius:99px; background:#08171e; padding:.32rem .7rem; }
.demo { position:relative; display:grid; justify-items:center; border:0; margin:0; padding:0; min-width:0; scroll-margin-top:1rem; }
.screen-picker { display:flex; justify-content:center; gap:3px; margin-bottom:16px; padding:3px; border:1px solid #34465c; border-radius:30px; background:#09121d; box-shadow:0 6px 22px #0005; }
.screen-picker label { display:grid; place-items:center; min-height:40px; padding:0 .9rem; color:#acbfd1; font:600 .85rem var(--display); cursor:pointer; border-radius:25px; }
#view-today:checked ~ .screen-picker [for=view-today], #view-cargo:checked ~ .screen-picker [for=view-cargo], #view-jarvis:checked ~ .screen-picker [for=view-jarvis] { color:#e7fbff; background:#20384a; box-shadow:inset 0 0 0 1px #507283; }
.demo-choice:focus-visible ~ .screen-picker { outline:2px solid var(--v1-cyan); outline-offset:4px; }
.phone { width:min(100%,18.5rem); aspect-ratio:879/1790; position:relative;
  background:url(assets/preview-titanium.webp) center / 100% 100% no-repeat;
  filter:drop-shadow(2px 14px 14px #01050cc9); }
.glass { position:absolute; inset:3.5% 6.1% 2.6%; padding:0 .54rem 1.7rem; overflow:auto; scrollbar-width:thin; border-radius:9% / 4%;
  background:linear-gradient(150deg,transparent 5%,#b9ddff09 26%,transparent 43%),
    radial-gradient(ellipse at 50% 36%,#0c264f6b,transparent 51%); }
.phone-status { display:flex; justify-content:space-between; align-items:center; margin:0 .6rem; min-height:1.6rem; color:#f4f8fd; font:600 .76rem -apple-system,system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.app-bar { display:flex; align-items:center; justify-content:center; gap:.55rem; padding:1rem 0 .7rem; border-bottom:1px solid #90b6dc29; font:600 .65rem var(--display); letter-spacing:.16em; color:#d8e6f4; }
.demo-screen { display:none; }
#view-today:checked ~ .phone #sample-today,#view-cargo:checked ~ .phone #sample-cargo,#view-jarvis:checked ~ .phone #sample-jarvis { display:block; }
.demo-screen h2 { font:700 2rem/1 var(--display); letter-spacing:-.045em; }
.mini-label,.prompts legend,.preview-caption { font:600 .66rem/1.4 var(--mono); letter-spacing:.1em; }
.mini-label { text-transform:uppercase; color:#79dce5; }
.jarvis-screen { text-align:center; }
.reactor { position:relative; isolation:isolate; display:grid; place-items:center; width:min(64%,9.6rem); aspect-ratio:1; margin:1.45rem auto .95rem; border-radius:50%;
  background:radial-gradient(circle,#040b16 41%,#101f39 54%,#4e84d9 56%,#141e37 58%,#355697 62%,#0e172a 64%,#416aa4 67%,#0a1425 69%);
  box-shadow:0 0 25px #3072ea36,inset 0 1px 1px #a1d7ff9c; }
.reactor::before { content:""; position:absolute; inset:5%; border:1px solid #a6beff55; border-bottom-color:#27479c; border-radius:50%; }
.reactor i { width:35%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(ellipse at 34% 27%,#fff 1%,#d9f5ff 7%,transparent 19%),
    radial-gradient(circle at 41% 39%,#b7d4ff,#729efa 32%,#3757a7 59%,#121d42 79%,#4f79bb 99%);
  box-shadow:inset -2px -3px 7px #0e143b99,0 0 18px #759bff90,0 0 40px #4878ef50; }
.jarvis-screen h2 { font-size:1.4rem; letter-spacing:.18em; }
.jarvis-screen .mini-label { margin:.35rem 0 .8rem; font-size:.56rem; }
.mini-label i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#6cf7ed; vertical-align:middle; }
.prompts { border:0; margin:0; padding:0; text-align:left; }
.prompts legend { padding:0; margin-bottom:5px; color:#b4c8d9; letter-spacing:.06em; }
.prompts label { display:inline-flex; align-items:center; font-size:.72rem; min-height:40px; border:1px solid #334450; border-radius:15px; padding:0 8px; margin-bottom:4px; cursor:pointer; }
.prompts input:checked + label { color:var(--v1-cyan); border-color:#4b8591; background:#11212c; }
.prompts input:focus-visible + label,.travel-demo input:focus-visible + label { outline:2px solid var(--v1-cyan); outline-offset:2px; }
.sample-answer { display:none; border:1px solid #294050; border-left:2px solid #41e6e4; border-radius:6px; background:#0c1923; padding:9px 10px; margin:7px 0 0; font-size:.82rem; line-height:1.45; color:#c9dbe8; }
#q-next:checked ~ .next-answer,#q-stock:checked ~ .stock-answer { display:block; }
.preview-caption { background:#07101ce6; padding:.25rem .65rem; border-radius:12px; margin-top:13px; font-weight:400; letter-spacing:.06em; color:#acbdcb; }
.home-bar { position:absolute; width:30%; height:3px; background:#bdcad8; border-radius:8px; left:50%; bottom:5px; transform:translateX(-50%); }
.today-screen,.cargo-screen { padding:20px 1px 0; }
.today-screen h2,.cargo-screen h2 { margin:6px 0 18px; }
.timeline details,.cold-store { border-top:1px solid #2b3a49; }
.timeline summary,.cold-store summary,.service-details summary { cursor:pointer; }
.timeline summary { display:grid; grid-template-columns:42px 1fr; gap:3px 8px; padding:10px 0; }
.timeline summary time { font:600 .82rem var(--mono); color:#90b4dc; }
.timeline summary b { font:600 .94rem var(--display); } .timeline summary small { grid-column:2; color:#82d8ce; }
.timeline details p { color:#afc2d5; font-size:.82rem; padding:0 0 12px 50px; }
.cold-store summary { padding:10px 0; font-size:.86rem; } .cold-store summary b { color:var(--v1-cyan); float:right; }
.shelf { height:165px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:19px; gap:16px; background:linear-gradient(#0d274e33,#15334344),url(assets/cold-storage.webp) center / cover; border:1px solid #55788b; border-radius:8px; }
.shelf img { height:90px; width:auto; filter:drop-shadow(3px 5px 5px #0008); }
.service-details { padding:1rem 0; border-top:1px solid var(--v1-border); }
.service-details summary { font:600 clamp(1rem,2vw,1.2rem) var(--display); color:#d6e8f5; }
.service-details p { max-width:65ch; margin:.8rem 0 0; color:var(--v1-muted); }
.travel-feature { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-areas:"intro poster" "route poster"; gap:1.25rem clamp(1.5rem,4vw,3.5rem); align-items:center; }
.travel-intro { grid-area:intro; } .travel-intro .section-intro { margin-bottom:0; }
.travel-poster { grid-area:poster; margin:0; overflow:hidden; border-radius:12px; outline:1px solid #65819777; outline-offset:-1px; box-shadow:0 20px 42px #0005; }
.travel-poster img { display:block; width:100%; height:auto; }
.travel-demo { grid-area:route; min-width:0; margin:0; padding:clamp(.9rem,2vw,1.4rem); border:1px solid #426070; border-radius:12px; background:linear-gradient(135deg,#162a38,#091621 66%); }
.travel-demo legend { padding:0 .5rem; font:600 1rem var(--display); }
.travel-demo > p { color:var(--v1-muted); margin-bottom:.8rem; }
.travel-demo label { display:inline-flex; align-items:center; min-height:44px; border:1px solid #34475c; margin-right:.3rem; border-radius:5px; padding:0 .9rem; cursor:pointer; }
.travel-demo input:checked + label { border-color:#65bac6; color:var(--v1-cyan); background:#15343e; }
.route-map { display:block; width:100%; height:auto; margin:1rem 0; border:1px solid #345261; border-radius:6px; }
.route-clocks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.route-stop { padding-inline:.75rem; border-left:1px solid #345160; }
.route-stop:first-child { padding-left:0; border:0; }
.route-stop h3 { color:#accddd; font:600 clamp(.7rem,1vw,.85rem) var(--display); }
.route-stop b { display:block; color:var(--v1-text); font:600 clamp(1.1rem,2.2vw,1.85rem) var(--display); letter-spacing:-.05em; white-space:nowrap; }
.route-stop small { font:600 .58rem var(--mono); letter-spacing:0; }
.route-stop time span { color:var(--v1-muted); font-size:.75rem; }
.route-stop .local-arrival,#local-mode:checked ~ .route-clocks .home-arrival { display:none; }
#local-mode:checked ~ .route-clocks .local-arrival { display:block; }
@media(max-width:820px){
 .travel-feature { grid-template-columns:1fr; grid-template-areas:"intro" "poster" "route"; }
 .travel-poster { width:min(100%,36rem); justify-self:center; }
}
@media(max-width:510px){
 .nav { gap:.25rem; flex-wrap:wrap; }
 .route-stop { padding-inline:.38rem; }
}
.features-heading { margin-bottom:1.2rem; font:600 1.35rem var(--display); }
@media (max-width:700px) {
 .hero-inner { gap:1.65rem; }
 .hero-art { inset:auto 0 0; height:64%; mask-image:linear-gradient(180deg,transparent,#000 21%); }
 .hero-art img { object-position:center; }
 .hero::before { background:linear-gradient(180deg,#09131f 15%,#09131ff2 35%,#09131f52 52%,transparent 68%,#060b1459 100%); }
 .demo { scroll-margin-top:1.5rem; }
 .hero .cta-row { gap:.25rem 1.25rem; }
 .hero .btn { font-size:.94rem; }
}
@media(prefers-reduced-motion:no-preference) {
 .reactor i { animation:awaken 1.7s ease-out 1; }
 @keyframes awaken { from { transform:scale(.85); opacity:.65; } to { transform:scale(1); opacity:1; } }
}

.protocol-story { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:2rem clamp(2rem,5vw,5rem); align-items:center; }
.protocol-story .section-intro { margin-bottom:1rem; }
.storage-copy,.protocol-help p { color:var(--v1-muted); }
.protocol-story strong { color:var(--v1-text); }
.record-example { margin:0; padding:clamp(1.25rem,3vw,2.1rem); border:1px solid #34515e; border-radius:12px; background:radial-gradient(ellipse at 100% 0%,#173547,transparent 70%),#0a141f; }
.record-example figcaption strong { display:block; margin:.35rem 0 1.3rem; font:600 1.55rem var(--display); }
.record-example dl,.record-example dd { margin:0; }
.record-example dl > div { padding:.8rem 0; border-top:1px solid var(--v1-border); }
.record-example dt { font:500 .8rem/1.5 var(--mono); color:var(--v1-muted); }
.record-example dd { font-weight:600; color:var(--v1-text); }
.record-example dd span { display:block; font-size:.9rem; font-weight:400; color:var(--v1-muted); }
.record-example dl > div:last-child dd { color:var(--v1-cyan); }
.protocol-help { grid-column:1/-1; }
#travel { scroll-margin-top:6rem; }
@media(max-width:700px){ .protocol-story { grid-template-columns:1fr; gap:1.5rem; } }

/* Sample calendar and inventory illustrations on the protocol walkthrough. */
.tracking-gallery { grid-column:1/-1; }
.tracking-gallery figure { margin:0; border:1px solid #324659; border-radius:14px; background:#0b141e; }
.tracking-gallery h3 { font:600 clamp(1.25rem,2.5vw,1.75rem)/1.1 var(--display); letter-spacing:-.035em; }
.tracking-gallery p { color:var(--v1-muted); }
.map-view > span,.shelf-label { font:600 .7rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.09em; color:#afc5d6; }
.tracking-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); }
.tracking-gallery figure { overflow:hidden; }
.tracking-gallery figcaption { padding:clamp(1rem,2vw,1.55rem); }
.tracking-gallery p { margin:.55rem 0 0; line-height:1.55; }
.stock-scene,.map-scene { height:clamp(220px,23vw,280px); position:relative; border-bottom:1px solid #34475b; }
.stock-scene { background:linear-gradient(100deg,#07162850,#0e35411a 65%,#09132765),url(assets/cold-storage.webp) center / 100% 100%; }
.stock-vials { position:absolute; display:flex; align-items:end; justify-content:center; gap:clamp(1rem,3vw,2rem); inset:19% 0 12%; }
.stock-vials img { height:100%; width:auto; filter:drop-shadow(5px 5px 4px #0209169c); }
.stock-vials img+img { height:91%; }
.shelf-label { position:absolute; top:.85rem; left:1rem; display:inline-flex; align-items:center; gap:.85rem; color:#d9f2fc; background:#081726ec; border:1px solid #587887; border-radius:4px; padding:.35rem .65rem; }
.shelf-label b { color:#69ece9; }
.map-scene { display:flex; gap:clamp(2rem,5vw,4rem); justify-content:center; align-items:center; background:linear-gradient(#81d9f008 1px,transparent 1px),linear-gradient(90deg,#81d9f008 1px,transparent 1px),radial-gradient(ellipse at center,#12314a,#07131e 75%); background-size:24px 24px,24px 24px,auto; }
.map-view { display:grid; justify-items:center; gap:5px; }
.map-art { position:relative; height:clamp(170px,17vw,210px); aspect-ratio:512/1476; }
.map-art img { width:100%; height:100%; }
.site-dot { position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; width:22px; height:22px; background:#06202c; border:1px solid #6affed; color:white; font:600 .67rem var(--mono); box-shadow:0 0 8px #19dcca70; }
.site-five { left:85.16%; top:30.35%; } .site-eleven { left:38.09%; top:45.53%; }
@media(max-width:700px){ .tracking-gallery { grid-template-columns:1fr; } }
.stock-scene::before { content:""; position:absolute; left:6%; right:6%; bottom:6%; height:9%; background:url(assets/cargo-shelf.webp) center / 100% 100% no-repeat; }

/* A fixed sample month, with the selected day's log next to its schedule. */
.calendar-preview { grid-column:1/-1; min-width:0; margin:0; padding:0; border:1px solid transparent; border-radius:16px; overflow:hidden;
  background:linear-gradient(145deg,#132535,#0b151f 55%,#0b1c29) padding-box,
    linear-gradient(125deg,#acc7d6,#406373 22%,#2a3b50 55%,#79a5b4 85%,#34485c) border-box;
  box-shadow:0 14px 32px #0004,0 0 16px #6cd9ff09; }
.cal-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem clamp(1rem,3vw,2rem); border-bottom:1px solid #557484;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#a9d6ec05 2px 3px),
    linear-gradient(105deg,#132e3d,#2c4658 35%,#203545 48%,#122534 78%);
  box-shadow:inset 0 1px #d1f1ff3d; }
.cal-top strong { display:flex; align-items:center; gap:.65rem; font:600 1rem var(--display); }
.cal-top strong::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:#97ffed; box-shadow:0 0 9px #5de6d999; }
.cal-top span,.weekday,.cal-agenda time { font:600 .7rem/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:#b5c9d9; }
.cal-layout { display:grid; grid-template-columns:1.6fr 1fr; }
.cal-month,.cal-agenda { padding:clamp(1.15rem,3vw,2rem); }
.cal-month h3 { font:600 clamp(1.8rem,3vw,2.7rem)/1.1 var(--display); letter-spacing:-.055em; }
.cal-month h3 span { font-weight:400; color:#8aa6ba; }
#calendar-hint,.cal-key { color:var(--v1-muted); font-size:.87rem; }
#calendar-hint { margin:.4rem 0 1.2rem; }
.month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; align-items:stretch; gap:2px; }
.weekday { padding:0 0 .55rem; }
.month-start { grid-column:span 6; }
.quiet-day { padding:.32rem 0; font:500 1rem/1.3 var(--display); color:#8397a9; }
.cal-cell { display:grid; align-content:center; justify-items:center; gap:3px; min-height:46px; background:linear-gradient(#193442,#10232e); box-shadow:inset 0 1px #a0edff16; border:1px solid transparent; border-radius:5px; cursor:pointer; font:600 1.05rem var(--display); }
.cal-cell i { font:600 .73rem/1 var(--mono); }
.cal-cell:hover { border-color:#518898; }
.recorded i,.cal-key .recorded,.cal-entry.recorded .cal-state { color:#70e4ce; }
.due i,.cal-key .due,.cal-entry.due .cal-state { color:#ffd08c; }
.upcoming i,.cal-key .upcoming,.cal-entry.upcoming .cal-state { color:#a5bded; }
.cal-key { display:flex; flex-wrap:wrap; gap:.3rem 1rem; border-top:1px solid var(--v1-border); margin-top:1rem; padding-top:.75rem; }
.cal-agenda { display:grid; align-content:center; border-left:1px solid #2e4558; background:radial-gradient(ellipse at 98% 0%,#29667b55,transparent 67%),
    linear-gradient(130deg,#0d202d,#0b1723 80%); }
.cal-entry { display:none; }
.cal-entry h4 { margin:.7rem 0; font:600 clamp(1.5rem,3vw,2.15rem)/1.15 var(--display); letter-spacing:-.04em; }
.cal-state { display:inline-block; border:1px solid currentColor; border-radius:30px; padding:.15rem .65rem; font-size:.8rem; }
.cal-entry dl { margin:1.4rem 0 0; }
.cal-entry.recorded dl > div:last-child dd { color:#a1f6e9; }
.cal-entry dl > div { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; padding:.65rem 0; border-top:1px solid var(--v1-border); }
.cal-entry dt,.cal-entry dd { font-size:.93rem; } .cal-entry dt { color:var(--v1-muted); } .cal-entry dd { margin:0; font-variant-numeric:tabular-nums; font-weight:600; }
#cal-2:checked ~ .cal-layout label[for="cal-2"],
#cal-3:checked ~ .cal-layout label[for="cal-3"],
#cal-4:checked ~ .cal-layout label[for="cal-4"],
#cal-5:checked ~ .cal-layout label[for="cal-5"],
#cal-6:checked ~ .cal-layout label[for="cal-6"],
#cal-7:checked ~ .cal-layout label[for="cal-7"],
#cal-8:checked ~ .cal-layout label[for="cal-8"] { background:linear-gradient(145deg,#3e7582,#245463 55%,#193d50); border-color:#97eee7; color:white;
  box-shadow:inset 0 1px #d6fffd75,0 0 10px #50dad52b; }
#cal-2:focus-visible ~ .cal-layout label[for="cal-2"],
#cal-3:focus-visible ~ .cal-layout label[for="cal-3"],
#cal-4:focus-visible ~ .cal-layout label[for="cal-4"],
#cal-5:focus-visible ~ .cal-layout label[for="cal-5"],
#cal-6:focus-visible ~ .cal-layout label[for="cal-6"],
#cal-7:focus-visible ~ .cal-layout label[for="cal-7"],
#cal-8:focus-visible ~ .cal-layout label[for="cal-8"] { outline:2px solid white; outline-offset:1px; }
#cal-2:checked ~ .cal-layout #entry-2,
#cal-3:checked ~ .cal-layout #entry-3,
#cal-4:checked ~ .cal-layout #entry-4,
#cal-5:checked ~ .cal-layout #entry-5,
#cal-6:checked ~ .cal-layout #entry-6,
#cal-7:checked ~ .cal-layout #entry-7,
#cal-8:checked ~ .cal-layout #entry-8 { display:block; }

@media(max-width:700px){
 .cal-layout { grid-template-columns:1fr; } .cal-agenda { border-left:0; border-top:1px solid #2e4558; }
 .cal-entry dl { margin-top:.85rem; } .cal-month,.cal-agenda { padding:1rem; } .weekday { letter-spacing:0; font-size:.65rem; }
}
.tool-section { border-block:1px solid var(--v1-border); background:#0a121d; }
.tool-pair { display:grid; grid-template-columns:1.15fr 1fr; gap:2rem clamp(2rem,5vw,4rem); align-items:center; }
.concentration-preview,.unit-preview { margin:0; min-width:0; padding:clamp(1.1rem,3vw,2rem); border:1px solid #3a5367; border-radius:14px; background:linear-gradient(125deg,#132633,#0b1722); }
.concentration-preview legend,.unit-preview h3 { font:600 1.3rem var(--display); }
.concentration-preview p,.unit-preview p { color:var(--v1-muted); }
.concentration-preview label { display:inline-grid; place-items:center; min-height:44px; margin:.8rem .2rem .5rem 0; padding:0 .9rem; border:1px solid #466072; border-radius:6px; cursor:pointer; }
.concentration-preview input:checked + label { border-color:var(--v1-cyan); color:var(--v1-cyan); background:#183943; }
.concentration-preview input:focus-visible + label { outline:2px solid white; outline-offset:2px; }
.concentration-reading { border-top:1px solid var(--v1-border); padding-top:.75rem; }
.concentration-reading p { display:none; }
#one-ml:checked ~ .concentration-reading .one-reading,#two-ml:checked ~ .concentration-reading .two-reading { display:block; }
.concentration-reading strong { display:block; font:600 2rem var(--display); color:var(--v1-text); }
.concentration-preview small { color:var(--v1-muted); display:block; margin-top:.7rem; }
.unit-preview { grid-column:1/-1; }
.conversion-controls:not([hidden]) { display:flex; gap:1rem; flex-wrap:wrap; align-items:end; }
.conversion-controls { margin:.8rem 0; }
.conversion-controls label,.library-filter label { display:grid; gap:.3rem; font-size:.9rem; }
.conversion-controls input,.conversion-controls select,.library-filter input { max-width:100%; padding:.6rem .8rem; border-radius:6px; border:1px solid #527486; font:inherit; color:var(--v1-text); background:#08131d; min-height:44px; }
.conversion-controls input { width:10rem; }
.unit-preview output { color:var(--v1-cyan); font:600 clamp(1.05rem,3vw,1.55rem)/1.5 var(--display); overflow-wrap:anywhere; }
.library-feature {
  display:grid; justify-items:center; gap:1.5rem; text-align:center;
  margin-inline:auto; padding:clamp(2.1rem,4.8vw,4.1rem) clamp(1.1rem,4vw,3rem);
  border:1px solid transparent; border-radius:16px;
  background:
    radial-gradient(ellipse at 5% 100%,#0b636d75,transparent 55%) padding-box,
    radial-gradient(ellipse at 95% 0%,#4f38766b,transparent 55%) padding-box,
    linear-gradient(125deg,#101f2b,#101927 60%,#141c30) padding-box,
    linear-gradient(105deg,#589197,#344d62 48%,#7773a4) border-box;
}
.library-feature .section-label { color:#8cf8f2; }
.library-feature .section-intro { margin:1rem auto 0; max-width:55ch; color:#c5d6e4; }
.library-feature .btn { gap:.65rem; max-width:100%; border-color:#a4f7fb; background:linear-gradient(105deg,#73f2e6,#97dfff); box-shadow:0 0 20px #57e3e51c; }
.library-feature .btn:hover { background:#bcf9ff; }
.reference-page { padding-block:clamp(2.5rem,6vw,5rem); max-width:55rem; }
.reference-page h1 { font-size:clamp(2.5rem,6vw,4.5rem); line-height:1.1; letter-spacing:-.05em; }
.library-filter input { width:100%; margin:.4rem 0; } .library-filter p { color:var(--v1-muted); margin-bottom:1rem; }
.library-entry { border-top:1px solid #304455; }
.library-entry summary { padding:.9rem .3rem; cursor:pointer; }
.library-entry summary strong { font:600 1.1rem var(--display); }
.library-entry summary span { color:var(--v1-muted); font-size:.82rem; padding-left:.8rem; }
.library-entry > div { padding:0 1rem 1rem; } .library-entry p { color:var(--v1-muted); }
.library-entry a { color:var(--v1-cyan); } #more-records { margin-top:1rem; }
[hidden] { display:none !important; }
@media(max-width:700px){ .tool-pair { grid-template-columns:1fr; } }
.concentration-reading { display:grid; grid-template-columns:minmax(0,1fr) 3rem; align-items:center; gap:1rem; }
.concentration-reading::after { content:""; grid-column:2; grid-row:1; height:6rem; background:url(assets/vial.webp) center / contain no-repeat; }
.concentration-reading p { grid-column:1; grid-row:1; }

/* Light travels along the dial grooves; the instrument itself stays still. */
.hero-art picture,.dial-light { position:absolute; inset:0; width:100%; height:100%; }
.dial-light { fill:none; stroke-linecap:round; }
.phone-light,.resume-copy { display:none; }
.dial-sweep { stroke:#66efff; stroke-width:3.5; stroke-dasharray:4 2 .5 43.5;
  filter:drop-shadow(0 0 3px #19dfff); }
.dial-sweep.inner { stroke:#58baff; stroke-width:2.5; stroke-dasharray:6 1 .65 42.35; }
.motion-control { position:absolute; right:clamp(.7rem,2vw,2rem); bottom:.35rem; z-index:2; display:grid; align-content:center;
  min-height:44px; cursor:pointer; color:#d8ecfa; font:500 .77rem var(--display); }
.motion-control span { padding:.35rem .7rem; border-radius:20px; border:1px solid #627d9280; background:#08121cef; }
#pause-rings:focus-visible + .motion-control span { outline:2px solid var(--v1-cyan); outline-offset:2px; }
#pause-rings:checked + .motion-control .pause-copy { display:none; }
#pause-rings:checked + .motion-control .resume-copy { display:inline; }
#pause-rings:checked ~ .hero-art,#pause-rings:checked ~ .hero-inner { --ring-play:paused; }
@media (prefers-reduced-motion:no-preference){
  .dial-sweep { animation:dial-orbit 14s linear -3s infinite; animation-play-state:var(--ring-play,running); }
  .dial-sweep.inner { animation-duration:19s; animation-direction:reverse; animation-delay:-9s; }
  .reactor::after { content:""; position:absolute; inset:4%; border-radius:50%; pointer-events:none;
    background:conic-gradient(transparent 48%,#4383ff22 58%,#99eaff 68%,transparent 69%,transparent 100%);
    mask-image:radial-gradient(circle,transparent 67%,#000 68%,#000 70%,transparent 71%);
    animation:orb-orbit 9s linear infinite; animation-play-state:var(--ring-play,running); }
  .reactor i { animation-play-state:var(--ring-play,running); }
  @keyframes dial-orbit { to { stroke-dashoffset:-100; } }
  @keyframes orb-orbit { to { transform:rotate(1turn); } }
}
@media(max-width:700px){
  .wide-light { display:none; } .phone-light { display:block; }
  .hero { padding-bottom:3rem; }
}
@media(prefers-reduced-motion:reduce){
  .dial-light,#pause-rings,.motion-control { display:none; }
}
.library-entry { padding-left:.8rem; border-left:3px solid var(--entry-color); }
.library-entry summary::marker { color:var(--entry-color); }
.library-entry summary span { color:color-mix(in srgb,var(--entry-color) 78%,white); }
.library-entry summary .library-group { display:inline-block; margin:.2rem 0 .2rem .7rem; padding:.12rem .55rem;
  border:1px solid color-mix(in srgb,var(--entry-color) 55%,transparent); border-radius:20px;
  background:color-mix(in srgb,var(--entry-color) 10%,transparent); font-size:.75rem; }

.calendar-travel-link { margin-top:.8rem; font-size:.9rem; color:var(--v1-muted); }
.calendar-travel-link a { color:var(--v1-cyan); }