/* Create section (#how). The words on the left; on the right the picture,
   with two floating cards stacked over its edge (his sketch, 2026-10-25):
   the prompt card high up, the build card low down, which shows the code
   while the effect is made and then turns into the effect's controls. The
   picture builds with the editor's own canvas animation
   (authoring-matrix.js); create.js runs it. Nothing changes size while it
   plays. Shape rule: 12px the floating cards, 6px fields, the picture
   square. Inter only, no caps. */

.xc {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 5vw, 96px); align-items: center;
}
.xc-copy .x-h2 { margin: 0; }
.xc-copy .x-lede { margin-top: clamp(18px, 2vw, 28px); max-width: 40ch; }

.oe {
  --bg-1: #0a0a0a; --bg-2: #0f0f0f; --bg-3: #161616; --bg-4: #1d1d1d;
  --l1: rgba(255, 255, 255, 0.05); --l2: rgba(255, 255, 255, 0.08); --l3: rgba(255, 255, 255, 0.14);
  --f0: #f5f5f5; --f1: #d4d4d4; --f2: #8a8a8a; --f3: #595959; --f4: #3a3a3a;
  --cy: #7df9ff; --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r6: 6px; --r12: 12px;
  position: relative; width: min(100%, 880px); padding-bottom: 44px;
}
.oe-pic, .oe-ask, .oe-fx { transition: opacity 320ms ease; }
.oe-pic { width: 60%; }
.oe-ask { position: absolute; z-index: 2; left: 49%; top: 31%; width: max(280px, 37%); }
.oe-fx { position: absolute; z-index: 1; left: 40%; bottom: 0; width: max(320px, 58%); }
/* between looks everything fades, swaps, and comes back */
.oe.swap .oe-pic, .oe.swap .oe-ask, .oe.swap .oe-fx { opacity: 0; }

/* ---- bits ------------------------------------------------------------- */
.oe .co-ico { width: 13px; height: 13px; display: block; flex: none; }
.oe .co-shim {
  font-weight: 500; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--f3) 20%, var(--cy) 50%, var(--f3) 80%);
  background-size: 220% 100%; animation: oe-shim 1.6s linear infinite;
}
@keyframes oe-shim { to { background-position: -220% 0; } }
@keyframes oe-blink { 50% { opacity: 0; } }
@keyframes oe-in { from { opacity: 0; transform: translateY(6px); } }
.oe .co-code { white-space: pre-wrap; word-break: break-word; font-size: 11.5px; line-height: 1.65; color: var(--f3); }
.oe .co-code .c { color: var(--f4); }
.oe .co-code .k { color: #9a8cff; }
.oe .co-code .n { color: var(--cy); }
.oe .co-code .s { color: #ffc24d; }
.oe .co-caretb { display: inline-block; width: 6px; height: 11px; vertical-align: -1px; background: var(--cy); animation: oe-blink 1s steps(1) infinite; }

/* a floating card */
.oe-ask, .oe-fx {
  border: 1px solid var(--l3); border-radius: var(--r12); background: rgba(13, 13, 13, 0.84);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

/* ---- the picture: photo, effect, refined effect, the matrix on top ----- */
.oe .co-lyr { position: relative; aspect-ratio: 760 / 1018; background: #000; }
.oe .co-lyr > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.oe .co-lyr .out, .oe .co-lyr .out2 { opacity: 0; }
.oe .co-lyr > .mx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.oe .co-lyr .ln { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.1); pointer-events: none; transition: border-color 260ms ease; }
.oe .co-lyr.on .ln { border-color: var(--cy); }
.oe .co-lyr .ln i { position: absolute; width: 7px; height: 7px; margin: -4px 0 0 -4px; background: #050505; border: 1px solid var(--cy); opacity: 0; transition: opacity 260ms ease; }
.oe .co-lyr.on .ln i { opacity: 1; }
.oe .co-nm { display: flex; align-items: center; gap: 7px; height: 18px; margin-bottom: 10px; font-size: 13px; color: var(--f2); white-space: nowrap; overflow: hidden; }
.oe .co-nm .g { display: none; }
.oe .co-nm.fx { color: var(--ac, var(--cy)); }
.oe .co-nm.fx .g { display: grid; }
.oe .co-nm .g svg { width: 12px; height: 12px; }

/* ---- the prompt card (the composer, create-chat-column.tsx) ------------ */
.oe-ask { padding: 10px 10px 8px; transition: opacity 320ms ease, border-color 140ms, box-shadow 180ms; }
.oe-ask.lit { border-color: var(--cy); box-shadow: 0 0 0 1px rgba(125, 249, 255, 0.2), 0 0 30px rgba(125, 249, 255, 0.08), 0 24px 70px rgba(0, 0, 0, 0.55); }
/* the attachment row and the text share one fixed area, like a textarea */
.oe .co-in { height: 93px; overflow: hidden; }
.oe .co-chips { display: flex; gap: 5px; margin: 0 0 8px 2px; }
.oe .co-chips:empty { display: none; }
.oe .co-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 3px; border: 1px solid var(--l2);
  border-radius: var(--r6); background: var(--bg-1); font-size: 11.5px; color: var(--f1); animation: oe-in 0.28s var(--ease);
}
.oe .co-chip img { width: 18px; height: 18px; object-fit: cover; display: block; border-radius: 4px; }
.oe .co-chip i { width: 16px; height: 16px; display: grid; place-items: center; color: var(--f3); font-style: normal; }
.oe .co-ta { position: relative; padding: 0 2px; font-size: 13.5px; line-height: 1.5; color: var(--f0); transition: color 240ms ease; }
.oe .co-ta .ph { position: absolute; left: 2px; top: 0; color: var(--f3); pointer-events: none; }
.oe .co-ta .car { display: inline-block; width: 1px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--f0); animation: oe-blink 1s steps(1) infinite; }
.oe-ask.sent .co-ta { color: var(--f2); }
.oe-ask.sent .co-ta .car { display: none; }
.oe .co-foot { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.oe .co-fb { width: 26px; height: 26px; display: grid; place-items: center; color: var(--f2); border-radius: var(--r6); }
.oe .co-send {
  width: 30px; height: 30px; margin-left: auto; display: grid; place-items: center; border: 1px solid var(--l2); border-radius: var(--r6);
  color: var(--f3); background: transparent; transition: background 160ms, border-color 160ms, color 160ms, box-shadow 160ms, transform 120ms;
}
.oe .co-send .co-ico { width: 15px; height: 15px; }
.oe .co-send.on { background: var(--cy); border-color: var(--cy); color: #031316; box-shadow: 0 0 16px rgba(125, 249, 255, 0.3); }
.oe .co-send.press { transform: scale(0.9); }
/* building: the send button is the stop button */
.oe .co-send.busy { background: var(--bg-4); border-color: var(--bg-4); }
.oe .co-send.busy svg { display: none; }
.oe .co-send.busy::after { content: ""; width: 8px; height: 8px; background: var(--f2); }

/* ---- the build card: the code while it builds, then the effect's card - */
.oe-fx { display: grid; overflow: hidden; transition: opacity 320ms ease, transform 420ms var(--ease), border-color 320ms ease; }
.oe-fx.off { opacity: 0; transform: translateY(10px); }
.oe-fx.card { border-color: color-mix(in srgb, var(--ac) 70%, transparent); }
.oe-fx > * { grid-area: 1 / 1; min-width: 0; transition: opacity 300ms ease; }
.oe-fx:not(.card) > .oe-card, .oe-fx.card > .oe-work { opacity: 0; }
.oe-work { display: flex; flex-direction: column; min-height: 230px; }
.oe-work .h { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; font-size: 12.5px; border-bottom: 1px solid var(--l1); white-space: nowrap; }
.oe-work .b { position: relative; flex: 1 1 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30px); mask-image: linear-gradient(180deg, transparent, #000 30px); }
.oe-work .b .co-code { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 12px; }
.oe-card { padding: 14px 15px 16px; }
.oe .co-head { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font-size: 14px; font-weight: 600; color: var(--ac); white-space: nowrap; }
.oe .co-head .g { display: grid; }
.oe .co-head .g svg { width: 14px; height: 14px; }
.oe .co-head .ver { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--f2); font-variant-numeric: tabular-nums; }
.oe .co-head .fam { font-size: 11.5px; font-weight: 400; color: var(--f2); border: 1px solid var(--l2); border-radius: var(--r6); padding: 2px 7px; }

/* the effect's controls, the inspector's */
.oe .co-ctl { display: grid; gap: 14px; }
.oe .co-ctl .r { display: grid; gap: 8px; min-width: 0; }
.oe .co-ctl .t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--f2); white-space: nowrap; }
.oe .co-ctl .v { color: var(--f0); font-variant-numeric: tabular-nums; transition: color 0.2s; }
.oe .co-ctl .tr { position: relative; height: 2px; background: var(--bg-4); }
.oe .co-ctl .tr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--f1); }
.oe .co-ctl .tr::after { content: ""; position: absolute; left: var(--p); top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); }
.oe .co-ctl .fld { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 9px; font-size: 12px; color: var(--f1); border: 1px solid var(--l2); border-radius: var(--r6); background: var(--bg-1); font-variant-numeric: tabular-nums; }
.oe .co-ctl .fld b { width: 14px; height: 14px; flex: none; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.14); margin-left: -3px; }
.oe .co-ctl .fld .co-ico { margin-left: auto; color: var(--f3); width: 11px; height: 11px; }
.oe .co-ctl .r.live .t, .oe .co-ctl .r.live .v { color: var(--cy); }
.oe .co-ctl .r.live .tr::before { background: var(--cy); }
.oe .co-ctl .r.live .fld { border-color: rgba(125, 249, 255, 0.5); }

/* narrower: the words above, the stack under them */
@media (max-width: 1000px) {
  .xc { grid-template-columns: minmax(0, 1fr); row-gap: clamp(32px, 6vw, 48px); }
  .xc-copy .x-lede { max-width: 46ch; }
  .oe { width: min(100%, 640px); }
}
/* phones: the cards stack under the picture, the prompt card over its foot */
@media (max-width: 640px) {
  .oe { display: flex; flex-direction: column; padding-bottom: 0; }
  .oe-pic { width: 100%; }
  .oe-ask { order: 1; position: relative; left: auto; top: auto; width: auto; margin: -56px 0 0 10%; }
  .oe-fx { order: 2; position: relative; left: auto; bottom: auto; width: auto; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .oe .co-shim, .oe .co-ta .car, .oe .co-caretb { animation: none; } }