/* Generated by tools/assemble.mjs from css/sections/<id>.css (all but the hero's, in page order).
   Edit those files, not this one. */

/* css/sections/keyboard.css */
#keyboard.scene { padding: 0; margin-top: -48px; }

#keyboard { scroll-margin-top: calc(-1 * (var(--nav-h) + 12px)); }

#keyboard { --kb-room-h: clamp(600px, 100svh, 1080px); --kb-run: 80svh; }
@media (orientation: landscape) and (max-height: 500px) { #keyboard { --kb-run: 0px; } }
.kb-track { position: relative; height: calc(var(--kb-room-h) + var(--kb-run)); }

.kb-room {
  position: sticky;

  top: max(0px, calc((100svh - var(--kb-room-h)) / 2));
  height: var(--kb-room-h);
  overflow: hidden;
  contain: layout paint;
}

.kb-head {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: var(--kb-head-top, calc(var(--nav-h) + 2svh));
  pointer-events: none;
}
.kb-head .scene-head { margin-bottom: 0; }
.kb-head .lede { max-width: 30em; text-wrap: balance; }

.kb-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at var(--kb-gx, 62%) var(--kb-gy, 34%), rgba(18, 74, 190, 0.2), transparent 72%),
    radial-gradient(60% 34% at 50% 78%, rgba(0, 92, 200, 0.07), transparent 70%);
}

.kb-deck {
  position: absolute;
  left: 0;
  top: var(--kb-cvt, 30%);
  width: 100%;
  height: calc(100% - var(--kb-cvt, 30%));
  display: block;
  -webkit-tap-highlight-color: transparent;
}

.kb-stage {
  position: absolute;
  z-index: 2;
  left: var(--kb-px, 50%);
  top: var(--kb-py, 96px);
  width: var(--kb-pw, 750px);
  height: var(--kb-ph, 474px);
  pointer-events: none;
}
.kb-ui {
  --s: var(--kb-s, 1);
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.kb-ui .mog-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.6),
    0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35),
    0 0 calc(110 * var(--u)) calc(-10 * var(--u)) rgba(30, 130, 255, 0.2);
}
.kb-ui .mog-panel[hidden] { display: none; }

.kb-shade {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: calc(16 * var(--u));
  background: #05070b;
  opacity: 0;
  pointer-events: none;
}

.kb-winlight {
  position: absolute;
  left: -16%;
  right: -16%;
  top: 10%;
  bottom: -46%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(30, 110, 255, 0.2), rgba(30, 110, 255, 0.06) 55%, transparent 72%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.kb-stage.is-open .kb-winlight { opacity: 1; }

.kb-pic {
  display: block;
  width: calc(var(--kb-pic-w, 168) * var(--u));
  height: calc(var(--kb-pic-w, 168) * var(--u));
  border-radius: calc(6 * var(--u));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.kb-pic.is-new { animation: kb-resolve 0.56s steps(10, end) both; }
@keyframes kb-resolve { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.kb-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(16 * var(--kb-s, 1) * 1px);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  opacity: 0;
  pointer-events: none;
}
.kb-stage.is-gone::after { animation: kb-afterimage 1.5s ease-in both; }
@keyframes kb-afterimage { 0%, 25% { opacity: 1; } 100% { opacity: 0; } }
.kb-ghost {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease 0.1s, visibility 0s linear 0.55s;
}
.kb-stage.is-gone .kb-ghost { opacity: 1; visibility: visible; transition: opacity 0.45s ease 0.1s, visibility 0s; }

.kb-stage.is-open .kb-ghost { opacity: 0; visibility: hidden; transition: none; }
.kb-pill {
  --s: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.9);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.kb-pill-verb { color: var(--mog-text); }
.kb-pill-secs { color: var(--mog-secondary); font-variant-numeric: tabular-nums; }
.kb-pill-eyes { display: flex; }

.kb-steps {
  position: absolute;
  z-index: 3;
  left: var(--kb-lx, 48px);
  top: var(--kb-ly, 120px);
  width: var(--kb-lw, 320px);
  display: flex;
  flex-direction: column;
  opacity: var(--kb-list, 0);
  pointer-events: var(--kb-list-pe, none);
}
.kb-list { display: grid; gap: 4px; }
.kb-step {
  display: grid;
  grid-template-columns: 124px 1fr;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 8px 14px;
  border-radius: 14px;
  text-align: left;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.kb-step .keys-inline { gap: 5px; }
.kb-step .kc {
  font-size: 12.5px;
  color: rgba(235, 242, 250, 0.6);
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.09s ease-out;
}
.kb-step .kc.is-down { transform: translateY(1.5px); }
.kb-step-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.kb-step.is-active {
  color: var(--text);
  background: rgba(97, 233, 251, 0.07);
  box-shadow: inset 0 0 0 1px rgba(97, 233, 251, 0.16), inset 2px 0 0 rgba(97, 233, 251, 0.6);
}
.kb-step.is-active .kc { color: #fff; }
.kb-step:active { background: rgba(97, 233, 251, 0.1); }
.kb-step:focus-visible { outline-offset: 0; }
.kb-cap { display: none; }

.kb-cue {
  order: -1;
  margin: 0 0 10px 14px;
  font-size: 13px;
  line-height: 18px;
  color: rgba(206, 216, 230, 0.8);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.kb-cue.is-used { opacity: 0; }
.kb-cue-tap { display: none; }
@media (pointer: coarse) {
  .kb-cue-click { display: none; }
  .kb-cue-tap { display: inline; }
}

@media (min-width: 1000px) and (orientation: landscape) and (max-height: 820px) {
  .kb-step { min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
}
@media (max-width: 1199px) {
  .kb-step { grid-template-columns: 104px 1fr; column-gap: 10px; padding-left: 12px; padding-right: 12px; }
  .kb-step-name { font-size: 16px; }
}

@media (max-width: 999px), (orientation: portrait) {
  .kb-steps { left: 0; right: 0; width: auto; padding: 0 16px; }
  .kb-list { display: flex; justify-content: space-between; gap: 2px; max-width: 420px; margin: 0 auto; }
  .kb-list li { flex: 0 1 auto; }

  .kb-step {
    display: flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 4px;
    border-radius: 11px;
    background: none;
    box-shadow: none;
  }
  .kb-step .keys-inline { gap: 1.5px; }
  .kb-step .kc { font-size: 10.5px; min-width: 18px; height: 20px; padding: 0 3px; border-radius: 5px; }
  .kb-step .kc.is-space { min-width: 22px; font-size: 0; }
  .kb-step .kc.is-space::after { content: "␣"; font-size: 11px; }
  .kb-step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kb-step.is-active { background: rgba(97, 233, 251, 0.08); box-shadow: inset 0 0 0 1px rgba(97, 233, 251, 0.3); }
  .kb-cap {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
  }
  .kb-cue { order: 0; margin: 2px 0 0; text-align: center; }
  .kb-head .h2 { font-size: clamp(34px, 9.4vw, 60px); }
  .kb-head .lede { font-size: 16.5px; }
}

@media (max-width: 520px) {
  #keyboard .mog-tag + .mog-tag + .mog-tag { display: none; }
}

@media (max-width: 419px) {
  .kb-list { gap: 0; }
  .kb-step { padding: 0 2px; }
}
@media (max-width: 359px) {
  .kb-list { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; justify-items: center; column-gap: 12px; row-gap: 2px; }
  #keyboard .mog-tag + .mog-tag { display: none; }
}
@media (min-width: 600px) and (max-width: 999px), (min-width: 600px) and (orientation: portrait) {
  .kb-step .kc { font-size: 12px; min-width: 22px; height: 24px; padding: 0 5px; }
  .kb-step .kc.is-space { min-width: 40px; }
  .kb-step { padding: 0 9px; min-height: 44px; }
  .kb-list { gap: 8px; max-width: 560px; }
}

.kb.is-still .kb-steps { --kb-list: 1; --kb-list-pe: auto; }
.kb.is-still .kb-head { opacity: 1; transform: none; top: var(--kb-hy, 80px); }
.kb.is-still .kb-head .eyebrow { display: none; }
.kb.is-still .kb-head .h2 { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.08; }
.kb.is-still .kb-head .lede {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (min-width: 1000px) and (orientation: landscape) {
  .kb.is-still .kb-head { left: var(--kb-lx, 48px); right: auto; width: var(--kb-lw, 320px); padding-left: 14px; }
  .kb.is-still .kb-head .wrap { padding: 0; }
  .kb.is-still .kb-head .scene-head { text-align: left; }
  .kb.is-still .kb-list { gap: 2px; }
  .kb.is-still .kb-step { min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
}
@media (max-width: 999px), (orientation: portrait) {
  .kb.is-still .kb-head .h2 { font-size: clamp(24px, 6.6vw, 34px); }
}
.kb.is-still .kb-ghost, .kb.is-still .kb-winlight { transition: none; }
.kb.is-still .kb-stage::after { animation: none; }

/* css/sections/search.css */
#search { --glow-y: 62%; }
#search .scene-head { position: relative; z-index: 2; }
#search .srch-nowrap { white-space: nowrap; }

#search .srch-stage {
  --pw: calc(750 * var(--u));
  --ph: calc(474 * var(--u));
  --s: 1;
  --u: calc(var(--s) * 1px);
  position: relative;
  margin-top: clamp(-24px, -2vw, 0px);

  padding: 40px var(--gutter) 0;
}

#search .srch-sky,
#search .srch-fxbox {
  position: absolute;
  left: 0;
  right: 0;
  top: -300px;
  bottom: -110px;
  pointer-events: none;
}
#search .srch-sky {
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 120px, #000 330px, #000 calc(100% - 130px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 120px, #000 330px, #000 calc(100% - 130px), transparent 100%);
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
#search .srch-sky.is-ready { opacity: 1; }
#search .srch-fxbox { z-index: 3; }
#search .srch-sky canvas { display: block; width: 100%; height: 100%; max-width: none; }

#search .srch-fxbox canvas { position: absolute; left: 0; top: 0; display: block; max-width: none; }

#search .srch-rig {
  position: relative;
  z-index: 1;
  width: var(--pw);
  max-width: 100%;
  margin: 0 auto;
}
#search .srch-slot {
  --s: inherit;
  position: relative;
  width: 100%;
  height: var(--ph);
}
#search .srch-slot .mog-panel { width: 100%; height: 100%; }
#search .srch-slot.is-off .mog-panel { visibility: hidden; }

#search .srch-slot .mog-panel.is-glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(24, 24, 27, 0.8);
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    0 calc(40 * var(--u)) calc(110 * var(--u)) rgba(0, 0, 0, 0.6),
    0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.4);
}

#search .srch-slot .mog-query { position: relative; }
#search .srch-slot .mog-back[hidden] { display: none; }
#search .srch-caret {
  position: absolute;
  left: 0;
  top: 50%;
  margin: calc(-10.5 * var(--u)) 0 0 0;
  pointer-events: none;
}
#search .srch-caret[hidden] { display: none; }
#search .srch-mirror {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  white-space: pre;
  font: inherit;
  letter-spacing: inherit;
}
#search .srch-slot .mog-query input { position: relative; z-index: 1; cursor: text; }

#search .srch-sel {
  position: absolute;
  left: 0;
  top: 50%;
  height: calc(24 * var(--u));
  margin-top: calc(-12 * var(--u));
  border-radius: calc(3 * var(--u));
  background: rgba(0, 117, 255, 0.5);
  pointer-events: none;
}
#search .srch-sel[hidden] { display: none; }
#search .srch-slot .mog-query input:focus-visible { outline: none; }

#search .srch-slot .mog-search:focus-within { box-shadow: inset 0 -1.5px 0 rgba(97, 233, 251, 0.7); }
#search .srch-slot .mog-row { cursor: default; }
#search .srch-slot .mog-list { will-change: auto; }

#search .srch-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 0 4px;
}

#search .srch-try {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  margin: -12px -10px;
  border-radius: 10px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}
#search .srch-try:hover { color: var(--text); }

#search .srch-stat {
  color: rgba(206, 216, 230, 0.62);
  white-space: nowrap;
}

@media (max-width: 1229px) {

  #search .srch-stage { padding-top: clamp(150px, 17vw, 200px); }
  #search .srch-sky {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 150px, #000 290px, #000 calc(100% - 130px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 150px, #000 290px, #000 calc(100% - 130px), transparent 100%);
  }
}
@media (max-width: 860px) {
  #search .srch-stage { --s: 0.86; }
}
@media (max-width: 520px) {

  #search .srch-stage { --s: 0.84; padding-top: 176px; }
  #search .srch-slot .mog-section { font-size: calc(12.5 * var(--u)); }
  #search .srch-sky,
  #search .srch-fxbox { top: -150px; bottom: -70px; }
  #search .srch-sky {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 90px, #000 170px, #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 90px, #000 170px, #000 calc(100% - 90px), transparent 100%);
  }

  #search .srch-slot .mog-query { font-size: 16px; }

  #search .srch-meta { margin-top: 18px; gap: 10px 12px; flex-wrap: wrap; }
  #search .srch-try { font-size: 13.5px; }

  #search .srch-stat { flex-basis: 100%; white-space: normal; }
}

/* css/sections/models.css */
#models { --md-row: 22; }

#models .md-split { display: flex; flex-direction: column; }
#models .md-copy { display: contents; }
#models .md-copy .scene-head { order: 1; }
#models .md-demo { order: 2; }

@media (min-width: 1024px) {
  #models .md-split {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 750px);
    column-gap: clamp(40px, 4vw, 56px);
    align-items: center;
  }
  #models .md-copy { display: block; container-type: inline-size; }
  #models .md-copy .scene-head { max-width: none; margin: 0; text-align: left; }

  #models .md-title { font-size: min(clamp(32px, 4.3vw, 60px), 54px, 14.6cqi); }

  #models .md-copy .lede { margin-left: 0; margin-right: 0; font-size: max(17px, min(clamp(17px, 1.45vw, 21px), 5.1cqi)); }
}

#models .md-nowrap { white-space: nowrap; }

#models .md-frame { position: relative; width: 100%; }

#models .md-frame.has-menu { z-index: 2; }

#models .md-stage {
  position: relative;
  height: var(--md-h, 512px);
}
#models .md-world { position: absolute; inset: 0; transform-origin: 50% 75%; }

#models .md-chat {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--md-pw, 750px);
  height: var(--md-ph, 474px);
  margin-left: calc(var(--md-pw, 750px) * -0.5);
  transform-origin: 50% 0;
}
#models .md-chat[hidden] { display: none; }
#models .md-chat.is-moving { will-change: transform; }
#models .md-chat.has-menu { z-index: 5; }
#models .md-chat .mog-panel { width: 100%; }

#models .md-chat::before {
  content: "";
  position: absolute;
  inset: -18% -16% -34%;
  z-index: -1;
  background:
    radial-gradient(50% 27% at 50% 71%, rgba(40, 140, 255, 0.26), rgba(0, 90, 255, 0.08) 60%, transparent 100%),
    radial-gradient(closest-side, rgba(0, 117, 255, 0.16), rgba(0, 60, 255, 0.05) 60%, transparent 80%);
  pointer-events: none;
}

#models .md-chip {
  position: absolute;
  z-index: 2;
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0);
  transition: background-color 0.15s;
}

@media (pointer: coarse) { #models .md-chip::before { content: ""; position: absolute; inset: -12px -6px; } }
#models .md-chip:hover,
#models .md-chip.is-hover,
#models .md-chip[aria-expanded="true"] { background: rgba(255, 255, 255, 0.1); }
#models .md-chip.is-hover { transition-duration: 0.4s; }
#models .md-chip:focus-visible { outline: 2px solid var(--electric); outline-offset: 1px; }

#models .md-menu {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: calc(5 * var(--u));
  border-radius: calc(11 * var(--u));
  background: rgba(40, 40, 44, 0.84);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.75),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.17),
    0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.55),
    0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.3);
  font-family: var(--mog-font);
  font-size: calc(13 * var(--u));
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  transition: opacity 0.2s ease-out;
}
#models .md-menu[hidden] { display: none; }
#models .md-menu.is-closing { opacity: 0; pointer-events: none; }
#models .md-mi {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--md-row) * var(--u));
  flex: none;
  padding: 0 calc(18 * var(--u)) 0 calc(19 * var(--u));
  border-radius: calc(6 * var(--u));
  font: inherit;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}

@media (pointer: coarse) { #models .md-menu.is-fingers .md-mi { min-height: 32px; } }
#models .md-mi.is-hl { background: rgb(10, 110, 235); color: #fff; }
#models .md-mi:focus { outline: none; }
#models .md-mi:focus-visible { outline: none; }
#models .md-check {
  position: absolute;
  left: calc(4.5 * var(--u));
  top: 50%;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  margin-top: calc(-5 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
#models .md-mi[aria-checked="true"] .md-check { opacity: 0.92; }
#models .md-sep { position: relative; height: calc(11 * var(--u)); flex: none; }
#models .md-sep::after {
  content: "";
  position: absolute;
  left: calc(5 * var(--u));
  right: calc(5 * var(--u));
  top: 50%;
  height: 0.5px;
  background: rgba(255, 255, 255, 0.15);
}

#models .mog-step .md-chev { width: calc(9 * var(--u)); height: calc(9 * var(--u)); opacity: 0.3; margin-left: calc(2 * var(--u)); }

#models .md-cap {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--md-pw, 750px);
  margin-left: calc(var(--md-pw, 750px) * -0.5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  padding: 0 calc(2 * var(--u));
  pointer-events: none;
}
#models .md-cap.is-stacked { flex-direction: column; align-items: center; gap: calc(9 * var(--u)); padding: 0; }
#models .md-beats {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(22 * var(--u));
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--text);
  white-space: nowrap;
}
#models .md-w { display: inline-block; transition: opacity 0.9s var(--ease-out); }
#models .md-w[data-w="both"] { color: var(--cyan); filter: drop-shadow(0 0 18px rgba(97, 233, 251, 0)); transition: opacity 0.9s var(--ease-out), filter 1.2s var(--ease-out); }

#models.md-live .md-w { opacity: 0.3; }
#models.md-live.lit-local .md-w[data-w="local"],
#models.md-live.lit-cloud .md-w[data-w="cloud"],
#models.md-live.lit-both .md-w[data-w="both"] { opacity: 1; }
#models.md-live.lit-both .md-w[data-w="both"] { filter: drop-shadow(0 0 18px rgba(97, 233, 251, 0.3)); }

#models .md-meta {
  display: grid;
  justify-items: end;
  margin: 0;
  font-family: var(--font-text);
  font-size: calc(14 * var(--u));
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--text-3);
  white-space: nowrap;
}
#models .md-cap.is-stacked .md-meta { justify-items: center; }
#models .md-meta > * { grid-area: 1 / 1; display: inline-flex; align-items: center; transition: opacity 0.22s ease-out, visibility 0s linear 0.22s; }
#models .md-where { gap: calc(14 * var(--u)); }
#models .md-place { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); color: var(--text-2); transition: opacity 0.22s ease-out; }
#models .md-place.is-out { opacity: 0; }
#models .md-place img,
#models .md-place svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); opacity: 0.55; color: #fff; }
#models .md-try { display: inline-flex; align-items: center; }
#models .md-try::before,
#models .md-agent + .md-agent::before {
  content: "";
  width: 1px;
  height: calc(13 * var(--u));
  margin-right: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.16);
}
#models .md-both { gap: calc(14 * var(--u)); color: var(--text-2); opacity: 0; visibility: hidden; }
#models .md-cap.is-both .md-both { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease-out) 0.12s; }
#models .md-cap.is-both .md-where { opacity: 0; visibility: hidden; }
#models .md-agent { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); }
#models .md-agent b { font-weight: 600; color: var(--text); }
#models .md-status { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); transition: opacity 0.2s ease-out; }
#models .md-agent.is-out .md-status { opacity: 0; }
#models .md-agent.is-done .md-status { color: var(--text); }
#models .md-tick { width: calc(11 * var(--u)); height: calc(11 * var(--u)); fill: none; stroke: var(--cyan); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

#models .mog-tools > .mog-tool:nth-child(2) {
  position: relative;
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: calc(15 * var(--u));
}
#models .mog-tools > .mog-tool:nth-child(2) .mog-chev { position: absolute; right: 0; top: 50%; margin-top: calc(-4.5 * var(--u)); }

@media (max-width: 600px) {
  #models .mog-tools { gap: calc(12 * var(--u)); }
  #models .mog-tools > .mog-spacer + .mog-tool,
  #models .mog-tools > .mog-round:nth-last-child(2) { display: none; }
}

#models .md-world.md-small .mog-footer,
#models .md-world.md-small .mog-hints,
#models .md-world.md-small .mog-step .mog-detail { font-size: calc(13 * var(--u)); }

@media (max-width: 520px) {

  #models .mog-footer, #models .mog-hints, #models .mog-tools,
  #models .mog-step, #models .mog-step .mog-detail, #models .mog-msg-text code { font-size: calc(13.9 * var(--u)); }
  #models .mog-key:not(.is-mod) { font-size: calc(14 * var(--u)); }
  #models .md-meta { font-size: calc(14.5 * var(--u)); }
  #models .md-beats { font-size: calc(25 * var(--u)); }
}

#models .md-pi { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* css/sections/screen.css */
#screen { --glow-y: 66%; }

#screen .scr {
  --dw: 1180;
  --dh: 740;
  --pz: 56px;
  --tw: 200;
  position: relative;

  max-width: min(1100px, max(860px, calc((100svh - 190px) * var(--dw) / var(--dh))));
  margin: 0 auto;
}
@media (max-width: 900px) { #screen .scr { --dw: 980; --dh: 780; --tw: 150; } }

@media (max-width: 780px) { #screen .scr { --dh: 940; } }

@media (max-width: 640px) { #screen .scr { --dw: 760; --dh: 1160; --tw: 72; --pz: 40px; } }

#screen .scr-stage {
  position: relative;
  aspect-ratio: var(--dw) / var(--dh);
  perspective: 2400px;
  perspective-origin: 50% 42%;
}
#screen .scr-world {
  --s: 1;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 46%;
}

@media (max-width: 1240px) { #screen .scr-world { --s: 0.92; } }
@media (max-width: 900px) { #screen .scr-world { --s: 0.88; } }

#screen .scr-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((100% - 474 * var(--u)) * 0.42);
  width: min(calc(750 * var(--u)), calc(100% - 24px));
  height: calc(474 * var(--u));
  margin: 0 auto;
  transform: translateZ(var(--pz));
}
#screen .scr-panel .mog-panel { width: 100%; }

#screen .scr-panel .scr-chat { position: absolute; left: 0; top: 0; will-change: opacity; }

#screen .scr.is-compact .mog-tools { gap: calc(12 * var(--u)); }
#screen .scr.is-compact .mog-tools .mog-spacer + .mog-tool { display: none; }
#screen .scr.is-compact .mog-tools .mog-round + .mog-round { margin-left: calc(-5 * var(--u)); }

#screen .scr-flash {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--dw) * 1px);
  height: calc(var(--dh) * 1px);
  transform-origin: 0 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 60px 6px rgba(225, 238, 255, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
#screen .scr-flash.is-on { visibility: visible; }

#screen .scr-card {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--dw) * 1px);
  height: calc(var(--dh) * 1px);
  transform-origin: 0 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}

#screen .scr-card.is-on { visibility: visible; }

#screen .scr-card {
  --shot-r: calc(8px * var(--dw) / var(--tw));

  --rim: calc(1px * var(--dw) / (var(--tw) * var(--s)));
}

#screen .scr-shade {
  position: absolute;
  inset: 0;
  border-radius: var(--shot-r);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.55), 0 10px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  will-change: transform, opacity;
}

#screen .scr-rim {
  position: absolute;
  inset: calc(-1 * var(--rim));
  border-radius: calc(var(--shot-r) + var(--rim));
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  will-change: transform, opacity;
}
#screen .scr-card .orb { transform: none; box-shadow: none; border-radius: var(--shot-r); will-change: transform; }

#screen .scr-slot {
  position: relative;
  width: calc(var(--tw) * var(--u));
  aspect-ratio: var(--dw) / var(--dh);
  border-radius: calc(8 * var(--u));
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);

  opacity: 0.006;
  will-change: opacity;
}
#screen .scr-slot.is-filled { opacity: 1; }
#screen .scr-slot .orb {
  transform: scale(calc(var(--tw) * var(--s) / var(--dw)));
  border-radius: 0;
  box-shadow: none;
}

#screen .scr-lead { margin-bottom: calc(7 * var(--u)); }
#screen .scr-answer ol { margin: 0; padding: 0; list-style: none; }
#screen .scr-answer li { position: relative; padding-left: calc(28 * var(--u)); margin-bottom: calc(4 * var(--u)); }
#screen .scr-n { position: absolute; left: calc(4 * var(--u)); color: var(--mog-secondary); }
#screen .scr-w { opacity: 0; transition: opacity 0.22s ease-out; }
#screen .scr-w.on { opacity: 1; }

#screen .scr-replay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: var(--dw) / var(--dh);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#screen .scr-replay:focus-visible { outline-offset: 10px; border-radius: 18px; }

.motion-off #screen .scr-replay { display: none; }
@media (prefers-reduced-motion: reduce) {
  #screen .scr-replay { display: none; }
  #screen .scr-w { transition: none; }
}

#screen .scr-hint {
  position: absolute;
  right: 0;
  bottom: -50px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(10, 12, 18, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
  pointer-events: none;
}
#screen .scr-hint svg { width: 13px; height: 13px; }
#screen .scr-replay:focus-visible .scr-hint { opacity: 1; transform: none; }
@media (hover: hover) {
  #screen .scr-replay:hover .scr-hint { opacity: 1; transform: none; }
}

@media (max-width: 760px) { #screen .scr-hint { display: none; } }

#screen .scr-note { margin-top: 24px; text-align: center; text-wrap: balance; }

#screen .orb {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--dw) * 1px);
  height: calc(var(--dh) * 1px);
  transform-origin: 0 0;
  transform: scale(var(--k, 0.93));
  border-radius: 12px;
  overflow: hidden;
  background: #0f0c1e;
  color: #fff;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 50px 120px rgba(0, 0, 0, 0.6), 0 14px 40px rgba(0, 0, 0, 0.4);
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
}
#screen .orb svg { display: inline-block; flex: none; }

#screen .orb-bar {
  position: relative;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  background: #1c1a22;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
#screen .orb-lights { display: flex; gap: 8px; }
#screen .orb-lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
#screen .orb-lights i:nth-child(2) { background: #febc2e; }
#screen .orb-lights i:nth-child(3) { background: #28c840; }
#screen .orb-arrows { display: flex; gap: 16px; color: rgba(255, 255, 255, 0.4); }
#screen .orb-arrows svg { width: 13px; height: 13px; }
#screen .orb-url {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 380px;
  height: 30px;
  margin-left: -190px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
#screen .orb-url svg { width: 12px; height: 12px; color: rgba(255, 255, 255, 0.42); }

#screen .orb-page {
  position: absolute;
  inset: 46px 0 0;
  overflow: hidden;

  background: radial-gradient(40% 55% at 22% 40%, rgba(168, 85, 247, 0.42), transparent 72%), #0f0c1e;
}

#screen .orb-top {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 56px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.74);
}
#screen .orb-logo { display: flex; align-items: center; gap: 9px; margin-right: 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: #fff; }
#screen .orb-logo svg { width: 26px; height: 26px; }
#screen .orb-sp { flex: 1; }
#screen .orb-ghost {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.66);
  font-weight: 600;
}

#screen .orb-main { display: flex; align-items: flex-start; gap: 60px; padding: 22px 56px 0; }
#screen .orb-hero { flex: 1; min-width: 0; padding-top: 44px; }
#screen .orb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  font-size: 13px;
  font-weight: 600;
  color: #f5d0fe;
}
#screen .orb-pill i { width: 6px; height: 6px; border-radius: 50%; background: #f0abfc; }
#screen .orb-h {
  margin-top: 24px;
  font-size: 68px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: #fff;
}

#screen .orb-h em { font-style: normal; color: #e9a8ff; }
#screen .orb-p { margin-top: 22px; max-width: 470px; font-size: 19px; line-height: 1.45; color: rgba(255, 255, 255, 0.64); }
#screen .orb-ctas { display: flex; align-items: center; gap: 20px; margin-top: 34px; font-size: 15px; }
#screen .orb-ctas .orb-ghost { height: 44px; padding: 0 20px; }
#screen .orb-link { color: rgba(255, 255, 255, 0.55); font-weight: 600; }
#screen .orb-trust { margin-top: 74px; display: flex; align-items: baseline; gap: 34px; color: rgba(255, 255, 255, 0.42); }
#screen .orb-trust span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
#screen .orb-trust b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

#screen .orb-form {
  flex: none;
  width: 410px;
  padding: 24px 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.17), 0 30px 80px rgba(30, 0, 70, 0.35);
}
#screen .orb-fh { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
#screen .orb-fs { margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, 0.55); }
#screen .orb-fields { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
#screen .orb-field { display: flex; flex-direction: column; gap: 5px; }
#screen .orb-field > span { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.62); }
#screen .orb-input {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.36);
}
#screen .orb-input svg { width: 10px; height: 10px; color: rgba(255, 255, 255, 0.4); }

#screen .orb-btn {
  margin-top: 16px;
  height: 42px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
}

#screen .orb-more { margin-top: 76px; padding: 0 56px; text-align: center; }
#screen .orb-more > span { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
#screen .orb-h2 { margin-top: 12px; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
#screen .orb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; text-align: left; }
#screen .orb-cards > div {
  height: 150px;
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}
#screen .orb-cards b { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 650; color: #fff; }

@container (max-width: 1100px) {
  #screen .orb-main { gap: 44px; padding-top: 18px; }
  #screen .orb-hero { padding-top: 30px; }
  #screen .orb-h { font-size: 56px; }
  #screen .orb-form { width: 380px; }
  #screen .orb-top > span:nth-child(5) { display: none; }

  #screen .orb-trust { flex-wrap: wrap; gap: 12px 28px; margin-top: 64px; }
  #screen .orb-trust span { flex-basis: 100%; }
}
@container (max-width: 800px) {

  #screen .orb-page { background: radial-gradient(62% 30% at 30% 22%, rgba(168, 85, 247, 0.42), transparent 72%), #0f0c1e; }
  #screen .orb-top { gap: 26px; padding: 0 44px; }
  #screen .orb-top > span:nth-child(4), #screen .orb-top > span:nth-child(7) { display: none; }
  #screen .orb-main { flex-direction: column; gap: 44px; padding: 14px 44px 0; }
  #screen .orb-hero { padding-top: 22px; }
  #screen .orb-h { font-size: 64px; }
  #screen .orb-trust { display: none; }
  #screen .orb-form { width: 100%; }
}

/* css/sections/terminal.css */
#terminal {
  --tm-glow: rgba(0, 117, 255, 0.0);
  --tm-glow-mid: rgba(0, 117, 255, 0.0);
  --tm-floor: rgba(0, 117, 255, 0.0);
  --tm-halo: rgba(0, 117, 255, 0.0);
}

@media (min-width: 861px) {
  #terminal { scroll-margin-top: calc(4px - var(--section-pad)); }
}

#terminal.is-pop-open { z-index: 3; }

#terminal .scene-head { max-width: 820px; }

#terminal .h2 .accent { display: inline-block; }

#terminal .lede { text-wrap: balance; }

#terminal .tm-stage {
  --tm-u: 1px;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
#terminal .tm-room {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: min(1600px, 170vw);
  height: 1050px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#terminal .tm-room::before,
#terminal .tm-room::after {
  content: "";
  position: absolute;
  inset: 0;
}
#terminal .tm-room::before {
  background:
    radial-gradient(34% 34% at 50% 50%, rgba(0, 117, 255, 0.12), rgba(0, 60, 255, 0.04) 60%, transparent 100%);
}

#terminal .tm-room::after {
  background:
    radial-gradient(40% 42% at 50% 48%, var(--tm-glow), var(--tm-glow-mid) 38%, transparent 100%),
    radial-gradient(44% 14% at 50% 80%, var(--tm-floor), transparent 100%);
  transition: opacity 0.12s linear;
}

#terminal .tm-stage.is-hidden .tm-room::after { opacity: 0; transition: none; }

#terminal .tm-view {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  perspective: 1800px;
  perspective-origin: 50% 38%;
}
#terminal .tm-cam {
  --u: var(--tm-u);
  position: relative;
  width: 100%;
  max-width: calc(750 * var(--u));

  min-height: calc(474 * var(--u));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

#terminal .tm-cam::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22% -16%;
  background: radial-gradient(50% 50% at 50% 50%, var(--tm-halo), transparent 100%);
  pointer-events: none;
}
#terminal .tm-cam .mog-panel { width: 100%; }

#terminal .tm-cam .mog-screen { transition: none; }
#terminal .tm-cam .mog-cursor { animation: tm-blink 1.1s steps(1) infinite; }
#terminal .tm-cam .is-typing .mog-cursor { animation: none; }

#terminal .tm-cam .mog-tab.is-pressed {
  background: rgba(255, 255, 255, 0.19);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  color: #fff;
}

#terminal .tm-cam .mog-key { transition-duration: 0.12s; }
#terminal .tm-cam .mog-tab,
#terminal .tm-cam .mog-footer .mog-glyph,
#terminal .tm-cam .mog-footer .mog-glyph ~ * { cursor: pointer; }
@keyframes tm-blink { 55% { opacity: 0; } }

#terminal .tm-stage.is-hidden .tm-cam { visibility: hidden; }

#terminal .tm-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  width: 100%;
  max-width: calc(750 * var(--tm-u));
  margin: clamp(30px, 3.6vw, 44px) auto 0;
}

#terminal .tm-theme { position: relative; }
#terminal .tm-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 6px;
  margin-left: -6px;
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-2);
  transition: background-color 0.2s;
}
#terminal .tm-theme-btn:hover { background: rgba(255, 255, 255, 0.04); }
#terminal .tm-eq { color: var(--text-3); white-space: nowrap; }
#terminal .tm-pill {
  --pill-bg: #282c34;
  --pill-fg: #fff;
  --pill-ring: rgba(129, 162, 190, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 13px 0 11px;
  border-radius: 10px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 6px 18px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

#terminal .tm-theme-btn:focus-visible { outline: none; }
#terminal .tm-theme-btn:focus-visible .tm-pill,
#terminal .tm-theme-btn[aria-expanded="true"] .tm-pill {
  box-shadow: inset 0 0 0 1.5px var(--pill-ring), 0 6px 18px rgba(0, 0, 0, 0.35);
}

#terminal .tm-name { min-width: 20ch; text-align: left; }
#terminal .tm-dots { display: inline-flex; gap: 3px; flex: none; }
#terminal .tm-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#terminal .tm-updown { width: 14px; height: 14px; margin: 0 -3px 0 auto; opacity: 0.55; flex: none; }

#terminal .tm-toggle {
  min-height: 44px;
  padding: 0 12px;
  margin-right: -12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-3);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s;
}
#terminal .tm-toggle:hover { color: var(--text); }

#terminal .tm-pop {
  position: absolute;
  z-index: 5;
  left: -6px;
  top: calc(100% + 10px);
  width: 330px;
  border-radius: 13px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  background: rgba(32, 32, 35, 0.94);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18), inset 0 0.5px 0 rgba(255, 255, 255, 0.1), 0 28px 70px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.35);
}
#terminal .tm-pop[hidden] { display: none; }
#terminal .tm-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  cursor: text;
}
#terminal .tm-search svg { width: 15px; height: 15px; flex: none; }
#terminal .tm-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}
#terminal .tm-search input::placeholder { color: rgba(255, 255, 255, 0.4); }

@media (max-width: 560px), (pointer: coarse) {
  #terminal .tm-search input { font-size: 16px; }
}
#terminal .tm-done { display: none; font-size: 14px; font-weight: 600; color: rgb(64, 156, 255); padding: 6px 2px 6px 10px; }
#terminal .tm-list {

  position: relative;
  max-height: 248px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
#terminal .tm-group {
  padding: 10px 14px 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
#terminal .tm-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 28px;
  margin: 0 6px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  cursor: pointer;
}
#terminal .tm-opt span { overflow: hidden; text-overflow: ellipsis; }
#terminal .tm-list:focus { outline: none; }

@media (pointer: coarse) {
  #terminal .tm-opt { height: 42px; font-size: 14.5px; }
}
#terminal .tm-opt.is-hl { background: rgb(10, 132, 255); color: #fff; }
#terminal .tm-opt svg { width: 12px; height: 12px; margin-left: auto; flex: none; }

#terminal .tm-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 36px;
  height: 18px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
#terminal .tm-chip i { width: 5px; height: 5px; border-radius: 50%; }
#terminal .tm-empty { padding: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.5); }

@media (min-width: 861px) and (max-height: 1030px) {
  #terminal .wrap { display: flex; flex-direction: column; min-height: calc(100vh - var(--nav-h) - 32px); }

  #terminal .scene-head, #terminal .tm-stage { width: 100%; }
  #terminal .tm-stage {
    flex: 1 0 0;
    container-type: size;
    min-height: calc(340 * 0.84px + 80px);
    max-height: calc(474 * 1px + 80px);
    --tm-u: clamp(0.84px, (100cqh - 80px) / 474, 1px);
  }
  #terminal .tm-cam { min-height: clamp(calc(340 * var(--u)), 100cqh - 80px, calc(474 * var(--u))); }
  #terminal .tm-cam .mog-panel { height: clamp(calc(340 * var(--u)), 100cqh - 80px, calc(474 * var(--u))); }
  #terminal .tm-controls { margin-top: 28px; }
}

@media (min-width: 861px) {
  #terminal .tm-cam .mog-tab { font-size: max(10.5px, calc(11.5 * var(--u))); }
}

@media (max-width: 860px) {
  #terminal .tm-stage { --tm-u: 0.94px; }
}

@media (max-width: 680px) {
  #terminal .tm-controls { flex-direction: column; justify-content: center; gap: 14px; margin-top: 26px; }
  #terminal .tm-theme-btn { margin-left: 0; }
  #terminal .tm-toggle { margin-right: 0; }
}
@media (max-width: 560px) {
  #terminal .tm-stage { --tm-u: 0.86px; }
  #terminal .tm-cam { min-height: calc(440 * var(--u)); }
  #terminal .tm-cam .mog-panel { height: calc(440 * var(--u)); }

  #terminal .tm-cam .mog-tab { font-size: calc(12.5 * var(--u)); }
  #terminal .tm-theme-btn { font-size: 14px; gap: 9px; max-width: calc(100vw - 32px); }
  #terminal .tm-pill { min-width: 0; }
  #terminal .tm-name { min-width: 0; width: 20ch; overflow: hidden; text-overflow: ellipsis; }
  #terminal .tm-pill { height: 32px; padding: 0 11px 0 9px; gap: 8px; }
  #terminal .tm-pop { position: fixed; left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; }

  #terminal.is-pop-open .tm-theme-btn,
  #terminal.is-pop-open .tm-toggle { visibility: hidden; }
  #terminal .tm-done { display: block; }
  #terminal .tm-list { max-height: min(300px, 38vh); }
}

#terminal:not(.is-live) .mog-cursor,
#terminal .tm-stage.is-hidden .mog-cursor { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #terminal .tm-cam .mog-cursor { animation: none; }
}

/* css/sections/agents.css */
#agents { --glow-y: 64%; }

@media (min-width: 761px) {
  #agents {
    scroll-margin-top: calc(4px - var(--section-pad) - var(--ag-land, clamp(0px, 880px - 100vh, 52px)));
    scroll-margin-top: calc(4px - var(--section-pad) - var(--ag-land, clamp(0px, 880px - 100svh, 52px)));
  }
}
#agents .lede { text-wrap: balance; }

#agents .ag-demo { position: relative; }
#agents .ag-stage {
  position: relative;
  width: min(100% - 32px, 1400px);
  margin: 0 auto;
  container-type: inline-size;

  --ag-u: min(0.92px, 100cqw / 1430, max(0.82px, (100vh - 330px) / 522));
  --ag-ease: cubic-bezier(0.3, 0.72, 0.16, 1);
}

#agents .ag-view {
  --ag-cy: 255;
  position: relative;
  height: calc(522 * var(--ag-u));
  perspective: calc(1500 * var(--ag-u));
  perspective-origin: 50% calc(var(--ag-cy) * var(--ag-u));
  user-select: none;
  -webkit-user-select: none;
}

#agents .ag-floor {
  position: absolute;
  left: 50%;
  top: calc((var(--ag-cy) + 237) * var(--ag-u));
  width: calc(1700 * var(--ag-u));
  height: calc(300 * var(--ag-u));
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(60, 150, 255, 0.14), rgba(0, 90, 230, 0.05) 50%, transparent 72%);
  pointer-events: none;
}

#agents .ag-cam {
  --cy: 0;
  --cz: 0;
  --crx: 0;
  position: absolute;
  left: 50%;
  top: calc(var(--ag-cy) * var(--ag-u));
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translate3d(0, calc(var(--cy) * var(--ag-u)), calc(var(--cz) * var(--ag-u))) rotateX(calc(var(--crx) * 1deg));
  transition: transform 2.6s cubic-bezier(0.45, 0, 0.2, 1);
}
#agents .ag-stage[data-cam="close"] .ag-cam,
#agents .ag-stage[data-cam="hold"] .ag-cam { --cz: 0; }
#agents .ag-stage[data-cam="wide"] .ag-cam { --cz: -110; }
#agents .ag-stage.is-cut .ag-cam,
#agents .ag-stage.is-cut .ag-hub,
#agents .ag-stage.is-cut .ag-win,
#agents .ag-stage.is-cut .ag-win::after { transition: none !important; }

#agents .ag-hub {
  --w: calc(750 * var(--ag-u));
  --u: var(--ag-u);
  position: absolute;
  left: calc(var(--w) * -0.5);
  top: calc(-237 * var(--ag-u));
  width: var(--w);
  height: calc(474 * var(--ag-u));

  transform: translate3d(0, 0, calc(var(--cz) * -1 * var(--ag-u)));
  transition: transform 2.6s cubic-bezier(0.45, 0, 0.2, 1);
}
#agents .ag-hub.is-off { visibility: hidden; }

#agents .ag-hub .mog-panel {
  width: 100%;
  height: 100%;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.55),
    0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35),
    0 calc(30 * var(--u)) calc(120 * var(--u)) rgba(0, 90, 255, 0.14);
}

#agents .mog-tag.ag-lit {
  background: rgba(97, 233, 251, 0.24);
  color: #e9feff;
  box-shadow: 0 0 calc(12 * var(--u)) rgba(97, 233, 251, 0.35);
  transition: background-color 0.18s, color 0.18s, box-shadow 0.18s;
}

#agents .ag-hub .mog-row::before { transition: background-color 0.6s ease-out; }
#agents .ag-hub .mog-row.ag-fire::before { background: rgba(97, 233, 251, 0.2); transition: none; }
#agents .ag-run .mog-msg-text,
#agents .ag-run .mog-step,
#agents .ag-run .ag-worked { animation: ag-in 0.32s var(--ease-out) both; }

#agents .ag-worked { display: flex; align-items: center; justify-content: space-between; padding: calc(2 * var(--u)) calc(22 * var(--u)) calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--mog-tertiary); }
#agents .ag-copy { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); color: var(--mog-secondary); }
#agents .ag-copy svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
#agents .ag-run .mog-msg-user { animation: none; }
@keyframes ag-in { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } }

#agents .ag-win {
  --w: calc(560 * var(--ag-u));
  --h: calc(474 * var(--ag-u));

  --x: 0;
  --y: -20;
  --z: -260;
  --ry: 0;
  --sc: 0.9;
  --o: 0;
  position: absolute;
  left: calc(var(--w) * -0.5);
  top: calc(var(--h) * -0.5);
  width: var(--w);
  height: var(--h);
  border-radius: calc(12 * var(--ag-u));
  overflow: hidden;
  background: rgb(24, 26, 31);
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.2),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.12),
    0 calc(24 * var(--ag-u)) calc(70 * var(--ag-u)) rgba(0, 0, 0, 0.55);
  transform: translate3d(calc(var(--x) * var(--ag-u)), calc(var(--y) * var(--ag-u)), calc(var(--z) * var(--ag-u))) rotateY(calc(var(--ry) * 1deg)) scale(var(--sc));
  opacity: var(--o);
  transition: transform 1.5s var(--ag-ease), opacity 0.6s ease-out, box-shadow 0.3s;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}
#agents .ag-win::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(5, 7, 10, 0.55);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
#agents .ag-term { --x: -110; }
#agents .ag-app { --x: 110; background: rgb(30, 30, 33); }
#agents .ag-term.is-out,
#agents .ag-term.is-back { --x: -440; --y: 0; --z: -170; --ry: 30; --sc: 1; --o: 1; }
#agents .ag-app.is-out,
#agents .ag-app.is-back { --x: 440; --y: 0; --z: -170; --ry: -30; --sc: 1; --o: 1; }

@media (min-width: 1400px) {
  #agents .ag-term.is-out, #agents .ag-term.is-back { --x: -460; }
  #agents .ag-app.is-out, #agents .ag-app.is-back { --x: 460; }
}

#agents .ag-win:not(.is-out):not(.is-back) { pointer-events: none; }

#agents .ag-bar {
  height: calc(28 * var(--ag-u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--ag-u));
  padding: 0 calc(12 * var(--ag-u));
  background: rgb(42, 43, 48);
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.6);
  position: relative;
}
#agents .ag-app .ag-bar { background: rgb(44, 44, 48); }

@media (min-width: 1200px) {
  #agents .ag-term .ag-bar span { left: calc(70 * var(--ag-u)); text-align: left; }
  #agents .ag-app .ag-bar span { display: none; }
}
#agents .ag-bar i { width: calc(12 * var(--ag-u)); height: calc(12 * var(--ag-u)); border-radius: 50%; background: #ff5f57; flex: none; }
#agents .ag-bar i:nth-child(2) { background: #febc2e; }
#agents .ag-bar i:nth-child(3) { background: #28c840; }
#agents .ag-bar span {
  position: absolute;
  left: calc(70 * var(--ag-u));
  right: calc(70 * var(--ag-u));
  text-align: center;
  font-size: calc(13 * var(--ag-u));
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#agents .ag-tty { position: absolute; top: calc(28 * var(--ag-u)); left: 0; right: 0; bottom: 0; overflow: hidden; }
#agents .ag-tty-in {
  transition: transform 0.25s ease-out;
  padding: calc(14 * var(--ag-u)) calc(18 * var(--ag-u));
  font-family: var(--font-mono);
  font-size: calc(13 * var(--ag-u));
  line-height: calc(20 * var(--ag-u));
  color: rgb(220, 223, 228);
  white-space: pre;
}
#agents .ag-tty-in .ag-l { min-height: calc(20 * var(--ag-u)); }
#agents .ag-tty-in .ag-gap { height: calc(8 * var(--ag-u)); }
#agents .ag-tty .c { color: rgb(97, 214, 236); }
#agents .ag-tty .g { color: rgb(110, 220, 140); }
#agents .ag-tty .r { color: rgb(255, 120, 120); }
#agents .ag-tty .d { color: rgba(220, 223, 228, 0.5); }
#agents .ag-tty .o { color: rgb(232, 140, 100); }
#agents .ag-tty b { font-weight: 700; color: #fff; }
#agents .ag-tty .ag-cur {
  display: inline-block;
  width: calc(8 * var(--ag-u));
  height: calc(16 * var(--ag-u));
  vertical-align: calc(-3 * var(--ag-u));
  background: rgba(220, 223, 228, 0.8);
}

#agents .ag-appbody { position: absolute; inset: calc(28 * var(--ag-u)) 0 0 0; display: flex; }
#agents .ag-side {
  flex: none;

  width: calc(250 * var(--ag-u));
  padding: calc(12 * var(--ag-u)) calc(10 * var(--ag-u));
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset -0.5px 0 0 rgba(255, 255, 255, 0.09);
  font-size: calc(12.5 * var(--ag-u));
  color: rgba(255, 255, 255, 0.5);
}
#agents .ag-side-new {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--ag-u));
  height: calc(30 * var(--ag-u));
  padding: 0 calc(10 * var(--ag-u));
  border-radius: calc(8 * var(--ag-u));
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}
#agents .ag-side-new svg { width: calc(13 * var(--ag-u)); height: calc(13 * var(--ag-u)); }
#agents .ag-side-h { margin: calc(18 * var(--ag-u)) calc(10 * var(--ag-u)) calc(6 * var(--ag-u)); font-size: calc(11.5 * var(--ag-u)); font-weight: 600; color: rgba(255, 255, 255, 0.36); }
#agents .ag-side-row { height: calc(28 * var(--ag-u)); line-height: calc(28 * var(--ag-u)); padding: 0 calc(10 * var(--ag-u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#agents .ag-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--ag-u));

  padding: 0 calc(16 * var(--ag-u)) calc(34 * var(--ag-u)) calc(48 * var(--ag-u));
}
#agents .ag-appicon { width: calc(44 * var(--ag-u)); height: calc(44 * var(--ag-u)); }
#agents .ag-compose {
  width: 100%;
  max-width: calc(330 * var(--ag-u));
  box-sizing: border-box;
  padding: calc(14 * var(--ag-u)) calc(12 * var(--ag-u)) calc(10 * var(--ag-u)) calc(15 * var(--ag-u));
  border-radius: calc(16 * var(--ag-u));
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 calc(6 * var(--ag-u)) calc(20 * var(--ag-u)) rgba(0, 0, 0, 0.25);
}
#agents .ag-compose-text { min-height: calc(42 * var(--ag-u)); font-size: calc(14.5 * var(--ag-u)); line-height: calc(20 * var(--ag-u)); color: rgba(255, 255, 255, 0.92); }
#agents .ag-ccaret {
  display: inline-block;
  width: calc(1.5 * var(--ag-u));
  height: calc(17 * var(--ag-u));
  margin-left: 1px;
  vertical-align: calc(-3 * var(--ag-u));
  background: rgba(255, 255, 255, 0.9);
  animation: mog-blink 1.06s steps(1) infinite;
}
#agents .ag-compose-row { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--ag-u)); }
#agents .ag-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--ag-u));
  min-width: 0;
  height: calc(24 * var(--ag-u));
  padding: 0 calc(9 * var(--ag-u));
  border-radius: calc(7 * var(--ag-u));
  background: rgba(255, 255, 255, 0.06);
  font-size: calc(11.5 * var(--ag-u));
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#agents .ag-chip svg { flex: none; width: calc(13 * var(--ag-u)); height: calc(13 * var(--ag-u)); }
#agents .ag-send {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(28 * var(--ag-u));
  height: calc(28 * var(--ag-u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: rgb(30, 30, 33);
}
#agents .ag-send svg { width: calc(14 * var(--ag-u)); height: calc(14 * var(--ag-u)); }
#agents:not(.is-live) .ag-ccaret,
#agents:not(.is-live) .mog-caret { animation-play-state: paused; }

#agents .ag-stage.is-still .ag-ccaret { animation: none; }
#agents .ag-stage.is-still .mog-eyes .glow { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) { #agents .ag-ccaret { animation: none; } }

#agents .ag-ways {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(10px, 1.2vw, 18px);
}
#agents .ag-way {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-3);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s;
}
#agents .ag-way:hover { color: var(--text-2); }
#agents .ag-way.is-on { color: var(--text); }

@media (max-width: 1199px) {

  #agents .ag-stage { --ag-u: 0.92px; width: min(100% - 32px, 760px); }
  #agents .ag-view { height: calc(760 * var(--ag-u)); perspective: calc(1800 * var(--ag-u)); perspective-origin: 50% 50%; }
  #agents .ag-cam { top: 50%; }
  #agents .ag-floor { top: calc(50% + 372 * var(--ag-u)); }
  #agents .ag-hub { --w: min(calc(750 * var(--ag-u)), 100cqw); top: calc(-102 * var(--ag-u)); }
  #agents .ag-stage[data-cam="close"] .ag-cam { --cz: 0; --cy: -135; }
  #agents .ag-stage[data-cam="wide"] .ag-cam,
  #agents .ag-stage[data-cam="hold"] .ag-cam { --cz: 0; --cy: 0; }
  #agents .ag-win { --w: min(calc(600 * var(--ag-u)), 100cqw - 16px); --h: calc(250 * var(--ag-u)); --x: 0; --y: 33; --z: -80; --sc: 0.94; }
  #agents .ag-term.is-out,
  #agents .ag-app.is-out { --x: 0; --y: -247; --z: -1; --ry: 0; --sc: 1; --o: 1; }
  #agents .ag-term.is-back,
  #agents .ag-app.is-back { --x: 0; --y: -292; --z: -70; --ry: 0; --sc: 0.94; --o: 1; }
  #agents .ag-win.is-back::after { opacity: 1; }
  #agents .ag-side { display: none; }
  #agents .ag-main { gap: calc(12 * var(--ag-u)); padding: 0 calc(18 * var(--ag-u)) calc(12 * var(--ag-u)); }
  #agents .ag-appicon { width: calc(34 * var(--ag-u)); height: calc(34 * var(--ag-u)); }
  #agents .ag-compose { max-width: calc(360 * var(--ag-u)); }

  #agents .ag-chip { font-size: max(calc(11.5 * var(--ag-u)), 10.6px); }
}

@media (min-width: 761px) and (max-width: 1199px) {
  #agents .ag-stage {
    --ag-u: clamp(0.8px, (100vh - 140px) / 760, 0.92px);
    --ag-u: clamp(0.8px, (100svh - 140px) / 760, 0.92px);
  }
}

@media (max-width: 520px) {
  #agents .ag-stage { width: calc(100% - 32px); }
  #agents .ag-view { height: calc(640 * var(--ag-u)); }
  #agents .ag-floor { top: calc(50% + 300 * var(--ag-u)); }
  #agents .ag-hub { top: calc(-154 * var(--ag-u)); }
  #agents .ag-stage[data-cam="close"] .ag-cam { --cy: -83; }
  #agents .ag-term.is-out,
  #agents .ag-app.is-out { --y: -200; --sc: 0.88; }
  #agents .ag-term.is-back,
  #agents .ag-app.is-back { --y: -240; --sc: 0.83; }
  #agents .ag-tty { bottom: calc(76 * var(--ag-u)); }
  #agents .ag-main { gap: calc(8 * var(--ag-u)); padding-bottom: calc(80 * var(--ag-u)); }
  #agents .ag-appicon { width: calc(28 * var(--ag-u)); height: calc(28 * var(--ag-u)); }
  #agents .ag-compose { padding-top: calc(11 * var(--ag-u)); }
  #agents .ag-compose-text { min-height: calc(28 * var(--ag-u)); }

  #agents .ag-chip { font-size: 12px; }
  #agents .ag-hub .mog-subtitle { display: none; }
  #agents .ag-ways { gap: 2px; margin-top: 8px; }
  #agents .ag-way { font-size: 14px; }
}

/* css/sections/images.css */
#images { --glow-y: 64%; }

#images .img-stage { max-width: 1100px; }
#images .img-view {
  position: relative;
  perspective: 1700px;
  perspective-origin: 50% 40%;
}

#images .img-aura {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(1560px, 170%);
  aspect-ratio: 1.55;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(97, 233, 251, 0.24), rgba(0, 160, 255, 0.11) 45%, rgba(0, 117, 255, 0.05) 66%, transparent 86%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
#images .img-world {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

#images .img-mog { --s: 1; width: calc(750 * var(--u)); max-width: 100%; height: calc(474 * var(--u)); }
#images .img-mog .mog-panel {
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    0 calc(40 * var(--u)) calc(110 * var(--u)) rgba(0, 0, 0, 0.62),
    0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.4),
    0 0 calc(160 * var(--u)) rgba(0, 117, 255, 0.07);
}

#images .mog-eyes svg { max-width: none; }

#images .img-mog .mog-panel[hidden] { display: none; }

#images .mog-composer-bar .mog-round { transition: transform 0.12s var(--ease-out), background-color 0.12s; }
#images .mog-composer-bar.is-pressing .mog-round.is-send { transform: scale(0.88); background: rgba(255, 255, 255, 0.7); }

#images .mog-composer-bar.is-typing .mog-caret { animation: none; }

#images .img-scroll { will-change: transform; }
#images .img-turn { display: flex; flex-direction: column; }
#images .img-turn[hidden] { display: none; }
#images .img-step { transition: opacity 0.28s var(--ease-out), transform 0.36s var(--ease-out); }
#images .img-step.is-out { opacity: 0; transform: translateY(calc(6 * var(--u))); }
#images .img-step .mog-count svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); opacity: 0.35; vertical-align: middle; }
#images .img-pic {
  position: relative;
  margin: calc(4 * var(--u)) 0 calc(8 * var(--u)) calc(22 * var(--u));
  transition: opacity 0.3s var(--ease-out);
}
#images .img-pic.is-out { opacity: 0; }

#images .img-answer { padding: 0 calc(22 * var(--u)) calc(4 * var(--u)); transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out); }
#images .img-answer.is-out { opacity: 0; transform: translateY(calc(4 * var(--u))); }
#images .img-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(6 * var(--u));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1);
}
#images .img-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#images .img-bloom {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(150, 245, 255, 0.85), rgba(70, 210, 255, 0.32) 42%, rgba(0, 140, 255, 0.08) 70%, transparent);
}
#images .img-bloom.is-wide {
  background: radial-gradient(closest-side, rgba(60, 200, 255, 0.28), rgba(0, 117, 255, 0.1) 55%, transparent);
}

#images .img-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
  opacity: 0;
  will-change: opacity;
}
#images .img-voxels { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; }
#images .img-voxels[hidden] { display: none; }

@media (max-width: 860px) { #images .img-mog { --s: 0.86; } }
@media (max-width: 700px) {
  #images .img-mog { width: 100%; }
  #images .img-mog { height: calc(548 * var(--u)); }
  #images .img-mog .mog-panel { width: 100%; height: 100%; }
  #images .img-mog .mog-draft { white-space: pre; overflow: hidden; }
}
@media (max-width: 520px) {
  #images .img-mog { --s: 0.76; }

  #images .img-mog .mog-footer, #images .img-mog .mog-hints, #images .img-mog .mog-tools,
  #images .img-mog .mog-step, #images .img-mog .mog-step .mog-detail { font-size: calc(13.9 * var(--u)); }
  #images .img-mog .mog-key:not(.is-mod) { font-size: calc(14 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  #images .img-step, #images .img-pic, #images .img-answer { transition: none; }
}

/* css/sections/computer.css */
#computer {
  --glow-x: 50%;
  --glow-y: 62%;
}
#computer .lede { text-wrap: balance; }
#computer .cu-stage {
  position: relative;
  container-type: inline-size;
  perspective: 2400px;
  perspective-origin: 62% 42%;
}

#computer .cu-rig {
  --px: calc(100cqw / 1180);
  --cw: 706;
  --ch: 474;
  --cx: 622;
  --cu: calc(0.84 * 100cqw / 1216);
  --d: calc((97.8cqw - var(--cw) * var(--cu)) / (10 + var(--cx)));
  position: relative;
  height: max(calc(508 * var(--d)), calc(206 * var(--d) + var(--ch) * var(--cu)));
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -6deg));
  will-change: transform;

  overflow-anchor: none;
}

#computer .cu-rig::before {
  content: "";
  position: absolute;
  left: calc(-120 * var(--px));
  top: calc(-110 * var(--px));
  width: calc(1300 * var(--px));
  height: calc(820 * var(--px));
  background:
    radial-gradient(closest-side at 36% 47%, rgba(0, 117, 255, 0.5), rgba(0, 70, 255, 0.17) 50%, transparent 82%);
  transform: translateZ(-160px);
  pointer-events: none;
}

#computer .cu-mac {
  position: absolute;
  left: 0;
  top: 0;
  padding: calc(10 * var(--d));
  border-radius: calc(21 * var(--d));
  background: linear-gradient(160deg, #24272d, #101215 46%, #0b0c0e);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 calc(50 * var(--d)) calc(120 * var(--d)) rgba(0, 0, 0, 0.62),
    0 calc(14 * var(--d)) calc(36 * var(--d)) rgba(0, 0, 0, 0.4),
    0 0 calc(150 * var(--d)) calc(14 * var(--d)) rgba(0, 96, 255, 0.17);
}

#computer .cu-chat.mog {
  --u: var(--cu);
  position: absolute;
  right: 2.2cqw;
  top: calc(206 * var(--d));
  height: calc(var(--ch) * var(--u));
  transform: translateZ(70px);
}
#computer .cu-chat.is-off { visibility: hidden; }
#computer .cu-chat .mog-panel { width: calc(var(--cw) * var(--u)); height: 100%; }

#computer .cu-chat .mog-transcript { justify-content: flex-end; }
#computer .cu-chat .mog-transcript::after { content: ""; flex: 1 0 0; }
#computer .cu-chat .mog-transcript.is-over {
  -webkit-mask-image: linear-gradient(transparent, #000 calc(30 * var(--u)));
  mask-image: linear-gradient(transparent, #000 calc(30 * var(--u)));
}

#computer .cu-chat .mog-draft:not(.is-empty) { display: block; }
#computer .cu-chat .mog-draft:not(.is-empty) .mog-caret {
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: calc(-1.6 * var(--u) - 1px);
}
#computer .cu-chat .mog-panel {
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.18),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(0, 0, 0, 0.6),
    0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, 0.42);
}

#computer .cu-screen {

  --sw: 780; --sh: 488;
  --nx: 28; --ny: 44; --nw: 362; --nh: 262; --lw: 122;
  --fx: 404; --fy: 92; --fw: 188; --fh: 246;
  --yx: 702; --yy: 96;

  --a0x: 300; --a0y: 268;
  --atx: 222; --aty: 236;
  --arx: 416; --ary: 326;
  position: relative;
  width: calc(var(--sw) * var(--d));
  height: calc(var(--sh) * var(--d));
  border-radius: calc(11 * var(--d));
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  background: #04060c;
  isolation: isolate;
}
#computer .cu-screen img { display: block; }

#computer .cu-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #060a14;
}
#computer .cu-wall::before {

  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1.4 * var(--d));
  height: calc(1.4 * var(--d));
  border-radius: 50%;
  color: rgba(214, 236, 255, 0.55);
  box-shadow:
    calc(82 * var(--d)) calc(64 * var(--d)) currentColor, calc(170 * var(--d)) calc(36 * var(--d)) rgba(214, 236, 255, 0.3),
    calc(250 * var(--d)) calc(92 * var(--d)) currentColor, calc(318 * var(--d)) calc(40 * var(--d)) rgba(214, 236, 255, 0.25),
    calc(452 * var(--d)) calc(58 * var(--d)) currentColor, calc(530 * var(--d)) calc(96 * var(--d)) rgba(214, 236, 255, 0.3),
    calc(610 * var(--d)) calc(44 * var(--d)) currentColor, calc(690 * var(--d)) calc(130 * var(--d)) rgba(214, 236, 255, 0.35),
    calc(748 * var(--d)) calc(176 * var(--d)) currentColor, calc(30 * var(--d)) calc(160 * var(--d)) rgba(214, 236, 255, 0.3),
    calc(126 * var(--d)) calc(232 * var(--d)) rgba(214, 236, 255, 0.25), calc(706 * var(--d)) calc(246 * var(--d)) rgba(214, 236, 255, 0.3),
    calc(380 * var(--d)) calc(150 * var(--d)) rgba(214, 236, 255, 0.2), calc(580 * var(--d)) calc(200 * var(--d)) rgba(214, 236, 255, 0.2);
}
#computer .cu-planet {
  position: absolute;
  left: -38%;
  top: 67%;
  width: 190%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: rgba(200, 255, 255, 0.8);
  background: radial-gradient(closest-side, #020308 93%, #061430 98.4%, #0b3570);
  box-shadow:
    0 calc(-3 * var(--d)) calc(18 * var(--d)) rgba(97, 233, 251, 0.32),
    0 calc(-20 * var(--d)) calc(90 * var(--d)) rgba(0, 117, 255, 0.28);
}

#computer .cu-menubar {
  position: absolute;
  inset: 0 0 auto;
  height: calc(22 * var(--d));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: calc(15 * var(--d));
  padding: 0 calc(12 * var(--d)) 0 calc(16 * var(--d));
  background: rgba(10, 14, 24, 0.42);
  box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.06);
  font-size: calc(11.5 * var(--d));
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
}
#computer .cu-menubar b { font-weight: 700; }
#computer .cu-menubar img { width: calc(13 * var(--d)); height: calc(13 * var(--d)); object-fit: contain; opacity: 0.92; }
#computer .cu-menubar .cu-apple { width: calc(12 * var(--d)); margin-top: calc(-1 * var(--d)); }
#computer .cu-menubar .cu-batt { width: calc(20 * var(--d)); height: calc(20 * var(--d)); }
#computer .cu-sp { flex: 1; }

#computer .cu-win {
  position: absolute;
  z-index: 2;
  border-radius: calc(11 * var(--d));
  overflow: hidden;
  background: #1e1e20;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.17),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
    0 calc(18 * var(--d)) calc(46 * var(--d)) rgba(0, 0, 0, 0.55),
    0 calc(4 * var(--d)) calc(12 * var(--d)) rgba(0, 0, 0, 0.35);
}
#computer .cu-bar {
  position: relative;
  height: calc(34 * var(--d));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--d));
  padding: 0 calc(12 * var(--d));
  background: #29292c;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  font-size: calc(12 * var(--d));
}
#computer .cu-lights { display: flex; gap: calc(7 * var(--d)); flex: none; }
#computer .cu-lights i {
  width: calc(11 * var(--d));
  height: calc(11 * var(--d));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}

#computer .cu-finder .cu-lights i { background: #ff5f57; }
#computer .cu-finder .cu-lights i:nth-child(2) { background: #febc2e; }
#computer .cu-finder .cu-lights i:nth-child(3) { background: #28c840; }

#computer .cu-finder {
  z-index: 4;
  left: calc(var(--fx) * var(--d));
  top: calc(var(--fy) * var(--d));
  width: calc(var(--fw) * var(--d));
  height: calc(var(--fh) * var(--d));
  display: flex;
  flex-direction: column;
}
#computer .cu-nav { display: flex; gap: calc(6 * var(--d)); color: rgba(255, 255, 255, 0.38); }
#computer .cu-nav svg { width: calc(11 * var(--d)); height: calc(11 * var(--d)); }
#computer .cu-finder .cu-bar b { font-weight: 650; color: rgba(255, 255, 255, 0.88); }

#computer .cu-files { flex: 1; min-height: 0; overflow: hidden; padding: calc(5 * var(--d)) calc(6 * var(--d)) 0; border-bottom: calc(5 * var(--d)) solid transparent; }
#computer .cu-file {
  height: calc(20 * var(--d));
  display: flex;
  align-items: center;
  gap: calc(7 * var(--d));
  padding: 0 calc(7 * var(--d));
  border-radius: calc(5 * var(--d));
  font-size: calc(11.5 * var(--d));
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.84);
}
#computer .cu-file:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
#computer .cu-file img { width: calc(15 * var(--d)); height: calc(15 * var(--d)); flex: none; }
#computer .cu-file span { overflow: hidden; text-overflow: ellipsis; }
#computer .cu-file em {
  margin-left: auto;
  padding-left: calc(8 * var(--d));
  font-style: normal;
  font-size: calc(10.5 * var(--d));
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}
#computer .cu-status {
  flex: none;
  height: calc(22 * var(--d));
  display: grid;
  place-items: center;
  font-size: calc(10.5 * var(--d));
  color: rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #222224;
  transition: color 0.4s;
}
#computer .cu-finder.is-read .cu-status { color: var(--ice); }

#computer .cu-notes {
  z-index: 3;
  left: calc(var(--nx) * var(--d));
  top: calc(var(--ny) * var(--d));
  width: calc(var(--nw) * var(--d));
  height: calc(var(--nh) * var(--d));
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
#computer .cu-notes.is-open { visibility: visible; }
#computer .cu-newnote {
  position: absolute;
  left: calc((var(--lw) - 36) * var(--d));
  top: calc(5 * var(--d));
  width: calc(28 * var(--d));
  height: calc(24 * var(--d));
  border-radius: calc(6 * var(--d));
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  transition: background-color 0.15s;
}
#computer .cu-newnote svg { width: calc(15 * var(--d)); height: calc(15 * var(--d)); }
#computer .cu-newnote.is-down { background: rgba(255, 255, 255, 0.16); }
#computer .cu-tool { color: rgba(255, 255, 255, 0.5); font-weight: 600; display: grid; place-items: center; }
#computer .cu-tool svg { width: calc(13 * var(--d)); height: calc(13 * var(--d)); }
#computer .cu-notes-body { flex: 1; min-height: 0; display: flex; }
#computer .cu-list {
  flex: none;
  width: calc(var(--lw) * var(--d));
  padding: calc(6 * var(--d));
  background: #232326;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
#computer .cu-note {
  display: grid;
  gap: calc(2 * var(--d));
  padding: calc(7 * var(--d)) calc(9 * var(--d));
  border-radius: calc(7 * var(--d));
  white-space: nowrap;
  overflow: hidden;
}
#computer .cu-note b { font-size: calc(12 * var(--d)); font-weight: 650; color: rgba(255, 255, 255, 0.9); overflow: hidden; text-overflow: ellipsis; }
#computer .cu-note span { font-size: calc(10.5 * var(--d)); color: rgba(255, 255, 255, 0.45); overflow: hidden; text-overflow: ellipsis; }
#computer .cu-note em { font-style: normal; font-weight: 600; color: rgba(255, 255, 255, 0.7); margin-right: calc(4 * var(--d)); }
#computer .cu-note.is-sel { background: rgba(255, 255, 255, 0.1); }
#computer .cu-note-new {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transition: max-height 0.3s var(--ease-out), padding 0.3s var(--ease-out), opacity 0.25s;
}
#computer .cu-note-new.is-shown {
  max-height: calc(44 * var(--d));
  padding-top: calc(7 * var(--d));
  padding-bottom: calc(7 * var(--d));
  opacity: 1;
}
#computer .cu-editor { flex: 1; min-width: 0; padding: calc(9 * var(--d)) calc(18 * var(--d)); overflow: hidden; }
#computer .cu-date { text-align: center; font-size: calc(10 * var(--d)); color: rgba(255, 255, 255, 0.38); }
#computer .cu-doc { margin-top: calc(10 * var(--d)); }
#computer .cu-h { min-height: calc(24 * var(--d)); font-size: calc(18 * var(--d)); font-weight: 700; letter-spacing: -0.01em; color: #fff; display: flex; align-items: center; }
#computer .cu-line {
  min-height: calc(24 * var(--d));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--d));
  font-size: calc(13.5 * var(--d));
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
#computer .cu-line i {
  flex: none;
  width: calc(14 * var(--d));
  height: calc(14 * var(--d));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(1.3 * var(--d)) rgba(255, 255, 255, 0.38);
}
#computer .cu-caret {
  display: inline-block;
  width: calc(1.6 * var(--d));
  height: 1.1em;
  margin-left: 1px;
  background: #e8b923;
  border-radius: 1px;
  animation: cu-blink 1.06s steps(1) infinite;
}
@keyframes cu-blink { 50% { opacity: 0; } }

#computer .cu-dock {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: calc(5 * var(--d));
  width: max-content;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: calc(4 * var(--d));
  padding: calc(4 * var(--d)) calc(5 * var(--d)) calc(5 * var(--d));
  border-radius: calc(15 * var(--d));
  background: rgba(34, 38, 50, 0.5);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 calc(8 * var(--d)) calc(24 * var(--d)) rgba(0, 0, 0, 0.35);
}
#computer .cu-di { position: relative; width: calc(34 * var(--d)); height: calc(34 * var(--d)); flex: none; }
#computer .cu-di img { width: 100%; height: 100%; object-fit: contain; }
#computer .cu-di::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-3.5 * var(--d));
  width: calc(3 * var(--d));
  height: calc(3 * var(--d));
  margin-left: calc(-1.5 * var(--d));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
}
#computer .cu-di.is-run::after { opacity: 1; }
#computer .cu-dsep { width: 1px; height: calc(28 * var(--d)); margin: 0 calc(2 * var(--d)) calc(3 * var(--d)); background: rgba(255, 255, 255, 0.18); flex: none; }

#computer .cu-read {
  position: absolute;
  z-index: 7;
  left: calc((var(--fx) - 3) * var(--d));
  top: calc((var(--fy) - 3) * var(--d));
  width: calc((var(--fw) + 6) * var(--d));
  height: calc((var(--fh) + 6) * var(--d));
  border-radius: calc(13 * var(--d));
  box-shadow:
    0 0 0 calc(1.5 * var(--d)) rgba(97, 233, 251, 0.85),
    0 0 0 calc(5 * var(--d)) rgba(97, 233, 251, 0.1),
    0 0 calc(34 * var(--d)) rgba(97, 233, 251, 0.22);
  background: rgba(97, 233, 251, 0.035);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}
#computer .cu-read.is-on { opacity: 1; }

#computer .cu-ptr {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  pointer-events: none;
}
#computer .cu-ptr svg {
  position: absolute;
  left: calc(-5 * var(--d));
  top: calc(-2.6 * var(--d));
  width: calc(24 * var(--d));
  height: calc(24 * var(--d));
  max-width: none;
  overflow: visible;
}
#computer .cu-tag {
  position: absolute;
  left: calc(15 * var(--d));
  top: calc(21 * var(--d));
  padding: calc(3 * var(--d)) calc(7 * var(--d)) calc(4 * var(--d));
  border-radius: calc(7 * var(--d));
  font-family: var(--font-mono);
  font-size: calc(10.5 * var(--d));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
#computer .cu-ptr-you { transform: translate(calc(var(--yx) * var(--d)), calc(var(--yy) * var(--d))); }
#computer .cu-ptr-you svg { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55)); }
#computer .cu-ptr-you .cu-tag { color: rgba(255, 255, 255, 0.86); background: rgba(24, 25, 30, 0.78); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.28); }
#computer .cu-ptr-agent { opacity: 0; will-change: transform, opacity; }
#computer .cu-ptr-agent svg { filter: drop-shadow(0 0 calc(5 * var(--d)) rgba(97, 233, 251, 0.7)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }

#computer .cu-ptr-agent .cu-tag {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--d));
  padding-left: calc(6 * var(--d));
  transition: transform 0.35s var(--ease-out);
}

#computer .cu-eyes { --u: var(--d); position: relative; display: block; width: calc(20 * var(--d)); height: calc(20 * 262 / 798 * var(--d)); }
#computer .cu-eyes svg { position: absolute; overflow: visible; max-width: none; }
#computer .cu-ptr-agent .cu-tag { color: var(--ice); background: rgba(3, 26, 36, 0.82); box-shadow: 0 0 0 0.5px rgba(97, 233, 251, 0.55), 0 0 calc(14 * var(--d)) rgba(97, 233, 251, 0.25); }
#computer .cu-trail {
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
#computer .cu-ring {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  width: calc(34 * var(--d));
  height: calc(34 * var(--d));
  margin: calc(-17 * var(--d)) 0 0 calc(-17 * var(--d));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(1.5 * var(--d)) rgba(140, 245, 255, 0.95), 0 0 calc(12 * var(--d)) rgba(97, 233, 251, 0.55);
  opacity: 0;
  pointer-events: none;
}

#computer .cu-tools {
  margin: calc(4 * var(--u)) calc(18 * var(--u));
  padding: calc(3 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u));
  border-radius: calc(9 * var(--u));
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  font-size: calc(13.5 * var(--u));
}
#computer .cu-tools svg { flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); opacity: 0.55; }
#computer .cu-tools-head,
#computer .cu-tstep {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  white-space: nowrap;
}
#computer .cu-tools-head { height: calc(28 * var(--u)); font-weight: 600; color: var(--mog-secondary); }
#computer .cu-tools-head .cu-chev { margin-left: auto; width: calc(9 * var(--u)); height: calc(9 * var(--u)); opacity: 0.4; }
#computer .cu-tstep { height: calc(22 * var(--u)); padding-left: calc(20 * var(--u)); font-weight: 500; color: var(--mog-secondary); }
#computer .cu-tstep b { font-weight: 500; color: var(--mog-text); flex: none; }

#computer .cu-tools.is-folded { padding-bottom: calc(3 * var(--u)); }
#computer .cu-tools-head b { font-weight: 600; flex: none; }
#computer .cu-tools-head .cu-count {
  margin-left: auto;
  padding-left: calc(10 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  color: var(--mog-tertiary);
  flex: none;
}
#computer .cu-tools-head .cu-count + .cu-count { margin-left: 0; padding-left: calc(8 * var(--u)); }
#computer .cu-tools-head .cu-count + .cu-chev { margin-left: 0; }
#computer .cu-tools-head code,
#computer .cu-tstep code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mog-mono);
  font-size: calc(12.5 * var(--u));
  color: rgba(255, 255, 255, 0.45);
}
#computer .cu-tstep i {
  margin-left: auto;
  padding-left: calc(10 * var(--u));
  font-style: normal;
  font-weight: 700;
  font-size: calc(12 * var(--u));
  color: var(--mog-tertiary);
  flex: none;
}
#computer .cu-tstep i.is-ok { color: rgb(48, 209, 88); }

#computer .cu-caption { margin-top: 28px; text-align: center; }
#computer .cu-fine { margin: 0; }

#computer .cu-fine a {
  display: inline-block;
  padding: 14px 6px;
  margin: -14px -6px;
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
#computer .cu-fine a:hover { color: var(--text); text-decoration-color: rgba(255, 255, 255, 0.5); }

@container (min-width: 880px) and (max-width: 1149px) {
  #computer .cu-rig {
    --px: calc(100cqw / 960);
    --cw: 560;
    --ch: 420;
    --cx: 640;
    --cu: max(0.8px, calc(0.8 * var(--px)));
  }
}

@container (max-width: 879px) {
  #computer .cu-rig {
    --d: min(calc(100cqw / 800), 0.96px);
    --cu: 0.88px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #computer .cu-mac { position: relative; }
  #computer .cu-rig::before { --px: calc(100cqw / 900); left: -10%; top: -6%; width: 120%; height: 80%; }
  #computer .cu-chat.mog {
    position: relative;
    right: auto;
    top: auto;
    width: min(100%, calc(750 * var(--u)));
    height: calc(400 * var(--u));
    margin-top: clamp(14px, 3cqw, 24px);
    transform: translateZ(40px);
  }
  #computer .cu-chat .mog-panel { width: 100%; }
}

@container (max-width: 520px) {
  #computer .cu-rig { --d: calc(100cqw / 416); }
  #computer .cu-mac { padding: calc(8 * var(--d)); border-radius: calc(18 * var(--d)); }
  #computer .cu-screen {
    --sw: 400; --sh: 368;
    --nx: 92; --ny: 30; --nw: 300; --nh: 166; --lw: 92;
    --fx: 8; --fy: 186; --fw: 200; --fh: 126;
    --yx: 22; --yy: 58;
    --a0x: 252; --a0y: 248;
    --atx: 240; --aty: 238;
    --arx: 198; --ary: 297;
  }
  #computer .cu-mx { display: none; }
  #computer .cu-menubar { gap: calc(13 * var(--d)); }
  #computer .cu-note span { display: none; }
  #computer .cu-date { display: none; }
  #computer .cu-doc { margin-top: calc(2 * var(--d)); }
  #computer .cu-file em,
  #computer .cu-status { font-size: calc(11.5 * var(--d)); }
  #computer .cu-tag { font-size: calc(12.5 * var(--d)); }

  #computer .cu-rig { --cu: clamp(0.84px, calc(100cqw / 416), 0.86px); }
  #computer .cu-chat.mog { width: 100%; height: calc(352 * var(--u)); margin-top: 12px; }
}

@media (orientation: landscape) and (max-height: 800px) {
  @container (min-width: 521px) and (max-width: 879px) {
    #computer .cu-rig,
    #computer .cu-caption {
      --d: min(calc((100svh - var(--nav-h) - 72px) / 508), calc((100cqw - 374px) / 800));
    }
    #computer .cu-rig {
      flex-direction: row;
      align-items: flex-start;
      gap: 14px;
    }
    #computer .cu-rig::before { left: -8%; top: -12%; width: 70%; height: 120%; }
    #computer .cu-chat.mog {
      --u: 0.86px;
      flex: 1;
      width: auto;
      min-width: 0;
      height: clamp(calc(508 * var(--d) + 84px), calc(100svh - var(--nav-h) - 28px), 430px);
      margin-top: 0;

      margin-right: 1cqw;
    }

    #computer .cu-caption {
      position: absolute;
      left: 0;
      top: calc(508 * var(--d) + 14px);
      width: calc(800 * var(--d));
      margin-top: 0;
    }
  }
}

#computer .cu-chat[data-tier="phone"] .mog-tools { gap: calc(10 * var(--u)); }
#computer .cu-chat[data-tier="phone"] .mog-tool,
#computer .cu-chat[data-tier="phone"] .mog-round { flex: none; }
#computer .cu-chat[data-tier="phone"] .mog-spacer + .mog-tool { display: none; }

@media (prefers-reduced-motion: reduce) {

  #computer .cu-rig *,
  #computer .cu-rig *::before,
  #computer .cu-rig *::after { transition: none !important; }
  #computer .cu-caret { animation: none; }
}

/* css/sections/always.css */
#always { --glow-y: 64%; }

@media (min-width: 720px) { #always .al-lede-a { display: block; } }

#always .al-stage {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  container-type: inline-size;
}

#always .al-view {

  --kh: calc((100svh - 272px) / 648);
  --k0: min(calc(100cqw / 1180), var(--kh));
  --u: min(max(0.88px, min(var(--k0), 1px)), calc(100cqw / 770));
  --k: max(0.56px, min(var(--kh), max(var(--k0), calc(var(--u) / 1.15))));
  --yc: calc(380 * var(--k));
  --du: calc(var(--u) - var(--k));
  --yb: calc(var(--yc) + 237 * var(--u) + 30 * var(--k));
  position: relative;
  width: calc(1180 * var(--k));
  max-width: 100%;
  margin: 0 auto;
  height: var(--yb);
  border-radius: 20px;
}
@media (min-width: 1024px) {
  #always .al-view { --u: min(max(0.9px, min(var(--k0), 1px)), calc(100cqw / 770)); }
}

#always .al-view::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(1500 * var(--k));
  height: calc(900 * var(--k));
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(40, 120, 255, 0.2), rgba(0, 70, 255, 0.07) 50%, transparent 78%);
  pointer-events: none;
  z-index: -1;
}
#always .al-view::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-40 * var(--k));
  width: calc(980 * var(--k));
  height: calc(120 * var(--k));
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(97, 233, 251, 0.12), rgba(0, 117, 255, 0.05) 55%, transparent);
  pointer-events: none;
  z-index: -1;
}

#always .al-world {
  position: absolute;
  inset: 0;
  perspective: calc(1500 * var(--k));

  perspective-origin: 50% calc(256 * var(--k));
}

#always .al-win {
  position: absolute;
  overflow: hidden;
  border-radius: calc(12 * var(--k));
  background: #0f1217;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 calc(40 * var(--k)) calc(90 * var(--k)) rgba(0, 0, 0, 0.6),
    0 calc(10 * var(--k)) calc(30 * var(--k)) rgba(0, 0, 0, 0.35);
  font-family: var(--font-text);
  color: rgba(214, 222, 234, 0.6);
  -webkit-user-select: none;
  user-select: none;
}

#always .al-win::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 9, 13, 0) 55%, rgba(7, 9, 13, 0.35));
}

#always .al-win::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: #07090d;
  opacity: 0;
  transition: opacity 0.45s var(--ease-in-out);
}
#always.al-dip .al-win::before { opacity: 1; }
#always .al-bar {
  height: calc(34 * var(--k));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--k));
  padding: 0 calc(13 * var(--k));
  background: #13161c;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
#always .al-lights { display: flex; gap: calc(7 * var(--k)); flex: none; }
#always .al-lights i {
  width: calc(11 * var(--k));
  height: calc(11 * var(--k));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
}

#always .al-editor .al-lights i:nth-child(1) { background: rgba(255, 95, 87, 0.62); }
#always .al-editor .al-lights i:nth-child(2) { background: rgba(254, 188, 46, 0.55); }
#always .al-editor .al-lights i:nth-child(3) { background: rgba(40, 200, 64, 0.5); }
#always .al-title {
  flex: 1;
  margin-right: calc(50 * var(--k));
  text-align: center;
  font-size: calc(12 * var(--k));
  font-weight: 600;
  color: rgba(214, 222, 234, 0.42);
  white-space: nowrap;
}
#always .al-sp { flex: 1; }

#always .al-editor {
  left: calc(50% - 290 * var(--k));
  top: calc(26 * var(--k));

  width: max(calc(850 * var(--k)), calc(330 * var(--k) + 375 * var(--u)));
  height: calc(var(--yb) - 26 * var(--k));
  z-index: 2;
  transform: translateZ(calc(-40 * var(--k))) rotateY(-6deg);
  transform-origin: calc(187 * var(--k)) 50%;
}
#always .al-tabs {
  height: calc(30 * var(--k));
  display: flex;
  background: #0c0e12;
  font-size: calc(11.5 * var(--k));
}
#always .al-tabs span {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--k));
  padding: 0 calc(14 * var(--k));
  color: rgba(214, 222, 234, 0.36);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.4);
}
#always .al-tabs .is-on { background: #0f1217; color: rgba(214, 222, 234, 0.74); box-shadow: inset 0 1.5px 0 rgba(77, 141, 255, 0.7), inset -1px 0 0 rgba(0, 0, 0, 0.4); }

#always .al-git { display: none; font-weight: 600; font-size: calc(10.5 * var(--k)); color: rgba(226, 192, 110, 0.85); }
#always .al-editor.is-changed .al-tabs .is-on { color: rgba(226, 192, 110, 0.85); }
#always .al-editor.is-changed .al-git { display: inline; }

#always .al-code {
  position: absolute;
  top: calc(64 * var(--k));
  left: 0;
  right: 0;
  height: calc(356 * var(--k));
  padding-top: calc(8 * var(--k));
  font-family: var(--font-mono);
  font-size: calc(13 * var(--k));
  line-height: calc(21 * var(--k));
  color: rgba(201, 209, 222, 0.6);
  white-space: pre;
  overflow: hidden;
}
#always .al-ln { position: relative; display: flex; }
#always .al-no {
  flex: none;
  width: calc(50 * var(--k));
  padding-right: calc(18 * var(--k));
  text-align: right;
  color: rgba(214, 222, 234, 0.22);
}
#always .al-tx { position: relative; flex: 1; }

#always .al-ln::before {
  content: "";
  position: absolute;
  inset: 0 0 0 calc(50 * var(--k));
  background: rgba(63, 185, 80, 0.14);
  opacity: 0;
  transition: opacity 1.6s ease;
}
#always .al-ln::after {
  content: "";
  position: absolute;
  left: calc(46 * var(--k));
  top: calc(2 * var(--k));
  bottom: calc(2 * var(--k));
  width: calc(2.5 * var(--k));
  border-radius: 1px;
  background: #3fb950;
  opacity: 0;
}
#always .al-ln.is-mod::before { opacity: 0.6; }
#always .al-ln.is-mod::after { opacity: 0.9; }
#always .al-ln.is-fresh::before { opacity: 1; transition-duration: 0.12s; }
#always .al-ln.is-mod .al-no { color: rgba(214, 222, 234, 0.6); }
#always .al-ln.is-mod .al-tx { color: rgba(225, 232, 242, 0.9); }
#always .t-kw { color: rgba(199, 146, 234, 0.74); }
#always .t-fn { color: rgba(130, 170, 255, 0.74); }
#always .t-st { color: rgba(195, 232, 141, 0.68); }
#always .t-pr { color: rgba(137, 221, 255, 0.56); }
#always .t-tag { color: rgba(240, 113, 120, 0.7); }
#always .al-ln.is-mod .t-kw { color: rgba(214, 160, 245, 1); }
#always .al-ln.is-mod .t-fn { color: rgba(150, 186, 255, 1); }
#always .al-ln.is-mod .t-st { color: rgba(205, 240, 155, 0.95); }
#always .al-ln.is-mod .t-pr { color: rgba(150, 228, 255, 0.9); }

#always .al-term {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(420 * var(--k));
  bottom: calc(22 * var(--k));
  background: #0c0e12;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
#always .al-term-tabs {
  height: calc(28 * var(--k));
  display: flex;
  align-items: center;
  gap: calc(20 * var(--k));
  padding: 0 calc(16 * var(--k));
  font-size: calc(10 * var(--k));
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(214, 222, 234, 0.3);
}
#always .al-term-tabs .is-on { color: rgba(214, 222, 234, 0.72); text-decoration: underline; text-decoration-color: rgba(214, 222, 234, 0.5); text-underline-offset: calc(6 * var(--k)); }
#always .al-term-tabs span:last-child { text-transform: none; letter-spacing: 0; font-weight: 500; font-family: var(--font-mono); }
#always .al-term-out {
  padding: calc(2 * var(--k)) calc(16 * var(--k));
  font-family: var(--font-mono);
  font-size: calc(11.5 * var(--k));
  line-height: calc(18 * var(--k));
  color: rgba(201, 209, 222, 0.6);
  white-space: pre;
}
#always .al-term-out > div { min-height: calc(18 * var(--k)); }
#always .vb {
  padding: 0 0.6ch;
  border-radius: calc(2 * var(--k));
  font-weight: 700;
  color: #0c0e12;
}
#always .vb.is-fail { background: rgba(241, 86, 86, 0.82); }
#always .vb.is-pass { background: rgba(78, 201, 110, 0.85); }
#always .vb.is-rerun { background: rgba(86, 156, 255, 0.85); }
#always .vr { color: rgba(245, 110, 110, 0.9); }
#always .vg { color: rgba(110, 215, 135, 0.92); }
#always .vy { color: rgba(230, 200, 100, 0.85); }
#always .vd { color: rgba(201, 209, 222, 0.34); }

#always .al-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(22 * var(--k));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--k));
  padding: 0 calc(12 * var(--k));
  background: #0c0e12;
  font-size: calc(10.5 * var(--k));
  color: rgba(214, 222, 234, 0.34);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4);
}

#always .al-browser {

  left: calc(50% - 570 * var(--k) - 415 * var(--du));
  top: calc(84 * var(--k) - 262 * var(--du));
  width: calc(440 * var(--k));
  height: calc(420 * var(--k));
  z-index: 1;
  transform: translateZ(calc(-150 * var(--k))) rotateY(16deg);
  transform-origin: 30% 50%;
}
#always .al-browser .al-bar { gap: calc(18 * var(--k)); }
#always .al-url {
  flex: 1;
  height: calc(22 * var(--k));
  margin-right: calc(30 * var(--k));
  border-radius: calc(7 * var(--k));
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--k));
  font-size: calc(11.5 * var(--k));
  color: rgba(214, 222, 234, 0.5);
}
#always .al-url svg { width: calc(8 * var(--k)); height: calc(10 * var(--k)); opacity: 0.6; }
#always .al-page {
  position: absolute;
  top: calc(34 * var(--k));
  left: 0;
  right: 0;
  bottom: 0;
  background: #0d1014;
  padding: 0 calc(28 * var(--k));
}
#always .al-shop {
  height: calc(50 * var(--k));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--k));
  font-size: calc(13 * var(--k));
  font-weight: 650;
  color: rgba(225, 232, 242, 0.62);
  letter-spacing: -0.01em;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
#always .al-shop i {
  width: calc(13 * var(--k));
  height: calc(13 * var(--k));
  border-radius: 50% 50% 50% 0;
  background: rgba(120, 190, 150, 0.5);
}
#always .al-shop em { font-style: normal; font-weight: 500; font-size: calc(11.5 * var(--k)); color: rgba(214, 222, 234, 0.4); }
#always .al-checkout {
  width: calc(218 * var(--k));
  margin: calc(26 * var(--k)) 0 0 calc(4 * var(--k));
  font-size: calc(12 * var(--k));
}
#always .al-checkout h4 {
  margin: 0 0 calc(14 * var(--k));
  font-family: var(--font-display);
  font-size: calc(24 * var(--k));
  font-weight: 700;
  letter-spacing: -0.025em;
  color: rgba(232, 238, 246, 0.7);
}
#always .al-item {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--k));
  padding: calc(9 * var(--k)) 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.045);
}
#always .al-thumb {
  width: calc(34 * var(--k));
  height: calc(34 * var(--k));
  border-radius: calc(8 * var(--k));
  background: rgba(196, 176, 146, 0.28);
}
#always .al-thumb.b { background: rgba(128, 168, 140, 0.28); }
#always .al-item span { flex: 1; display: grid; color: rgba(225, 232, 242, 0.62); }
#always .al-item small { font-size: calc(10.5 * var(--k)); color: rgba(214, 222, 234, 0.34); }
#always .al-item em, #always .al-total em { font-style: normal; color: rgba(225, 232, 242, 0.55); font-variant-numeric: tabular-nums; }
#always .al-total {
  display: flex;
  justify-content: space-between;
  padding: calc(12 * var(--k)) 0 calc(14 * var(--k));
  font-weight: 650;
  color: rgba(225, 232, 242, 0.66);
}
#always .al-total em { color: rgba(232, 238, 246, 0.76); }
#always .al-card {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--k));
  height: calc(34 * var(--k));
  padding: 0 calc(11 * var(--k));
  border-radius: calc(8 * var(--k));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: rgba(214, 222, 234, 0.5);
}
#always .al-card i { width: calc(18 * var(--k)); height: calc(12 * var(--k)); border-radius: calc(3 * var(--k)); background: rgba(130, 160, 220, 0.35); }
#always .al-pay {
  margin-top: calc(12 * var(--k));
  height: calc(36 * var(--k));
  border-radius: calc(9 * var(--k));
  display: grid;
  place-items: center;
  background: rgba(110, 175, 135, 0.42);
  color: rgba(240, 248, 242, 0.85);
  font-weight: 650;
}

#always .al-slot {
  position: absolute;
  left: calc(50% - 375 * var(--u));
  top: calc(var(--yc) - 237 * var(--u));
  width: calc(750 * var(--u));
  max-width: 100%;
  height: calc(474 * var(--u));
  z-index: 5;
}
#always .al-panel.mog { --u: inherit; height: 100%; }
#always .al-panel .mog-panel {
  width: 100%;
  height: 100%;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
    0 calc(40 * var(--u)) calc(110 * var(--u)) rgba(0, 0, 0, 0.7),
    0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.45),
    0 calc(30 * var(--u)) calc(120 * var(--u)) rgba(0, 90, 255, 0.16);
}
#always .al-view.is-hidden .al-panel { display: none; }

#always .al-panel .mog-transcript > * { flex-shrink: 0; }
#always .al-panel .al-pass { color: #3fb950; font-weight: 700; margin-right: 2px; }

#always .al-ghost {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-in-out);
}
#always .al-view.is-hidden.is-seen .al-ghost { display: block; }
#always .al-ghost i {
  position: absolute;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border: 0 solid rgba(97, 233, 251, 0.42);
}
#always .al-ghost i:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; border-top-left-radius: calc(16 * var(--u)); }
#always .al-ghost i:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; border-top-right-radius: calc(16 * var(--u)); }
#always .al-ghost i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: calc(16 * var(--u)); }
#always .al-ghost i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: calc(16 * var(--u)); }

#always.al-dip .al-ghost { opacity: 0; }

#always .al-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 18px;
  margin-top: clamp(22px, 2.6vw, 30px);
}
#always .al-toggle {
  min-height: 44px;
  padding: 0 10px;
  margin: 0 -10px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: text-decoration-color 0.2s;
}
#always .al-toggle:hover { text-decoration-color: rgba(255, 255, 255, 0.55); }

#always .al-caption {
  text-align: center;
  font-size: 15px;
  color: var(--text-2);
}
#always .al-caption:empty,
#always .al-caption:has(> span:empty) { display: none; }
#always .al-caption span { display: inline-block; }
#always .al-caption span.is-new { animation: al-caption 0.45s var(--ease-out); }
@keyframes al-caption { from { opacity: 0; transform: translateY(4px); } }

@container (max-width: 640px) {
  #always .al-view {
    --u: 0.88px;
    width: 100%;
    height: 584px;
    border-radius: 14px;
  }
  #always .al-view::before { width: 150%; height: 120%; top: 40%; }
  #always .al-view::after { width: 110%; height: 90px; bottom: -30px; }
  #always .al-world { perspective: none; }
  #always .al-browser { display: none; }

  #always .al-editor {
    --k: 0.86px;
    left: 14px;
    right: 14px;
    top: 28px;
    bottom: 18px;
    width: auto;
    height: auto;
    transform: none;
  }
  #always .al-tabs span:not(.is-on) { display: none; }
  #always .al-term-tabs span:nth-child(-n+2) { display: none; }
  #always .al-slot { left: 0; top: auto; bottom: 8px; width: 100%; }
  #always .al-ghost i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-color: rgba(97, 233, 251, 0.34); }
  #always .al-panel .mog-tools > :nth-child(n+3):nth-child(-n+5),
  #always .al-panel .mog-footer .mog-sep,
  #always .al-panel .mog-footer .mog-sep ~ * { display: none; }
  #always .al-panel .mog-draft { white-space: nowrap; overflow: hidden; }
  #always .al-caption, #always .al-toggle { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #always .al-caption span.is-new { animation: none; }
  #always .al-ln::before, #always .al-ln::after { transition: none; }
}

/* css/sections/everything.css */
#everything { --glow-y: 46%; }

#everything .ev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  grid-template-rows: repeat(3, 300px) repeat(2, 330px);
  gap: 16px;
}
#everything .ev-cell { display: flex; min-width: 0; }

#everything .ev-strip-cell,
#everything .ev-strip { display: contents; }
#everything .ev-dots { display: none; }
#everything .ev-ext { grid-column: 1 / 3; grid-row: 1 / 3; }
#everything .ev-dict { grid-column: 3; grid-row: 1; }
#everything .ev-clip { grid-column: 3; grid-row: 2; }
#everything .ev-calc { grid-column: 1; grid-row: 3; }
#everything .ev-snip { grid-column: 2; grid-row: 3; }
#everything .ev-win { grid-column: 3; grid-row: 3; }
#everything .ev-ai { grid-column: 1; grid-row: 4; }
#everything .ev-yours { grid-column: 2 / 4; grid-row: 4 / 6; }
#everything .ev-sync { grid-column: 1; grid-row: 5; }

#everything .ev-card {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--raised);
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 40px 80px -48px rgba(0, 0, 0, 0.8);
}

#everything .ev-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  z-index: 4;
  padding: 1px;
  background: rgba(140, 236, 255, 0.26);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) {
  #everything .ev-card:hover::after { opacity: 1; }
}

#everything .ev-text { position: relative; z-index: 2; padding: 26px 28px 0; }
#everything .ev-text .h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.016em; font-weight: 650; }
#everything .ev-text p {
  margin-top: 6px;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.42;
  letter-spacing: -0.004em;
  color: var(--text-2);
  text-wrap: pretty;
}

#everything .ev-vis {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  margin-top: 18px;
}

#everything .ev-instant,
#everything .ev-instant * { transition: none !important; }

#everything .mog-query.is-empty { display: block; position: relative; padding-left: calc(2 * var(--u)); text-overflow: ellipsis; }
#everything .mog-query.is-empty .mog-caret { position: absolute; left: 0; top: 50%; margin: calc(-10.5 * var(--u)) 0 0; }

#everything .ev-ext .ev-vis,
#everything .ev-yours .ev-vis { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 26px 26px; }
#everything .ev-stage { --s: 0.9; position: relative; }
#everything .ev-stage .mog-panel { width: 100%; }
#everything .ev-ext .ev-stage { flex: 1; min-height: 0; }
#everything .ev-ext .mog-panel { height: 100%; }

#everything .ev-ext .ev-screen { padding: 30px 22px 22px; }
#everything .ev-ext .ev-bgwin { top: 26%; width: 60%; height: 64%; }
#everything .ev-stage .mog-panel[hidden] { display: none; }
#everything .ev-toast { display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--mog-text); min-width: 0; }
#everything .ev-toast svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: none; }

#everything .ev-ext .mog-body { -webkit-mask: linear-gradient(#000 calc(100% - 26 * var(--u)), transparent); mask: linear-gradient(#000 calc(100% - 26 * var(--u)), transparent); }

#everything .ev-endq { justify-content: flex-end; }
#everything .ev-qfill { flex: 1 1 0; min-width: 0; }

#everything .ev-tile { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-right: calc(3 * var(--u)); border-radius: calc(5 * var(--u)); display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, var(--t1), var(--t2)); }
#everything .ev-tile svg { width: calc(13.5 * var(--u)); height: calc(13.5 * var(--u)); }
#everything .ev-ftile { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: 0; border-radius: calc(4.2 * var(--u)); }
#everything .ev-ftile svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
#everything .ev-t-purple { --t1: rgb(181, 122, 244); --t2: rgb(165, 93, 242); }
#everything .ev-t-indigo { --t1: rgb(132, 131, 244); --t2: rgb(103, 103, 242); }
#everything .ev-t-orange { --t1: rgb(249, 165, 97); --t2: rgb(247, 145, 55); }
#everything .ev-t-green { --t1: rgb(109, 205, 146); --t2: rgb(71, 195, 122); }
#everything .ev-t-blue { --t1: rgb(102, 156, 247); --t2: rgb(64, 135, 245); }
#everything .ev-t-gray { --t1: rgb(156, 158, 165); --t2: rgb(135, 137, 145); }
#everything .ev-t-hn { --t1: rgb(255, 112, 26); --t2: rgb(255, 102, 0); border-radius: calc(3 * var(--u)); }
#everything .ev-t-amber { --t1: rgb(252, 196, 92); --t2: rgb(236, 160, 40); }
#everything .ev-t-docker { --t1: rgb(52, 160, 240); --t2: rgb(29, 136, 226); }
#everything .ev-t-yellow { --t1: rgb(248, 204, 97); --t2: rgb(245, 193, 50); }
#everything .ev-plain { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-right: calc(3 * var(--u)); display: grid; place-items: center; color: var(--mog-text); }
#everything .ev-plain svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
#everything .mog-tag.is-pink { background: rgba(255, 55, 95, 0.2); color: rgb(255, 120, 150); }
#everything .ev-pr { display: grid; place-items: center; color: rgb(63, 185, 80); }
#everything .ev-pr svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

#everything .ev-form { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(24 * var(--u)); }
#everything .ev-field { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
#everything .ev-label { font-size: calc(12 * var(--u)); font-weight: 600; color: var(--mog-secondary); }
#everything .ev-input {
  height: calc(24 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(7 * var(--u));
  border-radius: calc(6 * var(--u));
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  font-size: calc(13.5 * var(--u));
  color: var(--mog-strong);
  white-space: pre;
  overflow: hidden;
}
#everything .ev-input.is-ph { color: var(--mog-placeholder); }
#everything .ev-input.is-ph .mog-caret { order: -1; margin: 0 1px 0 0; }
#everything .ev-input .mog-caret { height: calc(16 * var(--u)); width: calc(1.5 * var(--u)); }
#everything .ev-input.is-focus { box-shadow: inset 0 0 0 1px rgba(64, 156, 255, 0.95), 0 0 0 calc(3 * var(--u)) rgba(64, 156, 255, 0.32); }
#everything .ev-popup {
  height: calc(24 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(8 * var(--u)) 0 calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
  font-size: calc(13.5 * var(--u));
  color: var(--mog-strong);
}
#everything .ev-popup svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); opacity: 0.7; }
#everything .ev-overlay { position: absolute; inset: 0; pointer-events: none; }
#everything .ev-actions {
  position: absolute;
  right: calc(10 * var(--u));
  bottom: calc(46 * var(--u));
  width: calc(360 * var(--u));
  max-width: calc(100% - 20 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgb(41, 41, 43);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 calc(14 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#everything .ev-actions-list { padding: calc(6 * var(--u)) 0; }

#everything .ev-worked { display: flex; align-items: center; justify-content: space-between; padding: calc(2 * var(--u)) calc(22 * var(--u)) calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--mog-tertiary); }
#everything .ev-copy { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); color: var(--mog-secondary); }
#everything .ev-copy svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
#everything .ev-actions-field { height: calc(40 * var(--u)); display: flex; align-items: center; padding: 0 calc(14 * var(--u)); border-top: 1px solid var(--mog-separator); font-size: calc(13.5 * var(--u)); color: var(--mog-tertiary); }

#everything .ev-dict .ev-vis { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 26px 26px; }
#everything .ev-wave { position: absolute; left: 26px; right: 26px; top: 0; bottom: 82px; width: calc(100% - 52px); height: calc(100% - 108px); }
#everything .ev-bar { --s: 0.86; }
#everything .ev-barpanel { height: calc(58 * var(--u)); width: 100%; }
#everything .ev-barpanel .mog-search { border-bottom: 0; height: 100%; }
#everything .ev-barpanel .mog-query { font-size: calc(17 * var(--u)); }
#everything .ev-dmic { position: relative; flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); display: grid; place-items: center; color: var(--mog-secondary); }
#everything .ev-dmic svg { position: relative; z-index: 1; width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
#everything .ev-dmic::before,
#everything .ev-dmic::after { content: ""; position: absolute; border-radius: 50%; opacity: 0; transition: opacity 0.18s; }
#everything .ev-dmic::before { inset: 0; background: rgba(255, 69, 58, 0.26); transform: scale(var(--lv, 0.86)); }
#everything .ev-dmic::after { inset: calc(2 * var(--u)); background: rgb(255, 69, 58); }
#everything .ev-dmic.is-on { color: #fff; }
#everything .ev-dmic.is-on::before,
#everything .ev-dmic.is-on::after { opacity: 1; }
#everything .ev-dmic.is-on svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
#everything .ev-guess { color: var(--mog-secondary); }

#everything .ev-clip .ev-vis { padding: 0 22px; }
#everything .ev-mini {
  --s: 0.8;
  position: absolute;
  left: 22px;
  right: 22px;
  top: 4px;
  bottom: -24px;
  border-radius: calc(14 * var(--u));
  background: var(--mog-bg);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16), inset 0 0.5px 0 rgba(255, 255, 255, 0.1), 0 24px 50px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#everything .ev-mini-bar {
  flex: none;
  height: calc(44 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(16 * var(--u));
  border-bottom: 1px solid var(--mog-separator);
  font-size: calc(15 * var(--u));
  color: var(--mog-strong);
  white-space: pre;
}
#everything .ev-mini-bar .is-ph { color: var(--mog-placeholder); }
#everything .ev-q { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
#everything .ev-mini-bar .mog-caret { height: calc(17 * var(--u)); }
#everything .ev-clips { position: relative; flex: 1; min-height: 0; overflow: hidden; padding-top: calc(5 * var(--u)); }
#everything .ev-clips .mog-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#everything .ev-clips-track { will-change: transform; }
#everything .ev-clips-track.is-sliding { transition: transform 0.55s var(--ease-out); }
#everything .ev-clips .mog-row { height: calc(38 * var(--u)); }
#everything .ev-clips .mog-row.is-new { animation: ev-rise 0.55s var(--ease-out) both; }
#everything .ev-clips .mog-accessory { font-variant-numeric: tabular-nums; }
#everything .ev-glyph-ic {
  flex: none;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin-right: calc(3 * var(--u));
  border-radius: calc(5 * var(--u));
  display: grid;
  place-items: center;
  color: var(--mog-secondary);
  background: rgba(255, 255, 255, 0.07);
}
#everything .ev-glyph-ic svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
#everything .ev-swatch { background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

#everything .ev-thumb {
  background:
    radial-gradient(18% 13% at 34% 58%, #b8ffff, #61e9fb 55%, transparent 62%),
    radial-gradient(18% 13% at 66% 58%, #b8ffff, #61e9fb 55%, transparent 62%),
    #0c121b;
}
@keyframes ev-rise { from { opacity: 0; transform: translateY(calc(-10 * var(--u))); } to { opacity: 1; transform: none; } }

#everything .ev-clip .ev-vis,
#everything .ev-snip .ev-vis {
  -webkit-mask: linear-gradient(180deg, #000 72%, transparent 100%);
  mask: linear-gradient(180deg, #000 72%, transparent 100%);
}

#everything .ev-doc {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 4px;
  bottom: -30px;
  border-radius: 12px;
  background: #1e1f23;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16), inset 0 0.5px 0 rgba(255, 255, 255, 0.1), 0 24px 50px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
#everything .ev-doc-head {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
#everything .ev-doc-head i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); }
#everything .ev-doc-head span { margin-left: auto; margin-right: auto; padding-right: 33px; }
#everything .ev-doc-field {
  height: 27px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
}
#everything .ev-doc-field span { color: rgba(255, 255, 255, 0.4); }
#everything .ev-doc-body {
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.86);
  white-space: pre-wrap;
}
#everything .ev-doc-key {
  color: var(--cyan);
  background: rgba(97, 233, 251, 0.1);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(97, 233, 251, 0.1);
}
#everything .ev-doc-key:empty { display: none; }
#everything .ev-doc-out { transition: background-color 1.4s var(--ease-out); border-radius: 3px; }
#everything .ev-doc-out.is-fresh { background-color: rgba(97, 233, 251, 0.16); transition: none; }
#everything .ev-doc-caret {
  display: inline-block;
  width: 1.5px;
  height: 16px;
  margin-left: 1px;
  vertical-align: -3px;
  background: #fff;
  animation: mog-blink 1.06s steps(1) infinite;
  animation-play-state: paused;
}

#everything .ev-card.is-live .ev-doc-caret { animation-play-state: running; }

#everything .ev-win .ev-vis { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 12px; }
#everything .ev-desk {
  --gap: 4px;
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  contain: strict;
  background: #0b1120;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#everything .ev-desk::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 9px;
  background: rgba(255, 255, 255, 0.06);
}
#everything .ev-w {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 6px;
  background: #1f2126;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 8px 22px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: left 0.5s var(--ease-out), top 0.5s var(--ease-out), width 0.5s var(--ease-out), height 0.5s var(--ease-out);
}
#everything .ev-w i { position: absolute; left: 7px; top: 6px; width: 18px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #ff5f57 0 4px, transparent 4px 7px, #febc2e 7px 11px, transparent 11px 14px, #28c840 14px); }
#everything .ev-w b { display: block; height: 4px; margin: 0 9px 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
#everything .ev-w-a { padding-left: 26%; }
#everything .ev-w-a s { position: absolute; left: 0; top: 0; bottom: 0; width: 26%; background: rgba(255, 255, 255, 0.035); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); }
#everything .ev-w-a s::before { content: ""; position: absolute; left: 7px; right: 7px; top: 20px; height: 4px; border-radius: 2px; background: rgba(97, 233, 251, 0.45); box-shadow: 0 9px 0 rgba(255, 255, 255, 0.1), 0 18px 0 rgba(255, 255, 255, 0.1), 0 27px 0 rgba(255, 255, 255, 0.1); }
#everything .ev-w b:first-of-type { margin-top: 19px; width: 46%; background: rgba(255, 255, 255, 0.2); }
#everything .ev-w b:nth-of-type(2) { width: 70%; }
#everything .ev-w b:nth-of-type(3) { width: 58%; }
#everything .ev-w-b { background: #24262c; }
#everything .ev-w-b::after { content: ""; position: absolute; left: 9px; right: 9px; top: 38px; bottom: 9px; border-radius: 3px; background: rgba(97, 233, 251, 0.13); }
#everything .ev-w.is-front { z-index: 2; }
#everything .ev-cmd { --s: 0.82; flex: none; }
#everything .ev-cmd .mog-row { height: calc(38 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--mog-selection); }
#everything .ev-cmd .mog-row::before { display: none; }
#everything .ev-cmd .mog-title { font-size: calc(14 * var(--u)); }

#everything .ev-calc .ev-vis { padding: 0 22px 22px; display: flex; flex-direction: column; justify-content: flex-end; }
#everything .ev-calc-ui {
  --s: 0.8;
  position: relative;
  border-radius: calc(16 * var(--u));
  background: var(--mog-bg);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16), inset 0 0.5px 0 rgba(255, 255, 255, 0.1), 0 24px 50px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
#everything .ev-calc-ui .mog-search { height: calc(58 * var(--u)); }
#everything .ev-calc-ui .mog-query { font-size: calc(19 * var(--u)); }
#everything .ev-calc-card {
  position: relative;
  height: calc(80 * var(--u));
  margin: calc(9 * var(--u)) calc(7 * var(--u)) calc(9 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--mog-selection);
  display: grid;
  grid-template-columns: 1fr calc(30 * var(--u)) 1fr;
  align-items: center;
  text-align: center;
}
#everything .ev-calc-body { height: calc(98 * var(--u)); }
#everything .ev-calc-rows { padding-top: calc(6 * var(--u)); }
#everything .ev-calc-col { min-width: 0; padding: 0 calc(4 * var(--u)); }
#everything .ev-calc-big { font-size: calc(26 * var(--u)); font-weight: 500; color: var(--mog-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#everything .ev-calc-cap { margin-top: calc(4 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--mog-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#everything .ev-calc-arrow { font-size: calc(18 * var(--u)); color: var(--mog-tertiary); margin-bottom: calc(14 * var(--u)); }
#everything .ev-calc-list { padding-bottom: calc(6 * var(--u)); }

#everything .ev-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
#everything .ev-seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  font-size: 13px;
  font-weight: 550;
}
#everything .ev-seg span { position: relative; z-index: 1; padding: 5px 14px; text-align: center; color: var(--text-2); transition: color 0.3s; }
#everything .ev-seg span.is-on { color: var(--text); }
#everything .ev-seg i {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.42s var(--ease-out);
}
#everything .ev-seg.is-second i { transform: translateX(100%); }
#everything .ev-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding-top: 40px;
  border-radius: 14px;
  overflow: hidden;

  background: #0a0f1a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
#everything .ev-menubar {
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.05);
}
#everything .ev-menubar b { width: 14px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
#everything .ev-menubar b:last-child { width: 30px; }
#everything .ev-menubar img { width: 13px; height: 13px; opacity: 0.85; }

#everything .ev-yours .ev-screen { container-type: inline-size; }
#everything .ev-bgwin {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 66%;
  transform: translateX(-50%);
  height: 74%;
  border-radius: 10px;
  background: #191c22;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 30px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  opacity: 0.82;
}
@container (min-width: 815px) {

  #everything .ev-yours .ev-bgwin { left: calc(50% - 337.5px - 50px); top: 46%; transform: none; }
}
#everything .ev-bgwin i { position: absolute; left: 12px; top: 11px; width: 34px; height: 8px; background: radial-gradient(circle at 4px 4px, #ff5f57 3.4px, transparent 4px), radial-gradient(circle at 17px 4px, #febc2e 3.4px, transparent 4px), radial-gradient(circle at 30px 4px, #28c840 3.4px, transparent 4px); }
#everything .ev-bgwin s { position: absolute; left: 0; top: 0; bottom: 0; width: 24%; background: rgba(255, 255, 255, 0.03); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); }
#everything .ev-bgwin s::before { content: ""; position: absolute; left: 12px; right: 14px; top: 40px; height: 7px; border-radius: 4px; background: rgba(97, 233, 251, 0.35); box-shadow: 0 18px 0 rgba(255, 255, 255, 0.08), 0 36px 0 rgba(255, 255, 255, 0.08), 0 54px 0 rgba(255, 255, 255, 0.08), 0 72px 0 rgba(255, 255, 255, 0.08); }
#everything .ev-bgwin b { display: block; height: 7px; margin: 0 0 12px calc(24% + 22px); border-radius: 4px; background: rgba(255, 255, 255, 0.09); }
#everything .ev-bgwin b:first-of-type { margin-top: 42px; width: 30%; background: rgba(255, 255, 255, 0.2); }
#everything .ev-bgwin b:nth-of-type(2) { width: 52%; }
#everything .ev-bgwin b:nth-of-type(3) { width: 44%; }
#everything .ev-bgwin u { position: absolute; left: calc(24% + 22px); right: 22px; top: 112px; bottom: 22px; border-radius: 6px; background: #18202e; }
#everything .ev-yours .ev-stage { position: relative; z-index: 1; flex: none; width: calc(750 * var(--u)); max-width: calc(100% - 40px); height: calc(474 * var(--u)); }
#everything .ev-frame {
  height: calc(474 * var(--u));
  border-radius: calc(16 * var(--u));
  overflow: hidden;
  contain: layout paint;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.55),
    0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
  transition: height 0.6s var(--ease-in-out);
}
#everything .ev-frame.is-simple { height: calc(58 * var(--u)); }
#everything .ev-frame .mog-panel { height: calc(474 * var(--u)); box-shadow: none; border-radius: 0; }
#everything .ev-frame .mog-search { transition: border-color 0.45s; }
#everything .ev-frame.is-simple .mog-search { border-bottom-color: transparent; }
#everything .ev-quick { display: flex; align-items: center; gap: calc(13 * var(--u)); color: var(--mog-secondary); opacity: 0; transition: opacity 0.25s; }
#everything .ev-quick svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
#everything .ev-frame.is-simple .ev-quick { opacity: 1; transition-delay: 0.25s; }

#everything .ev-yours .mog.is-light {
  --mog-bg: rgb(246, 246, 248);
  --mog-text: rgba(0, 0, 0, 0.85);
  --mog-strong: rgba(0, 0, 0, 0.88);
  --mog-secondary: rgba(0, 0, 0, 0.5);
  --mog-tertiary: rgba(0, 0, 0, 0.3);
  --mog-placeholder: rgba(0, 0, 0, 0.36);
  --mog-separator: rgba(0, 0, 0, 0.08);
  --mog-selection: rgba(0, 0, 0, 0.075);
  --mog-keycap: rgba(0, 0, 0, 0.07);
  --mog-tag: rgba(0, 0, 0, 0.06);
}
#everything .ev-yours .mog.is-light .ev-frame { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5), 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.6); }
#everything .ev-yours .mog.is-light .mog-key { color: rgba(0, 0, 0, 0.62); }
#everything .ev-yours .mog.is-light .mog-caret { background: #000; }
#everything .ev-yours .mog.is-light .mog-title b { color: #000; }

#everything .ev-ai .ev-vis { padding: 0 22px 16px; }

#everything .ev-qa { --s: 0.8; position: relative; height: 100%; }
#everything .ev-qa .mog-panel { width: 100%; height: 100%; }

#everything .ev-qa > .mog-panel:first-child .mog-body { -webkit-mask: linear-gradient(#000 calc(100% - 26 * var(--u)), transparent); mask: linear-gradient(#000 calc(100% - 26 * var(--u)), transparent); }
#everything .ev-qa .mog-msg-user { padding-left: calc(30 * var(--u)); }

#everything .ev-qa .mog-back { transition: background-color 0.2s, box-shadow 0.2s, color 0.2s; }
#everything .ev-qa .mog-back.is-lit { background: rgba(97, 233, 251, 0.34); box-shadow: 0 0 calc(16 * var(--u)) rgba(97, 233, 251, 0.45); color: #fff; }
#everything .ev-qa .mog-msg-text b { color: #fff; font-weight: 600; }
#everything .ev-qa .mog-draft { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }

#everything .ev-qa .mog-draft.is-empty { display: block; position: relative; padding-left: calc(1.6 * var(--u) + 1px); line-height: calc(22 * var(--u)); text-overflow: ellipsis; }
#everything .ev-qa .mog-draft.is-empty .mog-caret { position: absolute; left: 0; top: 50%; margin: calc(-9.5 * var(--u)) 0 0; }

#everything .ev-qa .mog-tools .mog-spacer ~ .mog-tool,
#everything .ev-qa .mog-tools .mog-round:nth-last-child(2) { display: none; }
#everything .ev-qa .mog-footer .mog-sep,
#everything .ev-qa .mog-footer .mog-label,
#everything .ev-qa .mog-footer .mog-label + .mog-keys,
#everything .ev-qa .mog-footer .mog-glyph { display: none; }

#everything .ev-sync .ev-vis { padding: 0 22px 18px; display: flex; align-items: center; justify-content: center; }
#everything .ev-sync-art { width: 100%; height: 100%; }
#everything .ev-sync-art svg { width: 100%; height: 100%; overflow: visible; }
#everything .ev-sync .ev-path { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.2; stroke-dasharray: 2 4; }
#everything .ev-sync .ev-path-lit { fill: none; stroke: #61e9fb; stroke-width: 1.6; stroke-linecap: round; }
#everything .ev-sync .ev-dot { fill: #b8ffff; filter: drop-shadow(0 0 4px rgba(97, 233, 251, 0.95)); opacity: 0; }
#everything .ev-sync .ev-folder { transition: transform 0.4s var(--ease-spring); transform-box: fill-box; transform-origin: 50% 70%; }
#everything .ev-sync .ev-folder.is-bump { transform: scale(1.07); }
#everything .ev-sync .ev-tgl rect { transition: fill 0.3s; }
#everything .ev-sync .ev-tgl circle { transition: transform 0.3s var(--ease-out); }
#everything .ev-sync .ev-tgl.is-on rect { fill: rgb(48, 140, 255); }
#everything .ev-sync .ev-tgl.is-on circle { transform: translateX(8px); }
#everything .ev-sync text { font-family: var(--font-text); }
#everything .ev-sync .ev-tap { fill: none; stroke: rgba(184, 255, 255, 0.85); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
#everything .ev-sync .ev-tap.is-on { animation: ev-tap 0.7s var(--ease-out); }
@keyframes ev-tap { from { opacity: 0.9; transform: scale(0.35); } to { opacity: 0; transform: scale(1.45); } }

#everything .ev-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.1em;
  max-width: 980px;
  margin: 40px auto 0;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.005em;
  color: var(--text-2);
}
#everything .ev-more span { position: relative; white-space: nowrap; }
#everything .ev-more span:nth-child(n+3)::before { content: "·"; position: absolute; right: 100%; width: 1.1em; text-align: center; color: var(--text-4); }
#everything .ev-more span.is-bol::before { visibility: hidden; }
#everything .ev-more-lead { color: var(--text); font-weight: 600; }

@media (max-width: 1100px) {
  #everything .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; grid-auto-flow: row dense; }
  #everything .ev-cell { grid-column: auto !important; grid-row: auto !important; }
  #everything .ev-ext, #everything .ev-dict, #everything .ev-yours { grid-column: 1 / -1 !important; }
  #everything .ev-cell .ev-card { min-height: 300px; }
  #everything .ev-ext .ev-card, #everything .ev-yours .ev-card { min-height: 0; }
  #everything .ev-ext .ev-vis, #everything .ev-yours .ev-vis { flex: none; }

  #everything .ev-ext .ev-stage { flex: none; height: calc(474 * var(--u)); }
  #everything .ev-ext .ev-screen { flex: none; }
  #everything .ev-yours .ev-screen { flex: none; padding-bottom: 32px; }
  #everything .ev-stage { --s: 0.9; max-width: calc(750 * var(--u)); width: 100%; margin: 0 auto; }
  #everything .ev-yours .ev-controls { justify-content: center; }
  #everything .ev-dict .ev-card { min-height: 280px; }
}
@media (max-width: 640px) {
  #everything .ev-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #everything .ev-card { border-radius: 20px; }
  #everything .ev-text { padding: 22px 22px 0; }
  #everything .ev-text .h3 { font-size: 18px; }
  #everything .ev-ext .ev-vis, #everything .ev-yours .ev-vis, #everything .ev-dict .ev-vis { padding: 0 16px 16px; }
  #everything .ev-ext .ev-screen { padding: 26px 10px 10px; }

  #everything .ev-ext .ev-stage,
  #everything .ev-yours .ev-stage { --s: 0.92; }

  #everything .ev-stage .mog-footer .mog-sep,
  #everything .ev-stage .mog-footer .mog-label,
  #everything .ev-stage .mog-footer .mog-label + .mog-keys,
  #everything .ev-stage .mog-footer .mog-glyph { display: none; }
  #everything .ev-stage .mog-tag + .mog-tag { display: none; }

  #everything .ev-stage .ev-form-screen .mog-footer .mog-primary,
  #everything .ev-stage .ev-form-screen .mog-footer .mog-primary + .mog-keys { display: none; }
  #everything .ev-stage .ev-form-screen .mog-footer .mog-primary + .mog-keys + .mog-sep + .mog-label { display: block; }
  #everything .ev-stage .ev-form-screen .mog-footer .mog-primary + .mog-keys + .mog-sep + .mog-label + .mog-keys { display: flex; }
  #everything .ev-yours .ev-stage { max-width: calc(100% - 24px); }

  #everything .ev-stage .mog-hotkey { display: none; }

  #everything .ev-stage .mog-row[data-id="ev-folder"] .mog-subtitle { display: none; }
  #everything .ev-stage .mog-row[data-id="ev-folder"] .mog-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #everything .ev-quick svg:nth-child(-n+2) { display: none; }
  #everything .ev-bar { --s: 0.8; }
  #everything .ev-wave { left: 16px; right: 16px; width: calc(100% - 32px); bottom: 72px; height: calc(100% - 92px); }
  #everything .ev-cell .ev-card { min-height: 290px; }
  #everything .ev-dict .ev-card { min-height: 250px; }
  #everything .ev-mini { --s: 0.86; }
  #everything .ev-calc-ui { --s: 0.84; }
  #everything .ev-calc .ev-card { min-height: 270px; }
  #everything .ev-ai .ev-card { min-height: 380px; }
  #everything .ev-qa { --s: 0.92; }
  #everything .ev-more { font-size: 13.5px; margin-top: 32px; }

  #everything .ev-strip-cell { display: block; min-width: 0; margin: 0 calc(-1 * var(--gutter)); }
  #everything .ev-strip {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0 var(--gutter);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  #everything .ev-strip::-webkit-scrollbar { display: none; }
  #everything .ev-strip > .ev-cell { flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always; opacity: 1; transform: none; transition: none; }
  #everything .ev-strip .ev-card { min-height: 0; height: 340px; }

  #everything .ev-calc .ev-vis { padding: 0 16px 16px; }
  #everything .ev-calc-big { font-size: calc(21.5 * var(--u)); }
  #everything .ev-calc-col { padding: 0 calc(2 * var(--u)); }
  #everything .ev-ai .ev-vis { padding: 0 14px 14px; }
  #everything .ev-qa .mog-tools .mog-tool:first-child { display: none; }

  #everything .ev-strip:focus-visible { outline: none; border-radius: 0; }
  #everything .ev-strip:focus-visible > .is-current .ev-card { outline: 2px solid var(--electric); outline-offset: -2px; }

  #everything .ev-dots { display: flex; justify-content: center; margin-top: 0; }
  #everything .ev-dots .ev-dot { width: 32px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  #everything .ev-dots .ev-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: background-color 0.3s; }
  #everything .ev-dots .ev-dot:hover::before { background: rgba(255, 255, 255, 0.45); }
  #everything .ev-dots .ev-dot.is-on::before { background: rgba(255, 255, 255, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  #everything .ev-w,
  #everything .ev-seg i,
  #everything .ev-frame,
  #everything .ev-clips-track.is-sliding { transition: none; }
  #everything .ev-clips .mog-row.is-new { animation: none; }
  #everything .ev-doc-caret { animation: none; opacity: 0; }
}

/* css/sections/finale.css */
#download {

  --cat: clamp(232px, min(27vw, 36svh), 412px);
  --pt: clamp(56px, min(9vw, 10.5svh), 128px);

  padding: var(--pt) 0 clamp(40px, 4.5vw, 64px);
  overflow: clip;
  text-align: center;
}

#download .finale-pool {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(180deg, var(--night) 0, rgba(7, 9, 13, 0) 170px),
    linear-gradient(0deg, var(--night) 0, rgba(7, 9, 13, 0) 220px),
    radial-gradient(calc(var(--cat) * 0.95) calc(var(--cat) * 0.8) at 50% calc(var(--pt) + var(--cat) * 0.2),
      rgba(30, 140, 255, 0.34), rgba(0, 100, 255, 0.11) 42%, rgba(0, 60, 255, 0) 100%),
    radial-gradient(min(1180px, 110vw) calc(var(--cat) * 2.1) at 50% calc(var(--pt) + var(--cat) * 0.62),
      rgba(0, 117, 255, 0.15), rgba(0, 70, 255, 0.05) 52%, rgba(0, 60, 255, 0) 100%);
}

#download .finale-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#download .finale-cat {
  order: -1;
  position: relative;
  width: calc(var(--cat) * 1.26195);
  height: calc(var(--cat) * 1.22371);
  margin-top: calc(var(--cat) * -0.3);
  flex: none;
}
#download .finale-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#download .finale-pet {
  position: absolute;
  left: 10.38%;
  top: 35.94%;
  width: 79.24%;
  height: 61.64%;
  border-radius: 34% 34% 42% 42% / 30% 30% 50% 50%;
  cursor: default;
  touch-action: pan-y pinch-zoom;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#download .finale-pet.is-over,
#download .finale-pet.is-petting { cursor: grab; }
#download .finale-pet:focus-visible { outline: 2px solid var(--electric); outline-offset: 10px; }

#download.has-cat .finale-pet:focus-visible { outline: none; }

#download .finale-word {
  margin-top: clamp(14px, 2.6svh, 28px);
  line-height: 0;
}

#download .finale-wordmark {
  display: block;
  width: clamp(250px, calc(var(--cat) * 1.12), 440px);
  height: auto;
  aspect-ratio: 819 / 225;
  overflow: visible;
  color: #f5f8fc;
}
#download .wm-word {
  fill: none;
  stroke: currentColor;
  stroke-width: 24;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#download .wm-dot {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.8s var(--ease-spring) 0.75s, opacity 0.5s ease 0.75s;
}
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) #download.has-cat:not(.is-awake) .wm-dot { transform: scale(0.5); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  #download .wm-dot { transition: none; }
}
.motion-off #download .wm-dot { transition: none; }

#download .finale-tagline {
  margin-top: clamp(10px, 1.6svh, 16px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, calc(var(--cat) * 0.085), 32px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--text);
}
#download .finale-tagline .accent { filter: drop-shadow(0 0 18px rgba(97, 233, 251, 0.22)); }

#download .finale-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(30px, 5svh, 52px);
}

#download .finale-download img { width: 19px; height: 19px; margin: -3px -2px 0 -3px; filter: invert(1); opacity: 0.9; }

#download .finale-cta .fine {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  #download { --cat: clamp(212px, 62vw, 252px); --pt: 72px; }
}

#download .finale-account { margin-top: 18px; font-size: 13px; color: var(--electric); }