/* Look of qrz.n6uwu.com. Copy lives in index.html; nothing in this file is copy. */
html,body{margin:0;padding:0;background:transparent}
#n6uwu *{box-sizing:border-box}
#n6uwu{
  /* Sorbet, exact values from ~/.config/colors.sh */
  --bg:#161821; --ink:#d7d7ff; --sec:#9a9db4; --rule:#34304a; --hair:#262838;
  --purple:#af87d7; --purple-hi:#d787ff; --pink:#d787af; --pink-hi:#ff87d7;
  --green:#87d75f; --blue:#87afd7; --yellow:#d7af5f;
  --sans:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --cond:'IBM Plex Sans Condensed','IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.65; margin:0 auto 1.5em; padding:0 0 16px; max-width:1000px;
  border:1px solid var(--rule); border-radius:18px; overflow:hidden;
  box-sizing:border-box; /* the 1000px cap must include the border, or the page is 2px taller above it and the spacer fit refuses */
}
#n6uwu ::selection{background:var(--pink); color:var(--bg)}
#n6uwu p{margin:0 0 .9em; max-width:66ch}
#n6uwu a{color:var(--purple-hi); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; text-decoration-color:#7a5a9c}
#n6uwu a:hover{text-decoration-color:var(--pink-hi)}
#n6uwu strong{color:#fff}
#n6uwu .pad{padding:0 33px 0 26px}

/* masthead: night sky */
#n6uwu .mast{position:relative; padding:30px 26px 0; color:var(--ink);
  background:
    radial-gradient(120% 140% at 85% -20%, #33214f 0%, #1e1a30 45%, var(--bg) 80%)}
#n6uwu .sky{position:absolute; top:0; right:0; width:300px; height:74px; pointer-events:none;
  font-size:11px; line-height:1}
#n6uwu .sky span{position:absolute; color:var(--pink-hi)}
#n6uwu .sky span:nth-child(3n){color:var(--purple-hi)} #n6uwu .sky span:nth-child(4n){color:#fff}
#n6uwu .mastrow{position:relative; display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:8px 24px}
#n6uwu .call{font-family:var(--cond); font-weight:700; font-size:clamp(42px,9vw,76px);
  line-height:.9; letter-spacing:.005em; margin:0; color:#fff;
  text-shadow:0 0 22px rgba(175,135,215,.45)}
#n6uwu .call .uwu{color:var(--pink-hi); text-shadow:0 0 22px rgba(255,135,215,.55)}
#n6uwu .call .bat{width:.62em; height:.31em; margin-left:.16em; vertical-align:.52em;
  fill:var(--purple); transform:rotate(-8deg)}
#n6uwu .qth{font-family:var(--mono); font-size:13px; color:var(--sec);
  text-align:right; line-height:1.5; padding-bottom:6px}
#n6uwu .qth b{display:block; color:var(--ink); font-weight:400; font-family:var(--sans)}
#n6uwu .qth .moonwrap{position:relative; display:block; width:30px; height:30px; margin:0 0 8px auto}
#n6uwu .qth .moon{position:relative; display:block; width:30px; height:30px; fill:#f3e9c6}
/* underglow: a second moon sits exactly under the first and carries the glow, which hugs the
   crescent. Only that copy flickers (n6candle, generated into sky.css, brightness only); the
   moon on top holds still and hides the copy's own shape. */
#n6uwu .qth .moonglow{position:absolute; inset:0; width:30px; height:30px; fill:#f3e9c6;
  filter:drop-shadow(0 0 8px rgba(243,233,198,.95));
  animation:n6candle var(--candle-loop,8.4s) linear infinite}
@media (prefers-reduced-motion:reduce){#n6uwu .qth .moonglow{animation:none; opacity:.65}}
#n6uwu .status{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0;
  border-top:1px dashed var(--rule); padding:13px 0 15px;
  font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums}
#n6uwu .status span{border:1px solid currentColor; border-radius:999px; padding:1px 11px 2px;
  color:var(--purple); background:rgba(175,135,215,.09)}
#n6uwu .status span:nth-child(1){color:var(--green); background:rgba(135,215,95,.08)}
#n6uwu .status span:nth-child(2){color:var(--pink-hi); background:rgba(255,135,215,.08)}
#n6uwu .status span:nth-child(3){color:var(--blue); background:rgba(135,175,215,.08)}
#n6uwu .status b{font-weight:400}

/* twinkle: a recorded chaotic attractor, not a timer. cmd/sky simulates a double-scroll circuit
   and bakes a stretch of it into sky.css as keyframes: n6x is the x output (lingers on one lobe,
   then flips to the other), n6y the y output (the orbit itself). Each star reads one of them from
   its own point on the trajectory. --b is a star's brightness, 0..1; --bloom is how far past .7
   it is, and drives the underglow. CI writes a new sky.css on every build. */
@property --b{syntax:"<number>"; inherits:false; initial-value:.7}
#n6uwu .tw{display:inline-block; --bloom:max(0, calc((var(--b) - .7) * 3.3));
  opacity:calc(.16 + .84 * var(--b)); transform:scale(calc(1 + .28 * var(--bloom)));
  text-shadow:0 calc(var(--bloom) * 1px) calc(var(--bloom) * 5px) currentColor,
    0 calc(var(--bloom) * 2px) calc(var(--bloom) * 13px) currentColor;
  animation:n6x var(--sky-loop,264s) linear infinite}
#n6uwu .sky .tw:nth-child(1){animation-name:n6x; animation-delay:0s}
#n6uwu .sky .tw:nth-child(2){animation-name:n6y; animation-delay:-41s}
#n6uwu .sky .tw:nth-child(3){animation-name:n6x; animation-delay:-97s}
#n6uwu .sky .tw:nth-child(4){animation-name:n6y; animation-delay:-143s}
#n6uwu .sky .tw:nth-child(5){animation-name:n6x; animation-delay:-188s}
#n6uwu .sky .tw:nth-child(6){animation-name:n6y; animation-delay:-229s}
#n6uwu .sign .tw:nth-of-type(1){animation-name:n6y; animation-delay:-17s}
#n6uwu .sign .tw:nth-of-type(2){animation-name:n6x; animation-delay:-64s}
#n6uwu .sign .tw:nth-of-type(3){animation-name:n6y; animation-delay:-118s}
#n6uwu .sign .tw:nth-of-type(4){animation-name:n6x; animation-delay:-171s}
@media (prefers-reduced-motion:reduce){#n6uwu .tw{animation:none}}

/* sections: headstones. Arched top, engraved inner line, a plinth, the name cut across the top */
#n6uwu .sec{position:relative; border:2px solid var(--purple); border-bottom-width:6px;
  border-radius:64px 64px 8px 8px; background:var(--bg); box-shadow:6px 7px 0 #3b2a5c;
  padding:34px 30px 24px; margin:26px 0 28px}
#n6uwu .sec::after{content:""; position:absolute; inset:6px; border:1px solid #3b2a5c;
  border-radius:57px 57px 3px 3px; pointer-events:none}
/* cameo on the crown of the arch */
#n6uwu .sec::before{content:""; position:absolute; top:-12px; left:50%; width:50px; height:22px;
  margin-left:-25px; z-index:1; background:var(--bg) center no-repeat}
#n6uwu .sec.o-heart::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 30 28'%3E%3Cpath d='M13 22C5 16 1.5 12 1.5 7.5A5.8 5.8 0 0 1 13 5a5.8 5.8 0 0 1 11.5 2.5C24.5 12 21 16 13 22Z' fill='%23000' stroke='%23ff87d7' stroke-linejoin='round' stroke-width='2.6'/%3E%3C/svg%3E"); background-size:17px 16px}
#n6uwu .sec.o-bat::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M32 9 34 4C34.5 7 35.5 9.5 37 11 42 7 50 5 60 6 56 9 54 12 54 16 51 14 48 14 46 17 44 14.5 41 14.5 39 17 37 20 34 24 32 27 30 24 27 20 25 17 23 14.5 20 14.5 18 17 16 14 13 14 10 16 10 12 8 9 4 6 14 5 22 7 27 11 28.5 9.5 29.5 7 30 4Z' fill='%23000' stroke='%23ff87d7' stroke-linejoin='round' stroke-width='3.4'/%3E%3C/svg%3E"); background-size:34px 18px}
#n6uwu .sec.o-ghost::before{top:-14px; height:26px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 33'%3E%3Cpath d='M15 3C9 3 6.5 7.5 6.5 12.5 6.5 15.5 5 17.5 2.500 18.500 4.500 20.300 7 20.200 8.300 19 8.300 22.500 10 25.500 13.500 27 17.500 28.700 22.500 27.500 28 30.500 26 27.500 24.500 24.500 23.800 20.500 23.700 20 23.700 19.500 23.700 19 25 20.200 27.500 20.300 29.500 18.500 27 17.500 23.500 15.500 23.500 12.500 23.500 7.500 21 3 15 3Z' fill='%23000' stroke='%23ff87d7' stroke-linejoin='round' stroke-width='2.1'/%3E%3Cellipse cx='11.800' cy='11.500' rx='1.700' ry='2.500' fill='%23ff87d7'/%3E%3Cellipse cx='18.200' cy='11.500' rx='1.700' ry='2.500' fill='%23ff87d7'/%3E%3Cellipse cx='15' cy='18' rx='1.900' ry='2.700' fill='%23ff87d7'/%3E%3C/svg%3E"); background-size:24px 25px}
#n6uwu .sec.o-moon::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M21 3a13 13 0 1 0 8 19A11 11 0 0 1 21 3z' fill='%23000' stroke='%23ff87d7' stroke-linejoin='round' stroke-width='2.8'/%3E%3C/svg%3E"); background-size:18px 18px}
#n6uwu .sec h2{font-family:var(--cond); font-weight:700; font-size:21px; letter-spacing:.04em;
  line-height:1.25; margin:0 0 18px; padding-bottom:14px; color:var(--pink); text-align:center;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  border-bottom:1px dashed var(--rule)}
#n6uwu .sec h2::before,#n6uwu .sec h2::after{content:"\2726"; color:var(--purple);
  font-size:.6em; margin:0 .8em; order:1; position:relative; top:-.25em}
#n6uwu .sec h2::before{order:0}
#n6uwu .sec h2 small{flex-basis:100%; order:2; font-family:var(--mono); font-weight:400; letter-spacing:0;
  font-size:11.5px; color:var(--sec); margin-top:4px}
#n6uwu .sec p,#n6uwu .sec .reach{max-width:660px; margin-left:auto; margin-right:auto}

/* station rows */
#n6uwu dl{margin:0; display:grid; grid-template-columns:max-content 1fr}
#n6uwu dt,#n6uwu dd{margin:0; padding:7px 0; border-bottom:1px solid var(--hair)}
#n6uwu dt{font-size:13px; font-weight:600; color:var(--purple); padding-right:28px}
#n6uwu dd{font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums}
#n6uwu dd .hi{color:var(--pink-hi); font-weight:600}
#n6uwu dl > :nth-last-child(-n+2){border-bottom:0}

/* media */
#n6uwu .shots{display:flex; flex-wrap:wrap; gap:24px; padding:6px 34px 22px 26px}
#n6uwu .shots img{flex:1 1 250px; width:100%; min-width:0; height:auto; display:block;
  border:3px solid var(--pink-hi); border-radius:18px; box-shadow:7px 8px 0 var(--purple)}
#n6uwu .shots img:nth-child(2n){border-color:var(--purple-hi); box-shadow:7px 8px 0 var(--pink)}
#n6uwu figure{margin:14px 0 0}
#n6uwu figure img{display:block; width:100%; height:auto; border:3px solid var(--pink-hi);
  border-radius:14px; box-shadow:6px 7px 0 var(--purple)}
#n6uwu figure{padding-right:7px}
#n6uwu figcaption{font-family:var(--mono); font-size:11.5px; color:var(--sec); margin-top:17px}

#n6uwu .reach{margin:12px 0 0; font-family:var(--mono); font-size:13.5px;
  display:flex; flex-wrap:wrap; gap:4px 30px}
#n6uwu .reach i{font-style:normal; font-family:var(--sans); font-size:13px;
  font-weight:600; color:var(--purple); margin-right:9px}

#n6uwu .pota{overflow:auto; margin:2px 0 0}
#n6uwu .pota iframe{display:block; width:720px; min-width:720px; margin:0 auto; border:0}

@media (max-width:560px){
  #n6uwu .sec{border-radius:44px 44px 8px 8px; padding:30px 18px 20px}
  #n6uwu .sec::after{border-radius:37px 37px 3px 3px}
  #n6uwu .qth{text-align:left}
  #n6uwu .qth .moonwrap{margin-left:0}
}

#n6uwu .sign{font-family:var(--mono); font-size:12.5px; color:var(--sec); text-align:center;
  margin:0; padding:6px 26px 0; max-width:none}
#n6uwu .sign b{font-weight:400; color:var(--pink)}
#n6uwu .sign .s1{color:var(--purple)} #n6uwu .sign .s2{color:var(--pink-hi)}
#n6uwu .heart{width:13px; height:12px; fill:#000; stroke:var(--pink-hi); stroke-width:2.5; vertical-align:-1px; margin:0 .55em; overflow:visible}
#n6uwu .call .heart{width:.26em; height:.24em; stroke-width:2; vertical-align:.5em; margin:0 0 0 .12em}
#n6uwu .sign .bat{width:22px; height:11px; fill:var(--purple); vertical-align:-1px; margin:0 .5em}