/* AI in my process (06.11.2026): three stories — tokens written into Figma, a video that became code, the website in English.
   Each has a visual on the left and "Claude / Me" on the right. Block heads reuse .ds-h from system.css. */

.ai-b { margin-top: 104px; }
.txt + .ai-b { margin-top: 80px; }
.ai-row { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 28px 52px; margin-top: 30px; }
.ai-row > .ds-card { margin-top: 0; }

/* who did what */
.ai-who { display: grid; gap: 24px; padding-top: 6px; }
.ai-who dt { font: 500 14px/1 var(--pop); color: var(--g-ink); }
.ai-who > div + div dt { color: var(--ink); }
.ai-who ul { display: grid; gap: 9px; margin-top: 10px; }
.ai-who li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ai-who li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--g); }
.ai-who > div + div li::before { background: var(--ink); }
@media (max-width: 1000px) {
  .ai-row { grid-template-columns: minmax(0, 1fr); }
  .ai-who { grid-template-columns: 1fr 1fr; gap: 24px 32px; }
}
@media (max-width: 560px) { .ai-who { grid-template-columns: 1fr; } }

/* 01 the plan and what it wrote into Figma */
.ai-plan { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 20px; padding: 20px; }
.ai-lbl { margin-bottom: 10px; font-size: 12.5px; color: var(--muted); }
.ai-code pre { margin: 0; padding: 18px; border-radius: 16px; background: #F4F6F6; font: 12.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink-2); white-space: pre-wrap; }
.ai-code b { font-weight: 600; color: var(--ink); }
.ai-code i { font-style: normal; color: var(--g-ink); }
.ai-img { display: block; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.ai-img img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .ai-plan { grid-template-columns: minmax(0, 1fr); padding: 14px; } }

/* 02 the product flow, live */
.ai-flow { padding: 14px; }
.ai-flow-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; }
.ai-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--g-ink); }
.ai-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 4px rgb(0 166 154 / .16); transition: background-color .3s, box-shadow .3s; }
.ai-flow.paused .ai-live { color: var(--muted); }
.ai-flow.paused .ai-live i { background: #B9C0C4; box-shadow: 0 0 0 4px rgb(17 17 17 / .06); }
.ai-ctl { display: flex; gap: 6px; }
.ai-ctl button { height: 34px; padding: 0 14px; border-radius: 10px; background: #F2F3F3; font-size: 13.5px; font-weight: 500; transition: background-color .2s; }
.ai-ctl button:hover { background: #E7E9E9; }
.ai-ctl button:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.ai-stage { overflow: hidden; border-radius: 14px; background: #E9F8F7; }
.ai-host { width: 100%; aspect-ratio: 1440 / 853; }

/* 03 the mirror: a page skeleton that turns from right-to-left to left-to-right */
.sk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; padding: 18px; border-radius: 16px; background: #F4F8F8; }
:where(.sk i, .sk b, .sk s, .sk span) { display: block; }   /* zero specificity, so the parts below set their own display */
.sk-bar { display: flex; align-items: center; gap: 16px; min-width: 0; overflow: hidden; height: 42px; padding: 0 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sk-logo { width: 72px; height: 14px; border-radius: 4px; background: var(--g); }
.sk-nav { display: flex; gap: 10px; }
.sk-nav i { width: 38px; height: 7px; border-radius: 4px; background: #D3D9DB; }
.sk-btn { width: 76px; height: 22px; margin-inline-start: auto; border-radius: 999px; background: var(--g-ink); }
.sk-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; min-height: 170px; padding: 8px 6px; }
.sk-text { display: grid; justify-items: start; gap: 9px; }
.sk-t1 { width: 92%; height: 16px; border-radius: 5px; background: var(--ink); }
.sk-t2 { width: 66%; height: 16px; border-radius: 5px; background: var(--ink); }
.sk-t3 { width: 56%; height: 8px; margin-top: 4px; border-radius: 4px; background: #B4BCC0; }
.sk-cta { display: flex !important; gap: 8px; margin-top: 8px; }
.sk-cta i { width: 82px; height: 26px; border-radius: 999px; background: var(--g-ink); }
.sk-cta i + i { background: #DFF2F1; }
.sk-art { display: grid !important; place-items: center; }
.sk-hex { width: min(140px, 80%); aspect-ratio: 1 / 1.1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #E9F8F7, #A9E4DE); }
.sk-cards { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sk-cards i { display: grid; justify-items: start; gap: 8px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sk-cards b { width: 26px; height: 26px; border-radius: 8px; background: var(--g); }
.sk-cards s { width: 72%; height: 8px; border-radius: 4px; background: #D3D9DB; }
.sk-note { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 520px) {
  .sk { padding: 12px; gap: 12px; }
  .sk-bar { gap: 10px; padding: 0 10px; }
  .sk-logo { width: 44px; }
  .sk-nav { gap: 6px; }
  .sk-nav i { width: 16px; }
  .sk-btn { width: 40px; }
  .sk-hero { min-height: 130px; }
  .sk-cta i { width: 52px; height: 20px; }
  .sk-cards i { padding: 10px; }
}

/* the seven English pages */
.ai-pages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.ai-pg { display: block; overflow: hidden; aspect-ratio: 480 / 760; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 14px 26px -18px rgb(17 17 17 / .3); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ai-pg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ai-pages li:hover .ai-pg { transform: translateY(-4px); }
.ai-pages b { display: block; margin-top: 8px; font-size: 13px; font-weight: 500; text-align: center; }
@media (max-width: 900px) {
  .ai-pages { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 132px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .ai-pages li { scroll-snap-align: start; }
}

/* still frames (?still) */
.ds-still #ai *, .ds-still #ai *::before, .ds-still #ai *::after { transition: none !important; animation: none !important; }