/* ===== atomic: components split into their real layers ===== */
#atomic{padding-bottom:clamp(60px,8vw,110px)}
#atomic .atomic-head{margin-bottom:clamp(36px,5vw,64px)}

/* studio view: explorer · viewport · properties, luau under the viewport */
#atomic .atomic-frame{margin:0;padding:0}
#atomic .atomic-app{position:relative;display:grid;grid-template-columns:232px minmax(0,1fr) 300px;grid-template-rows:44px minmax(0,1fr) 172px;height:clamp(640px,82vh,780px);
  background:var(--night);color:var(--ntext);border-radius:inherit;overflow:hidden;font:400 12px/1.4 var(--mono)}

/* top bar: the call that returned this tree */
#atomic .atomic-bar{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:0 10px 0 16px;border-bottom:1px solid var(--nline);background:var(--night2);min-width:0}
#atomic .atomic-call{color:#a9a59c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#atomic .atomic-call .k{color:#f2f0eb}
#atomic .atomic-call .s{color:#7fd1a8}
#atomic .atomic-meta{margin-left:auto;display:flex;align-items:center;gap:8px;color:#77746d;white-space:nowrap}
#atomic .atomic-dot{width:3px;height:3px;border-radius:50%;background:#4a4852}
#atomic .atomic-reset{font:inherit;color:#d9d5cb;background:var(--night3);border:1px solid var(--nline);border-radius:6px;height:28px;padding:0 11px;cursor:pointer;transition:opacity .2s,border-color .2s}
#atomic .atomic-reset:hover:not(:disabled){border-color:#4a4852}
#atomic .atomic-reset:disabled{opacity:.35;cursor:default}

/* side panels */
#atomic .atomic-pane{grid-row:2/4;min-height:0;display:flex;flex-direction:column;background:var(--night2)}
#atomic .atomic-explorer{grid-column:1;border-right:1px solid var(--nline)}
#atomic .atomic-props{grid-column:3;border-left:1px solid var(--nline)}
#atomic .atomic-ph{margin:0;flex:none;padding:11px 14px 10px;border-bottom:1px solid var(--nline);color:#77746d;font-size:11px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#atomic .atomic-cls{color:#d9d5cb;margin-left:6px}

/* explorer tree */
#atomic .atomic-tree{list-style:none;margin:0;padding:6px 0;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:#3a3842 transparent}
#atomic .atomic-tree li{position:relative;display:flex;align-items:center;gap:7px;height:26px;padding:0 12px 0 calc(12px + var(--d) * 14px);cursor:default;color:#c9c5bb;white-space:nowrap;outline:none}
#atomic .atomic-tree li:hover{background:#22212a}
#atomic .atomic-tree li[aria-selected="true"]{background:rgba(31,140,255,.18);color:#fff}
#atomic .atomic-tree li:focus-visible{box-shadow:inset 0 0 0 1px var(--sel)}
#atomic .atomic-tree svg{flex:none;width:14px;height:14px;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
#atomic .atomic-tree .c-Frame svg{stroke:#9a96a3}
#atomic .atomic-tree .c-ImageLabel svg{stroke:#5aa9ff}
#atomic .atomic-tree .c-TextLabel svg{stroke:#f0b54a;stroke-width:1.5}
#atomic .atomic-tree .nm{overflow:hidden;text-overflow:ellipsis;min-width:0}
#atomic .atomic-tree .cl{display:none}
#atomic .atomic-tree .mod{flex:none;width:5px;height:5px;border-radius:50%;background:var(--sel);margin-left:auto;opacity:0;transition:opacity .2s}
#atomic .atomic-tree .is-mod .mod{opacity:1}

/* viewport */
#atomic .atomic-stage{grid-column:2;grid-row:2;position:relative;min-height:0;
  background-color:#0e0d12;background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.055) 1.1px,transparent 1.7px);background-size:24px 24px;background-position:12px 12px}
#atomic .atomic-canvas{position:absolute;inset:0;overflow:hidden;touch-action:pan-y}
#atomic .atomic-world{position:absolute;transform-origin:0 0;left:0;top:0}
#atomic .atomic-node{position:absolute}
#atomic .atomic-node img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
#atomic .atomic-world>.atomic-node{cursor:default}
#atomic .atomic-world>.atomic-node .atomic-node{cursor:grab}
#atomic .atomic-node.pass{pointer-events:none}
#atomic .atomic-canvas.dragging,#atomic .atomic-canvas.dragging .atomic-node{cursor:grabbing}
#atomic .atomic-hint{position:absolute;left:14px;top:12px;margin:0;font-size:11px;color:#5d5a63;pointer-events:none}

/* selection (studio blue box + handles + size tag + 9-slice guides) */
#atomic .atomic-selbox,#atomic .atomic-hovbox{position:absolute;pointer-events:none;z-index:2}
#atomic .atomic-selbox{outline:1.5px solid var(--sel);outline-offset:0}
#atomic .atomic-hovbox{outline:1px solid rgba(90,169,255,.6);opacity:0;transition:opacity .12s}
#atomic .atomic-selbox .h{position:absolute;width:7px;height:7px;margin:-4px 0 0 -4px;background:#fff;border:1.5px solid var(--sel);border-radius:1px}
#atomic .atomic-selbox .nw{left:0;top:0}#atomic .atomic-selbox .n{left:50%;top:0}#atomic .atomic-selbox .ne{left:100%;top:0}
#atomic .atomic-selbox .e{left:100%;top:50%}#atomic .atomic-selbox .se{left:100%;top:100%}#atomic .atomic-selbox .s{left:50%;top:100%}
#atomic .atomic-selbox .sw{left:0;top:100%}#atomic .atomic-selbox .w{left:0;top:50%}
#atomic .atomic-selbox.fixed .h{display:none}
#atomic .atomic-tag{position:absolute;left:50%;top:100%;transform:translate(-50%,9px);background:var(--sel);color:#fff;font:500 10.5px/1 var(--mono);padding:4px 6px;border-radius:4px;white-space:nowrap}
#atomic .atomic-selbox .g{position:absolute}
#atomic .atomic-selbox .gh{left:-10px;right:-10px;height:0;border-top:1px dashed rgba(255,210,31,.85)}
#atomic .atomic-selbox .gv{top:-10px;bottom:-10px;width:0;border-left:1px dashed rgba(255,210,31,.85)}

/* properties */
#atomic .atomic-plist{margin:0;padding:4px 0;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:#3a3842 transparent}
#atomic .atomic-plist div{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;min-height:28px;padding:0 14px;border-bottom:1px solid #1f1e25;position:relative}
#atomic .atomic-plist dt{color:#8a877f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#atomic .atomic-plist dd{margin:0;color:#e9e6df;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#atomic .atomic-plist .mod::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--sel)}
#atomic .atomic-plist .mod dd{color:#7cbcff}
#atomic .atomic-plist .f{color:#8a877f}
#atomic .atomic-plist .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1.5px;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
#atomic .atomic-plist input{width:100%;height:22px;padding:0 7px;font:inherit;color:#fff;background:#0e0d12;border:1px solid #3a3842;border-radius:4px;outline:none}
#atomic .atomic-plist input:focus{border-color:var(--sel);box-shadow:0 0 0 2px rgba(31,140,255,.25)}

/* luau */
#atomic .atomic-code{grid-column:2;grid-row:3;margin:0;padding:12px 16px;overflow:auto;border-top:1px solid var(--nline);background:var(--night);font:400 11.5px/1.6 var(--mono);color:#c9c5bb;tab-size:2;scrollbar-width:thin;scrollbar-color:#3a3842 transparent}
#atomic .atomic-code .k{color:#c792ea}
#atomic .atomic-code .s{color:#7fd1a8}
#atomic .atomic-code .n{color:#f7a35c}
#atomic .atomic-code .c{color:#5d5a63}

@media (max-width:1100px){
  #atomic .atomic-app{grid-template-columns:200px minmax(0,1fr) 260px}
  #atomic .atomic-plist div{grid-template-columns:104px minmax(0,1fr)}
}
@media (max-width:820px){
  #atomic .atomic-app{display:flex;flex-direction:column;height:auto}
  #atomic .atomic-meta{display:none}
  #atomic .atomic-stage{height:440px;flex:none;order:1}
  #atomic .atomic-explorer{order:2;border-right:0;border-top:1px solid var(--nline)}
  #atomic .atomic-tree{max-height:206px}
  #atomic .atomic-props{order:3;border-left:0;border-top:1px solid var(--nline)}
  #atomic .atomic-code{order:4;max-height:220px}
  #atomic .atomic-hint{display:none}
}

/* live game text (outside stroke = double-width stroke drawn behind the fill) */
.atomic-t{position:absolute;white-space:pre;font-family:var(--game);font-weight:400;letter-spacing:0}
.atomic-t>.s,.atomic-t>.f{position:absolute;inset:0;text-align:inherit;line-height:inherit}
.atomic-t>.s{-webkit-text-stroke:var(--sw) var(--sc);color:var(--sc)}
.atomic-t>.f{color:var(--fill)}
.atomic-t.grad>.f{background:var(--fill);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- cards ---------- */
#atomic .atomic-below{margin-top:clamp(56px,7vw,96px)}
#atomic .atomic-cards{background:color-mix(in srgb,var(--card) 70%,transparent)}
#atomic .atomic-cards .cards{border-top:0}
#atomic .card .body{max-width:440px}

@font-face{font-family:"atomic-mont";src:url(/library/fonts/Montserrat-ExtraBold.ttf) format("truetype");font-weight:800;font-display:swap}
#atomic .atomic-x-box,#atomic .atomic-type-box{aspect-ratio:auto;height:clamp(460px,46vw,560px);display:flex;flex-direction:column;
  background-color:var(--bg2);background-image:radial-gradient(ellipse 70% 60% at 45% 42%,rgba(255,255,255,.75),transparent 70%),radial-gradient(circle at 50% 50%,rgba(23,22,27,.08) 1.2px,transparent 1.8px);background-size:100% 100%,20px 20px;background-position:0 0,10px 10px}
#atomic .atomic-chip{position:absolute;top:14px;z-index:3;font:400 11px/1 var(--mono);color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:5px;padding:5px 7px}
#atomic .atomic-chip-l{left:14px}
#atomic .atomic-chip-r{right:14px;color:var(--sel);border-color:color-mix(in srgb,var(--sel) 35%,var(--line))}
#atomic button.atomic-chip{cursor:pointer;transition:background .15s}
#atomic button.atomic-chip:hover{background:var(--sel-soft)}

/* card 1: exploded layer stack */
#atomic .atomic-x{position:relative;flex:1;min-height:0;overflow:hidden;perspective:1700px;perspective-origin:38% 40%;cursor:grab;touch-action:pan-y;user-select:none}
#atomic .atomic-x.grabbing{cursor:grabbing}
#atomic .ax-scale{position:absolute;width:0;height:0;transform-style:preserve-3d;transition:opacity .4s var(--ease)}
#atomic .atomic-x.swap .ax-scale{opacity:0;transition:none}
#atomic .ax-rig{position:absolute;transform-style:preserve-3d;transform-origin:50% 50%}
#atomic .ax-layer{position:absolute;inset:0;transition:opacity .25s var(--ease)}
#atomic .ax-layer::before{content:"";position:absolute;inset:0;border-radius:calc(8px / var(--kx,1));background:rgba(255,255,255,.07);
  box-shadow:0 0 0 calc(1px / var(--kx,1)) rgba(31,140,255,.28);opacity:0;transition:opacity .45s var(--ease)}
#atomic .atomic-x-box.open .ax-layer::before{opacity:1}
#atomic .ax-layer img{position:absolute;max-width:none;pointer-events:none;-webkit-user-drag:none}
#atomic .ax-outline{position:absolute;border:calc(1px / var(--kx,1)) dashed var(--sel);border-radius:calc(2px / var(--kx,1));opacity:0;transition:opacity .35s var(--ease)}
#atomic .atomic-x-box.open .ax-outline{opacity:.7}
#atomic .ax-anchor{position:absolute;width:0;height:0}
#atomic .ax-rig.has-hi .ax-layer:not(.hi){opacity:.18}
#atomic .ax-layer.hi::before{background:var(--sel-soft);box-shadow:0 0 0 calc(1.5px / var(--kx,1)) var(--sel)}
#atomic .ax-layer.hi .ax-outline{opacity:1;border-style:solid}
#atomic .ax-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#atomic .ax-wires path{fill:none;stroke:var(--sel);stroke-width:1;opacity:.55}
#atomic .ax-wires circle{fill:#fff;stroke:var(--sel);stroke-width:1.5}
#atomic .ax-wires .hi{opacity:1;stroke-width:1.75}
#atomic .ax-legend{position:absolute;top:0;right:8px;width:min(40%,184px);height:100%;margin:0;padding:0;list-style:none}
#atomic .ax-legend li{position:absolute;left:0;top:0;max-width:100%;display:flex;align-items:center;gap:6px;height:18px;padding:0 6px;border-radius:4px;
  background:var(--card);border:1px solid var(--line);font:400 10.5px/1 var(--mono);white-space:nowrap;overflow:hidden;cursor:default;transition:border-color .15s,background .15s}
#atomic .ax-legend li b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
#atomic .ax-legend li span{color:var(--mute);flex:none}
#atomic .ax-legend li.hi{border-color:var(--sel);background:#fff}
#atomic .ax-legend li.hi span{color:var(--sel)}
#atomic .ax-wires,#atomic .ax-legend{opacity:0;transition:opacity .3s var(--ease)}
#atomic .atomic-x.wired .ax-wires,#atomic .atomic-x.wired .ax-legend{opacity:1}
#atomic .atomic-x:not(.wired) .ax-legend{pointer-events:none}
#atomic .atomic-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);flex:none}
#atomic .atomic-thumbs button{position:relative;height:58px;padding:8px;background:var(--bg2);border:0;cursor:pointer;overflow:hidden}
#atomic .atomic-thumbs img{width:100%;height:100%;object-fit:contain;opacity:.5;filter:saturate(.4);transition:opacity .25s,filter .25s,transform .35s var(--ease)}
#atomic .atomic-thumbs button:hover img{opacity:.85;filter:none}
#atomic .atomic-thumbs button.on{background:var(--card)}
#atomic .atomic-thumbs button.on img{opacity:1;filter:none;transform:scale(1.06)}
#atomic .atomic-thumbs .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sel);transform:scaleX(0);transform-origin:0 50%}
#atomic .atomic-thumbs button.on .bar{transform:scaleX(1)}
#atomic .atomic-cap{margin:0;flex:none;border-top:1px solid var(--line);background:var(--card);padding:11px 14px;font:400 11.5px/1.5 var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#atomic .atomic-cap b{font-weight:500;color:var(--ink);margin-right:8px}

/* card 2: notext art + a TextLabel on its own plane */
#atomic .atomic-type-box{padding:14px;gap:12px}
#atomic .atomic-btn-wrap{position:relative;flex:1;min-height:0;perspective:900px}
#atomic .atomic-btn-rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
#atomic .atomic-type-box.split .atomic-btn-rig{transform:rotateX(var(--rx,22deg)) rotateY(var(--ry,-18deg))}
#atomic .atomic-btn-rig.press{animation:atomic-press .42s var(--ease)}
@keyframes atomic-press{0%{scale:1}30%{scale:.9}65%{scale:1.06}100%{scale:1}}
#atomic .atomic-btn{position:absolute;left:0;top:0;transform-origin:50% 50%;transform-style:preserve-3d}
#atomic .atomic-btn img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none}
#atomic .atomic-btn .tl{position:absolute;inset:0;transform:translateZ(0);transition:transform .6s var(--ease)}
#atomic .atomic-type-box.split .atomic-btn .tl{transform:translateZ(30px)}
#atomic .atomic-btn .tb{position:absolute;border:dashed var(--sel);border-width:calc(1px / var(--k,1));border-radius:calc(2px / var(--k,1));opacity:0;transition:opacity .3s}
#atomic .atomic-btn .tb::after{content:"TextLabel";position:absolute;left:-1px;bottom:100%;margin-bottom:calc(4px / var(--k,1));font:400 calc(10px / var(--k,1))/1 var(--mono);color:var(--sel);white-space:nowrap}
#atomic .atomic-btn .art-tag{position:absolute;left:0;top:100%;margin-top:calc(9px / var(--k,1));font:400 calc(10px / var(--k,1))/1 var(--mono);color:var(--ink2);white-space:nowrap;opacity:0;transition:opacity .3s}
#atomic .atomic-type-box.split .tb,#atomic .atomic-type-box.split .art-tag{opacity:1}
#atomic .atomic-btn .atomic-t{transition:filter .5s var(--ease)}
#atomic .atomic-type-box.split .atomic-btn .atomic-t{filter:drop-shadow(0 calc(9px / var(--k,1)) calc(5px / var(--k,1)) rgba(10,40,0,.28))}
#atomic .atomic-btn .atomic-t i{font-style:normal;display:inline-block}
#atomic .atomic-btn .atomic-t i.n{animation:atomic-pop .44s var(--ease) both;animation-delay:calc(var(--j) * 22ms)}
@keyframes atomic-pop{0%{opacity:0;transform:translateY(.5em) scale(.3) rotate(-14deg)}55%{opacity:1;transform:translateY(-.12em) scale(1.2)}100%{transform:none}}
#atomic .atomic-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;flex:none}
#atomic .atomic-presets button{font:500 12px/1 var(--sans);color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
#atomic .atomic-presets button:hover{border-color:var(--line2);color:var(--ink)}
#atomic .atomic-presets button.on{border-color:var(--sel);color:var(--sel);background:#fff}
#atomic .atomic-field{position:relative;flex:none;display:flex;align-items:center;gap:10px;height:42px;padding:0 8px 0 12px;background:var(--card);border:1px solid var(--line);border-radius:9px;transition:border-color .15s,box-shadow .15s}
#atomic .atomic-field:focus-within{border-color:var(--sel);box-shadow:0 0 0 3px var(--sel-soft)}
#atomic .atomic-field span{font:400 11px/1 var(--mono);color:var(--mute);flex:none}
#atomic .atomic-field input{flex:1;min-width:0;height:100%;border:0;background:none;font:500 15px var(--sans);color:var(--ink);outline:none;letter-spacing:-.01em}
#atomic .atomic-field kbd{font:400 11px/1 var(--mono);color:var(--mute);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:3px 5px}
#atomic .atomic-luau{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:var(--night);color:#c9c5bb;font:400 12px/1.6 var(--mono);white-space:pre;overflow:auto;scrollbar-width:thin}
#atomic .atomic-luau .k{color:#c792ea}
#atomic .atomic-luau .s{color:#7fd1a8}
#atomic .atomic-luau .c{color:#6b6872}

#atomic .atomic-spec{margin:18px 0 0;display:grid;grid-template-columns:repeat(4,auto);justify-content:start;column-gap:28px;row-gap:4px;font:400 11.5px/1.5 var(--mono)}
#atomic .atomic-spec div{display:contents}
#atomic .atomic-spec dt{grid-row:1;color:var(--mute)}
#atomic .atomic-spec dd{grid-row:2;margin:0;color:var(--ink);white-space:nowrap}
#atomic .atomic-spec .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px;box-shadow:0 0 0 1px rgba(23,22,27,.25) inset}

@media (max-width:820px){
  #atomic .atomic-thumbs button{height:50px;padding:6px}
  #atomic .atomic-spec{grid-template-columns:repeat(2,auto);row-gap:2px}
  #atomic .atomic-spec div{display:block}
  #atomic .atomic-spec dt,#atomic .atomic-spec dd{grid-row:auto}
}
#atomic .atomic-foot{margin:14px 0 0;font:400 11.5px/1.5 var(--mono);color:var(--mute)}