:root{
  --bg: #05060A;
  --bg-panel: #0D0F16;
  --bg-panel-alt: #12141D;
  --bg-inset: #0A0B11;
  --border: #262B3C;
  --border-soft: #1B1F2B;
  --text: #FFFFFF;
  --text-dim: #C9CEDC;
  --text-faint: #8890A3;
  --accent: #0AA8FF;
  --accent-ink: #6FD0FF;
  --accent-soft: rgba(10,168,255,0.16);
  --danger: #FF3B30;
  --danger-ink: #FF6B60;
  --danger-soft: rgba(255,59,48,0.14);
  --copper: #FF2D95;
  --bpc: #5B8DEF;
  --tb: #B26BFF;
  --ghk: #FFD400;
  --kpv: #FF6FA8;
  --custom-accent: #39FF6A;
  --custom-accent2: #B6FF00;
  --glow-needle: #0AA8FF;
  --h1-glow: 0 0 14px rgba(61,165,245,0.55), 2px 2px 0 #9B30FF, 4px 4px 18px rgba(255,45,149,0.55);
  --panel-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 16px 32px -18px rgba(0,0,0,0.7);
  --font-display: 'Audiowide', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
@media (prefers-reduced-motion: no-preference){
  .brand-mark-img{ animation: logo-pulse 3.4s ease-in-out infinite; }
}
@keyframes logo-pulse{
  0%,100%{
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent), 0 0 6px 0px var(--custom-accent2);
  }
  50%{
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--custom-accent), 0 0 9px 1px var(--custom-accent);
  }
}
html{ overflow-x: hidden; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  background-image: radial-gradient(1100px 480px at 12% -18%, var(--accent-soft), transparent 62%);
}

.mascot-fab{ position:fixed; z-index:70; touch-action:none; user-select:none; -webkit-user-select:none; }
.mascot-fab-btn{
  width:64px; height:64px; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center;
  background: var(--bg-panel-alt); border:2px solid #FF3EC8; cursor:grab; overflow:hidden;
  box-shadow: 0 0 0 3px var(--bg), 0 6px 18px -6px rgba(0,0,0,0.65), 0 0 16px -4px #22D3EE, 0 0 20px -6px #FF3EC8;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.mascot-fab-btn img{ width:100%; height:100%; object-fit:cover; border-radius:50%; pointer-events:none; -webkit-user-drag:none; }
.mascot-fab-btn:hover{ transform:scale(1.06); box-shadow: 0 0 0 3px var(--bg), 0 8px 22px -6px rgba(0,0,0,0.7), 0 0 22px -3px #22D3EE, 0 0 26px -5px #FF3EC8; }
.mascot-fab-btn:focus-visible{ outline:2px solid #FF3EC8; outline-offset:3px; }
.mascot-fab.dragging .mascot-fab-btn{ cursor:grabbing; transform:scale(1.1); transition:none; }
@media (prefers-reduced-motion: no-preference){
  .mascot-fab-btn{ animation: mascot-pulse 3.6s ease-in-out infinite; }
  .mascot-fab.dragging .mascot-fab-btn{ animation:none; }
}
@keyframes mascot-pulse{
  0%,100%{ box-shadow: 0 0 0 3px var(--bg), 0 6px 18px -6px rgba(0,0,0,0.65), 0 0 13px -4px #22D3EE, 0 0 16px -6px #FF3EC8; }
  50%{ box-shadow: 0 0 0 3px var(--bg), 0 6px 18px -6px rgba(0,0,0,0.65), 0 0 20px -3px #22D3EE, 0 0 24px -5px #FF3EC8; }
}
.mascot-menu{
  position:absolute; width:230px; max-width:calc(100vw - 24px);
  background: var(--bg-panel-alt); border:1px solid #FF3EC8; border-radius:12px;
  padding:8px; box-shadow: 0 16px 34px -14px rgba(0,0,0,0.7), 0 0 18px -6px #FF3EC8;
  display:flex; flex-direction:column; gap:2px;
}
.mascot-menu[hidden]{ display:none; }
.mascot-menu-head{
  font-family: var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--text-faint); padding:5px 9px 7px;
}
.mascot-menu-item{
  text-align:left; background:none; border:none; color: var(--text-dim); width:100%;
  font-family: var(--font-body); font-size:14.5px; font-weight:600; padding:8px 9px; border-radius:7px;
  cursor:pointer; transition: background 0.12s ease, color 0.12s ease;
}
.mascot-menu-item:hover, .mascot-menu-item:focus-visible{ background: rgba(255,62,200,0.15); color: var(--text); outline:none; }

.petal-field{ position:fixed; inset:0; z-index:5; overflow:hidden; pointer-events:none; }
.petal{ position:absolute; top:-8vh; width:16px; height:16px; opacity:0.22; }
.petal.p1{ left:6%;  width:14px; }
.petal.p2{ left:22%; width:10px; }
.petal.p3{ left:48%; width:18px; }
.petal.p4{ left:74%; width:12px; }
.petal.p5{ left:90%; width:15px; }
@media (prefers-reduced-motion: no-preference){
  .petal.p1{ animation: petal-fall 26s linear infinite; animation-delay: -2s; }
  .petal.p2{ animation: petal-fall 34s linear infinite; animation-delay: -14s; }
  .petal.p3{ animation: petal-fall 30s linear infinite; animation-delay: -8s; }
  .petal.p4{ animation: petal-fall 38s linear infinite; animation-delay: -22s; }
  .petal.p5{ animation: petal-fall 28s linear infinite; animation-delay: -5s; }
}
@media (prefers-reduced-motion: reduce){
  .petal-field{ display:none; }
}
@keyframes petal-fall{
  0%{ transform: translateY(-8vh) translateX(0) rotate(0deg); }
  50%{ transform: translateY(54vh) translateX(24px) rotate(180deg); }
  100%{ transform: translateY(116vh) translateX(-16px) rotate(360deg); }
}
.wrap{ position:relative; z-index:1; max-width: 1040px; margin: 0 auto; padding: 36px 24px 64px; }

/* header */
header.top{
  position:relative;
  margin-bottom:28px;
  padding: 32px 34px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse 480px 260px at 8% 15%, rgba(34,211,238,0.13), transparent 60%),
    radial-gradient(ellipse 420px 260px at 60% 90%, rgba(255,62,200,0.11), transparent 60%),
    radial-gradient(ellipse 360px 220px at 95% 0%, rgba(155,48,255,0.11), transparent 60%),
    radial-gradient(ellipse 300px 180px at 78% 55%, rgba(255,143,227,0.07), transparent 65%),
    var(--bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 24px 60px -24px rgba(0,0,0,0.6),
    0 0 50px -28px var(--accent),
    0 0 70px -36px var(--custom-accent);
  overflow: hidden;
}
header.top > *{ position:relative; z-index:1; }
.hero-eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size:13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 14px;
}
.hero-eyebrow::before{ content: ""; width: 16px; height: 2px; background: var(--accent); border-radius: 1px; }
.hero-petal-deco{ position:absolute; pointer-events:none; z-index:0; }
.hero-petal-deco.hd1{ top:8%;  right:14%; width:34px; opacity:0.16; transform:rotate(-18deg); }
.hero-petal-deco.hd2{ bottom:10%; right:6%;  width:22px; opacity:0.13; transform:rotate(24deg); }
.hero-petal-deco.hd3{ top:58%; right:28%; width:16px; opacity:0.10; transform:rotate(-6deg); }
.hero-petal-deco.hd4{ top:20%; right:40%; width:12px; opacity:0.09; transform:rotate(40deg); }
@media (max-width: 700px){ .hero-petal-deco{ display:none; } }
@media (max-width: 560px){ header.top{ padding: 22px 20px; } }

.hero-body{
  display: flex; flex-direction: column; gap: 24px;
}
.hero-left{
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
@media (min-width: 900px){
  .hero-body{ flex-direction: row; align-items: stretch; gap: 36px; }
  .hero-left{ flex: 0 0 auto; width: 400px; justify-content: center; }
  .hero-info-grid{ flex: 1; grid-template-columns: 1fr; align-content: center; }
}
.hero-info-grid{
  width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.hero-info{
  position: relative;
  margin-top: 11px;
  background: linear-gradient(155deg, rgba(178,26,26,0.22), rgba(5,5,7,0.65) 55%);
  border: 1px solid rgba(255,80,70,0.28);
  border-radius: 3px 10px 10px 10px;
  padding: 16px 16px 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 6px -2px #22D3EE, 0 0 8px -2px #C86BFF, 0 0 9px -3px #FF3EC8;
  transition: box-shadow 0.2s ease;
}
.hero-info::before{
  content: "";
  position: absolute; top: -11px; left: 0;
  width: 78px; height: 12px;
  background: linear-gradient(155deg, #FF6B60, var(--danger));
  border-radius: 5px 8px 0 0;
  box-shadow: 0 -1px 3px rgba(255,59,48,0.3);
}
.hero-info[open]{ box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 9px -1px #22D3EE, 0 0 12px -1px #C86BFF, 0 0 13px -2px #FF3EC8; }
.hero-info summary{
  cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size:14.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--danger-ink);
  list-style: none;
}
.hero-info summary::-webkit-details-marker{ display:none; }
.hero-info summary::before{
  content: "\25B8"; display:inline-block; margin-right:7px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); color: var(--danger-ink);
}
.hero-info[open] summary::before{ transform: rotate(90deg); }
.hero-info summary:focus-visible{ outline: 2px solid var(--danger); }
.hero-info p{ color: var(--text-dim); font-size:14.5px; line-height: 1.6; margin: 10px 0 0; }
.hero-info ul{ margin: 8px 0 0; padding-left: 18px; }
.hero-info li{ color: var(--text-dim); font-size:14.5px; line-height: 1.6; margin-bottom: 4px; }
.hero-info-tagline{ color: var(--text-faint) !important; font-style: italic; font-size:14px !important; margin-top: 12px !important; }
.brand{ display:flex; align-items:center; gap:16px; }
.brand-mark-wrap{ position:relative; width:112px; height:112px; flex:0 0 auto; }
.brand-mark-img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  border: 2px solid var(--border);
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 4px var(--accent),
    0 0 6px 0px var(--custom-accent2);
}
.rose-petal{
  position:absolute; bottom:-6px; right:-9px; width:30px; height:30px;
  filter: drop-shadow(0 0 8px var(--custom-accent)) drop-shadow(0 0 3px rgba(255,255,255,0.6));
}
.brand h1{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: 0.005em;
  margin:0;
  line-height: 1.05;
  text-wrap: balance;
  background: linear-gradient(100deg, #22D3EE 0%, #C86BFF 50%, #FF3EC8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(34,211,238,0.35)) drop-shadow(0 0 20px rgba(255,62,200,0.3));
}
.brand p{ margin: 6px 0 0; color: var(--text-dim); font-size:15.5px; letter-spacing: 0.01em; }
.byline{
  margin: 6px 0 0; font-family: var(--font-body); font-size:12.5px; letter-spacing: 0.14em;
  color: var(--text-faint); text-transform: uppercase; font-weight: 600;
}
.readout-chip{
  font-family: var(--font-mono);
  font-size:14px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  border-radius: 8px;
  padding: 9px 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: var(--panel-shadow);
}
.readout-chip b{ color: var(--text); font-weight:600; }

.install-app-wrap{ position:relative; margin-top:12px; }
.install-app-btn{
  display:inline-flex; align-items:center; gap:7px;
  width:100%; justify-content:center;
}
.install-glow{
  position: relative; color: var(--text);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-inset), var(--bg-inset)) padding-box,
    linear-gradient(100deg, #22D3EE, #C86BFF, #FF3EC8) border-box;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 7px -2px #22D3EE, 0 0 9px -2px #C86BFF, 0 0 11px -3px #FF3EC8;
}
.install-glow:hover{
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 0 9px -1px #22D3EE, 0 0 12px -1px #C86BFF, 0 0 14px -2px #FF3EC8;
  transform: translateY(-1px);
}
.install-glow:focus-visible{ outline: 2px solid #C86BFF; outline-offset: 1px; }
.install-label{
  background: linear-gradient(100deg, #22D3EE 0%, #C86BFF 50%, #FF3EC8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 700;
}
@media (prefers-reduced-motion: no-preference){
  .install-glow{ animation: install-pulse 3.6s ease-in-out infinite; }
}
@keyframes install-pulse{
  0%, 100%{ box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 6px -2px #22D3EE, 0 0 8px -2px #C86BFF, 0 0 9px -3px #FF3EC8; }
  50%{ box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 0 9px -1px #22D3EE, 0 0 12px -1px #C86BFF, 0 0 13px -2px #FF3EC8; }
}
.install-tip{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  background: var(--bg-panel-alt); border:1px solid var(--custom-accent2);
  border-radius:9px; padding: 12px 30px 12px 14px;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,0.6), 0 0 14px -6px var(--custom-accent2);
}
.install-tip p{ margin:0; font-size:14.5px; line-height:1.5; color: var(--text-dim); }
.install-tip p b{ color: var(--text); }
.install-tip-close{
  position:absolute; top:6px; right:8px; background:none; border:none; cursor:pointer;
  color: var(--text-faint); font-family: var(--font-mono); font-size:15.5px; line-height:1; padding:4px;
}
.install-tip-close:hover{ color: var(--text); }

/* ═══ DRAW LINE: syringe size on top, big drag bar, −/+ buttons, drag on the syringe ═══ */
.syr-size-top{ margin:0 0 14px; }
.syr-size-top .syringe-size-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:6px; }
.syr-size-top .chip-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:58px; padding:8px 6px; border-radius:12px; font-family:var(--font-body); font-size:14.5px; color:var(--text-dim);
}
.syr-size-top .chip-btn b{ font-family:var(--font-mono); font-size:20px; color:var(--text); line-height:1.1; }
.syr-size-top .chip-btn small{ font-family:var(--font-mono); font-size:13.5px; color:var(--text-faint); }
.syr-size-top .chip-btn[data-active="true"]{ background:var(--accent-soft); border-color:var(--marker-color, var(--accent)); box-shadow:0 0 16px -4px var(--marker-color, var(--accent)); }
.syr-size-top .chip-btn[data-active="true"] b{ color:var(--accent-ink); }
#syringeDragArea{ cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.drag-hint{ margin:6px 0 0; text-align:center; font-size:14.5px; color:var(--text-faint); }
.slider-row{ gap:10px !important; }
#unitsSlider{ height:16px !important; border-radius:10px !important; min-width:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08); cursor:pointer; }
#unitsSlider::-webkit-slider-thumb{ width:36px !important; height:36px !important; border:3px solid #FFFFFF !important;
  box-shadow:0 0 0 4px rgba(0,0,0,0.35), 0 0 18px var(--marker-color, var(--accent)) !important; }
#unitsSlider::-moz-range-thumb{ width:32px !important; height:32px !important; border:3px solid #FFFFFF !important; box-shadow:0 0 18px var(--marker-color, var(--accent)) !important; }
.step-btn{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:var(--bg-inset); border:1px solid var(--marker-color, var(--accent)); color:var(--text);
  font-size:22px; font-weight:700; line-height:1; display:grid; place-items:center;
}
.step-btn:hover{ background:var(--accent-soft); }
.step-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width: 560px){
  .slider-row{ flex-wrap:wrap; }
  .slider-row #unitsSlider{ flex:1 1 0; }
  .slider-row > div:last-child{ flex:1 1 100%; display:flex; align-items:baseline; justify-content:center; gap:10px; }
  .slider-row > div:last-child .units-readout{ min-width:0; }
  .syr-size-top .chip-btn b{ font-size:18px; }
}

/* ═══ CLEAN HEADER CARD ═══ brand on the left, live reading + app buttons on the right (stacked on phones) */
header.top{
  padding:28px 32px; border-radius:18px; border:1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, rgba(200,107,255,0.11), transparent 60%),
    var(--bg-panel);
  box-shadow:0 24px 60px -36px rgba(0,0,0,0.9);
}
header.top::after{ content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,#22D3EE,#C86BFF 50%,#FF3EC8); }
header.top .hero-petal-deco{ display:none; }
header.top .hero-body{ display:block; }
header.top .hero-left{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"brand chip" "brand install" "brand big";
  column-gap:32px; row-gap:10px; align-items:center; width:auto !important;
}
header.top .hero-left > .brand{ grid-area:brand; gap:22px; }
header.top .hero-left > .readout-chip{ grid-area:chip; justify-self:end; align-self:end; }
header.top .hero-left > .install-app-wrap{ grid-area:install; justify-self:end; margin:0; }
header.top .hero-left > .gk-textsize{ grid-area:big; justify-self:end; align-self:start; }
header.top .brand-mark-wrap{ width:92px; height:92px; }
header.top .brand-mark-img{ animation:none !important; box-shadow:0 0 0 3px var(--bg), 0 0 0 4px rgba(34,211,238,0.55), 0 10px 30px -8px rgba(200,107,255,0.6); }
header.top .hero-eyebrow{ margin-bottom:8px; }
header.top .brand h1{ font-size:clamp(30px,4.4vw,50px); filter:none; letter-spacing:0.01em; }
header.top .brand p{ font-size:15px; line-height:1.55; max-width:54ch; margin-top:8px; }
header.top .byline{ margin-top:10px; }
header.top .readout-chip{ font-size:14.5px; padding:10px 14px; border-radius:10px; }
.gk-quick{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.gk-quick button{
  font-family:var(--font-display); font-size:14.5px; letter-spacing:0.04em; color:var(--text);
  padding:8px 14px; min-height:40px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,0.04); border:1px solid var(--q, var(--border));
  transition:background .15s ease, box-shadow .15s ease;
}
.gk-quick button:hover{ background:rgba(255,255,255,0.08); box-shadow:0 0 14px -4px var(--q); }
.gk-quick button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.hero-info-grid.gk-moved{ margin-top:26px; }
@media (max-width: 560px){
  /* logo sits beside the title only; description, quick buttons and byline use the full width */
  header.top .brand{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:0; align-items:center; }
  header.top .brand > div:not(.brand-mark-wrap){ display:contents; }
  header.top .brand-mark-wrap{ grid-row:1 / span 2; width:60px; height:60px; }
  header.top .hero-eyebrow{ grid-column:2; margin:0 0 2px; align-self:end; font-size:12.5px; }
  header.top .brand h1{ grid-column:2; align-self:start; font-size:clamp(26px,8vw,32px); }
  header.top .brand p, header.top .gk-quick, header.top .byline{ grid-column:1 / -1; }
  header.top .brand p{ margin-top:12px; }
  header.top .gk-quick{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  header.top .gk-quick button{ padding:8px 4px; font-size:14px; }
  header.top .hero-left > .readout-chip{ flex:1 1 100%; text-align:center; }
}
/* ═══ HEADER BUTTONS: Research Hub pill, gradient Install App, A+ Bigger text ═══ */
header.top .hub-link{
  display:inline-flex; align-items:center; gap:8px; margin-left:10px; min-height:40px; padding:0 16px;
  border-radius:999px; border:1px solid rgba(34,211,238,0.65); text-decoration:none;
  font-family:var(--font-body); font-size:14.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#FFFFFF;
  background:linear-gradient(100deg, rgba(34,211,238,0.22), rgba(200,107,255,0.22));
  box-shadow:0 0 18px -6px rgba(34,211,238,0.7);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
header.top .hub-link::before{
  content:""; width:16px; height:16px; flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
header.top .hub-link:hover{ transform:translateY(-1px); border-color:#22D3EE; box-shadow:0 0 24px -4px rgba(34,211,238,0.9); color:#FFFFFF; }
header.top .hub-link:focus-visible{ outline:2px solid #22D3EE; outline-offset:3px; }

header.top #installAppBtn.install-app-btn{
  display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:0 22px; border:0; border-radius:12px;
  background:linear-gradient(100deg, #22D3EE 0%, #C86BFF 55%, #FF3EC8 100%);
  color:#05060A; font-size:15.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  box-shadow:0 10px 28px -10px rgba(200,107,255,0.9), 0 0 0 1px rgba(255,255,255,0.15) inset;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
header.top #installAppBtn.install-app-btn[hidden]{ display:none; }
header.top #installAppBtn.install-app-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 14px 34px -10px rgba(255,62,200,0.95), 0 0 0 1px rgba(255,255,255,0.2) inset; }
header.top #installAppBtn.install-app-btn:focus-visible{ outline:2px solid #FFFFFF; outline-offset:3px; }
header.top #installAppBtn svg{ stroke:#05060A; width:18px; height:18px; }
header.top #installAppBtn .install-label{ background:none; -webkit-text-fill-color:#05060A; color:#05060A; font-weight:800; }

header.top .gk-textsize{
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 18px 0 8px; border-radius:12px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.22); color:#FFFFFF;
  font-size:15px; font-weight:700; letter-spacing:0.02em;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
header.top .gk-textsize .gk-a{
  display:inline-grid; place-items:center; min-width:32px; height:32px; padding:0 6px; border-radius:8px;
  background:#FFFFFF; color:#05060A; font-family:var(--font-display); font-size:15.5px; font-weight:400;
}
header.top .gk-textsize:hover{ border-color:#22D3EE; background:rgba(34,211,238,0.08); transform:translateY(-1px); }
header.top .gk-textsize[aria-pressed="true"]{ border-color:#22D3EE; background:rgba(34,211,238,0.12); }
header.top .gk-textsize[aria-pressed="true"] .gk-a{ background:#22D3EE; }
@media (max-width: 560px){
  header.top .hub-link{ margin-left:0; margin-top:8px; }
  header.top .byline{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
  header.top #installAppBtn.install-app-btn, header.top .gk-textsize{ flex:1 1 0; justify-content:center; }
}
@media (max-width: 760px){
  header.top{ padding:20px 18px; }
  header.top .hero-left{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; }
  header.top .hero-left > .brand{ flex:1 1 100%; gap:14px; align-items:flex-start; }
  header.top .brand-mark-wrap{ width:68px; height:68px; }
  header.top .brand p{ font-size:15.5px; }
}

/* tabs */
.tabs{ display:flex; gap:10px; margin-bottom:22px; }
.tab{
  flex:1;
  font-family: var(--font-display);
  font-weight:400;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 15px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-panel-alt);
  color: var(--text-dim);
  cursor:pointer;
  text-align:center;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.tab .sub{ display:block; font-family: var(--font-body); font-size:13px; letter-spacing: 0.02em; margin-top: 4px; font-weight: 500; text-transform: none; color: var(--text-faint); }
.tab-total{ display:inline-block; font-family: var(--font-mono); font-size:14px; font-weight:600; letter-spacing:0; color: var(--tab-color); vertical-align: middle; }
.tab[data-active="true"]{
  color: var(--text);
  background: var(--bg-panel);
  border-color: var(--tab-color);
  box-shadow: var(--panel-shadow), 0 0 0 1px var(--tab-color), 0 0 18px -4px var(--tab-color);
}
.tab[data-active="true"] .sub{ color: var(--text-dim); }
.tab.tab-custom .sub{ font-family: var(--font-mono); }
.tab.tab-custom[data-active="true"]{
  box-shadow: var(--panel-shadow), 0 0 0 1px var(--custom-accent), 0 0 20px -6px var(--custom-accent), 0 0 20px -6px var(--custom-accent2);
}

body.mode-custom .panel{
  box-shadow: var(--panel-shadow), 0 0 26px -14px var(--custom-accent);
}
body.mode-custom .panel-title .dot{
  background: var(--custom-accent);
  box-shadow: 0 0 8px var(--custom-accent);
}
body.mode-custom .syringe-panel{ order: 3; }

/* panels */
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 780px){ .grid{ grid-template-columns: 1fr; } }
@media (max-width: 560px){
  .tabs{ flex-direction: column; }
  .brand-mark-wrap{ width:78px; height:78px; }
  .rose-petal{ width:22px; height:22px; bottom:-4px; right:-6px; }
}
@media (max-width: 480px){
  .wrap{ padding: 24px 14px 48px; }
  .panel{ padding: 16px 16px 18px; }
  .hero-body{ gap:16px; }
  .brand{ gap:12px; }
}
.panel{
  min-width: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 22px 24px;
  box-shadow: var(--panel-shadow);
}
.panel-title{
  font-family: var(--font-body);
  font-weight:700;
  font-size:14px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 16px;
  display:flex; align-items:center; gap:8px;
}
.panel-title .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); flex:0 0 auto; }

/* compound rows */
.compound-row{
  display:grid;
  grid-template-columns: 14px 1fr auto;
  align-items:center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
}
.compound-row:last-of-type{ border-bottom:none; }
.swatch{ width:11px; height:11px; border-radius:50%; background: var(--sw-color); box-shadow: 0 0 6px var(--sw-color); flex:0 0 auto; }
.compound-name{ font-size:16px; font-weight:600; letter-spacing:0.01em; }
.mg-fixed{
  font-family: var(--font-mono);
  font-size:15.5px;
  color: var(--text-dim);
  text-align:right;
  font-variant-numeric: tabular-nums;
}
.unit-label{ font-size:13.5px; color: var(--text-faint); }

.compound-row-custom{ grid-template-columns: 14px 1fr auto; }
.custom-name-wrap{ position:relative; min-width:0; }
input.custom-name-input{
  width:100%; background: var(--bg-inset); border:1px solid var(--border); color: var(--text);
  font-family: var(--font-body); font-weight:600; font-size:16px; border-radius:6px;
  padding: 7px 9px; min-width: 0;
}
input.custom-name-input:focus-visible{ outline: 2px solid var(--custom-accent); outline-offset:1px; border-color: var(--custom-accent); }
.autosuggest-list{
  position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:40;
  background: var(--bg-panel-alt); border:1px solid var(--custom-accent); border-radius:8px;
  max-height: 240px; overflow-y:auto; box-shadow: 0 10px 26px -10px rgba(0,0,0,0.6), 0 0 14px -6px var(--custom-accent);
  padding: 4px;
}
.autosuggest-item{
  display:flex; flex-direction:column; gap:1px; padding:7px 9px; border-radius:5px; cursor:pointer;
}
.autosuggest-item:hover, .autosuggest-item.as-active{ background: rgba(57,255,106,0.14); }
.as-name{ font-family: var(--font-body); font-weight:600; font-size:15px; color: var(--text); }
.as-desc{ font-family: var(--font-body); font-size:13.5px; color: var(--text-faint); }
.mg-input-wrap{ display:flex; align-items:center; gap:6px; }
input.custom-mg-input{
  width: 64px; background: var(--bg-inset); border:1px solid var(--border); color: var(--text);
  font-family: var(--font-mono); font-size:15.5px; border-radius:6px; padding: 7px 8px; text-align:right;
  font-variant-numeric: tabular-nums;
}
input.custom-mg-input:focus-visible{ outline: 2px solid var(--custom-accent); outline-offset:1px; border-color: var(--custom-accent); }

.total-line{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono); font-size:14.5px; color: var(--text-dim);
}
.total-line b{ color: var(--text); font-size: 16px; font-family: var(--font-body); font-weight:700; letter-spacing:0; }

/* water + presets */
.field-row{ margin-top: 18px; }
.field-row label{ display:block; font-size:13.5px; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 8px; font-weight:600; }
.water-input-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
input.water-input{
  width: 90px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  border-radius: 7px;
  padding: 8px 9px;
  font-variant-numeric: tabular-nums;
}
input.water-input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; border-color:var(--accent); }
.preset-btns{ display:flex; gap:6px; }
.preset-btn{
  font-family: var(--font-mono);
  font-size:14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 7px 10px;
  cursor:pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.preset-btn:hover{ color: var(--text); border-color: var(--accent); }
.preset-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }
.preset-btn[data-active="true"]{ color: #FFFFFF; background: var(--accent); border-color: var(--accent); }

.syringe-select-row{ display:flex; gap:6px; margin-top:8px; }

/* syringe */
.syringe-panel{ grid-column: 1 / -1; }
.syringe-svg-wrap{ position:relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
svg#syringe{ width:100%; min-width: 560px; height:auto; display:block; }
.scroll-hint{ display:none; }
@media (max-width: 620px){
  svg#syringe{ min-width: 0; }
}

.you-get-strip{
  display:flex; flex-wrap:wrap; gap: 8px;
  margin-top: 16px;
}
.you-get-chip{
  display:flex; align-items:baseline; gap:7px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px 7px 10px;
}
.you-get-chip .swatch{ width:9px; height:9px; }
.you-get-chip .yg-name{ font-size:14.5px; color: var(--text-dim); font-weight:600; }
.you-get-chip .yg-dose{ font-family: var(--font-mono); font-size:16px; color: var(--text); font-weight:700; font-variant-numeric: tabular-nums; }
.dose-mg{ color: var(--text-faint); font-weight:500; font-size: 0.82em; }

.slider-row{ display:flex; align-items:center; gap:14px; margin-top: 18px; }
input[type="range"]{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--marker-color, var(--accent)) 0%, var(--marker-color, var(--accent)) var(--fill-pct,50%), var(--bg-inset) var(--fill-pct,50%), var(--bg-inset) 100%);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px; height:16px; border-radius:50%;
  background: var(--marker-color, var(--accent));
  border: 2px solid var(--bg-panel);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 10px -2px var(--marker-color, var(--accent));
  cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background: var(--marker-color, var(--accent)); border: 2px solid var(--bg-panel); box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor:pointer;
}
input[type="range"]:focus-visible{ outline: 2px solid var(--marker-color, var(--accent)); outline-offset: 4px; }
.units-readout{
  font-family: var(--font-mono);
  display:flex; align-items:baseline; gap:5px;
  min-width: 128px;
  justify-content:flex-end;
}
.units-readout input{
  width: 58px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight:700;
  border-radius: 6px;
  padding: 4px 6px;
  text-align:right;
  font-variant-numeric: tabular-nums;
}
.units-readout input:focus-visible{ outline: 2px solid var(--accent); outline-offset:1px; }
.units-readout .u-label{ font-size:14px; color: var(--text-dim); }
.ml-sub{ text-align:right; font-family: var(--font-mono); font-size:13.5px; color: var(--text-faint); margin-top:2px; }

.syringe-size-row{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.syringe-size-row span.lbl{ font-size:13.5px; letter-spacing:0.06em; color: var(--text-dim); text-transform:uppercase; margin-right:4px; }
.chip-btn{
  font-family: var(--font-mono); font-size:14px;
  background: var(--bg-inset); border:1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 6px 12px; cursor:pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.chip-btn[data-active="true"]{ background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.chip-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }

/* dose table */
.table-scroll{ overflow-x: auto; }
table.dose-table{ width:100%; min-width: 480px; border-collapse: collapse; margin-top: 16px; }
table.dose-table th{
  text-align:right; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--text-faint); font-weight:600; padding: 0 0 8px; border-bottom: 1px solid var(--border);
}
table.dose-table th:first-child{ text-align:left; }
table.dose-table td{
  font-family: var(--font-mono); font-size:15px; text-align:right; padding: 10px 0;
  border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums;
}
table.dose-table td:first-child{ text-align:left; font-family: var(--font-body); font-weight:600; font-size:15.5px; display:flex; align-items:center; gap:8px; }
table.dose-table td.dose-cell{ color: var(--accent-ink); font-weight:700; }
table.dose-table tr:last-child td{ border-bottom:none; }

.unit-toggle{ display:flex; gap:4px; }
.unit-explainer{ margin: 10px 0 0; font-size:14px; color: var(--text-faint); line-height:1.5; max-width: 40ch; }
.unit-explainer b{ color: var(--text-dim); }
.unit-toggle-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft); }
.unit-toggle-label{ font-size:13.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.unit-explainer-inline{ font-size:13.5px; color:var(--text-faint); }

/* target dose panel */
.target-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top: 4px; }
select.compound-select{
  background: var(--bg-inset); border:1px solid var(--border); color: var(--text);
  font-family: var(--font-body); font-size:15.5px; border-radius:7px; padding: 9px 10px;
}
select.compound-select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
input.target-input{
  width: 110px; background: var(--bg-inset); border:1px solid var(--border); color: var(--text);
  font-family: var(--font-mono); font-size:15.5px; border-radius:7px; padding: 9px 10px; font-variant-numeric: tabular-nums;
}
input.target-input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.go-btn{
  font-family: var(--font-body); font-weight:700; letter-spacing:0.03em; font-size:14.5px; text-transform:uppercase;
  background: var(--accent); color: #FFFFFF; border:none; border-radius:7px; padding: 10px 18px; cursor:pointer;
  box-shadow: var(--panel-shadow);
}
.go-btn:hover{ filter: brightness(1.08); }
.go-btn:focus-visible{ outline: 2px solid var(--text); outline-offset:2px; }
.status-line{ margin-top: 12px; font-family: var(--font-mono); font-size:14.5px; padding: 10px 12px; border-radius: 8px; display:none; line-height:1.5; }
.status-line.show{ display:block; }
.status-line.ok{ background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent); }
.status-line.warn{ background: var(--danger-soft); color: var(--danger-ink); border: 1px solid var(--danger); }

/* vial gauge */
.vial-gauge-row{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.vial-gauge-track{ flex:1; height:8px; border-radius:6px; background: var(--bg-inset); border:1px solid var(--border); overflow:hidden; }
.vial-gauge-fill{ height:100%; background: linear-gradient(90deg, var(--accent), var(--copper)); border-radius:6px 0 0 6px; transition: width .2s ease; }
.vial-gauge-label{ font-family: var(--font-mono); font-size:14.5px; color: var(--text-dim); white-space:nowrap; }

.ghost-btn{
  font-family: var(--font-body); font-weight:600; font-size:14.5px;
  background: var(--bg-inset); border:1px solid var(--border); color: var(--text-dim);
  border-radius: 7px; padding: 9px 14px; cursor:pointer;
  transition: color .12s ease, border-color .12s ease;
}
.ghost-btn:hover{ color: var(--text); border-color: var(--accent); }
.ghost-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }

.dl-glow-blend, .dl-glow-brand{
  position: relative; color: var(--text);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 16px -6px var(--glow-a, var(--accent)), 0 0 22px -8px var(--glow-b, var(--custom-accent2));
}
.dl-glow-blend{ --glow-a: var(--marker-color, var(--accent)); --glow-b: var(--marker-color, var(--accent)); }
.dl-glow-brand{ --glow-a: var(--custom-accent2); --glow-b: #FF3EC8; }
.dl-glow-blend:hover, .dl-glow-brand:hover{
  border-color: var(--glow-a, var(--accent));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 0 22px -3px var(--glow-a, var(--accent)), 0 0 30px -6px var(--glow-b, var(--custom-accent2));
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: no-preference){
  .dl-glow-blend, .dl-glow-brand{ animation: dl-pulse 3.6s ease-in-out infinite; }
}
@keyframes dl-pulse{
  0%, 100%{ box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 14px -6px var(--glow-a, var(--accent)), 0 0 20px -8px var(--glow-b, var(--custom-accent2)); }
  50%{ box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 22px -4px var(--glow-a, var(--accent)), 0 0 30px -6px var(--glow-b, var(--custom-accent2)); }
}
.label-row{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
.label-status{ font-family: var(--font-mono); font-size:14px; color: var(--text-faint); }
.label-status.ok{ color: var(--accent-ink); }
.label-status.err{ color: var(--danger-ink); }
.label-example{ margin:16px 0 0; max-width:560px; border:1px solid var(--border); border-radius:12px; background: var(--bg-inset); }
.label-example summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; min-height:48px; padding:12px 16px; font-size:15px; font-weight:700; color: var(--text); }
.label-example summary::-webkit-details-marker{ display:none; }
.label-example summary::before{ content:"\25B8"; color: var(--accent-ink); transition: transform .2s ease; }
.label-example[open] summary::before{ transform: rotate(90deg); }
.label-example summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:12px; }
.label-example-body{ padding:0 16px 16px; }
.label-example-sharp{ display:block; width:100%; height:auto; border-radius:8px; }
.label-key-title{ margin:16px 0 8px; font-size:14.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color: var(--text-dim); }
.label-key{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.label-key li{ border-left:4px solid var(--k); padding:2px 0 2px 12px; }
.label-key b{ display:block; font-family: var(--font-mono); font-size:16px; color: var(--text); }
.label-key span{ display:block; font-size:15px; line-height:1.5; color: var(--text-dim); }
.label-example-crop{ margin-top:16px; aspect-ratio: 16 / 9; overflow:hidden; border-radius:8px; border:1px solid rgba(255,255,255,0.08); background:#000; }
.label-example-crop img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 53%; }
.label-example-cap{ margin:8px 0 0; font-size:15.5px; line-height:1.5; color: var(--text-dim); }

.hub-link{
  display:inline-flex; align-items:center; gap:4px; margin-left:8px;
  color: var(--text-faint); text-decoration:none; font-weight:600;
  border-bottom: 1px dotted var(--text-faint);
}
.hub-link:hover{ color: var(--accent-ink); border-color: var(--accent-ink); }

footer{ margin-top: 30px; text-align:center; color: var(--text-faint); font-size:13.5px; line-height:1.7; }
footer a{ color: var(--text-dim); }

.how-it-works{
  position: relative;
  margin-top: 26px;
  background: linear-gradient(155deg, rgba(255,212,0,0.11), rgba(10,11,17,0.4) 55%);
  border: 1px solid rgba(255,212,0,0.24);
  border-radius: 3px 10px 10px 10px;
  padding: 16px 18px 14px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.how-it-works::before{
  content: "";
  position: absolute; top: -11px; left: 0;
  width: 78px; height: 12px;
  background: linear-gradient(155deg, #FFE566, #FFD400);
  border-radius: 5px 8px 0 0;
  box-shadow: 0 -1px 3px rgba(255,212,0,0.25);
}
.how-it-works[open]{ box-shadow: 0 10px 26px -14px rgba(255,212,0,0.35); }
.how-it-works summary{
  cursor:pointer; font-family: var(--font-body); font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  font-size:14px; color: #FFD400; padding: 4px 0;
  list-style: none;
}
.how-it-works summary::-webkit-details-marker{ display:none; }
.folder-icon{
  width:22px; height:22px; border-radius:50%; object-fit:cover;
  vertical-align:middle; margin-right:9px; flex:0 0 auto;
  border: 1px solid #FFD400; box-shadow: 0 0 5px rgba(255,212,0,0.45);
}
.how-it-works summary{ display:flex; align-items:center; }
.how-it-works summary::before{
  content: "\25B8"; display:inline-block; margin-right:7px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); color: #FFD400;
}
.how-it-works[open] summary::before{ transform: rotate(90deg); }
.how-it-works summary:focus-visible{ outline: 2px solid #FFD400; }
.how-it-works p{ color: var(--text-dim); font-size:15px; line-height:1.65; margin: 12px 0 0; max-width: 65ch; }
.hiw-body{ overflow:hidden; max-height:0; opacity:0; transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1), opacity 0.32s ease; }
.steps-list{ margin: 14px 0 0; padding-left: 20px; max-width: 68ch; }
.steps-list li{ color: var(--text-dim); font-size:15px; line-height:1.65; margin-bottom: 8px; }
.steps-list li b{ color: var(--text); }
.steps-list li:last-child{ margin-bottom: 0; }

.compound-info-list{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.compound-info-card{
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--ci-color);
  background: var(--bg-panel-alt);
  border-radius: 8px;
  padding: 13px 15px;
}
.compound-info-card h3{
  margin:0 0 4px; font-family: var(--font-body); font-weight:700; font-size:16px;
  letter-spacing:0; color: var(--text); display:flex; align-items:baseline; gap:9px;
}
.compound-info-card .ci-tag{
  font-family: var(--font-mono); font-size:12.5px; color: var(--ci-color); text-transform:uppercase; letter-spacing:0.05em; font-weight:500;
}
.compound-info-card p{ margin: 6px 0 0; color: var(--text-dim); font-size:15px; line-height:1.6; max-width:68ch; }

.bloodwork-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:16px;
}
@media (max-width: 700px){ .bloodwork-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .bloodwork-grid{ grid-template-columns: 1fr; } }
.bloodwork-col{
  border: 1px solid var(--border-soft);
  background: var(--bg-panel-alt);
  border-radius: 8px;
  padding: 13px 14px;
}
.bw-col-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:9px; }
.bloodwork-col h4{
  margin:0; font-family: var(--font-body); font-weight:700; font-size:13.5px;
  letter-spacing:0.06em; text-transform:uppercase; color: var(--accent-ink);
}
.bloodwork-col ul{ margin:0; padding-left: 16px; }
.bloodwork-col li{ font-size:14.5px; color: var(--text-dim); line-height:1.55; margin-bottom:5px; }
.bloodwork-col li b{ color: var(--text); font-weight:600; }
.bloodwork-col li:last-child{ margin-bottom:0; }

.copy-btn{
  font-family: var(--font-mono); font-size:12.5px; letter-spacing:0.03em;
  background: var(--bg-inset); border:1px solid var(--border); color: var(--text-faint);
  border-radius: 999px; padding: 3px 9px; cursor:pointer; flex:0 0 auto;
  transition: color .12s ease, border-color .12s ease;
}
.copy-btn:hover{ color: var(--accent-ink); border-color: var(--accent); }
.copy-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }

.doctor-script{ margin-top: 22px; border-top: 1px solid var(--border-soft); padding-top: 18px; }
.doctor-script h4{
  margin:0; font-family: var(--font-body); font-weight:700; font-size:14px;
  letter-spacing:0.06em; text-transform:uppercase; color: var(--text-dim);
}
.doctor-script p{ color: var(--text-dim); font-size:14.5px; line-height:1.6; max-width:65ch; }
.doctor-textarea{
  width:100%; max-width: 68ch; background: var(--bg-inset); border:1px solid var(--border);
  color: var(--text); font-family: var(--font-body); font-size:15px; line-height:1.5;
  border-radius: 8px; padding: 12px 14px; resize: vertical;
}
.doctor-textarea:focus-visible{ outline: 2px solid var(--accent); outline-offset:1px; }

/* brighter hint text, easier to read for older eyes */
:root{ --text-faint:#A6AEC2; }

/* ---------- phone & touch comfort ---------- */
@media (hover: none) and (pointer: coarse), (max-width: 780px){
  /* 16px inputs stop iPhones zooming in when a field is tapped */
  input.custom-name-input, input.custom-mg-input, input.water-input, select.compound-select,
  input.target-input, .units-readout input, .doctor-textarea{ font-size:16px; }
  /* comfortable tap targets (44px) */
  .chip-btn{ min-height:44px; padding:10px 14px; font-size:14.5px; }
  .preset-btn{ min-height:44px; white-space:nowrap; font-size:14.5px; }
  .go-btn, .ghost-btn{ min-height:44px; }
  input.water-input, input.target-input, select.compound-select, input.custom-name-input, input.custom-mg-input, .units-readout input{ min-height:44px; }
  .hero-info summary, .how-it-works summary{ min-height:44px; display:flex; align-items:center; }
  .hub-link{ display:inline-block; padding:10px 0; }
  .copy-btn{ min-height:36px; padding-left:12px; padding-right:12px; }
  /* easier slider */
  input[type="range"]{ height:10px; border-radius:6px; }
  input[type="range"]::-webkit-slider-thumb{ width:28px; height:28px; }
  input[type="range"]::-moz-range-thumb{ width:26px; height:26px; }
  .vial-gauge-track{ height:10px; }
  /* readable small text */
  .tab .sub, .unit-label, .field-row label, .unit-toggle-label, .unit-explainer-inline, .unit-explainer,
  .ml-sub, .label-status, footer, .readout-chip, .hero-eyebrow, .as-desc{ font-size:14.5px; }
  table.dose-table th{ font-size:14px; }
}
@media (max-width: 560px){
  /* shorter header so the calculator starts sooner (the two "Why" cards move below the calculator) */
  header.top{ padding:18px 16px; margin-bottom:18px; }
  .hero-left{ gap:12px; }
  .install-app-wrap{ margin-top:0; }
  .hero-info-grid.gk-moved{ margin-top:26px; }
  .hero-left{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; }
  .hero-left > .brand{ flex:1 1 100%; }
  /* compact one-line promo */
  .ps-promo{ flex-wrap:nowrap; padding:10px 14px; gap:10px; margin-top:-6px; }
  .ps-promo .ps-promo-icon, .ps-promo .ps-promo-sub{ display:none; }
  .ps-promo .ps-promo-title{ font-size:15px; }
  .ps-promo .ps-promo-cta{ width:auto; }
  /* tabs in a 2 x 2 grid instead of a tall stack */
  .tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .tab{ padding:12px 8px; }
  /* inputs first, result last: Vial contents -> Target draw -> Draw line */
  .syringe-panel{ order:3; }
  /* water presets in one even row */
  .preset-btns{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; width:100%; }
  .preset-btn{ padding:10px 0; }
  /* dose table as stacked rows that fit the screen */
  table.dose-table{ min-width:0; }
  table.dose-table thead{ display:none; }
  table.dose-table tr{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:2px 10px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
  table.dose-table tr:last-child{ border-bottom:none; }
  table.dose-table td{ display:block; text-align:left; padding:0; border:0; font-size:15px; overflow-wrap:anywhere; }
  table.dose-table td:first-child{ grid-column:1 / -1; display:flex; margin-bottom:6px; font-size:15px; }
  table.dose-table td::before{ display:block; margin-bottom:2px; font-family:var(--font-body); font-size:13.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); }
  table.dose-table td:nth-child(2)::before{ content:"Conc."; }
  table.dose-table td:nth-child(3)::before{ content:"Per unit"; }
  table.dose-table td:nth-child(4)::before{ content:"This draw"; }
  /* smaller floating mascot, and room for it at the bottom */
  .mascot-fab-btn{ width:52px; height:52px; }
  .wrap{ padding-bottom:110px; }
}

/* ---------- PenSync pen converter (PEN tab) ---------- */
.ps-new{ display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 7px; border-radius:999px; font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.08em; line-height:1.3; text-transform:uppercase; color:#05060A; background:linear-gradient(90deg,#22D3EE,#C86BFF,#FF3EC8); }
.tab .sub .ps-new{ margin-left:4px; }

.ps-promo{
  display:flex; align-items:center; gap:14px; width:100%; margin:-8px 0 22px; padding:14px 16px; text-align:left; cursor:pointer;
  color:var(--text); font-family:var(--font-body);
  background:linear-gradient(120deg, rgba(34,211,238,.12), rgba(200,107,255,.10) 50%, rgba(255,62,200,.12));
  border:1px solid rgba(200,107,255,.45); border-radius:12px; box-shadow:0 0 22px -10px #C86BFF;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ps-promo:hover{ border-color:#FF3EC8; box-shadow:0 0 26px -8px #FF3EC8; }
.ps-promo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
body.mode-pen .ps-promo{ display:none; }
/* video guide banner (shown on every tab) */
.vid-promo{
  display:flex; align-items:center; gap:14px; margin:-8px 0 22px; padding:12px 14px;
  border-radius:12px; text-decoration:none; color:var(--text);
  background:linear-gradient(120deg, rgba(255,62,200,.15), rgba(10,11,17,.6) 55%, rgba(34,211,238,.12));
  border:1px solid rgba(255,62,200,.55); box-shadow:0 0 24px -10px #FF3EC8;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.vid-promo:hover{ border-color:#FF3EC8; box-shadow:0 0 30px -8px #FF3EC8; }
.vid-promo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ps-promo + .vid-promo{ margin-top:-10px; }
.vid-thumb{ flex:0 0 auto; width:112px; height:auto; }
.vid-text{ flex:1; min-width:0; }
.vid-eyebrow{ display:block; font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.1em; color:#FF3EC8; }
.vid-title{ display:block; font-family:var(--font-display); font-size:17px; letter-spacing:.02em; margin-top:2px; }
.vid-sub{ display:block; font-size:14.5px; color:var(--text-dim); margin-top:3px; line-height:1.45; }
.vid-cta{ flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; font-weight:700; font-size:15.5px; color:#05060A; background:linear-gradient(90deg,#FF3EC8,#C86BFF); white-space:nowrap; }
@media (max-width:560px){
  .vid-promo{ flex-wrap:wrap; gap:10px 12px; }
  .vid-thumb{ width:88px; }
  .vid-title{ font-size:15.5px; }
  .vid-sub{ display:none; }
  .vid-cta{ flex:1 1 100%; justify-content:center; }
}
.ps-promo-icon{ flex:0 0 auto; width:58px; height:32px; }
.ps-promo-text{ flex:1; min-width:0; }
.ps-promo-eyebrow{ display:block; font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:.12em; color:#FF3EC8; }
.ps-promo-title{ display:block; font-family:var(--font-display); font-size:17px; letter-spacing:.02em; margin-top:2px; }
.ps-promo-sub{ display:block; font-size:14.5px; color:var(--text-dim); margin-top:3px; line-height:1.45; }
.ps-promo-cta{ flex:0 0 auto; font-weight:700; font-size:14.5px; text-transform:uppercase; letter-spacing:.05em; color:#22D3EE; white-space:nowrap; }

/* PEN tab: its own section, independent of GLOW / KLOW / CUSTOM */
.tab.tab-pen[data-active="true"]{ box-shadow: var(--panel-shadow), 0 0 0 1px #C86BFF, 0 0 20px -6px #C86BFF, 0 0 22px -8px #FF3EC8; }
body.mode-pen .grid{ display:none; }
.ps-section{ display:none; }
body.mode-pen .ps-section{ display:block; }
.ps-section [hidden]{ display:none !important; }
/* ═══ SIMPLE PEN CALCULATOR (PEN tab): 1 pen → 2 what's in it → 3 how much → "dial your pen to X units" ═══ */
#card-pensync.pz .ps-warn, #card-pensync.pz .ps-howto, #card-pensync.pz .ps-why, #card-pensync.pz .ps-more a.dl-glow-brand,
#card-pensync.pz .ps-dial-row, #card-pensync.pz .ps-dial-mg, #card-pensync.pz .ps-dial-head .ps-hint,
#card-pensync.pz #psPenLabel, #card-pensync.pz #psStrip,
#card-pensync.pz [data-ps-pen="demo"], #card-pensync.pz [data-ps-pen="custom"],
#card-pensync.pz .ps-adv-only, #card-pensync.pz .ps-want, #card-pensync.pz #psCustomCal,
#card-pensync.pz #psGrpSetting, #card-pensync.pz #psGrpSyr,
#card-pensync.pz #psCapBlock.ps-hide-simple, #card-pensync.pz div:has(> #psSyr),
#card-pensync.pz .ps-cards, #card-pensync.pz .ps-tools, #card-pensync.pz .ps-math, #card-pensync.pz #psAssume,
#card-pensync.pz .ps-verdict:not(.block):not(.info), #card-pensync.pz .ps-ans + .ps-ans { display:none !important; }
#card-pensync.pz .ps-dial-svg-wrap{ pointer-events:none; cursor:default; }
#card-pensync.pz .ps-dial{ order:1; }
#card-pensync.pz .pz-step, #card-pensync.pz .ps-dial-head .panel-title{ font-size:14.5px; color:var(--text); letter-spacing:.08em; }
#card-pensync.pz .ps-answer{ grid-template-columns:1fr; }
#card-pensync.pz .ps-ans > span{ font-size:15.5px; padding:8px 4px; }
#card-pensync.pz .ps-ans > b{ font-size:52px; padding:14px 8px 4px; }
#card-pensync.pz .ps-ans > small{ font-size:15px; padding-bottom:14px; }
#card-pensync.pz .pz-note{ margin:0; font-size:14.5px; }
/* phone comfort: 16px inputs stop iOS zoom-on-focus; 44px tap targets */
.ps-section .ps-input, .ps-section select.ps-input{ font-size:16px; min-height:44px; }
.ps-section .ps-xl{ font-size:20px; }
.ps-section .ps-chips .chip-btn, .ps-section .ps-seg button, .ps-section .ghost-btn, .ps-section .label-row .ghost-btn{ min-height:44px; }
.ps-section .ps-chips .chip-btn{ padding:10px 14px; }
.ps-section .ps-assume summary, .ps-section .ps-why summary{ padding-top:12px; padding-bottom:12px; }
.ps-badge{ font-size:12.5px; }
body.mode-pen .ps-section.panel{ box-shadow: var(--panel-shadow), 0 0 26px -14px #C86BFF; }
body.mode-pen .ps-section .panel-title .dot{ background:#C86BFF; box-shadow:0 0 8px #C86BFF; }
.ps-head{ display:flex; align-items:baseline; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; margin-bottom:14px; }
.ps-head .panel-title{ margin:0; }
.ps-tagline{ margin:0; font-family:var(--font-display); font-size:14.5px; letter-spacing:.03em; background:linear-gradient(90deg,#22D3EE,#C86BFF,#FF3EC8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ps-warn{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:10px; border:1px solid var(--danger); background:var(--danger-soft); color:var(--text); font-size:15.5px; line-height:1.5; margin-bottom:18px; }
.ps-warn b{ color:var(--danger-ink); }
.ps-warn svg{ flex:0 0 auto; width:22px; height:22px; color:var(--danger-ink); margin-top:1px; }
.ps-howto{ margin-bottom:18px; padding:14px 16px; border-radius:12px; border:1px solid rgba(34,211,238,.4); background:linear-gradient(150deg, rgba(34,211,238,.08), rgba(10,11,17,.3) 60%); }
.ps-howto summary{ cursor:pointer; font-family:var(--font-display); font-size:16px; letter-spacing:.02em; color:#22D3EE; }
.ps-howto p{ margin:12px 0 0; font-size:16px; line-height:1.6; color:var(--text-dim); max-width:70ch; }
.ps-howto b{ color:var(--text); }
.ps-steps{ margin:12px 0 0; padding:0; list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:10px; }
.ps-steps li{ counter-increment:s; position:relative; padding:2px 0 2px 42px; font-size:16px; line-height:1.6; color:var(--text-dim); }
.ps-steps li::before{ content:counter(s); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-size:15.5px; color:#05060A; background:linear-gradient(135deg,#22D3EE,#C86BFF); }
.ps-legend{ display:flex; flex-direction:column; gap:3px; margin:6px 0; font-size:14.5px; }
.ps-legend span{ display:flex; align-items:center; gap:8px; }
.ps-legend .ps-dot{ display:inline-block; }
.ps-example{ padding:10px 12px; border-radius:8px; background:var(--accent-soft); border:1px solid rgba(10,168,255,.4); }
.ps-example-red{ background:var(--danger-soft); border-color:rgba(255,59,48,.45); }
.ps-dial{ margin-bottom:18px; padding:14px 16px 16px; border-radius:12px; border:1px solid rgba(200,107,255,.4); background:var(--bg-inset); }
.ps-dial-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin-bottom:6px; }
.ps-dial-head .panel-title{ margin:0; }
.ps-dial-svg-wrap{ max-width:720px; margin:0 auto; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; }
.ps-dial-row{ max-width:720px; margin-left:auto; margin-right:auto; }
.ps-dial-svg-wrap.dragging{ cursor:grabbing; }
#psPenSvg{ display:block; width:100%; height:auto; }
.ps-dial-row{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.ps-dial-row input[type="range"]{ flex:1; min-width:0; --marker-color:#C86BFF; }
.chip-btn.ps-dial-step{ width:44px; height:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; flex:0 0 auto; }
.ps-dial-readout{ min-width:110px; text-align:right; font-family:var(--font-mono); color:var(--text-dim); font-size:14.5px; }
.ps-dial-readout b{ font-size:24px; color:var(--text); }
.ps-dial-readout small{ display:block; font-size:14.5px; color:var(--text-faint); }
.ps-dial-mg{ max-width:720px; margin:10px auto 0; text-align:center; font-size:17px; color:var(--text-dim); }
.ps-dial-mg:empty{ display:none; }
.ps-dial-mg b{ font-family:var(--font-mono); font-size:26px; color:var(--custom-accent); }
.ps-dial-mg small{ font-family:var(--font-mono); font-size:14.5px; color:var(--text-faint); }
.ps-dial-chip{ display:inline-block; margin:3px 4px; padding:6px 10px; border-radius:999px; background:var(--bg-panel-alt); border:1px solid var(--border); font-size:15.5px; }
.ps-dial-chip b{ font-size:16px; }
.ps-dial-mg-none{ font-size:15px; color:var(--danger-ink); }
@media (max-width:560px){
  .ps-dial{ padding:12px; }
  .ps-dial-row{ flex-wrap:wrap; }
  .ps-dial-readout{ flex:1 1 100%; order:-1; text-align:center; }
}
.ps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
@media (max-width:780px){ .ps-grid{ grid-template-columns:1fr; } }
.ps-form{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.ps-label{ display:block; font-size:13px; color:var(--text-faint); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.ps-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ps-row > *{ min-width:0; }
.ps-input{ width:100%; min-width:0; background:var(--bg-inset); border:1px solid var(--border); color:var(--text); font-family:var(--font-mono); font-size:15px; border-radius:7px; padding:10px 11px; font-variant-numeric:tabular-nums; }
select.ps-input{ font-family:var(--font-body); font-size:15.5px; }
.ps-input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.ps-input[readonly]{ color:var(--text-dim); border-style:dashed; }
.ps-suffix-wrap{ position:relative; }
.ps-suffix-wrap .ps-input{ padding-right:56px; }
.ps-suffix{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:13.5px; color:var(--text-faint); pointer-events:none; }
.ps-xl{ font-size:20px; font-weight:600; }
.ps-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ps-chips .chip-btn{ display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; padding:8px 13px; }
.ps-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.ps-chip-sub{ font-size:13px; font-weight:500; opacity:.75; margin-left:2px; }
.ps-seg.ps-seg-3{ grid-template-columns:repeat(3, 1fr); }
/* Simple / Advanced */
.ps-view{ display:inline-grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:999px; background:var(--bg-inset); border:1px solid var(--border); margin-bottom:16px; }
.ps-view button{ min-height:42px; padding:8px 20px; border-radius:999px; border:0; background:transparent; color:var(--text-dim); font-family:var(--font-body); font-weight:700; font-size:16px; cursor:pointer; }
.ps-view button[aria-pressed="true"]{ background:linear-gradient(90deg,#22D3EE,#C86BFF); color:#05060A; }
.ps-view button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ps-simple-only{ display:none; }
.ps-section.ps-simple .ps-simple-only{ display:block; }
.ps-section.ps-simple .ps-adv-only{ display:none !important; }
.ps-section.ps-simple .ps-cards, .ps-section.ps-simple .ps-tools, .ps-section.ps-simple .ps-math,
.ps-section.ps-simple #psAssume, .ps-section.ps-simple #psSettingUnit, .ps-section.ps-simple #psCapBlock.ps-hide-simple{ display:none !important; }
.ps-section.ps-simple #psGrpSetting .ps-row{ grid-template-columns:1fr; }
.ps-want .ps-seg button{ font-size:14.5px; letter-spacing:.02em; }
/* Simple view: questions and answers first, Pen Dial after them */
body.mode-pen .ps-section.ps-simple{ display:flex; flex-direction:column; }
.ps-section.ps-simple > *{ order:3; }
.ps-section.ps-simple > .ps-head, .ps-section.ps-simple > .ps-view, .ps-section.ps-simple > .ps-warn,
.ps-section.ps-simple > .ps-howto, .ps-section.ps-simple > .ps-grid{ order:1; }
.ps-section.ps-simple > .ps-dial{ order:1; }
.ps-dial-pens{ max-width:720px; margin:6px auto 12px; }
.ps-dial-pens .ps-chips{ justify-content:center; }
.ps-dial-pens .ps-strip{ margin-top:8px; }
.ps-section.ps-simple > .ps-view{ align-self:flex-start; }
/* the two big answers */
.ps-answer{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ps-ans{ border-radius:12px; border:2px solid var(--c); background:var(--bg-panel-alt); overflow:hidden; text-align:center; min-width:0; }
.ps-ans > span{ display:block; background:var(--c); color:#05060A; font-weight:700; font-size:14.5px; letter-spacing:.05em; text-transform:uppercase; padding:6px 4px; }
.ps-ans > b{ display:block; font-family:var(--font-mono); font-size:42px; line-height:1.1; padding:10px 6px 2px; color:var(--text); overflow-wrap:anywhere; }
.ps-ans > small{ display:block; font-size:14.5px; color:var(--text-dim); padding:0 8px 10px; }
.ps-ans.locked > b{ font-family:var(--font-body); font-size:16px; color:var(--danger-ink); padding:20px 8px 8px; }
/* tap-to-explain */
.ps-info{ display:inline-grid; place-items:center; width:28px; height:28px; margin-left:6px; vertical-align:middle; padding:0; border-radius:50%; border:1.5px solid var(--accent-ink); background:transparent; color:var(--accent-ink); font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-weight:700; font-size:15px; line-height:1; text-transform:none; letter-spacing:0; cursor:pointer; }
.ps-info[aria-expanded="true"]{ background:var(--accent-ink); color:#05060A; }
.ps-info:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ps-tip{ display:block; margin:6px 0 10px; padding:10px 12px; border-radius:8px; background:var(--accent-soft); border:1px solid rgba(10,168,255,.45); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.55; font-weight:400; text-transform:none; letter-spacing:0; }
/* bigger text (whole page) */
.gk-textsize{ white-space:nowrap; }
html.gk-big .wrap{ zoom:1.2; }
.ps-read{ border-color:rgba(57,255,106,.35); background:linear-gradient(150deg, rgba(57,255,106,.06), rgba(10,11,17,.3) 60%); }
.ps-read summary{ color:var(--custom-accent); }
.ps-read-svg{ display:block; width:100%; max-width:720px; height:auto; margin:12px auto 0; }
.ps-read-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ps-read-list li{ display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:start; font-size:16px; line-height:1.6; color:var(--text-dim); }
.ps-read-list .k{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:400; font-size:15.5px; color:#05060A; background:var(--c); }
.ps-blend-rows{ display:flex; flex-direction:column; gap:8px; }
.ps-blend-row{ display:grid; grid-template-columns:minmax(0,1fr) 120px; align-items:center; gap:10px; }
.ps-blend-name{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:16px; }
.ps-blend-name i{ width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 6px var(--c); flex:0 0 auto; }
.ps-give{ padding:12px 14px; border-radius:10px; border:1px solid rgba(57,255,106,.4); background:rgba(57,255,106,.05); }
.ps-give ul{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ps-give li{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:8px; font-size:15.5px; }
.ps-give li .n{ display:flex; align-items:center; gap:8px; font-weight:600; }
.ps-give li .n i{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 auto; }
.ps-give li .a{ font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.ps-give li .a small{ font-weight:500; color:var(--text-faint); margin-left:4px; }
.ps-give li.is-target .a{ color:var(--custom-accent); }
.ps-give .ps-hint{ margin-top:8px; }
.ps-dot.verified{ background:var(--custom-accent); box-shadow:0 0 6px var(--custom-accent); }
.ps-dot.user{ background:var(--ghk); box-shadow:0 0 6px var(--ghk); }
.ps-dot.unknown{ background:var(--danger); box-shadow:0 0 6px var(--danger); }
.ps-strip{ margin-top:8px; padding:10px 12px; border-radius:8px; border:1px dashed var(--border); background:var(--bg-inset); font-size:14.5px; display:flex; flex-direction:column; gap:4px; }
.ps-strip-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; }
.ps-strip-cal{ font-family:var(--font-mono); color:var(--accent-ink); }
.ps-strip-cal.locked{ color:var(--danger-ink); }
.ps-strip-src{ color:var(--text-faint); font-size:14px; }
.ps-badge{ display:inline-block; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.08em; padding:3px 7px; border-radius:5px; border:1px solid currentColor; white-space:nowrap; }
.ps-badge.verified{ color:var(--custom-accent); }
.ps-badge.user{ color:var(--ghk); }
.ps-badge.unknown{ color:var(--danger-ink); }
.ps-badge.demo{ color:var(--tb); }
.ps-badge.input{ color:var(--accent-ink); }
.ps-badge.calc{ color:var(--kpv); }
.ps-customcal{ padding:12px; border-radius:8px; border:1px solid rgba(255,212,0,.35); background:rgba(255,212,0,.05); display:flex; flex-direction:column; gap:10px; }
.ps-hint{ margin:0; font-size:14px; color:var(--text-faint); line-height:1.5; }
.ps-seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:9px; background:var(--bg-inset); border:1px solid var(--border); }
.ps-seg button{ font-family:var(--font-body); font-weight:700; font-size:14.5px; letter-spacing:.05em; text-transform:uppercase; padding:10px 6px; border-radius:6px; border:0; background:transparent; color:var(--text-faint); cursor:pointer; }
.ps-seg button[aria-selected="true"]{ color:#05060A; background:linear-gradient(90deg,#22D3EE,#C86BFF); }
.ps-seg button[aria-checked="true"]{ color:var(--accent-ink); background:var(--accent-soft); }
.ps-seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.ps-link{ display:flex; gap:9px; align-items:center; font-size:14.5px; color:var(--text-dim); cursor:pointer; }
.ps-link input{ width:17px; height:17px; accent-color:var(--custom-accent); flex:0 0 auto; }
.go-btn.ps-calc{ width:100%; padding:14px; font-size:15.5px; letter-spacing:.14em; color:#05060A; background:linear-gradient(90deg,#22D3EE,#0AA8FF 50%,#C86BFF); }
.ps-results{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.ps-verdict{ padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg-inset); font-size:15px; line-height:1.5; display:flex; flex-direction:column; gap:6px; }
.ps-verdict p{ margin:0; }
.ps-verdict ul{ margin:0; padding-left:18px; color:var(--text-dim); }
.ps-verdict.block{ border-color:var(--danger); background:var(--danger-soft); }
.ps-verdict-title{ font-family:var(--font-display); font-size:17px; letter-spacing:.03em; }
.ps-verdict.block .ps-verdict-title{ color:var(--danger-ink); }
.ps-verdict.info .ps-verdict-title{ color:var(--accent-ink); }
.ps-verdict-row{ display:flex; gap:6px; flex-wrap:wrap; }
.ps-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ps-card{ position:relative; min-width:0; padding:12px 13px; border-radius:10px; background:var(--bg-panel-alt); border:1px solid var(--border); display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.ps-card::before{ content:""; position:absolute; left:12px; right:12px; top:0; height:2px; background:var(--c); box-shadow:0 0 10px var(--c); }
.ps-card.is-answer{ grid-column:1 / -1; order:-1; border-color:var(--c); box-shadow:0 0 22px -10px var(--c); }
.ps-card-label{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c); }
.ps-card-value{ font-family:var(--font-mono); font-size:24px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ps-card.is-answer .ps-card-value{ font-size:34px; }
.ps-card-value small{ font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--text-dim); margin-left:6px; }
.ps-card-sub{ font-size:14px; color:var(--text-faint); line-height:1.4; }
.ps-card.is-locked{ --c: var(--danger); background:repeating-linear-gradient(135deg, rgba(255,59,48,.06) 0 8px, transparent 8px 16px), var(--bg-panel-alt); }
.ps-card.is-locked .ps-card-value{ font-family:var(--font-body); font-size:15px; color:var(--danger-ink); }
.ps-flags{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ps-flags li{ font-size:14.5px; line-height:1.45; padding:9px 12px; border-radius:8px; }
.ps-flags .warn{ background:rgba(255,212,0,.08); border:1px solid rgba(255,212,0,.4); }
.ps-flags .note{ background:var(--accent-soft); border:1px solid rgba(10,168,255,.45); }
.ps-tools{ display:flex; gap:8px; flex-wrap:wrap; }
.ps-math{ list-style:none; counter-reset:m; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ps-math li{ counter-increment:m; position:relative; padding:9px 11px 9px 38px; border-radius:8px; background:var(--bg-inset); border:1px solid var(--border-soft); font-size:14.5px; color:var(--text-faint); }
.ps-math li::before{ content:counter(m); position:absolute; left:10px; top:9px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-size:13px; font-weight:700; color:#05060A; background:var(--tb); }
.ps-math .ps-m-title{ display:block; color:var(--text); font-size:14.5px; font-weight:600; }
.ps-math code{ display:block; font-family:var(--font-mono); font-size:14.5px; color:var(--accent-ink); margin-top:2px; overflow-wrap:anywhere; }
.ps-assume{ border:1px solid var(--border); border-radius:10px; background:var(--bg-inset); }
.ps-assume summary{ cursor:pointer; padding:11px 13px; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.ps-assume dl{ margin:0; padding:0 13px 10px; }
.ps-assume dl div{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"k t" "v v"; gap:2px 8px; padding:8px 0; border-top:1px solid var(--border-soft); }
.ps-assume dt{ grid-area:k; font-size:14px; color:var(--text-faint); }
.ps-assume dd{ margin:0; }
.ps-assume .ps-a-v{ grid-area:v; font-family:var(--font-mono); font-size:14.5px; overflow-wrap:anywhere; }
.ps-assume .ps-a-v.na{ color:#5a6177; }
.ps-assume .ps-a-t{ grid-area:t; }
.ps-why{ margin-top:18px; border-top:1px solid var(--border-soft); padding-top:14px; }
.ps-why summary{ cursor:pointer; font-weight:700; font-size:15.5px; color:var(--text); }
.ps-lanes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
@media (max-width:560px){ .ps-lanes{ grid-template-columns:1fr; } .ps-row{ grid-template-columns:1fr; } .ps-row.ps-keep{ grid-template-columns:1fr 1fr; } }
.ps-lane{ padding:12px; border-radius:10px; background:var(--bg-inset); border:1px solid var(--border); }
.ps-lane h4{ margin:0 0 8px; font-family:var(--font-display); font-weight:400; font-size:15px; letter-spacing:.04em; color:var(--c); }
.ps-lane ol{ margin:0; padding-left:18px; font-size:14.5px; color:var(--text-dim); line-height:1.6; }
.ps-why p{ font-size:14.5px; color:var(--text-dim); line-height:1.6; margin:10px 0 0; }
.ps-more{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.ps-more a{ text-decoration:none; }
.ps-foot{ margin:14px 0 0; font-size:14px; color:var(--text-faint); line-height:1.5; }

/* ═══ EASY FOR ALL AGES: 16px inputs everywhere (no iPhone zoom), finger-sized buttons ═══ */
input, select, textarea{ font-size:16px; }
.ps-section .ps-xl, .units-readout input{ font-size:20px; }
.chip-btn, .preset-btn, .go-btn, .ghost-btn, .step-btn, .tab, .gk-quick button{ min-height:44px; }
.chip-btn{ padding:10px 14px; }
.preset-btn{ padding:10px 12px; }
.copy-btn{ min-height:36px; padding:6px 12px; }
input.water-input, input.target-input, select.compound-select, input.custom-name-input, input.custom-mg-input{ min-height:44px; }
.ps-info{ width:32px; height:32px; font-size:16px; }
.hero-info summary, .how-it-works summary{ min-height:44px; }

/* ═══ CALMER MOTION: no looping pulses or falling petals; hover feedback stays ═══ */
.petal-field{ display:none !important; }
.brand-mark-img, .mascot-fab-btn, .install-glow, .dl-glow-blend, .dl-glow-brand{ animation:none !important; }

/* ═══ SHARED BITS ═══ */
.gk-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.gk-help{ margin:8px 0 0; font-size:15px; line-height:1.5; color:var(--text-faint); }
.gk-seg{ display:inline-flex; gap:4px; padding:4px; border-radius:12px; background:var(--bg-inset); border:1px solid var(--border); }
.gk-seg button{ min-height:44px; padding:8px 16px; border:0; border-radius:9px; background:transparent; color:var(--text-dim); font-family:var(--font-body); font-size:16px; font-weight:700; cursor:pointer; }
.gk-seg button[aria-checked="true"], .gk-seg button[aria-selected="true"]{ background:var(--accent); color:#FFFFFF; }
.gk-seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.gk-suffix{ position:relative; display:inline-flex; align-items:center; }
.gk-suffix input{ padding-right:48px !important; }
.gk-suffix i{ position:absolute; right:14px; font-style:normal; font-family:var(--font-mono); font-size:15px; color:var(--text-faint); pointer-events:none; }
.gk-start input[type="text"], .gk-start input[type="number"], .gk-start select, .gk-save-form input, .gk-share-link input{
  width:100%; min-height:48px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg-inset); color:var(--text);
  font-family:var(--font-mono); font-size:17px; font-variant-numeric:tabular-nums;
}
.gk-start select{ font-family:var(--font-body); }
.gk-start input:focus-visible, .gk-start select:focus-visible, .gk-save-form input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }

/* ═══ START HERE (drop-down) ═══ */
.gk-start{ margin:0 0 18px; border-radius:16px; border:1px solid var(--border); background:var(--bg-panel); box-shadow:var(--panel-shadow); overflow:hidden; }
.gk-start.is-open{ border-color:var(--accent); box-shadow:var(--panel-shadow), 0 0 24px -14px var(--accent); }
.gk-start-head{ display:flex; align-items:center; gap:12px; padding:10px 14px 10px 10px; }
.gk-start-h{ flex:1; min-width:0; margin:0; }
.gk-start-toggle{ display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:8px; border:0; border-radius:12px; background:transparent; color:var(--text); text-align:left; cursor:pointer; font:inherit; }
.gk-start-toggle:hover{ background:var(--bg-panel-alt); }
.gk-start-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.gk-start-ico{ flex:0 0 auto; display:grid; place-items:center; width:58px; height:46px; border-radius:12px; background:var(--accent); color:#FFFFFF; font-family:var(--font-display); font-size:14px; letter-spacing:.02em; }
.gk-start-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.gk-start-t{ font-family:var(--font-display); font-weight:400; font-size:20px; letter-spacing:.01em; }
.gk-start-sub{ font-family:var(--font-body); font-size:15px; font-weight:400; color:var(--text-dim); }
.gk-chev{ flex:0 0 auto; margin-left:auto; width:14px; height:14px; border-right:3px solid var(--text-dim); border-bottom:3px solid var(--text-dim); transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s ease; }
.gk-start.is-open .gk-chev{ transform:rotate(225deg) translate(-3px,-3px); }
.gk-demo-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; font-size:15px; }
.gk-start-body{ padding:4px 22px 22px; border-top:1px solid var(--border-soft); }
.gk-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.gk-step{ padding:18px 0; border-bottom:1px solid var(--border-soft); }
.gk-step-q{ display:flex; align-items:center; gap:12px; margin:0 0 12px; font-family:var(--font-body); font-size:19px; font-weight:700; color:var(--text); }
.gk-n{ flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent-soft); border:1.5px solid var(--accent); color:var(--accent-ink); font-family:var(--font-display); font-size:15px; }
.gk-pick{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.gk-pick button{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:72px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--border); background:var(--bg-inset); color:var(--text); text-align:left; cursor:pointer; font-family:var(--font-body); transition:border-color .15s ease, background .15s ease; }
.gk-pick button b{ font-family:var(--font-display); font-weight:400; font-size:17px; letter-spacing:.02em; }
.gk-pick button small{ font-size:14px; color:var(--text-faint); }
.gk-pick button:hover{ border-color:var(--q); }
.gk-pick button[aria-checked="true"]{ border-color:var(--q); background:var(--bg-panel-alt); box-shadow:inset 0 0 0 1px var(--q), 0 0 18px -8px var(--q); }
.gk-pick button[aria-checked="true"] b::after{ content:" \2713"; color:var(--q); }
.gk-pick button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.gk-other{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; margin-top:14px; }
.gk-other[hidden]{ display:none; }
.gk-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.gk-field[hidden]{ display:none; }
.gk-field > span:first-child{ font-size:15px; font-weight:600; color:var(--text-dim); }
.gk-field .gk-suffix{ display:flex; }
.gk-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.gk-big-in{ width:170px; }
.gk-big-in input{ font-size:22px !important; font-weight:700; }
.gk-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.gk-presets button{ min-height:48px; min-width:64px; padding:8px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg-inset); color:var(--text-dim); font-family:var(--font-mono); font-size:16px; cursor:pointer; }
.gk-presets button:hover{ border-color:var(--accent); color:var(--text); }
.gk-presets button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#FFFFFF; }
#gkCompoundWrap{ margin-bottom:12px; max-width:420px; }
.gk-result{ margin-top:18px; }
.gk-wait{ padding:16px 18px; border-radius:12px; border:1px dashed var(--border); background:var(--bg-inset); }
.gk-wait p{ margin:0 0 6px; font-size:16px; color:var(--text-dim); }
.gk-wait-title{ font-weight:700; color:var(--text) !important; }
.gk-wait ul{ margin:0; padding-left:20px; color:var(--text-faint); font-size:15px; line-height:1.6; }
.gk-wait .go-btn{ margin-top:8px; }
.gk-answer{ border-radius:14px; border:2px solid var(--custom-accent); background:var(--bg-panel-alt); text-align:center; overflow:hidden; }
.gk-answer > span{ display:block; padding:8px; background:var(--custom-accent); color:#05060A; font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.gk-answer > b{ display:block; padding:14px 8px 2px; font-family:var(--font-mono); font-size:clamp(40px, 9vw, 60px); line-height:1.05; color:var(--text); }
.gk-answer > small{ display:block; padding:0 10px 14px; font-size:17px; color:var(--text-dim); }
.gk-facts{ margin:14px 0 0; padding-left:20px; font-size:16px; line-height:1.6; color:var(--text-dim); }
.gk-also{ margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--bg-inset); border:1px solid var(--border-soft); }
.gk-also p{ margin:0 0 6px; font-size:15px; font-weight:600; color:var(--text-dim); }
.gk-also ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.gk-also li{ display:flex; align-items:baseline; gap:8px; font-size:16px; }
.gk-also li span{ flex:1; }
.gk-also li b{ font-family:var(--font-mono); }
.gk-also li small{ font-family:var(--font-mono); color:var(--text-faint); }
.gk-result-btns, .gk-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.gk-result-btns .go-btn{ font-size:15px; }
.gk-actions .ghost-btn, .gk-result-btns .ghost-btn{ display:inline-flex; align-items:center; gap:8px; font-size:15px; }
.label-row .ghost-btn{ font-size:15px; }
.gk-copy-btn{ display:inline-flex; align-items:center; gap:6px; }

/* safety notes: big and impossible to miss */
.gk-alert{ display:flex; gap:12px; align-items:flex-start; margin:12px 0 0; padding:14px 16px; border-radius:12px; font-size:16px; line-height:1.5; color:var(--text); }
.gk-alert.warn{ background:rgba(255,212,0,.12); border:2px solid #E0B400; }
.gk-alert.stop{ background:var(--danger-soft); border:2px solid var(--danger); }
.gk-alert-ico{ flex:0 0 auto; font-size:22px; line-height:1.1; }
.status-line{ font-size:16px !important; }
.ps-flags li{ font-size:15.5px !important; padding:12px 14px !important; }
.ps-flags .warn{ border-width:2px !important; }

/* ═══ MY VIALS ═══ */
.gk-vials{ margin:0 0 18px; padding:16px 18px; border-radius:16px; border:1px solid var(--border); background:var(--bg-panel); }
.gk-vials-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }
.gk-vials-head h2{ margin:0; font-family:var(--font-display); font-weight:400; font-size:18px; color:var(--text); }
.gk-vials-sub{ margin:0; font-size:15px; color:var(--text-faint); }
.gk-vials-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.gk-empty{ margin:0; font-size:15px; color:var(--text-faint); }
.gk-vial{ display:flex; align-items:stretch; border-radius:12px; border:1px solid var(--border); background:var(--bg-inset); overflow:hidden; max-width:100%; }
.gk-vial-load{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:56px; padding:9px 14px; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; font-family:var(--font-body); min-width:0; }
.gk-vial-load b{ font-size:16px; }
.gk-vial-load small{ font-size:14px; color:var(--text-faint); overflow-wrap:anywhere; }
.gk-vial-load:hover{ background:var(--bg-panel-alt); }
.gk-vial-del{ flex:0 0 auto; width:48px; border:0; border-left:1px solid var(--border); background:transparent; color:var(--text-faint); font-size:22px; cursor:pointer; }
.gk-vial-del:hover{ color:var(--danger-ink); background:var(--danger-soft); }
.gk-save-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:12px; padding:14px; border-radius:12px; border:1px solid var(--accent); background:var(--accent-soft); }
.gk-save-form label{ flex:1 1 220px; display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:600; color:var(--text-dim); }
.gk-save-form input{ font-family:var(--font-body) !important; }

/* shared-link bar */
.gk-shared-bar{ margin:0 0 18px; padding:16px 18px; border-radius:14px; border:2px solid var(--accent); background:var(--accent-soft); }
.gk-shared-bar p{ margin:0 0 6px; font-size:16px; line-height:1.5; color:var(--text); }
.gk-shared-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

/* ═══ DIALOGS: share + demo ═══ */
.gk-dialog{ width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:22px; border-radius:18px; border:1px solid var(--border); background:var(--bg-panel); color:var(--text); box-shadow:0 30px 80px -20px rgba(0,0,0,.6); font-family:var(--font-body); }
.gk-dialog::backdrop{ background:rgba(5,6,10,.7); }
.gk-dialog h2{ margin:0 40px 10px 0; font-family:var(--font-display); font-weight:400; font-size:21px; }
.gk-dialog-close-form{ position:absolute; top:12px; right:12px; margin:0; }
.gk-x{ width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--bg-inset); color:var(--text); font-size:24px; line-height:1; cursor:pointer; }
.gk-share-what{ margin:0; font-size:17px; font-weight:600; }
.gk-share-link{ margin-top:12px; }
.gk-share-link input{ font-size:14px !important; }
.gk-share-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.gk-qr{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-soft); }
.gk-qr[hidden]{ display:none; }
.gk-qr canvas{ width:176px; height:176px; border-radius:10px; background:#FFFFFF; }
.gk-qr > div{ flex:1 1 180px; }
.gk-demo-stage{ position:relative; min-height:230px; margin-top:8px; border-radius:14px; background:var(--bg-inset); border:1px solid var(--border-soft); overflow:hidden; }
.gk-demo-slide{ position:absolute; inset:0; padding:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; opacity:0; transform:translateX(24px); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.gk-demo-slide.on{ opacity:1; transform:none; }
.gk-demo-cap{ display:flex; align-items:center; gap:10px; margin:0; font-size:18px; font-weight:700; text-align:center; }
.gk-demo-mock{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.gk-chip{ padding:10px 14px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg-panel); font-weight:700; font-size:15px; }
.gk-chip.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }
.gk-field-mock{ min-width:110px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg-panel); font-family:var(--font-mono); font-size:17px; }
.gk-field-mock.big{ min-width:150px; font-size:24px; font-weight:700; text-align:center; }
.gk-demo-answer{ width:100%; max-width:340px; text-align:center; border:2px solid var(--custom-accent); border-radius:12px; overflow:hidden; background:var(--bg-panel); }
.gk-demo-answer span{ display:block; padding:6px; background:var(--custom-accent); color:#05060A; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.gk-demo-answer b{ display:block; font-family:var(--font-mono); font-size:38px; padding:6px 0 0; }
.gk-demo-answer small{ display:block; padding:0 8px 8px; font-size:14px; color:var(--text-dim); }
.gk-demo-syr{ width:100%; max-width:300px; color:var(--text-dim); }
.gk-demo-fill{ fill:var(--custom-accent); }
.gk-demo-dots{ display:flex; justify-content:center; gap:8px; margin:12px 0 0; }
.gk-demo-dots i{ width:10px; height:10px; border-radius:50%; background:var(--border); }
.gk-demo-dots i.on{ background:var(--accent); }
.gk-demo-ctrl{ display:flex; justify-content:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.gk-demo-go{ display:block; width:100%; margin-top:12px; font-size:16px; }
@media (prefers-reduced-motion: reduce){ .gk-demo-slide{ transition:none; transform:none; } }

/* ═══ LABEL EXAMPLES: Niimbot / Full size ═══ */
.gk-ex-seg{ display:flex; width:100%; margin:4px 0 14px; }
.gk-ex-seg button{ flex:1; font-size:15px; }
.label-example-full{ max-width:360px; margin:0 auto; }
.gk-ex-panel[hidden]{ display:none; }
.gk-ex-link{ margin:16px 0 0; font-size:15px; }
.gk-ex-link a{ color:var(--accent-ink); font-weight:600; }
.label-example summary{ font-size:16px; }

/* ═══ HEADER: language, colors, cleaner layout ═══ */
header.top .hero-left{ grid-template-areas:"brand chip" "brand install" "brand prefs" "brand big"; }
header.top .hero-left > .gk-prefs{ grid-area:prefs; justify-self:end; }
.gk-prefs{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.gk-lang{ position:relative; display:inline-flex; align-items:center; gap:6px; min-height:46px; padding:0 4px 0 12px; border-radius:12px; border:1px solid var(--border); background:var(--bg-inset); color:var(--text); font-size:18px; }
.gk-lang select{ min-height:44px; padding:0 30px 0 6px; border:0; background:transparent; color:var(--text); font-family:var(--font-body); font-size:16px; font-weight:700; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.gk-lang select option{ color:#12141D; background:#FFFFFF; }
.gk-lang:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.gk-theme{ display:inline-flex; gap:3px; padding:3px; border-radius:12px; border:1px solid var(--border); background:var(--bg-inset); }
.gk-theme button{ width:42px; height:40px; border:0; border-radius:9px; background:transparent; color:var(--text-dim); font-size:19px; cursor:pointer; }
.gk-theme button[aria-checked="true"]{ background:var(--accent); color:#FFFFFF; }
.gk-theme button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
@media (max-width:560px){ header.top .hero-left > .gk-prefs{ flex:1 1 100%; justify-content:flex-start; } }

/* ═══ GUIDES: one tidy list instead of folder tabs ═══ */
.gk-guides-head{ margin-top:34px; }
.gk-guides-head h2{ margin:0; font-family:var(--font-display); font-weight:400; font-size:24px; color:var(--text); }
.gk-guides-head > p{ margin:6px 0 0; font-size:16px; color:var(--text-dim); }
.gk-guide-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.gk-guide-nav button{ min-height:44px; padding:8px 14px; border-radius:999px; border:1px solid var(--border); background:var(--bg-inset); color:var(--text); font-family:var(--font-body); font-size:15px; font-weight:600; cursor:pointer; }
.gk-guide-nav button:hover{ border-color:var(--accent); }
.how-it-works, .hero-info{ margin-top:12px !important; padding:6px 18px !important; border-radius:14px !important; border:1px solid var(--border) !important; background:var(--bg-panel) !important; box-shadow:none !important; }
.how-it-works::before, .hero-info::before{ display:none !important; }
.how-it-works[open], .hero-info[open]{ border-color:var(--accent) !important; }
.how-it-works summary, .hero-info summary{ min-height:60px; font-size:17px !important; font-weight:700; letter-spacing:0 !important; text-transform:none !important; color:var(--text) !important; }
.how-it-works summary::before, .hero-info summary::before{ display:none !important; }
.how-it-works summary::after, .hero-info summary::after{ content:""; margin-left:auto; flex:0 0 auto; width:11px; height:11px; border-right:2.5px solid var(--text-dim); border-bottom:2.5px solid var(--text-dim); transform:rotate(45deg); transition:transform .2s ease; }
.how-it-works[open] summary::after, .hero-info[open] summary::after{ transform:rotate(225deg); }
.hero-info summary{ display:flex; align-items:center; }
.folder-icon{ width:30px; height:30px; margin-right:12px; border:0 !important; box-shadow:none !important; }
.how-it-works p, .steps-list li, .hero-info p, .hero-info li{ font-size:16px !important; }
.hero-info-grid.gk-moved{ margin-top:12px !important; gap:0 !important; grid-template-columns:1fr !important; }
.ci-src{ margin:8px 0 0 !important; font-size:15px !important; }
.ci-src a{ color:var(--accent-ink); font-weight:600; }
.gk-updated{ color:var(--text-faint) !important; font-size:14px !important; }

/* ═══ FEEDBACK + FOOTER ═══ */
.gk-feedback{ margin-top:30px; padding:20px; border-radius:16px; border:1px solid var(--border); background:var(--bg-panel); text-align:center; }
.gk-feedback[hidden]{ display:none; }
.gk-feedback h2{ margin:0; font-family:var(--font-display); font-weight:400; font-size:20px; }
.gk-feedback p{ margin:8px auto 14px; max-width:46ch; font-size:16px; color:var(--text-dim); }
.gk-feedback-btn{ display:inline-flex; align-items:center; text-decoration:none; }
footer{ font-size:14.5px !important; }
footer p{ margin:4px 0; }
.gk-foot-links a{ font-weight:600; }

@media (max-width:780px){ .gk-pick{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .gk-start-head{ flex-wrap:wrap; padding:8px; }
  .gk-demo-btn{ flex:1 1 100%; justify-content:center; }
  .gk-start-ico{ width:48px; height:42px; font-size:12px; }
  .gk-start-t{ font-size:18px; }
  .gk-start-body{ padding:4px 14px 18px; }
  .gk-other{ grid-template-columns:1fr; }
  .gk-big-in{ width:140px; }
}

/* ═══ LIGHT MODE ═══ */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F5F9; --bg-panel:#FFFFFF; --bg-panel-alt:#F1F3F8; --bg-inset:#F6F7FB;
  --border:#CCD2DE; --border-soft:#E3E6EE;
  --text:#10121A; --text-dim:#363D4F; --text-faint:#596173;
  --accent:#0A78C8; --accent-ink:#06609F; --accent-soft:rgba(10,120,200,0.10);
  --danger:#D93025; --danger-ink:#B3261E; --danger-soft:rgba(217,48,37,0.09);
  --copper:#D3186F; --bpc:#2F5FC4; --tb:#7A3FD0; --ghk:#9A7300; --kpv:#C83A78;
  --custom-accent:#138A47; --custom-accent2:#5E8F00; --glow-needle:#0A78C8;
  --panel-shadow:0 1px 2px rgba(16,18,26,0.06), 0 10px 26px -18px rgba(16,18,26,0.35);
}
:root[data-theme="dark"]{ color-scheme:dark; }
[data-theme="light"] body{ background-image:none; }
[data-theme="light"] header.top{ background:radial-gradient(60% 120% at 0% 0%, rgba(10,120,200,0.08), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(200,107,255,0.10), transparent 60%), #FFFFFF; border-color:var(--border); box-shadow:var(--panel-shadow); }
[data-theme="light"] header.top .hub-link{ color:var(--text); background:rgba(10,120,200,0.08); box-shadow:none; }
[data-theme="light"] header.top .hub-link:hover{ color:var(--text); }
[data-theme="light"] header.top .gk-textsize{ color:var(--text); background:var(--bg-inset); border-color:var(--border); }
[data-theme="light"] header.top .gk-textsize .gk-a{ background:var(--text); color:#FFFFFF; }
[data-theme="light"] .gk-quick button{ background:#FFFFFF; }
[data-theme="light"] .brand h1{ filter:none; }
[data-theme="light"] .tab{ background:#FFFFFF; }
[data-theme="light"] .tab[data-active="true"]{ background:var(--bg-panel-alt); }
[data-theme="light"] .vid-promo{ background:linear-gradient(120deg, rgba(255,62,200,.08), #FFFFFF 55%, rgba(34,211,238,.08)); }
[data-theme="light"] .vid-eyebrow{ color:#C0177E; }
[data-theme="light"] .ps-howto{ background:linear-gradient(150deg, rgba(10,120,200,.06), #FFFFFF 60%); border-color:rgba(10,120,200,.35); }
[data-theme="light"] .ps-howto summary{ color:var(--accent-ink); }
[data-theme="light"] .ps-read{ background:linear-gradient(150deg, rgba(19,138,71,.06), #FFFFFF 60%); }
[data-theme="light"] .ps-read summary{ color:var(--custom-accent); }
[data-theme="light"] .ps-tagline{ background:linear-gradient(90deg,#0A78C8,#8A3FD0,#C0177E); -webkit-background-clip:text; background-clip:text; }
[data-theme="light"] .ps-seg button[aria-selected="true"], [data-theme="light"] .ps-view button[aria-pressed="true"], [data-theme="light"] .go-btn.ps-calc{ color:#FFFFFF; background:linear-gradient(90deg,#0A78C8,#7A3FD0); }
[data-theme="light"] .ps-ans > span, [data-theme="light"] .gk-answer > span, [data-theme="light"] .gk-demo-answer span{ color:#FFFFFF; }
[data-theme="light"] .ps-assume .ps-a-v.na{ color:#8A90A0; }
[data-theme="light"] .mascot-menu, [data-theme="light"] .install-tip, [data-theme="light"] .autosuggest-list{ background:#FFFFFF; }
[data-theme="light"] .gk-alert.warn, [data-theme="light"] .ps-flags .warn{ background:#FFF7D6; border-color:#C99A00; }
[data-theme="light"] .gk-dialog::backdrop{ background:rgba(16,18,26,.45); }
[data-theme="light"] #unitsSlider::-webkit-slider-thumb{ box-shadow:0 0 0 3px rgba(16,18,26,0.15) !important; }
[data-theme="light"] .dl-glow-blend, [data-theme="light"] .dl-glow-brand{ box-shadow:none; }
[data-theme="light"] .install-glow{ box-shadow:none; background:linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(100deg, #0A78C8, #8A3FD0, #C0177E) border-box; }
[data-theme="light"] .install-label{ background:linear-gradient(100deg, #0A78C8 0%, #8A3FD0 50%, #C0177E 100%); -webkit-background-clip:text; background-clip:text; }

/* Vial Contents: peptide name drop-down (tap to see every peptide, type to narrow it) */
.custom-name-wrap{ display:block; }
input.custom-name-input{ padding-right:48px; min-height:48px; font-size:17px; }
input.custom-name-input::placeholder{ color:var(--text-faint); font-weight:500; }
.custom-name-drop{ position:absolute; top:0; right:0; width:46px; height:100%; border:0; border-left:1px solid var(--border); border-radius:0 6px 6px 0; background:transparent; cursor:pointer; }
.custom-name-drop::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-7px 0 0 -5px; border-right:2.5px solid var(--text-dim); border-bottom:2.5px solid var(--text-dim); transform:rotate(45deg); }
.autosuggest-list{ max-height:320px !important; }
.autosuggest-item{ min-height:48px; justify-content:center; }

/* Mascot: always says "Guides" so people know what it opens */
.mascot-fab-btn{ position:relative; overflow:visible !important; }
.mascot-fab-btn img{ border-radius:50%; }
.mascot-fab-label{ position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); padding:3px 9px; border-radius:999px; background:#FF3EC8; color:#FFFFFF; font-family:var(--font-body); font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.4); pointer-events:none; }
.mascot-menu{ width:280px !important; max-height:calc(100vh - 140px); overflow-y:auto; }
.mascot-menu-head{ font-size:12.5px !important; padding-top:10px !important; }
.mascot-menu-item{ display:block; min-height:44px; font-size:15px !important; text-decoration:none; line-height:1.35; }
[data-theme="light"] .mascot-menu-item{ color:var(--text-dim); }

/* ═══ GUIDES PAGE ═══ */
.gk-gbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; padding:12px 16px; border-radius:16px; border:1px solid var(--border); background:var(--bg-panel); }
.gk-gbar-back{ display:flex; align-items:center; gap:12px; min-height:48px; color:var(--text); text-decoration:none; }
.gk-gbar-back img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.gk-gbar-back span{ display:flex; flex-direction:column; }
.gk-gbar-back b{ font-family:var(--font-display); font-weight:400; font-size:19px; }
.gk-gbar-back small{ font-size:15px; color:var(--accent-ink); font-weight:600; }
.gk-gindex h1, .gk-guide-title{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(24px, 5vw, 32px); color:var(--text); line-height:1.2; }
.gk-gindex > p{ margin:8px 0 0; font-size:17px; color:var(--text-dim); }
.gk-gcards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin-top:20px; }
.gk-gcards a{ display:flex; flex-direction:column; gap:4px; min-height:84px; padding:16px 18px; border-radius:14px; border:1px solid var(--border); background:var(--bg-panel); color:var(--text); text-decoration:none; transition:border-color .15s ease, transform .15s ease; }
.gk-gcards a:hover{ border-color:var(--accent); transform:translateY(-1px); }
.gk-gcards a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.gk-gcards b{ font-size:17px; }
.gk-gcards small{ font-size:15px; color:var(--text-faint); line-height:1.4; }
.gk-gmain[hidden], .gk-gindex[hidden], .gk-guide[hidden]{ display:none; }
.gk-guide{ padding:24px; border-radius:16px; border:1px solid var(--border); background:var(--bg-panel); }
.gk-guide-title{ margin-bottom:6px; }
.gk-guide p, .gk-guide li{ font-size:17px !important; line-height:1.65 !important; color:var(--text-dim); max-width:70ch; }
.gk-guide p{ margin:14px 0 0; }
.gk-guide b{ color:var(--text); }
.gk-guide .steps-list li{ margin-bottom:10px; }
.gk-guide .ps-read-list li{ font-size:16.5px; }
.gk-guide .bloodwork-col li{ font-size:15.5px !important; }
.gk-guide .bloodwork-col h4{ font-size:14px; }
.gk-guide .doctor-textarea{ font-size:16px; }
.gk-guide a{ color:var(--accent-ink); }
.gk-gback{ display:inline-flex; align-items:center; margin:0 0 16px; text-decoration:none; font-size:15px; }
.gk-guide + .gk-gback, .gk-guide ~ .gk-gback:last-of-type{ margin:16px 0 0; }
@media (max-width:560px){ .gk-guide{ padding:18px 16px; } .gk-gbar .gk-prefs{ width:100%; justify-content:flex-start; } }

/* ═══ HERO: one promise, one main button; tools grouped on the right ═══ */
header.top .hero-left{ grid-template-areas:"brand install" "brand prefs" "brand big" !important; align-items:start; }
header.top .hero-left > .install-app-wrap{ align-self:end; }
header.top .hero-left > .gk-textsize{ justify-self:end; }
.gk-hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.gk-hero-start{ min-height:52px; padding:0 22px; font-size:16px; letter-spacing:.02em; text-transform:none; border-radius:12px; }
.gk-hero-demo{ min-height:52px; padding:0 18px; font-size:15.5px; border-radius:12px; display:inline-flex; align-items:center; gap:8px; }
header.top .byline{ margin-top:14px; }
@media (max-width:560px){
  header.top .gk-hero-cta{ grid-column:1 / -1; }
  .gk-hero-start, .gk-hero-demo{ flex:1 1 100%; justify-content:center; }
}
header.top .byline{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
header.top .byline .hub-link{ margin-left:0; }
header.top .gk-guides-link{ border-color:rgba(255,62,200,0.65); background:linear-gradient(100deg, rgba(255,62,200,0.22), rgba(200,107,255,0.22)); box-shadow:0 0 18px -6px rgba(255,62,200,0.7); }
header.top .gk-guides-link:hover{ border-color:#FF3EC8; box-shadow:0 0 24px -4px rgba(255,62,200,0.9); }
[data-theme="light"] header.top .gk-guides-link{ background:rgba(255,62,200,0.08); box-shadow:none; }
.gk-gtools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 6px; }
.gk-gtools .ghost-btn{ display:inline-flex; align-items:center; gap:8px; font-size:15px; }
/* Target Draw: mcg / mg switch sits right beside the dose box */
.gk-dose-unit{ display:inline-flex; gap:4px; }
.gk-dose-unit .chip-btn{ min-width:56px; justify-content:center; }
.gk-dose-hint{ display:block; margin:6px 0 0; }
input.target-input{ width:150px; }

/* ═══ HERO ART: insulin syringe ═══ */
header.top .hero-left{ grid-template-areas:"brand art" "brand install" "brand prefs" "brand big" !important; }
header.top .hero-left > .gk-hero-art{ grid-area:art; justify-self:end; }
.gk-hero-art{ margin:0; width:min(440px, 100%); }
.gk-hero-art svg{ display:block; width:100%; height:auto; overflow:visible; filter:drop-shadow(0 14px 28px rgba(200,107,255,.28)); }
@media (prefers-reduced-motion: no-preference){
  .gkh-fill{ transform-origin:136px 118px; animation:gkh-fill 1.6s cubic-bezier(.4,0,.2,1) .2s both; }
  .gkh-stopper, .gkh-rod, .gkh-thumb{ animation:gkh-pull 1.6s cubic-bezier(.4,0,.2,1) .2s both; }
  .gkh-chip{ animation:gkh-pop .5s ease 1.7s both; }
}
@keyframes gkh-fill{ from{ transform:scaleX(.08); } to{ transform:scaleX(1); } }
@keyframes gkh-pull{ from{ transform:translateX(-86px); } to{ transform:none; } }
@keyframes gkh-pop{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
[data-theme="light"] .gk-hero-art svg{ filter:drop-shadow(0 12px 22px rgba(10,120,200,.22)); }
[data-theme="light"] .gk-hero-art .gkh-tick, [data-theme="light"] .gk-hero-art g[stroke="#E8ECF5"]{ stroke:#596173; }
[data-theme="light"] .gk-hero-art g[fill="#E8ECF5"], [data-theme="light"] .gk-hero-art text[fill="#E8ECF5"]{ fill:#363D4F; }
[data-theme="light"] .gk-hero-art rect[stroke="#E8ECF5"]{ stroke:#8A90A0; }
@media (max-width:900px){ header.top .hero-left > .gk-hero-art{ width:min(360px, 100%); } }
@media (max-width:560px){ header.top .hero-left > .gk-hero-art{ flex:1 1 100%; width:100%; justify-self:center; margin:0 0 6px; } }

/* ═══ PORTRAIT PHONES: shorter header so the calculator starts sooner ═══ */
@media (max-width:560px){
  header.top{ padding:16px 14px !important; }
  header.top .brand p{ font-size:15.5px; margin-top:10px; }
  .gk-hero-cta{ margin-top:12px; gap:8px; }
  .gk-hero-start, .gk-hero-demo{ min-height:48px; }
  header.top .byline{ gap:8px; font-size:12.5px; }
  header.top .byline .hub-link{ min-height:40px; padding:0 12px; font-size:13px; letter-spacing:.04em; }
  header.top .hero-left > .gk-hero-art{ margin:2px 0 0; }
  header.top .hero-left{ gap:8px !important; }
  header.top .hero-left > .gk-prefs{ flex:1 1 auto !important; width:auto; }
  header.top .gk-textsize{ min-height:46px; padding:0 8px !important; font-size:0 !important; gap:0 !important; }
  header.top .gk-textsize .gk-a{ font-size:15.5px; }
  .gk-lang{ min-height:46px; }
  .gk-start-sub{ font-size:14px; }
}
@media (max-width:380px){
  .gk-pick{ grid-template-columns:1fr; }
  .gk-pick button{ min-height:60px; }
  .gk-theme button{ width:38px; }
}
@media (max-width:560px){
  header.top .hero-left > .gk-textsize{ flex:0 0 auto !important; width:auto !important; margin:0 !important; }
  header.top .hero-left > .gk-prefs{ flex:0 1 auto !important; }
}