/* Splash "Try Splash" hero demo: additions to the kit's .demo panel (landing.css). Dark in both themes, like the kit
   panel. The page's own extras (gallery captions on touch, the harmony-wheel band) are at the end. */
.sp-demo{--sp-acc:#52e052;--sp-acc-hi:#8feb8f}
.sp-demo .demo-head .live i{background:var(--sp-acc)}
.sp-stage{height:auto;cursor:default;touch-action:auto;padding:18px 18px 14px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(110% 90% at 30% 15%,#232a3a 0%,#10131b 62%,#0b0d13 100%)}
.sp-board{--sz:240px;display:flex;align-items:flex-start;justify-content:center;gap:22px}
.sp-wheelcol,.sp-gridcol{display:flex;flex-direction:column;align-items:center;gap:10px;width:var(--sz)}
.sp-wheel{display:block;width:var(--sz);height:var(--sz);border-radius:50%;cursor:crosshair;touch-action:none;outline:none}
.sp-wheel:focus-visible{box-shadow:0 0 0 3px rgba(82,224,82,.55)}
.sp-seed{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:9px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);font:500 12px var(--ui);color:#9aa6bb;width:100%;max-width:190px}
.sp-seed i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.sp-seed input{flex:1;min-width:0;border:0;background:transparent;color:#eef2f8;font:500 13px var(--mono);outline:none;padding:0}
.sp-seed:focus-within{border-color:rgba(82,224,82,.6)}
.sp-seed.bad{border-color:#e0605a}
.sp-grid{display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:var(--gap,5px);width:var(--sz);height:var(--sz)}
.sp-grid button{all:unset;box-sizing:border-box;border-radius:var(--rad,6px);background:#333;cursor:pointer;position:relative;
  transition:background-color .38s cubic-bezier(.3,.7,.2,1),transform .15s;transition-delay:var(--d,0ms);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sp-grid button:hover{transform:scale(1.06);z-index:1}
.sp-grid button[aria-pressed="true"]{box-shadow:0 0 0 2px #0e1118,0 0 0 4px var(--sp-acc);z-index:2}
.sp-grid button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.sp-grid.live button{transition-duration:.06s;transition-delay:0ms}
.sp-cap{font:500 12px var(--mono);color:#9aa6bb;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;height:32px;line-height:32px}
/* controls */
.sp-harm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sp-harm button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;height:50px;padding:0 6px;border-radius:9px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#cfd7e5;font:500 12.5px var(--ui);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.sp-harm button:hover{background:rgba(255,255,255,.09);color:#fff}
.sp-harm button[aria-checked="true"]{background:rgba(82,224,82,.14);border-color:var(--sp-acc);color:#fff;box-shadow:0 0 0 3px rgba(82,224,82,.12)}
.sp-harm .dots{display:flex;flex:none}
.sp-harm .dots i{width:10px;height:10px;border-radius:50%;margin-left:-3px;box-shadow:0 0 0 1.5px #151922}
.sp-harm .dots i:first-child{margin-left:0}
.sp-harm .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;line-height:1.2}
.sp-harm .lab .s{display:none}
.sp-demo .demo-ctl{grid-template-columns:minmax(0,1fr)}
.sp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sp-size button{height:32px;padding:0 10px;font:500 12.5px var(--mono)}
.sp-size button[aria-checked="true"]{background:rgba(82,224,82,.16);border-color:var(--sp-acc);color:#fff}
.sp-sort{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 4px 0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);font:500 12.5px var(--ui);color:#9aa6bb;min-width:0;flex:1 1 150px;max-width:220px}
.sp-sort select{flex:1;min-width:0;height:28px;border:0;background:transparent;color:#eef2f8;font:500 12.5px var(--ui);cursor:pointer;outline:none}
.sp-sort select option{background:#161a22;color:#eef2f8}
.sp-sort:focus-within{border-color:rgba(82,224,82,.6)}
.sp-roll{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px 0 12px;border-radius:9px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#63e863,#3fc13f);color:#062306;font:700 13px var(--ui);box-shadow:0 6px 18px -6px rgba(82,224,82,.7);transition:transform .12s,filter .15s}
.sp-roll:hover{filter:brightness(1.08)}
.sp-roll:active{transform:translateY(1px) scale(.98)}
.sp-roll svg{width:16px;height:16px}
.sp-roll.spin svg{animation:sp-spin .5s cubic-bezier(.3,.7,.2,1)}
@keyframes sp-spin{to{transform:rotate(360deg)}}
.sp-pick{display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 4px 4px 6px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.sp-pdot{width:28px;height:28px;border-radius:7px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:background-color .3s}
.sp-pname{display:flex;align-items:baseline;gap:9px;min-width:0;overflow:hidden;white-space:nowrap}
.sp-pname b{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.sp-pname code{font:500 12.5px var(--mono);color:#9aa6bb}
.sp-sp{flex:1}
.sp-copy{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:8px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);color:#e9edf3;font:600 12.5px var(--ui);cursor:pointer;white-space:nowrap;flex:none}
.sp-copy:hover{background:rgba(255,255,255,.13)}
.sp-copy.ghost{background:transparent}
.sp-copy svg{width:15px;height:15px}
.sp-copy.ok{border-color:var(--sp-acc);color:var(--sp-acc-hi)}
.sp-foot{font-size:12px}
/* Image: k-means from a photo (button + menu next to the seed, source chip under the wheel, drop target) */
.sp-wheelcol{container-type:inline-size}
.sp-srcrow{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.sp-srcrow .sp-seed,.sp-srcrow .sp-src{flex:1 1 auto;width:auto;min-width:0;max-width:200px}
.sp-img{position:relative;flex:none}
.sp-imgbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px 0 9px;border-radius:8px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:#cfd7e5;font:500 12.5px var(--ui);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.sp-imgbtn:hover{background:rgba(255,255,255,.09);color:#fff}
.sp-imgbtn:focus-visible{outline:none;border-color:rgba(82,224,82,.6);box-shadow:0 0 0 3px rgba(82,224,82,.25)}
@container (max-width:236px){.sp-imgbtn{padding:0 8px}.sp-imgbtn span{display:none}}
@container (max-width:150px){.sp-seed>span{display:none}}
.sp-imgbtn svg{width:16px;height:16px}
.sp-imgbtn[aria-expanded="true"],.sp-demo.img-on .sp-imgbtn{background:rgba(82,224,82,.14);border-color:var(--sp-acc);color:#fff}
.sp-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:5;display:grid;gap:2px;min-width:188px;padding:5px;border-radius:11px;
  background:#161a22;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px -10px rgba(0,0,0,.7)}
.sp-menu[hidden],.sp-src[hidden]{display:none}
.sp-menu button{display:flex;align-items:center;gap:9px;height:36px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#e9edf3;
  font:500 13px var(--ui);text-align:left;cursor:pointer;white-space:nowrap}
.sp-menu button:hover,.sp-menu button:focus-visible{background:rgba(255,255,255,.08);outline:none}
.sp-menu svg{width:16px;height:16px;flex:none;color:var(--sp-acc)}
.sp-menu img{width:26px;height:18px;border-radius:4px;object-fit:cover;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.sp-menu-hint{padding:3px 10px 4px;font:500 11.5px var(--ui);color:#8995ab}
@media (hover:none){.sp-menu-hint{display:none}}
.sp-src{display:flex;align-items:center;gap:8px;height:32px;padding:0 3px 0 4px;border-radius:9px;background:rgba(82,224,82,.08);
  border:1px solid rgba(82,224,82,.45);font:500 12px var(--ui);color:#cfd7e5;width:100%;max-width:190px}
.sp-src img{width:34px;height:24px;border-radius:5px;object-fit:cover;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.sp-src span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-src button{display:grid;place-items:center;width:26px;height:26px;flex:none;border:0;border-radius:7px;background:transparent;color:#9aa6bb;cursor:pointer}
.sp-src button:hover{background:rgba(255,255,255,.1);color:#fff}
.sp-src svg{width:14px;height:14px}
.sp-demo.img-on .sp-seed{display:none}
.sp-cap.warn{color:#f0a49f}
.sp-drop{position:absolute;inset:8px;z-index:4;display:grid;place-items:center;border:2px dashed var(--sp-acc);border-radius:14px;
  background:rgba(11,13,19,.78);color:#eef2f8;font:600 14px var(--ui);opacity:0;pointer-events:none;transition:opacity .15s}
.sp-drop span{display:inline-flex;align-items:center;gap:9px}
.sp-drop svg{width:20px;height:20px;color:var(--sp-acc)}
.sp-demo.dropping .sp-drop{opacity:1}
.sp-demo.busy .sp-grid{opacity:.6;transition:opacity .2s}
@media (max-width:560px){
  .sp-stage{padding:14px 10px 10px}
  .sp-board{gap:12px}
  .sp-harm{gap:5px}
  .sp-harm button{height:46px;padding:0 4px;gap:4px;font-size:11.5px}
  .sp-harm .dots i{width:8px;height:8px;margin-left:-2px}
  .sp-harm .lab .l{display:none}.sp-harm .lab .s{display:inline}
  .sp-sort{flex-basis:120px}
  .sp-copy.ghost{display:none}
  .sp-seed{height:30px;padding:0 8px}
  .sp-cap{font-size:11px;height:30px;line-height:30px}
  .sp-foot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sp-grid button,.sp-pdot{transition:none}
  .sp-roll.spin svg{animation:none}
}
/* ?embed=demo: the vault's "Try demo here" pop-up */
html.embed-demo .sp-demo{overflow:auto}
html.embed-demo .sp-stage{min-height:220px}

/* ---- page extras (not the demo) ---- */
/* gallery captions: always visible where there is no hover (phones, tablets) */
@media (hover:none){.gal figcaption{opacity:1}}
/* the harmony-wheel band: the user's favourite render, big */
#new .newhero img{aspect-ratio:16/9;object-fit:cover}
#new .newgrid:empty{display:none}
.sp-demo .demo-head b,.sp-demo .demo-head .demo-sub{white-space:nowrap}
@media (max-width:560px){.sp-demo .sp-hs{display:none}}
@media (max-width:560px){
  .sp-row{flex-wrap:nowrap;gap:6px}
  .sp-size button{padding:0 7px;font-size:12px}
  .sp-sort{flex:1 1 0;min-width:0;padding-left:8px}
  .sp-sort>span{display:none}
  .sp-roll{padding:0 11px 0 9px;margin-left:0}
  .sp-srcrow{gap:6px}
  .sp-srcrow .sp-seed{gap:6px;padding:0 7px}
  .sp-imgbtn{height:30px;padding:0 6px}
  .sp-imgbtn span{display:none}
  .sp-src{height:30px;gap:6px;padding:0 2px 0 3px}
  .sp-src img{width:26px;height:20px}
  .sp-src button{width:22px}
  .sp-cap{white-space:normal;height:auto;min-height:30px;line-height:1.35;padding-top:2px}
}