/* Hypha · Invitation · the ARCHITECT card: the Architect page's sketch-to-real, scaled into the card.
   Lifted from the Architect bridge: the world's rule (architect/css/world.css, SKETCH UNTIL PROVEN: what is only
   imagined is pencil, what is established earns full colour and light) drawn as a pencil sheet of the screenshot
   sorter from its hero, its first row already held; beside it the real Claude Code terminal from its hero, in the
   look of architect/css/tools.css (.term, .t-runs). Every size is in em of the stage's unit (56 across the card's
   world). Keyframes only; select.css runs them only while .mini.is-live, and with reduced motion they are off and the
   sheet rests drawn and held (the resting state below IS the finished state). */

.sc-world > .mini.ax {
  container-type: inline-size;
  aspect-ratio: 56 / 50;
  max-width: 600px;
  /* un-boxed 10-27: no plate, no ring, no corner; the papers and the terminal float on the dark stage */
}
@media (min-width: 900px) {
  .sc-world > .mini.ax { width: calc(100% + min(3vw, 44px)); max-width: 640px; margin-left: calc(-1 * min(3vw, 44px)); }
}
.mini.ax b { display: inline; }
.ax .ax-stage { position: absolute; inset: 0; font-size: calc(100cqw / 56); }

/* ---------- the sheets of paper, the top one drawn on ---------- */
.ax .ax-paper {
  position: absolute;
  left: 1.8em;
  top: 3.4em;
  width: 27.6em;
  height: 33.1em;
  border-radius: 0.3em;
  background: linear-gradient(160deg, #fdfdfc 0%, #f9fafa 55%, #f1f3f1 100%);
  box-shadow:
    0 0 0 0.06em rgb(15 23 20 / 0.08),
    0 0.3em 0.6em -0.2em rgb(5 12 10 / 0.2),
    0 1.8em 3.6em -1.6em rgb(5 12 10 / 0.38);
}
.ax .ax-paper--3 { rotate: 5deg; translate: 1.5em 0.7em; background: #eef1ee; }
.ax .ax-paper--2 { rotate: -0.8deg; translate: 0.7em 0.3em; background: #f3f5f3; }
.ax .ax-paper--1 { rotate: -3deg; z-index: 1; }
.ax .ax-sk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; mix-blend-mode: multiply; }

/* the pencil (world.css: .sk-cons, .sk-pen, .sk-hat, .sk-txt, .sk-lbl) */
.ax .ax-sk path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ax .ax-cons path { stroke: #b4bbb6; stroke-width: 0.9; }
.ax .ax-pen path { stroke: #545c58; stroke-width: 1.5; }
.ax .ax-hat path { stroke: #848c87; stroke-width: 0.7; opacity: 0.55; }
.ax .ax-txt path { stroke: #a9b1ac; stroke-width: 2.6; }
.ax .ax-arrow path { stroke: #545c58; stroke-width: 1.2; }
.ax .ax-lbl text { font-family: var(--f-mono); font-weight: 500; font-size: 7.4px; letter-spacing: 0.08em; fill: #545c58; }
.ax .ax-lbl .ax-sm { font-size: 6px; fill: #848c87; }
.ax .ax-lbl .ax-note { font-size: 8.6px; letter-spacing: 0.1em; fill: #3e4643; }
.ax .ax-pool { mix-blend-mode: multiply; }
/* what held: ink, full colour, and its own light */
.ax .ax-rn { font: 600 8px var(--f-app); fill: #07100e; }
.ax .ax-rc { font: 400 6.4px var(--f-app); fill: #6b7178; }

/* the pencil that drew it, lying on the board */
.ax .ax-pencil {
  position: absolute;
  left: 6.2em;
  top: 41.2em;
  width: 19em;
  height: 1.05em;
  z-index: 2;
  rotate: -8deg;
  border-radius: 0.15em;
  background: linear-gradient(180deg, #4a524e 0%, #2a302d 45%, #161a18 100%);
  box-shadow: 0 1em 1.3em -0.5em rgb(5 12 10 / 0.55), inset 0 0.12em 0 rgb(255 255 255 / 0.18);
}
.ax .ax-pencil::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  width: 2.6em;
  height: 100%;
  background: linear-gradient(90deg, #3a3f3c 0 24%, #e7cd9c 24% 100%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.ax .ax-pencil::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 1.7em;
  height: 100%;
  border-radius: 0 0.3em 0.3em 0;
  background: linear-gradient(90deg, #aeb6b2 0 30%, #d9dedb 30% 40%, #8d9591 40% 55%, #c9cfcc 55% 100%);
}

/* ---------- the real thing: Claude Code in a terminal (tools.css .term + .t-runs) ---------- */
.ax .ax-term {
  position: absolute;
  left: 27.4em;
  top: 6.2em;
  width: 27.6em;
  height: 35.2em;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.1em;
  background: #0c1016;
  color: #ececec;
  -webkit-font-smoothing: antialiased;
  box-shadow:
    0 0 0 0.1em rgb(255 255 255 / 0.09),
    0 0 7em rgb(140 180 220 / 0.3),
    0 1.2em 2.4em -1em rgb(5 12 10 / 0.5),
    0 3.2em 9em -2em rgb(0 0 0 / 0.6);
}
.ax .ax-tb { flex: none; display: flex; align-items: center; height: 2.9em; padding: 0 1.2em; background: #151a22; border-bottom: 0.1em solid #1f2630; color: #9aa6b4; font: 500 1.04em var(--f-app); }
.ax .ax-dots { display: inline-flex; gap: 0.62em; }
.ax .ax-dots i { display: block; width: 1.02em; height: 1.02em; border-radius: 50%; }
.ax .ax-dots i:nth-child(1) { background: #ff5f57; }
.ax .ax-dots i:nth-child(2) { background: #febc2e; }
.ax .ax-dots i:nth-child(3) { background: #28c840; }
.ax .ax-tt { flex: 1; text-align: center; margin-right: 4.4em; white-space: nowrap; }
.ax .ax-body { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
/* a line scrolled up under the title bar fades out, as the page's own .t-pad covers it */
.ax .ax-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.6em; z-index: 1; background: linear-gradient(#0c1016 25%, rgb(12 16 22 / 0)); pointer-events: none; }
.ax .ax-in { flex: none; padding: 1.1em 1.4em 1.2em; font: 400 1.04em/1.58 var(--f-code); }
.ax .ax-in p { margin: 0; }
.ax .ax-hi { padding: 0.55em 1em 0.65em; border: 0.1em solid #d77757; border-radius: 0.6em; color: #8d8d8d; }
.ax .ax-hi1 { color: #ececec; }
.ax .ax-hi1 b { font-weight: 700; }
.ax .ax-star { color: #d77757; }
.ax .ax-hi2 { margin-top: 0.3em !important; padding-left: 2ch; font-size: 0.9em; }
.ax .ax-in .ax-pr { margin-top: 0.8em; padding-left: 2ch; text-indent: -2ch; color: #8d8d8d; }
.ax .ax-in .ax-st { display: grid; grid-template-columns: 2ch minmax(0, 1fr); margin-top: 0.62em; color: #ececec; }
.ax .ax-st b { color: #fff; font-weight: 700; }
.ax .ax-s { position: relative; color: #8d8d8d; }
.ax .ax-s::before { content: ""; position: absolute; left: 0.1em; top: calc(0.79em - 0.29em); width: 0.58em; height: 0.58em; border-radius: 50%; background: currentColor; }
.ax .ax-done .ax-s { color: #4eba65; }
.ax .ax-say .ax-s { color: #ececec; }
.ax .ax-out { padding-left: 2ch; color: #8d8d8d; }
.ax .ax-out.ax-last { color: #4eba65; }
.ax .ax-l { display: inline-block; position: relative; width: 3ch; height: 1em; vertical-align: -0.12em; }
.ax .ax-l::before { content: ""; position: absolute; left: 0.3em; top: -0.12em; width: 0.62em; height: 0.62em; border-left: 0.1em solid #8d8d8d; border-bottom: 0.1em solid #8d8d8d; }
.ax .ax-in .ax-box { margin-top: 0.8em; padding: 0.3em 0.8em; border: 0.1em solid #5c5c5c; border-radius: 0.5em; color: #ececec; }
.ax .ax-caret { display: inline-block; width: 0.6em; height: 1.1em; vertical-align: -0.2em; background: #e2e8f0; animation: ax-caret 1s steps(1) infinite; }
.ax .ax-in .ax-sys { display: flex; flex-wrap: wrap; gap: 0 1.1em; margin: 0.35em 0 0 1em; font-size: 0.88em; color: #8d8d8d; }

/* ---------- the build, once, as the sheet comes into focus: pencil first, then the run, then the row holds ---------- */
.ax .ax-sk [pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: ax-draw 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both; }
.ax .ax-pen [pathLength] { animation-delay: 0.15s; }
.ax .ax-txt [pathLength], .ax .ax-hat [pathLength] { animation-delay: 0.5s; }
.ax .ax-arrow [pathLength] { animation-delay: 0.7s; }
.ax .ax-lbl { animation: ax-fade 0.5s ease 0.45s both; }
.ax .ax-in > .ax-st, .ax .ax-in > .ax-out { animation: ax-step 0.3s ease both; }
.ax .ax-in > :nth-child(3) { animation-delay: 0.3s; }
.ax .ax-in > :nth-child(4) { animation-delay: 0.45s; }
.ax .ax-in > :nth-child(5) { animation-delay: 0.6s; }
.ax .ax-in > :nth-child(6) { animation-delay: 0.75s; }
.ax .ax-in > :nth-child(7) { animation-delay: 0.9s; }
.ax .ax-in > :nth-child(8) { animation-delay: 1.05s; }
.ax .ax-real { animation: ax-hold 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both; }
.ax .ax-pool { animation: ax-fade 0.9s ease 1.15s both; }
@keyframes ax-draw { from { stroke-dashoffset: 1; } }
@keyframes ax-fade { from { opacity: 0; } }
@keyframes ax-step { from { opacity: 0; transform: translateY(0.3em); } }
@keyframes ax-hold { from { opacity: 0; transform: translateY(3px); } }
@keyframes ax-caret { 50% { opacity: 0; } }

/* ---------- the Architect's phone (select.css THE FACTION PHONE): it rests on the terminal's lower corner ---------- */
.ax .fp { left: 44.6em; top: 21.6em; width: 11em; rotate: 7deg; }

/* ---------- a phone: the sheet above, the terminal laid over its lower corner ---------- */
@media (max-width: 899px) {
  .sc-world > .mini.ax { aspect-ratio: 40 / 46; height: auto; }
  .ax .ax-stage { font-size: calc(100cqw / 40); }
  .ax .ax-paper { left: 1.2em; top: 1.6em; width: 25em; height: 30em; }
  .ax .ax-term { left: 12.6em; top: 18.6em; width: 26.6em; height: 26.4em; }
  .ax .ax-pencil { left: 3em; top: 40.5em; width: 7.5em; }
  .ax .fp { left: 30.4em; top: 2.4em; width: 8.4em; rotate: 6deg; }
}