/* ============================================================
   HOW IT WORKS — Windows 95 Setup wizard
   ============================================================ */
#hw-win {
  position: absolute; left: 50%; top: 47%;
  transform: translate(-50%, -50%);
  width: 860px; height: 600px;
  background: #c0c0c0;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: 6px 6px 0 rgba(0,0,0,.4);
  padding: 3px;
  font-family: var(--font-ui, Tahoma, "MS Sans Serif", sans-serif);
  color: #000;
  display: flex; flex-direction: column;
}
.hw-title {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff; font-weight: 700; font-size: 12px;
  padding: 4px 6px; cursor: move;
}
.hw-tico img, .hw-tico svg { width: 16px; height: 16px; display: block; }
.hw-wbtns { margin-left: auto; display: flex; gap: 3px; }
.hw-wbtns span {
  width: 18px; height: 16px; display: flex; align-items: center; justify-content: center;
  background: #c0c0c0; color: #000; font-size: 9px;
  border: 2px solid; border-color: #fff #404040 #404040 #fff;
}

.hw-body { display: flex; flex: 1; min-height: 0; }
.hw-side {
  width: 176px; flex: none;
  background: linear-gradient(180deg, #000060 0%, #000080 55%, #1058b0 100%);
  color: #fff; padding: 22px 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-right: 2px solid #808080;
}
.hw-side-logo img, .hw-side-logo svg { width: 96px; height: 96px; image-rendering: pixelated; }
.hw-side-t { margin-top: 16px; font: 700 20px/1.05 "IBM Plex Mono", monospace; letter-spacing: 1px; }
.hw-side-s { margin-top: 8px; font: 600 11px "IBM Plex Mono", monospace; letter-spacing: 3px; color: #9fd0ff; }
.hw-side-f { margin-top: auto; font-size: 10px; color: #b8c8ff; line-height: 1.5; }

.hw-main { flex: 1; padding: 14px 20px 10px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.hw-head { display: flex; flex-direction: column; gap: 2px; }
.hw-stepn { font-size: 10.5px; color: #555; letter-spacing: 1px; text-transform: uppercase; }
.hw-head h1 { margin: 0; font: 700 18px "IBM Plex Mono", monospace; }
.hw-text { font-size: 12px; line-height: 1.55; margin: 8px 0 10px; color: #111; flex: none; }
.hw-stage {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  background: #fff; box-shadow: var(--bevel-sunken, inset 1px 1px 0 #808080);
  padding: 14px 16px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center;
}
.hw-stage > * { flex: none; }
.hw-stage > .hw-graph, .hw-stage > .hw-cap, .hw-stage > .hw-yield { flex: 1; }
.hw-stage.hw-flip { animation: hw-flip .22s ease-out; }
@keyframes hw-flip { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.hw-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; border-top: 1px solid #808080; box-shadow: inset 0 1px 0 #fff; }
.hw-foot .dlg-btn { min-width: 82px; font-family: inherit; }
.hw-foot .dlg-btn:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; }
.hw-cancel { margin-left: 12px; }
.hw-dots { flex: 1; display: flex; gap: 5px; align-items: center; }
.hw-dots i { width: 10px; height: 10px; background: #fff; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; cursor: pointer; }
.hw-dots i.done { background: #000080; }
.hw-dots i.on { background: #1fb85a; box-shadow: 0 0 0 1px #000; }

/* ---------- generic pieces ---------- */
.hw-in { opacity: 0; animation: hw-in .35s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes hw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hw-tiny { font-size: 10.5px; color: #444; margin-top: 8px; font-style: italic; }
.hw-svg { display: block; max-width: 100%; }
.hw-graph .hw-svg { width: 100%; height: auto; max-height: calc(100% - 30px); margin: 0 auto; }
.hw-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; margin-top: 6px; color: #222; }
.hw-legend b { font-family: "IBM Plex Mono", monospace; }
.hw-graph { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.hw-graph .hw-legend { justify-content: center; }
.hw-ax { stroke: #000; stroke-width: 1.5; }
.hw-dash { stroke: #808080; stroke-dasharray: 4 4; }
.hw-lab { font: 10px Tahoma, sans-serif; fill: #333; }
.hw-val { font: 700 11px "IBM Plex Mono", monospace; fill: #000080; }
.hw-line { fill: none; stroke: #000080; stroke-width: 3; }
.hw-draw { stroke-dasharray: 600; stroke-dashoffset: 600; animation: hw-draw 1.4s ease-out forwards .2s; }
.hw-draw2 { stroke-dasharray: 900; stroke-dashoffset: 900; animation: hw-draw 1.8s linear forwards .1s; }
@keyframes hw-draw { to { stroke-dashoffset: 0; } }
.hw-dot { fill: #1fb85a; stroke: #000; stroke-width: 1.5; }

/* 1 & 14: install checklist */
.hw-install { font: 13px "IBM Plex Mono", monospace; display: flex; flex-direction: column; gap: 9px; }
.hw-chk { opacity: 0; animation: hw-in .25s steps(1) forwards; animation-delay: var(--d); }
.hw-chk i { font-style: normal; color: #000080; margin-right: 6px; }
.hw-chk.hw-x i, .hw-chk.hw-x b { color: #b00; }
.hw-bar { height: 18px; background: #fff; box-shadow: var(--bevel-sunken, inset 1px 1px 0 #808080); padding: 2px; margin-top: 10px; }
.hw-bar-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 10px, #fff 10px 12px); animation: hw-fill 3.2s steps(12) forwards; }
@keyframes hw-fill { to { width: 100%; } }

/* 2: formula */
.hw-formula { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.hw-box { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 10px 14px; text-align: center; min-width: 150px; }
.hw-box small { display: block; font-size: 9.5px; letter-spacing: 1px; color: #333; }
.hw-box b { display: block; font: 700 22px "IBM Plex Mono", monospace; margin: 3px 0; }
.hw-box em { font-style: normal; font-size: 10px; color: #555; }
.hw-box.hw-hot { background: #ffffc8; }
.hw-box.hw-hot b { color: #0a7a0a; font-size: 26px; }
.hw-op { font: 700 26px "IBM Plex Mono", monospace; }
.hw-floor { margin-top: 26px; text-align: center; font-size: 12px; }
.hw-floor span { background: #000080; color: #fff; font: 700 10px "IBM Plex Mono", monospace; padding: 2px 6px; margin-right: 8px; }

/* 3: vault */
.hw-vault { display: flex; flex-direction: column; gap: 6px; }
.hw-drawer { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 7px 12px; display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.hw-drawer b { font-family: "IBM Plex Mono", monospace; }
.hw-drawer span { font-size: 10.5px; color: #333; }
.hw-exits { display: flex; gap: 12px; margin-top: 16px; }
.hw-door { flex: 1; position: relative; background: #d8ffe0; border: 2px solid #1e8f3a; padding: 8px 10px; font-size: 12px; font-weight: 700; }
.hw-door i { display: block; font: 600 9px "IBM Plex Mono", monospace; letter-spacing: 2px; color: #1e8f3a; margin-bottom: 3px; }
.hw-door.hw-dead { background: #eee; border-color: #999; color: #888; }
.hw-door.hw-dead i { color: #999; }
.hw-stamp { position: absolute; right: 8px; top: 6px; transform: rotate(-12deg); color: #b00; border: 2px solid #b00; padding: 1px 6px; font: 700 12px "IBM Plex Mono", monospace; opacity: 0; animation: hw-stamp .3s cubic-bezier(.2,1.6,.4,1) forwards 3.2s; }
@keyframes hw-stamp { from { opacity: 0; transform: rotate(-12deg) scale(2.4); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }

/* 4: bonds */
.hw-flow { display: flex; align-items: center; gap: 8px; justify-content: center; }
.hw-node { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 8px 12px; font: 700 12px "IBM Plex Mono", monospace; text-align: center; min-width: 96px; }
.hw-node small { display: block; font: 9.5px Tahoma, sans-serif; color: #333; margin-top: 3px; line-height: 1.3; }
.hw-node-p { background: #ffffc8; }
.hw-wire { position: relative; width: 90px; height: 24px; display: flex; align-items: center; justify-content: center; color: #555; font-size: 16px; }
.hw-coin { position: absolute; left: 0; top: 0; padding: 3px 6px; font: 700 10px "IBM Plex Mono", monospace; color: #fff; animation: hw-coin 2.4s linear infinite; }
.hw-usdg { background: #1e8f3a; }
.hw-strat { background: #000080; animation-name: hw-coin-back; animation-delay: 1.2s; }
@keyframes hw-coin { 0% { transform: translateX(-10px); opacity: 0; } 15% { opacity: 1; } 45% { opacity: 1; } 50% { transform: translateX(60px); opacity: 0; } 100% { opacity: 0; } }
@keyframes hw-coin-back { 0% { transform: translateX(60px); opacity: 0; } 15% { opacity: 1; } 45% { opacity: 1; } 50% { transform: translateX(-10px); opacity: 0; } 100% { opacity: 0; } }
.hw-bars { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; }
.hw-brow { display: flex; align-items: center; gap: 10px; }
.hw-brow > span { width: 62px; font-weight: 700; }
.hw-btrack { flex: 1; height: 16px; background: #fff; box-shadow: var(--bevel-sunken, inset 1px 1px 0 #808080); display: flex; padding: 2px; }
.hw-bfill { height: 100%; background: #1e8f3a; }
.hw-badd { height: 100%; width: 0; background: repeating-linear-gradient(45deg, #7fdc9a 0 4px, #1e8f3a 4px 8px); transition: width 1.2s ease-out; }
.hw-bsup { background: #000080; }
.hw-badd.hw-bsup { background: repeating-linear-gradient(45deg, #8aa0ff 0 4px, #000080 4px 8px); }
.hw-brow b { font: 700 12px "IBM Plex Mono", monospace; min-width: 60px; }
.hw-brow-hot b { color: #0a7a0a; font-size: 15px; }
.hw-brow em { font-size: 10.5px; color: #555; }

/* 5: tax */
.hw-tax { display: flex; flex-direction: column; }
.hw-tlabel { font: 600 9.5px "IBM Plex Mono", monospace; letter-spacing: 2px; color: #555; margin-bottom: 6px; }
.hw-trow { display: flex; align-items: center; gap: 6px; }
.hw-tnode { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 8px 10px; font: 700 11px "IBM Plex Mono", monospace; text-align: center; min-width: 96px; line-height: 1.3; }
.hw-tpool { background: #e8f4ff; border-color: #000080; }
.hw-ttreas { background: #ffffc8; }
.hw-ttreas b { display: block; margin-top: 4px; color: #0a7a0a; font-size: 12px; }
.hw-ttreas b.hw-bump2 { animation: hw-bump2 .35s ease-out; }
@keyframes hw-bump2 { 50% { transform: scale(1.18); } }
.hw-tlane { position: relative; flex: 1; height: 26px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 16px; min-width: 90px; }
.hw-tlane-long { flex: 2; }
.hw-tcoin, .hw-tchip { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); padding: 3px 7px; font: 700 10px "IBM Plex Mono", monospace; color: #fff; white-space: nowrap; opacity: 0; transition: transform .9s cubic-bezier(.4,0,.6,1), opacity .2s; }
.hw-tcoin.show, .hw-tchip.show { opacity: 1; }
.hw-tcoin-buy { background: #1e8f3a; }
.hw-tcoin-sell { background: #b00; }
.hw-tcoin-grey { background: #666; }
.hw-tchip { background: #0a7a0a; }
.hw-tzero { font: 700 11px "IBM Plex Mono", monospace; color: #0a7a0a; margin-left: 10px; }

/* 6: yield */
.hw-yield { display: flex; align-items: center; justify-content: center; gap: 14px; height: 100%; }
.hw-mvault { position: relative; width: 190px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; padding: 12px; text-align: center; }
.hw-mvault b { font: 700 13px "IBM Plex Mono", monospace; display: block; }
.hw-mvault small { display: block; font-size: 10px; color: #333; }
.hw-mvault em { display: block; margin-top: 10px; font: 700 12px "IBM Plex Mono", monospace; color: #0a7a0a; font-style: normal; }
.hw-buyb { background: #ffffc8; }
.hw-plus { position: absolute; right: 10px; top: 10px; font: 700 18px "IBM Plex Mono", monospace; color: #0a7a0a; animation: hw-plus 2.7s linear infinite; animation-delay: var(--d); opacity: 0; }
@keyframes hw-plus { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 60% { transform: translateY(-34px); opacity: 0; } 100% { opacity: 0; } }
.hw-unwind { font-size: 11px; color: #000080; font-weight: 700; }

/* 7: mint cap */
.hw-cap { position: relative; display: flex; gap: 60px; justify-content: center; align-items: flex-end; height: 100%; padding: 0 40px 8px; }
.hw-col { position: relative; width: 120px; height: 100%; display: flex; align-items: flex-end; }
.hw-colbar { width: 100%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font: 700 11px "IBM Plex Mono", monospace; color: #fff; transition: height 1.4s cubic-bezier(.3,.9,.4,1); }
.hw-res { background: #1e8f3a; }
.hw-sup { background: #000080; }
.hw-sup.hw-bump { animation: hw-bump .4s ease-out 2; }
@keyframes hw-bump { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hw-ceiling { position: absolute; left: -20px; right: -20px; border-top: 3px dashed #b00; }
.hw-ceiling i { position: absolute; right: 0; top: -16px; font: 700 10px "IBM Plex Mono", monospace; color: #b00; }
.hw-mintdlg { position: absolute; right: 30px; top: 22px; width: 190px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 4px 4px 0 rgba(0,0,0,.3); font-size: 11.5px; opacity: 0; transform: scale(.7); }
.hw-mintdlg.on { animation: hw-pop .2s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes hw-pop { to { opacity: 1; transform: none; } }
.hw-mintdlg-t { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font: 700 11px "IBM Plex Mono", monospace; padding: 3px 6px; }
.hw-mintdlg-b { padding: 8px; line-height: 1.4; }
.hw-mintdlg-b i { color: #b00; font-style: normal; font-weight: 700; margin-right: 4px; }
.hw-mintdlg-b small { color: #444; }

/* 9: buyback graph */
.hw-book { stroke: #000; stroke-width: 1.5; stroke-dasharray: 6 4; }
.hw-bid { stroke: #1e8f3a; stroke-width: 2; }
.hw-lab-bid { fill: #1e8f3a; font-weight: 700; }
.hw-price { fill: none; stroke: #000080; stroke-width: 2; }
.hw-burnfx { opacity: 0; }
.hw-burnfx.on { animation: hw-burn .8s ease-out forwards; }
@keyframes hw-burn { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.hw-burnt { font: 700 11px "IBM Plex Mono", monospace; fill: #b00; }

/* 10: flywheel */
.hw-wheel { position: relative; width: 540px; height: 300px; margin: 0 auto; }
.hw-wheel .hw-svg { position: absolute; left: 0; top: 0; width: 540px; height: 300px; }
.hw-ring { fill: none; stroke: #e0e0e0; stroke-width: 10; }
.hw-ring-arrows { fill: none; stroke: #000080; stroke-width: 10; stroke-dasharray: 26 18; animation: hw-spin 6s linear infinite; }
@keyframes hw-spin { to { stroke-dashoffset: -704; } }
.hw-center { font: 700 13px "IBM Plex Mono", monospace; fill: #000; }
.hw-center2 { font: 700 12px "IBM Plex Mono", monospace; fill: #0a7a0a; }
.hw-wnode { position: absolute; transform: translate(-50%, -50%); background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 3px 3px 0 rgba(0,0,0,.25); padding: 6px 10px; font: 700 11px "IBM Plex Mono", monospace; text-align: center; width: 136px; }
.hw-wnode small { display: block; font: 9.5px Tahoma, sans-serif; color: #333; margin-top: 2px; font-weight: 400; }
.hw-wnode.hw-in { animation-name: hw-in-c; }
@keyframes hw-in-c { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* 12: roles */
.hw-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.hw-table th { width: 96px; text-align: left; vertical-align: top; padding: 7px 8px; font: 700 12px "IBM Plex Mono", monospace; background: #c0c0c0; border: 1px solid #808080; }
.hw-table th small { display: block; font: 9.5px Tahoma, sans-serif; color: #333; font-weight: 400; }
.hw-table td { padding: 7px 10px; border: 1px solid #808080; line-height: 1.45; }
.hw-row-nothing td { font-size: 15px; background: #ffffc8; }
.hw-row-nothing td b { font-family: "IBM Plex Mono", monospace; }

/* 13: is / isn't */
.hw-two { display: flex; gap: 14px; }
.hw-panel { flex: 1; border: 2px solid; padding: 10px 14px; font-size: 12px; }
.hw-panel b { display: block; font: 700 12px "IBM Plex Mono", monospace; letter-spacing: 2px; margin-bottom: 6px; }
.hw-panel ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.hw-is { border-color: #1e8f3a; background: #d8ffe0; }
.hw-is b { color: #1e8f3a; }
.hw-isnt { border-color: #b00; background: #ffe0e0; }
.hw-isnt b { color: #b00; }

/* resize grip */
.hw-grip { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 50%, #808080 50% 58%, transparent 58% 66%, #808080 66% 74%, transparent 74% 82%, #808080 82% 90%, transparent 90%); }
#hw-win { position: absolute; }

/* finish */
.hw-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.hw-done-logo img, .hw-done-logo svg { width: 84px; height: 84px; image-rendering: pixelated; animation: hw-in .6s ease-out both; }
.hw-done-t { font: 700 18px "IBM Plex Mono", monospace; animation: hw-in .5s ease-out both .3s; }
.hw-done-s { font-size: 12px; color: #333; min-height: 18px; animation: hw-in .5s ease-out both .6s; }
.hw-done-ok { font-style: normal; color: #0a7a0a; font-weight: 700; margin-right: 4px; }
.hw-done-bar { width: 320px; margin-top: 4px; }
.hw-done-bar .hw-bar-fill { animation-duration: 2.1s; }
#hw-win.hw-away { transition: transform .8s cubic-bezier(.5,0,.8,.4), opacity .8s; transform-origin: 0 100%; transform: translate(-40%, 60vh) scale(.1); opacity: 0; }

/* v2: all revenue into the vault */
.hw-rev { display: flex; flex-direction: column; align-items: center; }
.hw-rev-src { display: flex; gap: 14px; justify-content: center; }
.hw-rev-src .hw-node { min-width: 130px; }
.hw-rev-arrows { position: relative; width: 430px; height: 64px; }
.hw-rev-arrows i { position: absolute; top: 18px; left: var(--x); transform: translateX(-50%); color: #999; font-size: 18px; font-style: normal; }
.hw-rev-coin { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); font: 700 16px "IBM Plex Mono", monospace; color: #0a7a0a; opacity: 0; animation: hw-revdrop 2.4s linear infinite; animation-delay: var(--d); }
@keyframes hw-revdrop { 0% { transform: translate(-50%, 0); opacity: 0; } 15% { opacity: 1; } 85% { transform: translate(-50%, 50px); opacity: 1; } 100% { transform: translate(-50%, 56px); opacity: 0; } }
.hw-rev-vault { min-width: 220px; }
.hw-rev-vault b { display: block; margin-top: 4px; color: #0a7a0a; font-size: 14px; }
.hw-v2 .hw-side-s { color: #ffe14d; }
.hw-v2 .hw-head h1 { font-size: 20px; }
.hw-v2 .hw-text { font-size: 13px; }

/* embedded in a real WM window (the main site): no chrome of its own */
#hw-win.hw-embedded { position: static; width: 100%; height: 100%; transform: none; box-shadow: none; border: 0; padding: 0; animation: none; }
#hw-win.hw-embedded.hw-away { transition: transform .8s cubic-bezier(.5,0,.8,.4), opacity .8s; transform: scale(.05); opacity: 0; }
.hw-host { height: 100%; }
@media (max-width: 700px) {
  #hw-win.hw-embedded .hw-side { display: none; }
  #hw-win.hw-embedded .hw-main { padding: 10px 12px 8px; }
  #hw-win.hw-embedded .hw-head h1 { font-size: 15px; }
  #hw-win.hw-embedded .hw-text { font-size: 11.5px; }
}