/**
 * Snippet Name: AMM: Names stage (CSS)
 * Generated: 2026-11-10 15:04:30
 * Source: Custom
 * AUTO-GENERATED FILE — DO NOT EDIT.
 */

/* AMM: Names stage (CSS). Styles the live stage that am-names-stage.js builds from dl.am-names on the home page.
   Everything is scoped to .am-nx, which only exists once the script has run; without it the plain list keeps its old look. */
@property --nx-c{syntax:'<color>';inherits:true;initial-value:#62f2e3}
.am .am-nx{--nx-c:#62f2e3;position:relative;overflow:hidden;color:#d7e4e1;background:#071a26;background:radial-gradient(70% 60% at 78% 8%,color-mix(in srgb,var(--nx-c) 16%,transparent),transparent 70%),radial-gradient(50% 50% at 8% 100%,rgba(31,179,170,.14),transparent 70%),linear-gradient(180deg,#071a26,#0b2232);transition:--nx-c .9s ease}
.am .am-nx .am-names{display:none}
.am .am-nx .am-sec__head h2{color:#f3efe2}
.am .am-nx .am-sec__head a{color:var(--glow)}
.am .am-nx .am-sec__head a:hover{color:#b6fff6}

/* scrambling text: the real text stays in place for layout and screen readers, the overlay does the decoding */
.am-nx__scr{position:relative}
.am-nx__ov{position:absolute;inset:0 -3px 0 0;pointer-events:none;font-family:'Reem Kufi','Noto Sans Phoenician','Frank Ruhl Libre','Segoe UI Historic',ui-sans-serif,system-ui,sans-serif;color:var(--nx-c);text-shadow:0 0 14px color-mix(in srgb,var(--nx-c) 70%,transparent)}
.am-nx__scr.is-scr>.am-nx__fin{color:transparent}
.am-nx__wd{white-space:nowrap}
.am-nx__ch{display:inline-block;text-align:center;overflow:visible}

.am-nx__grid{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);grid-template-areas:'rail stage' 'rail panel';gap:26px 56px;align-items:start}

/* the stage */
.am-nx__stage{grid-area:stage;position:relative;height:clamp(300px,33vw,440px);border-radius:24px 24px 6px 6px;overflow:hidden;border:1px solid color-mix(in srgb,var(--nx-c) 26%,transparent);background:radial-gradient(60% 70% at 50% 50%,color-mix(in srgb,var(--nx-c) 10%,transparent),transparent 72%),#051521;box-shadow:0 30px 80px -40px color-mix(in srgb,var(--nx-c) 55%,transparent),inset 0 0 0 1px rgba(255,255,255,.02);touch-action:pan-y;cursor:crosshair;transition:border-color .9s,box-shadow .9s}
.am-nx__canvas{position:absolute;inset:0;display:block}
.am-nx__hint{position:absolute;left:18px;right:60px;bottom:14px;margin:0;font-family:var(--f-kufi);font-size:13px;line-height:1.3;color:#8fb2ac;pointer-events:none;transition:opacity .6s}
.am-nx__stage.is-touched .am-nx__hint{opacity:0}
.am .am-nx__pause{position:absolute;right:12px;bottom:10px;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(143,178,172,.35);background:rgba(5,21,33,.6);color:#a9c9c3;cursor:pointer;display:grid;place-items:center}
.am .am-nx__pause:hover{color:#fff;border-color:var(--nx-c);background:rgba(5,21,33,.8)}
.am-nx__pause::before{content:'';width:10px;height:12px;background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 7px,currentColor 7px 10px)}
.am-nx__pause.is-paused::before{width:0;height:0;background:none;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.am .am-nx__pause:focus-visible{outline:2px solid var(--nx-c);outline-offset:2px}

/* the description */
.am-nx__panel{grid-area:panel;position:relative}
.am-nx__desc{margin:0;max-width:52ch;font-family:var(--f-serif);font-size:21px;line-height:1.55;color:#cfe0dc}
.am .am-nx__desc a{color:var(--nx-c)}
.am-nx__w{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(.45em);transition:opacity .45s ease,filter .6s ease,transform .7s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i,0) * 24ms)}
.am-nx__desc.is-in .am-nx__w{opacity:1;filter:none;transform:none}

/* the names */
.am-nx__rail{grid-area:rail;display:flex;flex-direction:column}
.am .am-nx__tab{position:relative;display:block;width:100%;margin:0;padding:17px 0 19px;border:0;border-top:1px solid rgba(98,242,227,.14);background:none;text-align:left;font-family:var(--f-kufi);font-size:21px;font-weight:500;line-height:1.25;color:#7f9e99;cursor:pointer;transition:color .3s,padding-left .4s cubic-bezier(.2,.75,.2,1)}
.am .am-nx__tab:hover{color:#e2eeeb;background:none}
.am .am-nx__tab[aria-selected=true]{color:#f3efe2;padding-left:14px}
.am .am-nx__tab:focus-visible{outline:2px solid var(--nx-c);outline-offset:3px}
.am-nx__tab::before{content:'';position:absolute;left:0;top:22px;bottom:24px;width:2px;border-radius:2px;background:var(--nx-c);box-shadow:0 0 12px var(--nx-c);transform:scaleY(0);transition:transform .4s cubic-bezier(.2,.75,.2,1)}
.am-nx__tab[aria-selected=true]::before{transform:scaleY(1)}
.am-nx__label{display:block}
.am-nx__bar{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--nx-c);box-shadow:0 0 8px var(--nx-c);transform:scaleX(0);transform-origin:left}

@media (max-width:900px){
  .am .am-nx{padding:64px 0 72px}
  .am-nx__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:'stage' 'panel' 'rail';gap:20px}
  .am-nx__stage{height:clamp(250px,74vw,400px);border-radius:20px 20px 6px 6px}
  .am-nx__desc{font-size:18px}
  .am-nx__rail{flex-direction:row;flex-wrap:wrap;gap:8px}
  .am .am-nx__tab{width:auto;padding:9px 14px 10px;border:1px solid rgba(98,242,227,.22);border-radius:999px;font-size:15px;overflow:hidden}
  .am .am-nx__tab[aria-selected=true]{padding-left:14px;border-color:var(--nx-c);background:color-mix(in srgb,var(--nx-c) 12%,transparent)}
  .am-nx__tab::before{display:none}
  .am-nx__bar{top:auto;bottom:0;height:2px}
}
@media (prefers-reduced-motion:reduce){
  .am .am-nx{transition:none}
  .am-nx__w{opacity:1;filter:none;transform:none;transition:none}
  .am .am-nx__tab,.am-nx__tab::before{transition:none}
}