/* aos-demo.css — the Studio, to look round (assets/aos-demo.js builds it; /aos).

   A look-alike of make.mensch.club in a window: its top bar, its menu, and its seven
   screens (Kit, Projects, Assets, Approvals, Release, History, Tools). Everything can
   be opened and read; nothing can be changed, made or asked: those controls answer
   "Nice try". It is there to use from the start; a short tour, a card a step, begins by itself
   once the window is in view.

   Scale. The window is drawn at the Studio's own sizes for a 1300px window and
   everything inside is in em, with the em set from the window's width (a container
   query unit), so a narrower window is the same picture, smaller, down to a floor
   where the layout changes instead (the @container rules at the foot).

   The colours are the Studio's own (its globals.css), written out here: the window is
   a surface of its own on any page. The resets are in :where(), so they never outrank
   a class. The window must not sit inside a page's styled section (.section h2 and the
   like would reach its headings). */
.ax { position: relative; width: 95vw; margin: 0 auto; }
.ax-cq { container-type: inline-size; }   /* the container the window's cq units and @container rules read; it holds only the window (a container contains fixed descendants, and the phone's card must not be) */
.ax-app {
  --chrome: #ebebe7; --canvas: #fafaf5; --deep: #f2f1e8; --raised: #fff; --raised2: #efeee5;
  --ink: #1e1d16; --strong: #000; --soft: rgba(30,29,22,.66); --faint: rgba(30,29,22,.46);
  --acc: #fb3f0c; --acc-deep: #d42d00; --acc-tint: rgba(251,63,12,.12); --lime: #bbee2f; --ok: #2e7d1e; --warn: #b82c00;
  --line: rgba(30,29,22,.1); --line2: rgba(30,29,22,.2); --edge: rgba(30,29,22,.55); --glass: rgba(255,255,255,.62); --lift: rgba(30,29,22,.06);
  --ax-ease: cubic-bezier(.16, 1, .3, 1); --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  position: relative; display: grid; grid-template-columns: 13em minmax(0, 1fr); grid-template-rows: 4.3em minmax(0, 1fr);
  height: clamp(460px, 56cqw, 86svh); font: 400 clamp(9.5px, 1.077cqw, 15px)/1.5 'Be Vietnam Pro', system-ui, sans-serif; color: var(--ink); text-align: left;
  background: var(--chrome); border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(42,8,0,.3), 0 30px 80px rgba(42,8,0,.28);
  -webkit-font-smoothing: antialiased; transition: filter .9s var(--ax-ease), transform .9s var(--ax-ease), opacity .9s var(--ax-ease); }
.ax-app *, .ax-app *::before, .ax-app *::after { box-sizing: border-box; }
:where(.ax-app) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.ax-app) :is(h1, h2, h3, h4, p, dl, dd, dt, ul, li, figure) { margin: 0; padding: 0; font: inherit; color: inherit; list-style: none; }
:where(.ax-app) svg { display: block; width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ax-app :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ax-app ::selection { background: var(--acc); color: #fff; }
.ax-app * { scrollbar-width: thin; scrollbar-color: rgba(30,29,22,.2) transparent; }

/* ---- top bar ---- */
.ax-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 1.15em 0 1.55em; background: var(--canvas); box-shadow: 0 1px 0 rgba(30,29,22,.07); position: relative; z-index: 2; }
.ax-top-l, .ax-top-r { display: flex; align-items: center; gap: .75em; }
.ax-top-r { gap: 1.1em; }
.ax-logo { height: 1.85em; width: auto; display: block; }
.ax-ic { position: relative; display: inline-grid; place-items: center; width: 2.55em; height: 2.55em; border-radius: 50%; color: var(--strong); transition: background .2s; }
.ax-ic:hover { background: var(--lift); }
.ax-ver { font-size: .93em; color: var(--ink); white-space: nowrap; }
.ax-live { display: inline-flex; align-items: center; gap: .5em; font-size: .93em; white-space: nowrap; }
.ax-live i { width: .57em; height: .57em; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: ax-ping 2.4s ease-out infinite; }
@keyframes ax-ping { 70%, 100% { box-shadow: 0 0 0 .5em rgba(74,222,128,0); } }
.ax-bell b { position: absolute; top: .1em; right: .05em; min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: 999px; background: var(--acc); color: #fff; font: 500 .64em/1.5em 'Be Vietnam Pro', sans-serif; text-align: center; }
.ax-me { display: inline-flex; align-items: center; gap: .6em; }
.ax-me img { width: 2.45em; height: 2.45em; border-radius: 50%; object-fit: cover; display: block; }
.ax-me span { display: grid; line-height: 1.2; }
.ax-me b { font-weight: 500; font-size: .93em; color: var(--strong); }
.ax-me small { font-size: .78em; color: var(--soft); }
.ax-me svg { width: 1em; height: 1em; color: var(--soft); }

/* ---- menu ---- */
.ax-side { display: flex; flex-direction: column; padding: 3.4em .86em 1.1em; min-height: 0; overflow: hidden; }
.ax-new { display: grid; gap: .15em; }
.ax-new button { display: flex; align-items: center; gap: .45em; min-height: 2.5em; padding: 0 1em; border-radius: .7em; font-weight: 500; font-size: 1.07em; color: var(--strong); transition: background .2s; }
.ax-new button:hover { background: var(--glass); }
.ax-new svg { width: 1em; height: 1em; color: var(--soft); }
.ax-menu { margin-top: auto; display: grid; gap: .15em; padding-top: 1.2em; }
.ax-menu button { display: flex; align-items: center; min-height: 2.5em; padding: 0 1em; border-radius: .7em; font-size: 1.07em; line-height: 1; color: var(--soft); transition: color .2s, background .2s; }
.ax-menu button:hover { color: var(--strong); background: var(--glass); }
.ax-menu button[aria-current="page"] { color: var(--strong); background: #fff; box-shadow: 0 1px 3px rgba(42,8,0,.08), inset 0 0 0 1px rgba(30,29,22,.06); }
.ax-menu .ax-gap { margin-top: 1.15em; }
.ax-mark { width: 2em; height: auto; margin: 1.9em 0 1.6em 1em; stroke: none; fill: #000; }

/* ---- the workspace ---- */
.ax-main { min-width: 0; min-height: 0; padding: .7em .7em .7em 0; display: flex; }
.ax-pane { flex: 1; min-width: 0; min-height: 0; display: none; }
.ax-pane.is-on { display: grid; }
.ax-sheet { background: var(--canvas); border-radius: 1.15em; box-shadow: 0 0 0 1px rgba(30,29,22,.07); overflow: auto; min-height: 0; min-width: 0; }
.ax-pad { padding: 2.1em 2.4em 4em; }
.ax-h1 { font-size: 2.3em; line-height: 1.1; letter-spacing: -.01em; color: var(--strong); }
.ax-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2em; margin-bottom: 1.8em; }
.ax-head p { margin-top: .5em; color: var(--soft); }
.ax-eyebrow { font: 500 .78em/1.2 'Be Vietnam Pro', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.ax-search { display: flex; align-items: center; gap: .55em; min-height: 2.85em; padding: 0 .9em; border-radius: 999px; border: 1px solid var(--line2); background: var(--glass); color: var(--soft); }
.ax-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--strong); padding: 0; }
.ax-search input::placeholder { color: var(--soft); }
.ax-search:focus-within { border-color: var(--edge); }
.ax-seg { display: inline-flex; gap: .15em; padding: .2em; border-radius: 999px; border: 1px solid var(--line); background: rgba(30,29,22,.04); }
.ax-seg button { min-height: 2.9em; padding: 0 1.4em; border: 1px solid transparent; border-radius: 999px; color: var(--soft); font: 500 .78em/1 'Be Vietnam Pro', sans-serif; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; transition: color .2s, background .2s; }
.ax-seg button[aria-pressed="true"] { background: #fff; border-color: var(--line); color: var(--strong); box-shadow: 0 1px 3px rgba(42,8,0,.1); }
.ax-btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 4em; padding: 0 2em; border-radius: 999px; border: 1px solid var(--line2); color: var(--strong);
  font: 500 .78em/1 'Be Vietnam Pro', sans-serif; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; transition: background .2s var(--ax-ease), border-color .2s var(--ax-ease); }
.ax-btn:hover { background: var(--lift); border-color: var(--edge); }
.ax-btn.is-acc { background: var(--acc); border-color: var(--acc); color: #fff; }
.ax-btn.is-acc:hover { background: var(--acc-deep); border-color: var(--acc-deep); }
.ax-btn.is-ghost { border-color: transparent; }
.ax-btn.is-ghost:hover { border-color: var(--line2); }
.ax-btn.is-sm { min-height: 3.1em; padding: 0 1.3em; font-size: .72em; }
.ax-btn.is-block { width: 100%; }
.ax-btn svg { width: 1.35em; height: 1.35em; }
.ax-arrow { display: inline-grid; place-items: center; width: 2.85em; height: 2.85em; border-radius: 50%; border: 1px solid var(--line2); color: var(--strong); flex: none; transition: background .2s, border-color .2s; }
.ax-pill { display: inline-flex; align-items: center; gap: .75em; min-height: 2.65em; padding: 0 1.2em 0 1em; border-radius: 999px; border: 1px solid var(--line2); font: 500 .75em/1 'Be Vietnam Pro', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--strong); white-space: nowrap; }
.ax-pill i, .ax-dot { flex: none; width: .65em; height: .65em; border-radius: 50%; background: var(--strong); }
.ax-dot { width: .5em; height: .5em; }
.t-accent i, .ax-dot.t-accent { background: var(--acc); } .t-accent i { box-shadow: 0 0 0 3px var(--acc-tint); } .ax-pill.t-accent { border-color: rgba(251,63,12,.55); }
.t-ok i { background: var(--lime); } .ax-dot.t-ok { background: var(--ok); }
.t-dim i, .ax-dot.t-dim { background: var(--faint); }

/* ---- two columns: a list, and what is open (Kit, Projects, Approvals) ---- */
.ax-two { display: grid; grid-template-columns: 21.4em minmax(0, 1fr); padding: .86em; overflow: hidden; }
.ax-two.is-kit { grid-template-columns: 19.3em minmax(0, 1fr); }
.ax-nav { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .86em; min-height: 0; padding: .3em .86em 0 .57em; }
.ax-nav.has-seg { grid-template-rows: auto auto minmax(0, 1fr); }
.ax-nav .ax-seg { display: flex; } .ax-nav .ax-seg button { flex: 1; padding: 0 .4em; }
.ax-scroll { overflow-y: auto; min-height: 0; display: grid; align-content: start; gap: 1.15em; padding-bottom: 1.7em; }
.ax-count { font: 500 .71em/1.2 'Be Vietnam Pro', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 0 .9em; }
.ax-open-pane { min-height: 0; overflow-y: auto; border-radius: .86em; background: var(--deep); border: 1px solid var(--line); }
/* Kit */
.ax-gname { font: 500 .71em/1.2 'Be Vietnam Pro', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 0 .9em .5em; }
.ax-file { display: flex; align-items: center; justify-content: space-between; gap: .5em; width: 100%; min-height: 2.15em; padding: .36em .72em; border-radius: .57em; font: 500 .89em/1.3 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.ax-file:hover { color: var(--strong); background: var(--glass); }
.ax-file[aria-current="true"] { color: var(--strong); background: var(--lift); }
.ax-file.is-lock { color: var(--faint); cursor: not-allowed; }
.ax-file svg { width: 1em; height: 1em; opacity: .7; }
.ax-file[hidden], .ax-group[hidden] { display: none; }
.ax-none { padding: 0 .9em; color: var(--soft); font-size: .93em; }
.ax-doc { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.ax-docbar { display: flex; align-items: baseline; gap: .86em; min-height: 4em; padding: 1.35em 1.3em 0; border-bottom: 1px solid var(--line); }
.ax-docbar b { font: 500 .93em/1 var(--mono); color: var(--strong); white-space: nowrap; }
.ax-docbar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: .86em/1 var(--mono); color: var(--faint); }
.ax-code { margin: 0; padding: 1.3em 1.6em 4em; overflow: auto; font: .89em/1.7 var(--mono); counter-reset: line; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.ax-code span { display: block; padding-left: 4.2em; position: relative; min-height: 1.7em; }
.ax-code span::before { counter-increment: line; content: counter(line); position: absolute; left: 0; width: 2.9em; text-align: right; color: var(--faint); }
.ax-code b { font-weight: 500; color: var(--strong); }
.ax-code code { font: inherit; color: #a82400; }
.ax-code .h { font-weight: 700; color: var(--strong); }
.ax-code .d, .ax-code .more { color: var(--faint); }
/* Projects and Approvals: the list */
.ax-rows { gap: .15em; }
.ax-row { display: grid; gap: .3em; width: 100%; padding: .72em; border-radius: .57em; color: var(--soft); transition: background .2s, color .2s; }
.ax-row:hover { color: var(--strong); background: var(--glass); }
.ax-row[aria-current="true"] { background: #fff; color: var(--strong); box-shadow: 0 1px 3px rgba(42,8,0,.08); }
.ax-row[hidden] { display: none; }
.ax-row-top { display: flex; align-items: center; justify-content: space-between; }
.ax-id { font: 500 .82em/1 var(--mono); color: var(--faint); white-space: nowrap; }
.ax-row b { font-weight: 500; font-size: .96em; line-height: 1.3; color: inherit; }
/* Projects: the record */
.ax-rec { padding: 2.1em 2.5em 4.5em; }
.ax-rec h1 { font-size: 2.2em; line-height: 1.12; letter-spacing: -.01em; color: var(--strong); margin: .35em 0 .55em; }
.ax-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.5em; color: var(--soft); }
.ax-meta b { font-weight: 500; color: var(--strong); }
.ax-meta .ax-btn { margin-left: auto; }
.ax-rec-rule { height: 1px; background: var(--line); margin: 1.7em 0; }
.ax-rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18.5em; gap: 2.1em; align-items: start; }
.ax-lead { font-size: 1.2em; line-height: 1.45; color: var(--strong); max-width: 34em; margin-top: 1.4em; }
.ax-sec { margin-top: 2em; padding-top: 1.9em; border-top: 1px solid var(--line); }
.ax-sec h2 { font-size: 1.55em; line-height: 1.15; color: var(--strong); margin-bottom: .9em; }
.ax-dl { display: grid; grid-template-columns: 13em minmax(0, 1fr); }
.ax-dl dt { padding: .85em 1em .85em 0; border-top: 1px solid var(--line); font: 500 .75em/1.5 'Be Vietnam Pro', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); }
.ax-dl dd { padding: .72em 0; border-top: 1px solid var(--line); color: var(--ink); }
.ax-dl dt:first-of-type, .ax-dl dd:first-of-type { border-top: 0; }
.ax-time { display: grid; gap: 1.3em; margin-top: 1.6em; }
.ax-time li { display: grid; grid-template-columns: 7.6em 1em minmax(0, 1fr); gap: .9em; align-items: start; }
.ax-time time { font: 500 .82em/1.7 var(--mono); color: var(--faint); }
.ax-time i { width: .72em; height: .72em; margin-top: .42em; border-radius: 50%; border: 2px solid var(--acc); background: var(--deep); }
.ax-card { display: grid; gap: 1.1em; padding: 1.55em; border-radius: 1.15em; background: rgba(255,255,255,.62); border: 1px solid rgba(30,29,22,.12); box-shadow: 0 12px 32px rgba(42,8,0,.08), inset 0 1px 0 rgba(255,255,255,.9); }
.ax-card + .ax-card { margin-top: 1em; }
.ax-card h3 { font-weight: 500; font-size: 1.2em; line-height: 1.15; color: var(--strong); }
.ax-miss li, .ax-ticks li { position: relative; padding-left: 1.6em; font-size: .93em; line-height: 1.4; }
.ax-miss li + li, .ax-ticks li + li { margin-top: .7em; }
.ax-miss li::before { content: ''; position: absolute; left: .25em; top: .5em; width: .4em; height: .4em; border-radius: 50%; background: var(--warn); }
.ax-ticks li { padding-left: 2.1em; }
.ax-ticks li::before { content: ''; position: absolute; left: 0; top: .05em; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 72% no-repeat; }
.ax-tabpane { display: none; } .ax-tabpane.is-on { display: block; }
/* Approvals: the card */
.ax-ap { padding: 1.7em 2.1em 3em; }
.ax-cover { height: clamp(11em, 17cqw, 16.5em); border-radius: 1.15em; background: #2a0800 center / cover no-repeat; overflow: hidden; }
.ax-cover.is-fit { background-size: contain; }
.ax-cover.is-none { display: grid; place-items: center; color: rgba(255,255,255,.5); font: 500 .78em/1 'Be Vietnam Pro', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.ax-ap-in { max-width: 52em; padding: 0 .2em; }
.ax-ap-top { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: 1.7em 0 1.1em; }
.ax-ap h2 { font-size: 1.85em; line-height: 1.15; color: var(--strong); margin-bottom: .75em; }
.ax-ap h4 { margin: 0 0 .5em; }
.ax-ap-what { font-size: 1.07em; line-height: 1.45; color: var(--strong); max-width: 41em; }
.ax-ap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7em; margin-top: 1.4em; color: var(--soft); font-size: .93em; }
.ax-ap-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-top: 1.6em; padding-top: 1.1em; border-top: 1px solid var(--line); color: var(--soft); }
.ax-ap-foot div { display: flex; align-items: center; gap: .6em; }
.ax-badge { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--raised2); color: var(--strong); font: 500 .68em/1 'Be Vietnam Pro', sans-serif; overflow: hidden; flex: none; }
.ax-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-badge.is-agent { background: var(--acc); color: #fff; margin-left: -.5em; }
.ax-badge.is-agent svg { width: 60%; height: 60%; fill: #fff; stroke: none; }

/* ---- Assets ---- */
.ax-as-head { display: flex; align-items: center; gap: 1.2em; margin-bottom: 1.7em; }
.ax-as-head .ax-search { margin-left: auto; width: min(30em, 40%); }
.ax-fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5em, 1fr)); gap: 1.2em; }
.ax-fam { display: flex; align-items: stretch; min-height: 6.6em; border: 1px solid var(--line2); border-radius: 1.15em; background: var(--raised); overflow: hidden; transition: border-color .4s var(--ax-ease), transform .4s var(--ax-ease); }
.ax-fam:hover { border-color: var(--strong); transform: translateY(-3px); }
.ax-fam[hidden] { display: none; }
.ax-fam-foot { display: flex; flex: 1; align-items: flex-end; justify-content: space-between; gap: .7em; padding: 1em 1.05em 1em; }
.ax-fam-foot b { display: block; font-weight: 500; font-size: 1.2em; line-height: 1.2; color: var(--strong); }
.ax-fam-foot small { font-size: .82em; color: var(--soft); }
.ax-back { display: inline-flex; align-items: center; gap: .5em; min-height: 2.6em; padding: 0 1.1em; border-radius: 999px; border: 1px solid var(--line2); font-size: .93em; color: var(--strong); margin-bottom: 1.3em; }
.ax-back svg { transform: rotate(180deg); width: 1em; height: 1em; }
.ax-back:hover { background: var(--lift); }
.ax-as-h2 { display: flex; align-items: baseline; gap: .8em; margin-bottom: 1.2em; }
.ax-as-h2 h2 { font-size: 1.85em; line-height: 1.1; color: var(--strong); }
.ax-as-h2 small { color: var(--soft); }
.ax-as-h2 .ax-btn { margin-left: auto; } .ax-as-h2 .ax-btn + .ax-btn { margin-left: 0; }
.ax-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5em, 1fr)); gap: .86em; }
.ax-tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: .86em; border: 1px solid var(--line); overflow: hidden;
  background: #fff conic-gradient(#f0efe7 25%, transparent 0 50%, #f0efe7 0 75%, transparent 0) 0 0 / 1.4em 1.4em; }
.ax-tile img { max-width: 76%; max-height: 76%; object-fit: contain; display: block; }
.ax-tile.is-full img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
.ax-tile.is-linked { border-color: var(--acc); }
.ax-tile button { position: absolute; top: .6em; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(42,8,0,.18); color: var(--strong); opacity: 0; transition: opacity .2s; }
.ax-tile button:first-of-type { left: .6em; } .ax-tile button:last-of-type { right: .6em; }
.ax-tile:hover button, .ax-tile button:focus-visible, .ax-tile.is-linked button:first-of-type { opacity: 1; }
.ax-tile.is-linked button:first-of-type { background: var(--acc); color: #fff; }
.ax-tile figcaption { position: absolute; left: .6em; bottom: .5em; font-size: .75em; color: var(--soft); background: rgba(255,255,255,.85); padding: .1em .55em; border-radius: 999px; }

/* ---- Release ---- */
.ax-rel { grid-template-columns: minmax(0, 1fr) 18.6em; }
.ax-stage { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ax-rel-bar { display: flex; align-items: center; gap: .9em; padding: .9em 1.1em .5em 1.4em; }
.ax-rel-bar > div:first-child { margin-right: auto; line-height: 1.3; }
.ax-rel-bar b { display: block; font-weight: 500; font-size: 1.1em; color: var(--strong); }
.ax-rel-bar small { color: var(--soft); font-size: .86em; }
.ax-rel-bar .ax-arrow { width: 2.3em; height: 2.3em; background: rgba(255,255,255,.7); border-color: var(--line); }
.ax-rel-n { font-size: .93em; white-space: nowrap; min-width: 5.6em; text-align: center; }
.ax-q { overflow: auto; padding: .6em 1.4em 3em; }
.ax-q h1 { font-size: 1.85em; line-height: 1.15; color: var(--strong); margin: .3em 0 .35em; }
.ax-q > p { font-size: 1.07em; max-width: 44em; color: var(--ink); margin-bottom: 1.2em; }
.ax-q-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.4em; align-items: start; }
.ax-q h4 { margin-bottom: .7em; }
.ax-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2em, 1fr)); gap: .9em .45em; }
.ax-sw figure { margin: 0; }
.ax-sw div { padding: .55em .65em .6em; border-radius: .57em; border: 1px solid var(--line); line-height: 1.25; min-height: 4.2em; }
.ax-sw div b { display: block; font-family: 'Greed Narrow', 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 1.15em; }
.ax-sw div small { font-size: .7em; }
.ax-sw figcaption { font-size: .75em; color: var(--soft); margin: .45em 0 .35em; line-height: 1.25; }
.ax-tag { display: inline-flex; align-items: center; min-height: 1.9em; padding: 0 .75em; border-radius: 999px; border: 1px solid var(--line2); font-size: .72em; color: var(--soft); white-space: nowrap; }
.ax-tag.is-ok { color: var(--ok); border-color: rgba(46,125,30,.45); } .ax-tag.is-mid { color: #7a9a10; border-color: rgba(187,238,47,.9); } .ax-tag.is-no { color: var(--warn); border-color: rgba(184,44,0,.4); }
.ax-tag.is-sugg { background: var(--lime); border-color: var(--lime); color: #1e1d16; }
.ax-spec { padding: 1em 1.1em; border-radius: .7em; background: var(--raised2); border: 1px solid var(--line); font-weight: 500; font-size: 1.5em; line-height: 1.3; color: var(--strong); }
.ax-q small.ax-note { display: block; margin: .6em 0 1.2em; color: var(--soft); font-size: .82em; }
.ax-live-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7em; padding: 1.5em 1em; border-radius: .7em; background: #2a0800; }
.ax-live-box span { display: inline-flex; align-items: center; min-height: 2.6em; padding: 0 1.3em; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); color: #fff; font: 500 .62em/1 'Be Vietnam Pro', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.ax-live-box span.is-fill { background: var(--acc); border-color: var(--acc); }
.ax-live-box span.is-focus { outline: 2px solid var(--acc); outline-offset: 2px; }
.ax-ab { display: grid; gap: .7em; max-width: 40em; }
.ax-ab div { display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: .8em; align-items: start; padding: 1em 1.1em; border-radius: .86em; background: #fff; border: 1px solid var(--line2); }
.ax-ab div.is-pick { border-color: var(--strong); }
.ax-ab b { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--raised2); font-weight: 500; font-size: .86em; color: var(--strong); }
.ax-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); gap: .6em; }
.ax-pics .ax-tile { border-radius: .6em; }
.ax-opts { display: flex; flex-direction: column; gap: .7em; min-height: 0; padding-left: .7em; overflow: auto; }
.ax-ask { padding: .9em 1em 1em; border-radius: 1.15em; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(42,8,0,.06); display: grid; gap: .65em; }
.ax-done { display: flex; align-items: flex-start; gap: .6em; font-size: .86em; line-height: 1.35; color: var(--soft); }
.ax-done i { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--ok); color: #fff; }
.ax-done i svg { width: 60%; height: 60%; stroke-width: 2.6; }
.ax-done em { font-style: normal; color: var(--ok); }
.ax-done button { margin-left: auto; text-decoration: underline; text-underline-offset: 2px; color: var(--soft); }
.ax-ask h3 { font-weight: 500; font-size: 1.07em; line-height: 1.25; color: var(--strong); }
.ax-ask-s { display: flex; align-items: center; gap: .6em; font-weight: 500; color: var(--strong); }
.ax-ask small { color: var(--soft); font-size: .82em; line-height: 1.35; }
.ax-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.ax-chips button { display: inline-flex; align-items: center; min-height: 2.3em; padding: 0 .95em; border-radius: 999px; background: var(--acc); color: #fff; font-size: .82em; white-space: nowrap; }
.ax-key { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.3em; padding: 0 .7em 0 1.2em; border-radius: 999px; border: 1px solid var(--line2); font: 500 .72em/1 'Be Vietnam Pro', sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--strong); }
.ax-key:hover { background: var(--lift); }
.ax-key.is-acc { background: var(--acc); border-color: var(--acc); color: #fff; }
.ax-key kbd { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .4em; border: 1px solid currentColor; font: inherit; opacity: .8; }
.ax-out { padding: 1em 1.15em; border-radius: 1.15em; background: rgba(255,255,255,.6); border: 1px solid rgba(30,29,22,.12); display: grid; gap: .55em; }
.ax-out h2 { font-size: 1.55em; line-height: 1.1; color: var(--strong); }
.ax-meter { height: .3em; border-radius: 999px; background: var(--ok); }
.ax-opts > .ax-btn { margin-top: auto; flex: none; }

/* ---- History ---- */
.ax-week { display: flex; align-items: center; gap: .65em; margin: 1.3em 0 .8em; color: var(--soft); font-size: .93em; }
.ax-week:first-of-type { margin-top: 0; }
.ax-week i { width: .9em; height: .9em; border-radius: 50%; border: 1.5px solid var(--soft); }
.ax-hi { border: 1px solid var(--line2); border-radius: .7em; background: #fff; overflow: hidden; margin-bottom: .65em; }
.ax-hi[hidden] { display: none; }
.ax-hi-row { display: flex; align-items: center; gap: 1em; width: 100%; padding: 1em 1.15em; }
.ax-hi-row > span:first-child { flex: 1; min-width: 0; display: grid; gap: .55em; }
.ax-hi-row b { font-weight: 500; line-height: 1.4; color: var(--strong); }
.ax-hi-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; font-size: .86em; color: var(--soft); }
.ax-hi-meta strong { font-weight: 500; color: var(--strong); margin-left: .25em; }
.ax-hi-meta code { font: .93em var(--mono); color: var(--ink); }
.ax-rel-pill { flex: none; display: inline-flex; align-items: center; min-height: 2em; padding: 0 .85em; border-radius: 999px; background: var(--acc); color: #fff; font-weight: 500; font-size: .86em; white-space: nowrap; }
.ax-chg { font: .8em var(--mono); color: var(--faint); white-space: nowrap; }
.ax-hi-row > svg { color: var(--soft); transition: transform .3s var(--ax-ease); }
.ax-hi.is-on .ax-hi-row > svg { transform: rotate(180deg); }
.ax-hi-more { display: none; border-top: 1px solid var(--line); }
.ax-hi.is-on .ax-hi-more { display: block; }
.ax-diff-head { padding: .6em 1.15em; background: var(--deep); font: .82em var(--mono); color: var(--soft); border-bottom: 1px solid var(--line); }
.ax-diff-head em { font-style: normal; color: var(--ok); } .ax-diff-head s { text-decoration: none; color: var(--warn); }
.ax-diff { margin: 0; font: .82em/1.7 var(--mono); white-space: pre-wrap; word-break: break-word; }
.ax-diff span { display: block; padding: 0 1.15em 0 2.6em; position: relative; }
.ax-diff span::before { position: absolute; left: 1.15em; }
.ax-diff .a { background: rgba(36,193,14,.1); } .ax-diff .a::before { content: '+'; color: var(--ok); }
.ax-diff .r { background: rgba(251,63,12,.1); } .ax-diff .r::before { content: '\2212'; color: var(--warn); }
.ax-hi-note { padding: 1em 1.15em; color: var(--ink); font-size: .93em; display: grid; gap: .8em; justify-items: start; }

/* ---- Tools ---- */
.ax-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15em; margin-top: 1.6em; }
.ax-tool { position: relative; display: grid; align-content: start; gap: .55em; min-height: 17em; padding: 1.55em 1.55em 5em; border-radius: 1.15em; border: 1px solid var(--line2); background: #fff; transition: border-color .4s var(--ax-ease), transform .4s var(--ax-ease), box-shadow .4s var(--ax-ease); }
.ax-tool:hover { border-color: var(--strong); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(42,8,0,.08); }
.ax-tool b { font-weight: 400; font-size: 1.85em; line-height: 1.15; letter-spacing: -.01em; color: var(--strong); }
.ax-tool span { line-height: 1.45; }
.ax-tool .ax-arrow { position: absolute; right: 1.1em; bottom: 1.1em; }

/* ---- "Nice try", and the shake of whatever was pressed ---- */
.ax-toast { position: absolute; left: 50%; bottom: 1.6em; z-index: 6; transform: translate(-50%, 10px); background: #FB3F0C; color: #fff; font: 500 11px/1 'Be Vietnam Pro', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; padding: 9px 16px; border-radius: 999px; box-shadow: 0 10px 30px rgba(42,8,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.ax-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ax-shake { animation: ax-shake .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes ax-shake { 20% { translate: -4px 0; } 50% { translate: 4px 0; } 80% { translate: -2px 0; } }

/* ---- the tour: a card that points at the thing to try, and a ring on that thing ---- */
.ax-coach { position: absolute; z-index: 7; width: min(268px, calc(100% - 24px)); padding: 12px 14px 12px; border-radius: 12px; background: rgba(42,8,0,.96); color: #fff; border: 1px solid #FB3F0C;
  box-shadow: 0 0 0 4px rgba(251,63,12,.16), 0 18px 48px rgba(42,8,0,.45);
  font: 400 12.5px/1.45 'Be Vietnam Pro', sans-serif; text-align: left; opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; transition: opacity .3s, transform .45s cubic-bezier(.16, 1, .3, 1), left .5s cubic-bezier(.16, 1, .3, 1), top .5s cubic-bezier(.16, 1, .3, 1); }
.ax-coach.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* the pointer: a corner of the card's own edge, turned out toward the thing */
.ax-coach::before { content: ''; position: absolute; width: 11px; height: 11px; background: rgba(42,8,0,.96); border: 1px solid #FB3F0C; transform: rotate(45deg); }
.ax-coach.is-right::before { left: -6.5px; top: 22px; border-width: 0 0 1px 1px; }
.ax-coach.is-left::before { right: -6.5px; top: 22px; border-width: 1px 1px 0 0; }
.ax-coach.is-below::before { top: -6.5px; left: 24px; border-width: 1px 0 0 1px; }
.ax-coach.is-above::before { bottom: -6.5px; left: 24px; border-width: 0 1px 1px 0; }
.ax-coach.is-docked::before { display: none; }
.ax-coach-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ax-coach-n { font: 500 9.5px/1 'Be Vietnam Pro', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ax-coach-x { display: grid; place-items: center; width: 22px; height: 22px; margin: -3px -6px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(255,255,255,.7); cursor: pointer; }
.ax-coach-x:hover { background: rgba(255,255,255,.12); color: #fff; }
.ax-coach-x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ax-coach h3 { margin: 0 0 3px; font-family: 'Greed Narrow', 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 21px; line-height: 1.05; color: #fff; }
.ax-coach p { margin: 0; color: rgba(255,255,255,.86); }
.ax-coach .ax-try { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.14); }
.ax-coach .ax-try b { font-weight: 500; color: #fff; }
.ax-coach-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.ax-coach-dots { display: flex; gap: 4px; }
.ax-coach-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.28); }
.ax-coach-dots i.is-on { background: #FB3F0C; }
.ax-coach-btns { display: flex; gap: 5px; }
.ax-coach-btns button { height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font: 500 9.5px/1 'Be Vietnam Pro', sans-serif; letter-spacing: 1.1px; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.ax-coach-btns button:hover { background: rgba(255,255,255,.14); }
.ax-coach-btns button.is-next { background: #FB3F0C; border-color: #FB3F0C; }
.ax-coach-btns button.is-next:hover { background: #D42D00; border-color: #D42D00; }
.ax-coach button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ax-hot { position: relative; z-index: 1; }
/* the ring round the thing: a layer of its own over the window (never cut off by a list's edge), pulsing */
.ax-ring { position: absolute; z-index: 6; pointer-events: none; opacity: 0; border-radius: 10px; box-shadow: 0 0 0 2px #FB3F0C, 0 0 0 0 rgba(251,63,12,.7); animation: ax-ring 1.7s ease-out infinite; transition: opacity .2s, left .25s cubic-bezier(.16, 1, .3, 1), top .25s cubic-bezier(.16, 1, .3, 1), width .25s cubic-bezier(.16, 1, .3, 1), height .25s cubic-bezier(.16, 1, .3, 1); }
.ax-ring.is-on { opacity: 1; }
@keyframes ax-ring { 0% { box-shadow: 0 0 0 2px #FB3F0C, 0 0 0 0 rgba(251,63,12,.7); } 75%, 100% { box-shadow: 0 0 0 2px #FB3F0C, 0 0 0 10px rgba(251,63,12,0); } }
/* a phone: the card is a slim sheet at the foot of the screen, outside the window; swiped between steps */
.ax-coach.is-sheet { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); top: auto; width: auto; padding: 10px 12px 10px; z-index: 450; font-size: 12px; transform: translateY(12px); }
.ax-coach.is-sheet.is-on { transform: none; }
.ax-coach.is-sheet.is-away { opacity: 0; pointer-events: none; transform: translateY(12px); }
body:has(.mc-ck-bar:not([hidden])) .ax-coach.is-sheet { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }   /* clear of the cookie bar */
.ax-coach.is-sheet::before { display: none; }
.ax-coach.is-sheet .ax-coach-top { position: absolute; right: 10px; top: 8px; margin: 0; }
.ax-coach.is-sheet .ax-coach-n { display: none; }
.ax-coach.is-sheet h3 { display: inline; margin: 0 .4em 0 0; font-size: 17px; }
.ax-coach.is-sheet h3 + p { display: inline; }
.ax-coach.is-sheet .ax-try { margin-top: 5px; padding-top: 5px; }
.ax-coach.is-sheet .ax-coach-foot { margin-top: 7px; }
.ax-coach.is-sheet .ax-coach-foot::before { content: attr(data-n); font: 500 9.5px/1 'Be Vietnam Pro', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-right: 8px; }
.ax-tourbtn { display: none; align-items: center; gap: .55em; height: 2.4em; margin-left: .3em; padding: 0 1.1em 0 .95em; border-radius: 999px; background: var(--acc); color: #fff; font: 500 .72em/1 'Be Vietnam Pro', sans-serif; letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(251,63,12,.55), 0 4px 18px rgba(251,63,12,.35); animation: ax-glow 2.4s ease-in-out infinite; transition: background .2s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.ax-tourbtn i { width: .6em; height: .6em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: ax-ping 2.4s ease-out infinite; }
.ax-tourbtn:hover { background: var(--acc-deep); transform: translateY(-1px); }
.ax.is-free .ax-tourbtn { display: inline-flex; }
@keyframes ax-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,63,12,.55), 0 4px 18px rgba(251,63,12,.35); } 50% { box-shadow: 0 0 0 9px rgba(251,63,12,0), 0 6px 30px rgba(251,63,12,.75); } }

/* ---- the Shaders tool ---- */
.ax-shd-stage { position: relative; min-height: 0; margin: .4em 1.4em 1.4em; border-radius: .86em; overflow: hidden; background: #2a0800; }
.ax-shd-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ax-shd-stage.is-flat { background: radial-gradient(circle at 40% 40%, #a82400, #2a0800 70%); }
.ax-shd-note { position: absolute; left: 1em; bottom: .8em; margin: 0; padding: .35em .8em; border-radius: 999px; background: rgba(0,0,0,.35); color: rgba(255,255,255,.8); font-size: .78em; pointer-events: none; }
.ax-swatches { display: flex; flex-wrap: wrap; gap: .5em; }
.ax-swatch { width: 2.1em; height: 2.1em; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(30,29,22,.15); cursor: pointer; transition: transform .2s var(--ax-ease), border-color .2s; }
.ax-swatch:hover { transform: scale(1.08); }
.ax-swatch[aria-pressed="true"] { border-color: var(--strong); }
.ax-swatch.is-none { background: linear-gradient(135deg, transparent 46%, var(--line2) 46%, var(--line2) 54%, transparent 54%); }
.ax-range { display: grid; gap: .25em; font-size: .86em; color: var(--soft); }
.ax-range span { display: flex; justify-content: space-between; } .ax-range em { font-style: normal; color: var(--strong); }
.ax-range input { width: 100%; margin: 0; accent-color: var(--acc); cursor: pointer; }
.ax-shd .ax-ask h3 + .ax-swatches { margin-bottom: .4em; }

/* ---- a narrow window: the menu is a row, the lists sit over what is open ---- */
@container (max-width: 760px) {
  .ax-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 4.3em auto minmax(0, 1fr); height: clamp(600px, 150cqw, 86svh); font-size: 11.5px; }
  .ax-top { padding: 0 .9em 0 1.1em; } .ax-ver, .ax-me span, .ax-me svg { display: none; }
  .ax-tourbtn { font-size: .66em; padding: 0 .9em 0 .8em; }
  .ax-side { flex-direction: row; align-items: center; padding: .6em .7em; gap: .3em; overflow-x: auto; scrollbar-width: none; }
  .ax-new, .ax-mark { display: none; }
  .ax-menu { margin: 0; padding: 0; display: flex; gap: .2em; }
  .ax-menu .ax-gap { margin: 0; } .ax-menu button { white-space: nowrap; }
  .ax-main { padding: 0 .6em .6em; }
  .ax-two, .ax-two.is-kit { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 34%) minmax(0, 1fr); gap: .7em; }
  .ax-nav { padding: .3em .3em 0; }
  .ax-rec { padding: 1.5em 1.3em 3em; } .ax-rec-grid, .ax-q-grid, .ax-ap-cols { grid-template-columns: minmax(0, 1fr); } .ax-dl { grid-template-columns: 9em minmax(0, 1fr); }
  .ax-ap { padding: 1em 1em 2.5em; } .ax-pad { padding: 1.5em 1.2em 3em; }
  .ax-head, .ax-as-head { flex-wrap: wrap; align-items: center; } .ax-as-head .ax-search { width: 100%; order: 3; margin: 0; }
  .ax-rel { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); gap: .7em; } .ax-opts { padding: 0; }
  .ax-tools { grid-template-columns: 1fr 1fr; } .ax-tool { min-height: 12em; }
  .ax-code span { padding-left: 3.2em; } .ax-code span::before { width: 2.2em; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-app, .ax-coach, .ax-toast { transition: none; }
  .ax-shake, .ax-ring, .ax-live i, .ax-tourbtn, .ax-tourbtn i { animation: none; }
  .ax-ring { box-shadow: 0 0 0 2px #FB3F0C; }
  .ax-hot { box-shadow: 0 0 0 2px #FB3F0C; }
}