/* ==========================================================================
   Archestack film, story layer styling.

   Loaded after the generated stylesheet, so equal-specificity rules here win.
   Everything below belongs to the hand written tail of
   _next/static/chunks/page-Da1C4j4h.js: the configuration card MCP writes and
   throws into the browser, and the interface the browser grows as each card
   lands.

   Selectors keep the `.kiosk` prefix the generated sheet uses, so overrides
   match its specificity instead of needing !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

.kiosk .workspace {
  position: relative;
}

/* The card is the block, grown. Its width and height are set from script and
   animate from the block's own box, so the outer element clips and the inner
   one, which is always laid out at the card's full width, is what gets
   revealed. Padding, gap and type match .kiosk .film .block exactly: that is
   what makes the first frame of the morph indistinguishable from the block. */
.kiosk .config-card {
  position: absolute;
  z-index: 8;
  overflow: hidden;
  border: 1px solid #bdff8766;
  border-radius: 11px;
  background: linear-gradient(#1b2a20, #141d1a);
  box-shadow:
    0 0 0 3px #bdff870d,
    0 22px 48px #00000059;
  pointer-events: none;
  will-change: transform, width, height, opacity;
  transition:
    background 0.35s,
    border-color 0.35s,
    border-radius 0.35s,
    box-shadow 0.35s;
}

/* While it is still block shaped it wears the block's own firing look, so
   nothing pops the moment the growth starts. */
.kiosk .config-card.morphing {
  border-radius: 13px;
  border-color: #bdff87;
  background: #263923;
  box-shadow: 0 0 45px #bdff8720;
}

/* Split: it has left the block and is on its way. */
.kiosk .config-card.in-flight {
  box-shadow:
    0 0 0 4px #bdff8714,
    0 0 46px #bdff8730,
    0 26px 60px #00000066;
}

.kiosk .config-card-inner {
  width: 310px;
  padding: 14px;
}

.kiosk .config-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kiosk .config-card-head .block-icon {
  width: 30px;
  height: 34px;
  color: #bdff87;
  background: #bdff8712;
}

.kiosk .config-card-name {
  min-width: 0;
}

.kiosk .config-card-head b {
  display: block;
  font-size: 19px;
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -0.3px;
  color: #f2faed;
  white-space: nowrap;
}

/* The subtitle turns over from what the component is to what this instance of
   it is called. Both lines sit in the same slot so the head never reflows. */
.kiosk .config-card-sub {
  display: block;
  position: relative;
  height: 15px;
  margin-top: 5px;
}

.kiosk .config-card-sub small {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}

.kiosk .config-card-sub .is-generic {
  color: #a4bea3;
  font-size: 12px;
  line-height: 1.25;
}

.kiosk .config-card-sub .is-instance {
  color: #9dc0a1;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.35;
}

.kiosk .config-card-tag {
  margin-left: auto;
  align-self: flex-start;
  padding: 3px 5px;
  border: 1px solid #4d6155;
  border-radius: 4px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #a7c89a;
}

/* Room for all three configuration lines from the start, so the measured
   height is the finished height and writing never resizes the card. */
.kiosk .config-card-body {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #ffffff10;
  min-height: 57px;
}

.kiosk .config-line {
  display: flex;
  gap: 7px;
  align-items: baseline;
  margin-bottom: 5px;
  font-family: monospace;
  font-size: 9.5px;
  line-height: 1.4;
  animation: config-line-in 0.24s both;
}

.kiosk .config-line i {
  flex-shrink: 0;
  min-width: 46px;
  color: #7f9c85;
  font-style: normal;
}

.kiosk .config-line span {
  color: #d3e6cc;
  white-space: nowrap;
}

.kiosk .config-caret {
  display: inline-block;
  width: 6px;
  height: 11px;
  background: #bdff87;
  animation: config-caret 0.8s steps(1) infinite;
}

.kiosk .config-card-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #ffffff10;
  font-size: 9px;
  color: #86a58a;
}

.kiosk .config-card-foot svg {
  color: #bdff87;
}

/* The block the instance grew out of. It stays lit underneath for as long as
   the instance is still attached, so the split reads as one object leaving
   another rather than a card appearing from nowhere. */
.kiosk .block.emitting {
  box-shadow:
    0 0 0 3px #bdff871f,
    0 0 40px #bdff872e;
  animation: block-emitting 1.1s ease-in-out infinite;
}

@keyframes block-emitting {
  50% {
    border-color: #d6ffae;
    box-shadow:
      0 0 0 5px #bdff8714,
      0 0 52px #bdff873d;
  }
}

@keyframes config-line-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes config-caret {
  50% {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   The browser, which grows one section per landing
   -------------------------------------------------------------------------- */

.kiosk .application {
  position: relative;
}

.kiosk .preview-artboard .app-layout {
  flex: 1;
  min-height: 0;
}

.kiosk .preview-artboard .app-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.kiosk .app-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 6px;
  -webkit-mask-image: linear-gradient(#0000, #000 14px);
  mask-image: linear-gradient(#0000, #000 14px);
}

.kiosk .app-canvas::-webkit-scrollbar {
  display: none;
}

.kiosk .app-section {
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid #e1e9e4;
  border-radius: 6px;
  background: #fff;
  animation: section-land 0.55s cubic-bezier(0.2, 1.3, 0.3, 1) both;
}

.kiosk .app-section.fresh {
  border-color: #8dc178;
  box-shadow: 0 0 0 2px #88bf7333;
}

.kiosk .nav-grown {
  animation: nav-in 0.4s both;
}

@keyframes section-land {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The moment of impact, a ring over the whole browser. */
.kiosk .app-impact {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 10px;
  animation: impact-flash 0.55s ease-out both;
}

@keyframes impact-flash {
  from {
    background: #bdff8738;
    box-shadow: inset 0 0 0 3px #8dc178;
  }
  to {
    background: #bdff8700;
    box-shadow: inset 0 0 0 0 #8dc17800;
  }
}

/* Business entities: a grid, a create button and a form. */
.kiosk .grid-table {
  border: 1px solid #e7edea;
  border-radius: 5px;
  overflow: hidden;
}

.kiosk .grid-row {
  display: grid;
  grid-template-columns: 1.15fr 1.3fr 0.6fr;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  font-size: 8.5px;
  color: #4d6157;
  border-top: 1px solid #eef2ef;
}

.kiosk .grid-row.grid-head {
  border-top: 0;
  background: #f3f7f4;
  color: #8b9b90;
  font-size: 7.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.kiosk .grid-row.is-new {
  background: #f2faf1;
}

.kiosk .grid-row > span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk .row-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5eee7;
  color: #68876f;
  font-size: 6px;
  font-style: normal;
}

.kiosk .grid-row mark {
  padding: 2px 5px;
  border-radius: 8px;
  background: #edf6ef;
  color: #528268;
  font-size: 6.5px;
}

.kiosk .grid-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.kiosk .grid-new {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: #397859;
  color: #fff;
  font-size: 8px;
}

.kiosk .grid-actions small {
  font-size: 7px;
  color: #9daf9f;
}

.kiosk .mini-form {
  margin-top: 9px;
  padding: 9px;
  border: 1px dashed #cddcd2;
  border-radius: 5px;
  background: #fafcfa;
}

.kiosk .mini-form > b {
  font-size: 8.5px;
  font-weight: 550;
  color: #47604f;
}

.kiosk .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
}

.kiosk .form-grid label {
  display: block;
  font-size: 6.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #93a598;
}

.kiosk .form-grid i {
  display: block;
  margin-top: 3px;
  padding: 5px 6px;
  border: 1px solid #e2e9e4;
  border-radius: 4px;
  background: #fff;
  font-size: 8px;
  font-style: normal;
  color: #435a4d;
}

.kiosk .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.kiosk .form-actions span {
  font-size: 7.5px;
  color: #9aaa9f;
}

.kiosk .form-actions button {
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: #397859;
  color: #fff;
  font-size: 7.5px;
}

/* Business events and the rows that report a rule running. */
.kiosk .rule-row,
.kiosk .rule-fired,
.kiosk .invoice-row,
.kiosk .backup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid #e7edea;
  border-radius: 5px;
}

.kiosk .rule-fired {
  margin-top: 7px;
  border-color: #cbe7c8;
  background: #f2faf1;
  color: #4f7a5d;
}

.kiosk .rule-fired > svg {
  color: #59925f;
}

.kiosk .rule-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #eef4f0;
  color: #5f8a70;
}

.kiosk .rule-row b,
.kiosk .rule-fired b,
.kiosk .invoice-row b,
.kiosk .backup-row b {
  font-size: 9px;
  font-weight: 550;
}

.kiosk .rule-row small,
.kiosk .rule-fired small,
.kiosk .invoice-row small,
.kiosk .backup-row small {
  display: block;
  margin-top: 3px;
  font-size: 7.5px;
  color: #91a095;
}

.kiosk .rule-live {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 8px;
  background: #e6f3e9;
  color: #548164;
  font-size: 6.5px;
  white-space: nowrap;
}

.kiosk .rule-fired > span:last-child {
  margin-left: auto;
  font-size: 7px;
  color: #7fa189;
  white-space: nowrap;
}

/* Scheduled events: a week, with the booked day marked. */
.kiosk .week-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}

.kiosk .week-day {
  position: relative;
  padding: 6px 0;
  border: 1px solid #e7edea;
  border-radius: 5px;
  text-align: center;
}

.kiosk .week-day small {
  display: block;
  font-size: 6px;
  letter-spacing: 0.6px;
  color: #9aab9f;
}

.kiosk .week-day strong {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 550;
  color: #4b6153;
}

.kiosk .week-day.booked {
  border-color: #8dc178;
  background: #f2faf1;
}

.kiosk .week-day.booked i {
  display: block;
  width: 4px;
  height: 4px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: #59925f;
}

/* Mails: the message itself. */
.kiosk .mail-card {
  padding: 9px;
  border: 1px solid #e7edea;
  border-radius: 5px;
  background: #fbfdfb;
}

.kiosk .mail-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid #eef2ef;
  font-size: 7.5px;
  color: #8ea396;
}

.kiosk .mail-head svg {
  color: #7fa189;
}

.kiosk .mail-head em {
  margin-left: auto;
  font-style: normal;
  color: #548164;
}

.kiosk .mail-card > b {
  font-size: 10px;
  font-weight: 600;
  color: #33473c;
}

.kiosk .mail-card p {
  margin: 5px 0 0;
  font-size: 8px;
  line-height: 1.6;
  color: #6a7d71;
}

.kiosk .mail-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #eef2ef;
  font-size: 7px;
  color: #9aab9f;
}

.kiosk .mail-foot u {
  color: #4f8264;
}

/* APIs: the endpoint and what it produced. */
.kiosk .endpoint-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px;
  margin-bottom: 7px;
  border: 1px solid #e7edea;
  border-radius: 5px;
  background: #f7faf8;
}

.kiosk .method {
  padding: 3px 5px;
  border-radius: 3px;
  background: #3d6f8f;
  color: #fff;
  font-family: monospace;
  font-size: 6.5px;
  letter-spacing: 0.5px;
}

.kiosk .endpoint-row code {
  flex: 1;
  font-family: monospace;
  font-size: 8px;
  color: #4b6153;
}

.kiosk .status-ok {
  padding: 3px 5px;
  border-radius: 8px;
  background: #e6f3e9;
  color: #548164;
  font-size: 6.5px;
}

.kiosk .endpoint-row small {
  font-size: 7px;
  color: #9daf9f;
}

.kiosk .invoice-row strong {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #33473c;
}

/* Integrations: two systems, both directions. */
.kiosk .sync-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 7px;
  border: 1px solid #e7edea;
  border-radius: 5px;
  background: #f7faf8;
}

.kiosk .sync-node {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid #dfe8e2;
  border-radius: 14px;
  background: #fff;
  font-size: 8px;
  color: #4b6153;
}

.kiosk .sync-arrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #6f9c7d;
}

.kiosk .sync-arrow .back {
  transform: rotate(180deg);
}

/* Backups. */
.kiosk .backup-bar {
  height: 4px;
  margin-top: 8px;
  border-radius: 4px;
  background: #e6ece8;
  overflow: hidden;
}

.kiosk .backup-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #8dc178, #59925f);
}

/* Pages: the payoff, so the dashboard pieces get a little more room. */
.kiosk .app-section .metrics {
  margin-bottom: 4px;
}

.kiosk .app-section .activity-feed {
  height: auto;
}

.kiosk .app-section .activity-title {
  margin: 10px 0 4px;
}

/* --------------------------------------------------------------------------
   The act before the build: the prompt, us, MCP, and what Archestack holds

   The generated stylesheet centres a single node in .ai-frame. Here it becomes
   a row of four, because the shot is a chain and every link in it has to be on
   screen at once: the prompt arriving, us reading it, the handoff, and the
   components waking.

   The word field is the only part with no fixed content, so it takes the
   remaining width. Words are placed in percentages of it and end at its right
   edge, which is where we are standing, so nothing is measured and the shot
   survives any artboard width.
   -------------------------------------------------------------------------- */

.kiosk .handoff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

/* The runway. Its width comes from script, because it closes up once the last
   word has landed and the row re-centres on us and the panel; leaving it open
   held a third of the frame empty for the rest of the act. Which is also why
   .handoff is content sized rather than a fixed width: the row has to be able
   to tighten. */
.kiosk .wordfield {
  position: relative;
  flex: none;
  height: 250px;
}

.kiosk .wordfield span {
  position: absolute;
  white-space: nowrap;
  font-size: 16px;
  color: #9fb8a4;
  text-shadow: 0 0 18px #0b1210;
  will-change: transform, opacity;
}

/* Us. The people are the node and the model is a badge on it, because the
   order in this act is that the request reaches a person first. */
.kiosk .us {
  flex-shrink: 0;
  width: 210px;
  text-align: center;
}

.kiosk .us-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  margin: 0 auto;
  border: 1px solid #4d6155;
  border-radius: 30px;
  background: radial-gradient(at 50% 30%, #bdff8714, #0000 65%), #121d18;
  box-shadow: 0 0 46px #bdff8714;
  color: #bdff87;
}

.kiosk .us-node em {
  position: absolute;
  right: -9px;
  bottom: -9px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #4d6155;
  border-radius: 10px;
  background: #16221c;
  color: #a7c89a;
}

.kiosk .us > strong {
  display: block;
  margin-top: 13px;
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -0.4px;
  color: #f4f6f3;
}

.kiosk .us > span {
  display: block;
  margin-top: 6px;
  letter-spacing: 2px;
  font-size: 9px;
  color: #7f958b;
}

/* The breakdown. Four short things the paragraph was actually asking for,
   arriving one at a time, which is the step the film would otherwise skip
   between English and eight configured components. */
.kiosk .us-breakdown {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
}

.kiosk .us-breakdown span {
  padding: 5px 10px;
  border: 1px solid #ffffff0d;
  border-radius: 7px;
  background: #ffffff05;
  font-size: 12px;
  color: #55685b;
  opacity: 0.4;
  transition:
    opacity 0.3s,
    color 0.3s,
    border-color 0.3s,
    background 0.3s;
}

.kiosk .us-breakdown span.on {
  opacity: 1;
  border-color: #4d6155;
  background: #18251f;
  color: #dbe7da;
}

/* The link. It is dark until MCP connects, then it carries a pulse toward the
   library for as long as the model is reading it. */
.kiosk .ai-link {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  text-align: center;
}

.kiosk .ai-link i {
  display: block;
  height: 1px;
  background: #2f4136;
  transition: background 0.5s;
}

.kiosk .ai-link.open i {
  background: linear-gradient(90deg, #bdff8733, #bdff87);
}

.kiosk .ai-link.open i::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 16px;
  height: 5px;
  border-radius: 4px;
  background: #bdff87;
  box-shadow: 0 0 16px #bdff87;
  animation: mcp-packet 1.1s linear infinite;
}

.kiosk .ai-link small {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  letter-spacing: 2px;
  font-size: 9px;
  color: #6f8a76;
}

.kiosk .ai-link.open small {
  color: #a7c89a;
}

@keyframes mcp-packet {
  from {
    left: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  to {
    left: 80px;
    opacity: 0;
  }
}

.kiosk .catalog {
  width: 560px;
  padding: 16px;
  border: 1px solid #2f4136;
  border-radius: 16px;
  background: radial-gradient(at 12% 0%, #a1ef6b0a, #0000 60%), #101a16;
}

.kiosk .catalog-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid #ffffff0f;
}

.kiosk .catalog-head > svg {
  color: #bdff87;
}

.kiosk .catalog-head b {
  display: block;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.7px;
  color: #f4f6f3;
}

.kiosk .catalog-head small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #7f958b;
}

.kiosk .catalog-count {
  margin-left: auto;
  font-family: monospace;
  font-size: 12px;
  color: #a7c89a;
}

/* MCP, drawn as part of the panel and wired down into the grid. Putting it
   here rather than on the link between two boxes is the point of the shot: it
   is one of Archestack's components, and it is the one that wakes the rest. */
.kiosk .catalog-mcp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 9px 11px;
  border: 1px solid #33473a;
  border-radius: 11px;
  background: #16221c;
  opacity: 0.5;
  transition:
    opacity 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;
}

.kiosk .catalog-mcp.on {
  opacity: 1;
  border-color: #7fd94f66;
  box-shadow: 0 0 26px #bdff8712;
}

.kiosk .catalog-mcp .block-icon {
  width: 30px;
  height: 30px;
  color: #8ba394;
  transition: color 0.4s;
}

.kiosk .catalog-mcp.on .block-icon {
  color: #bdff87;
  background: #bdff8710;
}

.kiosk .catalog-mcp-name b {
  display: block;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 650;
  color: #dbe7da;
}

.kiosk .catalog-mcp-name small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #7f958b;
}

/* The wire down into the eight. It only exists once MCP is awake, so the panel
   reads as a catalog until the moment it becomes a chain. */
.kiosk .catalog-mcp-wire {
  position: absolute;
  left: 26px;
  bottom: -22px;
  width: 1px;
  height: 22px;
  background: #2f4136;
  transition: background 0.4s;
}

.kiosk .catalog-mcp.on .catalog-mcp-wire {
  background: linear-gradient(180deg, #bdff87, #bdff8722);
}

.kiosk .catalog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.kiosk .catalog-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid #263630;
  border-radius: 9px;
  background: #15201c;
  opacity: 0.34;
  transition:
    opacity 0.4s,
    border-color 0.4s,
    background 0.4s;
}

.kiosk .catalog-chip b {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: #dbe7da;
  white-space: nowrap;
}

.kiosk .catalog-chip .block-icon {
  width: 26px;
  height: 26px;
  color: #8ba394;
}

.kiosk .catalog-chip > svg {
  color: #bdff87;
  opacity: 0;
  transition: opacity 0.3s;
}

.kiosk .catalog-chip.known {
  opacity: 1;
  border-color: #4d6155;
  background: #18251f;
}

.kiosk .catalog-chip.known .block-icon {
  color: #bdff87;
  background: #bdff8710;
}

.kiosk .catalog-chip.known > svg {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   The camera

   The push is entirely inside the browser panel: nothing on the stage moves,
   and the artboard scales past its fit, which .preview-fit already clips.
   -------------------------------------------------------------------------- */

/* Film mode deliberately unclips .preview-fit so the browser keeps its drop
   shadow, which is right for the wide shot and wrong the moment the artboard
   scales past its fit: the crop is what turns a zoom into a framing. So the
   clip is only on while the camera is pushed in, where the window chrome and
   its shadow are outside the frame anyway. */
.kiosk .film .preview-fit.framing {
  overflow: hidden;
  border-radius: 10px;
}

.kiosk .preview-artboard {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   The closing comparison

   Two panels running the same ten developer days: one writing plumbing by
   hand, one describing an app and watching the components land. Everything in
   here is sized to the artboard's stage row, which is about 520px tall once
   the brand bar, the heading and the player have taken theirs, so the panels
   get roughly 320 of it and the verdict the rest.

   Neither panel scrolls anything from script. The code block is laid out
   bottom up inside a clipped box, so new lines push the older ones off the top
   on their own and the file reads as still being written.
   -------------------------------------------------------------------------- */

.kiosk .compare {
  display: flex;
  height: 100%;
  padding-bottom: 54px;
  justify-content: center;
  align-items: center;
  animation: 0.6s both frame-in;
}

.kiosk .compare-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 1080px;
}

.kiosk .compare-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}

.kiosk .build-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

.kiosk .build-head b {
  font-size: 19px;
  font-weight: 620;
  letter-spacing: -0.4px;
  color: #f4f6f3;
}

.kiosk .build-days {
  margin-left: auto;
  font-family: monospace;
  font-size: 13px;
  color: #a7c89a;
}

.kiosk .build-panel.slow .build-head b,
.kiosk .build-panel.slow .build-days {
  color: #8ba394;
}

.kiosk .build-panel small {
  display: block;
  margin-top: 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #7f958b;
}

.kiosk .build-track {
  height: 8px;
  margin-top: 14px;
  border-radius: 4px;
  background: #16211c;
  overflow: hidden;
}

.kiosk .build-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.kiosk .build-track.slow i {
  background: #55685b;
}

.kiosk .build-track.fast i {
  background: linear-gradient(90deg, #7fd94f, #bdff87);
  box-shadow: 0 0 16px #bdff8755;
}

/* The hand written side. Colourless on purpose: it is the thing being compared
   against, not a second brand. */
.kiosk .code-window,
.kiosk .assembly {
  height: 214px;
  border: 1px solid #2f4136;
  border-radius: 12px;
  overflow: hidden;
}

.kiosk .code-window {
  display: flex;
  flex-direction: column;
  background: #0d1512;
}

.kiosk .code-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #ffffff0d;
}

.kiosk .code-tabs span {
  padding: 4px 10px;
  border-radius: 6px;
  background: #18231e;
  font-family: monospace;
  font-size: 11px;
  color: #8ba394;
  white-space: nowrap;
  animation: 0.35s both frame-in;
}

/* Laid out from the bottom, so line twelve pushes line one out of the box
   instead of the block growing past it. */
.kiosk .code-body {
  flex: 1;
  min-height: 0;
  padding: 10px 12px;
  overflow: hidden;
  display: flex;
}

.kiosk .code-body pre {
  margin: 0;
  width: 100%;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.55;
  color: #9db3a4;
  white-space: pre;
}

.kiosk .code-body pre span {
  display: block;
  animation: 0.25s both frame-in;
}

.kiosk .code-body pre i {
  display: inline-block;
  width: 22px;
  color: #445448;
  font-style: normal;
  user-select: none;
}

.kiosk .code-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 2px;
  vertical-align: -2px;
  background: #bdff87;
  animation: 1s steps(2) infinite caret-blink;
}

@keyframes caret-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* The described side. */
.kiosk .assembly {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 12px;
  background: radial-gradient(at 14% 0%, #a1ef6b0d, #0000 62%), #101a16;
}

.kiosk .assembly-prompt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid #33473a;
  border-radius: 9px;
  background: #16221c;
}

.kiosk .assembly-prompt em {
  flex: 1;
  min-width: 0;
  font-style: normal;
  font-size: 12px;
  color: #dbe7da;
  white-space: nowrap;
  overflow: hidden;
}

.kiosk .assembly-who,
.kiosk .assembly-ai {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex: none;
  border-radius: 7px;
}

.kiosk .assembly-who {
  background: #ffffff10;
  color: #a7bba9;
}

.kiosk .assembly-ai {
  background: #bdff8714;
  color: #bdff87;
}

.kiosk .assembly-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 6px;
}

.kiosk .assembly-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #ffffff0d;
  border-radius: 8px;
  background: #ffffff05;
  color: #55685b;
  opacity: 0.45;
  transition:
    opacity 0.25s,
    border-color 0.25s,
    background 0.25s,
    color 0.25s;
}

.kiosk .assembly-chip span {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: #7f958b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kiosk .assembly-chip.on {
  opacity: 1;
  border-color: #4d6155;
  background: #18251f;
  color: #bdff87;
}

.kiosk .assembly-chip.on span {
  color: #dbe7da;
}

.kiosk .assembly-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #55685b;
  transition:
    color 0.3s,
    opacity 0.3s;
  opacity: 0.5;
}

.kiosk .assembly-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.kiosk .assembly-live.on {
  opacity: 1;
  color: #bdff87;
}

.kiosk .compare-verdict {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid #ffffff0f;
}

.kiosk .compare-verdict > div {
  text-align: center;
}

.kiosk .compare-verdict strong {
  display: block;
  font-size: 40px;
  font-weight: 680;
  letter-spacing: -1.8px;
  color: #bdff87;
}

.kiosk .compare-verdict small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #7f958b;
}

/* --------------------------------------------------------------------------
   The headline

   The opening line names the thing before it qualifies it ("Your business app,
   tailored to your company."), which at 90px is wider than the artboard allows
   and therefore always wraps. Balancing it is what keeps the break in a
   sensible place: left to itself the browser fills the first line and orphans
   the last word, and every locale breaks somewhere different. German is the
   long one, Dutch the short one, and neither needs its own rule this way.
   -------------------------------------------------------------------------- */
.kiosk .film h1 {
  text-wrap: balance;
}

.kiosk .film .story-heading p {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Tap to play or pause

   The whole stage is the button, so the icon is feedback rather than a
   control: it says the tap registered and which way it went, then leaves.
   It sits in .kiosk and not in the artboard on purpose, so it is the same
   size on a phone as on a desk, the way a video player's is, instead of
   riding the scale <main> is drawn at.
   -------------------------------------------------------------------------- */

.kiosk .film {
  cursor: pointer;
}

/* The player and the prompt box keep their own cursors: they are the two
   places on the stage where a click already means something else. */
.kiosk .film .player,
.kiosk .film textarea {
  cursor: auto;
}

.kiosk .tap-flash {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.kiosk .tap-flash span {
  display: flex;
  padding: 30px;
  color: #eaf7e3;
  border: 1px solid #ffffff1c;
  border-radius: 50%;
  background: #0b1210d9;
  backdrop-filter: blur(3px);
  animation: 0.55s ease-out both tap-flash;
}

@keyframes tap-flash {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

/* The prompt leaving the card. Same type as the word field in the next act,
   because they are the same words: the cut happens mid flight and the eye has
   to read it as one movement, not as two effects that look alike. */
.kiosk .prompt-lift {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kiosk .prompt-lift span {
  position: absolute;
  white-space: nowrap;
  font-size: 16px;
  color: #9fb8a4;
  text-shadow: 0 0 18px #0b1210;
  will-change: transform, opacity;
}

/* ==========================================================================
   Portrait

   Same film, same clock, same story layer. Only the artboard's shape changes,
   and every act that is a row on the wide board becomes a column on the tall
   one.

   None of this is a media query. The film is drawn at a fixed size and scaled
   to fit, so the viewport is the wrong thing to ask: `filmArtboard` picks the
   board from the window's shape and puts `.portrait` on <main>, and these
   rules follow that.

   The flying configuration card has no rule here and needs none. Its path is
   measured off the live layout with offsetParent rather than duplicated from
   this file, so restacking the workflow act moves the card with it.
   ========================================================================== */

.kiosk .demo.film.portrait {
  grid-template-rows: 58px 240px minmax(0, 1fr) 58px;
  gap: 14px;
  padding: 0 28px 22px;
}

/* Type. The tall board is 900 wide against 1600, so everything set to fill a
   line has to come down with it. */
.kiosk .film.portrait h1 {
  max-width: 820px;
  font-size: 46px;
  letter-spacing: -1.4px;
}

.kiosk .film.portrait.phase-intro h1 {
  font-size: 62px;
  letter-spacing: -2px;
}

.kiosk .film.portrait.phase-closing h1 {
  font-size: 54px;
}

.kiosk .film.portrait .story-heading p {
  max-width: 780px;
  font-size: 19px;
}

/* The chat act. */
.kiosk .portrait .chat-frame {
  width: 810px;
}

/* The handoff. The runway lies across the top, we sit under it, and the wire
   into Archestack turns to point down at it. */
.kiosk .portrait .handoff {
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Height comes from script, the way width does on the wide board: the runway
   closes up once the last word has landed. */
.kiosk .portrait .wordfield {
  width: 100%;
}

.kiosk .portrait .us {
  width: 100%;
}

.kiosk .portrait .us-breakdown {
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.kiosk .portrait .ai-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
}

.kiosk .portrait .ai-link i {
  width: 1px;
  height: 44px;
}

.kiosk .portrait .ai-link.open i {
  background: linear-gradient(180deg, #bdff8733, #bdff87);
}

/* The packet travels down the wire rather than along it. It is positioned
   against .ai-link, which is the full column wide here, so it has to be
   centred rather than offset from the left edge. */
.kiosk .portrait .ai-link.open i::after {
  top: 0;
  left: 50%;
  margin-left: -2.5px;
  width: 5px;
  height: 16px;
  animation-name: mcp-packet-down;
}

.kiosk .portrait .ai-link small {
  position: static;
  margin-top: 6px;
}

@keyframes mcp-packet-down {
  from {
    top: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  to {
    top: 32px;
    opacity: 0;
  }
}

.kiosk .portrait .catalog {
  width: 100%;
}

/* The workflow act. The network sits above the browser it feeds, and the
   bridge between them turns to point down.

   `align-items: stretch` is the load bearing line. The base rule sets `start`,
   which sizes a grid item to its content rather than to its track, so the
   browser panel never got a definite height: PreviewFit scales the app to
   whatever height it measures, measured an unbounded box, and painted a browser
   half again too big over the network above it and off both edges of the frame.
   On the wide board the same `start` is harmless, because there the row is
   sized by the network panel beside it.

   `overflow: hidden` is the belt to that pair of braces. It costs the flying
   card its drop shadow at the very edges of the act and it means a bad
   measurement can never again paint over the act above. */
.kiosk .portrait .workspace {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 440px 36px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}

/* The panel fills its row rather than declaring a height of its own, so the
   row above is the only number and the two cannot disagree. */
.kiosk .portrait .network {
  height: 100%;
}

.kiosk .portrait .reaction-bridge {
  height: 36px;
  padding-top: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* The arrow turns, not the bridge. Rotating the container turned a band the
   width of the column into a column the height of the board. */
.kiosk .portrait .reaction-bridge svg {
  transform: rotate(90deg);
}

/* The closing comparison. One panel above the other, and both windows shorter,
   because two of them stacked is the height two side by side never needed. */
.kiosk .portrait .compare-inner {
  width: 810px;
  gap: 18px;
}

.kiosk .portrait .compare-panels {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.kiosk .portrait .code-window,
.kiosk .portrait .assembly {
  height: 190px;
}

.kiosk .portrait .compare-verdict strong {
  font-size: 34px;
}

.kiosk .portrait .compare {
  padding-bottom: 20px;
}