/* THE WHITE HOLE (static/js/whitehole.js): the black hole's look (blackhole.css .bh-*), turned cold and bright.
   Animations here run once (an entrance), never on a loop over a big surface. */
.wh-head .hud-glyph { color: #e9f6ff; text-shadow: 0 0 12px rgba(159, 232, 255, .8); }
.wh-head .th-note { flex: 1 1 100%; order: 3; }

/* the deck */
.wh-deck { background: radial-gradient(ellipse at 50% 52%, #0f1c2e 0%, #050912 60%, #02040a 100%); border-color: rgba(159, 232, 255, .28); }
.wh-deck::before, .wh-deck::after { border-color: #e9f6ff; }
#wh-canvas { display: block; width: 100%; height: clamp(380px, 58vh, 660px); cursor: grab; touch-action: none; }
#wh-canvas:active { cursor: grabbing; }
.wh-deck .bh-hud { padding: 18px 22px; }
.wh-deck .bh-hud .kicker b { color: #e9f6ff; }
.wh-hud-l { display: flex; flex-direction: column; gap: 8px; }
.wh-m { font: 700 22px var(--mono); color: #f2fbff; letter-spacing: .02em; text-shadow: 0 0 18px rgba(159, 232, 255, .55); text-transform: uppercase; }
.wh-pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font: 700 8px var(--mono); letter-spacing: .16em; color: rgba(159, 232, 255, .35); }
.wh-pipe b { color: rgba(159, 232, 255, .25); font-weight: 400; }
.wh-pipe span { padding: 2px 5px; border: 1px solid rgba(159, 232, 255, .14); }
.wh-pipe.on span.done { color: #7dff9a; border-color: rgba(125, 255, 154, .4); }
.wh-pipe.on span.now { color: #04070d; background: #e9f6ff; border-color: #e9f6ff; box-shadow: 0 0 12px rgba(233, 246, 255, .7); }
.wh-pipe.big { font-size: 10px; gap: 5px; margin: 8px 0; }
.wh-pipe.big span { padding: 4px 8px; }
.wh-tele { display: flex; gap: 18px; }
.wh-tele > div { display: flex; flex-direction: column; border-left: 2px solid rgba(159, 232, 255, .35); padding-left: 8px; }
.wh-tele em, .wh-spec em { font: 700 8px var(--mono); letter-spacing: .22em; color: #9fe8ff; font-style: normal; }
.wh-tele b { font: 700 18px var(--mono); color: #f2fbff; }
.wh-tele span { font-size: 10px; color: var(--mute); letter-spacing: .08em; }
.wh-spec { display: flex; flex-direction: column; gap: 4px; min-width: 220px; max-width: 360px; flex: 1; }
.wh-spec > div { display: flex; height: 6px; gap: 2px; }
.wh-spec > div i { background: var(--fc); box-shadow: 0 0 8px var(--fc); opacity: .85; min-width: 3px; }
.wh-spec > span { font: 600 10px var(--mono); letter-spacing: .1em; }
.wh-spec > span i { font-style: normal; margin-right: 8px; }
.wh-ctl { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.wh-ctl span { margin-right: 6px; }
.wh-ctl button { width: 30px; height: 30px; min-width: 0; padding: 0 !important; font: 700 15px var(--mono) !important; background: rgba(6, 12, 22, .8) !important;
  color: #e9f6ff !important; border: 1px solid rgba(159, 232, 255, .35) !important; box-shadow: none !important; }
.wh-ctl button:hover { border-color: #e9f6ff !important; }

/* the discovery */
@keyframes wh-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wh-sweep { from { transform: translateX(-120%); } to { transform: translateX(220%); } }
@keyframes wh-burst { 0% { box-shadow: 0 0 0 0 rgba(255, 211, 106, .8); } 100% { box-shadow: 0 0 0 22px rgba(255, 211, 106, 0); } }
.wh-card { margin-top: 14px; border: 1px solid rgba(159, 232, 255, .22); border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 20, 34, .9), rgba(4, 8, 14, .92)); animation: wh-in .45s ease-out both; }
.wh-hero { position: relative; height: clamp(200px, 26vw, 320px); overflow: hidden; border-bottom: 1px solid rgba(159, 232, 255, .2); }
.wh-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wh-hero::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(233, 246, 255, .12), transparent);
  animation: wh-sweep 1.6s ease-out .2s 1 both; pointer-events: none; }
.wh-hero-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 8, 14, .1) 0%, rgba(4, 8, 14, .35) 45%, rgba(4, 8, 14, .96) 100%),
  repeating-linear-gradient(0deg, rgba(159, 232, 255, .03) 0 1px, transparent 1px 3px); }
.wh-hero-t { position: absolute; left: 26px; right: 120px; bottom: 20px; }
.wh-hero h2 { margin: 6px 0 4px; font: 800 clamp(22px, 3.2vw, 38px)/1.08 var(--mono); letter-spacing: .03em; color: #f6fcff; text-transform: uppercase;
  text-shadow: 0 0 24px rgba(159, 232, 255, .45), 0 2px 0 rgba(0, 0, 0, .6); }
.wh-hero-t > p { margin: 0; color: #c8dbe8; font-size: 15px; max-width: 760px; }
.wh-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font: 600 10px var(--mono); letter-spacing: .16em; color: #9fb4c4; text-transform: uppercase; }
.wh-chip { font: 700 10px var(--mono); letter-spacing: .2em; padding: 4px 9px; color: #04070d; background: var(--fc); border-radius: 2px; box-shadow: 0 0 14px var(--fc); }
.wh-bk { position: absolute; width: 18px; height: 18px; border: 2px solid #e9f6ff; pointer-events: none; opacity: .8; }
.wh-bk.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; } .wh-bk.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.wh-bk.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; } .wh-bk.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.wh-react { position: absolute; right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 64px; padding: 8px 10px !important;
  background: rgba(6, 12, 22, .78) !important; color: #e9f6ff !important; border: 1px solid rgba(255, 211, 106, .45) !important; box-shadow: none !important; font: 700 16px var(--mono) !important; }
.wh-react b { font-size: 18px; }
.wh-react span { font: 700 8px var(--mono); letter-spacing: .22em; color: #ffd36a; }
.wh-react.on { color: #ffd36a !important; border-color: #ffd36a !important; background: rgba(255, 211, 106, .12) !important; }
.wh-react.burst { animation: wh-burst .7s ease-out 1; }
.wh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; padding: 20px 24px 24px; }
.wh-grid aside { border-left: 1px solid rgba(159, 232, 255, .14); padding-left: 20px; }
.wh-sec { margin: 0 0 16px; animation: wh-in .5s ease-out both; }
.wh-sec h4 { margin: 0 0 6px; font: 700 11px var(--mono); letter-spacing: .2em; color: #9fe8ff; text-transform: uppercase; }
.wh-sec h4 i { font-style: normal; color: var(--fc); }
.wh-sec p { margin: 0; line-height: 1.7; font-size: 15px; color: #dbe8f2; }
.wh-cite { color: #9fe8ff; text-decoration: none; font-size: .75em; vertical-align: super; }
.wh-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 18px 0; }
.wh-facts > div { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid rgba(159, 232, 255, .15); border-left: 2px solid var(--fc); background: rgba(159, 232, 255, .03); }
.wh-facts em, .wh-exp-h em, .wh-whyl em, .wh-data-h em { font: 700 9px var(--mono); letter-spacing: .22em; color: #9fe8ff; font-style: normal; }
.wh-facts b { font: 600 15px var(--mono); color: var(--amber); }

/* explainer */
.wh-slider { margin: 18px 0; padding: 14px; border: 1px solid rgba(125, 255, 230, .2); background: rgba(125, 255, 230, .03); }
.wh-stops { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.wh-stops button, .wh-opt, .wh-ev button, .wh-arc, .wh-filters button, .wh-submit {
  background: rgba(159, 232, 255, .04) !important; color: #e9f6ff !important; border: 1px solid rgba(159, 232, 255, .3) !important; box-shadow: none !important; }
.wh-stops button { padding: 4px 10px; font: 600 11px var(--mono) !important; text-transform: none !important; letter-spacing: 0 !important; }
.wh-stops button.on { border-color: #7dffe6 !important; color: #7dffe6 !important; background: rgba(125, 255, 230, .1) !important; }
.wh-slider input { width: 100%; accent-color: #7dffe6; }
.wh-stop { padding: 10px 14px; border-left: 2px solid #7dffe6; min-height: 64px; }
.wh-stop b { font: 700 14px var(--mono); color: #7dffe6; }
.wh-stop p { margin: 4px 0 0; line-height: 1.6; }

/* quiz */
.wh-q { margin: 0 0 18px; padding: 14px; border: 1px solid rgba(255, 211, 106, .16); background: rgba(255, 211, 106, .025); animation: wh-in .45s ease-out var(--d) both; }
.wh-qn { font: 700 10px var(--mono); letter-spacing: .2em; color: #ffd36a; margin-bottom: 4px; }
.wh-qn span { color: var(--mute); }
.wh-q > b { font-size: 15px; }
.wh-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.wh-opt { display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px 12px; white-space: normal; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }
.wh-opt i { font: 700 10px var(--mono); font-style: normal; color: #9fe8ff; border: 1px solid rgba(159, 232, 255, .35); padding: 1px 6px; }
.wh-opt:hover:not(:disabled) { border-color: #e9f6ff !important; }
.wh-opt:disabled { opacity: 1; cursor: default; }
.wh-opt.on { border-color: #ffd36a !important; color: #ffd36a !important; background: rgba(255, 211, 106, .1) !important; }
.wh-opt.right { border-color: #7dff9a !important; color: #7dff9a !important; background: rgba(125, 255, 154, .1) !important; }
.wh-opt.wrong { border-color: #ff5a4a !important; color: #ff8a7a !important; background: rgba(255, 90, 74, .07) !important; }
.wh-why { margin: 8px 0 0; font-size: 12px; color: var(--mute); }

/* timeline */
.wh-tl { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.wh-tl.done::before { content: ""; position: absolute; left: 46px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(#ff9f43, rgba(255, 159, 67, .1)); }
.wh-ev { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid rgba(255, 159, 67, .25);
  background: rgba(255, 159, 67, .03); animation: wh-in .4s ease-out var(--d) both; }
.wh-ev[draggable="true"] { cursor: grab; }
.wh-ev.lift { opacity: .5; }
.wh-ev > span { font: 700 13px var(--mono); color: #ff9f43; text-align: center; }
.wh-ev p { margin: 0; }
.wh-ev em { font: 700 14px var(--mono); font-style: normal; }
.wh-ev.ok { border-color: rgba(125, 255, 154, .4); } .wh-ev.ok em { color: #7dff9a; }
.wh-ev.no { border-color: rgba(255, 90, 74, .35); } .wh-ev.no em { color: #ff5a4a; }
.wh-ev button { padding: 2px 8px; min-width: 0; }

/* fermi */
.wh-fermi { margin: 14px 0; }
.wh-fq { font: 600 18px/1.4 var(--mono); color: #f2fbff; }
.wh-fermi details { margin: 8px 0 14px; } .wh-fermi summary { cursor: pointer; font: 700 10px var(--mono); letter-spacing: .2em; color: #c08bff; }
.wh-ruler { position: relative; padding: 26px 4px 10px; }
.wh-ruler-scale { position: relative; height: 16px; }
.wh-ruler-scale span { position: absolute; transform: translateX(-50%); font: 600 9px var(--mono); color: var(--mute); }
.wh-ruler input[type=range] { width: 100%; accent-color: #c08bff; }
.wh-fermi-in { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.wh-fermi-in input { width: 220px; max-width: 100%; }
.wh-ruler-bar { position: relative; height: 10px; margin: 30px 0 34px; background: linear-gradient(90deg, rgba(192, 139, 255, .12), rgba(192, 139, 255, .3)); border: 1px solid rgba(192, 139, 255, .3); }
.wh-ruler-bar i { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.wh-ruler-bar i.sq { width: 6px; height: 6px; border-radius: 50%; background: rgba(233, 246, 255, .55); }
.wh-ruler-bar i.ans, .wh-ruler-bar i.you { width: 3px; height: 26px; background: #7dff9a; box-shadow: 0 0 10px #7dff9a; }
.wh-ruler-bar i.you { background: #ffd36a; box-shadow: 0 0 10px #ffd36a; }
.wh-ruler-bar i b { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 9px var(--mono); letter-spacing: .12em; }
.wh-ruler-bar i.ans b { top: -16px; color: #7dff9a; } .wh-ruler-bar i.you b { top: 28px; color: #ffd36a; }

/* experiment */
.wh-exp { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.wh-exp-h { padding: 10px 14px; border-left: 2px solid rgba(125, 255, 154, .5); background: rgba(125, 255, 154, .03); }
.wh-exp-h p { margin: 4px 0 0; line-height: 1.6; }
.wh-exp-h.find { border-left-color: #7dff9a; background: rgba(125, 255, 154, .07); }
.wh-exp-h.find p { font-size: 15px; color: #e9fff0; }
.wh-data { padding: 12px 14px; border: 1px solid rgba(125, 255, 154, .2); }
.wh-data-h { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wh-tbl { width: 100%; border-collapse: collapse; font: 12px var(--mono); }
.wh-tbl th, .wh-tbl td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(159, 232, 255, .12); }
.wh-tbl th { color: #9fe8ff; font-weight: 600; letter-spacing: .1em; }
.wh-bars > div { display: grid; grid-template-columns: minmax(80px, 150px) 1fr 50px; gap: 10px; align-items: center; font: 12px var(--mono); margin: 5px 0; animation: wh-in .4s ease-out var(--d) both; }
.wh-bars i { height: 8px; background: rgba(125, 255, 154, .08); }
.wh-bars u { display: block; height: 100%; background: linear-gradient(90deg, rgba(125, 255, 154, .4), #7dff9a); box-shadow: 0 0 8px rgba(125, 255, 154, .5); }
.wh-bars b { color: #7dff9a; text-align: right; }

/* result */
.wh-submit { margin-top: 12px; padding: 10px 18px !important; border-color: #e9f6ff !important; font: 700 12px var(--mono) !important; letter-spacing: .2em !important; }
.wh-submit:hover { background: rgba(233, 246, 255, .1) !important; }
.wh-result { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 12px 16px; border: 1px solid rgba(159, 232, 255, .2); background: rgba(159, 232, 255, .04); animation: wh-in .5s ease-out both; }
.wh-gauge { position: relative; display: flex; align-items: center; gap: 14px; }
.wh-gauge svg { transform: rotate(-90deg); }
.wh-gauge circle { fill: none; stroke-width: 7; }
.wh-gauge .bg { stroke: rgba(159, 232, 255, .12); }
.wh-gauge .fg { stroke: #e9f6ff; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(159, 232, 255, .8)); transition: stroke-dasharray .9s ease-out; }
.wh-gauge > div { display: flex; flex-direction: column; }
.wh-gauge b { font: 800 28px var(--mono); color: #f2fbff; } .wh-gauge small { font-size: 14px; color: var(--mute); }
.wh-gauge em { font: 700 10px var(--mono); letter-spacing: .24em; color: #ffd36a; font-style: normal; }
.wh-board { margin-top: 18px; }
.wh-board > div:not(.label) { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; font: 12px var(--mono); padding: 5px 0; border-bottom: 1px dashed rgba(159, 232, 255, .1); }
.wh-board > div i { font-style: normal; color: #9fe8ff; }
.wh-board > div u { position: absolute; left: 0; bottom: -1px; height: 1px; background: #e9f6ff; box-shadow: 0 0 6px #9fe8ff; }

/* made by Lewis */
.wh-made { display: flex; flex-direction: column; gap: 12px; }
.wh-made-h { display: flex; flex-direction: column; gap: 2px; }
.wh-made-h > span:last-child { font: 600 11px var(--mono); color: #c8dbe8; letter-spacing: .06em; }
.wh-made-steps { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.wh-made-steps i { font: 700 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: var(--sc); border: 1px solid var(--sc); padding: 2px 5px; opacity: .9; }
.wh-made-steps b { color: rgba(159, 232, 255, .3); font-weight: 400; }
.wh-whyl { margin: 0; padding: 10px 12px; border-left: 2px solid #ffd36a; background: rgba(255, 211, 106, .05); font-size: 13px; line-height: 1.55; color: #e6dcc0; }
.wh-whyl em { display: block; color: #ffd36a; margin-bottom: 2px; }
.wh-srcs { display: flex; flex-direction: column; gap: 4px; }
.wh-srcs > a, .wh-srcs > span { display: grid; grid-template-columns: 22px 1fr; gap: 6px; font-size: 12px; color: #c8e9f8; text-decoration: none; padding: 5px 6px; border: 1px solid transparent; }
.wh-srcs > a:hover { border-color: rgba(159, 232, 255, .3); background: rgba(159, 232, 255, .04); }
.wh-srcs i { font: 700 10px var(--mono); font-style: normal; color: #9fe8ff; }
.wh-srcs em { display: block; color: var(--mute); font-style: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* nothing yet */
.wh-empty { margin-top: 14px; padding: 40px 20px; text-align: center; border: 1px dashed rgba(159, 232, 255, .25); }
.wh-empty-core { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, rgba(159, 232, 255, .5) 45%, transparent 70%); }
.wh-empty b { font: 700 13px var(--mono); letter-spacing: .2em; color: #e9f6ff; }

/* the archive */
.wh-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.wh-filters button { padding: 5px 10px; font: 700 10px var(--mono) !important; letter-spacing: .16em !important; }
.wh-filters button b { color: var(--fc, #9fe8ff); margin-left: 4px; }
.wh-filters button.on { border-color: var(--fc, #e9f6ff) !important; background: rgba(233, 246, 255, .08) !important; }
.wh-arcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.wh-arc { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px !important; text-align: left; white-space: normal; overflow: hidden;
  border-top: 2px solid var(--fc) !important; animation: wh-in .4s ease-out var(--d) both; transition: transform .15s ease, border-color .15s; }
.wh-arc:hover { transform: translateY(-3px); border-color: var(--fc) !important; }
.wh-arc img { display: block; width: 100%; height: 120px; object-fit: cover; }
.wh-arc-glyph { position: absolute; top: 8px; left: 10px; font: 700 18px var(--mono); color: var(--fc); text-shadow: 0 0 10px var(--fc); }
.wh-badge { position: absolute; top: 8px; right: 8px; font: 700 9px var(--mono); letter-spacing: .18em; padding: 3px 7px; background: #ffd36a; color: #04070d; }
.wh-badge.done { background: rgba(6, 12, 22, .85); color: #7dff9a; border: 1px solid #7dff9a; }
.wh-arc em, .wh-arc b, .wh-arc > span:last-child { padding: 0 12px; }
.wh-arc em { margin-top: 6px; font: 700 9px var(--mono); letter-spacing: .2em; color: var(--fc); font-style: normal; }
.wh-arc b { font: 700 14px var(--mono); color: #f2fbff; text-transform: uppercase; letter-spacing: .02em; }
.wh-arc > span:last-child { font-size: 11px; color: var(--mute); }
.wh-arc.on { box-shadow: 0 0 0 1px #e9f6ff inset !important; }

/* BruNet's story */
#wh-story { margin-top: 12px; }
.wh-story-hero { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; margin-bottom: 16px; }
.wh-rings circle:not([fill]) { fill: none; stroke: rgba(159, 232, 255, .22); stroke-width: 1; }
.wh-rings circle.new { stroke: #e9f6ff; stroke-width: 1.6; filter: drop-shadow(0 0 4px #9fe8ff); }
.wh-story-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
.wh-story-top > div { display: flex; flex-direction: column; border-left: 2px solid #9fe8ff; padding: 4px 10px; }
.wh-story-top em { font: 700 9px var(--mono); letter-spacing: .22em; color: #9fe8ff; font-style: normal; }
.wh-story-top b { font: 700 22px var(--mono); color: var(--amber); }
.wh-story { position: relative; padding-left: 20px; border-left: 1px solid rgba(159, 232, 255, .3); max-height: 70vh; overflow: auto; }
.wh-ver { position: relative; margin: 0 0 8px; padding: 6px 10px; border: 1px solid rgba(159, 232, 255, .1); }
.wh-ver[open] { background: rgba(159, 232, 255, .03); }
.wh-ver::before { content: ""; position: absolute; left: -25px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: #e9f6ff; box-shadow: 0 0 8px #9fe8ff; }
.wh-ver summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; list-style: none; }
.wh-ver summary::-webkit-details-marker { display: none; }
.wh-ver summary b { font: 700 12px var(--mono); color: #9fe8ff; letter-spacing: .1em; flex: 0 0 auto; }
.wh-ver summary span { font-size: 13px; color: #c8dbe8; }
.wh-ver ul { margin: 6px 0 2px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: #b9cad6; }
.wh-ver li::marker { color: #9fe8ff; }

/* THE MIND (owner) */
#wh-mind { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.wh-mind-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.wh-now.live { border-color: rgba(233, 246, 255, .5) !important; box-shadow: inset 0 0 40px rgba(159, 232, 255, .08); }
.wh-now-t { display: block; margin: 8px 0 2px; font: 700 18px var(--mono); color: #f2fbff; text-transform: uppercase; }
.wh-running i { display: block; height: 4px; background: rgba(159, 232, 255, .12); margin-bottom: 10px; }
.wh-running u { display: block; height: 100%; background: #e9f6ff; box-shadow: 0 0 8px #9fe8ff; transition: width .6s; }
.wh-steer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; }
.wh-steer label { flex: 1 1 100%; font: 700 9px var(--mono); letter-spacing: .2em; color: #9fe8ff; }
.wh-steer input { flex: 1 1 220px; }
.wh-prop { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px dashed rgba(159, 232, 255, .15); }
.wh-prop .quick { grid-column: 2; }
.wh-light { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #c08bff; box-shadow: 0 0 8px #c08bff; }
.wh-prop.approved .wh-light { background: #7dff9a; box-shadow: 0 0 8px #7dff9a; }
.wh-prop.dismissed { opacity: .5; } .wh-prop.dismissed .wh-light { background: #555; box-shadow: none; }
.wh-prop b { font: 700 14px var(--mono); color: #f2fbff; }
.wh-prop em { display: block; font: 600 10px var(--mono); letter-spacing: .14em; color: #c08bff; font-style: normal; text-transform: uppercase; }
.wh-prop.approved em { color: #7dff9a; }
.wh-prop p { margin: 4px 0 0; }
.wh-stream { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow: auto; }
.wh-run { border: 1px solid rgba(159, 232, 255, .15); }
.wh-run.ok { border-left: 2px solid #7dff9a; } .wh-run.bad { border-left: 2px solid #ff5a4a; } .wh-run.now { border-left: 2px solid #e9f6ff; }
.wh-run > summary { display: grid; grid-template-columns: 50px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; list-style: none; background: rgba(159, 232, 255, .03); }
.wh-run > summary::-webkit-details-marker { display: none; }
.wh-run > summary i { font: 700 10px var(--mono); font-style: normal; color: #9fe8ff; }
.wh-run > summary b { font-size: 13px; }
.wh-run > summary span { font: 700 9px var(--mono); letter-spacing: .18em; }
.wh-run.ok > summary span { color: #7dff9a; } .wh-run.bad > summary span { color: #ff5a4a; } .wh-run.now > summary span { color: #e9f6ff; }
.wh-run > summary em { font-size: 11px; color: var(--mute); font-style: normal; }
.wh-run > .wh-th { margin: 0 10px; }
.wh-th { border-left: 2px solid var(--sc); padding: 4px 10px; margin: 2px 0; }
.wh-th.bad { background: rgba(255, 90, 74, .06); }
.wh-th summary { display: grid; grid-template-columns: 120px 90px 1fr; gap: 8px; cursor: pointer; list-style: none; font-size: 12px; }
.wh-th summary::-webkit-details-marker { display: none; }
.wh-th summary span { color: var(--mute); font: 11px var(--mono); }
.wh-th summary i { font: 700 10px var(--mono); letter-spacing: .16em; color: var(--sc); font-style: normal; }
.wh-th p { margin: 4px 0 2px; font-size: 12px; color: var(--mute); white-space: pre-wrap; }

@media (max-width: 900px) {
  .wh-grid { grid-template-columns: 1fr; padding: 16px; }
  .wh-grid aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(159, 232, 255, .14); padding-top: 16px; }
  .wh-mind-top, .wh-story-hero { grid-template-columns: 1fr; }
  .wh-story-hero svg { max-width: 200px; margin: 0 auto; }
}
@media (max-width: 760px) {
  #wh-canvas { height: clamp(340px, 70vh, 520px); }
  .wh-tele, .wh-pipe { display: none; }
  .wh-spec { min-width: 0; }
  .wh-ctl span { display: none; }
  .wh-hero-t { left: 16px; right: 16px; bottom: 70px; }
  .wh-react { right: 16px; bottom: 14px; flex-direction: row; gap: 6px; }
  .wh-opts, .wh-story-top { grid-template-columns: 1fr 1fr; }
  .wh-th summary { grid-template-columns: 1fr; gap: 2px; }
  .wh-run > summary { grid-template-columns: 1fr auto; }
  .wh-run > summary i, .wh-run > summary em { display: none; }
  .wh-ev { grid-template-columns: 50px 1fr auto auto; }
}

/* ---- connections, higher or lower, practice, the week (static/js/whitehole.js) ---- */
.wh-cx, .wh-hl { margin-top: 14px; }
.wh-cx-g { padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent); border-radius: 4px; text-align: center; }
.wh-cx-g b { display: block; font: 800 12px var(--mono); letter-spacing: .14em; color: var(--gc); text-transform: uppercase; }
.wh-cx-g span { font-size: 13px; color: #e9f6ff; }
.wh-cx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wh-tile { min-height: 58px; padding: 6px !important; font: 700 12px var(--mono) !important; letter-spacing: .02em !important; text-transform: uppercase;
  white-space: normal; word-break: break-word; border: 1px solid rgba(159, 232, 255, .35) !important; background: rgba(159, 232, 255, .05) !important; color: #e9f6ff !important; }
.wh-tile:hover { border-color: #e9f6ff !important; }
.wh-tile.on { background: rgba(255, 211, 106, .16) !important; border-color: #ffd36a !important; color: #ffd36a !important; }
.wh-cx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.wh-cx-bar > span { flex: 1; font: 700 11px var(--mono); letter-spacing: .14em; color: #9fe8ff; }
.wh-cx-bar .wh-submit { margin-top: 0; }
.wh-hl-m { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.wh-hl-m em { font: 700 11px var(--mono); letter-spacing: .18em; color: #5affc8; font-style: normal; text-transform: uppercase; }
.wh-hl-m span { font: 800 14px var(--mono); color: #ffd36a; }
.wh-hl-chain { display: flex; flex-direction: column; gap: 6px; }
.wh-hl-it { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 12px; border: 1px solid rgba(90, 255, 200, .25); border-radius: 4px; }
.wh-hl-it b { color: #e9f6ff; }
.wh-hl-it span { font: 800 14px var(--mono); color: #5affc8; text-align: right; }
.wh-hl-it p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #9fb4c8; }
.wh-hl-it.next { border-style: dashed; border-color: #ffd36a; }
.wh-hl-it.next span { color: #ffd36a; }
.wh-hl-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.wh-hl-ask > span { flex: 1 1 220px; font-size: 13px; }
.wh-hl-ask button { padding: 9px 16px !important; font: 800 12px var(--mono) !important; letter-spacing: .12em !important; }
.wh-prac { display: inline-block; margin-bottom: 8px; padding: 2px 8px; font: 700 10px var(--mono); letter-spacing: .2em; color: #c08bff; border: 1px dashed #c08bff; }
.wh-prac-end { margin-top: 10px; font: 700 13px var(--mono); color: #e9f6ff; }
.wh-again { margin-top: 8px; padding: 6px 12px !important; font: 700 11px var(--mono) !important; letter-spacing: .12em !important; }
.wh-again span { font-weight: 400; color: #8a96a6; letter-spacing: 0; margin-left: 4px; }
.wh-lock { margin-top: 18px; padding-top: 12px; border-top: 1px dashed rgba(159, 232, 255, .25); }
.wh-week { margin-bottom: 14px; padding: 12px 14px; border: 1px solid rgba(159, 232, 255, .2); border-radius: 6px; }
.wh-week > div:not(.label) { position: relative; display: flex; gap: 10px; padding: 5px 2px; font: 13px var(--mono); }
.wh-week > div > i { font-style: normal; color: #9fe8ff; width: 18px; }
.wh-week > div > b { flex: 1; font-weight: 600; }
.wh-week > div > span { color: #ffd36a; }
.wh-week > div > u { position: absolute; left: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #e9f6ff, rgba(159, 232, 255, 0)); }
.wh-week > div.me b { color: #ffd36a; }
@media (max-width: 560px) { .wh-cx-grid { gap: 5px; } .wh-tile { min-height: 50px; font-size: 10px !important; } }
.wh-cx-bar button:not(.wh-submit), .wh-prac-end button, .wh-again, .wh-hl-ask button { background: rgba(159, 232, 255, .05) !important; color: #e9f6ff !important;
  border: 1px solid rgba(159, 232, 255, .35) !important; box-shadow: none !important; }
.wh-cx-bar button:disabled { opacity: .35; }
.wh-hl-ask button:hover, .wh-cx-bar button:not(:disabled):hover { border-color: #e9f6ff !important; }