/* Editor surface: near-black void, cool grays, a single bright accent.
   Structure reads as an engineering grid rather than a soft app, and actions
   are deliberately large.

   Colours are NOT defined here — see theme.css, which app.html loads first. */

@import url("https://fonts.googleapis.com/css2?family=Silkscreen&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Press+Start+2P&display=swap");

*{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);
  font:400 13px/1.55 "IBM Plex Sans",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(--dim);cursor:pointer;
  background:var(--panel2);border:1px solid transparent;border-radius:8px;
  padding:11px 16px;letter-spacing:.01em;
  transition:color .12s,background .12s,box-shadow .12s;
}
button:hover{background:var(--raise);color:var(--ink)}
button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
button.on{
  color:var(--ink);background:rgba(var(--accent-rgb),.14);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3);
}
button:disabled{opacity:.35;cursor:default}
/* The hero action carries the full Solana sweep. Ink stays dark rather than
   white: near-black clears 4.3:1 on the purple end and 12:1 on the green,
   where white manages 3.9:1 and 1.6:1 respectively — unreadable across half
   the button. Border is transparent over a padding-box/border-box double
   background so the gradient reaches the edge without a seam. */
button.primary{
  background-image:var(--grad);background-repeat:no-repeat;
  background-size:calc(100% + 2px) 100%;background-position:-1px 0;
  border:1px solid transparent;color:var(--accent-ink);
  font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:13.5px;
  padding:15px 18px;
  box-shadow:0 0 0 0 rgba(var(--accent-2-rgb),0);
}
button.primary:hover{
  background-image:var(--grad-hi);border-color:transparent;color:var(--accent-ink);
  box-shadow:0 0 22px -6px rgba(var(--accent-2-rgb),.55),
             0 0 30px -10px rgba(var(--accent-rgb),.45);
}

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;
  /* Two offset radials rather than one: purple biased left, green right, so the
     header glow carries the same left-to-right reading as the wordmark sitting
     on top of it. A single centred wash would just read grey-green. */
  background:
    radial-gradient(70% 180% at 28% -60%,rgba(var(--accent-2-rgb),.13) 0%,transparent 60%),
    radial-gradient(70% 180% at 72% -60%,rgba(var(--accent-rgb),.11) 0%,transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.5),transparent);
}
.brand::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--grad-line);opacity:.7;
}
.wordmark{
  /* Silkscreen is the bitmap face the landing page uses. 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:"Silkscreen",ui-monospace,monospace;font-weight:400;
  font-size:clamp(18px,2.6vw,34px);line-height:1.15;letter-spacing:.14em;
  display:flex;align-items:baseline;justify-content:center;text-transform:uppercase;
  -webkit-font-smoothing:none;font-smooth:never;   /* keep the edges hard */
}
/* The gradient lives on the flex container, not on the two halves, so one
   continuous sweep crosses the whole lockup. Putting it on each child would
   restart the ramp mid-word and give you two identical gradients instead of
   one. The old two-tone span/em split is what the sweep now replaces.
   text-shadow cannot survive background-clip:text, so the glow moves to a
   blurred ::before copy sitting behind. */
.wordmark{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  position:relative;
}
.wordmark span,.wordmark em{
  font-style:normal;color:transparent;
}
/* drop-shadow rather than text-shadow: text-shadow paints behind the element
   box and is erased by background-clip:text, while drop-shadow follows the
   clipped alpha. Two of them, tinted to each end of the ramp, so the halo is
   chromatic instead of a flat green wash. */
.wordmark{
  filter:drop-shadow(0 0 16px rgba(var(--accent-2-rgb),.45))
         drop-shadow(0 0 34px rgba(var(--accent-rgb),.30));
}
.tag{margin:16px 0 0;color:var(--faint);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif}

/* ---------- 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:var(--panel);
  border:1px solid var(--line);border-radius:12px;
}
.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:11px;letter-spacing:.16em;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)}
/* Step numerals ramp across the four panels: 1 is purple, 4 is green. The
   gradient is sized to four badges and shifted per step, so the sweep reads as
   one progression through the flow rather than four identical chips. */
.lbl i{
  font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;color:var(--accent-ink);
  font-size:11px;font-weight:800;letter-spacing:0;flex:0 0 19px;
  background:var(--grad);background-size:400% 100%;background-position:0% 0;
}
.lbl i.s2{background-position:33% 0}
.lbl i.s3{background-position:66% 0}
.lbl i.s4{background-position:100% 0}
.guide{font-size:11.5px;color:var(--dim);line-height:1.55;margin:-2px 0 11px;
  border-left:2px solid var(--line2);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(--ink);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(--faint);background:transparent;border-color:transparent;border-radius:5px;
}
.catdel:hover{color:#fff;background:var(--bad)}
.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(--line2);color:var(--dim)}
.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(--accent);box-shadow:0 0 0 2px var(--accent-glow)}
.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(--ink);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:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;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:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  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(--faint);
  background:transparent;border-color:transparent;
}
.trait .x:hover{color:#fff;background:var(--bad)}
.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)}
.tplbtn{width:100%;margin:0 0 14px;padding:11px 13px;text-align:left;
  display:flex;align-items:baseline;gap:8px;
  background:rgba(var(--accent-rgb),.06);border:1px dashed rgba(var(--accent-rgb),.45);border-radius:8px;
  cursor:pointer;color:var(--dim);font:12.5px inherit}
.tplbtn b{color:var(--ink);font-size:12.5px}
.tplbtn span{color:var(--ink)}
.tplbtn:hover{background:rgba(var(--accent-rgb),.11);border-style:solid}
.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(--ink);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:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;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:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  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:#fff;background:var(--bad)}
.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:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  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(var(--accent-rgb),.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}
/* Film-grain preview: a display-resolution overlay so grain reads FINE, not on
   the 48px art grid. overlay blend makes the noise darken/lighten the art like
   real grain; JS masks it to the trait so it never speckles the empty canvas. */
#fxover{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  image-rendering:auto;mix-blend-mode:overlay}
/* As wide as the column it sits in, not a fixed 700: the cap left one button
   orphaned on a second row whenever the canvas was wider than that. */
.tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:100%}
.tools button{padding:10px 15px;font-size:12.5px}
.now{font-size:13px;color:var(--dim);letter-spacing:.02em}
.now b{color:var(--ink);font-weight:600}

/* ---------- right rail ---------- */
.row{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.row label{flex:0 0 64px;font-size:11px;letter-spacing:.12em;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:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  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:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  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:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;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(var(--accent-rgb),.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:600 11px/1 "IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;color:var(--lime);
  letter-spacing:.14em;text-transform:uppercase;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:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;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{
  filter:drop-shadow(0 0 22px rgba(var(--accent-2-rgb),.65))
         drop-shadow(0 0 46px rgba(var(--accent-rgb),.42));
}
/* Floating help. Fixed to the bottom-right rather than sitting in the header,
   so it is reachable from anywhere in the app without stealing a row from the
   toolbar. The accessible name lives on the button; the glyph is aria-hidden,
   because "?" read aloud is not a label. */
.howto{
  /* In the top bar, right-hand side, vertically centred on it. Never inside
     .stagewrap — a button over the drawing surface swallows clicks meant for
     the canvas and that corner of the art becomes impossible to paint. */
  /* Centred with a calc offset rather than translateY(-50%): the float
     keyframes animate transform, and an animation replaces the property
     outright, so a centring transform here would be thrown away mid-bob. */
  position:absolute;right:57px;top:calc(50% - 19px);z-index:20;
  width:38px;height:38px;padding:0;border-radius:50%;
  display:grid;place-items:center;
  font-size:18px;font-weight:700;line-height:1;

  /* Dark disc, lime ring. The canvas underneath can be any colour the user
     draws, including lime, so the button carries its own ground. */
  color:var(--lime);
  background:rgba(13,16,20,.92);
  border:2px solid var(--lime);
  text-shadow:0 0 10px rgba(var(--accent-rgb),.85);
  transition:transform .14s, background .14s, color .14s;

  /* Two animations at once: a slow bob so it reads as floating, and a glow that
     breathes underneath it. Separate keyframes rather than one combined set,
     because the transform and the shadow want different timings. */
  animation:howtoFloat 3.6s ease-in-out infinite, howtoGlow 2.4s ease-in-out infinite;
}
@keyframes howtoFloat{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-4px) }
}
@keyframes howtoGlow{
  0%,100%{ box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 14px rgba(var(--accent-rgb),.35), 0 0 0 0 rgba(var(--accent-rgb),.16) }
  50%    { box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 26px rgba(var(--accent-rgb),.70), 0 0 0 6px rgba(var(--accent-rgb),.07) }
}
.howto span{ transform:translateY(-1px) }   /* optical centring: "?" sits low in its em box */
/* No transform here — the float animation owns it, and an animation beats a
   hover rule, so a transform on hover would simply be ignored. The glow
   keyframes own box-shadow for the same reason; hover changes colour only. */
.howto:hover{
  color:#0b0d10;
  background:var(--lime);
  text-shadow:none;
}
@media (prefers-reduced-motion:reduce){
  .howto{ animation:none; box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 18px rgba(var(--accent-rgb),.45) }
}
@media (max-width:760px){
  .howto{right:14px;top:calc(50% - 17px);width:34px;height:34px;font-size:16px}
}



/* ---------- template picker ---------- */
/* A starting point for somebody with no art. It loads a normal project — there
   is no such thing as a template at runtime, only a project that arrived from
   us instead of from their disk. */
.tpl-veil{position:fixed;inset:0;z-index:99997;background:rgba(7,8,10,.86);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px}
.tpl-card{width:min(94vw,560px);max-height:86vh;overflow:auto;background:#12151a;
  border:1px solid var(--line2);border-radius:12px;padding:22px}
.tpl-card h3{margin:0 0 4px;font-size:18px;color:var(--ink)}
.tpl-card .sub{margin:0 0 18px;color:var(--dim);font-size:13.5px;line-height:1.55}
.tpl-item{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;
  padding:14px;margin-bottom:10px;background:#0d1014;border:1px solid var(--line2);
  border-radius:10px;cursor:pointer;color:inherit;font:inherit}
.tpl-item:hover{border-color:var(--lime)}
.tpl-item img{width:64px;height:64px;flex:0 0 64px;image-rendering:pixelated;
  border-radius:8px;background:#0b0e11}
.tpl-item b{display:block;font-size:15px;margin-bottom:3px}
.tpl-item span{display:block;color:var(--dim);font-size:12.5px;line-height:1.5}
.tpl-item i{display:block;margin-top:6px;font-style:normal;color:var(--faint);
  font:11.5px "IBM Plex Mono",ui-monospace,monospace}
.tpl-card .close{width:100%;margin-top:6px;padding:10px}