/* softbox product page: the interactive demo (softbox-demo.js), the shaper list and the donate section.
   Built only from the site's tokens in styles.css. The step tiles use the plugin's own colours for each action. */

.card-art.art-softbox{background:var(--peach-pale)}

/* demo section */
.demo-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:56px;align-items:start;padding:52px var(--gutter) 60px;background:var(--glow-warm),var(--paper);border-bottom:var(--border-ink)}
.demo-copy{position:sticky;top:24px}
.demo-copy h2{font-size:clamp(40px,4.5vw,70px);line-height:1.05;margin:24px 0 22px;text-wrap:balance}
.demo-copy p{font-size:15px;line-height:1.7;color:var(--ink-2);max-width:36ch;margin:0 0 14px}
.demo-copy .body-small{font-size:13px;line-height:1.9;color:var(--ink-3)}
.demo-stage{min-width:0;min-height:414px}   /* the window's drawn height, so nothing below jumps when it appears */
.sbx-loading,.sbx-error{font:12px/1.7 var(--font-mono);color:var(--ink-3);padding:28px 0;margin:0}

/* the demo window */
.sbx-window{max-width:880px}
.sbx-body{padding:16px 16px 14px;display:grid;gap:14px}
.sbx-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.sbx-label{font:600 11px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);width:40px;flex:none}
.sbx-group{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1}
.sbx-meta{font:11px/1.4 var(--font-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.sbx-btn{background:var(--silver);color:var(--ink);box-shadow:var(--bevel-out);border:0;border-radius:0;font:13px/1 var(--font-ui);height:30px;padding:0 11px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.sbx-btn:hover{background:var(--silver-hi)}
.sbx-btn:active{box-shadow:var(--bevel-in)}
.sbx-btn[aria-pressed="true"]{box-shadow:var(--bevel-in);background:var(--butter-pale)}
.sbx-btn-meta{font:10px var(--font-mono);color:var(--ink-3)}
.sbx-dice[aria-pressed="true"]{background:var(--peach-pale)}
.sbx-die{display:inline-grid;grid-template-columns:repeat(3,3px);grid-auto-rows:3px;gap:1px;padding:2px;background:var(--bone);box-shadow:inset 0 0 0 1px var(--ink)}
.sbx-die i{display:block}
.sbx-die i.on{background:var(--ink)}

.sbx-transport{gap:12px 20px}
.sbx-play.button{margin:0;min-width:150px;min-height:44px}
.sbx-play-icon{font-size:12px}
.sbx-play[aria-pressed="true"] .sbx-play-icon{color:var(--ember)}
.sbx-mix{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}
.sbx-mix input{flex:1;min-width:0;height:30px;margin:0;accent-color:var(--ink)}
.sbx-mix-value{font:11px var(--font-mono);color:var(--ink-2);min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}

/* the step grid: one tile per slice step, lit while it plays */
.sbx-grid{--n:16;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-auto-rows:1fr;gap:3px;padding:6px;height:138px;background:var(--paper-2);box-shadow:var(--bevel-field)}
.sbx-grid[data-steps="8"]{--n:8}
.sbx-grid[data-steps="32"]{--n:32;gap:2px}
.sbx-tile{--tile:var(--silver-hi);--tile-ink:var(--ink-2);position:relative;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;background:var(--tile);box-shadow:var(--bevel-thin-out)}
/* whole pixels only, like the plugin: 3 px cells, 2 px when the tiles are narrow */
.sbx-grid{--cell:3px}
.sbx-glyph{display:block;width:calc(var(--w) * var(--cell));height:calc(var(--h) * var(--cell));color:var(--tile-ink)}
.sbx-grid[data-steps="32"]{--cell:2px}
.sbx-src,.sbx-pitch{position:absolute;top:4px;font:10px/1 var(--font-mono);color:var(--tile-ink)}
.sbx-src{right:4px}
.sbx-pitch{left:4px}
.sbx-ratchet{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:9px/1 var(--font-mono);letter-spacing:1px;color:var(--tile-ink)}
.sbx-grid[data-steps="32"] .sbx-src,.sbx-grid[data-steps="32"] .sbx-pitch{display:none}
.sbx-mint{--tile:var(--mint);--tile-ink:var(--mint-ink)}
.sbx-lilac{--tile:var(--lilac);--tile-ink:var(--lilac-ink)}
.sbx-sky{--tile:var(--sky);--tile-ink:var(--sky-ink)}
.sbx-butter{--tile:var(--butter);--tile-ink:var(--butter-ink)}
.sbx-peach{--tile:var(--peach);--tile-ink:var(--peach-ink)}
.sbx-rose{--tile:var(--rose);--tile-ink:var(--rose-ink)}
.sbx-mute{--tile:var(--paper-3);--tile-ink:var(--ink-3)}
.sbx-tile-dry{--tile:var(--bone)}
.sbx-tile.is-playing{box-shadow:inset 0 0 0 2px var(--ink)}
.sbx-tile.is-playing::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ember)}
.sbx-blurb{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0;min-height:1.6em}
.sbx-hint{flex:none}

/* ten shapers in one row on wide screens */
@media(min-width:1101px){
  .plugin-description-grid.is-compact{grid-template-columns:repeat(5,minmax(0,1fr))}
  .is-compact .plugin-description h3{font-size:22px}
}

/* donate */
.donate-section{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;padding:48px var(--gutter) 64px;background:var(--glow-rose),var(--butter-pale);border-top:var(--border-ink);scroll-margin-top:16px}
.donate-section h2{font-size:clamp(40px,4.5vw,70px);line-height:1.05;margin-top:24px}
.donate-copy{align-self:end}
.donate-copy p{font-size:15px;line-height:1.75;max-width:54ch;margin:0 0 22px}
.donate-copy .release-notice{font-size:11px;margin:0}
.donate-way,.donate-btc{padding:20px;background:var(--bone);box-shadow:var(--bevel-out),var(--shadow-glow);max-width:620px;margin-top:4px}
.donate-way{display:grid;gap:12px;margin-bottom:20px}
.donate-way .label{margin:0;color:var(--ink-3)}
.donate-way .button{margin:0;justify-self:start}
.donate-alt{margin:0;font-size:13px;line-height:1.8;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.donate-alt .donate-address{font-size:13px}
.donate-btc{display:flex;gap:24px;align-items:flex-start}
.donate-qr{width:164px;height:164px;flex:none;image-rendering:pixelated;box-shadow:var(--bevel-field);padding:3px;background:var(--bone)}
.donate-btc-text{min-width:0;display:grid;gap:12px}
.donate-btc-text .label{margin:0;color:var(--ink-3)}
.donate-address{font:14px/1.5 var(--font-mono);color:var(--ink-2);word-break:break-all;user-select:all;-webkit-user-select:all}
.donate-address strong{color:var(--ink);font-weight:500}
.donate-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.donate-actions .text-link{font-size:13px}

@media(max-width:900px){
  .demo-section{grid-template-columns:1fr;gap:28px;padding:36px var(--gutter) 44px}
  .demo-copy{position:static}
  .demo-copy p{max-width:60ch}
}
@media(max-width:760px){
  .donate-section{grid-template-columns:1fr;gap:24px;padding:32px var(--gutter) 40px}
  .donate-section h2 br{display:none}
  .donate-btc{flex-direction:column;align-items:center;text-align:center;padding:20px 16px}
  .donate-btc-text{justify-items:center}
  .donate-qr{width:200px;height:200px}
  .donate-actions{justify-content:center}
}
@media(max-width:620px){
  .sbx-body{padding:12px 10px}
  .demo-stage{min-height:600px}
  .sbx-row>.sbx-label{width:auto;flex-basis:100%}
  .sbx-meta{flex-basis:100%}
  .sbx-mix{flex-basis:100%;min-width:0}
  .sbx-grid{height:104px;gap:2px;padding:4px}
  .sbx-grid{--cell:2px}
  .sbx-src,.sbx-pitch{display:none}
  .sbx-grid[data-steps="32"]{--n:16;height:150px}
  .sbx-play.button{flex:1}
}
@media(hover:none){.sbx-hint{display:none}}

/* Pixel glyph sizes. Keep these values in external CSS for the site security policy. */
.sbx-glyph-play{--w:4;--h:7}
.sbx-glyph-repeat{--w:9;--h:7}
.sbx-glyph-reverse{--w:4;--h:7}
.sbx-glyph-half{--w:8;--h:8}
.sbx-glyph-twice{--w:8;--h:7}
.sbx-glyph-stutter{--w:4;--h:7}
.sbx-glyph-stop{--w:6;--h:6}
.sbx-glyph-mute{--w:2;--h:2}

/* home: the hero leads with softbox. One word, so the title gets its own size at every width; the interface
   window takes the wider column. Two-class selectors win over styles.css, so every breakpoint is restated. */
.hero-softbox .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:56px}
.hero-softbox .hero-title.is-one-word{font-size:clamp(84px,9.6vw,176px)}
.hero-softbox .hero-object{max-width:780px}
.hero-shot{display:block;color:inherit}
.hero-shot:hover{text-decoration:none}
.hero-shot .window{transition:transform var(--dur-base) var(--ease-soft)}
.hero-shot:hover .window{transform:translateY(-2px)}
.hero-shot:focus-visible{outline:2px solid var(--lilac-ink);outline-offset:4px}
@media(max-width:1100px){
  .hero-softbox .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px}
  .hero-softbox .hero-title.is-one-word{font-size:10.5vw}
  .hero-softbox .hero-object{max-width:none}
}
@media(max-width:760px){
  .hero-softbox .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-softbox .hero-title.is-one-word{font-size:clamp(76px,19vw,128px)}
}
@media(prefers-reduced-motion:reduce){.hero-shot .window{transition:none}.hero-shot:hover .window{transform:none}}