/* The Studio (/studio/, web/studio/studio.js): the whole page is the stage, the build in 3D, and everything floats over
   it: My space and the materials (top left), the step or the layer (top middle, arrows on the sides), the tools (down the
   right side, each with its card), the main action (bottom), the editor's tools and its bar of blocks. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.studio{--sglass:#141418e8;--sedge:#ffffff1c;position:relative}
.wrap.app .main:has(.studio){padding-bottom:0}
.sstage{position:relative;height:calc(100vh - 128px);height:calc(100dvh - 128px);min-height:520px;border-radius:18px;overflow:hidden;border:1px solid var(--line);
	background:radial-gradient(ellipse 80% 70% at 50% 45%,#3c3c42 0%,#232327 55%,#151517 100%);color:#fff}
.sstage:fullscreen{border-radius:0;height:100vh}
/* no text selection, copy menu or double-tap zoom on the stage (a long press is the editor's) */
.sstage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sstage input,.sstage textarea{-webkit-user-select:text;user-select:text}
.studio .sdonetop{display:none}
.sview,.sview canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.sview canvas{touch-action:none;cursor:grab}
.studio svg{width:20px;height:20px;flex:none}

/* the floating pieces: glass, rounded */
.sfloat,.spill,.sround{background:var(--sglass);border:1px solid var(--sedge);box-shadow:0 10px 30px #0008;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.spill{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:9px 16px;color:#fff;font:600 14px Inter,sans-serif;cursor:pointer;text-decoration:none}
.spill:hover,.sround:hover{border-color:#ffffff40;text-decoration:none}.spill.on,.sround.on{border-color:var(--red);box-shadow:0 0 0 3px #ff38283a,0 10px 30px #0008}
.sround{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff;cursor:pointer;position:relative;text-decoration:none}
.sround svg{width:24px;height:24px}.sround span{position:absolute;right:62px;white-space:nowrap;font:600 12.5px Inter,sans-serif;background:#000c;border-radius:8px;padding:5px 9px;opacity:0;pointer-events:none;transition:opacity .15s}
.sround:hover span{opacity:1}

/* top left: My space, the materials */
.stl{position:absolute;left:16px;top:16px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 120px)}
.stlbar{display:flex;align-items:stretch;border-radius:18px;padding:4px;max-width:100%}
.sopen,.smatb{display:inline-flex;align-items:center;gap:9px;background:none;border:0;border-radius:14px;color:#fff;font:600 14px Inter,sans-serif;cursor:pointer;padding:5px 12px 5px 5px;min-width:0}
.sopen:hover,.smatb:hover{background:#ffffff10}.sopen.on,.smatb.on{background:#ff38281f}
.smatb{position:relative;margin-left:6px;padding:5px 12px}.smatb:before{content:"";position:absolute;left:-4px;top:10px;bottom:10px;width:1px;background:var(--sedge)}
.smatb svg{color:#c9c8cc}.sopen>svg:first-child{width:34px;height:34px;padding:7px;border-radius:12px;background:#ffffff12}
.sopen span{display:flex;flex-direction:column;min-width:0;text-align:left}.sopen small{font:800 9.5px Inter,sans-serif;letter-spacing:.18em;color:var(--red2)}
.sopen b{font:500 18px var(--px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.smatb i{font:500 13px var(--px);font-style:normal;background:#ffffff1a;border-radius:999px;padding:2px 9px}
.smats{border-radius:18px;padding:0 16px 12px;width:300px;max-height:52vh;overflow:auto;overflow-x:hidden;color:var(--text)}
.smats small{font:800 10px Inter,sans-serif;letter-spacing:.16em;color:var(--muted)}
.smats ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px}
.smats li{display:flex;align-items:center;gap:9px;font-size:13px}.smats li img{width:24px;height:24px;image-rendering:pixelated}
.smats li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.smats li b{font:500 14px var(--px)}.smats li.none{color:var(--muted)}
.seye{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;opacity:.55}
.seye svg{width:16px;height:16px}.smats li:hover .seye{opacity:1}.seye:hover{background:#ffffff14;color:#fff;opacity:1}
.smats li.on .seye{opacity:1;color:#fff;background:var(--red)}

/* top middle: the step or the layer */
.snavrow{display:flex;align-items:center;gap:6px}
.snavx{width:30px;height:30px;border-radius:50%;font:600 17px/1 Inter,sans-serif;opacity:.6}.snavx:hover{opacity:1}
.studio.nobar .snav,.studio.nobar .sarrow{display:none!important}
.sswitch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--soft);margin:4px 0 8px}
.sswitch input{position:absolute;opacity:0;width:1px;height:1px}
.sswitch i{flex:none;position:relative;width:38px;height:22px;border-radius:999px;background:#ffffff26;transition:background .15s}
.sswitch i:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.sswitch input:checked+i{background:var(--red)}.sswitch input:checked+i:after{transform:translateX(16px)}
.sswitch input:focus-visible+i{box-shadow:0 0 0 3px var(--glow)}
.snav{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(440px,calc(100% - 420px))}
.smodeb{padding:10px 20px;font-size:15px}.smodeb b{font:500 21px var(--px);white-space:nowrap}.smodeb span{color:#c9c8cc;font-weight:600}
.snav small{font-size:12.5px;color:#d8d7db;text-shadow:0 1px 3px #000;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav input[type=range]{width:min(320px,100%);accent-color:var(--red);height:4px;opacity:.85}
.studio:not(.layers) #slayer,.studio.layers #sstep{display:none}
.smenu{position:absolute;top:56px;border-radius:14px;padding:6px;display:grid;min-width:200px;z-index:5}
.smenu button{all:unset;cursor:pointer;padding:9px 12px;border-radius:9px;font:600 14px Inter,sans-serif;color:#fff}
.smenu button:hover{background:#ffffff12}.smenu button.on{background:var(--red)}

/* the arrows, the tools */
.sarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:58px;height:58px}.sarrow svg{width:28px;height:28px}
.sl{left:16px}.sr{right:86px}
.sside{position:absolute;right:16px;top:16px;z-index:4;display:flex;flex-direction:column;gap:3px;padding:6px;border-radius:18px;max-height:calc(100% - 100px);overflow:visible}
.sside .sround{width:44px;height:44px;border-radius:12px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#d9d8dc}
.sside .sround svg{width:21px;height:21px}.sside .sround:hover{background:#ffffff14;color:#fff}
.sside .sround.on{background:#ff38282e;color:#ff8a80;box-shadow:none}.sside .sround span{right:58px}
.srsep{display:block;height:1px;background:var(--sedge);margin:3px 6px}
.studio:not(.open) .sside [data-tab=reskin],.studio:not(.open) .sside [data-tab=camera],.studio:not(.open) .sside [data-tab=view],.studio:not(.open) #sfull,.studio:not(.open) #sdl{opacity:.4}
/* the Film button while a cinematic plays */
.sside .sround.live:after{content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #0008}

/* the ruler's answer, under the step menu */
.srule{position:absolute;left:50%;top:120px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;border-radius:999px;padding:8px 8px 8px 18px;color:#fff;font-size:14px;white-space:nowrap;max-width:calc(100% - 200px)}
.srule span{overflow:hidden;text-overflow:ellipsis}.srule i{color:#c9c8cc;font-style:normal}.srule b{color:#7fe0a0;margin-right:8px}.srule .scardx{flex:none;width:28px;height:28px}
.studio.measuring .sview canvas{cursor:crosshair}
/* the cards of the tools */
.scard{position:absolute;right:84px;top:16px;z-index:6;width:360px;max-height:calc(100% - 32px);overflow:auto;border-radius:18px;padding:0 16px 14px;color:var(--text)}
.scard.c-space{left:16px;right:auto;top:76px;width:400px}.scard.c-help,.scard.c-share{right:84px}
.scardh{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;margin:0 -16px 8px;padding:13px 16px 10px;background:linear-gradient(var(--sglass) 75%,transparent)}
.scardh b{font:500 20px var(--px);color:#fff;flex:1}
.scardx{background:#ffffff14;border:0;color:#fff;width:30px;height:30px;border-radius:9px;font-size:20px;line-height:1;cursor:pointer}

/* nothing open: My space in the middle */
.sempty{position:absolute;inset:0;display:grid;place-items:center;padding:20px;z-index:2}
.swelcome{width:min(560px,100%);max-height:calc(100% - 40px);overflow:auto;border-radius:20px;padding:20px 22px;color:var(--text)}
.swelcome>b{display:block;font:500 30px var(--px);color:#fff}.swelcome>span{display:block;color:var(--soft);margin:2px 0 14px}
.sspaceh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:4px 0 8px}.sspaceh b{font:500 20px var(--px)}.sspaceh span{color:var(--muted);font-size:13px}.sspaceh a{margin-left:auto;font-size:12.5px;font-weight:700}
.sspacegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:10px}
.sspacecard{position:relative}.sspacecard.on .sspaceopen{border-color:var(--red)}
.sspacex{position:absolute;top:10px;right:10px;min-width:26px;height:26px;padding:0 7px;border-radius:8px;border:1px solid #ffffff30;background:#0b0b0dd9;color:#fff;font:700 15px/1 Inter,sans-serif;cursor:pointer;opacity:.85}
.sspacex:hover{opacity:1;border-color:var(--red)}.sspacex.sure{background:var(--red);border-color:var(--red);font-size:12px;opacity:1}
.sspacegrid .sspaceopen{width:100%;display:flex;flex-direction:column;gap:3px;text-align:left;background:#ffffff0d;border:1px solid var(--sedge);border-radius:12px;padding:6px;cursor:pointer;color:#fff;font:600 13px Inter,sans-serif}
.sspacegrid .sspaceopen:hover{border-color:#ffffff40}
.sspacegrid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:#ffffff0a}
.sspacegrid span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sspacegrid small{font-weight:500;font-size:11.5px;color:var(--muted)}

/* the bottom: the main action */
.sbottom{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(640px,calc(100% - 220px))}
.scta{display:flex;align-items:center;gap:10px}
.sgo{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;padding:9px 16px;font:700 14px Inter,sans-serif;color:#fff;cursor:pointer;text-decoration:none;
	background:var(--red);box-shadow:0 6px 18px #0007;transition:background .12s}
.sgo:hover{background:#ff5544;text-decoration:none}.sgo svg{width:16px;height:16px}
.scta[hidden]{display:none}
.sctax{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--sedge);background:var(--sglass);color:#c9c8cc;font:500 18px/1 Inter,sans-serif;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sctax:hover{color:#fff;border-color:#ffffff40}
.scur .sbtn{margin:10px 0 0}
.smsg{margin:0;background:var(--sglass);border:1px solid var(--sedge);border-radius:12px;padding:8px 14px;font-size:13.5px;color:#7fe0a0;text-align:center;max-width:100%}.smsg.bad{color:#ff8a80}
.shome{position:absolute;left:16px;bottom:18px;z-index:3;border-radius:50%}.shelp{position:absolute;right:16px;bottom:18px;z-index:3;border-radius:50%}

/* the editor: its tools, its bar of blocks */
.sedit{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:max-content;z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:calc(100% - 180px)}
.stoolbar,.shotbar,.sboxbar{display:flex;align-items:center;gap:4px;background:var(--sglass);border:1px solid var(--sedge);border-radius:16px;padding:6px;box-shadow:0 10px 30px #0008;backdrop-filter:blur(10px);flex-wrap:wrap;justify-content:center}
.stool{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;border:0;background:transparent;color:#e8e7ea;cursor:pointer;position:relative}
.stool:hover{background:#ffffff14}.stool.on{background:var(--red);color:#fff}
.sface b{position:absolute;right:3px;bottom:2px;font:500 11px var(--px)}
.ssep{width:1px;height:28px;background:var(--sedge);margin:0 4px}
.sdone{border:0;border-radius:11px;background:#ffffff1a;color:#fff;font:700 13px Inter,sans-serif;padding:0 14px;height:42px;cursor:pointer;margin-left:4px}.sdone:hover{background:#ffffff2a}
.smorew{position:relative}.smore{position:absolute;bottom:52px;right:0;display:grid;border-radius:12px;padding:5px;min-width:170px;z-index:5}
.smore button{all:unset;cursor:pointer;padding:9px 11px;border-radius:8px;font:600 13px Inter,sans-serif;color:#fff}.smore button:hover{background:#ffffff14}
.shotbar{gap:3px;padding:5px;border-radius:12px;background:#0d0d10ee}
.sslot{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:8px;border:2px solid #ffffff24;background:#ffffff0a;cursor:pointer;padding:0}
.sslot canvas{width:34px;height:36px;image-rendering:pixelated}.sslot i{position:absolute;left:4px;top:2px;font:500 11px var(--px);font-style:normal;color:#ffffffa0}
.sslot.on{border-color:#fff;box-shadow:0 0 0 2px var(--red)}.sslot:hover{border-color:#ffffff70}.sall{color:#fff;border-style:dashed}
.shint{margin:0;font-size:12.5px;color:#d8d7db;text-shadow:0 1px 3px #000;text-align:center}.shint b{color:#fff}
.sboxbar span{font:500 14px var(--px);padding:0 8px}.sboxbar button{border:0;border-radius:10px;background:#ffffff14;color:#fff;font:600 13px Inter,sans-serif;padding:9px 13px;cursor:pointer}
.sboxbar button:first-of-type{background:var(--red)}
.studio.editing .sarrow{display:none}

/* every block */
.spicker{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#0008;padding:20px}
.spickbox{width:min(720px,100%);height:min(560px,100%);display:flex;flex-direction:column;border-radius:20px;padding:0 16px 10px;color:var(--text)}
.spickbox .scardh input{flex:1;background:#ffffff12;border:1px solid var(--sedge);border-radius:10px;color:#fff;padding:9px 12px;font:14px Inter,sans-serif}
.spickgrid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;align-content:start}
.spickgrid button{display:flex;flex-direction:column;align-items:center;gap:4px;background:#ffffff0a;border:1px solid transparent;border-radius:10px;padding:8px 4px;cursor:pointer;color:#d8d7db}
.spickgrid button:hover{border-color:#ffffff40;background:#ffffff14}.spickgrid button.on{border-color:var(--red)}
.spickgrid canvas{width:34px;height:36px;image-rendering:pixelated}.spickgrid span{font-size:10.5px;line-height:1.2;text-align:center;word-break:break-word}

/* the busy box */
.sbusy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0b0b0d99;z-index:9}
.sbusy>div{background:#141416;border:1px solid #ffffff1f;border-radius:14px;padding:16px 18px;min-width:260px;color:#fff}
.sbusy b{display:block;font:500 17px var(--px);margin-bottom:10px}
.sbar{height:8px;border-radius:9px;background:#ffffff1a;overflow:hidden;margin-bottom:10px}.sbar i{display:block;height:100%;width:0;background:var(--red);transition:width .2s}
.sbusy button{font:600 12.5px Inter,sans-serif;color:#fff;background:#ffffff14;border:1px solid #ffffff22;border-radius:9px;padding:7px 11px;cursor:pointer}

/* inside the cards */
.sbody h3{margin:16px 0 6px;font:800 11px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sbody h3:first-child{margin-top:4px}
.snote{color:var(--muted);font-size:13px;line-height:1.45;margin:4px 0 8px}.snote.bad{color:var(--red2)}
.slock{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--soft);background:#ffffff0a;border:1px dashed var(--sedge);border-radius:10px;padding:8px 10px;margin:6px 0 10px}
.slock a{font-weight:700}
.scrown{width:13px;height:13px;fill:#ffc23d;flex:none;margin-right:5px;vertical-align:-1px}
.sbtn{display:inline-flex;align-items:center;justify-content:center;font:600 13px Inter,sans-serif;color:#fff;background:var(--red);border:1px solid var(--red);border-radius:10px;padding:9px 13px;cursor:pointer;margin:2px 6px 6px 0;text-decoration:none}
.sbtn:hover{text-decoration:none}.sbtn.ghost{background:#ffffff0d;color:var(--text);border-color:var(--sedge)}.sbtn.on{box-shadow:0 0 0 3px var(--glow)}
.sbtn:disabled,.schips button:disabled,.smoves button:disabled{opacity:.45;cursor:not-allowed}
.scur{background:#ffffff0a;border:1px solid var(--sedge);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.scur small{display:block;font-size:10.5px;letter-spacing:.18em;color:var(--red2);font-weight:700}.scur b{display:block;font:500 20px var(--px)}
.scur span{display:block;font-size:12.5px;color:var(--muted)}.scur a{font-size:12.5px;font-weight:600}
.sfile{position:relative;overflow:hidden}.sfile input{position:absolute;opacity:0;width:1px;height:1px}
.sfile:focus-within{box-shadow:0 0 0 3px var(--glow)}
.srange{display:grid;grid-template-columns:52px 1fr 38px;align-items:center;gap:8px;font-size:12.5px;color:var(--soft);margin:4px 0}
.srange input{accent-color:var(--red)}.srange b{font-family:var(--px);font-weight:500;text-align:right}
.sout{font-size:13px;color:var(--text);min-height:1em;margin:4px 0}
.schips{display:flex;flex-wrap:wrap;gap:5px}
.schips button{font:600 12.5px Inter,sans-serif;color:var(--soft);background:#ffffff0d;border:1px solid var(--sedge);border-radius:999px;padding:7px 12px;cursor:pointer}
.schips button.on{background:var(--red);border-color:var(--red);color:#fff}
.smoves{display:grid;gap:5px}
.smoves button{display:flex;flex-direction:column;gap:2px;text-align:left;background:#ffffff0a;border:1px solid var(--sedge);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--text)}
.smoves button.on{border-color:var(--red);box-shadow:0 0 0 2px var(--glow)}.smoves b{font-size:13px;display:flex;align-items:center}.smoves span{font-size:12px;color:var(--muted)}
.skeys{margin:4px 0 8px;padding-left:20px;font-size:13px}.skeys li{margin:2px 0}
.skeys button{margin-left:8px;background:none;border:0;color:var(--red2);cursor:pointer;font-size:15px}
.srow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:4px 0 6px}
.srow label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted);font-weight:600}
.srow select,.sblocks input{background:#ffffff0d;border:1px solid var(--sedge);border-radius:8px;color:var(--text);padding:7px 8px;font:13px Inter,sans-serif}
.srow label.scheck{flex-direction:row;align-items:center;gap:6px;font-size:13px;color:var(--soft);padding-bottom:8px}
.srow .sbtn{margin:0}
/* the checks: the build's health, the filter, a line per check (opens on its findings) */
.shealth{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#ffffff08;border:1px solid var(--sedge);border-radius:14px;padding:12px;margin:2px 0 10px}
.sring{flex:none;position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p) * 1%),#ffffff1a 0)}
.sring:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#17171b}
.sring b,.sring svg{position:relative}.sring b{font:500 21px var(--px);color:#fff}.sring.idle{background:#ffffff14}.sring.idle svg{color:var(--muted)}
.shealtht{flex:1;min-width:120px;display:grid;gap:1px}.shealtht b{font-size:15px;color:#fff}.shealtht span{font-size:12.5px;color:var(--muted);line-height:1.4}
.shealtht .e{color:#ff8a80;font-weight:600}.shealtht i{font-style:normal}.shealtht .w{color:#ffd27a}.shealtht .o{color:#7fe0a0}
.shealthb{display:flex;flex-wrap:wrap;gap:6px;width:100%}.shealthb .sbtn{margin:0;white-space:nowrap}
.sfilter{margin:0 0 2px}.sfilter b{font-family:var(--px);font-weight:500;margin-left:3px}
.schecks h3{margin:14px 0 2px}
.scrow{border:1px solid var(--sedge);border-radius:11px;background:#ffffff08;margin-top:6px}
.scrow.error{border-color:#ff4b4b66;background:#ff4b4b12}.scrow.warn{border-color:#ffc23d4d}
.scrowh,.spassed{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;font-size:13.5px;border-radius:11px}
.scrowh:focus-visible,.spassed:focus-visible{outline:2px solid var(--red)}
.scrowh b{flex:1;min-width:0;font-weight:600;color:var(--text)}.scrowh svg,.spassed svg,.slocked svg{width:18px;height:18px}
.scrowh>svg:last-child{width:15px;height:15px;color:var(--muted);transition:transform .15s}.scrow.open .scrowh>svg:last-child{transform:rotate(180deg)}
.scrow.error .scrowh>svg:first-child{color:#ff6b5e}.scrow.warn .scrowh>svg:first-child{color:#ffd27a}.scrow.ok .scrowh>svg:first-child{color:#3ec46d}.scrow.idle .scrowh>svg:first-child{color:var(--muted)}
.scrowb{padding:0 11px 10px}.scrowb p{margin:0 0 7px;font-size:12px;color:var(--muted)}
.scrowb ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.scrowb li button{width:100%;display:flex;align-items:center;gap:8px;text-align:left;background:#ffffff08;border:1px solid var(--sedge);border-left:3px solid #ffc23d;border-radius:8px;padding:7px 8px;font:12.5px Inter,sans-serif;color:var(--text);cursor:pointer}
.scrowb li button:hover{border-color:#ffffff40}.scrowb li button.on{border-color:#fff;background:#ffffff16}.scrowb li button:disabled{cursor:default}
.scrowb li button.error{border-left-color:#ff3b4a}.scrowb li button.info{border-left-color:#5aa9ff}
.scrowb li button span{flex:1;min-width:0}
.scrowb li button i{flex:none;display:inline-flex;align-items:center;gap:4px;font:700 11px Inter,sans-serif;font-style:normal;color:var(--soft);border:1px solid var(--sedge);border-radius:6px;padding:3px 6px}.scrowb li button i svg{width:13px;height:13px}
.scrowb li.more{font-size:12px;color:var(--muted)}.scrowb li.more button{all:unset;color:var(--red2);font-weight:600;cursor:pointer}
.scrowb .sbtn{margin:8px 0 0}
.spassed{color:#3ec46d;margin-top:6px}.spassed b{flex:1;font-weight:600;color:var(--soft)}.spassed svg:last-child{width:15px;height:15px;color:var(--muted)}
.slocked{display:flex;align-items:center;gap:9px;padding:9px 11px;text-decoration:none;color:var(--text);border-style:dashed;margin-top:12px}.slocked:hover{text-decoration:none;border-color:#ffc23d80}
.slocked span{flex:1;display:grid;gap:1px}.slocked b{font-size:13.5px}.slocked small{font-size:11.5px;color:var(--muted)}.slocked .scrown{width:16px;height:16px;margin:0}.slocked svg:last-child{width:15px;height:15px;color:var(--muted)}
.sn.error{color:#ff8a80}.sn.warn{color:#ffd27a}.snote.sgood{color:#7fe0a0;margin-top:10px}
/* the finding bar, above the main action: finding k of n, back, next */
.sfnav{display:flex;align-items:center;gap:6px;border-radius:14px;padding:6px 6px 6px 12px;max-width:100%;font-size:13px;color:#fff}
.sfnav>svg{width:18px;height:18px}.sfnav.error>svg{color:#ff6b5e}.sfnav.warn>svg,.sfnav.info>svg{color:#ffd27a}
.sfnav span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:4px}.sfnav span b{font:500 14px var(--px);margin-right:9px}
.sfnav .scardx{flex:none;display:grid;place-items:center}.sfnav .scardx svg{width:16px;height:16px}
.sblocks{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sblocks li{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:9px;background:#ffffff0a}
.sblocks img{width:28px;height:28px;image-rendering:pixelated;flex:none}.sblocks div{flex:1;min-width:0;display:grid;gap:3px}
.sblocks b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sblocks small{font-size:11px;color:var(--muted)}
.sblocks input{width:100%;padding:5px 7px;font-size:12px}
.sform{display:grid;gap:8px}
.sform label{display:grid;gap:4px;font-size:12px;color:var(--muted);font-weight:600}
.sform input:not([type=checkbox]),.sform textarea{background:#ffffff0d;border:1px solid var(--sedge);border-radius:8px;color:var(--text);padding:8px;font:13px Inter,sans-serif}
.sform label.scheck{display:flex;gap:8px;align-items:flex-start;font-weight:500;color:var(--soft);line-height:1.4}
.shelpl{margin:0;padding-left:18px;display:grid;gap:8px;font-size:13px;color:var(--soft)}.shelpl b{color:#fff}

/* phones: the tools in a row at the top right, the cards from the bottom */
@media (max-width:820px){
	.sstage{height:calc(100vh - 118px);height:calc(100dvh - 118px);min-height:420px;border-radius:12px}
	.stl{left:10px;top:10px;max-width:calc(100% - 20px)}.sopen b{max-width:150px;font-size:15px}.smatb b{display:none}.smats{width:min(300px,calc(100vw - 40px))}
	.snav{top:72px;width:calc(100% - 20px)}.smodeb{padding:8px 16px}.smodeb b{font-size:18px}
	.sround{width:44px;height:44px;border-radius:13px}.sround svg{width:20px;height:20px}.sround span{display:none}
	.sside{left:8px;right:8px;top:auto;bottom:8px;flex-direction:row;justify-content:space-between;overflow-x:auto;scrollbar-width:none;padding:4px;gap:2px;max-height:none}
	.sside .sround{width:40px;height:40px;flex:none}.srsep{width:1px;height:auto;margin:7px 2px;flex:none}
	.sarrow{width:44px;height:44px}.sl{left:10px}.sr{right:10px}
	.srule{top:auto;bottom:130px;max-width:calc(100% - 20px);white-space:normal;font-size:13px}
	.scard,.scard.c-space{left:8px;right:8px;top:auto;bottom:64px;width:auto;max-height:calc(100% - 140px)}
	.sbottom{width:calc(100% - 110px);bottom:66px}.sgo{padding:8px 14px;font-size:13.5px}
	.shome{left:10px;bottom:66px}.shelp{right:10px;bottom:66px}
	.sedit{width:calc(100% - 16px);max-width:none;bottom:8px}.stoolbar,.shotbar{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;scrollbar-width:none}
	.stool{width:36px;height:36px;flex:none}.sdone{flex:none}.sslot{width:40px;height:40px;flex:none}.sslot canvas{width:26px;height:28px}
	.studio.editing .shome,.studio.editing .shelp,.studio.editing .snav,.studio.editing .stl,.studio.editing .sarrow,.studio.editing .sside,.studio.editing .scard{display:none}
	.studio.editing .sdonetop{display:inline-flex;position:absolute;top:10px;right:10px;z-index:5;background:var(--red);border-color:var(--red)}
	.smore.sphone{position:absolute;left:0;right:0;bottom:100%;margin-bottom:8px;grid-template-columns:1fr 1fr;gap:2px;max-height:50vh;overflow:auto}
	.smore.sphone button{display:flex;align-items:center;gap:8px;font-size:12.5px}.smore.sphone button.on{background:var(--red)}.smore.sphone svg{width:18px;height:18px}
	.stool{width:44px;height:44px}.sslot{width:48px;height:48px}.sslot canvas{width:30px;height:32px}
}

.sinspect{background:#ffc23d22!important;color:#ffe2a0!important;border:1px solid #ffc23d66;box-shadow:none!important;cursor:default}

/* full screen where the browser has none (iPhone): the stage covers the page */
.sstage.sfakefull{position:fixed;inset:0;z-index:9999;height:100vh;height:100dvh;min-height:0;border-radius:0;border:0}
html.snoscroll,html.snoscroll body{overflow:hidden}

/* phones: the card slides down to a strip after a "find", to show the marked blocks */
@media (max-width:820px){.studio.speek .scard{transform:translateY(calc(100% - 46px));transition:transform .25s ease}.studio.speek .sbottom{bottom:118px}.studio .scard{transition:transform .25s ease}.studio.speek .scard>*{pointer-events:none}}

/* the lists of the cards (selects, suggestions): dark like the Studio, never white on white */
.studio{color-scheme:dark}
.studio select option,.studio select optgroup{background:#1b1b20;color:#ededf0}

/* the reskin: swatches for the styles, a line per block (what it is -> what it becomes), the footer */
.srhead{display:flex;align-items:flex-start;gap:10px}.srhead .snote{flex:1;margin-top:2px}
.sorig{flex:none;gap:6px;margin:2px 0 0;padding:7px 10px}.sorig svg{width:16px;height:16px}.sorig.on{border-color:var(--red);color:#fff}
.sstyles h3{margin-top:12px}
.sswatch{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent}
.sswatch button{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:3px;background:#ffffff0a;border:1px solid var(--sedge);border-radius:10px;padding:7px 3px 5px;color:var(--soft);font:600 10.5px Inter,sans-serif;cursor:pointer}
.sswatch button:hover{border-color:#ffffff40}.sswatch button.on{border-color:var(--red);box-shadow:0 0 0 2px var(--glow);color:#fff;background:#ff38281a}
.sswatch button:disabled{opacity:.28;cursor:not-allowed}
.sswatch canvas{width:30px;height:32px;image-rendering:pixelated}.sswatch span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srq{width:100%;box-sizing:border-box;background:#ffffff0d;border:1px solid var(--sedge);border-radius:9px;color:var(--text);padding:8px 10px;font:13px Inter,sans-serif;margin:0 0 6px}
.sswaps li{gap:7px;border:1px solid transparent}.sswaps li.on{border-color:#ff382855;background:#ff38280f}.sswaps li.new{border-style:dashed;border-color:#ff382899}
.sswaps li>svg{width:14px;height:14px;color:var(--muted);flex:none}
.sto{flex:none;max-width:132px;display:flex;align-items:center;gap:5px;background:none;border:1px dashed #ffffff38;border-radius:8px;padding:3px 8px 3px 4px;color:var(--soft);font:600 11.5px Inter,sans-serif;cursor:pointer}
.sto:hover{border-color:#ffffff70}.sto.set{border-style:solid;border-color:#ff382880;color:#fff;background:#ffffff08}
.sto canvas{width:22px;height:24px;image-rendering:pixelated;flex:none}.sto svg{width:16px;height:16px;flex:none}.sto span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sunset{flex:none;background:none;border:0;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}.sunset:hover{color:#fff}
.sfoot{position:sticky;bottom:-14px;z-index:1;display:flex;align-items:center;gap:6px;margin:10px -16px -14px;padding:10px 16px 12px;background:#141418f7;border-top:1px solid var(--sedge)}
.sfoot span{flex:1;font-size:12.5px;color:var(--soft)}.sfoot .sbtn{margin:0}

/* touch screens: a button to move the view with one finger (some phones do not pan with two) */
.studio .span{display:none;position:absolute;left:16px;bottom:84px;z-index:3;border-radius:50%}
.studio .span.on{background:var(--red);border-color:var(--red)}
@media (pointer:coarse){.studio .span:not([hidden]){display:grid}}
@media (max-width:820px){.studio .span{left:10px;bottom:122px}.studio.editing .span{bottom:150px}}

/* the steps bar: play the steps, first in its row */
.snav .snavplay{width:42px;height:42px;border-radius:50%;flex:none}.snav .snavplay svg{width:16px;height:16px}.snav .snavplay span{display:none}
.snav .snavplay.on{background:var(--red);border-color:var(--red);color:#fff}
.smodeb span{white-space:nowrap}
@media (max-width:820px){.snav .snavplay{width:38px;height:38px}.smodeb{padding:8px 13px}.smodeb b{font-size:17px}}
/* View > Show only: the blocks picked, the way the others go, the list of the build's blocks; its pill at the bottom */
.sonlyc{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:2px 0 8px}
.sonlyc button[data-onlyx]{display:inline-flex;align-items:center;gap:6px;font:600 12.5px Inter,sans-serif;color:#fff;background:var(--red);border:0;border-radius:999px;padding:6px 8px 6px 12px;cursor:pointer}
.sonlyc button[data-onlyx] i{font-style:normal;font-size:15px;line-height:1;opacity:.8}.sonlyc .sbtn{margin:0}
.sonlym{margin-bottom:8px}
.sonlyq{width:100%;box-sizing:border-box;background:#ffffff0d;border:1px solid var(--sedge);border-radius:10px;color:var(--text);padding:8px 10px;font:13px Inter,sans-serif;margin-bottom:6px}
.sonlyl{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:250px;overflow:auto}
.sonlyl button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:1px solid transparent;border-radius:9px;padding:4px 8px 4px 4px;color:var(--soft);font:500 13px Inter,sans-serif;text-align:left;cursor:pointer}
.sonlyl button:hover{background:#ffffff0d;color:#fff}.sonlyl button.on{background:#ff38281f;border-color:#ff382866;color:#fff}
.sonlyl img{width:24px;height:24px;image-rendering:pixelated;flex:none}.sonlyl span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sonlyl b{font:500 13px var(--px);color:var(--muted)}.sonlyl button.on b{color:#fff}
.sonlyp{display:flex;align-items:center;gap:2px;border-radius:999px;padding:4px 4px 4px 6px;max-width:100%}
.sonlyp button[data-tab]{display:inline-flex;align-items:center;gap:8px;min-width:0;background:none;border:0;color:#fff;font:600 13px Inter,sans-serif;cursor:pointer;padding:4px 6px}
.sonlyp button[data-tab] svg{width:17px;height:17px;flex:none;color:var(--red2)}
.sonlyp span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sonlyp b{font-weight:700}
.sonlyp .scardx{flex:none;display:grid;place-items:center}
/* between phones and wide screens: the steps bar under My space, not beside it */
@media (min-width:821px) and (max-width:1060px){.snav{top:80px}}
/* the rail: each tool's name under its icon (on phones, the row at the bottom, a little taller) */
.sside{padding:6px 4px}
.sside .sround{width:62px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.sside .sround em{font:600 10.5px Inter,sans-serif;font-style:normal;line-height:1;white-space:nowrap}
.scard,.scard.c-help,.scard.c-share{right:98px}.sr{right:100px}
@media (max-width:820px){
	.sside{gap:0;padding:3px}.srsep{margin:8px 1px}
	.sside .sround{width:44px;height:50px;gap:3px}
	.sside .sround em{font-size:9px;letter-spacing:-.01em}
	.sside .sround em[data-phone]{font-size:0}.sside .sround em[data-phone]:before{content:attr(data-phone);font-size:9px}
	.sbottom,.shome,.shelp{bottom:76px}
	.scard,.scard.c-space,.scard.c-help,.scard.c-share{right:8px;bottom:72px}.sr{right:10px}
}
/* Reskin > Palettes: a card each (its name, its tag, a few words, a block for each role); the form; an admin's roles */
.spals{display:grid;gap:7px;margin:4px 0 6px}
.spal{position:relative;background:#ffffff08;border:1px solid var(--sedge);border-radius:12px}
.spal:hover{border-color:#ffffff40}.spal.on{border-color:var(--red);box-shadow:0 0 0 2px var(--glow);background:#ff38280f}
.spal.locked .spalsw{opacity:.55}
.spalgo{display:block;width:100%;background:none;border:0;color:var(--text);text-align:left;padding:9px 10px 8px;cursor:pointer;font:inherit}
.spalh{display:flex;align-items:center;gap:8px}.spalh b{font:500 16px var(--px);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spalh em{flex:none;display:inline-flex;align-items:center;font:800 9.5px Inter,sans-serif;font-style:normal;letter-spacing:.12em;border-radius:6px;padding:3px 6px}
.spalh em.free{background:#3ec46d26;color:#7fe0a0}.spalh em.mem{background:#ffc23d1f;color:#ffd27a}.spalh em.yours{background:#ffffff14;color:var(--soft)}
.spalh em .scrown{width:11px;height:11px;margin-right:4px}
.spalgo small{display:block;color:var(--muted);font-size:12px;margin:2px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spalsw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.spalsw>span{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.spalsw canvas{width:28px;height:30px;image-rendering:pixelated}
.spalsw i{font:700 9px Inter,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.spalsw .none{opacity:.45}.sdash{display:block;width:22px;height:30px;border:1px dashed #ffffff30;border-radius:6px}
.spalact{position:absolute;right:8px;bottom:6px;display:none;gap:4px}.spal:hover .spalact,.spal:focus-within .spalact{display:flex}
.spalact button{background:#0b0b0de6;border:1px solid var(--sedge);border-radius:7px;color:var(--soft);font:600 11px Inter,sans-serif;padding:3px 7px;cursor:pointer}
.spalact button:hover{color:#fff;border-color:#ffffff60}
@media (hover:none){.spalact{display:flex;position:static;justify-content:flex-end;padding:0 8px 7px}}
.spaltools{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.spaltools .sbtn{margin:0}
.spalform{margin-bottom:6px}
.spalslots{display:grid;gap:5px;margin:4px 0}
.spalslot{display:flex;align-items:center;gap:9px;background:#ffffff08;border:1px solid var(--sedge);border-radius:10px;padding:5px 8px 5px 5px}
.spalslot>div{flex:1;min-width:0;display:grid}.spalslot i{font:800 9.5px Inter,sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.spalslot b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spick{flex:none;display:grid;place-items:center;width:42px;height:42px;background:#ffffff0d;border:1px dashed #ffffff40;border-radius:9px;color:var(--soft);cursor:pointer}
.spick:hover{border-color:var(--red);color:#fff}.spick canvas{width:30px;height:32px;image-rendering:pixelated}.spick svg{width:18px;height:18px}
.sroles{list-style:none;margin:4px 0 8px;padding:0;display:grid;gap:4px}
.sroles li{display:flex;align-items:center;gap:9px;font-size:13px}.sroles canvas{width:26px;height:28px;image-rendering:pixelated;flex:none}
.sroles span{flex:1;min-width:0;display:grid}.sroles b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sroles small{color:var(--muted);font-size:11.5px}
.sroles select{background:#ffffff0d;border:1px solid var(--sedge);border-radius:8px;color:var(--text);padding:5px 6px;font:13px Inter,sans-serif}
/* Big flat walls: the Ideas of a wall (blocks to mix in) */
.sideab{display:inline-flex;align-items:center;gap:5px;margin:4px 0 2px 6px;background:#ffffff0d;border:1px solid var(--sedge);border-radius:8px;color:var(--soft);font:600 11.5px Inter,sans-serif;padding:4px 9px;cursor:pointer}
.sideab svg{width:14px;height:14px}.sideab:hover,.sideab.on{border-color:var(--red);color:#fff}
.sideas{margin:6px 0 8px 6px;padding:8px;border:1px dashed var(--sedge);border-radius:10px}
.sideas p{margin:0 0 6px;font-size:12px;color:var(--soft)}.sideas small{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
.scrowb li .sswatch button{width:64px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:7px 3px 5px;text-align:center;font:600 10.5px Inter,sans-serif}
.scrowb li .sideab{width:auto;display:inline-flex;padding:4px 9px}
.scrowb li .sswatch button,.scrowb li .sideab{border:1px solid var(--sedge);background:#ffffff0a;color:var(--soft)}
.scrowb li .sswatch button span{flex:none;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scrowb li .sswatch button:hover,.scrowb li .sideab:hover,.scrowb li .sideab.on{border-color:var(--red);color:#fff}
.sideas{box-sizing:border-box;max-width:100%;min-width:0;overflow:hidden;white-space:normal}.scrowb li{min-width:0}
/* How to export? (howto.js): the window, the scene, the steps in step with it */
.showtob svg{width:15px;height:15px;margin-right:5px}
.showto{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0b0b0dcc;padding:16px}
.showtobox{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#141418;color:var(--text);border:1px solid var(--sedge);border-radius:18px;padding:18px 18px 14px;box-shadow:0 24px 70px #000a}
.showtobox>.scardx{position:absolute;right:12px;top:12px}
.showtobox h2{margin:0 40px 4px 0;font:500 23px var(--px);line-height:1.15}
.showtoed{margin:8px 0 10px}
.showtoc{display:block;width:100%;aspect-ratio:720/380;border-radius:12px;background:radial-gradient(ellipse 80% 75% at 50% 45%,#3c3c42 0%,#232327 60%,#151517 100%);border:1px solid var(--sedge)}
.showtos{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:4px}
.showtos li{display:grid;gap:2px;padding:8px 10px;border-radius:10px;border:1px solid transparent;cursor:pointer;color:var(--muted);font-size:13px;line-height:1.45;transition:background .2s,border-color .2s}
.showtos li b{color:var(--soft);font-size:13.5px}.showtos li.on{background:#ff38281a;border-color:#ff382866;color:var(--soft)}.showtos li.on b{color:#fff}
.showtos code,.showtotip code{font:600 12px ui-monospace,Consolas,monospace;background:#ffffff14;border-radius:5px;padding:1px 5px;color:#fff}
.showtotip{margin:6px 0 0}