/* Skydoge live chain explorer - the skydoge.net HUD identity.
   bg #040405  panel rgba(16,17,20,.72)  text #eef1f5  dim #9aa1ac
   silver #dfe3e9 / #ffffff  line rgba(235,238,245,.22)
   accents, used for state and never for decoration:
     cyan  #37f2ff  a transaction still waiting
     amber #f6b94a / #ffd98a  drivechain escrow, the Thunder branch
     red   #ff3860  something is wrong

   Type comes from fonts.css, which self-hosts the same three faces the rest
   of the site does. Every rule names a system fallback after them.

   Literal colours everywhere: no custom-property-only colours, no grid
   dependency for the critical layout, backdrop-filter is decoration only.
   The palette is the one skydoge.net publishes as its custom properties; it
   is written out longhand here because this page still has to render on
   browsers that have never heard of var(). */

html, body { height: 100%; margin: 0; padding: 0; }
body {
  background: #040405;
  color: #eef1f5;
  font-family: "Share Tech Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: .01em;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* the whole layout is written in border-box widths, so the prefix is not
   decoration: Firefox only took the unprefixed property at 29, and every
   padded box on the page - the top bar, the panel, the HUD rows - is the
   wrong size without it */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a { color: #dfe3e9; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: underline; }
code, .mono, .tip, .legend, .bar .search input, .pbody { font-family: "Share Tech Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; }
.hud, .phead b, .brand b, .fallback h2, .pbody h3, .conn, .search button { font-family: "Orbitron", "Segoe UI", Helvetica, Arial, sans-serif; }
button { font: inherit; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #060608; }
::-webkit-scrollbar-thumb { background: #4a4f57; border: 1px solid #000; }
::-webkit-scrollbar-thumb:hover { background: #b9bec7; }
::-moz-selection { background: #dfe3e9; color: #101114; }
::selection { background: #dfe3e9; color: #101114; }

.noscript { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: #eef1f5; padding: 20px; }

/* ---------- stage ---------- */
#stage {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #040405;
  background: radial-gradient(1200px 800px at 50% 38%, #101114 0%, #08080a 55%, #010102 100%);
  cursor: grab;
  overflow: hidden;
}
#stage.dragging { cursor: grabbing; }
#stage.hover { cursor: pointer; }
#scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#scene canvas { display: block; width: 100%; height: 100%; touch-action: none; -ms-touch-action: none; }
#labels { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
/* the floating readouts are the one place the CRT face earns its keep: it is
   drawn small and thin, so it is set larger here than the surrounding mono */
.lbl {
  position: absolute; left: 0; top: 0;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  font-family: "VT323", "Share Tech Mono", "Courier New", monospace;
  font-size: 15px; letter-spacing: .10em; white-space: nowrap;
  color: rgba(238,241,245,.92); text-shadow: 0 0 8px rgba(235,238,245,.5), 0 1px 2px #000;
  pointer-events: none;
}
.lbl.big { font-size: 17px; color: #ffffff; text-shadow: 0 0 10px rgba(235,238,245,.8), 0 0 24px rgba(235,238,245,.35), 0 1px 2px #000; }
.lbl.gold { color: #ffd98a; text-shadow: 0 0 10px rgba(246,185,74,.55), 0 1px 2px #000; }
.lbl.dim { color: rgba(154,161,172,.95); text-shadow: 0 0 6px rgba(235,238,245,.25), 0 1px 2px #000; }
.lbl small { display: block; font-size: 13px; letter-spacing: .07em; color: rgba(154,161,172,.95); }
/* the knight standing on the chain tip. Desaturated to the HUD's own silver
   so it never out-contrasts a block edge or a label, and given a drop shadow
   so it still separates from a bright cube edge. The filter is static, so it
   is not re-evaluated as the sprite moves. transform-origin is its feet: the
   lean on the hop turns about the ground, not about its middle. */
.tk {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none;
  -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
  -webkit-filter: grayscale(1) brightness(1.3) contrast(.92) drop-shadow(0 1px 2px #000);
  filter: grayscale(1) brightness(1.3) contrast(.92) drop-shadow(0 1px 2px #000);
}
/* ---------- the moon ----------
   Scenery, and the first child of #labels so it paints behind every readout:
   nothing on this page may be covered by scenery. Silver, like the stars it
   sits among - no hue is spent on it - and it only brightens when a
   withdrawal has actually been carried all the way up to it. */
.moon {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 1;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255,255,255,.95) 0%, rgba(223,227,233,.72) 42%, rgba(154,161,172,.38) 72%, rgba(154,161,172,0) 100%);
  box-shadow: 0 0 26px rgba(223,227,233,.22);
}
.moon.hit { box-shadow: 0 0 60px rgba(255,255,255,.85), 0 0 140px rgba(235,238,245,.45); }
.moonr {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 4;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  -o-object-fit: contain; object-fit: contain;
  -webkit-filter: grayscale(1) brightness(1.3) drop-shadow(0 1px 2px #000);
  filter: grayscale(1) brightness(1.3) drop-shadow(0 1px 2px #000);
}

/* ---------- the sky ----------
   Three occasional visitors - an aurora, an asteroid field, a rocket to Mars -
   and one permanent small red disc. All of it is scenery in #labels, all of it
   below the moon's z-index 1, and none of it moves except on an event: a cue
   in the sonata, or a click. Every colour here is either the page's own
   silver/dim ink or one of two audited exceptions: the aurora wash (hue ~143
   degrees, saturation capped at 16% - a translucent sky veil, nowhere near the
   rplant mint's 52%-saturated block-scale solid) and Mars brick #b1502e (hue
   ~15 degrees; amber sits at ~39, the rose pool tint at ~351 - measured, not
   eyeballed). No CSS animation anywhere in this section: everything is
   value-driven from app.js so it stops dead with the event that drove it. */
#aurora { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.aurray {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none;
  width: 16px; height: 220px; margin-left: -8px; margin-top: -220px;
  -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
/* three pre-baked skirts: softness lives in the stops, not in a filter, so an
   old GPU pays for a textured quad and nothing else. Every stop sits on the
   segment silver #dfe3e9 -> rgb(202,238,216) - HSV saturation <= 16%. */
.aurg0 { background: linear-gradient(to bottom, rgba(202,238,216,0) 0%, rgba(212,232,224,.10) 45%, rgba(202,238,216,.55) 85%, rgba(223,227,233,.20) 93%, rgba(223,227,233,0) 100%); }
.aurg1 { background: linear-gradient(to bottom, rgba(212,232,224,0) 0%, rgba(212,232,224,.14) 52%, rgba(202,238,216,.48) 84%, rgba(223,227,233,.16) 94%, rgba(223,227,233,0) 100%); }
.aurg2 { background: linear-gradient(to bottom, rgba(202,238,216,0) 0%, rgba(223,227,233,.08) 40%, rgba(202,238,216,.60) 86%, rgba(212,232,224,.18) 92%, rgba(212,232,224,0) 100%); }
.mars {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 0;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, rgba(177,80,46,.95) 0%, rgba(177,80,46,.75) 55%, rgba(177,80,46,0) 100%);
}
.skyrock {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 2;
  width: 24px; height: 24px; margin-left: -12px; margin-top: -12px;
  -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
.skyrock svg { display: block; width: 100%; height: 100%; }
.skydust {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 2;
  width: 240px; height: 150px; margin-left: -120px; margin-top: -75px;
  background: radial-gradient(ellipse at center, rgba(154,161,172,.08) 0%, rgba(154,161,172,0) 70%);
}
.rktnode {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none; z-index: 2;
  -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
.rktpad {
  color: #9aa1ac; font-family: "Share Tech Mono", Menlo, Consolas, monospace; font-size: 8px;
  letter-spacing: .08em; border-top: 2px solid rgba(154,161,172,.7); padding-top: 1px; text-align: center; width: 34px;
  margin-left: -17px;
}
.rktring { border: 1px solid rgba(223,227,233,.6); border-radius: 50%; }
.rktpuff { border-radius: 50%; background: radial-gradient(circle, rgba(154,161,172,.5) 0%, rgba(154,161,172,0) 70%); }
/* the sky chooser, modelled on .vfpick but anchored under its button */
.skypick {
  position: absolute; z-index: 12; min-width: 168px;
  background: rgba(10,10,12,.96); border: 1px solid rgba(235,238,245,.28); border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
}
.skypicki {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid rgba(235,238,245,.08);
  color: #d9dde4; font-family: "Share Tech Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .04em; padding: 7px 10px; white-space: nowrap;
}
.skypicki:last-child { border-bottom: 0; }
.skypicki:hover { background: rgba(235,238,245,.10); color: #ffffff; }
.skypicki.on { color: #ffffff; background: rgba(235,238,245,.06); }
/* the sonata button's crescent: inline SVG in currentColor, so it takes the
   .tb.key rest/hover states exactly like the letters do - a colour-emoji font
   would ignore CSS colour and sit off the mono baseline */
.moonglyph { vertical-align: -1px; margin-right: 6px; }

/* one doge per pool, standing on the newest block that pool mined. Treated
   exactly like the knight - desaturated to the HUD's silver so it never
   out-contrasts a block edge, and static unless something happened. */
.pdoge {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none;
  -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
  -o-object-fit: contain; object-fit: contain;
  -webkit-filter: grayscale(1) brightness(1.25) contrast(.92) drop-shadow(0 1px 2px #000);
  filter: grayscale(1) brightness(1.25) contrast(.92) drop-shadow(0 1px 2px #000);
}
/* THE ONE PLACE COMIC SANS APPEARS IN THIS PRODUCT. It is the doge's voice
   and nothing else's: it is never used for a number, a label or a control,
   and it is on screen for about two seconds an hour. Colour comes from the
   pool that said it, which is the same colour its blocks are drawn in. */
.say {
  position: absolute; left: 0; top: 0; display: none; pointer-events: none;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Segoe Print", cursive;
  font-size: 13px; letter-spacing: .01em; white-space: nowrap;
  text-shadow: 0 1px 3px #000, 0 0 12px rgba(0,0,0,.95);
}
@media (prefers-reduced-motion: reduce) { .say { display: none !important; } }
.scan {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.18) 3px 4px);
}
/* the vignette is what keeps the scene from flattening into a grey field now
   that the chain itself is silver rather than green */
.vig {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(0,0,0,.72) 100%);
}
@media (prefers-reduced-motion: reduce) { .scan { display: none; } }

/* ---------- the video floor (click to play; created from script) ----------
   The three-element stack is the standard CSS3DRenderer arrangement for a
   single plane: a perspective wrapper, a camera element carrying the view
   matrix, and the plane itself carrying its own world matrix. Both wrapper
   and camera element are sized in explicit pixels from script, because the
   projection depends on their default 50% 50% origins landing on the centre
   of the viewport. None of this exists in the document until the button is
   pressed. */
#vfCss {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden; pointer-events: none;
}
#vfCam, #vfPlane {
  position: absolute; top: 0; left: 0;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
}
#vfPlane {
  overflow: hidden; border-radius: 2px; background: #050506; opacity: .82;
  box-shadow: 0 0 60px 10px rgba(0,0,0,.55);
}
/* Every piece of chrome an embed can still draw over the picture sits at the
   edges: the title bar along the top, the watermark bottom right, the paused
   vignette, the end cards. None of it can be turned off by parameter with any
   guarantee. So the frame is oversized and re-centred inside the plane, which
   is already overflow:hidden, and the crop takes the chrome with it. */
#vfPlane iframe { position: absolute; top: -14%; left: -14%; width: 128%; height: 128%; border: 0; display: block; }
/* the local clip is portrait and the plane is 16:9, so it is cropped to fill
   rather than letterboxed */
#vfPlane video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
/* the layer itself is pointer-events:none, so every control is out of band */
.vfbar {
  position: absolute; left: 50%; bottom: 34px; z-index: 9;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  max-width: 92%; padding: 5px 8px;
  background: rgba(16,17,20,.86); border: 1px solid rgba(235,238,245,.22); border-radius: 2px;
  box-shadow: 0 0 30px rgba(235,238,245,.07), inset 0 0 40px rgba(34,36,40,.4);
}
.vft.pickable { cursor: pointer; border-bottom: 1px dotted rgba(235,238,245,.35); }
.vft.pickable:hover { color: #ffffff; border-bottom-color: rgba(235,238,245,.7); }
/* the chooser opens upward off the bar: the bar sits low on a desktop, and on a
   phone it is docked under the toolbar where there is room below it either way */
.vfpick {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 6px; z-index: 10;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  min-width: 220px; max-width: 78vw; max-height: 46vh; overflow-y: auto;
  background: rgba(10,10,12,.96); border: 1px solid rgba(235,238,245,.28); border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
}
.vfpicki {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid rgba(235,238,245,.08);
  color: #d9dde4; font-family: "Share Tech Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .04em; padding: 7px 10px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.vfpicki:last-child { border-bottom: 0; }
.vfpicki:hover { background: rgba(235,238,245,.10); color: #ffffff; }
.vfpicki.on { color: #ffffff; background: rgba(235,238,245,.06); }
@media (max-width: 760px) { .vfpick { bottom: auto; top: 100%; margin: 6px 0 0; } }

.vfbar .vft {
  font-family: "Share Tech Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 11px; letter-spacing: .06em; color: #dfe3e9;
  margin: 0 8px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The bar carries a transport now, so it wraps instead of overflowing: on a
   narrow window it becomes two rows, and on a phone - where it is docked
   under the toolbar - the rows grow down into empty sky rather than toward
   the HUD and the legend at the bottom edge. */
.vfbar { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.vfbar .tb { margin: 2px 0 2px 6px; }
.vfbar .tb.sm { padding: 4px 7px; letter-spacing: .06em; }
/* A control with no player behind it is dimmed, not hidden and not silently
   dead: the local clip has no API, so seeking and pausing are things this bar
   cannot do, and it says so rather than swallowing the click. */
.vfbar .tb[disabled], .vfbar .tb[disabled]:hover {
  opacity: .34; cursor: default; color: #9aa1ac; border-color: rgba(235,238,245,.14); text-shadow: none; background: rgba(10,10,12,.5);
}
.vfgap { display: block; width: 8px; }
/* the two rails - seek and volume - are the replay scrubber's idiom at two
   widths, so a position in a span is drawn one way across the whole page */
.vftrk {
  position: relative; display: block; -webkit-box-flex: 0; -ms-flex: 0 0 118px; flex: 0 0 118px;
  height: 10px; margin: 0 8px; cursor: pointer;
  border: 1px solid rgba(235,238,245,.22); background: rgba(10,10,12,.7);
}
.vftrk i { display: block; height: 100%; width: 0; background: rgba(223,227,233,.40); }
.vftrk b { position: absolute; top: -3px; left: 0; width: 2px; height: 14px; margin-left: -1px; background: #ffffff; box-shadow: 0 0 8px rgba(235,238,245,.9); }
.vftrk.vol { -ms-flex: 0 0 62px; flex: 0 0 62px; margin: 0 6px 0 0; }
.vftrk.vol b { display: none; }
/* A rail with nothing honest to draw is not drawn. The player reports no
   duration for a live stream, and none for any video until it has described
   itself; a scrub bar filled from a guess would be a measurement that is not
   one, so it goes away and the elapsed figure stands alone. */
.vftrk.off { display: none; }
.vftime {
  font-family: "Share Tech Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 11px; letter-spacing: .04em; color: #eef1f5; white-space: nowrap;
  min-width: 76px; text-align: center;
}
.vftime em { font-style: normal; color: #9aa1ac; }

/* The queue, kept on screen. z-index 7 puts it under the detail panel (8) and
   the toolbar (10) and over the scene: a block that has been clicked covers
   it the same way it covers the HUD, rather than the two fighting. */
.vflist {
  position: absolute; right: 14px; top: 60px; z-index: 7; width: 236px; max-height: 44vh; overflow-y: auto;
  background: rgba(16,17,20,.90); border: 1px solid rgba(235,238,245,.22); border-radius: 2px;
  box-shadow: 0 0 30px rgba(235,238,245,.07), inset 0 0 40px rgba(34,36,40,.4);
}
.vflh {
  position: relative; padding: 6px 26px 6px 10px; border-bottom: 1px solid rgba(235,238,245,.16);
  font-family: "Orbitron", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
}
.vflh b { color: #ffffff; font-weight: 400; text-shadow: 0 0 10px rgba(235,238,245,.5); }
.vflh span { color: #4a4f57; margin-left: 8px; }
.vflx {
  position: absolute; right: 4px; top: 3px; cursor: pointer; background: none; border: 0;
  color: #4a4f57; font-size: 14px; line-height: 1; padding: 2px 5px;
}
.vflx:hover { color: #ffffff; }
.vfli {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid rgba(235,238,245,.06);
  color: #9aa1ac; font-family: "Share Tech Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .04em; padding: 6px 10px 6px 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* the index column is fixed width so the labels line up and the current track
   can swap its number for a play mark without the row shifting */
.vfli i { display: inline-block; width: 22px; text-align: center; font-style: normal; color: #4a4f57; }
.vfli:last-child { border-bottom: 0; }
.vfli:hover { background: rgba(235,238,245,.10); color: #ffffff; }
.vfli.on { color: #ffffff; background: rgba(235,238,245,.06); }
.vfli.on i { color: #ffffff; text-shadow: 0 0 8px rgba(235,238,245,.7); }

/* ---------- tooltip ---------- */
.tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(16,17,20,.92); border: 1px solid rgba(235,238,245,.22); border-radius: 2px;
  padding: 8px 10px; font-size: 12px; line-height: 1.55; color: #eef1f5; max-width: 300px;
  box-shadow: 0 0 24px rgba(235,238,245,.10), inset 0 0 40px rgba(34,36,40,.4);
}
.tip b { color: #ffffff; font-weight: 400; text-shadow: 0 0 10px rgba(235,238,245,.5); }
.tip .t2 { color: #9aa1ac; }

/* ---------- top bar ---------- */
.bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  padding: 9px 14px;
  background: rgba(4,4,5,.82);
  border-bottom: 1px solid rgba(235,238,245,.22);
}
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .bar { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(4,4,5,.7); }
}
.brand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 14px; white-space: nowrap; }
.brand b { font-weight: 900; letter-spacing: .24em; color: #f2f5f8; text-shadow: 0 0 12px rgba(235,238,245,.55), 0 0 34px rgba(235,238,245,.22); font-size: 15px; }
.brand-sub { margin-left: 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #4a4f57; }
.conn { margin-left: 10px; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; border: 1px solid rgba(246,185,74,.5); color: #f6b94a; }
.conn.live { border-color: rgba(235,238,245,.5); color: #f2f5f8; background: rgba(235,238,245,.08); text-shadow: 0 0 8px rgba(235,238,245,.8); }
.conn.poll { border-color: rgba(235,238,245,.35); color: #dfe3e9; }
.conn.down { border-color: rgba(255,56,96,.6); color: #ff3860; }
.conn.replay { border-color: #dfe3e9; background: #dfe3e9; color: #101114; text-shadow: none; }
.search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 200px; flex: 1 1 200px; max-width: 520px; margin: 0 8px; }
.search input {
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 60px;
  background: rgba(10,10,12,.8); border: 1px solid rgba(235,238,245,.22); border-right: 0; border-radius: 2px 0 0 2px;
  color: #eef1f5; padding: 6px 10px; font-size: 12.5px; outline: none;
}
.search input::-webkit-input-placeholder { color: #4a4f57; }
.search input:-ms-input-placeholder { color: #4a4f57; }
.search input::-moz-placeholder { color: #4a4f57; opacity: 1; }
.search input:focus { border-color: rgba(235,238,245,.5); box-shadow: 0 0 12px rgba(235,238,245,.18); }
.search button {
  background: #dfe3e9; color: #101114; border: 1px solid #dfe3e9; border-radius: 0 2px 2px 0;
  padding: 6px 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; cursor: pointer;
}
.search button:hover { background: #ffffff; border-color: #ffffff; }
.controls { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: auto; }
.tb {
  cursor: pointer; margin-left: 6px; border: 1px solid rgba(235,238,245,.22); border-radius: 2px; background: rgba(10,10,12,.5);
  color: #9aa1ac; font-family: "Share Tech Mono", Menlo, Consolas, "Courier New", monospace; font-size: 11.5px; letter-spacing: .12em; padding: 4px 10px; text-transform: uppercase;
}
.tb:hover, .tb.on { color: #ffffff; border-color: rgba(235,238,245,.5); text-shadow: 0 0 10px rgba(235,238,245,.6); }
.tb.on { background: rgba(235,238,245,.10); }
/* "play a song" is the one control meant to be noticed without being hunted
   for, so it rests at the brightness the others only reach on hover. No new
   hue - the palette spends colour on state, and amber and cyan are spoken
   for - just more of the silver that is already here. */
.tb.key { color: #dfe3e9; border-color: rgba(235,238,245,.44); }
/* the payout address beside an unclaimed block's question mark. Dim silver,
   never a pool hue - it identifies a payee, not a brand - and inert, so it
   cannot steal a click meant for the block behind it. */
.bmaddr {
  position: absolute; z-index: 4; pointer-events: none; white-space: nowrap;
  transform: translate(0,-50%); -webkit-transform: translate(0,-50%);
  font-family: "Share Tech Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 10px; letter-spacing: .04em; color: #9aa1ac;
  text-shadow: 0 0 6px rgba(4,4,5,.9), 0 0 2px rgba(4,4,5,.9);
}
.tb.key:hover, .tb.key.on { color: #ffffff; border-color: rgba(235,238,245,.72); }

/* ---------- HUD ---------- */
.hud {
  position: absolute; left: 14px; bottom: 46px; z-index: 6; font-size: 11px; line-height: 18px;
  letter-spacing: .06em;
  background: rgba(16,17,20,.72); border: 1px solid rgba(235,238,245,.22); border-radius: 2px; padding: 9px 13px;
  min-width: 258px; pointer-events: none;
  box-shadow: 0 0 30px rgba(235,238,245,.07), inset 0 0 40px rgba(34,36,40,.4);
}
.hrow { display: -webkit-box; display: -ms-flexbox; display: flex; white-space: nowrap; }
.hrow .k { width: 96px; color: #4a4f57; text-transform: uppercase; font-size: 9.5px; }
.hrow .v { color: #eef1f5; font-weight: 400; font-family: "Share Tech Mono", Menlo, Consolas, "Courier New", monospace; font-size: 12.5px; letter-spacing: .02em; }
.hrow .v.hi { color: #ffffff; text-shadow: 0 0 8px rgba(235,238,245,.8), 0 0 24px rgba(235,238,245,.35); }
.hrow .v.dim { color: #9aa1ac; }
.hrow .v.warn { color: #f6b94a; }
/* the difficulty and hashrate rows open the panel that draws them properly.
   The HUD itself stays click-through (pointer-events none above); only these
   two rows take the pointer back. */
.hrow.link { pointer-events: auto; cursor: pointer; }
.hrow.link:hover .k { color: #9aa1ac; }
.hrow.link:hover .v { color: #ffffff; }
.pacebar { display: inline-block; vertical-align: middle; width: 92px; height: 6px; margin-right: 8px; border: 1px solid rgba(235,238,245,.22); border-radius: 0; overflow: hidden; background: rgba(10,10,12,.7); }
.pacebar i { display: block; height: 100%; width: 0; background: #dfe3e9; }
.pacebar.late i { background: #f6b94a; }
.pacebar.verylate i { background: #ff3860; }

/* ---------- legend ---------- */
.legend {
  position: absolute; left: 14px; right: 14px; bottom: 11px; z-index: 6; font-size: 10.5px; letter-spacing: .08em;
  color: #9aa1ac; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.legend span { margin-right: 15px; display: inline-block; }
.legend .hint { float: right; margin-right: 0; color: #4a4f57; }
/* the four block states are told apart by brightness, so the swatches carry
   the same four values the scene does; only escrow and mempool have a hue */
.sw { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(235,238,245,.22); }
.sw.cb { background: #6e757f; box-shadow: 0 0 6px rgba(110,117,127,.9); }
.sw.tx { background: #b9bec7; box-shadow: 0 0 6px rgba(185,190,199,.9); }
.sw.busy { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.85); }
.sw.p1 { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,.85); }
.sw.p2 { background: #fb7185; box-shadow: 0 0 6px rgba(251,113,133,.85); }
.sw.p3 { background: #6ee7b7; box-shadow: 0 0 6px rgba(110,231,183,.85); }
.sw.p0 { background: #b9bec7; box-shadow: 0 0 6px rgba(185,190,199,.85); }
.sw.dc { background: #f6b94a; box-shadow: 0 0 7px rgba(246,185,74,.8); }
.sw.mp { border-radius: 50%; width: 6px; height: 6px; background: #37f2ff; border: 0; box-shadow: 0 0 7px rgba(55,242,255,.9); }
/* the legend's own thumbnail of the knight, treated the same way it is in
   the scene so the row reads as the same object */
.legend img.dg {
  width: 14px; height: 8px; margin-right: 6px; vertical-align: -1px; opacity: .8;
  -webkit-filter: grayscale(1) brightness(1.3); filter: grayscale(1) brightness(1.3);
}

/* ---------- side panel ---------- */
.panel {
  position: absolute; top: 52px; right: 0; bottom: 0; width: 430px; max-width: 100%; z-index: 8;
  background: rgba(6,6,8,.94); border-left: 1px solid rgba(235,238,245,.22);
  display: none;
  box-shadow: -20px 0 40px rgba(0,0,0,.5);
  -webkit-transition: -webkit-transform .2s ease; transition: transform .2s ease;
}
.panel.open { display: block; }
.phead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 11px 14px; border-bottom: 1px solid rgba(235,238,245,.22); background: rgba(26,28,32,.5); }
.phead b { font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #f2f5f8; font-size: 11px; }
.pnav { margin-left: 12px; font-size: 11.5px; }
.px { margin-left: auto; cursor: pointer; background: none; border: 1px solid rgba(235,238,245,.22); color: #eef1f5; border-radius: 2px; width: 26px; height: 26px; line-height: 22px; font-size: 16px; padding: 0; }
.px:hover { color: #ffffff; border-color: rgba(235,238,245,.5); }
.pbody { position: absolute; top: 48px; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px; font-size: 12.5px; }
.pbody h3 { margin: 14px 0 6px; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #9aa1ac; font-weight: 700; }
.kv { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.kv td { padding: 3px 0; vertical-align: top; }
.kv td:first-child { color: #4a4f57; width: 92px; white-space: nowrap; padding-right: 8px; text-transform: uppercase; font-size: 10px; }
.kv td:last-child { word-break: break-all; color: #eef1f5; }
.hash { word-break: break-all; }
.txrow { display: block; padding: 7px 8px; margin: 4px 0; border: 1px solid rgba(235,238,245,.16); border-radius: 2px; color: #eef1f5; background: rgba(24,26,30,.55); }
.txrow:hover { border-color: rgba(235,238,245,.5); text-decoration: none; background: rgba(235,238,245,.07); }
.txrow.cb { border-color: rgba(235,238,245,.34); background: rgba(235,238,245,.05); }
.txrow .id { color: #dfe3e9; }
.txrow.cb .id { color: #ffffff; }
.txrow .meta { color: #9aa1ac; font-size: 11px; }
.tag { display: inline-block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 1px 5px; border-radius: 2px; margin-left: 4px; border: 1px solid; vertical-align: 1px; }
.tag.cb { color: #f2f5f8; border-color: rgba(235,238,245,.5); }
.tag.dc { color: #f6b94a; border-color: rgba(246,185,74,.55); }
.tag.txt { color: #37f2ff; border-color: rgba(55,242,255,.45); }
.tag.bmm { color: #ffd98a; border-color: rgba(255,217,138,.5); }
.tag.mp { color: #37f2ff; border-color: rgba(55,242,255,.45); }
.tag.wit { color: #9aa1ac; border-color: rgba(235,238,245,.22); }
.io { border: 1px solid rgba(235,238,245,.14); border-radius: 2px; padding: 6px 8px; margin: 4px 0; }
.io.dc { border-color: rgba(246,185,74,.5); background: rgba(246,185,74,.06); }
.io.nd { border-color: rgba(235,238,245,.3); }
.io .n { color: #4a4f57; margin-right: 6px; }
.io .val { float: right; color: #ffd98a; }
.io .addr { color: #dfe3e9; word-break: break-all; }
.io .txt { display: block; margin-top: 3px; color: #eef1f5; white-space: pre-wrap; word-break: break-word; background: rgba(10,10,12,.7); padding: 4px 6px; border-radius: 2px; }
.io .data { color: #4a4f57; word-break: break-all; font-size: 10.5px; }
/* the workscore bar in the Thunder panel: the same shape as the pacing bar in
   the HUD, in the escrow's amber */
.wbar { display: block; height: 6px; margin: 5px 0 4px; border: 1px solid rgba(246,185,74,.45); background: rgba(10,10,12,.7); overflow: hidden; }
.wbar i { display: block; height: 100%; width: 0; background: #f6b94a; }
.blist a.str .m { color: #9aa1ac; }
.tag.st { color: #9aa1ac; border-color: rgba(235,238,245,.35); border-style: dashed; }
/* the coinbase payout address, worn where no pool mark exists. An address is
   data, not an identity: mono like every other identifier on the page, dim
   silver, no hue, and chip-marked "address" so it can never read as a pool
   name. Full-length in the panel (selectable, breakable), shortened where it
   stands in for the badge in a row or the tip label. */
.maddr { font-family: "Share Tech Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; color: #dfe3e9; word-break: break-all; }
a.maddr { text-decoration: none; border-bottom: 1px dotted rgba(235,238,245,.35); }
a.maddr:hover { color: #ffffff; border-bottom-color: rgba(235,238,245,.7); }
.maddr.sm, .maddr.lb { color: #9aa1ac; font-size: 10px; letter-spacing: .02em; margin-right: 6px; word-break: normal; }
.tag.ad { color: #9aa1ac; border-color: rgba(235,238,245,.35); }
.warnv { color: #ffd98a; }
.blist a.nolink { cursor: default; }
.blist a.nolink:hover { background: none; }
.blist a { display: block; padding: 7px 8px; border-bottom: 1px solid rgba(235,238,245,.1); color: #eef1f5; }
.blist a:hover { background: rgba(235,238,245,.07); text-decoration: none; }
.blist a.sel { background: rgba(235,238,245,.12); }
.blist .h { color: #ffffff; display: inline-block; width: 76px; }
.blist .m { color: #9aa1ac; }
.blist .r { float: right; color: #9aa1ac; }
.err { color: #ff3860; padding: 8px; border: 1px solid rgba(255,56,96,.4); border-radius: 2px; }
.muted { color: #9aa1ac; }
.btn { display: inline-block; cursor: pointer; margin: 6px 4px 0 0; border: 1px solid rgba(235,238,245,.22); border-radius: 2px; background: rgba(10,10,12,.5); color: #dfe3e9; font-size: 11px; letter-spacing: .12em; padding: 4px 10px; text-transform: uppercase; }
.btn:hover { border-color: rgba(235,238,245,.5); color: #ffffff; text-decoration: none; }

/* ---------- the pool's mark on a block, and the arrival charge ---------- */
.bd {
  position: absolute; left: 0; top: 0; z-index: 4;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  pointer-events: none; -o-object-fit: contain; object-fit: contain;
  -webkit-filter: drop-shadow(0 2px 4px rgba(0,0,0,.9));
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.9));
}
.blogo {
  position: absolute; left: 0; top: 0; z-index: 4;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  pointer-events: none; -o-object-fit: contain; object-fit: contain;
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.85));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.85));
}
/* the ring and three arcs that fire when a block lands. Everything here is
   driven from JS off the sim's own flash value - no CSS animation, so it
   cannot keep running on its own clock after the charge has decayed. */
.zap {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  border: 2px solid rgba(238,241,245,.9); border-radius: 50%;
  box-shadow: 0 0 18px rgba(235,238,245,.55), inset 0 0 14px rgba(235,238,245,.35);
}
.zap i {
  position: absolute; left: 50%; top: -9%; width: 2px; height: 22%;
  margin-left: -1px; background: rgba(238,241,245,.85);
  box-shadow: 0 0 8px rgba(235,238,245,.9);
  -webkit-transform-origin: 50% 268%; transform-origin: 50% 268%;
}
.zap i:nth-child(1) { -webkit-transform: rotate(24deg);  transform: rotate(24deg); }
.zap i:nth-child(2) { -webkit-transform: rotate(147deg); transform: rotate(147deg); }
.zap i:nth-child(3) { -webkit-transform: rotate(263deg); transform: rotate(263deg); }
@media (prefers-reduced-motion: reduce) { .zap { display: none !important; } }

/* ---------- replay ----------
   The control bar and the frame that says, four ways over, that what is on
   screen is not the present. The bar is docked under the top bar rather than
   at the bottom edge, which already carries the HUD and the legend, and it is
   never hidden - not even behind the phone's bottom sheet - because a state
   marker that can be covered is not a state marker. */
.rpbar {
  position: absolute; left: 14px; top: 60px; z-index: 11; display: none;
  max-width: 92%; padding: 5px 8px;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  background: rgba(16,17,20,.92); border: 1px solid rgba(235,238,245,.5); border-radius: 2px;
  box-shadow: 0 0 30px rgba(235,238,245,.10), inset 0 0 40px rgba(34,36,40,.4);
}
.rpbar.on { display: -webkit-box; display: -ms-flexbox; display: flex; }
/* inverted, because every other chip on this page is an outline: the one that
   says you are not looking at the live chain is the one that is filled in */
.rpm {
  font-family: "Orbitron", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: #dfe3e9; color: #101114; padding: 3px 7px; border-radius: 2px; white-space: nowrap;
}
.rpb {
  cursor: pointer; margin-left: 8px; border: 1px solid rgba(235,238,245,.22); border-radius: 2px;
  background: rgba(10,10,12,.5); color: #dfe3e9;
  font-family: "Share Tech Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 11px; letter-spacing: .10em; padding: 3px 9px; text-transform: uppercase;
}
.rpb:hover { color: #ffffff; border-color: rgba(235,238,245,.5); }
.rptrack {
  position: relative; display: block; -webkit-box-flex: 1; -ms-flex: 1 1 90px; flex: 1 1 90px;
  min-width: 70px; height: 10px; margin: 0 9px; cursor: pointer;
  border: 1px solid rgba(235,238,245,.22); background: rgba(10,10,12,.7);
}
.rptrack i { display: block; height: 100%; width: 0; background: rgba(223,227,233,.40); }
.rptrack b { position: absolute; top: -3px; left: 0; width: 2px; height: 14px; margin-left: -1px; background: #ffffff; box-shadow: 0 0 8px rgba(235,238,245,.9); }
.rpn {
  font-family: "Share Tech Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 11px; letter-spacing: .04em; color: #eef1f5; white-space: nowrap;
}
.rpn em { font-style: normal; color: #9aa1ac; margin-left: 5px; }
/* the stage wears a frame while the replay is on: the video-editor idiom for
   "this is playback", and the one marker that is visible from anywhere on the
   page without reading a word */
.rpframe {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; display: none;
  pointer-events: none; border: 2px solid rgba(223,227,233,.45);
  box-shadow: inset 0 0 70px rgba(223,227,233,.06);
}

/* ---------- the retarget gate ----------
   A plane the chain passes through every 60 blocks. Silver, because it is
   chain structure rather than state - no hue is spent on it - and its
   brightness and height are driven from the block's own flash, so it is loud
   while that block lands and a thin mark for the rest of the hour. */
.gate { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.gate i {
  position: absolute; left: 0; top: 50%; width: 1px; height: 40px;
  margin-left: -1px;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  background: rgba(223,227,233,.55);
}
.gate.hot i { width: 2px; background: #ffffff; box-shadow: 0 0 12px rgba(235,238,245,.9); }
.gate span {
  position: absolute; left: 8px; top: 4px; white-space: nowrap;
  font-family: "VT323", "Share Tech Mono", "Courier New", monospace;
  font-size: 13px; letter-spacing: .08em; color: rgba(154,161,172,.95);
  text-shadow: 0 0 6px rgba(0,0,0,.9), 0 1px 2px #000;
}
.gate.hot span { color: #ffffff; }
.gate span small { display: block; font-size: 12px; color: rgba(154,161,172,.8); }

/* ---------- the verdict ----------
   One SVG annotation plane over the whole viewport, first child of #labels so
   every readout paints over it, and z-index 2 so it also sits under the gates
   (3): the gate marks WHERE the boundary is, this shows HOW MUCH and WHICH
   WAY, and the mark keeps the front. Everything in it is positioned from JS
   through sim.project(); nothing here animates on its own clock. */
#verdict { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
#verdict .vdt {
  font-family: "Share Tech Mono", "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  font-size: 12px; letter-spacing: .05em;
  text-shadow: 0 0 6px rgba(0,0,0,.9), 0 1px 2px #000;
}

/* the two plots in the retarget panel */
.plot { display: block; width: 100%; margin: 4px 0 2px; background: rgba(10,10,12,.6); border: 1px solid rgba(235,238,245,.14); }
.plotcap {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  margin: 0 0 8px; font-size: 10px; color: #6b7078; letter-spacing: .04em;
}
.plotcap span { margin-right: 10px; }
.plotcap span:last-child { margin-right: 0; }
.plotcap .mid { text-align: center; }
.plotcap .w { color: #ffffff; font-weight: 400; }
.plotcap .g { color: #9aa1ac; font-weight: 400; }

/* the difficulty / hashrate panel. The svg is built at the panel's measured
   width, so its text is never stretched; width:100% would restretch it, hence
   the max-width override. */
.hrsvg { width: auto; max-width: 100%; }
.hrsvg text { font-family: "Share Tech Mono", "SFMono-Regular", Menlo, Consolas, monospace; }
#hrWrap { cursor: crosshair; }
.hrread { margin: 2px 0 6px; font-size: 10.5px; color: #9aa1ac; letter-spacing: .04em; min-height: 14px; }
.hrt { width: 100%; border-collapse: collapse; margin: 2px 0 6px; font-size: 11px; }
.hrt th { text-align: left; font-weight: 400; text-transform: uppercase; font-size: 9px; letter-spacing: .1em; color: #4a4f57; padding: 2px 8px 3px 0; border-bottom: 1px solid rgba(235,238,245,.14); }
.hrt td { padding: 4px 8px 4px 0; border-bottom: 1px solid rgba(235,238,245,.08); color: #eef1f5; white-space: nowrap; }
.hrt td i { font-style: normal; color: #4a4f57; font-size: 9px; margin-left: 5px; text-transform: uppercase; letter-spacing: .08em; }
.hrt th:last-child, .hrt td:last-child { padding-right: 0; }
.hrt td:first-child { color: #ffffff; }

/* ---------- the Thunder instrument cluster ----------
   One container pinned to the hub's projected point, with a fixed pixel
   layout inside it: the pool share ring sits on the hub itself, and the
   withdrawal column and the escrow map hang off it. Local (0,0) is the hub
   centre and every child is positioned from there, so the whole cluster is
   placed with two style writes a frame and cannot rearrange itself over the
   chain. Everything left of x = -44 is left free for the loaf. */
#thunder { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; }
.thring { position: absolute; left: -34px; top: -34px; display: block; }
.thcap {
  position: absolute; left: -40px; top: 40px; width: 200px;
  font-family: "VT323", "Share Tech Mono", "Courier New", monospace;
  font-size: 15px; line-height: 15px; letter-spacing: .06em;
  color: rgba(238,241,245,.92); text-shadow: 0 0 8px rgba(235,238,245,.4), 0 1px 2px #000;
}
.thcap b { display: block; font-weight: 400; color: #ffffff; }
.thcap i { display: block; font-style: normal; color: rgba(154,161,172,.95); }
.thcap i.q, .thcap span.q { color: #6b7078; font-size: 13px; }
/* the escrow rows are the drivechain's, and wear its amber */
.thcap b.g { color: #ffd98a; }
/* the escrow map: the CTIP lineage as a rail of lit coins, and anything that
   fell off it dropped below the line and greyed. The stranded mark is the one
   place in the scene where a coin is drawn as unreachable, so it is the only
   one with no fill and a dashed edge. */
.thcap i.esc.map { position: relative; height: 16px; }
.tremap { position: absolute; left: 0; top: 0; width: 140px; height: 16px; display: block; }
.tremap i.rail { position: absolute; top: 7px; height: 1px; background: rgba(246,185,74,.5); }
.tremap i.coin {
  position: absolute; top: 3px; width: 8px; height: 8px;
  background: #f6b94a; box-shadow: 0 0 6px rgba(246,185,74,.8);
}
.tremap i.coin.ctip { top: 2px; width: 10px; height: 10px; background: #ffd98a; box-shadow: 0 0 9px rgba(255,217,138,.95); }
.tremap i.coin.str {
  top: 9px; background: none; box-shadow: none;
  border: 1px dashed rgba(154,161,172,.85);
}
.tretxt { position: absolute; left: 0; top: 0; padding-left: 0; display: block; text-align: right; width: 200px; }
.thcap i.esc.map.bad .tretxt { color: rgba(154,161,172,.95); }
.thcap i.g { color: rgba(246,185,74,.78); }
/* the withdrawal column. Amber, because this is escrow: a bundle climbing this
   track is the escrow about to move. Empty is the normal state and is drawn
   deliberately - a dashed track with a dash across it and the rule written
   beside it - rather than left blank, because a blank instrument reads as a
   broken one. */
.thwd { position: absolute; left: -40px; top: 96px; width: 200px; display: none; }
.thcol {
  position: absolute; left: 0; top: 0; width: 11px; height: 56px;
  border: 1px solid rgba(246,185,74,.45); background: rgba(10,10,12,.7);
}
.thcol i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #f6b94a; box-shadow: 0 0 8px rgba(246,185,74,.65); }
.thcol b { display: none; }
.thwd.idle .thcol { border-color: rgba(235,238,245,.20); border-style: dashed; }
.thwd.idle .thcol i { display: none; }
.thwd.idle .thcol b { display: block; position: absolute; left: 1px; right: 1px; top: 50%; height: 1px; background: rgba(154,161,172,.45); }
.thwdt {
  position: absolute; left: 20px; top: -3px; width: 180px;
  font-family: "VT323", "Share Tech Mono", "Courier New", monospace;
  font-size: 15px; line-height: 15px; letter-spacing: .06em;
  text-shadow: 0 0 8px rgba(0,0,0,.9), 0 1px 2px #000;
}
.thwdt b { display: block; font-weight: 400; color: #ffd98a; }
.thwd.idle .thwdt b { color: rgba(154,161,172,.95); }
.thwdt i { display: block; font-style: normal; color: rgba(154,161,172,.95); }
.thwdt i.q { color: #6b7078; font-size: 13px; }

/* ---------- mining pool badges ---------- */
/* Purely decorative and always beside the tag text, never instead of it. A
   logo that fails to load takes itself out of the flow rather than leaving a
   broken-image box, and an unrecognised or missing tag still gets the neutral
   badge, so the row is the same height either way. The assets are 96 px, so
   they stay crisp at every device pixel ratio. */
.pool {
  display: inline-block; width: 28px; height: 28px; margin-right: 8px; vertical-align: -8px;
  border: 1px solid rgba(235,238,245,.22); border-radius: 3px; background: rgba(235,238,245,.05);
  -o-object-fit: contain; object-fit: contain;
}
.pool.sm { width: 26px; height: 26px; margin-right: 7px; vertical-align: -7px; }
.pool.lb { width: 22px; height: 22px; margin-right: 6px; vertical-align: -6px; border-color: rgba(235,238,245,.3); }
a.poollink { display: inline-block; line-height: 0; }
a.poollink:hover { text-decoration: none; }
a.poollink:hover .pool { border-color: rgba(235,238,245,.6); background: rgba(235,238,245,.12); }

/* ---------- coinnews ----------
   News is silver/white structure tone ONLY: amber is the drivechain's mark
   and cyan is the mempool's, by contract, and neither may appear in a news
   element (the cyan .tag.txt inside the panel is a pre-existing precedent,
   reused untouched). Everything here is static state - the one transition,
   on .nwx, is a one-shot decay a repost event triggers; no keyframes. */
.nwsig { display: inline-block; margin-right: 9px; }
.nwsig i { display: inline-block; width: 3px; margin-right: 2px; background: #dfe3e9; vertical-align: bottom; }
.nwch { margin: 16px 0 4px; padding-top: 6px; border-top: 1px solid rgba(235,238,245,.22); position: relative; color: #dfe3e9; font-size: 12px; letter-spacing: .08em; }
.nwch:before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: rgba(235,238,245,.22); }
.nwch.user { border-top-style: dashed; }
.nwch.user:before { display: none; }
.nwcard { margin: 10px 0 16px; }
.nwcard .nwtext {
  font-family: "VT323", "Share Tech Mono", "Courier New", monospace;
  font-size: 21px; line-height: 1.35; color: #eef1f5;
  white-space: pre-wrap; word-wrap: break-word;
}
.nwcard.aged .nwtext { color: #9aa1ac; }
.nwprov { margin-top: 6px; font-size: 11px; letter-spacing: .08em; color: #9aa1ac; }
.nwcard.aged .nwprov { color: #6b7078; }
.nwprov a.nwx { color: #9aa1ac; border-bottom: 1px dotted rgba(154,161,172,.5); cursor: pointer; -webkit-transition: color 1s ease; transition: color 1s ease; }
.nwprov a.nwx:hover { color: #dfe3e9; text-decoration: none; }
.nwprov a.nwx.lit { color: #ffffff; -webkit-transition: none; transition: none; }
.nwledger { margin: 6px 0 0 12px; font-size: 11px; line-height: 18px; color: #9aa1ac; letter-spacing: .05em; }
.nwledger a { color: #dfe3e9; margin-right: 4px; }
.nwledger small { color: #6b7078; margin-right: 10px; }
.nwnote { margin: 5px 0 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6b7078; }
.nwcarrier { height: 1px; border-top: 1px dashed rgba(235,238,245,.22); margin: 14px 0 6px; }
.nwrule { font-size: 11px; color: #9aa1ac; letter-spacing: .05em; }
.nwfeed { font-size: 10px; letter-spacing: .1em; }
.nwdot { color: #9aa1ac; font-size: 13px; line-height: 0; }
/* the mast: scene furniture in #labels, z-index 3 like the gates - painted
   over by the HUD, the legend and the panel by design */
.nwmast { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); }
.nwmast i { display: block; width: 1px; height: 46px; margin: 0 auto; background: #dfe3e9; opacity: .75; box-shadow: 0 0 6px rgba(235,238,245,.35); }
.nwmast span {
  display: block; text-align: center; white-space: nowrap;
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: 11px; letter-spacing: .14em; font-variant: small-caps;
  color: #dfe3e9; text-shadow: 0 0 8px rgba(0,0,0,.9), 0 1px 2px #000;
  margin-bottom: 2px;
}

/* ---------- toast / fallback ---------- */
/* ---------- the load prompt: play with music? ----------
   A small card under the measured toolbar (JS supplies top, like the replay
   bar), so it can never sit on the .hud or .legend at the bottom. Non-modal:
   it covers nothing but itself, takes no focus, and animates nothing, so
   prefers-reduced-motion has nothing to object to. Silver like the rest of
   the instrument - the amber border is the toast's, and the toast means
   something else. */
.vfask {
  position: absolute; top: 62px; left: 50%; margin-left: -160px; width: 320px; z-index: 7;
  padding: 10px 30px 10px 14px; border-radius: 2px;
  background: rgba(16,17,20,.92); border: 1px solid rgba(235,238,245,.28);
  box-shadow: 0 0 30px rgba(235,238,245,.07);
}
.vfask b { display: block; font-family: "Orbitron", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #eef1f5; margin-bottom: 4px; }
.vfask .vfat { display: block; font-size: 11px; line-height: 15px; color: #9aa1ac; margin-bottom: 8px; }
.vfask .vfar .tb { margin: 0 8px 0 0; }
.vfask .vfax {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; line-height: 18px;
  background: none; border: 0; color: #9aa1ac; font-size: 14px; cursor: pointer; padding: 0;
}
.vfask .vfax:hover { color: #ffffff; }
@media (max-width: 760px) {
  .vfask { width: 290px; margin-left: -145px; padding: 8px 26px 8px 12px; }
  .vfask .vfat { font-size: 10px; line-height: 14px; }
}

.toast { position: absolute; top: 62px; left: 50%; margin-left: -170px; width: 340px; z-index: 20; text-align: center; padding: 8px 12px; border-radius: 2px; font-size: 12px; background: rgba(16,17,20,.92); border: 1px solid rgba(246,185,74,.5); color: #f6b94a; }
.fallback { position: absolute; top: 52px; left: 0; right: 0; bottom: 0; z-index: 4; overflow: auto; padding: 16px; background: #040405; }
.fallback h2 { color: #f2f5f8; font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 0 12px rgba(235,238,245,.45); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .brand-sub { display: none; }
  .search { -ms-flex: 1 1 100%; flex: 1 1 100%; max-width: none; margin: 6px 0 0; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
  .controls { margin-left: auto; }
  .tb { padding: 4px 7px; font-size: 10.5px; margin-left: 4px; }
  /* the legend sits at bottom:4px and wraps to two lines here, so it reaches
     up to y=746 on a 780-tall viewport; at bottom:30px the HUD's last row ran
     4px underneath it */
  .hud { left: 8px; bottom: 40px; min-width: 0; font-size: 10px; line-height: 16px; padding: 6px 9px; }
  .hrow .k { width: 78px; }
  .hrow .v { font-size: 11.5px; }
  .hrow.pace .pacebar { width: 50px; }
  .legend { font-size: 9.5px; bottom: 4px; white-space: normal; line-height: 15px; }
  .legend span { margin-right: 9px; }
  .legend .hint { display: none; }
  .panel { top: auto; height: 62%; width: 100%; border-left: 0; border-top: 1px solid rgba(235,238,245,.3); }
  .lbl { font-size: 13px; }
  .lbl.big { font-size: 15px; }
  .lbl small { font-size: 12px; }
  /* the bottom sheet covers the HUD on a phone: hide it rather than let it bleed through */
  body.panel-open .hud, body.panel-open .legend, body.panel-open .vfbar, body.panel-open .vflist { display: none; }
  /* On a phone the bottom edge already carries the HUD and the legend, and the
     transport bar landed on top of both. It docks under the toolbar instead;
     layoutBelowBar() supplies the top, which is measured because the toolbar
     wraps to two rows at this width. */
  /* and it is anchored to both edges rather than centred on one: an
     absolutely positioned shrink-to-fit box with left:50% may only be as wide
     as the space to its right, which is half the screen, so a centred bar
     wrapped into three cramped rows while half the width sat unused. */
  .vfbar {
    bottom: auto; padding: 4px 6px; left: 8px; right: 8px; max-width: none;
    -webkit-transform: none; transform: none;
  }
  /* the doge's legend row wraps to two lines here and pushes the bottom-anchored
     legend up through the HUD - and the knight is usually hidden behind the tip
     label in the default phone view anyway, so the row would promise something
     the visitor cannot see */
  #lgDoge { display: none; }
  .vfbar .vft { max-width: 130px; font-size: 10px; margin: 0 6px; }
  .vfbar .tb { margin: 2px 0 2px 4px; }
  .vfbar .tb.sm { padding: 3px 5px; }
  .vftrk { -ms-flex: 0 0 92px; flex: 0 0 92px; margin: 0 6px; }
  .vftime { font-size: 10px; min-width: 68px; }
  /* 236px of panel against a 390px screen would be most of the width and all
     of the right-hand side, so the queue becomes a sheet under the transport
     bar instead, short enough to leave the chain visible under it */
  .vflist { left: 8px; right: 8px; width: auto; max-height: 26vh; }
  .vfli { font-size: 11px; padding: 5px 10px 5px 4px; }
  .rpbar { left: 8px; max-width: calc(100% - 16px); padding: 4px 6px; }
  .rpb { margin-left: 5px; padding: 3px 6px; font-size: 10px; }
  .rptrack { margin: 0 6px; min-width: 46px; }
  .rpn { font-size: 10px; }
}
/* A phone is where the toolbar runs out of room first, and the controls are
   the one part of it that can give any back: at this width the letters are
   already 10.5px, so it is the padding and the tracking that go rather than a
   control. Fourteen of them then still wrap to the same three rows they did
   with twelve. */
@media (max-width: 430px) {
  /* Twenty controls now, and the fourth row came back the moment the widest
     button of the lot - "play a song", 77px - joined the bar: lnkExplorer sat
     alone on it, spending 23px of scene on one link. Another pixel of side
     padding and another .02em of tracking buys the row back again. Measured
     at 390px: 6/7/8 in three rows, bar 143px, nothing stranded, hit height
     untouched. Whatever is added next, measure this again - the bar has now
     THREE times been one control away from a wasted row, and each time the
     answer has been another pixel of padding. There is not another one after
     this: the next control that wants a place has to take someone else's. */
  .tb { padding: 3px 2px; margin-left: 2px; letter-spacing: .02em; }
  .bar { padding: 8px 10px; }
  /* the volume rail is the one transport control a phone already has in
     hardware, so it is the one that goes when the bar runs out of width.
     Mute stays, because silencing a page is not the same gesture as turning
     the handset down. */
  .vftrk.vol, .vfgap { display: none; }
  .vftrk { -ms-flex: 0 0 78px; flex: 0 0 78px; margin: 0 5px; }
}
@media (max-height: 500px) { .hud { display: none; } }

/* ---- pow.js: the gauntlet (proof of work, byte by byte) ---- */
.powbox { margin: 6px 0 14px; }
.powload { color: #9aa1ac; font-size: 12px; padding: 8px 0; }
.powcvwrap { overflow-x: auto; }
.powcvwrap canvas { display: block; }
.powread { color: #eef1f5; font-size: 12px; margin-top: 6px; min-height: 16px; }
.powread b { color: #dfe3e9; font-weight: normal; }
.powdim { color: #9aa1ac; }
.powhex { color: #9aa1ac; font-size: 11px; word-break: break-all; white-space: pre-wrap;
  border: 1px solid rgba(235,238,245,.22); padding: 6px 8px; margin-top: 6px; }
.powfacts { color: #9aa1ac; font-size: 11px; margin-top: 8px; line-height: 1.5; }
.powfacts div { margin-top: 3px; }

/* ---------- the notch, and the home indicator ----------
   index.html asks for viewport-fit=cover, which is what lets the scene run
   edge to edge on a notched phone - and, by the same token, puts the layout
   viewport UNDER the notch and the home indicator, where the toolbar, the HUD
   and the legend have been sitting. These are the last rules in the file
   because they have to win against the phone media queries above, which set
   their own left and bottom.

   env() resolves to 0 on every device that has no inset, so a desktop, a
   plain phone and an Android tablet do not move by a pixel; an engine that has
   never heard of env() fails the @supports test and keeps the values above.
   app.js measures the bar's real height rather than assuming one, so the
   panel, the replay bar and the transport bar follow the taller bar on their
   own. */
@supports (padding: env(safe-area-inset-top)) {
  .bar {
    padding-top: calc(9px + env(safe-area-inset-top));
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }
  .hud { left: calc(14px + env(safe-area-inset-left)); bottom: calc(46px + env(safe-area-inset-bottom)); }
  .legend {
    left: calc(14px + env(safe-area-inset-left));
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(11px + env(safe-area-inset-bottom));
  }
  @media (max-width: 760px) {
    .hud { left: calc(8px + env(safe-area-inset-left)); bottom: calc(40px + env(safe-area-inset-bottom)); }
    .legend {
      left: calc(8px + env(safe-area-inset-left));
      right: calc(8px + env(safe-area-inset-right));
      bottom: calc(4px + env(safe-area-inset-bottom));
    }
  }
  @media (max-width: 430px) {
    .bar {
      padding-top: calc(8px + env(safe-area-inset-top));
      padding-left: calc(10px + env(safe-area-inset-left));
      padding-right: calc(10px + env(safe-area-inset-right));
    }
  }
}

/* the subsidy bell's glyph on the pace row: brightness for state, no new
   hue - silver like every control. The HUD is pointer-events none, so the
   button takes the pointer back the way .hrow.link does. */
.bellg { pointer-events: auto; background: none; border: 0; padding: 0 2px; margin-left: 6px; color: #4a4f57; cursor: pointer; line-height: 0; vertical-align: -1px; }
.bellg:hover { color: #9aa1ac; }
.bellg.on { color: #eef1f5; text-shadow: 0 0 8px rgba(235,238,245,.8); }

/* ---------- the score: what arming the bell shows ----------
   A ~7 s one-shot in #labels, drawn entirely with positioned divs - the
   noteheads, ledger lines, fermata and double barline are boxes, not glyphs,
   so no notation font is shipped or assumed and there is no missing-glyph
   tofu to fall back from. Brightness carries all state, silver like every
   instrument here: amber stays the drivechain's and cyan the mempool's.
   All animation is driven per-frame from app.js behind one composite
   signature; nothing in here has a CSS animation clock of its own. */
.oct { position: absolute; z-index: 4; width: 264px; height: 196px; display: none; pointer-events: none; }
/* the card behind the figure: the toast's material, so the score is read
   against quiet ground instead of whatever the scene has there */
.octbg { background: rgba(6,6,8,.93); border: 1px solid rgba(235,238,245,.22); box-shadow: 0 4px 24px rgba(0,0,0,.5); }
.oct div { position: absolute; }
/* the headline: the one EXACT number - blocks remaining - over its label */
.octb { font-family: "Orbitron", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: .06em; color: #ffffff; text-shadow: 0 0 10px rgba(235,238,245,.8), 0 0 26px rgba(235,238,245,.3), 0 1px 2px #000; white-space: nowrap; }
.octbl { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: #9aa1ac; text-shadow: 0 1px 2px #000; white-space: nowrap; }
/* the staff: five lines in a clipping wrapper, drawn in by one width write */
.octs { overflow: hidden; }
.octsl { height: 0; border-top: 1px solid rgba(235,238,245,.28); }
.octlg { height: 0; border-top: 1px solid rgba(235,238,245,.28); }
/* a notehead is a small ellipse; the column wrapper says which of the three
   truthful states it is in - mined history (filled, quiet), the pitch the
   bell strikes today (filled, lit), or a note not yet played (HOLLOW, dim).
   The hollow head is the visual claim "this has not sounded". */
.octn { width: 10px; height: 7px; border-radius: 50%; }
.octg.on .octn { background: #ffffff; box-shadow: 0 0 9px rgba(235,238,245,.9), 0 0 22px rgba(235,238,245,.4); }
.octg.past .octn { background: #b9bec7; }
.octg.todo .octn { background: none; border: 1px solid rgba(154,161,172,.85); margin: -1px 0 0 -1px; }
.octg .octsub, .octg .octhz { font-family: "Share Tech Mono", Menlo, Consolas, "Courier New", monospace; font-size: 9px; letter-spacing: .02em; text-align: center; color: #9aa1ac; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.octg.on .octsub, .octg.on .octhz { color: #eef1f5; text-shadow: 0 0 8px rgba(235,238,245,.6), 0 1px 2px #000; }
.octg.todo .octsub, .octg.todo .octhz { color: rgba(154,161,172,.75); }
.octg.todo .octlg { border-top-color: rgba(235,238,245,.18); }
/* the fermata (a held note) and the double barline (the end) */
.octfa { width: 12px; height: 6px; border: 1px solid rgba(154,161,172,.85); border-bottom: 0; border-radius: 7px 7px 0 0; }
.octfd { width: 2px; height: 2px; border-radius: 50%; background: rgba(154,161,172,.85); }
.octbar { width: 1px; background: rgba(235,238,245,.45); }
.octbar2 { width: 3px; background: rgba(235,238,245,.55); }
/* the playhead: where on the score the chain stands - and where it stops */
.octp { width: 1px; background: #ffffff; box-shadow: 0 0 8px rgba(235,238,245,.9); }
.octnow { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #eef1f5; text-shadow: 0 0 8px rgba(235,238,245,.6), 0 1px 2px #000; }
.octc { font-family: "Share Tech Mono", Menlo, Consolas, "Courier New", monospace; font-size: 9.5px; letter-spacing: .02em; color: #9aa1ac; text-shadow: 0 1px 2px #000; white-space: nowrap; }