/* Pedro-Network deck engine — shared styles for the hub and every per-project deck. */
:root{
  --bg:#070a14; --bg2:#0c1120; --panel:rgba(18,24,42,.62); --panel2:rgba(24,31,54,.7);
  --ink:#eaf0ff; --muted:#8a97b8; --faint:#5b688c;
  --cyan:#5fd0ff; --violet:#b06cff; --gold:#ffd35c; --red:#ff6b6b; --green:#67e08a;
  --line:rgba(120,140,200,.16); --line2:rgba(120,140,200,.28);
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(1200px 800px at 78% -10%, #14203c 0%, transparent 55%),
             radial-gradient(1000px 700px at 0% 110%, #1a1330 0%, transparent 55%),
             var(--bg);
  color:var(--ink); font-family:var(--font); overflow:hidden; -webkit-font-smoothing:antialiased;
}
#bg{position:fixed; inset:0; z-index:0; pointer-events:none}

/* ---------- top bar ---------- */
.topbar{position:fixed; top:0; left:0; right:0; height:56px; z-index:30;
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
  background:linear-gradient(180deg, rgba(7,10,20,.92), rgba(7,10,20,0));}
.brand{display:flex; align-items:baseline; gap:12px}
.brand b{font-size:16px; letter-spacing:.32em; font-weight:700}
.brand b i{font-style:normal; color:var(--cyan)}
.brand .sub{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.homebtn{align-self:center; cursor:pointer; border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  border-radius:9px; padding:6px 11px; font-size:12px; font-weight:600; margin-right:4px; transition:background .15s, border-color .15s}
.homebtn:hover{background:rgba(95,208,255,.16); border-color:var(--cyan)}
.status{display:flex; align-items:center; gap:14px}
.status .legend{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.dots{display:flex; gap:9px}
.dot{position:relative; display:flex; align-items:center; gap:6px; cursor:pointer;
  font-size:10.5px; letter-spacing:.06em; color:var(--muted); background:none; border:0; padding:2px 2px}
.dot i{width:9px; height:9px; border-radius:50%; background:#39425e;
  box-shadow:0 0 0 0 rgba(0,0,0,0); transition:background .3s, box-shadow .3s}
.dot[data-st="ready"] i{background:var(--green); box-shadow:0 0 10px rgba(103,224,138,.7)}
.dot[data-st="warming"] i{background:var(--gold); box-shadow:0 0 10px rgba(255,211,92,.6); animation:pulse 1.1s infinite}
.dot[data-st="down"] i{background:#46506e}
.dot:hover{color:var(--ink)}
/* names uniform; the LEDs beside them carry the six pride stripes when ready */
.dots .dot[data-st="ready"]:nth-child(1) i{background:#ff6b6b; box-shadow:0 0 10px rgba(255,107,107,.75)}
.dots .dot[data-st="ready"]:nth-child(2) i{background:#ffa14f; box-shadow:0 0 10px rgba(255,161,79,.75)}
.dots .dot[data-st="ready"]:nth-child(3) i{background:#ffd35c; box-shadow:0 0 10px rgba(255,211,92,.75)}
.dots .dot[data-st="ready"]:nth-child(4) i{background:#67e08a; box-shadow:0 0 10px rgba(103,224,138,.75)}
.dots .dot[data-st="ready"]:nth-child(5) i{background:#5fd0ff; box-shadow:0 0 10px rgba(95,208,255,.75)}
.dots .dot[data-st="ready"]:nth-child(6) i{background:#b06cff; box-shadow:0 0 10px rgba(176,108,255,.75)}
@keyframes pulse{50%{opacity:.45}}

.progress{position:fixed; top:0; left:0; height:3px; z-index:31; width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 14px rgba(95,208,255,.6); transition:width .5s ease}

/* ---------- stage ---------- */
.stage{position:fixed; inset:56px 0 74px 0; z-index:10; display:flex; align-items:center; justify-content:center}
.slide{position:absolute; inset:0; display:flex; align-items:center; align-items:safe center; justify-content:center;
  padding:24px 7vw; opacity:0; visibility:hidden; transform:translateY(14px) scale(.992);
  transition:opacity .5s ease, transform .5s ease; pointer-events:none; overflow-y:auto}
.slide.active{opacity:1; visibility:visible; transform:none; pointer-events:auto}
.wrap{width:100%; max-width:1180px}

.eyebrow{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--cyan); margin:0 0 14px}
.eyebrow .act{color:var(--muted)}
.kicker{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--violet); margin:0 0 10px}
h1.big{font-size:clamp(30px,5vw,62px); line-height:1.04; margin:0 0 18px; font-weight:700; letter-spacing:-.01em}
h2.title{font-size:clamp(26px,3.6vw,46px); line-height:1.08; margin:0 0 16px; font-weight:700; letter-spacing:-.01em}
.lead{font-size:clamp(16px,1.7vw,21px); line-height:1.5; color:#cdd7f3; margin:0 0 18px; max-width:42ch}
.body p{font-size:clamp(14px,1.25vw,16.5px); line-height:1.62; color:#b9c4e4; margin:0 0 12px; max-width:64ch}
.note{margin-top:16px; font-size:12.5px; line-height:1.55; color:var(--muted); max-width:62ch;
  border-left:2px solid var(--line2); padding:4px 0 4px 14px}
.note b{color:#cfd8f4; font-weight:600}

/* stat strip */
.stats{display:flex; flex-wrap:wrap; gap:14px; margin:22px 0 6px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 18px; min-width:150px;
  backdrop-filter:blur(6px)}
.stat .v{font-size:clamp(22px,2.8vw,32px); font-weight:700; line-height:1; letter-spacing:-.01em}
.stat .l{font-size:11.5px; letter-spacing:.04em; color:var(--muted); margin-top:8px; text-transform:uppercase}
.stat.red .v{color:var(--red)} .stat.gold .v{color:var(--gold)} .stat.cyan .v{color:var(--cyan)}
.stat.violet .v{color:var(--violet)} .stat.green .v{color:var(--green)}

/* cover */
.cover{text-align:center}
.cover .mark{font-size:clamp(40px,8vw,104px); font-weight:800; letter-spacing:.06em; margin:0;
  background:linear-gradient(120deg,#eaf0ff 0%, var(--cyan) 50%, var(--violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.cover .mark i{font-style:normal; -webkit-text-fill-color:var(--cyan)}
/* the gleam: a second background layer sweeps across the clipped letters —
   soft entry, full pass, gone off the edge. No pseudo-elements (fragile). */
.cover .mark{
  background:
    linear-gradient(105deg, transparent 32%, rgba(255,255,255,.95) 50%, transparent 68%),
    linear-gradient(120deg,#eaf0ff 0%, var(--cyan) 50%, var(--violet) 100%);
  background-size:280% 100%, 100% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:markGleam 5.6s ease-in-out infinite;
}
@keyframes markGleam{
  0%{background-position:210% 0, 0 0}
  50%{background-position:-80% 0, 0 0}
  100%{background-position:-80% 0, 0 0}
}
.cover .tag{font-size:clamp(16px,2vw,23px); color:#cdd7f3; max-width:60ch; margin:22px auto 0; line-height:1.5}
.cover .tag.big{font-size:clamp(23px,3.2vw,37px); line-height:1.35; max-width:44ch; color:#dfe7fb}
.cover-kicker{font-size:12.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin:0 0 20px}
.cover-kicker.k2{font-size:11px; color:var(--faint); margin:-14px 0 20px}
.chip{display:inline-block; margin-top:26px; padding:10px 18px; border-radius:999px; border:1px solid var(--line2);
  background:rgba(255,107,107,.08); color:#ffd0d0; font-size:13px; letter-spacing:.02em}
.cover .hint{position:fixed; left:0; right:0; bottom:82px; margin:0; text-align:center;
  color:var(--faint); font-size:11.5px; letter-spacing:.04em}
.cover-appeal{margin:36px auto 0; font-size:15.5px; color:#c4cfec; max-width:56ch; line-height:1.6}
.cover-sig{margin-top:12px; font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:14px; color:var(--gold); letter-spacing:.08em}

/* the pedro-coin button — placed to the side, gently asking to be pressed */
.wg-pedrocoin{position:absolute; left:auto; right:12vw; top:46%; transform:translateY(-50%); text-align:center; z-index:3}
.pcoin{cursor:pointer; width:128px; height:128px; border-radius:50%;
  border:2px solid rgba(255,211,92,.6);
  background:radial-gradient(circle at 34% 28%, #ffedb4, #e3b23c 62%, #a97c1f);
  color:#5c430a; font-weight:800; font-size:17px; letter-spacing:.02em;
  box-shadow:0 0 26px rgba(255,211,92,.35);
  animation:pcoinPulse 2.4s ease-in-out infinite; transition:transform .12s}
.pcoin:hover{animation-play-state:paused; box-shadow:0 0 44px rgba(255,211,92,.65)}
.pcoin:active{transform:scale(.9)}
@keyframes pcoinPulse{0%,100%{box-shadow:0 0 22px rgba(255,211,92,.3)} 50%{box-shadow:0 0 46px rgba(255,211,92,.6)}}
.pc-cap{margin-top:14px; font-size:12px; color:var(--muted); line-height:1.5; letter-spacing:.04em}

/* modern server racks — they survive the meteor */
.wg-servers{max-width:620px}
.srv-row{display:flex; gap:22px; flex-wrap:wrap; margin:4px 0 2px}
.srv{display:flex; flex-direction:column; align-items:center; gap:6px}
.srv svg{width:52px; height:68px}
.srv .case{fill:rgba(20,27,48,.85); stroke:rgba(120,140,200,.4); stroke-width:1.4}
.srv .slot{fill:rgba(95,208,255,.10); stroke:rgba(95,208,255,.30); stroke-width:.8}
.srv .sled{fill:var(--green)}
.srv svg .sled:nth-of-type(1){animation:sledBlink 1.6s infinite}
.srv .sled{animation:sledBlink 2.1s infinite}
.srv:nth-child(2) .sled{animation-delay:.4s}
.srv:nth-child(3) .sled{animation-delay:.8s}
@keyframes sledBlink{0%,100%{opacity:1} 50%{opacity:.35}}
.srv-n{font-size:11px; color:#c4cfec; letter-spacing:.03em}
.srv-s{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--green)}
.wg-servers .wg-meteorbtn{margin-top:12px}
/* the racks take the hit — shake, flash, keep running */
.wg-servers.hit .srv svg{animation:srvShake .55s}
@keyframes srvShake{20%{transform:translate(3px,-2px) rotate(1.6deg)} 40%{transform:translate(-3px,2px) rotate(-1.2deg)} 60%{transform:translate(2px,1px)} 80%{transform:translate(-2px,-1px)}}
.wg-servers.hit .sled{animation:sledFlash .7s}
@keyframes sledFlash{0%{fill:#fff} 45%{fill:var(--gold)} 100%{fill:var(--green)}}

/* the giant translucent 6–7 across the page background */
.bgword{position:absolute; inset:0; z-index:-1; display:flex; align-items:center; justify-content:center;
  font-size:min(52vh,30vw); font-weight:900; letter-spacing:.02em; pointer-events:none; user-select:none;
  background:linear-gradient(120deg,var(--cyan) 15%,var(--violet) 55%,var(--gold) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.08; animation:bgwordPulse 5.5s ease-in-out infinite}
@keyframes bgwordPulse{0%,100%{opacity:.055} 50%{opacity:.095}}

/* watermark behind a live frame */
.framecol{position:relative}
.frame-wm{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(40px,4.6vw,64px); font-weight:800; letter-spacing:.2em; color:rgba(140,170,230,.05);
  transform:rotate(-14deg) scale(1.25); pointer-events:none; white-space:nowrap}
.frame-wm i{font-style:normal; color:rgba(95,208,255,.08)}

/* clickable headline (the whole title is the button) */
.title.tlink{cursor:pointer; display:inline-block;
  background:linear-gradient(120deg,#eaf0ff 10%,var(--cyan) 50%,var(--violet) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:filter .2s}
.title.tlink:hover{filter:brightness(1.3) drop-shadow(0 0 18px rgba(95,208,255,.35))}

/* centered finale layout */
.wrap.centerwrap{text-align:center}
.centerwrap .body p{margin-left:auto; margin-right:auto}
.centerwrap .recap{justify-content:center}
.centerwrap .livectl{justify-content:center}
.centerwrap .title.tlink{font-size:clamp(34px,4.8vw,62px); margin-top:6px}
.centerwrap .bk-rule{margin:18px auto 22px}

/* the grand close */
.wrap.closegrand{text-align:center}
.title.grand{font-size:clamp(30px,4.4vw,56px);
  background:linear-gradient(120deg,#eaf0ff 5%,var(--cyan) 45%,var(--violet) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.recap.grid{display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:12px;
  max-width:860px; margin:28px auto; text-align:left}
.recap.grid .r{border-radius:12px; padding:13px 17px; font-size:13.5px; border-left:3px solid var(--cyan)}
.recap.grid .r:nth-child(2){border-left-color:var(--green)}
.recap.grid .r:nth-child(3){border-left-color:var(--gold)}
.recap.grid .r:nth-child(4){border-left-color:var(--violet)}
.recap.grid .r:nth-child(5){border-left-color:var(--red)}
.lead.center{margin-left:auto; margin-right:auto}
.livectl.center{justify-content:center}
.close-sig{margin:22px 0 4px; font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:15px; color:var(--gold); letter-spacing:.08em}
.recap.chips{margin:18px 0 4px}

/* ---------- staggered entry: each slide's elements arrive in reading order ---------- */
.slide .eyebrow{opacity:0; transform:translateY(7px); transition:opacity .4s .05s, transform .4s .05s}
.slide .kicker{opacity:0; transform:translateY(7px); transition:opacity .4s .14s, transform .4s .14s}
.slide .title{opacity:0; transform:translateY(9px); transition:opacity .5s .24s, transform .5s .24s}
.slide .lead, .slide .body{opacity:0; transform:translateY(9px); transition:opacity .5s .38s, transform .5s .38s}
.slide .look{opacity:0; transition:opacity .5s .5s}
.slide .stats, .slide .viz, .slide .wgt, .slide .recap, .slide .panel, .slide .note{opacity:0; transform:translateY(10px); transition:opacity .55s .52s, transform .55s .52s}
.slide .wg-pedrocoin{opacity:0; transition:opacity .6s .6s}   /* keeps its own transform */
.slide .livectl{opacity:0; transition:opacity .5s .66s}
.slide .framecol{opacity:0; transform:translateX(16px); transition:opacity .6s .45s, transform .6s .45s}
.slide.active .eyebrow, .slide.active .kicker, .slide.active .title,
.slide.active .lead, .slide.active .body, .slide.active .look,
.slide.active .stats, .slide.active .viz, .slide.active .wgt, .slide.active .recap,
.slide.active .panel, .slide.active .note, .slide.active .livectl{opacity:1; transform:none}
.slide.active .wg-pedrocoin{opacity:1}
.slide.active .framecol{opacity:1; transform:none}
/* still mode (screen capture): everything lands instantly */
html.still .slide *, html.still .slide::before, html.still .slide::after{transition:none !important; animation-delay:0s !important}

/* chapter break — the page turns */
.wrap.break{text-align:center}
.bk-top{font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint)}
.bk-top b{color:var(--green); font-weight:600}
.bk-rule{width:min(440px,60%); height:2px; margin:28px auto; border-radius:2px;
  background:rgba(120,140,200,.14); position:relative; overflow:hidden}
.bk-rule i{position:absolute; inset:0; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--gold));
  box-shadow:0 0 14px rgba(176,108,255,.5);
  transition:width 1.25s cubic-bezier(.2,.7,.2,1) .35s}
.slide.active .bk-rule i{width:100%}
.bk-title{font-size:clamp(32px,4.6vw,60px); font-weight:800; letter-spacing:-.01em; margin:0; line-height:1.12;
  background:linear-gradient(120deg,#eaf0ff 10%,var(--cyan) 50%,var(--violet) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.bk-sub{margin:24px auto 0; color:var(--muted); font-size:clamp(14px,1.5vw,18px); max-width:54ch; line-height:1.65}
/* staggered entry */
.slide .bk-top{opacity:0; transform:translateY(8px); transition:opacity .5s .15s, transform .5s .15s}
.slide .bk-title{opacity:0; transform:translateY(12px); transition:opacity .65s .55s, transform .65s .55s}
.slide .bk-sub{opacity:0; transition:opacity .6s 1.05s}
.slide.active .bk-top, .slide.active .bk-title{opacity:1; transform:none}
.slide.active .bk-sub{opacity:1}

/* live two-column */
.live{display:grid; grid-template-columns:1.05fr 1fr; gap:42px; align-items:center}
.look{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:9px}
.look li{position:relative; padding-left:26px; font-size:14.5px; color:#c4cfec; line-height:1.4}
.look li::before{content:""; position:absolute; left:4px; top:7px; width:8px; height:8px; border-radius:2px;
  background:var(--cyan); box-shadow:0 0 8px rgba(95,208,255,.7); transform:rotate(45deg)}
.livectl{display:flex; align-items:center; gap:16px; margin-top:26px; flex-wrap:wrap}
.open{display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:0; border-radius:12px;
  padding:14px 24px; font-size:15px; font-weight:600; color:#06121f; letter-spacing:.01em;
  background:linear-gradient(120deg,var(--cyan),#7ee3ff); box-shadow:0 10px 30px rgba(95,208,255,.28); transition:transform .15s, box-shadow .15s}
.open:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(95,208,255,.4)}
.open .url{display:block}
.open.secondary{background:transparent; color:var(--cyan); border:1px solid var(--cyan); box-shadow:none}
.open.secondary:hover{background:rgba(95,208,255,.12); box-shadow:none}
.open.violet{background:linear-gradient(120deg,var(--violet),#c98cff); color:#0d0820; box-shadow:0 10px 30px rgba(176,108,255,.28)}
.pill{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.04em; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:7px 13px; text-transform:uppercase}
.pill i{width:8px;height:8px;border-radius:50%;background:#39425e}
.pill[data-st="ready"] i{background:var(--green); box-shadow:0 0 9px rgba(103,224,138,.7)}
.pill[data-st="ready"]{color:#bdeccb; border-color:rgba(103,224,138,.3)}
.pill[data-st="warming"] i{background:var(--gold); animation:pulse 1.1s infinite}
.pill[data-st="warming"]{color:#f3e2b0}
.urlline{margin-top:12px; font-size:12px; color:var(--faint); font-family:ui-monospace,Consolas,monospace; letter-spacing:0}

.frame{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line2);
  background:linear-gradient(180deg,#0e1428,#0a0f1f); box-shadow:var(--shadow); cursor:pointer; aspect-ratio:16/10}
.frame .bar{height:30px; display:flex; align-items:center; gap:7px; padding:0 12px;
  background:rgba(10,14,28,.9); border-bottom:1px solid var(--line)}
.frame .bar span{width:9px;height:9px;border-radius:50%;background:#39425e}
.frame .bar .u{margin-left:10px; font-size:10.5px; color:var(--faint); font-family:ui-monospace,Consolas,monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.frame .shot{position:absolute; inset:30px 0 0 0; width:100%; height:calc(100% - 30px); object-fit:cover; object-position:top center; display:block}
video.shot{background:#0a0f1f}
.frame:has(video.shot) .play{display:none}
/* screenshot carousel inside the frame */
.frame .car{position:absolute; inset:30px 0 0 0}
.frame .car .shot{inset:0; height:100%; opacity:0; transition:opacity .8s ease}
.frame .car .shot.on{opacity:1}
.frame .cardots{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:4}
.frame .cardots .cd{width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.28); transition:background .25s, transform .15s}
.frame .cardots .cd:hover{transform:scale(1.3)}
.frame .cardots .cd.on{background:var(--cyan); box-shadow:0 0 9px rgba(95,208,255,.8)}
.frame .ph{position:absolute; inset:30px 0 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted)}
.frame .ph b{font-size:20px; color:var(--ink); letter-spacing:.04em}
.frame .play{position:absolute; left:50%; top:calc(50% + 15px); transform:translate(-50%,-50%); z-index:3;
  width:64px;height:64px;border-radius:50%; background:rgba(7,12,24,.6); border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center; backdrop-filter:blur(3px); transition:transform .15s, background .15s}
.frame:hover .play{transform:translate(-50%,-50%) scale(1.08); background:rgba(95,208,255,.22)}
.frame .play::after{content:""; border-left:18px solid var(--ink); border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:5px}

/* generic two-column for deep-dive content (no live frame) */
.cols{display:grid; grid-template-columns:1.1fr 1fr; gap:42px; align-items:start}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px 22px; backdrop-filter:blur(6px)}
.panel h4{margin:0 0 12px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan)}
.steps-list{list-style:none; margin:0; padding:0; counter-reset:st}
.steps-list li{position:relative; padding:10px 0 10px 40px; border-bottom:1px solid var(--line); font-size:14.5px; color:#c4cfec; line-height:1.45}
.steps-list li:last-child{border-bottom:0}
.steps-list li::before{counter-increment:st; content:counter(st); position:absolute; left:0; top:9px; width:26px; height:26px;
  border-radius:50%; border:1px solid var(--line2); color:var(--gold); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center}
.steps-list li b{color:#eaf0ff; font-weight:600}

/* map */
.mapwrap{display:grid; grid-template-columns:1fr 1.25fr; gap:40px; align-items:center}
#map{width:100%; height:auto}
.mapcap{min-height:46px; margin-top:10px; font-size:13.5px; color:#c4cfec; line-height:1.5}
.mlegend{display:flex; gap:18px; margin-top:8px; font-size:11.5px; color:var(--muted); letter-spacing:.04em}
.mlegend span{display:inline-flex; align-items:center; gap:7px}
.mlegend i{width:9px;height:9px;border-radius:50%}
.mnode{cursor:pointer} .mnode text{font-size:11px; fill:#c8d2ef; letter-spacing:.02em}
.mnode:hover circle{stroke:#fff}

/* close */
.recap{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0}
.recap .r{border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:9px 15px; font-size:13px; color:#cdd7f3}
.recap .r b{color:var(--cyan); font-weight:600}

/* ---------- bottom bar ---------- */
.bottombar{position:fixed; bottom:0; left:0; right:0; height:74px; z-index:30;
  display:flex; align-items:center; justify-content:space-between; padding:0 22px;
  background:linear-gradient(0deg, rgba(7,10,20,.94), rgba(7,10,20,0))}
.counter{font-size:12px; color:var(--muted); letter-spacing:.06em; min-width:160px}
.counter b{color:var(--ink); font-weight:700; font-size:13px}
.counter .a{display:block; margin-top:3px; color:var(--cyan); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase}
.counter .cr{display:block; margin-top:4px; color:var(--faint); font-size:9.5px; letter-spacing:.05em}
.nav{display:flex; align-items:center; gap:10px}
.nav button{cursor:pointer; border:1px solid var(--line2); background:var(--panel2); color:var(--ink);
  border-radius:11px; padding:10px 16px; font-size:14px; font-weight:600; transition:background .15s, border-color .15s}
.nav button:hover{background:rgba(95,208,255,.16); border-color:var(--cyan)}
.rail{display:flex; align-items:center; gap:7px; margin:0 6px; flex-wrap:wrap; max-width:46vw; justify-content:center}
.rail .r{width:9px;height:9px;border-radius:50%; background:#2c344c; cursor:pointer; transition:transform .15s, background .15s}
.rail .r:hover{transform:scale(1.3); background:var(--muted)}
.rail .r.on{background:linear-gradient(120deg,var(--cyan),var(--violet)); transform:scale(1.25)}
.tools{display:flex; gap:8px; min-width:160px; justify-content:flex-end}
.tools button{cursor:pointer; border:1px solid var(--line); background:none; color:var(--muted); border-radius:9px;
  padding:8px 11px; font-size:12px; transition:color .15s, border-color .15s}
.tools button:hover{color:var(--ink); border-color:var(--line2)}

/* agenda overlay */
.agenda{position:fixed; inset:0; z-index:40; background:rgba(5,8,16,.86); backdrop-filter:blur(7px);
  display:none; align-items:center; justify-content:center; padding:5vh 6vw}
.agenda.show{display:flex}
.agenda .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; max-width:1100px; max-height:90vh; overflow:auto}
.agenda h3{grid-column:1/-1; margin:0 0 4px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.acard{cursor:pointer; border:1px solid var(--line); background:var(--panel); border-radius:13px; padding:15px 16px; transition:border-color .15s, transform .15s}
.acard:hover{border-color:var(--cyan); transform:translateY(-2px)}
.acard .n{font-size:11px; color:var(--cyan); letter-spacing:.1em}
.acard .t{font-size:15px; font-weight:600; margin-top:7px; line-height:1.25}
.acard .k{font-size:11.5px; color:var(--muted); margin-top:6px}
.acard .live-tag{display:inline-block; margin-top:9px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green); border:1px solid rgba(103,224,138,.3); border-radius:999px; padding:2px 8px}

/* deep-dive directory grid */
.deckgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px}
.dcard{position:relative; cursor:pointer; border:1px solid var(--line); background:var(--panel); border-radius:14px;
  padding:16px 18px; transition:border-color .15s, transform .15s}
.dcard:hover{border-color:var(--cyan); transform:translateY(-3px)}
.dcard.v:hover{border-color:var(--violet)}
.dcard .pill{position:absolute; top:12px; right:12px; border:0; padding:0; background:none}
.dcard .dc-t{font-size:16px; font-weight:600; color:#eaf0ff; padding-right:18px}
.dcard .dc-s{font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.4}
.dcard .dc-go{margin-top:10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan)}
.dcard.v .dc-go{color:var(--violet)}

/* ---------- theatrical slide fx (ported from the /statements binary switches) ---------- */
.fxlayer{position:fixed; inset:0; z-index:35; pointer-events:none; opacity:0; background:#000}
body.fx-blackout .fxlayer{animation:fxBlackout 2.2s ease both}
@keyframes fxBlackout{0%{opacity:0} 10%{opacity:1} 50%{opacity:1} 100%{opacity:0}}
body.fx-lighton .fxlayer{background:#fff3cf; animation:fxLighton 2s ease both}
@keyframes fxLighton{0%{opacity:0} 12%{opacity:.9} 100%{opacity:0}}
body.fx-flip .stage{animation:fxFlip 2.7s cubic-bezier(.65,.05,.35,1) both}
@keyframes fxFlip{0%{transform:none} 32%{transform:rotate(180deg)} 68%{transform:rotate(180deg)} 100%{transform:rotate(360deg)}}

/* ---------- interactive slide widgets (context-bound, /statements spirit) ---------- */
.wgt{margin:22px 0 6px; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px 18px; max-width:560px; backdrop-filter:blur(6px)}
.wgt .wg-h{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); margin-bottom:10px}
.wgt .wg-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.wg-srv{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#c4cfec}
.wg-srv .led{width:10px; height:10px; border-radius:50%; background:var(--green);
  box-shadow:0 0 10px rgba(103,224,138,.7); transition:background .3s, box-shadow .3s}
.wg-cap{margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.5; min-height:30px}
.wg-cap b{color:#cfd8f4}

/* the breaker (incident slide): lever + page-wide lights out */
.wg-lever{margin-left:auto; cursor:pointer; width:64px; height:30px; border-radius:999px;
  border:1px solid var(--line2); background:var(--panel2); position:relative; transition:border-color .25s}
.wg-lever:hover{border-color:var(--cyan)}
.wg-lever .knob{position:absolute; top:3px; left:36px; width:22px; height:22px; border-radius:50%;
  background:var(--green); box-shadow:0 0 10px rgba(103,224,138,.6); transition:left .25s, background .25s, box-shadow .25s}
.wg-breaker[data-wg-state="off"] .wg-lever .knob{left:3px; background:var(--red); box-shadow:0 0 10px rgba(255,107,107,.6)}
.wg-breaker[data-wg-state="off"] .wg-srv .led{background:var(--red); box-shadow:0 0 10px rgba(255,107,107,.7)}
.fxlayer{transition:opacity .7s ease}
body.wg-dark .fxlayer{opacity:.8}

/* the meteor (bunker slide): a streak, a shake — and the LEDs stay green */
.wg-meteorbtn{margin-left:auto; cursor:pointer; border:1px solid rgba(255,211,92,.5); background:none;
  color:var(--gold); border-radius:10px; padding:8px 14px; font-size:12.5px; font-weight:600;
  transition:background .2s, box-shadow .2s}
.wg-meteorbtn:hover{background:rgba(255,211,92,.1); box-shadow:0 0 18px rgba(255,211,92,.25)}
.meteorfx{position:fixed; inset:0; z-index:36; pointer-events:none; display:none; overflow:hidden}
body.wg-meteorrun .meteorfx{display:block}
.meteorfx i{position:absolute; top:-6%; left:108%; width:11px; height:11px; border-radius:50%;
  background:#fff2cf; box-shadow:0 0 18px 7px rgba(255,211,92,.85), 0 0 70px 24px rgba(255,150,80,.35)}
.meteorfx i::before{content:""; position:absolute; left:6px; top:4px; width:180px; height:3px;
  transform:rotate(-40deg); transform-origin:left center;
  background:linear-gradient(90deg, rgba(255,226,150,.9), transparent)}
body.wg-meteorrun .meteorfx i{animation:wgMeteor 1.15s cubic-bezier(.45,0,.85,1) both}
@keyframes wgMeteor{0%{transform:translate(0,0); opacity:0} 8%{opacity:1} 90%{opacity:1} 100%{transform:translate(-130vw,115vh); opacity:0}}
body.wg-meteorrun .stage{animation:wgShake .5s .9s}
@keyframes wgShake{0%,100%{transform:none} 20%{transform:translate(6px,-4px)} 40%{transform:translate(-7px,5px)} 60%{transform:translate(5px,3px)} 80%{transform:translate(-4px,-2px)}}

/* the coin (zero-fees slide): commissions only ever roll into the pool */
.wg-cf-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.wg-coin{cursor:pointer; width:62px; height:62px; border-radius:50%; border:1px solid rgba(255,211,92,.55);
  background:radial-gradient(circle at 35% 30%, #ffe9ae, #d9a935); color:#5c430a; font-weight:800; font-size:12px;
  box-shadow:0 0 18px rgba(255,211,92,.3); transition:transform .12s, box-shadow .2s}
.wg-coin:hover{box-shadow:0 0 26px rgba(255,211,92,.5)}
.wg-coin:active{transform:scale(.9)}
.wg-bin{display:flex; flex-direction:column; align-items:center; gap:4px; border:1px solid var(--line);
  border-radius:12px; padding:10px 16px; min-width:118px}
.wg-bin .cnt{font-size:22px; font-weight:700; color:var(--green)}
.wg-bin .lbl{font-size:10.5px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; text-align:center}
.wg-bin.dead .cnt{color:var(--faint)}
.wg-bin.pop{animation:wgPop .35s}
@keyframes wgPop{40%{transform:scale(1.12)}}
.wg-bin.deny{animation:wgDeny .4s}
@keyframes wgDeny{25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)}}

/* the wave (legal slide): scattered claims fade, one wave stays lit */
.wg-wv-btns{display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.wg-wv-btn{cursor:pointer; border:1px solid var(--line2); background:var(--panel2); color:#c4cfec;
  border-radius:9px; padding:7px 13px; font-size:12px; font-weight:600; transition:border-color .2s}
.wg-wv-btn:hover{border-color:var(--cyan)}
.wg-wv-btn.gold{border-color:rgba(255,211,92,.5); color:var(--gold)}
.wg-wv-btn.gold:hover{border-color:var(--gold)}
.wg-wv-map{display:block; width:100%; max-width:520px; height:auto; margin-top:2px}
.wg-wv-map .land path{fill:rgba(120,140,200,.10); stroke:rgba(120,140,200,.25); stroke-width:1}
.wg-wv-map .claim{fill:#2c344c; transition:fill .3s}
.wg-wv-map.run-scatter .claim{animation:wgBlink .55s ease both}
.wg-wv-map.run-scatter .claims circle:nth-child(1){animation-delay:0s} .wg-wv-map.run-scatter .claims circle:nth-child(2){animation-delay:.33s}
.wg-wv-map.run-scatter .claims circle:nth-child(3){animation-delay:.66s} .wg-wv-map.run-scatter .claims circle:nth-child(4){animation-delay:.99s}
.wg-wv-map.run-scatter .claims circle:nth-child(5){animation-delay:1.32s} .wg-wv-map.run-scatter .claims circle:nth-child(6){animation-delay:1.65s}
.wg-wv-map.run-scatter .claims circle:nth-child(7){animation-delay:1.98s} .wg-wv-map.run-scatter .claims circle:nth-child(8){animation-delay:2.31s}
.wg-wv-map.run-scatter .claims circle:nth-child(9){animation-delay:2.64s} .wg-wv-map.run-scatter .claims circle:nth-child(10){animation-delay:2.97s}
.wg-wv-map.run-scatter .claims circle:nth-child(11){animation-delay:3.3s} .wg-wv-map.run-scatter .claims circle:nth-child(12){animation-delay:3.63s}
@keyframes wgBlink{0%{fill:#2c344c; filter:none} 40%{fill:var(--gold); filter:drop-shadow(0 0 6px rgba(255,211,92,.9))} 100%{fill:#2c344c; filter:none}}
.wg-wv-map.run-wave .claim{animation:wgFlash .7s ease forwards}
@keyframes wgFlash{0%{fill:#2c344c; filter:none} 45%{fill:#fff; filter:drop-shadow(0 0 8px rgba(255,255,255,.9))} 100%{fill:var(--gold); filter:drop-shadow(0 0 6px rgba(255,211,92,.9))}}

/* the flip card (win-win): turn the situation over */
.wg-flip{max-width:430px}
.flipcard{position:relative; cursor:pointer; height:150px; perspective:900px; outline:none}
.flipcard .face{position:absolute; inset:0; border-radius:12px; border:1px solid var(--line2);
  background:var(--panel2); padding:14px 16px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .65s cubic-bezier(.4,.1,.2,1)}
.flipcard .face b{display:block; font-size:15px; margin:9px 0 6px; color:var(--ink); line-height:1.25}
.flipcard .face p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.5}
.flipcard .tag{font-size:10px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line);
  border-radius:999px; padding:3px 9px}
.flipcard .tag.red{color:var(--red); border-color:rgba(255,107,107,.35)}
.flipcard .tag.green{color:var(--green); border-color:rgba(103,224,138,.35)}
.flipcard .fliphint{position:absolute; right:12px; bottom:10px; font-size:10.5px; color:var(--faint); letter-spacing:.06em}
.flipcard:hover .fliphint{color:var(--cyan)}
.flipcard .front{transform:rotateY(0)}
.flipcard .back{transform:rotateY(180deg)}
.flipcard.is-flipped .front{transform:rotateY(-180deg)}
.flipcard.is-flipped .back{transform:rotateY(0)}

/* "Coming soon" toast */
.soontoast{position:fixed; left:50%; bottom:110px; transform:translate(-50%,14px); z-index:60;
  padding:12px 26px; border-radius:999px; border:1px solid rgba(255,211,92,.4);
  background:rgba(20,24,42,.92); color:var(--gold); font-size:14px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 24px rgba(255,211,92,.15);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s}
.soontoast.show{opacity:1; visibility:visible; transform:translate(-50%,0)}

/* ---------- presentation viz blocks (ported from the site's /marketing widgets) ----------
   All fills animate from 0 when the slide becomes .active — presentation-grade reveals. */
.viz{margin:22px 0 6px}
.viz .viz-h{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}

/* comparison bars (mp-budget-row) */
.vbars{display:grid; gap:12px}
.vbar{display:grid; grid-template-columns:minmax(150px,220px) 1fr minmax(70px,auto); gap:14px; align-items:center}
.vbar .lbl{font-size:13.5px; font-weight:600; color:#dbe3fa; line-height:1.25}
.vbar .lbl small{display:block; font-weight:400; font-size:11px; color:var(--muted); margin-top:2px}
.vbar .track{height:12px; border-radius:999px; background:rgba(120,140,200,.12); border:1px solid var(--line); overflow:hidden}
.vbar .track i{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 12px rgba(95,208,255,.45);
  transition:width 1.2s cubic-bezier(.2,.7,.2,1) .35s}
.vbar.red .track i{background:linear-gradient(90deg,#ff8d8d,var(--red)); box-shadow:0 0 12px rgba(255,107,107,.4)}
.vbar.gold .track i{background:linear-gradient(90deg,#ffe49a,var(--gold)); box-shadow:0 0 12px rgba(255,211,92,.4)}
.vbar.green .track i{background:linear-gradient(90deg,#9defb4,var(--green)); box-shadow:0 0 12px rgba(103,224,138,.4)}
.vbar .val{font-size:15px; font-weight:700; text-align:right; color:var(--ink); white-space:nowrap}
.slide.active .vbar .track i{width:var(--w)}

/* from -> to multiplier cards (mp-mult-card) */
.vflows{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.vflow{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; backdrop-filter:blur(6px)}
.vflow .who{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.vflow .fl{display:flex; align-items:baseline; gap:10px; margin-top:10px; flex-wrap:wrap}
.vflow .from{font-size:15px; color:#c4cfec}
.vflow .arr{color:var(--faint)}
.vflow .to{font-size:clamp(19px,2.1vw,25px); font-weight:700; color:var(--ink)}
.vflow .x{display:inline-block; margin-top:9px; font-size:12.5px; font-weight:700; letter-spacing:.03em}
.vflow.green .x{color:var(--green)} .vflow.gold .x{color:var(--gold)}
.vflow.cyan .x{color:var(--cyan)} .vflow.violet .x{color:var(--violet)}
.vflow .fbar{height:7px; border-radius:999px; background:rgba(120,140,200,.12); border:1px solid var(--line); overflow:hidden; margin-top:12px}
.vflow .fbar i{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width 1.2s cubic-bezier(.2,.7,.2,1) .45s}
.vflow.green .fbar i{background:linear-gradient(90deg,#9defb4,var(--green))}
.vflow.gold .fbar i{background:linear-gradient(90deg,#ffe49a,var(--gold))}
.slide.active .vflow .fbar i{width:var(--w)}

/* capitalization runway (mp-cap) */
.vrunway{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px 20px; backdrop-filter:blur(6px)}
.vrunway .rw-hd{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.vrunway .rw-hd .l{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.vrunway .rw-hd .r{font-size:13px; font-weight:700; color:var(--gold)}
.vrunway .rw-rail{position:relative; height:14px; border-radius:999px; background:rgba(120,140,200,.12); border:1px solid var(--line); overflow:visible}
.vrunway .rw-rail .fill{position:absolute; inset:0 auto 0 0; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--violet) 60%,var(--gold) 100%);
  box-shadow:0 0 16px rgba(176,108,255,.4); transition:width 1.6s cubic-bezier(.2,.7,.2,1) .4s}
.vrunway .rw-rail .tgt{position:absolute; right:-1px; top:50%; width:16px; height:16px; border-radius:50%;
  transform:translateY(-50%) scale(0); background:var(--gold); box-shadow:0 0 18px rgba(255,211,92,.8);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) 1.7s}
.slide.active .vrunway .rw-rail .fill{width:var(--w)}
.slide.active .vrunway .rw-rail .tgt{transform:translateY(-50%) scale(1)}
.vrunway .rw-ticks{display:flex; justify-content:space-between; margin-top:9px; font-size:10.5px; color:var(--faint); font-family:ui-monospace,Consolas,monospace}
.vrunway .rw-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.vrunway .rw-pills span{border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:11.5px; color:#c4cfec;
  background:rgba(24,31,54,.5)}

/* horizontal timeline */
.vtimeline{position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; padding-top:8px; margin-top:26px}
.vtimeline::before{content:""; position:absolute; left:8px; right:8px; top:15px; height:2px;
  background:linear-gradient(90deg,var(--line2),var(--line)); border-radius:2px}
.vt-it{position:relative; padding:0 8px}
.vt-it .dot{display:block; width:15px; height:15px; border-radius:50%; background:var(--bg2);
  border:2px solid var(--muted); position:relative; z-index:1;
  transform:scale(0); transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.slide.active .vt-it .dot{transform:scale(1)}
.slide.active .vt-it:nth-child(1) .dot{transition-delay:.3s} .slide.active .vt-it:nth-child(2) .dot{transition-delay:.55s}
.slide.active .vt-it:nth-child(3) .dot{transition-delay:.8s} .slide.active .vt-it:nth-child(4) .dot{transition-delay:1.05s}
.slide.active .vt-it:nth-child(5) .dot{transition-delay:1.3s}
.vt-it.red .dot{border-color:var(--red); box-shadow:0 0 12px rgba(255,107,107,.5)}
.vt-it.gold .dot{border-color:var(--gold); box-shadow:0 0 12px rgba(255,211,92,.5)}
.vt-it.cyan .dot{border-color:var(--cyan); box-shadow:0 0 12px rgba(95,208,255,.5)}
.vt-it.green .dot{border-color:var(--green); box-shadow:0 0 12px rgba(103,224,138,.5)}
.vt-it .t{display:block; margin-top:11px; font-size:13px; font-weight:700; color:var(--ink)}
.vt-it .s{display:block; margin-top:4px; font-size:11.5px; color:var(--muted); line-height:1.45; max-width:24ch}

@media (max-width:920px){
  .wg-pedrocoin{position:static; transform:none; margin-top:22px; text-align:left}
  .live,.mapwrap,.cols,.deckgrid{grid-template-columns:1fr; gap:24px}
  .agenda .grid{grid-template-columns:1fr 1fr}
  .status .legend{display:none}
  .rail{display:none}
  /* mobile topbar: keep it one tidy row — drop the sub, collapse service labels to bare LEDs */
  .topbar{padding:0 14px; flex-wrap:nowrap; gap:12px}
  .brand{min-width:0; gap:8px}
  .brand .sub{display:none}
  .status{flex-shrink:0}
  .status .dot{font-size:0; gap:0; padding:0 2px}
  .dots{gap:8px}
  .vbar{grid-template-columns:110px 1fr auto; gap:9px}
  .vtimeline{grid-auto-flow:row; gap:18px; padding-top:0}
  .vtimeline::before{left:15px; right:auto; top:8px; bottom:8px; width:2px; height:auto}
  .vt-it{display:grid; grid-template-columns:15px 1fr; gap:0 14px; padding:0}
  .vt-it .t{margin-top:0; grid-column:2}
  .vt-it .s{grid-column:2}
}

@media (max-width:560px){
  /* phones: the live-service cluster can't fit beside the brand — hide it, keep the brand clean */
  .status{display:none}
  .slide{padding:22px 6vw}
  /* cover wordmark is one unbreakable token (PEDRO·NETWORK) — scale it to the viewport so the K never clips */
  .cover .mark{font-size:clamp(22px,8.2vw,40px)}
  /* bottom bar: drop the rigid min-widths and trim the fat so the three groups fit one phone row */
  .bottombar{padding:0 12px; gap:8px}
  .counter{min-width:0}
  .counter .cr{display:none}          /* copyright: not needed on every slide on a phone */
  .tools{min-width:0}
  .tools #fsBtn{display:none}         /* fullscreen: mobile browsers do this natively */
  .nav button{padding:9px 13px; font-size:13px}
  .tools button{padding:8px 10px; font-size:12px}
}