/* The ibex illustrations (ibex-art.js / ibex.js): flat painted silhouettes like the Shahr-e Sukhteh goblet.
   Paint is currentColor; the horn ridges are "scratched" in the colour behind them (--ib-cut). */
.ib-fig{display:block;width:100%;height:auto;overflow:visible}
.ib-leg,.ib-trunk,.ib-branch,.ib-ray{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ib-leg{stroke-width:3.4}.ib-trunk{stroke-width:3.6}.ib-branch{stroke-width:2.2}.ib-ray{stroke-width:3}
.ib-ridge{fill:none;stroke:var(--ib-cut,var(--bg,#ead9bd));stroke-width:1.5;stroke-linecap:round}

/* Figures placed with [data-px] */
.ib-on{display:inline-grid;width:var(--ib-w,80px);line-height:0;vertical-align:middle;color:var(--ib-paint,var(--text-strong));--ib-cut:var(--bg)}
.ib-on>.ib-fig{grid-area:1/1}
.ib-on>.ib-frame{visibility:hidden}
.ib-on>.ib-frame.on{visibility:visible}
.ib-on.ib-tree,.ib-on.ib-sun,.ib-on.ib-bird{color:var(--accent)}
.ib-act-idle{animation:ib-breathe 3.2s ease-in-out infinite;transform-origin:50% 100%}
.ib-on.ib-bird.ib-act-idle{animation:px-float 2.6s ease-in-out infinite}
@keyframes ib-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.985)}}

/* The logo: the ibex mark plays its leap (data-frame), and the hand-painted word */
.rk-logo{--rk-h:44px;display:inline-block;height:var(--rk-h);line-height:0;vertical-align:middle;color:var(--ib-paint,var(--text-strong));--ib-cut:var(--bg)}
.rk-logo .ib-logo-svg{height:100%;width:auto;overflow:visible}
.ib-logo-svg .ib-frame{display:none}
.ib-logo-svg[data-frame="stand"] .ib-frame[data-f="stand"],.ib-logo-svg[data-frame="leap1"] .ib-frame[data-f="leap1"],.ib-logo-svg[data-frame="leap2"] .ib-frame[data-f="leap2"],
.ib-logo-svg[data-frame="leap3"] .ib-frame[data-f="leap3"],.ib-logo-svg[data-frame="leap4"] .ib-frame[data-f="leap4"],.ib-logo-svg[data-frame="leap5"] .ib-frame[data-f="leap5"],
.ib-logo-svg:not([data-frame]) .ib-frame[data-f="stand"]{display:inline}
.ib-word path{fill:none;stroke:currentColor;stroke-width:7.4;stroke-linecap:round;stroke-linejoin:round}
.ib-word .ib-x path{stroke:var(--accent)}
a:hover>.rk-logo,a:hover .rk-logo{color:var(--ib-paint-hover,var(--text-strong))}

/* The goblet's frieze on the sign-in pages: five frames and the tree, lit one after another */
.ib-frieze{margin-top:24px;max-width:560px;color:var(--ib-paint,var(--text-strong));--ib-cut:var(--bg)}
.ib-frieze-row{display:grid;grid-template-columns:repeat(5,1fr) .8fr;align-items:end;gap:4px;padding:8px 2px}
.ib-cell{opacity:.32;transition:opacity .2s,transform .2s;line-height:0}
.ib-cell.lit{opacity:1;transform:translateY(-2px)}
.ib-cell.ib-tree{opacity:.9;color:var(--accent)}
.ib-band{height:12px;opacity:.85;background:linear-gradient(135deg,currentColor 25%,transparent 25%) 0 0/12px 12px,linear-gradient(225deg,currentColor 25%,transparent 25%) 0 0/12px 12px}
@media (prefers-reduced-motion:reduce){.ib-cell{opacity:1}}

/* Small spots */
.nm-play-icon.ib-on{--ib-w:30px;margin-inline-end:2px}
.px-wave-hi .ib-on{--ib-w:64px}
.px-runner.ib-on{--ib-w:36px}
.px-runner .ib-fig{filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.px-sleeping .ib-on{--ib-w:96px}
.px-cheer.ib-on{--ib-w:90px}
.px-empty.ib-on{filter:drop-shadow(0 8px 14px rgba(0,0,0,.12))}
.ib-game .px-game-canvas{image-rendering:auto}
.ib-game .px-game-head b{background:none;color:var(--text-strong);-webkit-text-fill-color:currentColor}

/* ---- Burnt City theme: painted bands like the goblet's rim, warm shadows ---- */
html[data-theme=clay] body.studio .nm-top,html[data-theme=clay] body.admin .topbar{border-bottom-color:transparent}
html[data-theme=clay] body.studio .nm-top::after,html[data-theme=clay] body.admin .topbar::after,html[data-theme=clay] .workspace-footer::before{content:"";position:absolute;left:0;right:0;height:9px;pointer-events:none;color:var(--text-strong);opacity:.78;
 background:linear-gradient(135deg,currentColor 25%,transparent 25%) 0 0/12px 12px,linear-gradient(225deg,currentColor 25%,transparent 25%) 0 0/12px 12px}
html[data-theme=clay] body.studio .nm-top::after,html[data-theme=clay] body.admin .topbar::after{bottom:-9px}
html[data-theme=clay] .workspace-footer{position:relative}
html[data-theme=clay] .workspace-footer::before{top:-10px;transform:scaleY(-1)}
html[data-theme=clay] body.studio,html[data-theme=clay] body.admin{background-image:radial-gradient(1000px 520px at 100% -10%,rgba(201,119,47,.16),transparent 60%),radial-gradient(900px 640px at -10% 110%,rgba(156,63,29,.10),transparent 60%)}
html[data-theme=clay] body.studio::before,html[data-theme=clay] body.admin::before{opacity:0}
html[data-theme=clay] body.studio .nm-panel-card,html[data-theme=clay] body.studio .job,html[data-theme=clay] body.studio .nm-projects,html[data-theme=clay] body.admin .card{box-shadow:0 1px 2px rgba(59,36,22,.08),0 10px 26px rgba(90,46,23,.10)}

/* The frieze replaces the old pixel crew (which was a flex row) */
.px-crew.ib-frieze{display:block}
.ib-frieze .ib-band{width:100%}
/* Header logo: just the painted logo, no pill (the old glass-logo styles no longer apply) */
body.studio .nm-glass,html[data-theme] body.studio .nm-glass{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0 6px;height:auto;overflow:visible}
body.studio .nm-glass::before{content:none}
body.studio .nm-glass:hover{transform:translateY(-1px)}
body.studio .px-runner.ib-on{display:grid}
body.studio .gen-progress .px-lane{margin-top:30px}

/* Goblet brushwork: thicker legs, the panel frame and fern branches */
.ib-leg{stroke-width:5.2}
.ib-frame-line{fill:none;stroke:currentColor;stroke-width:5.5;stroke-linecap:round}
.ib-fern{fill:none;stroke:currentColor;stroke-width:3.6;stroke-linecap:round}

/* ---- Sign-in film roll: reels at both ends, the goblet's frames scrolling between them ---- */
.px-crew.ib-film{display:flex;align-items:center;margin-top:26px;max-width:620px;color:var(--text-strong);--ib-cut:var(--bg)}
.ib-reel{flex:none;width:76px;height:76px;position:relative;z-index:1;animation:ib-spin 3.2s linear infinite}
.ib-film .ib-reel:first-child{margin-inline-end:-10px}
.ib-film .ib-reel:last-child{margin-inline-start:-10px}
@keyframes ib-spin{to{transform:rotate(-360deg)}}
.ib-film-gate{flex:1;min-width:0;overflow:hidden;border-radius:3px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ib-film-track{display:flex;gap:8px;width:max-content;padding:15px 4px;
 background:linear-gradient(var(--text-strong),var(--text-strong)) padding-box,var(--text-strong);
 background-image:repeating-linear-gradient(90deg,var(--bg) 0 9px,transparent 9px 18px),repeating-linear-gradient(90deg,var(--bg) 0 9px,transparent 9px 18px);
 background-size:100% 7px,100% 7px;background-position:0 4px,0 calc(100% - 4px);background-repeat:no-repeat;background-color:var(--text-strong);
 animation:ib-roll 11s linear infinite}
@keyframes ib-roll{to{transform:translateX(-50%)}}
html[dir=rtl] .ib-film-track{animation-direction:reverse}
.ib-film-cell{flex:none;width:126px;padding:3px 4px;border-radius:2px;background:var(--bg);color:var(--text-strong);line-height:0}
.ib-film-cell .ib-panel{width:100%;height:auto}
@media (max-width:560px){.ib-film-cell{width:104px}.ib-reel{width:58px;height:58px}}
@media (prefers-reduced-motion:reduce){.ib-reel,.ib-film-track{animation:none}}
.px-crew.ib-film{margin-bottom:26px}

/* Header "Ibex Leap" link: a small still ibex that stays inside its own space (it used to leap over the next link) */
.nm-play-icon.ib-on{--ib-w:20px!important;display:inline-block;flex:none;width:20px;height:24px;overflow:hidden;margin-inline-end:2px}
.nm-play-icon .ib-goat-svg{display:block;width:100%;height:100%}

/* Sign-in: the page sits inside a goblet panel — pink clay, a thick painted frame, the goblet's ferns at both sides */
body.studio .nm-auth-body.ib-goblet{position:relative;isolation:isolate;padding:60px 150px 70px;margin:22px auto;--ib-env-paint:var(--text-strong)}
html[data-theme=clay] .nm-auth-body.ib-goblet{--ib-env-paint:#4f2d17}
html[data-theme=clay] .nm-auth-body.ib-goblet::before{content:'';position:absolute;inset:6px;z-index:-2;background:#f6e3d8;border-radius:4px}
.ib-goblet-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--ib-env-paint)}
.ib-goblet-frame{position:absolute;inset:0 0 30px;width:100%;height:calc(100% - 30px);overflow:visible}
.ib-goblet-foot{position:absolute;left:0;right:0;bottom:0;width:100%;height:20px;overflow:visible}
.ib-ferns{position:absolute;top:50%;width:104px;height:auto;transform:translateY(-50%)}
.ib-ferns-l{left:22px}
.ib-ferns-r{right:22px;transform:translateY(-50%) scaleX(-1)}
html[data-theme=clay] .nm-auth-body.ib-goblet .nm-auth-hero{--text-strong:#4f2d17}
@media (max-width:900px){body.studio .nm-auth-body.ib-goblet{padding:44px 26px 56px;margin:12px auto}.ib-ferns{display:none}}

/* Sign-in: the turning goblet (replaces the film roll) */
.px-crew.ib-cupwrap{display:block;width:170px;margin:4px auto 8px;line-height:0}
.nm-auth-hero .px-crew.ib-cupwrap{width:min(330px,100%);margin:6px 0 10px}
.ib-cup{display:block;width:100%;height:auto}
@media (max-width:560px){.px-crew.ib-cupwrap{width:min(260px,80%);margin-inline:auto}}

/* The logo is taller than wide (ibex on its ground, "Ibex" below), so it gets more height. */
.rk-logo{height:calc(var(--rk-h) * 1.3)}

/* Sign-in: one big see-through fern frond, from the lower left up to the top centre (behind everything) */
.ib-leaf{position:absolute;inset:0;width:100%;height:100%;color:var(--ib-env-paint);opacity:.16;pointer-events:none}
.ib-sprite{overflow:visible}