/*! Build It Skins: the Skin Generator (beta). Built by hub-drafts/generator/src/build_site.py (the SKIN GENERATOR chat): edit the sources there, not this file. */
/* SKIN GENERATOR PAGE DRAFTS (2026-10-07): the site's own look (bisk.css tokens and parts: Poppins 800 for h1/h2, the
   system font for the rest, 42/26/15/13.5px, surface cards with a 1px border, 38px red-tint tiles, the site's buttons),
   light and dark. Prefix dg-. */
body:not(.bi-dark) .dg,body:not(.bi-dark) .dg-drawer,body:not(.bi-dark) .bisk-dlg{--bi-bg:#f2f2f5;--bi-surface:#ffffff;--bi-text:#17171b;--bi-text-muted:#62636b;--bi-border:#e0e0e6;--bi-hover:rgba(0,0,0,.06)}
.dg{min-height:100vh;background:var(--bk-bg);padding:0 0 96px}
.dg button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dg svg{width:17px;height:17px;flex:none}
.dg-frame{width:min(1400px,calc(100vw - 32px));margin:0 auto}
.dg-grow{flex:1 1 auto}
.dg-box{background:var(--bk-card);border:1px solid var(--bk-line);border-radius:18px}
.dg-h3{margin:18px 0 8px;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted)}
.dg-h3:first-child{margin-top:0}
.dg-link{background:none !important;border:0 !important;padding:0 !important;margin-top:16px;color:var(--bk-muted) !important;font-size:13.5px;font-weight:700}
@media (hover:hover){.dg-link:hover{color:var(--bk-red) !important}}
.dg-wide{width:100%}
.dg-empty{margin:40px 0;text-align:center;color:var(--bk-muted)}

/* the site's header and crumbs (a sketch of them) */
.dg-top{border-bottom:1px solid var(--bk-line);background:var(--bk-card)}
.dg-top__in{display:flex;align-items:center;gap:28px;height:58px}
.dg-logo{font-family:var(--bk-head);font-weight:900;font-size:17px;letter-spacing:.6px}
.dg-nav{display:flex;gap:20px;font-size:14px;font-weight:800;color:var(--bk-muted)}
.dg-nav a.is-on{color:var(--bk-text)}
.dg-crumbs{display:flex;align-items:center;gap:8px;padding:18px 0 14px;font-size:13px;color:var(--bk-muted)}
.dg-crumbs b{color:var(--bk-text);font-weight:700}
.dg-crumbs i{font-style:normal;opacity:.6}

/* title */
.dg-h1{display:flex;align-items:center;gap:12px}
.dg-q{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--bk-line) !important;background:transparent !important;color:var(--bk-muted) !important;font:800 15px/1 var(--bk-font) !important;display:grid;place-items:center;padding:0 !important}
@media (hover:hover){.dg-q:hover{border-color:var(--bk-red) !important;color:var(--bk-red) !important}}
.dg-lead{margin:10px 0 0;max-width:600px;font-size:17px;line-height:1.6;color:var(--bk-muted)}
.dg-lead--c{margin-left:auto;margin-right:auto}

/* chips, swatches, words, segments */
.dg-chips{display:flex;flex-wrap:wrap;gap:6px}
.dg-chip{padding:8px 13px !important;border-radius:999px !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important;transition:border-color .15s,color .15s,background .15s}
@media (hover:hover){.dg-chip:hover{border-color:var(--bk-red) !important;color:var(--bk-red) !important}}
.dg-chip[aria-pressed="true"]{background:rgba(214,56,55,.12) !important;border-color:rgba(214,56,55,.45) !important;color:var(--bk-red) !important}
.dg-sws{display:flex;flex-wrap:wrap;gap:7px}
.dg-sw{width:30px;height:30px;border-radius:50%;padding:0 !important;border:1px solid rgba(127,127,127,.35) !important;background:var(--c) !important;display:grid;place-items:center;transition:box-shadow .15s}
.dg-sws--sm .dg-sw{width:26px;height:26px}
.dg-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bk-card),0 0 0 4px var(--bk-red)}
.dg-sw--any{background:conic-gradient(from 90deg,#f44,#fd3,#4c4,#3cf,#46f,#c4f,#f44) !important}
.dg-sw--any svg{width:15px;height:15px;stroke:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.dg-sw--any.is-set{background:var(--c) !important}
.dg-words{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:12px;border:1.5px solid var(--bk-line);background:var(--bk-bg);transition:border-color .15s}
.dg-words:focus-within{border-color:var(--bk-red)}
.dg-words svg{color:var(--bk-red)}
.dg-words input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--bk-text);font:600 15px/1 var(--bk-font)}
.dg-words input::placeholder{color:var(--bk-muted);font-weight:500}
.dg-words--big{height:62px;border-radius:16px;padding:0 18px;font-size:17px}
.dg-words--big input{font-size:17px}
.dg-seg{display:inline-flex;gap:3px;padding:3px;border-radius:12px;border:1px solid var(--bk-line);background:var(--bk-bg)}
.dg-seg button{display:inline-flex;align-items:center;gap:7px;padding:9px 14px !important;border-radius:9px !important;border:0 !important;background:transparent !important;color:var(--bk-muted) !important;font-size:13.5px !important;font-weight:800 !important}
.dg-seg button svg{width:15px;height:15px}
@media (hover:hover){.dg-seg button:hover{color:var(--bk-text) !important}}
.dg-seg button[aria-pressed="true"]{background:var(--bk-card) !important;color:var(--bk-text) !important;box-shadow:0 1px 4px rgba(0,0,0,.25)}

/* skin cards */
.dg-card{position:relative;display:flex;flex-direction:column;background:var(--bk-card);border:1px solid var(--bk-line);border-radius:16px;overflow:hidden;transition:border-color .15s,transform .2s}
@media (hover:hover){.dg-card:hover{border-color:rgba(214,56,55,.45);transform:translateY(-2px)}}
.dg-card__pic{display:block;padding:0 !important;border:0 !important;background:var(--bk-cardbg) !important}
.dg-card__pic canvas{display:block;width:100%;height:auto;aspect-ratio:300/380}
.dg-card__meta{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.dg-card__meta b{font-size:15px;font-weight:800;line-height:1.3}
.dg-card__meta span{display:flex;flex-wrap:wrap;gap:5px;font-size:12.5px;color:var(--bk-muted);line-height:1.4}
.dg-card .dg-acts{position:absolute;top:10px;right:10px;flex-direction:column;opacity:0;transition:opacity .15s}
@media (hover:hover){.dg-card:hover .dg-acts,.dg-card:has(:focus-visible) .dg-acts{opacity:1}}
@media (hover:none){.dg-card .dg-acts{opacity:1}}
.dg-acts{display:flex;gap:6px}
.dg-ib{width:36px;height:36px;border-radius:10px;padding:0 !important;display:grid;place-items:center;background:var(--bk-card) !important;border:1px solid var(--bk-line) !important;color:var(--bk-text) !important;transition:color .15s,border-color .15s}
@media (hover:hover){.dg-ib:hover{color:var(--bk-red) !important;border-color:rgba(214,56,55,.45) !important}}
.dg-ib.is-on{color:#fff !important;background:var(--bk-red) !important;border-color:var(--bk-red) !important}
.dg-ib.is-on svg{fill:currentColor}
.dg-acts--big .dg-ib{width:48px;height:48px;border-radius:11px}
.dg-tag{display:inline-block;padding:3px 9px;border-radius:7px;background:rgba(214,56,55,.12);border:1px solid rgba(214,56,55,.45);color:var(--bk-red);font-size:11.5px;font-weight:800}
.dg-tags{display:flex;flex-wrap:wrap;gap:6px}
.dg-pcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.dg-pc{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:10px;background:var(--bk-bg);border:1px solid var(--bk-line);font-size:12.5px}
.dg-pc svg{width:15px;height:15px;color:var(--bk-muted)}
.dg-pc b{font-weight:700}
.dg-pc em{display:flex;gap:3px}
.dg-pc em i{width:10px;height:10px;border-radius:50%;background:var(--c);border:1px solid rgba(127,127,127,.4)}
.dg-stage{position:relative;background:var(--bk-stage);border-radius:14px;overflow:hidden}
.dg-vhost{position:absolute;inset:0}
.dg-vhost canvas{width:100% !important;height:100% !important;display:block}

/* remix my skin: the drop zone and the skin */
.dg-drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 18px;border:2px dashed var(--bk-line);border-radius:16px;text-align:center;transition:border-color .15s,background .15s}
.dg-drop:hover{border-color:rgba(214,56,55,.45)}
.dg-drop b{font-size:15px;font-weight:800}
.dg-drop p{margin:0 0 6px;font-size:13.5px;color:var(--bk-muted)}
.dg-file{cursor:pointer}
.dg-samples{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--bk-muted)}
.dg-samples span{width:100%}
.dg-smp{padding:0 !important;border-radius:10px !important;border:1px solid var(--bk-line) !important;background:var(--bk-cardbg) !important;overflow:hidden;transition:border-color .15s}
.dg-smp canvas{display:block;width:52px;height:65px}
@media (hover:hover){.dg-smp:hover{border-color:var(--bk-red) !important}}
.dg-mine{display:flex;gap:14px;align-items:center}
.dg-mine canvas{width:120px;height:150px;border-radius:12px;background:var(--bk-cardbg);flex:none}
.dg-mine__t{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.dg-mine__t .bisk-eyebrow{margin:0}
.dg-mine__t b{font-size:17px;font-weight:800}
.dg-mine__t p{margin:0 0 6px;font-size:13.5px;color:var(--bk-muted)}
.dg-mine--col{flex-direction:column;align-items:stretch;text-align:left}
.dg-mine--col canvas{width:100%;height:auto;aspect-ratio:240/300}

/* the help */
.dg-help .bisk-dlg__box{max-width:760px}
.dg-help__lead{margin:0 0 16px;color:var(--bk-muted);font-size:15px}
.dg-help__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dg-help__step{display:flex;gap:12px;padding:16px;border-radius:14px;border:1px solid var(--bk-line);background:var(--bk-bg)}
.dg-help__step b{font-size:15px;font-weight:800}
.dg-help__step p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--bk-muted)}
.dg-help__know{margin-top:14px;padding:14px 16px;border-radius:14px;background:rgba(214,56,55,.08);border:1px solid rgba(214,56,55,.25)}
.dg-help__know b{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-red)}
.dg-help__know p{margin:4px 0 0;font-size:13.5px;color:var(--bk-muted)}
@media (max-width:640px){.dg-help__grid{grid-template-columns:1fr}}

/* busy */
.dg.is-busy [data-act="gen"],.dg.is-busy [data-act="emore"]{pointer-events:none;opacity:.6}
.dg.is-busy .dg-card,.dg.is-busy .dg-row,.dg.is-busy .dg-por,.dg.is-busy .dg-stage{opacity:.55;transition:opacity .2s}
.dg.is-busy::after{content:'Making skins...';position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:9999;padding:10px 18px;border-radius:999px;background:var(--bk-red);color:#fff;font-weight:800;font-size:14px;box-shadow:0 6px 24px rgba(214,56,55,.4)}

/* the bar at the bottom: the drafts */
.dg-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9000;display:flex;gap:4px;padding:5px;border-radius:14px;background:rgba(18,18,20,.92);border:1px solid #2c2c30;box-shadow:0 10px 34px rgba(0,0,0,.45);backdrop-filter:blur(8px);max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:center}
.dg-bar__b{display:inline-flex;align-items:center;gap:8px;padding:9px 14px !important;border-radius:10px !important;border:0 !important;background:transparent !important;color:#c9c9cf !important;font-size:13.5px !important;font-weight:800 !important}
.dg-bar__b b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#2a2a2e;color:#fff;font-size:12px}
@media (hover:hover){.dg-bar__b:hover{color:#fff !important;background:rgba(255,255,255,.08) !important}}
.dg-bar__b[aria-pressed="true"]{background:#d63837 !important;color:#fff !important}
.dg-bar__b[aria-pressed="true"] b{background:rgba(255,255,255,.22)}
.dg-bar__th{border-left:1px solid #2c2c30 !important;border-radius:0 10px 10px 0 !important;margin-left:4px}

/* the latest wall */
.dg-sec{margin-top:44px}
.dg-sec__head{margin-bottom:18px}
.dg-sec__head p{margin:6px 0 0;color:var(--bk-muted);font-size:15px}
.dg-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.dg-wcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 10px;border-radius:14px;background:var(--bk-card);border:1px solid var(--bk-line)}
.dg-wcard canvas{width:100%;height:auto;aspect-ratio:160/200;background:var(--bk-cardbg);border-radius:10px}
.dg-wcard b{font-size:12px;font-weight:800;text-align:center;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ================= A: STUDIO ================= */
.dg-a__hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 28px;background:radial-gradient(90% 140% at 100% 0%,rgba(214,56,55,.16),rgba(214,56,55,0) 60%),var(--bk-card)}
.dg-a__who{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:14px;background:var(--bk-bg);border:1px solid var(--bk-line);min-width:260px}
.dg-a__who:empty{display:none}
.dg-a__who canvas{width:48px;height:48px;border-radius:10px;background:var(--bk-cardbg)}
.dg-a__who b{display:block;font-size:15px;font-weight:800}
.dg-a__who span{font-size:12.5px;color:var(--bk-muted)}
.dg-a__bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;padding:12px}
.dg-a__app{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;gap:14px;margin-top:14px;align-items:start}
.dg-a__side,.dg-a__list{padding:20px}
.dg-a__stage{padding:14px}
.dg-a__stage .dg-stage{height:520px}
.dg-a__info{padding:18px 8px 6px}
.dg-a__info p{margin:8px 0 12px;color:var(--bk-muted);font-size:15px;line-height:1.6}
.dg-a__rows{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.dg-row{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;text-align:left;transition:border-color .15s}
.dg-row canvas{width:52px;height:66px;border-radius:9px;background:var(--bk-cardbg);flex:none}
.dg-row span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dg-row b{font-size:14px;font-weight:800;line-height:1.25}
.dg-row em{font-style:normal;font-size:12px;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-row kbd{font:800 11px/1 var(--bk-font);color:var(--bk-muted);border:1px solid var(--bk-line);border-radius:6px;padding:4px 6px}
@media (hover:hover){.dg-row:hover{border-color:rgba(214,56,55,.45) !important}}
.dg-row.is-sel{border-color:var(--bk-red) !important;background:rgba(214,56,55,.08) !important}
@media (max-width:1180px){.dg-a__app{grid-template-columns:minmax(0,1fr)}.dg-a__stage .dg-stage{height:440px}.dg-a__rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
@media (max-width:700px){.dg-a__hero{flex-direction:column;align-items:flex-start;padding:22px}.dg-a__who{min-width:0;width:100%}}

/* ================= B: PROMPT ================= */
.dg-b__hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 0 30px}
.dg-b__hero .dg-h1{justify-content:center}
.dg-b__hero .bisk-eyebrow{margin:0}
.dg-b__prompt{display:flex;gap:10px;width:min(820px,100%)}
.dg-b__prompt .dg-words{flex:1}
.dg-b__prompt .bisk-btn{height:62px;border-radius:16px !important;padding:0 26px !important}
.dg-b__ideas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;font-size:13.5px;color:var(--bk-muted)}
.dg-idea{padding:7px 12px !important;border-radius:999px !important;border:1px dashed var(--bk-line) !important;background:transparent !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:700 !important}
@media (hover:hover){.dg-idea:hover{border-color:var(--bk-red) !important;color:var(--bk-red) !important}}
.dg-b__filters{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.dg-b__mine{display:flex;gap:18px;align-items:stretch;justify-content:center;width:min(900px,100%);text-align:left}
.dg-b__mine .dg-drop{flex:1}
.dg-b__minectl{display:flex;flex-direction:column;gap:12px;justify-content:center}
.dg-b__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dg-card--big .dg-card__meta b{font-size:17px}
.dg-b__more{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px;color:var(--bk-muted);font-size:13.5px}
@media (max-width:1000px){.dg-b__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dg-b__mine{flex-direction:column}}
@media (max-width:640px){.dg-b__prompt{flex-direction:column}.dg-b__prompt .bisk-btn{height:52px}}
.dg-open .bisk-dlg__box{max-width:900px;width:min(900px,calc(100vw - 32px))}
.dg-open__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.dg-stage--dlg{height:440px}
.dg-open__t p{margin:0 0 12px;color:var(--bk-muted);line-height:1.6}
.dg-open__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
@media (max-width:760px){.dg-open__in{grid-template-columns:1fr}.dg-stage--dlg{height:340px}}

/* ================= C: STAGE ================= */
.dg-c__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 0 14px;flex-wrap:wrap}
.dg-c__head .dg-lead,.dg-e__head .dg-lead{margin-top:6px}
.dg-c__stage{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr) 340px;min-height:590px;border-radius:22px;overflow:hidden;border:1px solid var(--bk-line);
  background:radial-gradient(60% 70% at 50% 40%,rgba(214,56,55,.22),rgba(214,56,55,0) 70%),var(--bk-stage)}
.dg-c__rail{display:flex;flex-direction:column;gap:10px;padding:18px 0 18px 18px;justify-content:center}
.dg-por{position:relative;padding:0 !important;border-radius:16px !important;border:2px solid transparent !important;background:rgba(0,0,0,.25) !important;overflow:hidden;transition:border-color .15s,transform .15s}
body:not(.bi-dark) .dg-por{background:rgba(255,255,255,.6) !important}
.dg-por canvas{display:block;width:100%;height:auto;aspect-ratio:1}
.dg-por kbd{position:absolute;left:6px;bottom:6px;font:800 11px/1 var(--bk-font);color:#fff;background:rgba(0,0,0,.55);border-radius:6px;padding:3px 6px}
@media (hover:hover){.dg-por:hover{transform:translateX(3px)}}
.dg-por.is-sel{border-color:var(--bk-red) !important;box-shadow:0 0 0 4px rgba(214,56,55,.25)}
.dg-c__view{position:relative}
.dg-stage--c{position:absolute;inset:0;border-radius:0;background:transparent}
.dg-c__name{position:absolute;left:28px;bottom:24px;max-width:calc(50% - 150px);pointer-events:none}
.dg-c__name .bisk-eyebrow{margin:0 0 4px}
.dg-c__name h2{margin:0 0 10px;font-family:var(--bk-head);font-weight:800;font-size:42px;line-height:1.08;letter-spacing:-.8px;text-wrap:balance;text-shadow:0 4px 24px rgba(0,0,0,.45)}
body:not(.bi-dark) .dg-c__name h2{text-shadow:none}
.dg-c__panel{display:flex;flex-direction:column;gap:10px;padding:24px;background:rgba(0,0,0,.28);border-left:1px solid rgba(255,255,255,.06)}
body:not(.bi-dark) .dg-c__panel{background:rgba(255,255,255,.55);border-left-color:var(--bk-line)}
.dg-c__desc{margin:0 0 6px;font-size:15px;line-height:1.6;color:var(--bk-muted)}
.dg-lock{display:flex;align-items:center;gap:12px;padding:11px 14px !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;text-align:left;transition:border-color .15s}
.dg-lock svg{width:18px;height:18px;color:var(--bk-muted)}
.dg-lock span{display:flex;flex-direction:column;min-width:0}
.dg-lock em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--bk-muted)}
.dg-lock b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.dg-lock:hover{border-color:rgba(214,56,55,.45) !important}}
.dg-lock[aria-pressed="true"]{border-color:var(--bk-red) !important;background:rgba(214,56,55,.1) !important}
.dg-lock[aria-pressed="true"] svg{color:var(--bk-red)}
.dg-c__btns{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap;align-items:center}
.dg-c__bar{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:14px;padding:14px}
.dg-c__bar .dg-words{flex:1 1 240px;max-width:340px}
.dg-c__roll{padding:16px 26px !important;font-size:16px !important}
@media (max-width:1100px){.dg-c__stage{grid-template-columns:minmax(0,1fr);min-height:0}.dg-c__rail{flex-direction:row;padding:14px;justify-content:flex-start}.dg-por{width:84px}.dg-c__view{height:460px}.dg-c__panel{border-left:0;border-top:1px solid rgba(255,255,255,.06)}.dg-c__name h2{font-size:32px}}

/* ================= D: TWO WAYS IN ================= */
.dg-d__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;padding:28px 32px}
.dg-d__ways{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dg-way{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:20px !important;border-radius:16px !important;border:1.5px solid var(--bk-line) !important;background:var(--bk-bg) !important;text-align:left;transition:border-color .15s,background .15s}
.dg-way span:last-child{display:flex;flex-direction:column;gap:5px}
.dg-way b{font-size:17px;font-weight:800}
.dg-way em{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--bk-muted)}
@media (hover:hover){.dg-way:hover{border-color:rgba(214,56,55,.45) !important}}
.dg-way.is-on{border-color:var(--bk-red) !important;background:rgba(214,56,55,.08) !important}
.dg-d__new,.dg-d__right,.dg-d__left{padding:20px}
.dg-d__new{margin-top:14px}
.dg-d__ctl{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.dg-d__ctl .dg-words{flex:1 1 260px;max-width:380px}
.dg-d__mine{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;margin-top:14px;align-items:start}
.dg-grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.dg-grid5--sm{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}
.dg-grid5--sm .dg-card__meta{padding:8px 10px 10px}
.dg-grid5--sm .dg-card__meta b{font-size:13px}
@media (max-width:1100px){.dg-d__hero{grid-template-columns:1fr}.dg-d__mine{grid-template-columns:1fr}.dg-grid5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.dg-d__ways{grid-template-columns:1fr}.dg-grid5{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================= E: FEED ================= */
.dg-e__head{padding:6px 0 16px}
.dg-e__bar{position:sticky;top:10px;z-index:50;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.dg-e__bar .dg-words{flex:1 1 180px;max-width:260px;height:42px}
.dg-e__taste{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:14px;font-weight:800;color:var(--bk-muted)}
.dg-e__taste svg{color:var(--bk-red);width:15px;height:15px}
.dg-e__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:16px}
.dg-card--feed .dg-card__meta b{font-size:14px}
.dg-in{animation:dgIn .45s ease both}
@keyframes dgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dg-e__end{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 0;color:var(--bk-muted);font-size:13.5px}
@media (max-width:1200px){.dg-e__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.dg-e__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.dg-e__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dg-drawer{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,0);pointer-events:none;transition:background .25s}
.dg-drawer.is-on{background:rgba(0,0,0,.45);pointer-events:auto}
.dg-drawer__box{position:absolute;top:0;right:0;bottom:0;width:min(460px,100vw);padding:22px;background:var(--bk-card);border-left:1px solid var(--bk-line);transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;gap:8px}
.dg-drawer.is-on .dg-drawer__box{transform:none}
.dg-drawer__box .bisk-h2{margin-top:6px}
.dg-drawer__box p{margin:0;color:var(--bk-muted);line-height:1.6}
.dg-drawer__x{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:10px;padding:0 !important;display:grid;place-items:center;background:var(--bk-bg) !important;border:1px solid var(--bk-line) !important;color:var(--bk-text) !important}
.dg-stage--drawer{height:380px;flex:none}
.dg-remdlg .bisk-dlg__box{max-width:1000px;width:min(1000px,calc(100vw - 32px))}
.dg-erem__ctl{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.dg-mine--row{flex-direction:row}

/* B v2: the box reads what you type, the help opens under it, the colours have their own row */
.dg-b__box{position:relative;width:min(820px,100%);display:flex;flex-direction:column;gap:10px}
.dg-b__box .dg-b__prompt{width:100%}
.dg-read{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;min-height:28px;font-size:13px}
.dg-read__t{font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted);margin-right:2px}
.dg-read__hint{display:inline-flex;align-items:center;gap:7px;color:var(--bk-muted)}
.dg-read__hint svg{width:15px;height:15px}
.dg-rc{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(214,56,55,.12);border:1px solid rgba(214,56,55,.45);color:var(--bk-red);font-weight:800}
.dg-rc em{font-style:normal;font-weight:700;opacity:.75}
.dg-rc--skip{background:transparent;border:1px dashed var(--bk-line);color:var(--bk-muted);font-weight:700}
.dg-pop{position:absolute;left:0;right:0;top:72px;z-index:60;padding:18px 20px;border-radius:16px;background:var(--bk-card);border:1px solid var(--bk-line);box-shadow:0 18px 50px rgba(0,0,0,.45);text-align:left}
.dg-pop__head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.dg-pop__head b{font-size:15px;font-weight:800}
.dg-pop__head span{font-size:13.5px;line-height:1.5;color:var(--bk-muted)}
.dg-pop__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dg-pop__grid div,.dg-pop__full{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.dg-pop__grid em,.dg-pop__full em{width:100%;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted)}
.dg-pop__full{margin-top:14px;padding-top:12px;border-top:1px solid var(--bk-line)}
.dg-idea--full{border-style:solid !important}
.dg-pop__foot{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:12.5px;color:var(--bk-muted)}
.dg-pop__foot svg{width:15px;height:15px;flex:none}
@media (max-width:760px){.dg-pop__grid{grid-template-columns:1fr 1fr}}
.dg-b__colours{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;padding:14px 18px;border-radius:16px;background:var(--bk-card);border:1px solid var(--bk-line)}
.dg-b__ct{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3}
.dg-b__ct b{font-size:15px;font-weight:800}
.dg-b__ct span{font-size:12.5px;color:var(--bk-muted)}
.dg-b__colours .dg-sw{width:34px;height:34px}
.dg-sw b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font:800 11px/1 var(--bk-font)}
.dg-pal{display:flex;width:150px;height:14px;border-radius:999px;overflow:hidden;border:1px solid var(--bk-line)}
.dg-pal i{display:block;background:var(--c)}
.dg-pal--empty{width:auto;height:auto;border:0;border-radius:0;font-size:12.5px;color:var(--bk-muted)}

/* 10 free generations a day: the pips, low, none left */
.dg-quota{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid var(--bk-line);background:var(--bk-bg);font-size:13px;white-space:nowrap}
.dg-quota b{font-weight:800}
.dg-quota__pips{display:inline-flex;gap:3px}
.dg-quota__pips i{width:7px;height:16px;border-radius:3px;background:var(--bk-line)}
.dg-quota__pips i.on{background:var(--bk-red);box-shadow:0 0 8px rgba(214,56,55,.35)}
.dg-quota.is-low b{color:#e8a020}
.dg-quota.is-low .dg-quota__pips i.on{background:#e8a020;box-shadow:0 0 8px rgba(232,160,32,.35)}
.dg-quota.is-out{opacity:.85}
.dg-quota.is-out b{color:var(--bk-muted)}
.dg-quota__pro{display:inline-flex;align-items:center;gap:5px;padding:4px 9px !important;border-radius:999px !important;border:1px solid rgba(214,56,55,.45) !important;background:rgba(214,56,55,.12) !important;color:var(--bk-red) !important;font-size:12px !important;font-weight:800 !important}
.dg-quota__pro svg{width:13px;height:13px}
.dg-quota--c{align-self:center}
.dg-quota--big{padding:12px 18px}
.dg-quota--big .dg-quota__pips i{width:10px;height:22px}
.dg-out{display:flex;align-items:center;gap:16px;margin:0 0 14px;padding:16px 18px;border-radius:16px;border:1px solid rgba(214,56,55,.35);background:radial-gradient(80% 140% at 0% 0%,rgba(214,56,55,.14),rgba(214,56,55,0) 70%),var(--bk-card)}
.dg-out__t{flex:1;min-width:0}
.dg-out__t b{font-size:15px;font-weight:800}
.dg-out__t p{margin:3px 0 0;font-size:13.5px;color:var(--bk-muted)}
.dg-e__end .dg-out{width:100%}
.dg-limit .bisk-dlg__box{max-width:560px}
.dg-limit__in{display:flex;flex-direction:column;gap:14px}
.dg-limit__in p{margin:0;font-size:15px;line-height:1.6;color:var(--bk-muted)}
.dg-limit__in p b{color:var(--bk-text)}
.dg-limit__pips{display:flex;justify-content:center}
.dg-limit__pro{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(214,56,55,.08);border:1px solid rgba(214,56,55,.3)}
.dg-limit__pro b{display:block;font-size:15px;font-weight:800}
.dg-limit__pro span{font-size:13.5px;color:var(--bk-muted)}
.dg-limit__btns{display:flex;gap:8px;flex-wrap:wrap}
.dg-bar__god{color:#f2c230 !important}
@media (hover:hover){.dg-bar__god:hover{background:rgba(242,194,48,.12) !important;color:#f2c230 !important}}

/* ================= PLAN B ================= */
.dg-beta{display:inline-block;padding:2px 7px;border-radius:6px;background:rgba(214,56,55,.12);border:1px solid rgba(214,56,55,.45);color:var(--bk-red);font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle}
.dg-betalink{display:inline-flex;align-items:center;gap:8px;padding:8px 0 !important;border:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:13.5px !important;font-weight:800 !important}
.dg-betalink svg{width:15px;height:15px;color:var(--bk-red)}
@media (hover:hover){.dg-betalink:hover{color:var(--bk-text) !important}}
.dg-betabox{width:100%;gap:8px}
.dg-betabox__t{display:flex;align-items:center;gap:8px}
.dg-betabox__t b{font-size:13.5px;font-weight:800}
.dg-betabox__s{font-size:12px;color:var(--bk-muted)}
.dg-betabox .dg-pop{top:84px}
.dg-betabox .dg-read{justify-content:flex-start}
.dg-pals{display:flex;flex-wrap:wrap;gap:6px}
.dg-palb{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;padding:6px 8px 7px !important;border-radius:10px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;transition:border-color .15s}
.dg-palb span{display:flex;gap:2px}
.dg-palb i{width:16px;height:16px;border-radius:5px;background:var(--c);border:1px solid rgba(127,127,127,.3)}
.dg-palb b{font-size:11.5px;font-weight:800}
@media (hover:hover){.dg-palb:hover{border-color:rgba(214,56,55,.45) !important}}
.dg-palb[aria-pressed="true"]{border-color:var(--bk-red) !important;box-shadow:0 0 0 2px rgba(214,56,55,.25)}
.dg-pals--big{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.dg-pals--big .dg-palb{padding:10px 12px 12px !important;border-radius:14px !important;gap:8px}
.dg-pals--big .dg-palb span{width:100%;gap:0;border-radius:9px;overflow:hidden}
.dg-pals--big .dg-palb i{flex:1;height:40px;border-radius:0;border:0}
.dg-pals--big .dg-palb i:first-child{flex:1.8}
.dg-pals--big .dg-palb b{font-size:14px}
.dg-sls{display:flex;flex-direction:column;gap:10px}
.dg-sls--c{flex-direction:row;flex-wrap:wrap;gap:10px 22px}
.dg-sls--c .dg-sl{flex:1 1 260px}
.dg-sl{display:grid;grid-template-columns:96px minmax(0,1fr) 96px;align-items:center;gap:10px;font-size:12.5px;color:var(--bk-muted);font-weight:700}
.dg-sl span:last-child{text-align:right}
.dg-sl input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--bk-line),var(--bk-line));outline:none;margin:0;cursor:pointer;position:relative}
.dg-sl input{background:linear-gradient(90deg,var(--bk-line) 0,var(--bk-line) 50%,var(--bk-line) 100%)}
.dg-sl input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--bk-red);border:3px solid var(--bk-card);box-shadow:0 0 0 1px var(--bk-red),0 2px 8px rgba(214,56,55,.4)}
.dg-sl input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bk-red);border:3px solid var(--bk-card)}
.dg-sls__reset{align-self:flex-start;margin-top:0 !important;font-size:12.5px !important}
.dg-seg--sm button{padding:7px 11px !important;font-size:12.5px !important}
.dg-genrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.dg-genrow--wide{margin-top:18px}
.dg-genrow--wide .dg-genrow__b{flex:1 1 100%;padding:16px 20px !important;font-size:16px !important}
.dg-genrow--c{justify-content:center}
.dg-likeof{display:flex;align-items:center;gap:8px;margin-top:10px}
.dg-likeof .dg-link{margin-top:0}
.dg-more{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:0 !important;border:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:800 !important}
.dg-more svg{width:14px;height:14px}
@media (hover:hover){.dg-more:hover{color:var(--bk-red) !important}}
.dg-finebtn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px !important;border-radius:10px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:800 !important}
.dg-finebtn svg{width:15px;height:15px}
.dg-finebtn[aria-expanded="true"]{border-color:rgba(214,56,55,.45) !important;color:var(--bk-red) !important}
.dg-info{padding:16px 6px 4px}
.dg-info p{margin:8px 0 10px;color:var(--bk-muted);line-height:1.6}
.dg-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}
.dg-thumb{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 6px 8px !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;transition:border-color .15s}
.dg-thumb canvas{width:100%;height:auto;aspect-ratio:120/150;border-radius:8px;background:var(--bk-cardbg)}
.dg-thumb b{font-size:12px;font-weight:800;text-align:center;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dg-thumb kbd{position:absolute;top:8px;left:8px;font:800 10.5px/1 var(--bk-font);color:#fff;background:rgba(0,0,0,.5);border-radius:5px;padding:3px 5px}
@media (hover:hover){.dg-thumb:hover{border-color:rgba(214,56,55,.45) !important}}
.dg-thumb.is-sel{border-color:var(--bk-red) !important;background:rgba(214,56,55,.08) !important}
/* F mixer */
.dg-f__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 0 14px;flex-wrap:wrap}
.dg-f__app{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:14px;align-items:start}
.dg-f__stage{padding:14px}
.dg-f__stage .dg-stage{height:500px}
.dg-f__mix{padding:20px}
.dg-f__beta{margin-top:14px;padding-top:12px;border-top:1px solid var(--bk-line)}
@media (max-width:1100px){.dg-f__app{grid-template-columns:minmax(0,1fr)}.dg-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* G colour first */
.dg-g__hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:26px 0 22px}
.dg-g__hero .dg-h1{justify-content:center}
.dg-g__col{padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.dg-g__top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dg-g__top .bisk-eyebrow{margin:0 0 4px}
.dg-g__own{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 14px;border-radius:14px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.dg-g__own > b{font-size:13.5px;font-weight:800}
.dg-g__more{display:flex;flex-wrap:wrap;gap:16px 28px}
.dg-g__grp{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dg-g__grp em,.dg-g__fine em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted);margin-right:4px}
.dg-g__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.dg-g__foot .dg-betabox{flex:1 1 420px}
.dg-g__fine{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.dg-g__res{margin-top:16px}
.dg-g__mine{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media (max-width:1000px){.dg-pals--big{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* H recipe */
.dg-h__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 0 14px;flex-wrap:wrap}
.dg-h__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.dg-h__steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dg-step{padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px}
.dg-step__h{display:flex;gap:10px;align-items:center}
.dg-step__h b{display:block;font-size:15px;font-weight:800}
.dg-step__h em{display:block;font-style:normal;font-size:12px;color:var(--bk-muted)}
.dg-step__n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--bk-red);color:#fff;font:800 14px/1 var(--bk-font);flex:none}
.dg-step__sep{height:1px;background:var(--bk-line)}
.dg-step .dg-sl{grid-template-columns:70px minmax(0,1fr) 70px;font-size:11.5px}
.dg-h__go{display:flex;flex-direction:column;align-items:center;gap:8px;margin:18px 0}
.dg-h__go .dg-betabox{width:min(640px,100%)}
@media (max-width:1200px){.dg-h__steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* I shuffle board */
.dg-i__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 0 14px;flex-wrap:wrap}
.dg-i__head .bisk-eyebrow{margin:0}
.dg-i__bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:12px 14px}
.dg-i__sep{width:1px;height:26px;background:var(--bk-line)}
.dg-i__bar .dg-pals{flex-wrap:nowrap}
.dg-i__bar .dg-palb{flex-direction:row;align-items:center;padding:6px 8px !important}
.dg-i__bar .dg-palb b{display:none}
.dg-i__fine{display:flex;flex-direction:column;gap:12px;margin-top:10px;padding:14px 16px}
.dg-i__sub{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:10px 0}
.dg-i__sub .dg-betabox{flex:1 1 420px;max-width:640px}
.dg-i__board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:6px}
.dg-card--board .dg-card__meta b{font-size:16px}
@media (max-width:1100px){.dg-i__board{grid-template-columns:repeat(3,minmax(0,1fr))}.dg-i__bar .dg-pals{flex-wrap:wrap}}
/* J studio B */
.dg-j__beta{margin-top:16px;padding-top:14px;border-top:1px solid var(--bk-line)}
.dg-j .dg-a__app{grid-template-columns:360px minmax(0,1fr) 280px}
@media (max-width:1180px){.dg-j .dg-a__app{grid-template-columns:minmax(0,1fr)}}
.dg-genrow--top{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--bk-line)}
/* ================= THE FINAL PAGE (build.py --set final, 2026-10-07): from F Mixer. The hero in a box, a wide scene
   with the four skins, the mixer beside it (Generate and the daily bar the same width), Your generations under it, the
   admin side for the demo. Prefix fx-. ================= */
body:not(.bi-dark) .fx-admin{--bi-bg:#f2f2f5;--bi-surface:#ffffff;--bi-text:#17171b;--bi-text-muted:#62636b;--bi-border:#e0e0e6;--bi-hover:rgba(0,0,0,.06)}
.fx-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 28px;background:radial-gradient(90% 140% at 100% 0%,rgba(214,56,55,.16),rgba(214,56,55,0) 60%),var(--bk-card)}
.fx-hero .dg-lead{margin-bottom:0}
.fx-hero__mine{display:flex;align-items:center;gap:12px;flex:none;padding:10px 14px 10px 10px;border-radius:14px;background:var(--bk-bg);border:1px solid var(--bk-line);color:var(--bk-text);text-decoration:none;transition:border-color .15s}
.fx-hero__mine b{display:block;font-size:15px;font-weight:800}
.fx-hero__mine em{display:block;font-style:normal;font-size:12.5px;color:var(--bk-muted)}
.fx-hero__mine > svg{width:16px;height:16px;color:var(--bk-muted);transform:rotate(90deg)}
@media (hover:hover){.fx-hero__mine:hover{border-color:rgba(214,56,55,.45)}.fx-hero__mine:hover > svg{color:var(--bk-red)}}
.fx .dg-out{margin:14px 0 0}
.fx-app{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;margin-top:14px;align-items:start}
.fx-stage{padding:12px}

/* the scene */
.fx-scene{--u:calc(520px / 50.4);--c1:#ffffff;--c2:#ffffff;--c3:#ffffff;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:520px;border-radius:14px;overflow:hidden;
  background:radial-gradient(60% 50% at 50% 108%,rgba(214,56,55,.22),rgba(214,56,55,0) 70%),radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05),rgba(255,255,255,0) 60%),var(--bk-stage)}
.fx-scene::before{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--u) * 5.8);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));border-top:1px solid rgba(255,255,255,.07);pointer-events:none}
body:not(.bi-dark) .fx-scene::before{background:linear-gradient(180deg,rgba(0,0,0,.035),rgba(0,0,0,0));border-top-color:rgba(0,0,0,.07)}
.fx-slot{position:relative;min-width:0}
.fx-slot__pic{position:absolute;inset:0;z-index:1;display:block;width:100%;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;cursor:pointer}
.fx-slot__pic canvas{position:absolute;top:0;left:-20%;width:140%;height:100%;pointer-events:none}
.fx-card{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex;flex-direction:column;gap:2px;padding:10px 12px 11px;border-radius:12px;background:rgba(18,18,20,.86);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(8px);opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;pointer-events:none}
body:not(.bi-dark) .fx-card{background:rgba(255,255,255,.9);border-color:var(--bk-line)}
.fx-card b{font-size:14.5px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-card > span{font-size:12px;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-card__more{width:100%;justify-content:center;margin-top:8px;padding:9px 12px !important;font-size:13.5px !important}
.fx-card__more svg{width:15px;height:15px}
.fx-slot:hover .fx-card,.fx-slot:has(:focus-visible) .fx-card{opacity:1;transform:none;pointer-events:auto}
@media (hover:none){.fx-card{opacity:1;transform:none;pointer-events:auto}}
.fx-scene.is-making .fx-card,.fx-slot.is-empty .fx-card{display:none}
.fx-scene.is-out .fx-slot__pic{opacity:0;transition:opacity .12s}

/* the build beat: outlines of the next four put themselves together in the colours asked for (CSS only, so it keeps
   moving while the engine has the page) */
.fx-ghost{position:absolute;left:50%;bottom:calc(var(--u) * 5.8);width:calc(var(--u) * 16);height:calc(var(--u) * 32);margin-left:calc(var(--u) * -8);display:none;pointer-events:none;transform-origin:50% 100%}
.fx-ghost i{position:absolute;overflow:hidden;border-radius:3px;opacity:0;background:var(--c1);box-shadow:0 0 0 1px rgba(255,255,255,.45) inset,0 0 22px var(--c1)}
.fx-ghost .g-ll,.fx-ghost .g-rl{--p:0s;bottom:0;width:calc(var(--u) * 4);height:calc(var(--u) * 12);background:var(--c2);box-shadow:0 0 0 1px rgba(255,255,255,.45) inset,0 0 22px var(--c2)}
.fx-ghost .g-ll{left:calc(var(--u) * 4)}
.fx-ghost .g-rl{left:calc(var(--u) * 8)}
.fx-ghost .g-bd{--p:.08s;left:calc(var(--u) * 4);bottom:calc(var(--u) * 12);width:calc(var(--u) * 8);height:calc(var(--u) * 12)}
.fx-ghost .g-la,.fx-ghost .g-ra{--p:.16s;bottom:calc(var(--u) * 12);width:calc(var(--u) * 4);height:calc(var(--u) * 12)}
.fx-ghost .g-la{left:0}
.fx-ghost .g-ra{left:calc(var(--u) * 12)}
.fx-ghost .g-hd{--p:.24s;left:calc(var(--u) * 4);bottom:calc(var(--u) * 24);width:calc(var(--u) * 8);height:calc(var(--u) * 8);background:var(--c3);box-shadow:0 0 0 1px rgba(255,255,255,.45) inset,0 0 22px var(--c3)}
.fx-ghost i::after{content:'';position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0));transform:translateY(240%);opacity:0}
.fx-scene.is-making .fx-ghost,.fx-scene.is-reveal .fx-ghost{display:block}
.fx-scene.is-making .fx-ghost i{animation:fxPart .34s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--d,0s) + var(--p,0s))}
.fx-scene.is-making .fx-ghost i::after{animation:fxScan .9s linear infinite;animation-delay:calc(var(--d,0s) + var(--p,0s) + .3s)}
.fx-scene.is-reveal .fx-ghost{animation:fxGhostOut .42s ease-out both;animation-delay:var(--d,0s)}
.fx-scene.is-reveal .fx-ghost i{opacity:.42}
@keyframes fxPart{0%{opacity:0;transform:translateY(40%) scale(.4)}100%{opacity:.42;transform:none}}
@keyframes fxScan{0%{transform:translateY(240%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(-120%);opacity:0}}
@keyframes fxGhostOut{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.18)}}
.fx-making{position:absolute;left:50%;top:18px;z-index:4;display:none;align-items:center;gap:10px;padding:9px 16px 9px 12px;border-radius:999px;background:rgba(18,18,20,.84);border:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:13.5px;font-weight:800;white-space:nowrap;backdrop-filter:blur(6px);transform:translateX(-50%)}
.fx-scene.is-making .fx-making{display:flex;animation:fxIn .22s ease-out both}
.fx-making__spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:#d63837;animation:fxSpin .7s linear infinite}
.fx-making__t{display:inline-grid}
.fx-making__t i{grid-area:1/1;font-style:normal;opacity:0}
.fx-scene.is-making .fx-making__t i:nth-child(1){animation:fxStep .4s 0s both}
.fx-scene.is-making .fx-making__t i:nth-child(2){animation:fxStep .4s .4s both}
.fx-scene.is-making .fx-making__t i:nth-child(3){animation:fxStepEnd .3s .8s both}
@keyframes fxStep{0%{opacity:0;transform:translateY(6px)}25%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes fxStepEnd{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxIn{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translateX(-50%)}}

/* the ways a generation comes in (the moves are in the 3D; these are the flashes, pops and slides around them) */
.fx-slot::before{content:'';position:absolute;left:50%;bottom:calc(var(--u) * 8);width:calc(var(--u) * 22);height:calc(var(--u) * 22);margin-left:calc(var(--u) * -11);border-radius:50%;pointer-events:none;opacity:0}
.fx-scene.is-enter[data-enter="pop"] .fx-slot::before{background:radial-gradient(circle,rgba(255,255,255,.6),rgba(214,56,55,.28) 40%,rgba(214,56,55,0) 70%);animation:fxFlash .6s ease-out both;animation-delay:var(--d,0s)}
.fx-scene.is-enter[data-enter="pop"] .fx-slot__pic{animation:fxPop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:var(--d,0s);transform-origin:50% 88%}
.fx-scene.is-enter[data-enter="spin"] .fx-slot::before{background:radial-gradient(circle,rgba(242,194,48,.5),rgba(242,194,48,0) 65%);animation:fxFlash 1s ease-out both;animation-delay:var(--d,0s)}
.fx-scene.is-enter[data-enter="poof"] .fx-slot::before{background:radial-gradient(circle,rgba(125,79,194,.45),rgba(125,79,194,0) 65%);animation:fxFlash .9s ease-out both;animation-delay:calc(var(--d,0s) + .05s)}
.fx-scene.is-enter[data-enter="hero"] .fx-slot::before{bottom:calc(var(--u) * 3.6);height:calc(var(--u) * 5);background:radial-gradient(ellipse,rgba(255,255,255,.6),rgba(214,56,55,.28) 45%,rgba(214,56,55,0) 70%);animation:fxDust .7s ease-out both;animation-delay:calc(var(--d,0s) + .33s)}
.fx-scene.is-enter[data-enter="slide"] .fx-slot__pic{animation:fxSlideL .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:var(--d,0s)}
.fx-scene.is-enter[data-enter="slide"][data-order="rtl"] .fx-slot__pic{animation-name:fxSlideR}
.fx-scene.is-enter[data-enter="turn"] .fx-slot__pic{animation:fxFade .3s ease-out both;animation-delay:var(--d,0s)}
@keyframes fxFlash{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@keyframes fxPop{0%{opacity:0;transform:scale(.3)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes fxDust{0%{opacity:0;transform:scaleX(.3)}35%{opacity:1}100%{opacity:0;transform:scaleX(2)}}
@keyframes fxSlideL{0%{opacity:0;transform:translateX(-110%)}100%{opacity:1;transform:none}}
@keyframes fxSlideR{0%{opacity:0;transform:translateX(110%)}100%{opacity:1;transform:none}}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fx-scene .fx-slot::before,.fx-scene .fx-slot__pic,.fx-scene .fx-ghost,.fx-scene .fx-ghost i,.fx-scene .fx-ghost i::after,.fx-making__t i,.fx-making__spin{animation:none !important}.fx-scene.is-making .fx-ghost i{opacity:.42}.fx-making__t i:last-child{opacity:1}}

/* Remix my skin with no skin yet: the drop zone fills the scene */
.fx-dropwrap{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:30px}
.fx-scene.is-making .fx-dropwrap{display:none}
.fx-drop{width:min(560px,100%);box-sizing:border-box;background:var(--bk-card);padding:34px 24px}

/* under the scene: what this generation is, the hint */
.fx-under{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;min-height:30px;padding:12px 4px 0}
.fx-under__l{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;flex:1 1 auto;min-width:0}
.fx-under__l > b{font-size:14px;font-weight:800;margin-right:2px}
.fx-under__tip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--bk-muted)}
.fx-under__tip svg{width:14px;height:14px}
.fx-under .dg-likeof{margin:0}
.fx-pill{display:inline-flex;align-items:center;max-width:220px;padding:3px 9px;border-radius:999px;background:var(--bk-bg);border:1px solid var(--bk-line);font-size:11.5px;font-weight:700;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the mixer */
.fx-mix{padding:16px 18px 18px}
.fx-mix > .dg-seg--mode{display:flex;width:100%;box-sizing:border-box;margin-bottom:12px}
.fx-mix > .dg-seg--mode button{flex:1;justify-content:center}
.fx-go{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--bk-line)}
.fx-go__b{width:100%;justify-content:center;padding:15px 20px !important;font-size:16px !important}
.fx-go__b[disabled]{opacity:.5;cursor:default}
.fx-q{display:flex;flex-direction:column;gap:7px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-q__pips{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.fx-q__pips i{height:8px;border-radius:4px;background:var(--bk-line)}
.fx-q__pips i.on{background:var(--bk-red);box-shadow:0 0 8px rgba(214,56,55,.35)}
.fx-q.is-low .fx-q__pips i.on{background:#e8a020;box-shadow:0 0 8px rgba(232,160,32,.35)}
.fx-q__t{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;font-size:13px}
.fx-q__t b{display:inline-flex;align-items:center;gap:6px;font-weight:800}
.fx-q.is-low .fx-q__t b{color:#e8a020}
.fx-q.is-out .fx-q__t b{color:var(--bk-muted)}
.fx-q__bar{height:8px;border-radius:4px;background:linear-gradient(90deg,#d63837,#f2c230)}
.fx-q.is-pro .fx-q__t b{color:#f2c230}
.fx-q.is-pro .fx-q__t b svg{width:14px;height:14px}
.fx-palh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fx-palh .dg-h3{margin-bottom:8px}
.fx-palmore{display:inline-flex !important;align-items:center;gap:6px;margin:10px 0 0 !important;font-size:12.5px !important}
.fx-palmore svg{width:14px;height:14px}
.fx-mix .dg-pals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.fx-mix .dg-palb{align-items:stretch;min-width:0;padding:6px 6px 7px !important}
.fx-mix .dg-palb span{gap:0;border-radius:5px;overflow:hidden}
.fx-mix .dg-palb i{flex:1;width:auto;height:16px;border-radius:0;border:0}
.fx-mix .dg-palb i:first-child{flex:1.8}
.fx-mix .dg-palb b{display:flex;align-items:center;gap:3px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-palb.is-loved b svg{width:11px;height:11px;flex:none;color:var(--bk-red);fill:currentColor}
.fx-gender{margin-top:8px}
.fx-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--bk-line)}
.fx-foot .dg-link{margin-top:0}
.fx-foot .dg-betabox{flex:1 1 100%}

/* your generations */
.fx-hist{margin-top:34px;scroll-margin-top:16px}
.fx-hist__head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;margin-bottom:16px}
.fx-hist__ttl p{margin:6px 0 0;color:var(--bk-muted);font-size:15px}
.fx-hist__tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.fx-hist__meter{display:flex;align-items:center;gap:10px}
.fx-hist__meter b{font-size:13px;font-weight:800;white-space:nowrap}
.fx-hist__bar{width:160px;height:8px;border-radius:4px;background:var(--bk-line);overflow:hidden}
.fx-hist__bar i{display:block;height:100%;border-radius:4px;background:var(--bk-red)}
.fx-hist__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:44px 24px;border-radius:18px;border:2px dashed var(--bk-line);text-align:center}
.fx-hist__empty b{font-size:16px;font-weight:800}
.fx-hist__empty p{max-width:520px;margin:0;color:var(--bk-muted)}
.fx-hist__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fx-gen{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border-radius:16px;background:var(--bk-card);border:1px solid var(--bk-line)}
.fx-gen__h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.fx-gen__h > b{font-size:14.5px;font-weight:800}
.fx-gen__h > span{font-size:12.5px;color:var(--bk-muted)}
.fx-gen__s{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;margin-left:auto}
.fx-gen__skins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fx-hs{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:6px 6px 8px;border-radius:12px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-hs__pic{position:relative;display:block;width:100%;padding:0 !important;border:0 !important;border-radius:9px !important;background:var(--bk-cardbg) !important;overflow:hidden;cursor:pointer;transition:box-shadow .15s}
@media (hover:hover){.fx-hs__pic:hover{box-shadow:0 0 0 2px rgba(214,56,55,.45)}}
.fx-hs__pic canvas{display:block;width:100%;height:auto;aspect-ratio:120/150}
.fx-hs__star{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--bk-red);color:#fff}
.fx-hs__star svg{width:12px;height:12px;fill:currentColor}
.fx-hs > b{max-width:100%;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-hs__acts{display:flex;gap:4px}
.fx-hs__acts .dg-ib{width:30px;height:30px;border-radius:8px}
.fx-hs__acts .dg-ib svg{width:14px;height:14px}
.fx-hist__more{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;color:var(--bk-muted);font-size:13px}

/* the admin side (the demo only): in the free space right of the page on a wide screen */
.fx-admin{position:fixed;top:16px;right:16px;bottom:84px;z-index:9400;width:min(360px,calc(100vw - 32px));box-sizing:border-box;border-radius:16px;background:var(--bk-card);border:1px solid var(--bk-line);box-shadow:0 18px 50px rgba(0,0,0,.45);color:var(--bk-text);overflow:hidden}
.fx-admin__in{position:absolute;inset:0;overflow:auto;padding:14px 16px 18px}
.fx-ad__h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.fx-ad__h b{font-family:var(--bk-head,'Poppins',sans-serif);font-size:20px;font-weight:800}
.fx-ad__h .dg-drawer__x{position:static;margin-left:auto}
.fx-ad__sec{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--bk-line)}
.fx-ad__sec > em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted)}
.fx-ad__seg{align-self:flex-start;margin-bottom:4px}
.fx-ad__r{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.fx-ad__r span{flex:none;color:var(--bk-muted)}
.fx-ad__r b{min-width:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.fx-ad__n{margin:2px 0 0;font-size:12px;line-height:1.45;color:var(--bk-muted)}
.fx-ad__btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.fx-ad__skin{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-ad__skin > b{margin-bottom:2px;font-size:13px;font-weight:800}
.fx-ad__pals{display:flex;flex-direction:column;gap:2px;font-size:12px}
.fx-ad__ph,.fx-ad__pr{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px 40px 36px;gap:4px;align-items:center;padding:3px 6px;border-radius:7px}
.fx-ad__ph{font-size:11px;font-weight:800;color:var(--bk-muted)}
.fx-ad__ph span:not(:first-child),.fx-ad__pr span:not(:first-child){text-align:right}
.fx-ad__pr span:first-child{display:flex;align-items:center;gap:2px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.fx-ad__pr i{flex:none;width:9px;height:9px;border-radius:2px;background:var(--c)}
.fx-ad__pr i:last-of-type{margin-right:5px}
.fx-ad__pr svg{width:11px;height:11px;margin-left:3px;color:var(--bk-red);fill:currentColor}
.fx-ad__pr.is-on{background:rgba(214,56,55,.1)}
.dg-bar__name{display:inline-flex;align-items:center;padding:0 12px;color:#c9c9cf;font-size:13px;font-weight:800}

@media (max-width:1200px){.fx-app{grid-template-columns:minmax(0,1fr)}.fx-left,.fx-app--gens .fx-mix{position:relative !important;top:0}.fx-hist__list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.fx-hero{flex-direction:column;align-items:flex-start;padding:18px}.fx-scene{--u:calc(300px / 50.4);grid-template-columns:repeat(2,minmax(0,1fr));height:auto}.fx-slot{height:300px}.fx-gen__skins{grid-template-columns:repeat(2,minmax(0,1fr))}}

.fx-admin svg{width:16px;height:16px;flex:none}
.fx-admin .dg-drawer__x svg{width:18px;height:18px}
.fx-mix > .dg-seg:not(.dg-seg--mode):not(.dg-seg--sm){display:flex;width:100%;box-sizing:border-box}
.fx-mix > .dg-seg:not(.dg-seg--mode):not(.dg-seg--sm) button{flex:1;justify-content:center;padding:9px 6px !important;font-size:12.5px !important;white-space:nowrap}
/* ---------------- round 2: the left column (the scene and what is under it), the hover rail, under the scene blocks,
   scenes, the side demo bar ---------------- */
.fx-left{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:12px}
.fx-app--gens .fx-left{position:static}
.fx-mix{position:relative}
.fx-app--gens .fx-mix{position:sticky;top:12px;padding:0;overflow:hidden}
.fx-app--gens .fx-mix__in{max-height:calc(100vh - 26px);box-sizing:border-box;overflow:auto;padding:16px 18px 18px}
.fx-mix__in > .dg-seg--mode{display:flex;width:100%;box-sizing:border-box;margin-bottom:12px}
.fx-mix__in > .dg-seg--mode button{flex:1;justify-content:center}
.fx-mix__in > .dg-seg:not(.dg-seg--mode):not(.dg-seg--sm){display:flex;width:100%;box-sizing:border-box}
.fx-mix__in > .dg-seg:not(.dg-seg--mode):not(.dg-seg--sm) button{flex:1;justify-content:center;padding:9px 6px !important;font-size:12.5px !important;white-space:nowrap}
.fx-hist--in{margin-top:0}
.fx-hist--in .fx-hist__head{margin-bottom:12px}

/* the hover: save, download, edit, like on a rail at the side */
.fx-rail{position:absolute;right:8px;top:calc(50% - 96px);z-index:3;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateX(6px);transition:opacity .18s,transform .18s;pointer-events:none}
.fx-rail .dg-ib{width:34px;height:34px;border-radius:10px;background:rgba(18,18,20,.82) !important;border-color:rgba(255,255,255,.1) !important;color:#fff !important;backdrop-filter:blur(6px)}
body:not(.bi-dark) .fx-rail .dg-ib{background:rgba(255,255,255,.92) !important;border-color:var(--bk-line) !important;color:var(--bk-text) !important}
@media (hover:hover){.fx-rail .dg-ib:hover{color:var(--bk-red) !important;border-color:rgba(214,56,55,.55) !important}}
.fx-rail .dg-ib.is-on{background:var(--bk-red) !important;border-color:var(--bk-red) !important;color:#fff !important}
.fx-slot:hover .fx-rail,.fx-slot:has(:focus-visible) .fx-rail{opacity:1;transform:none;pointer-events:auto}
@media (hover:none){.fx-rail{opacity:1;transform:none;pointer-events:auto}}
.fx-scene.is-making .fx-rail,.fx-slot.is-empty .fx-rail{display:none}
.dg-open__tl{margin:0 0 6px !important;font-size:15px;font-weight:800;color:var(--bk-text) !important}

/* under the scene: one box style for the blocks */
.fx-ub{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.fx-ub__h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.fx-ub__h > b{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
.fx-ub__h > b svg{width:16px;height:16px;color:var(--bk-red)}
.fx-ub__h > span{font-size:13px;color:var(--bk-muted)}
.fx-ub__acts{display:flex;gap:6px;margin-left:auto}
.fx-ub__link{margin-left:auto;font-size:13px;font-weight:800;color:var(--bk-muted);text-decoration:none}
@media (hover:hover){.fx-ub__link:hover{color:var(--bk-red)}}
/* 2: describe bar */
.fx-desc__box{width:100%}
.fx-desc__row{display:flex;gap:10px}
.fx-desc__row .dg-words{flex:1}
.fx-desc .dg-pop{top:auto;bottom:calc(100% + 8px)}
.fx-desc .dg-read{justify-content:flex-start;min-height:26px}
.fx-desc__try{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.fx-desc__try em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted);margin-right:4px}
/* 3: what next */
.fx-next__chips{display:flex;flex-wrap:wrap;gap:6px}
.fx-next__c{display:inline-flex;align-items:center;gap:7px;padding:8px 12px !important;border-radius:999px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:800 !important;transition:border-color .15s,color .15s}
.fx-next__c svg{width:14px;height:14px;color:var(--bk-red)}
@media (hover:hover){.fx-next__c:hover{border-color:rgba(214,56,55,.55) !important;color:var(--bk-red) !important}}
.fx-next__pal{display:inline-flex;border-radius:4px;overflow:hidden}
.fx-next__pal i{width:9px;height:14px;background:var(--c)}
.fx-next__sw{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(127,127,127,.35)}
/* 4: stage tools */
.fx-tools{gap:10px}
.fx-tools__row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.fx-tools__row > em{width:52px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted)}
.fx-tools__chips{display:flex;flex-wrap:wrap;gap:6px}
.fx-tools__chips .dg-chip{padding:7px 12px !important;font-size:13px !important}
.fx-tools__chips .dg-chip[aria-pressed="true"]{border-color:var(--bk-red) !important;color:var(--bk-red) !important}
.fx-tools__bgs{display:flex;flex-wrap:wrap;gap:6px}
.fx-bg{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px !important;border-radius:999px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;font-size:12.5px !important;font-weight:800 !important}
.fx-bg i{width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,var(--a) 0%,var(--b) 62%,var(--c) 62%)}
.fx-bg[aria-pressed="true"]{border-color:var(--bk-red) !important}
@media (hover:hover){.fx-bg:hover{border-color:rgba(214,56,55,.55) !important}}
.fx-switch{display:inline-flex;align-items:center;gap:8px;padding:6px 4px !important;border:0 !important;background:none !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:800 !important}
.fx-switch i{position:relative;width:34px;height:20px;border-radius:999px;background:var(--bk-line);transition:background .15s}
.fx-switch i::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.fx-switch[aria-pressed="true"] i{background:var(--bk-red)}
.fx-switch[aria-pressed="true"] i::after{transform:translateX(14px)}
.fx-tools__pic{margin-left:auto}
/* 5: recent */
.fx-recent__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fx-rc{display:flex;flex-direction:column;gap:6px;padding:8px !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;text-align:left;transition:border-color .15s}
@media (hover:hover){.fx-rc:hover{border-color:rgba(214,56,55,.55) !important}}
.fx-rc.is-on{border-color:var(--bk-red) !important;box-shadow:0 0 0 2px rgba(214,56,55,.2)}
.fx-rc__skins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;border-radius:8px;background:var(--bk-cardbg);overflow:hidden}
.fx-rc__skins canvas{width:100%;height:auto;aspect-ratio:64/80}
.fx-rc__t{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.fx-rc__t b{font-size:12.5px;font-weight:800;white-space:nowrap}
.fx-rc__t em{font-style:normal;font-size:11.5px;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-recent__empty{margin:0;color:var(--bk-muted);font-size:13.5px}

/* scenes behind the four (Stage tools) */
.fx-scene[data-bg="grass"]{background:linear-gradient(180deg,#7cc7f5 0%,#cdeeff 80%,#62a83f 80%,#4a8a2e 100%)}
.fx-scene[data-bg="night"]{background:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 27% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 41% 26%,#fff,transparent),radial-gradient(1px 1px at 58% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 71% 30%,#fff,transparent),radial-gradient(1px 1px at 86% 16%,#fff,transparent),radial-gradient(1px 1px at 94% 40%,#fff,transparent),radial-gradient(1px 1px at 6% 44%,#fff,transparent),linear-gradient(180deg,#0b1230 0%,#1d2b58 80%,#161c33 80%,#0e1224 100%)}
.fx-scene[data-bg="sunset"]{background:linear-gradient(180deg,#ff8f5a 0%,#ffd08a 80%,#7a4a78 80%,#55315a 100%)}
.fx-scene[data-bg="nether"]{background:linear-gradient(180deg,#3a0c0c 0%,#6e1d1d 80%,#5b1616 80%,#3d0e0e 100%)}
.fx-scene[data-bg="snow"]{background:linear-gradient(180deg,#bcdcf3 0%,#eaf5fc 80%,#ffffff 80%,#e1eaf2 100%)}
.fx-scene:not([data-bg="studio"])::before{display:none}

/* the demo bar down the left side, with the under the scene options */
.dg-bar--side{left:16px !important;right:auto;bottom:16px;transform:none !important;flex-direction:column;align-items:stretch;flex-wrap:nowrap;width:236px;max-width:none}
.dg-bar--side .dg-bar__b{justify-content:flex-start;padding:8px 12px !important}
.dg-bar--side .dg-bar__b b{flex:none}
.dg-bar--side .dg-bar__th{border-left:0 !important;border-radius:10px !important;margin-left:0}
.dg-bar--side .dg-bar__name{padding:8px 12px 2px}
.dg-bar__lab{padding:8px 12px 2px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#8a8a92}
.dg-bar__sep{height:1px;margin:4px 6px;background:#2c2c30}
.fx-gen__del{width:30px !important;height:30px !important;border-radius:8px !important;margin-left:4px;color:var(--bk-muted) !important;background:transparent !important}
.fx-gen__del svg{width:15px;height:15px}
@media (hover:hover){.fx-gen__del:hover{color:var(--bk-red) !important;border-color:rgba(214,56,55,.45) !important}}
/* colours on one line (Isaac: "for the manual color section please show it in 1 line"); 15 palettes in 3 rows; All and refresh */
.fx-mix .dg-sws{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px}
.fx-mix .dg-sws .dg-sw{width:100% !important;height:auto !important;aspect-ratio:1}
.fx-mix .dg-sws .dg-sw b{font-size:10px}
.fx-palh__b{display:flex;gap:6px;align-items:center}
.fx-pbtn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px !important;border-radius:8px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-muted) !important;font-size:12px !important;font-weight:800 !important;transition:color .15s,border-color .15s}
.fx-pbtn svg{width:14px;height:14px}
@media (hover:hover){.fx-pbtn:hover{color:var(--bk-red) !important;border-color:rgba(214,56,55,.45) !important}}
.dg-palb b svg{width:11px;height:11px;flex:none;color:#f2c230}
.dg-palb.is-loved b svg{color:var(--bk-red);fill:currentColor}
.fx-pdlg .bisk-dlg__box,.fx-pdlg .bisk-dlg__in{max-width:min(860px,calc(100vw - 32px)) !important;width:min(860px,calc(100vw - 32px)) !important}
.fx-pd{display:flex;flex-direction:column;gap:6px}
.fx-pd__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.fx-pd__p{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;text-align:left;transition:border-color .15s}
.fx-pd__p span{display:flex;height:26px;border-radius:7px;overflow:hidden}
.fx-pd__p i{flex:1;background:var(--c)}
.fx-pd__p i:first-child{flex:1.8}
.fx-pd__p b{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-pd__p b svg{width:12px;height:12px;flex:none;color:#f2c230}
@media (hover:hover){.fx-pd__p:hover{border-color:rgba(214,56,55,.55) !important}}
.fx-pd__p.is-on{border-color:var(--bk-red) !important;box-shadow:0 0 0 2px rgba(214,56,55,.25)}
.fx-pd__fh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fx-pd__none{margin:0 0 6px;color:var(--bk-muted);font-size:13px}
/* ---------------- round 3: your colours (up to 3, your own too), the settings five ways, the backdrop, More like ---------------- */
/* your colours: the bar is the colours you picked, in order; click one to take it off */
.fx-picks{display:flex;gap:3px;height:30px;padding:0;overflow:visible;background:none;border:0}
.fx-pick{position:relative;flex:1;display:grid;place-items:center;padding:0 !important;border:1px solid rgba(127,127,127,.35) !important;background:var(--c) !important;color:transparent !important;cursor:pointer;transition:transform .12s}
.fx-pick:first-child{border-radius:8px 0 0 8px !important}
.fx-pick:last-child{border-radius:0 8px 8px 0 !important}
.fx-pick:only-child{border-radius:8px !important}
.fx-pick svg{width:13px;height:13px;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
@media (hover:hover){.fx-pick:hover{color:#fff !important}}
.fx-mix .dg-sw--any{color:var(--bk-text) !important}

/* the shared bits: small pills, tiles */
.fx-pl{display:inline-flex;align-items:center;gap:6px;padding:6px 11px !important;border-radius:999px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;font-size:12.5px !important;font-weight:800 !important;transition:border-color .15s,color .15s,background .15s}
.fx-pl svg{width:14px;height:14px}
@media (hover:hover){.fx-pl:hover{border-color:rgba(214,56,55,.45) !important}}
.fx-pl[aria-pressed="true"]{background:rgba(214,56,55,.12) !important;border-color:rgba(214,56,55,.55) !important;color:var(--bk-red) !important}
.fx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fx-tiles--v{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:8px 4px !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-muted) !important;font-size:12px !important;font-weight:800 !important;transition:border-color .15s,color .15s,background .15s}
.fx-tile svg{width:22px;height:22px}
.fx-tile span{color:var(--bk-text);white-space:nowrap}
@media (hover:hover){.fx-tile:hover{border-color:rgba(214,56,55,.45) !important;color:var(--bk-text) !important}}
.fx-tile[aria-pressed="true"]{background:rgba(214,56,55,.12) !important;border-color:rgba(214,56,55,.55) !important;color:var(--bk-red) !important}
.fx-tile[aria-pressed="true"] span{color:var(--bk-red)}
.fx-tiles--v .fx-tile{min-height:52px}
.fx-gender2{display:flex;gap:6px;margin-top:8px}

/* 1 Tidy */
.fx-tidy{display:flex;flex-direction:column;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--bk-line)}
.fx-tr{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:start}
.fx-tr > em{padding-top:6px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted)}
.fx-tr__c{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fx-tr__sep{width:1px;height:20px;margin:0 3px;background:var(--bk-line)}
.fx-sl2s{flex-direction:column;align-items:stretch;gap:6px}
.fx-sl2{display:grid;grid-template-columns:60px minmax(0,1fr) 88px;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--bk-muted)}
.fx-sl2 b{font-size:12.5px;font-weight:800;color:var(--bk-text);text-align:right}
.fx-sl2 input{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:0;border-radius:999px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--bk-red) 0,var(--bk-red) var(--p),var(--bk-line) var(--p))}
.fx-sl2 input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--bk-red);box-shadow:0 1px 6px rgba(0,0,0,.35)}
.fx-sl2 input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--bk-red)}
.fx-tidy__reset{align-self:flex-start;margin-top:0 !important;font-size:12px !important}

/* 2 Tabs */
.fx-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:16px 0 12px;padding:4px;border-radius:12px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 6px !important;border-radius:9px !important;border:0 !important;background:transparent !important;color:var(--bk-muted) !important;font-size:13.5px !important;font-weight:800 !important}
.fx-tab svg{width:15px;height:15px}
@media (hover:hover){.fx-tab:hover{color:var(--bk-text) !important}}
.fx-tab[aria-pressed="true"]{background:var(--bk-card) !important;color:var(--bk-text) !important;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.fx-tab__dot{position:absolute;top:7px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--bk-red)}
.fx-tabp > .dg-h3:first-child{margin-top:0}
.fx-s5s{display:flex;flex-direction:column;gap:14px}
.fx-s5__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.fx-s5__h b{font-size:13.5px;font-weight:800}
.fx-s5__h span{font-size:12.5px;font-weight:800;color:var(--bk-red)}
.fx-s5__row{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.fx-s5__row::before{content:'';position:absolute;left:10%;right:10%;top:50%;height:2px;margin-top:-1px;background:var(--bk-line)}
.fx-s5__row button{position:relative;display:grid;place-items:center;height:28px;padding:0 !important;border:0 !important;background:none !important}
.fx-s5__row button i{width:12px;height:12px;border-radius:50%;background:var(--bk-card);border:2px solid var(--bk-line);transition:transform .12s,border-color .12s,background .12s}
@media (hover:hover){.fx-s5__row button:hover i{border-color:rgba(214,56,55,.55)}}
.fx-s5__row button[aria-pressed="true"] i{width:18px;height:18px;background:var(--bk-red);border-color:var(--bk-red);box-shadow:0 0 0 4px rgba(214,56,55,.2)}
.fx-s5__ends{display:flex;justify-content:space-between;margin-top:2px;font-size:11.5px;color:var(--bk-muted)}

/* 3 Tiles: three step style */
.fx-s3s{display:flex;flex-direction:column;gap:7px}
.fx-s3{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:10px}
.fx-s3 em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--bk-muted)}
.fx-s3 .dg-seg{display:flex;width:100%;box-sizing:border-box}
.fx-s3 .dg-seg button{flex:1;justify-content:center;padding:6px 4px !important;font-size:12px !important}

/* 4 Sentence */
.fx-sent{margin-top:16px;padding:14px 16px 16px;border-radius:14px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-sent .dg-h3{margin-top:0}
.fx-sent__p{margin:0;font-family:var(--bk-head,'Poppins',sans-serif);font-size:19px;font-weight:800;line-height:2.1;color:var(--bk-text)}
.fx-sent__p--sm{margin-top:10px;font-family:inherit;font-size:14px;font-weight:700;line-height:2.2;color:var(--bk-muted)}
.fx-tok{display:inline-flex;align-items:center;gap:4px;margin:0 2px;padding:2px 6px 2px 10px !important;border-radius:9px !important;border:1px solid rgba(214,56,55,.45) !important;background:rgba(214,56,55,.12) !important;color:var(--bk-red) !important;font:inherit !important;line-height:1.5 !important;vertical-align:baseline}
.fx-tok svg{width:14px;height:14px}
@media (hover:hover){.fx-tok:hover{border-color:var(--bk-red) !important}}
.fx-menu{position:absolute;z-index:9500;display:flex;flex-direction:column;min-width:170px;padding:5px;border-radius:12px;background:var(--bk-card);border:1px solid var(--bk-line);box-shadow:0 14px 40px rgba(0,0,0,.45)}
body:not(.bi-dark) .fx-menu{--bi-bg:#f2f2f5;--bi-surface:#ffffff;--bi-text:#17171b;--bi-text-muted:#62636b;--bi-border:#e0e0e6;--bi-hover:rgba(0,0,0,.06)}
.fx-menu button{padding:8px 12px !important;border-radius:8px !important;border:0 !important;background:none !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:700 !important;text-align:left;cursor:pointer}
@media (hover:hover){.fx-menu button:hover{background:var(--bk-bg) !important;color:var(--bk-red) !important}}
.fx-menu button[aria-pressed="true"]{color:var(--bk-red) !important;font-weight:800 !important}

/* 5 Recipes */
.fx-rcph{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fx-rcph span{font-size:12.5px;color:var(--bk-muted)}
.fx-rcps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fx-rcp{display:flex;align-items:center;gap:10px;padding:8px !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;text-align:left;transition:border-color .15s,background .15s}
@media (hover:hover){.fx-rcp:hover{border-color:rgba(214,56,55,.45) !important}}
.fx-rcp.is-on{border-color:var(--bk-red) !important;background:rgba(214,56,55,.1) !important}
.fx-rcp__ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2) 70%,var(--c3));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.fx-rcp__ic svg{width:19px;height:19px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.fx-rcp__t{display:flex;flex-direction:column;min-width:0}
.fx-rcp__t b{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-rcp__t em{font-style:normal;font-size:11.5px;color:var(--bk-muted);line-height:1.3}
.fx-fine{display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;padding:9px 12px !important;border-radius:10px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:800 !important}
.fx-fine svg{width:15px;height:15px}
.fx-fine svg:last-child{margin-left:auto;transition:transform .15s}
.fx-fine[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
.fx-fine + .fx-tidy{margin-top:12px}

/* More like a skin: a badge over the scene and a line under Generate (Isaac: "first put the badge more like [skin] over the
   3d viewer and a small notice under the generation button that it will generate in the style of x skin") */
.fx-likebadge{position:absolute;left:14px;top:14px;z-index:6;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 6px;border-radius:999px;background:rgba(18,18,20,.86);border:1px solid rgba(214,56,55,.55);color:#fff;backdrop-filter:blur(6px);animation:fxIn2 .25s ease-out both}
.fx-likebadge canvas{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08)}
.fx-likebadge span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.fx-likebadge span svg{width:14px;height:14px;color:#f2c230}
.fx-likebadge b{font-weight:800}
.fx-likebadge button{display:grid;place-items:center;width:26px;height:26px;padding:0 !important;border-radius:50% !important;border:0 !important;background:rgba(255,255,255,.1) !important;color:#fff !important}
.fx-likebadge button svg{width:13px;height:13px}
@media (hover:hover){.fx-likebadge button:hover{background:rgba(255,255,255,.22) !important}}
@keyframes fxIn2{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fx-likenote{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;background:rgba(214,56,55,.1);border:1px solid rgba(214,56,55,.4);font-size:12.5px;color:var(--bk-text)}
.fx-likenote svg{flex:none;width:14px;height:14px;color:var(--bk-red)}
.fx-likenote b{font-weight:800}
.fx-likenote .dg-link{margin:0 0 0 auto !important;font-size:12.5px !important}
.fx-go__b.is-armed{animation:fxArm 1.1s ease-out 2}
@keyframes fxArm{0%{box-shadow:0 0 0 0 rgba(214,56,55,.55)}100%{box-shadow:0 0 0 14px rgba(214,56,55,0)}}

/* the backdrop behind the four */
.fx-scene:not([data-back="line"])::before{display:none}
.fx-scene[data-bg="studio"][data-back="tint"]{background:radial-gradient(55% 60% at 22% 108%,var(--t1),rgba(0,0,0,0) 72%),radial-gradient(55% 60% at 78% 108%,var(--t2),rgba(0,0,0,0) 72%),radial-gradient(50% 45% at 50% 0%,var(--t3),rgba(0,0,0,0) 80%),var(--bk-stage)}
.fx-scene[data-bg="studio"][data-back="spot"]{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 40%),var(--bk-stage)}
.fx-scene[data-bg="studio"][data-back="spot"] .fx-slot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 34% 6% at 50% calc(100% - var(--u) * 5.8),rgba(255,255,255,.2),rgba(255,255,255,0) 100%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 80%,rgba(255,255,255,0));
  clip-path:polygon(40% 0,60% 0,90% 100%,10% 100%)}
.fx-scene[data-bg="studio"][data-back="grid"]{background:radial-gradient(70% 60% at 50% 100%,rgba(214,56,55,.14),rgba(214,56,55,0) 70%),var(--bk-stage)}
.fx-scene[data-bg="studio"][data-back="grid"]::before{display:block;content:'';position:absolute;left:-30%;right:-30%;bottom:0;height:40%;border:0;background-color:transparent;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:38px 38px;
  transform:perspective(260px) rotateX(58deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(0deg,#000 20%,transparent 95%);mask-image:linear-gradient(0deg,#000 20%,transparent 95%)}
body:not(.bi-dark) .fx-scene[data-bg="studio"][data-back="grid"]::before{background-image:linear-gradient(rgba(0,0,0,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.14) 1px,transparent 1px)}
.fx-scene[data-bg="studio"][data-back="plain"]{background:var(--bk-stage)}

/* the demo bar: two columns for settings and backdrop */
.dg-bar__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.dg-bar__grid .dg-bar__b{padding:7px 8px !important;font-size:12.5px !important;gap:6px}
.dg-bar__grid .dg-bar__b b{width:18px;height:18px;font-size:11px}
.fx-mix .dg-sw--any{background:var(--bk-bg) !important;border:1px dashed var(--bk-muted) !important}
.fx-mix .dg-pal:not(.dg-pal--empty){width:100%;box-sizing:border-box;height:12px;margin-top:8px}
.fx-mix .dg-pal.fx-picks{height:30px;border:0;border-radius:0;overflow:visible}
.fx-mix .dg-pal--empty{margin-top:6px}
/* with a block under the scene, a slightly shorter scene so the block shows without scrolling on a 1080 screen */
.fx-app--describe .fx-scene,.fx-app--next .fx-scene,.fx-app--tools .fx-scene,.fx-app--recent .fx-scene,.fx-app--pick .fx-scene{height:450px;--u:calc(450px / 50.4)}
.fx-app--pick .fx-scene{height:400px;--u:calc(400px / 50.4)}
/* hover round 3: one card, More like this the wider button, the small actions beside it; the card a little wider than its
   column (kept inside the scene at the two ends) */
.fx-rail{display:none !important}
.fx-card{left:-34px;right:-34px}
.fx-slot[data-slot-i="0"] .fx-card{left:8px;right:-70px}
.fx-slot[data-slot-i="3"] .fx-card{left:-70px;right:8px}
.fx-card__row{display:flex;gap:4px;margin-top:8px}
.fx-card__row .fx-card__more{flex:1;width:auto;margin:0;padding:7px 10px !important;font-size:13px !important;white-space:nowrap}
.fx-card__row .dg-ib{flex:none;width:30px;height:32px;border-radius:9px}
.fx-card__row .dg-ib svg{width:15px;height:15px}
/* More like a skin, bottom right under the scene */
.fx-likechip{display:flex;align-items:center;gap:8px;margin-left:auto;padding:4px 5px 4px 5px;border-radius:999px;background:rgba(214,56,55,.12);border:1px solid rgba(214,56,55,.5);animation:fxIn2 .25s ease-out both}
.fx-likechip canvas{width:24px;height:24px;border-radius:50%;background:var(--bk-cardbg)}
.fx-likechip span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--bk-text)}
.fx-likechip span svg{width:14px;height:14px;color:var(--bk-red)}
.fx-likechip b{font-weight:800}
.fx-likechip button{display:grid;place-items:center;width:24px;height:24px;padding:0 !important;border-radius:50% !important;border:0 !important;background:var(--bk-bg) !important;color:var(--bk-text) !important}
.fx-likechip button svg{width:12px;height:12px}
@media (hover:hover){.fx-likechip button:hover{color:var(--bk-red) !important}}
/* the colours of each generation in Your generations and Recent */
.fx-gen__pal{display:inline-flex;flex:none;height:16px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px rgba(127,127,127,.35)}
.fx-gen__pal i{width:16px;background:var(--c)}
.fx-gen__pal i:first-child{width:26px}
.fx-rc__t .fx-gen__pal{height:11px;margin-right:auto;margin-left:6px}
.fx-rc__t .fx-gen__pal i{width:9px}
.fx-rc__t .fx-gen__pal i:first-child{width:15px}
/* ---------------- round 5: fine tune under the scene, recipes like palettes, Your generations redesigned, the colour
   palette tag, the smaller hover menu ---------------- */
/* the hover menu: the name and its line as text over a soft shade, one pill under them */
.fx-slot[data-slot-i] .fx-card{left:4px;right:4px;bottom:8px;padding:0;background:none;border:0;border-radius:0;backdrop-filter:none;align-items:center;text-align:center;gap:1px;overflow:visible}
.fx-card::before{content:'';position:absolute;left:-4px;right:-4px;bottom:-8px;height:118px;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(10,10,12,.72),rgba(10,10,12,0))}
body:not(.bi-dark) .fx-card::before{background:linear-gradient(0deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
.fx-card b{max-width:100%;font-size:13.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fx-card > span{max-width:100%;font-size:11.5px;color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(0,0,0,.6)}
body:not(.bi-dark) .fx-card b{color:var(--bk-text);text-shadow:none}
body:not(.bi-dark) .fx-card > span{color:var(--bk-muted);text-shadow:none}
.fx-card__row{display:inline-flex;align-items:center;gap:2px;margin-top:6px;padding:3px;border-radius:999px;background:rgba(18,18,20,.92);border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 18px rgba(0,0,0,.35)}
body:not(.bi-dark) .fx-card__row{background:rgba(255,255,255,.97);border-color:var(--bk-line)}
.fx-card__row .fx-card__more{flex:none;height:28px;margin:0;padding:0 11px !important;border-radius:999px !important;font-size:12.5px !important;gap:5px}
.fx-card__row .fx-card__more svg{width:13px;height:13px}
.fx-card__row .dg-ib{width:28px;height:28px;border-radius:50% !important;border:0 !important;background:transparent !important;color:#e8e8ec !important}
body:not(.bi-dark) .fx-card__row .dg-ib{color:var(--bk-text) !important}
.fx-card__row .dg-ib svg{width:14px;height:14px}
@media (hover:hover){.fx-card__row .dg-ib:hover{background:rgba(255,255,255,.12) !important;color:#fff !important}body:not(.bi-dark) .fx-card__row .dg-ib:hover{background:rgba(0,0,0,.06) !important;color:var(--bk-red) !important}}
.fx-card__row .dg-ib.is-on{background:transparent !important;color:#f2c230 !important}
.fx-card__row .dg-ib.is-on svg{fill:currentColor}

/* fine tune under the scene */
.fx-fn{gap:12px}
.fx-fn__cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:16px 30px;align-items:start}
.fx-fn__sl,.fx-fn__pl,.fx-board__r{display:flex;flex-direction:column;gap:9px}
.fx-fn .fx-tr{grid-template-columns:52px minmax(0,1fr)}
.fx-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fx-strip__sep{width:1px;height:26px;margin:0 4px;background:var(--bk-line)}
.fx-dd{display:inline-flex;align-items:center;gap:6px;padding:7px 9px 7px 12px !important;border-radius:10px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;font-size:13px !important}
.fx-dd em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--bk-muted)}
.fx-dd b{font-weight:800}
.fx-dd svg{width:14px;height:14px;color:var(--bk-muted)}
.fx-dd.is-on{border-color:rgba(214,56,55,.55) !important;background:rgba(214,56,55,.1) !important}
.fx-dd.is-on b{color:var(--bk-red)}
@media (hover:hover){.fx-dd:hover{border-color:rgba(214,56,55,.45) !important}}
.fx-fn__tl{display:grid;grid-template-columns:1.15fr 1.15fr .9fr;gap:16px}
.fx-fn__lab{display:block;margin-bottom:7px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted)}
.fx-tiles--sm .fx-tile{min-height:52px;padding:6px 2px !important;font-size:11.5px !important}
.fx-tiles--sm .fx-tile svg{width:19px;height:19px}
.fx-fn__sl4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 30px}
.fx-board{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.fx-faders{display:flex;gap:12px}
.fx-fader{display:flex;flex-direction:column;align-items:center;gap:8px;width:76px}
.fx-fader b{display:flex;align-items:flex-end;justify-content:center;min-height:30px;font-size:12px;font-weight:800;color:var(--bk-red);text-align:center}
.fx-fader em{font-style:normal;font-size:12px;font-weight:800;color:var(--bk-muted)}
.fx-fader__w{position:relative;display:block;width:28px;height:118px}
.fx-fader__w input{-webkit-appearance:none;appearance:none;position:absolute;left:50%;top:50%;width:118px;height:8px;margin:0;border-radius:999px;outline:none;cursor:pointer;transform:translate(-50%,-50%) rotate(-90deg);background:linear-gradient(90deg,var(--bk-red) 0,var(--bk-red) var(--p),var(--bk-line) var(--p))}
.fx-fader__w input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:24px;border-radius:5px;background:#fff;border:2px solid var(--bk-red);box-shadow:0 1px 6px rgba(0,0,0,.35)}
.fx-fader__w input::-moz-range-thumb{width:10px;height:20px;border-radius:5px;background:#fff;border:2px solid var(--bk-red)}
.fx-fn__tabs{display:inline-flex;align-self:flex-start;gap:3px;padding:3px;border-radius:12px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-ftab{position:relative;padding:7px 15px !important;border-radius:9px !important;border:0 !important;background:transparent !important;color:var(--bk-muted) !important;font-size:13px !important;font-weight:800 !important}
@media (hover:hover){.fx-ftab:hover{color:var(--bk-text) !important}}
.fx-ftab[aria-pressed="true"]{background:var(--bk-card) !important;color:var(--bk-text) !important;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.fx-ftab i{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--bk-red)}
.fx-fn__tp{min-height:62px}

/* recipes: All and refresh like the palettes, the list of every recipe */
.fx-rcph{margin-top:2px}
.fx-rd__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fx-rcp__t b svg{width:11px;height:11px;margin-left:4px;color:#f2c230;vertical-align:-1px}

/* Your generations: the title on the left, search and the spots left on the right */
.fx-hist__head{align-items:center}
.fx-hist__head .bisk-h2{margin:0}
.fx-hist__tools{margin-left:auto}
.fx-hsearch{display:flex;align-items:center;gap:8px;width:250px;height:36px;padding:0 12px;box-sizing:border-box;border-radius:10px;border:1px solid var(--bk-line);background:var(--bk-bg);transition:border-color .15s}
.fx-hsearch:focus-within{border-color:rgba(214,56,55,.55)}
.fx-hsearch svg{flex:none;width:15px;height:15px;color:var(--bk-muted)}
.fx-hsearch input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--bk-text);font:inherit;font-size:13.5px}
.fx-hsearch input::placeholder{color:var(--bk-muted)}
.fx-gen__h{flex-wrap:nowrap}
.fx-gen__h .fx-gen__del{margin-left:auto}
.fx-gen__name{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:0 !important;border:0 !important;background:none !important;color:var(--bk-text) !important;font-size:14.5px !important;font-weight:800 !important;cursor:text;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-gen__name svg{flex:none;width:13px;height:13px;color:var(--bk-muted);opacity:0;transition:opacity .15s}
@media (hover:hover){.fx-gen__name:hover svg{opacity:1}}
.fx-gen__in{width:220px;padding:4px 8px;border-radius:8px;border:1px solid var(--bk-red);background:var(--bk-bg);color:var(--bk-text);font:inherit;font-size:14px;font-weight:800;outline:none}
.fx-gtags{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.fx-hist__empty--q{padding:28px 20px}
/* the colour palette tag */
.fx-ptag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:var(--bk-bg);border:1px solid var(--bk-line);font-size:11.5px;font-weight:800;color:var(--bk-text);white-space:nowrap}
.fx-ptag__c{display:inline-flex;height:16px;border-radius:999px;overflow:hidden;box-shadow:0 0 0 1px rgba(127,127,127,.3)}
.fx-ptag__c i{width:11px;background:var(--c)}
.fx-ptag__c i:first-child{width:17px}
/* Show more, under both columns, so the generations and the settings end on one line */
.fx-hmore{grid-column:1;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--bk-muted);font-size:13px}
.fx-hmore:empty{display:none}
/* ---------------- round 6: the fine tune as tiles (colours in it, More tiles), what this generation uses, the new header
   of Your generations ---------------- */
.fx-fn2{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px}
.fx-fn2__reset{position:absolute;top:14px;right:16px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:5px 11px !important;border-radius:999px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-muted) !important;font-size:12px !important;font-weight:800 !important}
.fx-fn2__reset svg{width:13px;height:13px}
@media (hover:hover){.fx-fn2__reset:hover{color:var(--bk-red) !important;border-color:rgba(214,56,55,.45) !important}}
.fx-fn2__row{display:grid;grid-template-columns:1.12fr 1.12fr .86fr;gap:12px}
.fx-fg{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px;border-radius:14px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-fg__h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:18px}
.fx-fg__h b{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800}
.fx-fg__h b svg{width:15px;height:15px;color:var(--bk-red)}
.fx-fg__h span{max-width:62%;font-size:12px;font-weight:700;color:var(--bk-red);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-fg--cols{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-right:100px}
.fx-fg--cols .fx-fg__h{flex:none}
.fx-fg--cols .dg-sws{flex:1 1 380px;max-width:470px;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:5px}
.fx-fg--cols .dg-sws .dg-sw{width:100% !important;height:auto !important;aspect-ratio:1}
.fx-fg--cols .dg-sws .dg-sw--any{background:var(--bk-card) !important;border:1px dashed var(--bk-muted) !important;color:var(--bk-text) !important}
.fx-fg--cols .dg-pal{flex:1 1 150px;min-width:0;width:auto !important;margin:0 !important}
.fx-fg--cols .dg-pal:not(.dg-pal--empty):not(.fx-picks){height:14px}
.fx-tg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fx-tg--v{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-tile2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:60px;padding:8px 4px !important;border-radius:11px !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:800 !important;transition:border-color .15s,background .15s,color .15s,transform .12s}
.fx-tile2 svg{width:20px;height:20px}
.fx-tile2 span{color:var(--bk-text);text-align:center;line-height:1.15}
@media (hover:hover){.fx-tile2:hover{border-color:rgba(214,56,55,.45) !important;color:var(--bk-text) !important;transform:translateY(-1px)}}
.fx-tile2[aria-pressed="true"]{background:rgba(214,56,55,.12) !important;border-color:rgba(214,56,55,.6) !important;color:var(--bk-red) !important}
.fx-tile2[aria-pressed="true"] span{color:var(--bk-red)}
.fx-tile2--more{border-style:dashed !important;background:transparent !important}
.fx-tile2--more span{color:var(--bk-muted)}
.fx-fg__seg{display:flex;width:100%;box-sizing:border-box}
.fx-fg__seg button{flex:1;justify-content:center}
.fx-fg--style .fx-s3s--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px}

/* what this generation uses, under Generate */
.fx-uses{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.fx-uses > em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted)}
.fx-use2s{display:flex;flex-direction:column;gap:1px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-use2{display:grid;grid-template-columns:62px minmax(0,1fr) 22px;align-items:center;gap:8px;min-height:26px}
.fx-use2 > em{font-style:normal;font-size:12px;color:var(--bk-muted)}
.fx-use2__v{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;font-weight:800;color:var(--bk-text)}
.fx-use2__t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-use2__pal{display:inline-flex;flex:none;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(127,127,127,.3)}
.fx-use2__pal i{width:8px;height:14px;background:var(--c)}
.fx-use2 button{display:grid;place-items:center;width:22px;height:22px;padding:0 !important;border-radius:50% !important;border:0 !important;background:transparent !important;color:var(--bk-muted) !important;opacity:0;transition:opacity .15s}
.fx-use2 button svg{width:11px;height:11px}
.fx-use2 button:focus-visible{opacity:1}
@media (hover:hover){.fx-use2:hover button{opacity:1}.fx-use2 button:hover{background:rgba(214,56,55,.12) !important;color:var(--bk-red) !important}}
@media (hover:none){.fx-use2 button{opacity:1}}
.fx-use2s .fx-uses__any{min-height:26px}
.fx-uses__any{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--bk-muted)}
.fx-uses__any svg{width:14px;height:14px}

/* Your generations: a header card, the count on the left, a ring with the room left on the right */
.fx-hh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:14px;padding:12px 16px 12px 12px;border-radius:16px;background:var(--bk-card);border:1px solid var(--bk-line)}
.fx-hh__l{display:flex;align-items:center;gap:12px}
.fx-hh__l .bisk-h2{margin:0;line-height:1.15}
.fx-hh__sub{display:block;margin-top:2px;font-size:13px;color:var(--bk-muted)}
.fx-hh__cap{display:flex;align-items:center;gap:10px}
.fx-ring{width:38px;height:38px;transform:rotate(-90deg)}
.fx-ring circle{fill:none;stroke-width:4}
.fx-ring__bg{stroke:var(--bk-line)}
.fx-ring__fg{stroke:var(--bk-red);stroke-linecap:round}
.fx-hh__t{display:flex;flex-direction:column}
.fx-hh__t b{font-size:13.5px;font-weight:800}
.fx-hh__t span{font-size:12px;color:var(--bk-muted)}
b.fx-gen__name{cursor:default}
/* More opens a popup; the group keeps its size, a kind picked there shows on the More tile; Outfit 3 rows, Vibe 3 rows of 2 */
.fx-tile2{position:relative}
.fx-tile2--more.is-picked{border-style:solid !important;background:rgba(214,56,55,.12) !important;border-color:rgba(214,56,55,.6) !important;color:var(--bk-red) !important}
.fx-tile2--more.is-picked span{color:var(--bk-red)}
.fx-tile2__more{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:14px;height:14px;color:var(--bk-red)}
.fx-tile2__more svg{width:12px;height:12px}
.fx-pop2{position:absolute;z-index:9500;width:min(470px,calc(100vw - 24px));box-sizing:border-box;padding:12px;border-radius:16px;background:var(--bk-card);border:1px solid var(--bk-line);box-shadow:0 18px 50px rgba(0,0,0,.5);animation:fxIn2 .18s ease-out both}
body:not(.bi-dark) .fx-pop2{--bi-bg:#f2f2f5;--bi-surface:#ffffff;--bi-text:#17171b;--bi-text-muted:#62636b;--bi-border:#e0e0e6;--bi-hover:rgba(0,0,0,.06)}
.fx-pop2__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fx-pop2__h b{font-size:14px;font-weight:800;color:var(--bk-text)}
.fx-pop2__x{display:grid;place-items:center;width:28px;height:28px;padding:0 !important;border-radius:8px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;cursor:pointer}
.fx-pop2__x svg{width:13px;height:13px}
@media (hover:hover){.fx-pop2__x:hover{color:var(--bk-red) !important}}
.fx-pop2__g{display:grid;grid-template-columns:repeat(var(--pc,4),minmax(0,1fr));gap:6px}
.fx-pop2{width:min(calc(var(--pc,4) * 112px + 24px),calc(100vw - 24px))}
.fx-fn2 .fx-tg--v{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-fn2__row{grid-template-columns:1fr 1fr .78fr;align-items:stretch}
/* Vibe: Any vibe as a wide first row (Isaac: "for vibe, let them also choose any"), then 2 rows of 3 */
.fx-fn2 .fx-tg--v{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-tile2--any{grid-column:1/-1;flex-direction:row !important;gap:8px !important;min-height:44px !important}
.fx-tile2--any svg{width:16px;height:16px}
/* more vibes: three rows of three (Any vibe, the six, one new, More) */
.fx-fn2 .fx-tg--v{grid-template-columns:repeat(3,minmax(0,1fr))}

/* round 11: the fine tune opens on the colours, a bar opens the rest */
.fx-fn2__open{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px !important;border-radius:12px !important;border:1px dashed var(--bk-line) !important;background:transparent !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:800 !important;text-align:left;transition:border-color .15s}
.fx-fn2__open svg{flex:none;width:15px;height:15px;color:var(--bk-red)}
.fx-fn2__open em{font-style:normal;font-weight:600;color:var(--bk-muted)}
.fx-fn2__open b{padding:2px 8px;border-radius:999px;background:rgba(214,56,55,.12);color:var(--bk-red);font-size:11.5px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(214,56,55,.45)}
.fx-fn2__open svg:last-child{margin-left:auto;color:var(--bk-muted);transform:rotate(90deg);transition:transform .15s}
.fx-fn2__open[aria-expanded="true"] svg:last-child{transform:rotate(-90deg)}
@media (hover:hover){.fx-fn2__open:hover{border-color:rgba(214,56,55,.45) !important}}

/* round 14: the trio line stays on the colours row */
@media (min-width:1201px){.fx-fg--cols{flex-wrap:nowrap}}
/* Your generations in ONE card: the header, a row per generation, Show more at the foot */
.fx-app--gens .fx-left{align-self:stretch}
.fx-hist--one{display:flex;flex-direction:column;flex:1 1 auto;padding:16px 18px 6px}
.fx-hist--one .fx-hh{margin:0;padding:0 0 14px;border:0;border-bottom:1px solid var(--bk-line);border-radius:0;background:none}
.fx-hist--one [data-hlist]{flex:0 0 auto}
.fx-hist--one .fx-hist__empty{margin:16px 0 12px}
.fx-gl{display:flex;flex-direction:column}
.fx-gen--row{display:grid;grid-template-columns:172px minmax(0,1fr);gap:16px;padding:14px 0;border:0;border-top:1px solid var(--bk-line);border-radius:0;background:none}
.fx-gl > .fx-gen--row:first-child{border-top:0}
.fx-gen__meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding-top:2px}
.fx-gen__meta .fx-gen__name{max-width:100%;font-size:15px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-gen__when{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--bk-muted)}
.fx-gen__when i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7}
.fx-gen__meta .fx-gtags{flex-direction:column;align-items:flex-start;margin-top:4px}
.fx-gen__top{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-width:0}
.fx-gen__meta .fx-gen__del{flex:none;margin:-4px -6px 0 0 !important}
.fx-gen--row .fx-gen__skins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;border-radius:14px;border:1px solid var(--bk-line);
  background:radial-gradient(90% 130% at 0% 0%,var(--t1),transparent 62%),radial-gradient(90% 130% at 100% 100%,var(--t2),transparent 62%),radial-gradient(60% 80% at 60% 30%,var(--t3),transparent 70%),var(--bk-bg)}
.fx-gen--row .fx-hs{gap:7px;padding:0;background:none;border:0}
.fx-hs__fig{position:relative;width:100%}
.fx-gen--row .fx-hs__pic{display:flex;justify-content:center;background:rgba(0,0,0,.18) !important;border-radius:12px !important}
body:not(.bi-dark) .fx-gen--row .fx-hs__pic{background:rgba(255,255,255,.5) !important}
.fx-gen--row .fx-hs__pic canvas{width:auto;height:172px;max-width:100%}
.fx-gen--row .fx-hs > b{max-width:100%;font-size:12.5px;text-align:center}
.fx-gen--row .fx-hs__star{top:8px;right:8px}
.fx-gen--row .fx-hs__acts{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(16,16,20,.82);box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:0;transition:opacity .15s}
.fx-gen--row .fx-hs__acts .dg-ib{width:30px;height:30px;border:0 !important;border-radius:50% !important;background:transparent !important;color:#fff !important}
.fx-gen--row .fx-hs__acts .dg-ib.is-on{color:#f2c230 !important}
@media (hover:hover){.fx-gen--row .fx-hs:hover .fx-hs__acts,.fx-gen--row .fx-hs:has(:focus-visible) .fx-hs__acts{opacity:1}.fx-gen--row .fx-hs__acts .dg-ib:hover{color:var(--bk-red) !important;background:rgba(255,255,255,.1) !important}}
@media (hover:none){.fx-gen--row .fx-hs__acts{opacity:1}}
.fx-hist--one .fx-hmore{margin-top:auto;padding:12px 0 10px;border-top:1px solid var(--bk-line)}
@media (max-width:1200px){.fx-gen--row{grid-template-columns:minmax(0,1fr)}.fx-gen__meta{flex-direction:row;flex-wrap:wrap;align-items:center}.fx-gen__meta .fx-gtags{flex-direction:row}.fx-gen__top{width:auto}}

/* ---------------- 2026-10-10: his notes for the next demo (the version line, the Generate card, Create your own) and THE
   ENGINE AT WORK (his 10/10 hub transition) ---------------- */
/* the Generate card: what this generation uses, the button, the day's count */
.fx-gocard{gap:10px;padding:14px;margin-bottom:16px;border:1px solid var(--bk-line);border-radius:16px;background:radial-gradient(120% 90% at 0% 0%,rgba(214,56,55,.10),rgba(214,56,55,0) 55%),var(--bk-card)}
.fx-gocard .fx-uses{margin-top:0;gap:8px}
.fx-gocard__h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px}
.fx-gocard__h b{font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted)}
.fx-gocard__h .dg-link{font-size:12px}
.fx-gocard .fx-uses__any{line-height:1.35}
.fx-gocard .fx-uses__any svg{flex:none}
/* Create your own: the palettes' last tile */
.fx-palc{justify-content:center;align-items:center !important;text-align:center;border-style:dashed !important;color:var(--bk-muted) !important}
.fx-mix .fx-palc b{display:block;white-space:normal;overflow:visible;font-size:11px;line-height:1.2;text-align:center}
.fx-palc__i{display:inline-flex !important;vertical-align:-1px;margin-right:2px}
.fx-palc b .fx-palc__i svg{width:11px;height:11px;color:var(--bk-red)}
.fx-palc b{font-size:10.5px;line-height:1.15;white-space:normal}
@media (hover:hover){.fx-palc:hover{border-color:var(--bk-red) !important;color:var(--bk-text) !important}}
.fx-fg--cols{position:relative}
.fx-fg--cols.is-hint .dg-sws{border-radius:14px;animation:fxHint 3.8s ease-out}
@keyframes fxHint{0%,75%{box-shadow:0 0 0 2px var(--bk-red),0 0 0 8px rgba(214,56,55,.16)}100%{box-shadow:0 0 0 0 rgba(214,56,55,0)}}
.fx-fg__hint{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;margin:0;padding:9px 12px;border-radius:11px;white-space:nowrap;font-size:13px;font-weight:700;color:var(--bk-text);background:var(--bk-card);border:1px solid rgba(214,56,55,.55);box-shadow:0 10px 28px rgba(0,0,0,.4);animation:fxHintIn .3s ease-out;pointer-events:none}
.fx-fg__hint::before{content:'';position:absolute;top:-6px;left:22px;width:10px;height:10px;transform:rotate(45deg);background:var(--bk-card);border-left:1px solid rgba(214,56,55,.55);border-top:1px solid rgba(214,56,55,.55)}
.fx-fg__hint svg{width:15px;height:15px;flex:none;color:var(--bk-red)}
.fx-fg__hint.is-out{opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s}
@keyframes fxHintIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fx-fg--cols.is-hint .dg-sws{animation:none;box-shadow:0 0 0 2px var(--bk-red)}.fx-fg__hint{animation:none}}
/* the engine at work: the readout under the stage */
.fx-read{display:flex;align-items:center;gap:10px;min-width:0;width:100%;font-size:14px}
.fx-read__dot{position:relative;width:9px;height:9px;flex:none;border-radius:50%;background:var(--bk-red)}
.fx-read__dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--bk-red);animation:fxReadDot 1s ease-out infinite}
@keyframes fxReadDot{0%{transform:scale(1);opacity:.55}100%{transform:scale(3);opacity:0}}
.fx-read__s{font-weight:800;color:var(--bk-text);white-space:nowrap}
.fx-read__d{display:inline-flex;align-items:center;gap:7px;min-width:0;color:var(--bk-muted);white-space:nowrap;overflow:hidden}
.fx-read__d svg{width:15px;height:15px;flex:none}
.fx-read__dots{display:inline-flex;gap:3px;flex:none}
.fx-read__dots i{width:12px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.fx-read__fl{display:inline-block;animation:fxFlick .11s ease-out}
@keyframes fxFlick{from{opacity:.3;transform:translateY(3px)}to{opacity:1;transform:none}}
.fx-read__p{margin-left:auto;font-variant-numeric:tabular-nums;font-size:14px;color:var(--bk-text)}
/* the bar along the stage's foot in the colours asked for, and a light breathing under the skins */
.fx-runbar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(127,127,127,.16);z-index:3;pointer-events:none}
.fx-runbar i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .07s linear;background:linear-gradient(90deg,var(--r1,#d63837),var(--r2,#e8862a),var(--r3,#f2c230));box-shadow:0 0 12px var(--r2,rgba(214,56,55,.6));border-radius:0 3px 3px 0}
.fx-scene.is-run .fx-slot::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:34%;background:radial-gradient(60% 100% at 50% 100%,var(--r1,rgba(214,56,55,.5)),transparent 70%);opacity:.14;animation:fxBreathe 1.6s ease-in-out infinite;pointer-events:none}
/* (while the engine works only the whirl moves: looping animations here cost a slow machine most of the engine's speed) */
.fx-scene.is-wait .fx-slot::after,.fx-read.is-wait .fx-read__dot::after{animation:none}
.fx-scene.is-wait .fx-slot::after{opacity:.16}
.fx-read.is-wait .fx-read__dot::after{opacity:0}
@keyframes fxBreathe{0%,100%{opacity:.08}50%{opacity:.24}}
@media (prefers-reduced-motion:reduce){.fx-read__dot::after,.fx-scene.is-run .fx-slot::after{animation:none}}
.fx-slot.is-empty .fx-slot__pic{cursor:default;pointer-events:none}

/* HOW IT WAS MADE in the skin's popup: its line, its colours, its checks (on the page's surfaces) */
.fx-hm__top{display:flex;flex-direction:column;gap:5px}
.fx-hm__eye{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-red)}
.fx-hm__eye svg{width:13px;height:13px}
.fx-hm__tl{font:800 17px/1.3 Poppins,sans-serif;color:var(--bk-text)}
.fx-hm__made{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--bk-muted)}
.fx-hm__made > svg{flex:none;width:15px;height:15px}
.fx-hm__dots{flex:none;display:inline-flex}
.fx-hm__dots i{width:13px;height:13px;border-radius:50%;margin-right:-3px;box-shadow:0 0 0 1.5px var(--bk-card)}
.fx-hm__cols{display:flex;align-items:center;gap:9px;margin-top:10px}
.fx-hm__cols > span{display:flex;gap:5px}
.fx-hm__cols i{width:28px;height:28px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.3)}
.fx-hm__cols > svg{flex:none;width:18px;height:18px;color:var(--bk-muted)}
.fx-hm__checks{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.fx-hm__checks > span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.3;color:var(--bk-text)}
.fx-hm__ok{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(63,155,83,.14);box-shadow:inset 0 0 0 1px rgba(63,155,83,.45);color:#6fcf86}
.fx-hm__ok svg{width:12px;height:12px;stroke-width:3}

/* COMING SOON: a fine tune choice still training (not switched on in the taste maker); Admin on: open, marked Training */
.fx-soon{position:absolute;top:4px;right:4px;padding:1px 5px;border-radius:999px;font-style:normal;font-size:8.5px;font-weight:800;line-height:1.5;letter-spacing:.4px;text-transform:uppercase;color:#f2c230;background:rgba(242,194,48,.12);box-shadow:inset 0 0 0 1px rgba(242,194,48,.45);pointer-events:none}
.fx-tile2.is-soon{cursor:default}
.fx-tile2.is-soon > svg,.fx-tile2.is-soon > span{opacity:.42}
@media (hover:hover){.fx-tile2.is-soon:not(.is-try):hover{border-color:var(--bk-line) !important;color:var(--bk-muted) !important;transform:none}}
.fx-tile2.is-soon.is-try > svg,.fx-tile2.is-soon.is-try > span{opacity:.8}
.fx-tile2.is-soon.is-try{cursor:pointer;border-style:dashed !important}
.fx-fg__seg button.is-soon{opacity:.45;cursor:default}
.fx-fg__seg button.is-soon.is-try{opacity:.8;cursor:pointer}
.fx-fg__soon{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#f2c230;background:rgba(242,194,48,.12);box-shadow:inset 0 0 0 1px rgba(242,194,48,.45);white-space:nowrap}
.fx-fg__soon svg{width:11px;height:11px}
.fx-fg__h b .fx-fg__soon{margin-left:4px}
.fx-rcp.is-train{position:relative;border-style:dashed !important}
.fx-pd__soon{display:flex;align-items:center;gap:7px;margin:12px 0 0;font-size:13px;font-weight:700;color:var(--bk-muted)}
.fx-pd__soon svg{width:14px;height:14px;color:#f2c230}
body:not(.bi-dark) .fx-soon,body:not(.bi-dark) .fx-fg__soon{color:#9a6f00;background:rgba(242,194,48,.18);box-shadow:inset 0 0 0 1px rgba(184,134,11,.5)}
body:not(.bi-dark) .fx-pd__soon svg{color:#b8860b}
.fx-fg__h b .fx-fg__soon svg{width:11px;height:11px;color:inherit}
/* (a recipe can turn on a choice still training: picked, it shows as in use) */
.fx-tile2.is-soon[aria-pressed="true"] > svg,.fx-tile2.is-soon[aria-pressed="true"] > span{opacity:1}

/* SEE HOW IT WORKS: the box on the right of the hero, by Your generations (his pick 2026-10-11, D) */
.fx-hero__r{display:flex;flex-direction:column;gap:8px;flex:none}
.fx-hero__how{font:inherit;text-align:left;cursor:pointer}
.fx-hero__how .bisk-tile{color:var(--bk-red)}
/* YOUR GENERATIONS SHUT (2026-10-11): the newest generation's row, then Show all; open, Show less on the foot's right;
   nothing made yet: the header alone */
.fx-hist--one.is-shut,.fx-hist--one.is-empty{flex:none}
.fx-hist--one.is-empty{padding-bottom:16px}
.fx-hist--one.is-empty .fx-hh{padding-bottom:0;border-bottom:0}
.fx-hist--one.is-shut .fx-hmore{margin-top:0}
.fx-hless{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-weight:800}
.fx-hless svg{width:14px;height:14px}
.fx-hero__how{padding:10px 14px 10px 10px !important;border-radius:14px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important}
@media (hover:hover){.fx-hero__how:hover{border-color:rgba(214,56,55,.45) !important}.fx-hero__how:hover > svg{color:var(--bk-red)}}
.fx-hero__how > svg{transform:none !important}

/* the title ends with the version (2026-10-11): Skin Generator v1.12 */
.fx-hero .dg-h1{display:block}
.fx-h1v{font-size:.5em;letter-spacing:0;color:var(--bk-red);white-space:nowrap}
/* Save it with a heart (2026-10-11): filled once saved */
.fx-osave[aria-pressed="true"]{color:var(--bk-red) !important;border-color:rgba(214,56,55,.55) !important;background:rgba(214,56,55,.1) !important}
.fx-osave[aria-pressed="true"] svg,.dg-ib.is-on svg,.fx-hs__star svg{fill:currentColor}
/* the day's count when low or out (2026-10-11): the words, then the Pro button under them, full width */
.fx-q__t{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px}
.fx-q__next{font-size:12px;font-weight:600;color:var(--bk-muted)}
.fx-q__pro{justify-content:center;width:100%;box-sizing:border-box;padding:7px 10px !important;font-size:12.5px !important;white-space:nowrap}

/* ================= THE POPUPS (his picks 2026-10-11): See how it works D Showcase, the skin's popup A Tabs ================= */
.fx-hw__sw{display:inline-flex;gap:5px}
.fx-hw__sw i{width:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.3)}
.fx-hw__know{margin:16px 0 0;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.55;color:var(--bk-muted);background:rgba(214,56,55,.07);border:1px solid rgba(214,56,55,.22)}

/* See how it works: Showcase */
.fx-hw--d .bisk-dlg__box{max-width:900px;width:min(900px,calc(100vw - 32px))}
.fx-hwd__hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:18px;padding:16px 22px 16px 10px;border-radius:18px;background:radial-gradient(70% 120% at 25% 100%,var(--h1),transparent 70%),radial-gradient(60% 100% at 100% 0%,var(--h2),transparent 70%),var(--bk-bg);border:1px solid var(--bk-line)}
.fx-hwd__four{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fx-hwd__four canvas{width:100%;height:auto}
.fx-hwd__t h3{margin:8px 0;font:800 26px/1.15 Poppins,sans-serif;color:var(--bk-text)}
.fx-hwd__t p{margin:0;font-size:14.5px;line-height:1.55;color:var(--bk-muted)}
.fx-hwd__pils{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.fx-hwd__pil{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-hwd__pil .bisk-tile svg{color:var(--bk-red)}
.fx-hwd__pil b{margin-top:4px;font-size:15px;font-weight:800}
.fx-hwd__pil p{margin:0;font-size:13px;line-height:1.55;color:var(--bk-muted)}
.fx-hwd__also{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fx-hwd__also span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--bk-bg);border:1px solid var(--bk-line);font-size:13px}
.fx-hwd__also svg{width:15px;height:15px;color:var(--bk-red)}
.fx-hwd__also b{font-weight:800}

/* the skin's popup: Tabs */
.fx-o2--a .bisk-dlg__box{max-width:1000px;width:min(1000px,calc(100vw - 32px))}
.fx-o2a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px}
.fx-o2a__l{display:flex;flex-direction:column;gap:10px}
.fx-o2stage{position:relative;border-radius:16px;overflow:hidden;background:radial-gradient(70% 60% at 50% 70%,rgba(214,56,55,.14),rgba(214,56,55,0) 70%),var(--bk-bg)}
.fx-o2a__l .fx-o2stage{flex:1 1 auto;min-height:460px}
.fx-o2moves{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.fx-o2moves button{padding:6px 12px !important;border-radius:999px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-muted) !important;font-size:12.5px;font-weight:800;cursor:pointer;transition:border-color .15s,color .15s}
.fx-o2moves button[aria-pressed="true"]{border-color:rgba(214,56,55,.6) !important;color:var(--bk-red) !important;background:rgba(214,56,55,.1) !important}
@media (hover:hover){.fx-o2moves button:hover{color:var(--bk-text) !important}}
.fx-o2a__r{display:flex;flex-direction:column;gap:14px;min-width:0}
/* (the four actions in two even rows) */
.fx-o2acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fx-o2acts .bisk-btn{width:100%;padding:12px 16px !important;font-size:14px !important}
.fx-o2tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-o2tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 8px !important;border-radius:9px !important;border:0 !important;background:transparent !important;color:var(--bk-muted) !important;font-size:13.5px;font-weight:800;cursor:pointer}
.fx-o2tabs button svg{width:15px;height:15px}
.fx-o2tabs button em{font-style:normal;padding:1px 7px;border-radius:999px;font-size:11px;background:rgba(127,127,127,.18)}
.fx-o2tabs button[aria-pressed="true"]{background:var(--bk-card) !important;color:var(--bk-text) !important;box-shadow:0 1px 0 rgba(255,255,255,.04),0 0 0 1px var(--bk-line)}
.fx-o2tabs button[aria-pressed="true"] svg{color:var(--bk-red)}
/* (the panes share one place and the tallest sets it: a tab never changes the popup's size) */
.fx-o2panes{display:grid;flex:1 1 auto}
.fx-o2panes > .fx-o2tab{grid-area:1/1}
.bisk .fx-o2panes > .fx-o2tab[hidden]{display:block !important;visibility:hidden}
.fx-o2tab{padding:14px 16px;border-radius:14px;border:1px solid var(--bk-line);background:var(--bk-bg);min-height:190px}
.fx-o2tab__t{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--bk-muted)}
.fx-o2tab__t b{color:var(--bk-text)}
/* PIECES IN 3D: each piece alone on the grey stand-in, its name, what it is */
.fx-pc3s{display:grid;grid-template-columns:repeat(var(--pcn,4),minmax(0,1fr));gap:8px}
.fx-pc3{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:4px 0 8px;border-radius:12px;background:radial-gradient(70% 55% at 50% 42%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%),var(--bk-card);box-shadow:inset 0 0 0 1px var(--bk-line)}
.fx-pc3 canvas{display:block;width:100%;height:auto}
.fx-pc3 b{max-width:100%;padding:0 6px;box-sizing:border-box;font-size:12px;font-weight:800;line-height:1.3;color:var(--bk-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-pc3 small{font-size:10px;font-weight:800;line-height:1.3;letter-spacing:.5px;text-transform:uppercase;color:var(--bk-muted)}

/* Or describe it in words: Coming soon (2026-10-11); Admin on: Training */
.dg-beta--soon{color:#f2c230;background:rgba(242,194,48,.12);border-color:rgba(242,194,48,.45)}
body:not(.bi-dark) .dg-beta--soon{color:#9a6f00;background:rgba(242,194,48,.18);border-color:rgba(184,134,11,.5)}
.dg-betalink.is-soon{cursor:default}
.dg-betalink.is-soon > svg{opacity:.45}
@media (hover:hover){.dg-betalink.is-soon:hover{color:var(--bk-muted) !important}}
/* More like: the skin's flat head before its name (2026-10-11) */
.fx-use2__face{flex:none;width:20px;height:20px;border-radius:5px;image-rendering:pixelated;box-shadow:0 0 0 1px rgba(127,127,127,.35)}
@media (max-width:760px){.fx-o2a{grid-template-columns:1fr}.fx-o2a__l .fx-o2stage{min-height:340px}.fx-pc3s{grid-template-columns:repeat(3,minmax(0,1fr))}.fx-hwd__hero,.fx-hwd__pils{grid-template-columns:1fr 1fr}}

/* ================= REMIX MY SKIN (2026-10-11 late): what to change as tiles, your skin, the stage's ready card, colour
   strength; HIDE A PIECE (the eye on the piece cards) ================= */
.fx-use2 > i{display:block}
.fx-mk{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fx-mk__t{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.fx-mk__t > svg{flex:none;width:18px;height:18px;color:var(--bk-muted)}
.fx-mk__t span{display:flex;flex-direction:column;gap:2px;min-width:0}
.fx-mk__t b{font-size:13px;font-weight:800;line-height:1.2}
.fx-mk__t em{font-style:normal;font-size:11.5px;font-weight:600;line-height:1.3;color:var(--bk-muted)}
.fx-mk__t[aria-pressed="true"]{border-color:rgba(214,56,55,.6) !important;background:rgba(214,56,55,.1) !important}
.fx-mk__t[aria-pressed="true"] > svg{color:var(--bk-red)}
@media (hover:hover){.fx-mk__t:not([aria-pressed="true"]):hover{border-color:rgba(214,56,55,.35) !important}}
.fx-mskin{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 6px;border-radius:14px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.fx-mskin canvas{flex:none;width:72px;height:90px}
.fx-mskin__t{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.fx-mskin__t b{max-width:100%;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-mskin__c{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--bk-muted)}
.fx-mskin__c em{font-style:normal;margin-right:4px}
.fx-mskin__c i{width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.fx-ready{display:flex;align-items:center;gap:22px;width:min(640px,100%);box-sizing:border-box;padding:20px 28px 20px 16px;border-radius:18px;background:var(--bk-card);border:1px solid var(--bk-line);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.fx-ready canvas{flex:none;width:176px;height:220px}
.fx-ready__t{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.fx-ready__t .bisk-eyebrow{margin:0}
.fx-ready__t b{max-width:100%;font:800 26px/1.15 Poppins,sans-serif;color:var(--bk-text);overflow-wrap:anywhere}
.fx-ready__t p{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--bk-muted)}
.fx-ready__b{display:flex;flex-wrap:wrap;gap:8px}
.fx-scene.is-run .fx-dropwrap{display:none}
/* colour strength: its word, the bar with its five steps, what the step does */
.fx-mst{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 26px;padding-right:16px}
.fx-mst .fx-fg__h{flex:none;flex-direction:column;align-items:flex-start;gap:4px;min-width:140px}
.fx-mst .fx-fg__h span{max-width:none;font-size:13px}
.fx-mst__w{flex:1 1 380px;max-width:560px;padding-top:6px}
.fx-mst__r{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;margin:0;border-radius:999px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--bk-red) 0,var(--bk-red) var(--p),var(--bk-line) var(--p))}
.fx-mst__r::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--bk-red);box-shadow:0 1px 6px rgba(0,0,0,.35)}
.fx-mst__r::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--bk-red)}
.fx-mst__ticks{position:relative;height:22px;margin-top:6px}
.fx-mst__ticks button{position:absolute;top:0;left:calc(9px + (100% - 18px) * var(--x));transform:translateX(-50%);padding:2px 4px !important;border:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:800 !important;white-space:nowrap;cursor:pointer}
.fx-mst__ticks button:first-child{transform:translateX(-9px)}
.fx-mst__ticks button:last-child{transform:translateX(calc(-100% + 9px))}
.fx-mst__ticks button[aria-pressed="true"]{color:var(--bk-red) !important}
@media (hover:hover){.fx-mst__ticks button:not([aria-pressed="true"]):hover{color:var(--bk-text) !important}}
.fx-mst__note{flex:1 1 220px;margin:0;font-size:13px;line-height:1.5;color:var(--bk-muted)}
/* hide a piece: the eye on its card; hidden, the card dims */
.fx-pc3{position:relative}
.fx-pc3__eye{position:absolute;top:5px;right:5px;z-index:1;display:grid;place-items:center;width:24px;height:24px;padding:0 !important;border-radius:8px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-muted) !important;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.fx-pc3__eye svg{width:14px;height:14px}
@media (hover:hover){.fx-pc3__eye:hover{color:var(--bk-text) !important;border-color:rgba(214,56,55,.45) !important}}
.fx-pc3.is-hid canvas{opacity:.25}
.fx-pc3.is-hid b,.fx-pc3.is-hid small{opacity:.5}
.fx-pc3.is-hid .fx-pc3__eye{color:var(--bk-red) !important;border-color:rgba(214,56,55,.45) !important;background:rgba(214,56,55,.12) !important}
/* Fresh for you and Fresh mixes (his note 2026-10-11: "is it making 12 new ones now? or pushing the top row at the bottom?"):
   the newest first under Just made, the ones before under Earlier, blanks shimmering where the new ones land */
.fx-pd__lab{margin:2px 0 8px;font-size:12.5px;font-weight:700;color:var(--bk-muted)}
.fx-pd__grid + .fx-pd__lab,.fx-rd__grid + .fx-pd__lab{margin-top:14px}
.fx-pd__make[disabled]{opacity:1 !important;cursor:default !important}
.fx-spin{display:inline-block;flex:none;width:13px;height:13px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;box-sizing:border-box;animation:fxSpin .7s linear infinite}
.fx-pd__p--ph,.fx-rcp--ph{pointer-events:none}
.fx-pd__p--ph > span,.fx-rcp--ph .fx-rcp__ic{background:linear-gradient(90deg,rgba(127,127,127,.16) 30%,rgba(127,127,127,.34) 50%,rgba(127,127,127,.16) 70%) !important;background-size:300% 100% !important;box-shadow:none !important;animation:fxShim 1.2s linear infinite;animation-delay:var(--d,0s)}
.fx-pd__p--ph > b{display:block;width:62%;height:11px;margin:2px 0 1px;border-radius:4px;background:rgba(127,127,127,.2)}
.fx-rcp--ph .fx-rcp__t{flex:1;gap:6px}
.fx-rcp--ph .fx-rcp__t b,.fx-rcp--ph .fx-rcp__t em{display:block;height:10px;border-radius:4px;background:rgba(127,127,127,.2)}
.fx-rcp--ph .fx-rcp__t b{width:55%}
.fx-rcp--ph .fx-rcp__t em{width:85%}
@keyframes fxShim{from{background-position:100% 0}to{background-position:0 0}}
.fx-pd__p.is-new,.fx-rcp.is-new{animation:fxPdIn .45s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:var(--d,0s)}
@keyframes fxPdIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fx-pd__p.is-new,.fx-rcp.is-new,.fx-pd__p--ph > span,.fx-rcp--ph .fx-rcp__ic,.fx-spin{animation:none}}
/* recipes not on yet (his note 2026-10-11): shown with their Soon tag, quieter, a click picks nothing */
.fx-rcp.is-soon{cursor:default}
.fx-rcp.is-soon:not(.is-try) .fx-rcp__ic,.fx-rcp.is-soon:not(.is-try) .fx-rcp__t{opacity:.5}
@media (hover:hover){.fx-rcp.is-soon:not(.is-try):hover{border-color:var(--bk-line) !important}}
.fx-rcp.is-soon .fx-rcp__t{padding-right:34px}

/* ================= PHONE DEMOS (2026-10-11): the Skin Generator page on a phone, five layouts (phone.js). Plain, roomy
   tiles and cards (no glow, no dividers), buttons the thumb reaches, nothing that changes look while scrolling ============ */
.is-ph .dg{max-width:none !important;margin:0 !important;padding:0 !important;min-height:100vh}
.ph{--g:16px;position:relative;min-height:100vh;padding-bottom:28px;color:var(--bk-text);font-size:15px;line-height:1.45;overflow-x:hidden}
.ph,.ph *,.ph-sheet,.ph-sheet *{-webkit-tap-highlight-color:transparent}
.ph button,.ph-sheet button{font-family:inherit}
.ph button:focus:not(:focus-visible),.ph-sheet button:focus:not(:focus-visible){outline:none}
.ph svg{flex:none}
.ph-pad{padding:0 var(--g)}
.ph-gap{margin-top:14px}
/* the site's header and crumbs, as on a phone */
.ph-hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:4px;height:56px;padding:0 6px 0 var(--g);background:var(--bk-card);border-bottom:1px solid var(--bk-line)}
.ph-logo{display:inline-flex;align-items:center;gap:8px;font:900 17px/1 Poppins,sans-serif;letter-spacing:.3px;color:var(--bk-text)}
.ph-logo i{width:18px;height:18px;border-radius:5px;background:var(--bk-red)}
.ph-sp{flex:1}
.ph-ic{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0 !important;border:0 !important;border-radius:12px !important;background:none !important;color:var(--bk-text) !important;cursor:pointer}
.ph-ic svg{width:21px;height:21px}
.ph-ic--b{width:42px;height:42px;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important}
.ph-ic--b svg{width:19px;height:19px}
.ph-ic b{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--bk-red);color:#fff;font-size:11px;font-weight:800;line-height:20px;text-align:center;box-sizing:border-box}
.ph-crumbs{display:flex;align-items:center;gap:6px;padding:10px var(--g) 0;font-size:12.5px;color:var(--bk-muted)}
.ph-crumbs b{color:var(--bk-text);font-weight:700}
.ph-crumbs i{font-style:normal;opacity:.6}
.ph-foot{display:flex;flex-direction:column;align-items:center;gap:8px;margin:34px var(--g) 0;padding:24px 0 0;border-top:1px solid var(--bk-line);text-align:center}
.ph-foot p{margin:0;font-size:12.5px;color:var(--bk-muted)}
/* the title */
.ph-top{padding:14px var(--g) 4px}
.ph-eye{display:block;margin:0 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--bk-red)}
.ph-h1{margin:0;font:800 29px/1.12 Poppins,sans-serif;letter-spacing:-.4px;color:var(--bk-text)}
.ph-h1 span{font-size:.5em;letter-spacing:0;color:var(--bk-red);white-space:nowrap}
.ph-h1--s{flex:1;font-size:21px}
.ph-lead{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--bk-muted)}
.ph-top__b{display:flex;gap:8px;margin-top:14px}
.ph-pill{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px !important;border-radius:999px !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important;cursor:pointer}
.ph-pill svg{width:15px;height:15px;color:var(--bk-red)}
.ph-pill b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgba(214,56,55,.14);color:var(--bk-red);font-size:11.5px;line-height:20px;text-align:center;box-sizing:border-box}
.ph-bar{display:flex;align-items:center;gap:8px;padding:12px var(--g) 2px}
/* New skins / Remix my skin */
.ph-seg{display:flex;gap:4px;margin:16px 0 14px;padding:4px;border-radius:14px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 6px !important;border:0 !important;border-radius:10px !important;background:none !important;color:var(--bk-muted) !important;font-size:14px !important;font-weight:800 !important;cursor:pointer}
.ph-seg button svg{width:16px;height:16px}
.ph-seg button[aria-pressed="true"]{background:var(--bk-bg) !important;color:var(--bk-text) !important;box-shadow:0 0 0 1px var(--bk-line)}
.ph-seg button[aria-pressed="true"] svg{color:var(--bk-red)}
/* skins: tiles (3:4, radius 14, a line round, the card's colour) */
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ph-tile{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 !important;border:0 !important;background:none !important;color:var(--bk-text) !important;text-align:left;cursor:pointer}
.ph-tile__pic{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;background:var(--bk-card);box-shadow:inset 0 0 0 1px var(--bk-line);overflow:hidden}
.ph-tile__pic canvas{display:block;width:100%;height:100%}
.ph-tile > b{display:block;padding:0 2px;font-size:13.5px;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-fav{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(214,56,55,.14);box-shadow:inset 0 0 0 1px rgba(214,56,55,.45);color:var(--bk-red)}
.ph-fav svg{width:14px;height:14px;fill:currentColor}
.ph-tile.is-in,.ph-card.is-in,.ph-thumb.is-in,.ph-post.is-in,.ph-spot.is-in{animation:phIn .46s cubic-bezier(.2,1.25,.4,1) both;animation-delay:var(--d,0s)}
@keyframes phIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.ph-under{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 2px 0;font-size:12.5px;color:var(--bk-muted)}
.ph-under b{font-weight:800;color:var(--bk-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-under span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ph-under svg{width:15px;height:15px}
/* while it works: the next four's outlines in the colours asked for, a shimmer through them */
.ph-ghost{pointer-events:none}
.ph-sil{position:absolute;inset:12% 26% 8%;display:block}
.ph-sil i{position:absolute;border-radius:3px;background:linear-gradient(110deg,var(--g1,#555) 0%,var(--g2,#777) 45%,var(--g3,#999) 100%);background-size:240% 100%;opacity:.42;animation:phSh 1.3s linear infinite,phBreath 1.6s ease-in-out infinite}
.ph-sil .s-hd{left:25%;top:0;width:50%;height:25%;animation-delay:0s,.15s}
.ph-sil .s-bd{left:25%;top:25%;width:50%;height:37.5%;animation-delay:.1s,.25s}
.ph-sil .s-la{left:0;top:25%;width:25%;height:37.5%;animation-delay:.2s,.35s}
.ph-sil .s-ra{right:0;top:25%;width:25%;height:37.5%;animation-delay:.2s,.35s}
.ph-sil .s-ll{left:25%;top:62.5%;width:25%;height:37.5%;animation-delay:.3s,.45s}
.ph-sil .s-rl{right:25%;top:62.5%;width:25%;height:37.5%;animation-delay:.3s,.45s}
@keyframes phSh{from{background-position:100% 0}to{background-position:-140% 0}}
@keyframes phBreath{0%,100%{opacity:.3}50%{opacity:.62}}
.ph-ghost:nth-child(2) .ph-sil i{animation-delay:.12s,.3s}.ph-ghost:nth-child(3) .ph-sil i{animation-delay:.24s,.45s}.ph-ghost:nth-child(4) .ph-sil i{animation-delay:.36s,.6s}
@media (prefers-reduced-motion:reduce){.ph-sil i{animation:none}.ph-tile.is-in,.ph-card.is-in,.ph-thumb.is-in,.ph-post.is-in,.ph-spot.is-in{animation:none}}
.ph-read{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 10px;margin:12px 2px 0}
.ph-read__t{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;font-weight:800}
.ph-read__t i{width:8px;height:8px;border-radius:50%;background:var(--bk-red);animation:phBreath 1s ease-in-out infinite}
.ph-read__p{font-size:12.5px;font-weight:800;color:var(--bk-muted);font-variant-numeric:tabular-nums}
.ph-read__bar{grid-column:1/-1;display:block;height:5px;border-radius:999px;background:var(--bk-line);overflow:hidden}
.ph-read__bar b{display:block;width:0;height:100%;border-radius:999px;background:var(--bk-red);transition:width .2s linear}
/* what the next four use: the desktop card's rows as chips */
.ph-uses{margin-top:14px}
.ph-uses .fx-uses{gap:8px;margin:0}
.ph-uses .fx-gocard__h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph-uses .fx-gocard__h b{font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--bk-muted)}
.ph-uses .fx-gocard__h .dg-link{font-size:12.5px;font-weight:800}
.ph-uses .fx-use2s{display:flex;flex-wrap:wrap;gap:6px;padding:0;border:0;background:none}
.ph-uses .fx-use2{display:inline-flex;align-items:center;gap:6px;min-height:34px;max-width:100%;padding:0 4px 0 12px;border-radius:999px;background:var(--bk-card);border:1px solid var(--bk-line);box-sizing:border-box}
.ph-uses .fx-use2 > em{font-size:12px;color:var(--bk-muted);white-space:nowrap}
.ph-uses .fx-use2__v{font-size:13px;min-width:0}
.ph-uses .fx-use2 > button{opacity:1 !important;width:26px;height:26px}
.ph-uses .fx-use2 > i{width:6px}
.ph-uses .fx-uses__any{display:flex;align-items:flex-start;gap:8px;min-height:0;padding:10px 12px;border-radius:12px;background:var(--bk-card);border:1px dashed var(--bk-line);font-size:13px;line-height:1.4;color:var(--bk-muted)}
.ph-uses .fx-uses__any svg{flex:none;width:15px;height:15px;margin-top:1px}
.ph-uses .fx-use2__face{width:22px;height:22px}
/* the button, the day's count */
.ph-gen{display:flex !important;align-items:center;justify-content:center;gap:9px;width:100%;height:54px;margin:0 !important;border-radius:14px !important;font-size:16px !important;font-weight:800 !important}
.ph-gen svg{width:18px;height:18px}
.ph-gen[disabled]{opacity:.55}
.ph-gen.is-armed{animation:phArm 1s ease-in-out 2}
@keyframes phArm{0%,100%{box-shadow:0 0 0 0 rgba(214,56,55,0)}50%{box-shadow:0 0 0 6px rgba(214,56,55,.28)}}
.ph-gen.is-big{height:58px;margin-top:16px !important}
.ph-q{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin:8px 0 0;font-size:12.5px;font-weight:700;color:var(--bk-muted);text-align:center}
.ph-q.is-low{color:#f2c230}
.ph-q__pro{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px !important;border-radius:999px !important;border:1px solid rgba(242,194,48,.45) !important;background:rgba(242,194,48,.12) !important;color:#f2c230 !important;font-size:12px !important;font-weight:800 !important}
.ph-q__pro svg{width:13px;height:13px}
/* sections */
.ph-sec{margin-top:26px;padding:0 var(--g)}
.ph-sec__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.ph-h2{margin:0;font:800 19px/1.25 Poppins,sans-serif;letter-spacing:-.2px;color:var(--bk-text)}
.ph-link{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 4px !important;border:0 !important;background:none !important;color:var(--bk-red) !important;font-size:13.5px !important;font-weight:800 !important;cursor:pointer;white-space:nowrap}
.ph-link svg{width:15px;height:15px}
.ph-allrow{display:flex;justify-content:center;margin-top:8px}
.ph-note{display:flex;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--bk-card);border:1px solid var(--bk-line);font-size:13px;line-height:1.45;color:var(--bk-muted)}
.ph-note svg{flex:none;width:16px;height:16px;margin-top:1px}
/* colours: two rows of seven circles big enough for a thumb, your picks under them */
.ph-cols{position:relative;border-radius:16px;transition:box-shadow .3s}
.ph-cols.is-hint{box-shadow:0 0 0 3px rgba(214,56,55,.55)}
.ph-cols .dg-sws{display:grid !important;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:0;max-width:none !important}
.ph-cols .dg-sw{width:100% !important;height:auto !important;aspect-ratio:1;margin:0 !important}
.ph-cols .dg-sw--any{background:var(--bk-card) !important;border:1px dashed var(--bk-muted) !important;color:var(--bk-text) !important}
.ph-cols .dg-pal{width:100% !important;margin:12px 0 0 !important}
.ph-cols .dg-pal:not(.dg-pal--empty):not(.fx-picks){height:14px}
.ph-cols .dg-pal--empty{min-height:0}
.ph-cols .dg-pal--empty span{font-size:12.5px;line-height:1.45}
.ph-cols .fx-picks{height:40px}
/* palettes */
.ph-pals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ph-pal{display:flex;flex-direction:column;gap:7px;min-width:0;padding:9px !important;border-radius:14px !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;color:var(--bk-text) !important;text-align:left;cursor:pointer}
.ph-pal > span{display:flex;height:22px;border-radius:7px;overflow:hidden}
.ph-pal > span i{flex:1;background:var(--c)}
.ph-pal b{font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-pal[aria-pressed="true"]{border-color:rgba(214,56,55,.7) !important;background:rgba(214,56,55,.1) !important}
.ph-pal--own > span{display:grid;place-items:center;border:1px dashed var(--bk-muted);border-radius:7px;color:var(--bk-text)}
.ph-pal--own > span svg{width:14px;height:14px}
/* recipes: the desktop cards, two across */
.ph-rcps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ph-rcps .fx-rcp{min-height:0;padding:10px !important;border-radius:14px !important}
.ph-rcps .fx-rcp__t b{font-size:13.5px}
.ph-rcps .fx-rcp__t em,.ph-rcps .fx-rcp__t span{font-size:12px}
/* a row that opens something (fine tuning) */
.ph-row{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 14px !important;border-radius:14px !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;color:var(--bk-text) !important;text-align:left;cursor:pointer;box-sizing:border-box}
.ph-row > svg:first-child{width:20px;height:20px;color:var(--bk-red)}
.ph-row > svg:last-child{width:18px;height:18px;color:var(--bk-muted)}
.ph-row span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ph-row b{font-size:15px;font-weight:800}
.ph-row em{font-style:normal;font-size:12.5px;color:var(--bk-muted)}
.ph-row__n{padding:3px 9px;border-radius:999px;font-style:normal;font-size:11.5px;font-weight:800;color:var(--bk-red);background:rgba(214,56,55,.12);box-shadow:inset 0 0 0 1px rgba(214,56,55,.45)}
/* the fine tune in a sheet: its groups one under the other, its colours row and its own toggle left out */
.ph-fine .fx-fn2{padding:0;background:none;border:0;box-shadow:none}
.ph-fine .fx-fg--cols,.ph-fine .fx-fn2__open{display:none !important}
.ph-fine .fx-fn2__row{display:flex !important;flex-direction:column;gap:12px}
.ph-fine .fx-fn2__reset{position:static;align-self:flex-end;margin-bottom:-4px}
.ph-fine .fx-tg{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.ph-fine .fx-tile2{min-height:66px}
.ph-fine .fx-s3s{display:flex;flex-direction:column;gap:10px}
.ph-fine .fx-s3 .dg-seg{display:flex;width:100%}
.ph-fine .fx-s3 .dg-seg button{flex:1;justify-content:center;padding:9px 4px !important;font-size:12.5px !important}
/* Remix my skin: bring a skin, ready, what to change, colour strength */
.ph-drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 18px;border-radius:18px;border:2px dashed var(--bk-line);background:var(--bk-card);text-align:center}
.ph-drop__i{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(214,56,55,.12);color:var(--bk-red)}
.ph-drop__i svg{width:22px;height:22px}
.ph-drop > b{font:800 20px/1.2 Poppins,sans-serif}
.ph-drop p{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--bk-muted)}
.ph-drop__b{display:inline-flex !important;align-items:center;gap:8px;height:50px;padding:0 22px !important;border-radius:14px !important;font-size:15px !important}
.ph-drop__b svg{width:17px;height:17px}
.ph-smp{width:100%;margin-top:10px;font-size:12.5px;color:var(--bk-muted)}
.ph-smp > div{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.ph-smp__b{padding:0 !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;overflow:hidden;cursor:pointer}
.ph-smp__b canvas{display:block;width:100%;height:auto;aspect-ratio:4/5}
.ph-ready{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-ready canvas{flex:none;width:118px;height:148px}
.ph-ready__t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.ph-ready__t > b{max-width:100%;font:800 21px/1.2 Poppins,sans-serif;overflow-wrap:anywhere}
.ph-ready__t p{margin:0;font-size:13.5px;line-height:1.45;color:var(--bk-muted)}
.ph-mk{grid-template-columns:1fr 1fr !important}
.ph-mk .fx-mk__t{min-height:64px;padding:10px !important}
.ph-mk .fx-mk__t em{font-size:11.5px}
.ph-mst{display:flex !important;flex-direction:column;align-items:stretch !important;gap:10px !important;margin-top:16px;padding:14px !important;border-radius:16px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-mst__h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph-mst__h b{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:800}
.ph-mst__h b svg{width:16px;height:16px;color:var(--bk-red)}
.ph-mst__h span{font-size:13.5px;font-weight:800;color:var(--bk-red)}
.ph-mst .fx-mst__w{flex:none !important;max-width:none;padding-top:8px}
.ph-mst .fx-mst__r{height:8px}
.ph-mst .fx-mst__r::-webkit-slider-thumb{width:28px;height:28px;border-width:4px}
.ph-mst .fx-mst__r::-moz-range-thumb{width:20px;height:20px;border-width:4px}
.ph-mst .fx-mst__note{flex:none;font-size:13px}
.ph-mrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-mrow > img{width:38px !important;height:38px !important;border-radius:9px !important;image-rendering:pixelated}
.ph-mrow > span{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.ph-mrow b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-mrow em{display:flex;gap:4px}
.ph-mrow em i{width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
/* Your skins */
.ph-hist{display:flex;flex-direction:column;gap:16px}
.ph-hg__h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:12.5px;color:var(--bk-muted)}
.ph-hg__h b{font-size:14.5px;font-weight:800;color:var(--bk-text)}
.ph-hg__h .fx-gen__pal{margin-left:auto}
.ph-hg__r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ph-hg__s{position:relative;padding:0 !important;border-radius:12px !important;border:0 !important;background:var(--bk-card) !important;box-shadow:inset 0 0 0 1px var(--bk-line);overflow:hidden;cursor:pointer}
.ph-hg__s canvas{display:block;width:100%;height:auto;aspect-ratio:4/5}
.ph-hg__s .ph-fav{top:5px;right:5px;width:20px;height:20px}
.ph-hg__s .ph-fav svg{width:11px;height:11px}
.ph-hist.is-shelf .ph-hg__r{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--g));padding:0 var(--g);scrollbar-width:none}
.ph-hist.is-shelf .ph-hg__r::-webkit-scrollbar{display:none}
.ph-hist.is-shelf .ph-hg__s{flex:0 0 29%;scroll-snap-align:start}
.ph-empty{display:flex;align-items:flex-start;gap:10px;margin:0;padding:14px;border-radius:14px;background:var(--bk-card);border:1px dashed var(--bk-line);font-size:13.5px;line-height:1.5;color:var(--bk-muted)}
.ph-empty svg{flex:none;width:18px;height:18px;color:var(--bk-red)}
.ph-more{display:block;width:100%;height:48px;border-radius:14px !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:800 !important;cursor:pointer}
/* a skin's buttons */
.ph-acts{display:flex;align-items:center;gap:8px;margin-top:12px}
.ph-ib{display:grid;place-items:center;flex:none;width:46px;height:46px;padding:0 !important;border-radius:13px !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;color:var(--bk-text) !important;cursor:pointer}
.ph-ib svg{width:19px;height:19px}
.ph-ib.is-on{color:var(--bk-red) !important;border-color:rgba(214,56,55,.5) !important;background:rgba(214,56,55,.1) !important}
.ph-ib.is-on svg{fill:currentColor}
.ph-cbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;min-width:0;padding:0 12px !important;border-radius:13px !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:800 !important;white-space:nowrap;cursor:pointer}
.ph-cbtn svg{width:17px;height:17px;color:var(--bk-red)}
/* A SHEET: from the bottom, no dim behind it, a bar to drag it down */
.ph-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9000;pointer-events:none}
.ph-sheet__box{position:relative;display:flex;flex-direction:column;max-height:86vh;max-height:86dvh;border-radius:22px 22px 0 0;background:var(--bk-card);border:1px solid var(--bk-line);border-bottom:0;box-shadow:0 -14px 40px rgba(0,0,0,.4);transform:translateY(104%);transition:transform .3s cubic-bezier(.2,.9,.3,1);pointer-events:auto}
.ph-sheet.is-on .ph-sheet__box{transform:none}
.ph-sheet__grab{width:44px;height:5px;margin:9px auto 0;border-radius:999px;background:var(--bk-line);flex:none}
.ph-sheet__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 6px 4px 18px;touch-action:none;flex:none}
.ph-sheet__h b{font:800 18px/1.2 Poppins,sans-serif}
.ph-sheet__b{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 20px;scrollbar-width:none;overscroll-behavior:contain}
.ph-sheet__b::-webkit-scrollbar{display:none}
.ph-sheet__sub{margin:0 0 14px;font-size:13px;color:var(--bk-muted)}
.ph-sheet__go{position:sticky;bottom:-20px;margin:16px -16px -20px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:var(--bk-card);border-top:1px solid var(--bk-line)}
.ph-sheet__go .ph-uses{margin:0 0 10px}
.ph-tabs{display:flex;gap:4px;margin:2px 0 14px;padding:4px;border-radius:13px;background:var(--bk-bg);border:1px solid var(--bk-line)}
.ph-tabs button{flex:1;height:38px;padding:0 4px !important;border:0 !important;border-radius:10px !important;background:none !important;color:var(--bk-muted) !important;font-size:13.5px !important;font-weight:800 !important;cursor:pointer}
.ph-tabs button[aria-pressed="true"]{background:var(--bk-card) !important;color:var(--bk-text) !important;box-shadow:0 0 0 1px var(--bk-line)}
/* the bar at the thumb (A, C) */
.ph-dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));background:var(--bk-card);border-top:1px solid var(--bk-line);box-shadow:0 -10px 30px rgba(0,0,0,.25)}
.ph-dock .ph-q{margin-top:6px}
.ph--a,.ph--c{padding-bottom:128px}
.ph-dock--two{display:flex;gap:8px}
.ph-cust{flex:0 0 auto;display:inline-flex !important;align-items:center;gap:7px;height:54px;padding:0 16px !important;border-radius:14px !important;font-size:15px !important;font-weight:800 !important}
.ph-cust svg{width:18px;height:18px}
.ph-cust b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bk-red);color:#fff;font-size:11.5px;line-height:20px;box-sizing:border-box}
.ph-dock--two .ph-gen{flex:1}
.is-ph .bisk-toast{bottom:150px !important}

/* ================= B CAROUSEL ================= */
.ph-car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 6% 6px;scroll-padding:0 6%;scrollbar-width:none}
.ph-car::-webkit-scrollbar{display:none}
.ph-card{flex:0 0 88%;display:flex;flex-direction:column;min-width:0;padding:12px;border-radius:20px;background:var(--bk-card);border:1px solid var(--bk-line);scroll-snap-align:center;box-sizing:border-box}
.ph-card--wide{flex-basis:100%;padding:0;border:0;background:none}
.ph-card__pic{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0 !important;border:0 !important;border-radius:14px !important;background:var(--bk-bg) !important;overflow:hidden;cursor:pointer}
.ph-card__pic canvas{display:block;width:100%;height:100%}
.ph-card__n{position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:11.5px;font-weight:800}
.ph-card__b{display:flex;flex-direction:column;gap:2px;margin-top:12px;min-width:0}
.ph-card__b b{font:800 18px/1.25 Poppins,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-card__b span{font-size:13px;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-card .ph-acts{gap:6px}
.ph-card .ph-ib{width:40px;height:40px}
.ph-card .ph-cbtn{height:40px;gap:6px;font-size:13px !important;padding:0 8px !important}
.ph-card .ph-cbtn svg{width:15px;height:15px}
.ph-card--run .ph-card__pic{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;background:var(--bk-bg)}
.ph-card--run .ph-sil{inset:14% 28% 10%}
.ph-dots{display:flex;justify-content:center;gap:4px;margin-top:6px}
.ph-dots button{width:28px;height:24px;padding:0 !important;border:0 !important;background:none !important;cursor:pointer;position:relative}
.ph-dots button::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:999px;background:var(--bk-line);transition:width .2s,margin .2s,background .2s}
.ph-dots button[aria-pressed="true"]::after{width:22px;margin-left:-11px;background:var(--bk-red)}
.ph-acc{margin-top:26px;padding:0 var(--g)}
.ph-acc .ph-h2{margin-bottom:12px}
.ph-acc__i{margin-top:8px;border-radius:16px;background:var(--bk-card);border:1px solid var(--bk-line);overflow:hidden}
.ph-acc__h{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:0 14px !important;border:0 !important;background:none !important;color:var(--bk-text) !important;text-align:left;cursor:pointer}
.ph-acc__h b{font-size:15px;font-weight:800}
.ph-acc__h span{flex:1;min-width:0;font-size:13px;color:var(--bk-muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-acc__h svg{width:17px;height:17px;color:var(--bk-muted);transform:rotate(90deg);transition:transform .2s}
.ph-acc__i.is-open .ph-acc__h svg{transform:rotate(-90deg);color:var(--bk-red)}
.ph-acc__b{padding:4px 14px 16px}

/* ================= C SPOTLIGHT ================= */
.ph-spot{padding:12px;border-radius:22px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-spot__pic{position:relative;display:block;width:100%;height:min(44vh,360px);padding:0 !important;border:0 !important;border-radius:16px !important;background:var(--bk-bg) !important;overflow:hidden;cursor:pointer}
.ph-spot__pic canvas{display:block;width:100%;height:100%}
.ph-spot__tap{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
.ph-spot__tap svg{width:14px;height:14px}
.ph-spot__b{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.ph-spot__b b{font:800 21px/1.2 Poppins,sans-serif}
.ph-spot__b span{font-size:13.5px;color:var(--bk-muted)}
.ph-spot--run .ph-spot__pic{position:relative}
.ph-spot--run .ph-sil{inset:14% 30% 10%}
.ph-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.ph-spot .ph-thumb{aspect-ratio:1/1.05}
.ph-thumb{position:relative;display:block;aspect-ratio:4/5;padding:0 !important;border-radius:14px !important;border:2px solid var(--bk-line) !important;background:var(--bk-card) !important;overflow:hidden;cursor:pointer}
.ph-thumb canvas{display:block;width:100%;height:100%}
.ph-thumb.is-on{border-color:var(--bk-red) !important}
.ph-thumb--run .ph-sil{inset:12% 26% 8%}

/* ================= D FEED ================= */
.ph-comp{margin:14px var(--g) 0;padding:14px;border-radius:20px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-comp .ph-seg{margin:0 0 14px;background:var(--bk-bg)}
.ph-comp__r{margin-top:12px}
.ph-comp__r:first-of-type{margin-top:0}
.ph-comp__r > em{display:block;margin:0 0 8px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--bk-muted)}
.ph-comp .ph-cols .dg-sws{gap:8px}
.ph-pills{display:flex;gap:8px;overflow-x:auto;margin:0 -14px;padding:0 14px 2px;scrollbar-width:none}
.ph-pills::-webkit-scrollbar{display:none}
.ph-pp{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px 0 9px !important;border-radius:999px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:800 !important;white-space:nowrap;cursor:pointer}
.ph-pp > span{display:flex;width:30px;height:16px;border-radius:5px;overflow:hidden}
.ph-pp > span i{flex:1;background:var(--c)}
.ph-pp > svg{width:16px;height:16px;color:var(--bk-red)}
.ph-pp[aria-pressed="true"],.ph-pp.is-on{border-color:rgba(214,56,55,.7) !important;background:rgba(214,56,55,.12) !important}
.ph-comp__more{margin-top:14px}
.ph-comp .ph-gen{margin-top:14px !important}
.ph-feed{margin-top:26px;padding:0 var(--g)}
.ph-feed__h{margin:0 0 12px}
.ph-post{margin-bottom:16px;padding:12px;border-radius:20px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-post__h{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.ph-post__h > div{flex:1;display:flex;flex-direction:column;min-width:0}
.ph-post__h b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-post__h span{font-size:12.5px;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-post__av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:rgba(214,56,55,.12);color:var(--bk-red)}
.ph-post__av svg{width:17px;height:17px}
.ph-post--old .ph-post__av{background:var(--bk-bg);color:var(--bk-muted)}
.ph-post__f{display:flex;gap:8px;margin-top:12px}
.ph-post .ph-drop,.ph-post .ph-ready{border:0;padding:6px}

/* ================= E DECK ================= */
.ph-deck{position:relative;height:min(100vw,400px);margin:6px 0 0}
.ph-dk{position:absolute;inset:0 0 0 0;display:flex;flex-direction:column;padding:12px;border-radius:22px;background:var(--bk-card);border:1px solid var(--bk-line);box-shadow:0 14px 34px rgba(0,0,0,.28);transform:translateY(calc(var(--z) * 12px)) scale(calc(1 - var(--z) * .045));transform-origin:50% 100%;z-index:calc(10 - var(--z));touch-action:pan-y;user-select:none;-webkit-user-select:none;box-sizing:border-box}
.ph-dk:not(.is-top){pointer-events:none}
.ph-dk.is-top{cursor:grab}
.ph-dk.is-in{animation:phDeckIn .5s cubic-bezier(.2,1.25,.4,1) both}
@keyframes phDeckIn{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
.ph-dk__pic{flex:1;min-height:0;position:relative;border-radius:16px;background:var(--bk-bg);overflow:hidden}
.ph-dk__pic canvas{display:block;width:100%;height:100%;pointer-events:none}
.ph-dk__b{display:flex;flex-direction:column;gap:2px;padding:12px 4px 2px}
.ph-dk__b b{font:800 21px/1.2 Poppins,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-dk__b span{font-size:13.5px;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-dk__st{position:absolute;top:26px;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:12px;font-style:normal;font-size:18px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;opacity:0;pointer-events:none}
.ph-dk__st svg{width:18px;height:18px}
.ph-dk__st.is-keep{left:24px;color:#6fcf86;border:3px solid #6fcf86;transform:rotate(-10deg);opacity:var(--kp,0)}
.ph-dk__st.is-keep svg{fill:currentColor}
.ph-dk__st.is-pass{right:24px;color:var(--bk-red);border:3px solid var(--bk-red);transform:rotate(10deg);opacity:var(--ps,0)}
.ph-dk--run .ph-sil{inset:12% 30% 10%}
.ph-dkacts{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.ph-dkb{display:grid;place-items:center;width:60px;height:60px;padding:0 !important;border-radius:50% !important;border:1px solid var(--bk-line) !important;background:var(--bk-card) !important;color:var(--bk-text) !important;box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:pointer}
.ph-dkb svg{width:24px;height:24px}
.ph-dkb.is-pass{color:var(--bk-red) !important}
.ph-dkb.is-keep{width:68px;height:68px;color:#fff !important;background:var(--bk-red) !important;border-color:var(--bk-red) !important}
.ph-dkb.is-keep svg{fill:currentColor}
.ph-dkb.is-info{width:50px;height:50px}
.ph-dkb.is-info svg{width:20px;height:20px}
.ph-dkhint{display:flex;justify-content:center;gap:8px;margin:12px 0 0;font-size:12.5px;color:var(--bk-muted)}
.ph-dkhint b{color:var(--bk-text);font-weight:800}
.ph-dkdone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;border-radius:22px;background:var(--bk-card);border:1px solid var(--bk-line);text-align:center}
.ph-dkdone > b{font:800 22px/1.2 Poppins,sans-serif}
.ph-dkdone p{margin:0;font-size:13.5px;color:var(--bk-muted)}
.ph-dkdone__r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin:10px 0 4px}
.ph-tile.is-small > b{font-size:11.5px}
/* the dock that slides up (E): Customize, what the next four use, the button */
.ph--e{padding-bottom:110px}
.ph-edock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:column;max-height:84vh;max-height:84dvh;border-radius:22px 22px 0 0;background:var(--bk-card);border:1px solid var(--bk-line);border-bottom:0;box-shadow:0 -14px 40px rgba(0,0,0,.35)}
.ph-edock__h{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:20px 16px 6px !important;border:0 !important;background:none !important;color:var(--bk-text) !important;text-align:left;cursor:pointer;flex:none}
.ph-edock__grab{position:absolute;left:50%;top:7px;z-index:1;width:44px;height:5px;margin-left:-22px;border-radius:999px;background:var(--bk-line);pointer-events:none}
.ph-edock__row{display:flex;align-items:center;gap:8px;padding:18px 12px calc(10px + env(safe-area-inset-bottom))}
.ph-edock__c{flex:0 0 44%;display:flex;align-items:center;gap:9px;min-width:0;height:54px;padding:0 12px !important;border-radius:14px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;text-align:left;cursor:pointer;box-sizing:border-box}
.ph-edock__c > svg{width:18px;height:18px;color:var(--bk-red)}
.ph-edock__c span{display:flex;flex-direction:column;min-width:0}
.ph-edock__c b{font-size:14.5px;font-weight:800}
.ph-edock__c em{font-style:normal;font-size:11.5px;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-edock__row .ph-gen{flex:1;min-width:0;font-size:15px !important}
.ph-edock__h span{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.ph-edock__h b{font-size:15px;font-weight:800}
.ph-edock__h em{font-style:normal;font-size:12.5px;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-edock__h > svg{width:20px;height:20px;color:var(--bk-muted);transition:transform .25s}
.ph-edock.is-open .ph-edock__h > svg{transform:rotate(180deg)}
.ph-edock__b{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 8px;scrollbar-width:none;overscroll-behavior:contain}
.ph-edock__b::-webkit-scrollbar{display:none}
.ph-edock__go{flex:none;padding:8px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bk-line)}
.ph-edock:not(.is-open) .ph-edock__go{border-top:0;padding-top:4px}
.ph-edock__go .ph-uses{margin:0 0 10px}
.ph-edock:not(.is-open) .ph-edock__go .ph-uses{display:none}

/* ================= THE SITE'S POPUPS ON A PHONE: the whole screen, sliding up (no dim, nothing outside to tap) ================= */
.is-ph .bisk-dlg{padding:0 !important;align-items:stretch !important}
.is-ph .bisk-dlg__dim{background:transparent !important}
.is-ph .bisk-dlg__box{width:100% !important;max-width:none !important;height:100%;max-height:none !important;border-radius:0 !important;border:0 !important;transform:translateY(30px)}
.is-ph .bisk-dlg.is-on .bisk-dlg__box{transform:none}
.is-ph .bisk-dlg__head{position:sticky;top:0;z-index:3;background:var(--bk-card);padding-top:10px;padding-bottom:10px}
.is-ph .fx-o2--a .bisk-dlg__box{width:100% !important}
.is-ph .fx-o2a{grid-template-columns:1fr !important;gap:14px}
.is-ph .fx-o2a__l .fx-o2stage{min-height:0 !important;height:min(64vh,430px);flex:none}
.is-ph .fx-o2moves{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:0 4px}
.is-ph .fx-o2moves::-webkit-scrollbar{display:none}
.is-ph .fx-o2moves button{flex:none;height:38px;padding:0 16px !important}
.is-ph .fx-o2acts .bisk-btn{height:48px;padding:0 10px !important}
.is-ph .fx-o2tabs button{padding:10px 4px !important;font-size:13px !important;gap:5px}
.is-ph .fx-pc3s{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.is-ph .fx-pc3__eye{width:30px;height:30px}
.is-ph .fx-pc3__eye svg{width:16px;height:16px}
.is-ph .fx-o2panes{min-height:0}
.is-ph .fx-hwd__hero{grid-template-columns:1fr !important;padding:12px !important}
.is-ph .fx-hwd__t h3{font-size:22px}
.is-ph .fx-hwd__pils{grid-template-columns:1fr !important}
.is-ph .fx-pdlg .dg-pals{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.is-ph .fx-pdlg .fx-rcps{grid-template-columns:1fr 1fr !important}
.is-ph .dg-limit__btns{flex-direction:column}
.is-ph .dg-limit__btns .bisk-btn{width:100%;justify-content:center}
.is-ph .fx-pop2{max-width:calc(100vw - 24px)}
.ph-sheet.is-light .ph-sheet__box{box-shadow:0 -10px 30px rgba(0,0,0,.14)}
.ph-comp__tog{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:40px;margin-top:10px;padding:0 !important;border:0 !important;background:none !important;color:var(--bk-red) !important;font-size:13.5px !important;font-weight:800 !important;cursor:pointer}
.ph-comp__tog svg{width:15px;height:15px;transform:rotate(90deg);transition:transform .2s}
.ph-comp__tog[aria-expanded="true"] svg{transform:rotate(-90deg)}
.ph-comp .ph-uses{margin-top:6px}
/* C: Customize in the page, the main choices shown, More options for the rest */
.ph-ci{margin-top:16px;padding:14px;border-radius:20px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-ci__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.ph-ci__h > b{display:inline-flex;align-items:center;gap:8px;font:800 17px/1.2 Poppins,sans-serif}
.ph-ci__h > b svg{width:18px;height:18px;color:var(--bk-red)}
.ph-ci__r{margin-top:14px}
.ph-ci__h + .ph-ci__r{margin-top:0}
.ph-ci__r > em{display:block;margin:0 0 9px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--bk-muted)}
.ph-ci .ph-pills{margin:0 -14px;padding:0 14px 2px}
.ph-ci .ph-cols .dg-sws{gap:8px}
.ph-ci .ph-mst{margin-top:14px;background:var(--bk-bg)}
.ph-ci .ph-rcps .fx-rcp{background:var(--bk-bg) !important}
.ph-ci__fine .fx-fg{background:var(--bk-bg)}
.ph-ci__tog{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin-top:14px;padding:0 12px !important;border-radius:13px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important;cursor:pointer}
.ph-ci__tog span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-ci__tog > svg{flex:none;width:16px;height:16px;color:var(--bk-muted);transform:rotate(90deg);transition:transform .2s}
.ph-ci__tog[aria-expanded="true"] > svg{transform:rotate(-90deg);color:var(--bk-red)}
/* C: the dress-up, the spotlight while a skin is made (a still picture a step, a small pop each time) */
.ph-mk{cursor:default}
.ph-mk canvas{display:block;width:100%;height:100%}
.ph-mk.is-pop canvas{animation:phPop .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes phPop{0%{transform:scale(.965)}60%{transform:scale(1.02)}100%{transform:none}}
.ph-mk::after{content:'';position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 2px rgba(214,56,55,0);pointer-events:none}
.ph-mk.is-pop::after{animation:phRing .5s ease-out}
@keyframes phRing{0%{box-shadow:inset 0 0 0 2px rgba(214,56,55,.55)}100%{box-shadow:inset 0 0 0 2px rgba(214,56,55,0)}}
.ph-mk__chip{position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.ph-mk__b span{display:block;min-height:1.45em;font-weight:700;color:var(--bk-text) !important;opacity:.82}
.ph-mk__b b::after{content:'';display:inline-block;width:8px;height:8px;margin-left:9px;border-radius:50%;background:var(--bk-red);vertical-align:middle;animation:phBreath 1s ease-in-out infinite}
.ph-mk__bar{height:5px;margin-top:12px;border-radius:999px;background:var(--bk-line);overflow:hidden}
.ph-mk__bar b{display:block;width:8%;height:100%;border-radius:999px;background:var(--bk-red);transition:width .3s ease-out}
.ph-mkt{position:relative}
.ph-mkt canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.ph-mkt.is-got .ph-sil{display:none}
.ph-mkt.is-got canvas{opacity:1;animation:phIn .42s cubic-bezier(.2,1.25,.4,1) both}
.ph-mkt.is-got{border-color:var(--bk-line) !important}
/* ---- C, round 3 (his notes): colours in one row, palette tiles, More ways to steer it, each generation a card ---- */
.ph-cols--row .dg-sws{display:flex !important;flex-wrap:nowrap;gap:9px !important;overflow-x:auto;margin:-4px -14px -2px !important;padding:6px 14px;scroll-padding:0 14px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent)}
.ph-cols--row .dg-sws::-webkit-scrollbar{display:none}
.ph-cols--row .dg-sw{flex:0 0 36px;width:36px !important;height:36px !important;aspect-ratio:auto}
.ph-ptr{display:flex;gap:10px;overflow-x:auto;margin:-4px -14px -2px;padding:6px 14px;scroll-snap-type:x proximity;scroll-padding:0 14px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent)}
.ph-ptr::-webkit-scrollbar{display:none}
.ph-pt{flex:0 0 66px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 !important;border:0 !important;background:none !important;color:var(--bk-muted) !important;scroll-snap-align:start;cursor:pointer}
.ph-pt__s{display:flex;width:66px;height:54px;border-radius:15px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(127,127,127,.28);transition:box-shadow .15s}
.ph-pt__s i{flex:1;background:var(--c)}
.ph-pt b{max-width:100%;font-size:11.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-pt[aria-pressed="true"] .ph-pt__s{box-shadow:0 0 0 2px var(--bk-card),0 0 0 4px var(--bk-red)}
.ph-pt[aria-pressed="true"] b{color:var(--bk-text)}
.ph-pt--own .ph-pt__s,.ph-pt--all .ph-pt__s{display:grid;place-items:center;background:var(--bk-bg);box-shadow:none;border:1px dashed var(--bk-muted);box-sizing:border-box;color:var(--bk-text)}
.ph-pt--all .ph-pt__s{border-style:solid;border-color:var(--bk-line)}
.ph-pt__s svg{width:18px;height:18px}
/* More ways to steer it: chips; the one tapped opens under them */
.ph-fxr{display:flex;gap:8px;overflow-x:auto;margin:-4px -14px -2px;padding:6px 14px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent)}
.ph-fxr::-webkit-scrollbar{display:none}
.ph-fx{flex:none;position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 12px !important;border-radius:12px !important;border:1px solid var(--bk-line) !important;background:var(--bk-bg) !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important;cursor:pointer}
.ph-fx svg{width:16px;height:16px;color:var(--bk-muted)}
.ph-fx b{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bk-red);color:#fff;font-size:11px;line-height:18px;text-align:center;box-sizing:border-box}
.ph-fx.is-on{border-color:rgba(214,56,55,.6) !important;background:rgba(214,56,55,.1) !important}
.ph-fx.is-on svg{color:var(--bk-red)}
.ph-fxp{margin-top:12px;padding:12px;border-radius:16px;background:var(--bk-bg);border:1px solid var(--bk-line);animation:phFold .22s ease-out}
@keyframes phFold{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ph-ftg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ph-ftg .fx-tile2{min-height:72px;padding:10px 6px !important;border-radius:13px !important;background:var(--bk-card) !important;font-size:12.5px !important;gap:6px}
.ph-ftg .fx-tile2 svg{width:20px;height:20px}
.ph-ftg .fx-tile2[aria-pressed="true"]{border-color:rgba(214,56,55,.6) !important;background:rgba(214,56,55,.1) !important;color:var(--bk-text) !important}
.ph-ftg--sheet .fx-tile2{background:var(--bk-bg) !important}
.ph-seg--fine{margin:0 0 10px;padding:3px;background:var(--bk-card)}
.ph-seg--fine button{height:38px;font-size:13px !important}
.ph-seg--fine button.is-soon{opacity:.45}
.ph-seg--fine button.is-soon.is-try{opacity:.8}
.ph-fmore{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;margin-top:12px;padding:0 12px !important;border-radius:13px !important;border:1px dashed var(--bk-line) !important;background:none !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important;cursor:pointer}
.ph-fmore > svg:first-child{width:16px;height:16px;color:var(--bk-red)}
.ph-fmore span{flex:1;text-align:left}
.ph-fmore b{padding:2px 8px;border-radius:999px;font-size:11px;color:var(--bk-red);background:rgba(214,56,55,.12)}
.ph-fmore > svg:last-child{width:15px;height:15px;color:var(--bk-muted)}
.ph-soonnote{display:flex;align-items:flex-start;gap:8px;margin:0 0 10px;padding:9px 11px;border-radius:12px;font-size:12.5px;line-height:1.45;color:#f2c230;background:rgba(242,194,48,.08);border:1px solid rgba(242,194,48,.3)}
.ph-soonnote svg{flex:none;width:14px;height:14px;margin-top:2px}
body:not(.bi-dark) .ph-soonnote{color:#9a6f00;background:rgba(242,194,48,.12);border-color:rgba(184,134,11,.4)}
.ph-fnote{margin:10px 0 0;font-size:12.5px;color:var(--bk-muted)}
.ph-sty + .ph-sty{margin-top:10px}
.ph-sty > em{display:block;margin:0 0 6px;font-style:normal;font-size:12px;font-weight:800;color:var(--bk-muted)}
.ph-sty .ph-seg--fine{margin:0}
.ph-fxp .ph-rcps .fx-rcp{background:var(--bk-card) !important}
/* Your skins: each generation its own card */
.ph-hist{gap:12px}
.ph-hg{padding:12px;border-radius:18px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-hg__h{align-items:flex-start;margin:0 0 10px}
.ph-hg__t{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.ph-hg__t b{font-size:15px}
.ph-hg__t span{font-size:12.5px;color:var(--bk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-hg__h .fx-gen__pal{margin:3px 0 0}
.ph-hg__s{background:var(--bk-bg) !important;box-shadow:none !important}
.ph-hg__f{display:flex;justify-content:space-between;gap:10px;margin:10px 2px 0;font-size:12px;font-weight:700;color:var(--bk-muted)}
/* recipes like the palettes: the icon on the recipe's colours (a shade over them so a light palette keeps it readable) */
.ph-rt{flex-basis:76px}
.ph-rt .ph-pt__s{display:grid;place-items:center;width:76px;height:58px;background:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.16)),linear-gradient(135deg,var(--c1) 0%,var(--c2) 55%,var(--c3) 100%);color:#fff}
.ph-rt .ph-pt__s svg{width:25px;height:25px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.ph-rt b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em;white-space:normal;line-height:1.25;text-align:center}
.ph-rt.ph-pt--all .ph-pt__s{background:var(--bk-bg);color:var(--bk-text)}
.ph-rt.ph-pt--all .ph-pt__s svg{filter:none;width:18px;height:18px}
/* the finer kinds: a tile of the grid (the site's button rule beat a bar's margin: it ran into the tile above) */
.ph-fmore--cell{min-height:72px !important;margin:0 !important;padding:0 12px !important;border-radius:13px !important;box-sizing:border-box}
.ph-fmore--cell span{font-size:13px;line-height:1.3}
.ph-fmore{margin-top:12px !important}
.ph-fmore.ph-fmore--cell{margin-top:0 !important}
.ph-comp__tog{margin-top:10px !important}
/* the free count: a little line of ten (his note 2026-10-11), lit for the ones left, gold when few are left */
.ph-q__pips{display:inline-grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;flex:none;width:118px}
.ph-q__pips i{height:4px;border-radius:2px;background:rgba(127,127,127,.3)}
.ph-q__pips i.on{background:var(--bk-red)}
.ph-q.is-low .ph-q__pips i.on{background:#f2c230}
/* All palettes on a phone: four a row so the names show in full (his note 2026-10-11) */
.is-ph .fx-pd__grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.is-ph .fx-pd__p b{white-space:normal;line-height:1.25;font-size:12px}
/* no free generations left: a popup on a phone, not a full screen (his note 2026-10-11); nothing dims the page behind it
   (no mobile overlay, ever): a strong shadow says it floats; the line of ten stays, its words would repeat the title */
.is-ph .bisk-dlg.fx-outdlg{align-items:center !important;justify-content:center !important;padding:16px !important}
.is-ph .bisk-dlg.fx-outdlg .bisk-dlg__box{width:100% !important;max-width:380px !important;height:auto;max-height:calc(100% - 32px) !important;border-radius:20px !important;border:1px solid var(--bk-line) !important;box-shadow:0 24px 70px rgba(0,0,0,.6),0 4px 18px rgba(0,0,0,.35) !important;transform:translateY(14px) scale(.97)}
.is-ph .bisk-dlg.fx-outdlg.is-on .bisk-dlg__box{transform:none}
.is-ph .fx-outdlg .fx-q__t,.is-ph .fx-outdlg .fx-q__pro{display:none !important}
.is-ph .fx-outdlg .fx-q{padding:0;border:0;background:none}
/* Colour strength on a phone ("fucked ui found in remix my skin"): a dot at each of the five stops (under the thumb when
   picked; a tap on the track lands on the nearest), the two ends named, the one picked said at the top */
.ph-mst__t{position:relative}
.ph-mst__dots{position:absolute;left:14px;right:14px;top:50%;height:0;pointer-events:none}
.ph-mst__dots i{position:absolute;top:-2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff;opacity:.75}
.ph-mst__dots i:nth-child(2){left:25%}
.ph-mst__dots i:nth-child(3){left:50%}
.ph-mst__dots i:nth-child(4){left:75%}
.ph-mst__dots i:nth-child(5){left:100%}
body:not(.bi-dark) .ph-mst__dots i{background:#8a8f99;opacity:.6}
.ph-mst__ends{display:flex;justify-content:space-between;margin-top:8px}
.ph-mst__ends button{padding:4px 0 !important;border:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:12px !important;font-weight:800 !important;cursor:pointer}
.ph-mst__ends button[aria-pressed="true"]{color:var(--bk-red) !important}
/* C: the Generate card under the four, the desktop's way (his note 2026-10-11): what it uses, the button, the count */
.ph-go{display:flex;flex-direction:column;gap:12px;margin-top:12px;padding:14px;border-radius:20px;background:var(--bk-card);border:1px solid var(--bk-line)}
.ph-go .ph-uses{margin:0}
.ph-go .ph-uses .fx-uses__any,.ph-go .ph-uses .fx-use2{background:var(--bk-bg)}
.ph-go .ph-q{margin:0}
/* the bar at the bottom: only once the Generate card is out of sight */
.ph-dock--auto{transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.ph-dock--auto.is-on{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){.ph-dock--auto,.ph-dock--auto.is-on{transition:none}}
/* (two even lines, no word left alone) */
.ph-go .fx-uses__any > span{text-wrap:balance}
/* recipes not on yet (his note 2026-10-11): their Soon tag on the tile, quieter */
.ph-rt .ph-pt__s{position:relative}
.ph-rt .fx-soon{top:5px;right:5px;font-size:9px}
.ph-rt.is-soon:not(.is-try) .ph-pt__s > svg,.ph-rt.is-soon:not(.is-try) b{opacity:.5}

/* ---- THE SKIN GENERATOR ON THE SITE (build_site.py puts this last in bisk-skingen.css): the page sits in the site's
   theme, under its header, in the skins pages' frame (inc/skingen.php) ---- */
.bisk-gen .dg{min-height:0;padding:0 0 24px;background:none}
/* (as wide as the skins pages' frame, edge to edge with the breadcrumb and the early access note: his "fix the width of the skin gen, so it fits the side") */
.bisk-gen .dg-frame{width:auto;max-width:none}
.bisk-gen .dg > .dg-frame:first-child{margin-top:0}
.bisk-gen__wait{padding:8px 0 48px}
.bisk-gen__wait .bisk-h1{margin:0 0 10px}
.bisk-gen__wait .bisk-lead{margin:0 0 14px;max-width:62ch}
.bisk-gen .bisk-gen__load{margin:0;font-size:14px;font-weight:700;color:var(--bk-muted)}
/* a phone: the bar at the thumb and the sheets stay over the ad network's bottom bar */
html.bk-adbar.is-ph .ph-dock{bottom:var(--bk-adbar)}
html.bk-adbar.is-ph .ph-sheet__box{padding-bottom:calc(14px + var(--bk-adbar))}
/* (the bar at the thumb never covers the end of the page: the site's footer gets room under it) */
html.is-ph body{padding-bottom:calc(118px + env(safe-area-inset-bottom)) !important}
html.is-ph.bk-adbar body{padding-bottom:calc(118px + var(--bk-adbar)) !important}
/* (the shortcode typed in a paragraph block: the theme's empty paragraphs around the generator take no room) */
.entry-content > p:empty:has(+ .bisk-gen),.entry-content > .bisk-gen + p:empty{display:none}