/* MOONPAD — lunar surface: near-black void, cool grays, a single acid-lime
   accent (the Robinhood green from the Moonboys palette). Structure reads as an
   engineering grid rather than a soft app, and actions are deliberately large. */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Press+Start+2P&display=swap");

:root{
  --void:#07080a;
  --bg:#0b0d10;
  --panel:#111418;
  --panel2:#171b20;
  --raise:#1d2228;
  --line:#272d34;
  --line2:#333b44;
  --ink:#e9eeec;
  --dim:#8d9894;
  --faint:#5d6a67;
  --lime:#cdfd37;          /* Robinhood green */
  --lime-dim:#a3cc22;
  --lime-glow:rgba(205,253,55,.16);
  --warn:#ffcc55;
  --r:6px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--ink);overflow:hidden;
  display:flex;flex-direction:column;
  background-color:var(--bg);
  /* engineering grid: fine cells, with a lime line every sixth */
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(rgba(205,253,55,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(205,253,55,.05) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,144px 144px,144px 144px;
  font:400 13px/1.55 "Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* ---------- controls: big and unmistakable ---------- */
button{
  font:inherit;font-weight:600;font-size:13px;color:var(--ink);cursor:pointer;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);
  padding:11px 16px;letter-spacing:.01em;
  transition:border-color .12s,color .12s,background .12s,box-shadow .12s;
}
button:hover{background:var(--raise);border-color:#46515c;color:#fff}
button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
button.on{
  border-color:var(--lime);color:var(--lime);background:var(--lime-glow);
  box-shadow:inset 0 0 0 1px rgba(205,253,55,.25);
}
button:disabled{opacity:.35;cursor:default}
button.primary{
  background:var(--lime);border-color:var(--lime);color:#0a0f02;
  font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:13.5px;
  padding:15px 18px;box-shadow:0 0 30px -6px rgba(205,253,55,.45);
}
button.primary:hover{background:#daff52;border-color:#daff52;color:#0a0f02}

input[type=text],input[type=number],select{
  background:var(--void);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r);padding:9px 10px;font:inherit;font-size:12.5px;min-width:0;
}
input[type=text]:focus,input[type=number]:focus,select:focus{
  outline:none;border-color:var(--lime);box-shadow:0 0 0 3px var(--lime-glow);
}
input[type=range]{accent-color:var(--lime)}
input[type=checkbox]{accent-color:var(--lime);width:16px;height:16px}

/* ---------- header ---------- */
.brand{
  flex:0 0 auto;text-align:center;padding:26px 16px 22px;
  border-bottom:1px solid var(--line);position:relative;
  background:
    radial-gradient(90% 200% at 50% -60%,rgba(205,253,55,.10) 0%,transparent 62%),
    linear-gradient(180deg,rgba(0,0,0,.5),transparent);
}
.brand::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);opacity:.55;
}
.wordmark{
  /* Press Start 2P is the classic arcade bitmap face. It is monospaced and much
     wider per glyph than a grotesque, so the size drops and tracking goes to 0 —
     negative tracking smears a pixel font. */
  font-family:"Press Start 2P",ui-monospace,monospace;font-weight:400;
  font-size:clamp(21px,3.1vw,42px);line-height:1.15;letter-spacing:.01em;
  display:flex;align-items:baseline;justify-content:center;text-transform:uppercase;
  -webkit-font-smoothing:none;font-smooth:never;   /* keep the edges hard */
}
.wordmark span,.wordmark em{
  font-style:normal;color:var(--lime);
  text-shadow:0 0 34px rgba(205,253,55,.55),0 0 70px rgba(205,253,55,.22);
}
.tag{margin:16px 0 0;color:var(--faint);font-size:9px;letter-spacing:.34em;
  text-transform:uppercase;font-weight:400;
  font-family:"Press Start 2P",ui-monospace,monospace;-webkit-font-smoothing:none}

/* ---------- shell ---------- */
/* The rails float over the grid rather than sitting flush to the window, so the
   background reads as one continuous surface running under everything. */
/* The canvas column sizes to its content and the two side tracks split what is
   left, so each rail centers in the space between the canvas and the window
   edge rather than hugging the outside. */
.app{
  display:grid;grid-template-columns:1fr auto 1fr;
  padding:clamp(18px,2.2vw,34px);flex:1;min-height:0;
}
.col{
  overflow-y:auto;overflow-x:hidden;padding:20px;align-self:start;max-height:100%;
  justify-self:center;
  background:rgba(9,11,14,.82);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(205,253,55,.34);border-radius:10px;
  box-shadow:0 0 26px -8px rgba(205,253,55,.20),0 24px 60px -28px #000;
}
.app > .col:first-child{width:336px}
.app > .col:last-child{width:348px}
.col::-webkit-scrollbar{width:10px}
.col::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px}
.col::-webkit-scrollbar-thumb:hover{background:var(--line2)}
.mid{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  border:0;padding:0 clamp(16px,2vw,30px);background:transparent;
}

.lbl{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:20px 0 9px;display:flex;align-items:center;gap:9px;
}
.lbl:first-child{margin-top:0}
.lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.lbl i{
  font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;background:var(--lime);color:#0a0f02;
  font-size:11px;font-weight:800;letter-spacing:0;flex:0 0 19px;
}
.guide{font-size:11.5px;color:var(--dim);line-height:1.55;margin:-2px 0 11px;
  border-left:2px solid var(--lime);padding-left:10px}
.guide b{color:var(--ink);font-weight:700}
.empty{font-size:11.5px;color:var(--faint);text-align:center;padding:10px 6px;
  border:1px dashed var(--line2);border-radius:var(--r);margin-bottom:6px}
.canvasnote{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;pointer-events:none;
  background:rgba(7,8,10,.86);color:var(--dim);font-size:14px;line-height:1.6;
}
.canvasnote b{color:var(--lime);display:block;font-size:16px;margin-bottom:6px;font-weight:700}
/* a class-level display beats the browser rule for [hidden], so restate it */
.canvasnote[hidden]{display:none}

/* ---------- trait rail ---------- */
.cat{
  position:relative;
  margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);padding:11px;
}
/* delete sits in the card corner rather than buried in the control cluster */
.catdel{
  position:absolute;top:7px;right:7px;z-index:2;
  width:24px;height:24px;padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;
  color:var(--lime);background:transparent;border-color:transparent;border-radius:5px;
}
.catdel:hover{color:#0a0f02;background:var(--lime);border-color:var(--lime)}
.depth{display:flex;align-items:center;gap:7px;margin-bottom:7px;padding-right:26px;
  cursor:grab;user-select:none;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700}
.depth i{
  font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:0 0 16px;border-radius:3px;
  border:1px solid var(--line2);background:var(--void);color:var(--dim);
  font-size:9.5px;font-weight:800;letter-spacing:0;
}
.cat:first-of-type .depth i,.cat:last-of-type .depth i{border-color:var(--lime);color:var(--lime)}
.depth:active{cursor:grabbing}
.depth .grip{margin-left:auto;font-style:normal;letter-spacing:-2px;color:var(--faint);
  font-size:13px;line-height:1;padding:0 2px;opacity:0}
.cat:hover .depth .grip{opacity:1}
.cat.dragging{opacity:.4}
/* insertion line showing where the card will land */
.cat.over-a,.cat.over-b{position:relative}
.cat.over-a::before,.cat.over-b::before{
  content:"";position:absolute;left:-1px;right:-1px;height:2px;background:var(--lime);
  box-shadow:0 0 12px var(--lime);border-radius:2px;
}
.cat.over-a::before{top:-7px}
.cat.over-b::before{bottom:-7px}
.cathead{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cathead input{
  flex:1;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border-color:transparent;background:transparent;padding:4px 5px;color:var(--dim);
}
.cathead input:focus{border-color:var(--lime);background:var(--void);color:var(--ink)}
.cathead button{padding:5px 8px;font-size:11px;color:var(--faint);background:transparent;
  border-color:transparent}
.cathead button:hover{color:var(--lime);background:var(--panel2);border-color:var(--line)}

/* column header — mirrors .trait so the labels sit over their columns */
.thead{display:flex;align-items:center;gap:7px;padding:2px 0 3px;
  font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.thead .th-n{flex:1;padding-left:calc(34px + 7px + 5px)}
.thead .th-w{flex:0 0 58px;text-align:center;cursor:help}
.thead .th-x{flex:0 0 24px}
.trait{display:flex;align-items:center;gap:7px;padding:3px 0}
.trait .sw{
  width:34px;height:34px;flex:0 0 34px;border:1px solid var(--line2);border-radius:var(--r);
  background:repeating-conic-gradient(#20262c 0 25%,#171b20 0 50%) 0 0/8px 8px;
  cursor:pointer;image-rendering:pixelated;background-size:cover;
}
.trait .sw:hover{border-color:var(--dim)}
.trait.sel .sw{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime-glow),0 0 16px -4px var(--lime)}
.trait input[type=text]{flex:1;font-size:12.5px;border-color:transparent;background:transparent;
  padding:6px 5px}
.trait input[type=text]:focus{border-color:var(--lime);background:var(--void)}
.trait.sel input[type=text]{color:var(--lime);font-weight:600}
/* weight and its resulting share read as one control, not two columns */
.trait .wt{position:relative;flex:0 0 58px;cursor:text}
.trait .wt input[type=number]{width:100%;padding:6px 4px 13px;font-size:12px;
  font-family:ui-monospace,Menlo,monospace;text-align:center}
.trait .wt .pct{position:absolute;left:0;right:0;bottom:3px;text-align:center;
  font-size:8.5px;color:var(--faint);font-family:ui-monospace,Menlo,monospace;
  pointer-events:none;letter-spacing:.04em}
.trait .x{
  width:24px;height:24px;padding:0;line-height:1;flex:0 0 24px;
  display:flex;align-items:center;justify-content:center;border-radius:5px;
  font-size:15px;font-weight:700;color:var(--lime);
  background:transparent;border-color:transparent;
}
.trait .x:hover{color:#0a0f02;background:var(--lime);border-color:var(--lime)}
.trait.undrawn input[type=text]{color:var(--warn)}

.traitbtns,.colbtns{display:flex;gap:6px;margin-top:7px}
.savebtns{display:flex;gap:6px;margin-top:6px}
.savebtns button{flex:1;padding:9px 6px;font-size:11.5px;font-weight:600}
.savebtns button:hover{border-color:var(--lime);color:var(--lime)}
.addtrait{flex:1;padding:10px;font-size:12.5px;font-weight:700;
  border-color:var(--line2);background:var(--panel2)}
.addtrait.imp,.addc.imp{flex:0 0 76px;font-weight:600;color:var(--dim)}
.addtrait.imp:hover,.addc.imp:hover{color:var(--lime);border-color:var(--lime)}

/* colors: a trait can hold several drawings, each with its own rarity */
.coltog{display:flex;align-items:center;gap:6px;width:100%;margin:1px 0 0;
  padding:4px 6px 4px calc(34px + 7px);background:transparent;border-color:transparent;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  justify-content:flex-start;text-align:left}
.coltog:hover{color:var(--dim);border-color:transparent;background:transparent}
.coltog b{font-size:9px;line-height:1;width:8px}
.coltog i{font-style:normal;font-size:9px;color:#0a0f02;background:var(--lime);
  border-radius:20px;padding:1px 5px;letter-spacing:0;font-weight:700}
.coltog.open,.coltog.has{color:var(--dim)}
.crow{display:flex;align-items:center;gap:7px;padding:2px 0 2px 16px;
  border-left:1px solid var(--line);margin-left:16px}
.crow .sw{width:26px;height:26px;flex:0 0 26px;border:1px solid var(--line2);
  border-radius:5px;background:repeating-conic-gradient(#20262c 0 25%,#171b20 0 50%) 0 0/6px 6px;
  cursor:pointer;image-rendering:pixelated;background-size:cover}
.crow .sw:hover{border-color:var(--dim)}
.crow.sel .sw{border-color:var(--lime);box-shadow:0 0 0 2px var(--lime-glow)}
.crow input[type=text]{flex:1;font-size:12px;border-color:transparent;background:transparent;
  padding:5px}
.crow input[type=text]:focus{border-color:var(--lime);background:var(--void)}
.crow.sel input[type=text]{color:var(--lime);font-weight:600}
.crow.undrawn input[type=text]{color:var(--warn)}
.crow .wt{position:relative;flex:0 0 52px;cursor:text}
.crow .wt input[type=number]{width:100%;padding:5px 4px 12px;font-size:11.5px;
  font-family:ui-monospace,Menlo,monospace;text-align:center}
.crow .wt .pct{position:absolute;left:0;right:0;bottom:2px;text-align:center;
  font-size:8px;color:var(--faint);font-family:ui-monospace,Menlo,monospace;
  pointer-events:none;letter-spacing:.04em}
.crow .x{width:22px;height:22px;padding:0;line-height:1;flex:0 0 22px;
  display:flex;align-items:center;justify-content:center;border-radius:5px;
  font-size:14px;font-weight:700;color:var(--lime);
  background:transparent;border-color:transparent}
.crow .x:hover{color:#0a0f02;background:var(--lime);border-color:var(--lime)}
.addc{flex:1;padding:7px;font-size:11.5px;font-weight:700;
  border-color:var(--line2);background:var(--panel2)}
.colbtns{margin-left:32px;margin-top:5px}
.addtrait:hover{border-color:var(--lime);color:var(--lime);background:var(--lime-glow)}

/* ---------- canvas ---------- */
.modebar{display:flex;gap:8px;align-items:center}
.stat{font-size:11px;color:var(--faint);font-family:ui-monospace,Menlo,monospace;
  letter-spacing:.06em}
.stagewrap{
  position:relative;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;
  background:repeating-conic-gradient(#e9ece9 0 25%,#d5dad6 0 50%) 0 0/16px 16px;
  max-width:100%;
  box-shadow:0 0 0 1px #000,0 0 70px -10px rgba(205,253,55,.10),0 30px 80px -30px #000;
}
canvas#surface{display:block;touch-action:none;cursor:crosshair;max-width:100%;height:auto}
body.pixelmode canvas#surface{image-rendering:pixelated}
#grid{position:absolute;inset:0;pointer-events:none;background-repeat:repeat}
.tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:700px}
.tools button{padding:10px 15px;font-size:12.5px}
.now{font-size:13px;color:var(--dim);letter-spacing:.02em}
.now b{color:var(--lime);font-weight:700}

/* ---------- right rail ---------- */
.row{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.row label{flex:0 0 64px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.row input[type=range]{flex:1;min-width:0}
.row output{flex:0 0 32px;text-align:right;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:var(--dim)}
.brushes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.brushes button{padding:11px 5px;font-size:11px;line-height:1.3}

.picker,.refbox,.rule{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px;
}
.pk-spectrum{width:100%;height:auto;border:1px solid var(--line2);border-radius:var(--r);
  cursor:crosshair;display:block;margin-bottom:10px}
.pk-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.pk-row label{flex:0 0 36px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.pk-row output{flex:0 0 28px;text-align:right;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:var(--dim)}
.pk-row input[type=range]{flex:1;min-width:0}
.pk-chip{flex:0 0 30px;height:30px;border:1px solid var(--line2);border-radius:var(--r)}
.pk-hex{flex:1;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:12px}
.pk-ramp{-webkit-appearance:none;appearance:none;height:18px;border:1px solid var(--line2);
  border-radius:var(--r);background:linear-gradient(90deg,#000 0%,#808080 50%,#fff 100%)}
.pk-ramp::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:24px;
  background:var(--lime);border:1px solid #000;border-radius:2px;cursor:pointer}
.pk-lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin:12px 0 7px}
.pk-recent{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.pk-recent button{aspect-ratio:1;padding:0;border:1px solid var(--line2);border-radius:4px}
.pk-recent button:hover{border-color:var(--lime)}

.lyr{display:flex;align-items:center;gap:6px;padding:7px 8px;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;margin-bottom:5px;background:var(--panel)}
.lyr.sel{border-color:var(--lime);background:var(--lime-glow)}
.lyr .eye{padding:2px 5px;font-size:10px;border-color:transparent;color:var(--dim);
  background:transparent}
.lyr .eye.off{color:var(--faint)}
.lyr input[type=text]{flex:1;min-width:0;font-size:12px;border-color:transparent;
  background:transparent;padding:4px}
.lyr input[type=range]{flex:0 0 58px}
.lyr button:last-child{padding:3px 7px;font-size:11px;color:var(--faint);
  border-color:transparent;background:transparent}

.rule{margin-bottom:8px;padding:11px}
.rule .rr{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.rule .rr label{flex:0 0 52px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.rule select{flex:0 0 116px;font-size:11.5px;padding:7px 6px}
.rule input[type=text]{flex:1;min-width:0;font-size:11.5px;padding:7px 8px}
.rule .del{width:100%;font-size:11px;padding:7px;color:var(--faint);background:transparent}
.rule .del:hover{color:#ff6b6b}

/* collapsed sections keep advanced controls out of the way until wanted */
.fold{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  margin-bottom:9px;overflow:hidden}
.fold summary{
  cursor:pointer;list-style:none;padding:13px 14px;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;justify-content:space-between;
}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"+";color:var(--faint);font-size:15px;font-weight:400;line-height:1}
.fold[open] summary::after{content:"–"}
.fold summary:hover{color:var(--lime);background:var(--panel2)}
.fold[open] summary{border-bottom:1px solid var(--line);color:var(--ink)}
.foldbody{padding:13px 14px}
.foldbody > .refbox,.foldbody > .rule{border:0;padding:0;background:transparent}

/* the main action stays reachable no matter how far the rail scrolls */
.pinned{
  position:sticky;bottom:-20px;z-index:3;
  margin:16px -20px -20px;padding:16px 20px 20px;
  background:#0a0c0f;border-top:1px solid var(--line);
  box-shadow:0 -14px 22px -10px rgba(10,12,15,.96);
}
.hint{font-size:11px;color:var(--faint);line-height:1.55;margin:10px 0 0}
.hint b{color:var(--lime);font-weight:700}
.warnrow{font-size:11px;color:var(--warn);line-height:1.55;margin:9px 0 0;
  border-left:2px solid var(--warn);padding-left:9px}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--lime);border-radius:var(--r);
  padding:12px 22px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .18s;box-shadow:0 0 40px -8px rgba(205,253,55,.35),0 12px 40px -10px #000;
}
.toast.show{opacity:1}

/* ---------- first-run walkthrough ----------
   The veil dims the page but the ring is a hole punched with a huge outward
   shadow, so the control being described stays at full brightness while
   everything around it recedes. */
.tour{position:fixed;inset:0;z-index:900}
.tour-veil{position:absolute;inset:0;background:rgba(4,6,8,.72);backdrop-filter:blur(1.5px)}
.tour-ring{
  position:absolute;border:2px solid var(--lime);border-radius:var(--r);
  box-shadow:0 0 0 9999px rgba(4,6,8,.72),0 0 22px var(--lime-glow);
  pointer-events:none;transition:left .22s,top .22s,width .22s,height .22s;
}
.tour-card{
  position:absolute;width:min(430px,calc(100vw - 28px));
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
  padding:20px 22px 16px;box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.tour-step{
  font:400 10px/1 "Press Start 2P",monospace;color:var(--lime);
  letter-spacing:.04em;margin-bottom:12px;
}
.tour-card h2{margin:0 0 8px;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.tour-card p{margin:0 0 16px;color:var(--dim);font-size:13px;line-height:1.62}
.tour-card p b{color:var(--ink);font-weight:600}
.tour-card p code{
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
  color:var(--lime-dim);background:var(--panel2);padding:1px 5px;border-radius:3px;
}
.tour-dots{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.tour-dot{
  width:22px;height:4px;padding:0;border:0;border-radius:2px;
  background:var(--line2);cursor:pointer;transition:background .15s;
}
.tour-dot:hover{background:var(--faint)}
.tour-dot.seen{background:var(--lime-dim);opacity:.45}
.tour-dot.on{background:var(--lime)}
.tour-nav{display:flex;align-items:center;gap:8px}
.tour-gap{flex:1}
.tour-nav button{padding:7px 15px}
.tour-nav .ghost{background:none;border-color:transparent;color:var(--faint)}
.tour-nav .ghost:hover{color:var(--ink)}
.tour-nav button:disabled{opacity:.35;cursor:default}
@media (prefers-reduced-motion:reduce){ .tour-ring{transition:none} }

/* The wordmark became a link back to the landing page — keep it looking like
   the mark, not like a link. */
.wordmark{text-decoration:none}
.wordmark:hover span,.wordmark:hover em{
  text-shadow:0 0 40px rgba(205,253,55,.75),0 0 82px rgba(205,253,55,.3);
}
/* Sits in the header's dead space at the right rather than taking a row of its
   own; drops below the wordmark on narrow screens where there is none. */
.howto{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  padding:7px 14px;font-size:12px;
}
@media (max-width:760px){
  .howto{position:static;transform:none;margin-top:14px}
}