/* craft: "Every frame drawn. Every byte counted." One big live moment (the pixel, drawn by the hybrid engine) beside
   its readout (this page, measured on the visitor's device). Every rule is scoped to this part. */
[data-part="craft"] { --hair: rgba(42, 30, 23, .14); --hair-2: rgba(42, 30, 23, .28); overflow-x: clip; }

/* Heading */
[data-part="craft"] .cr-head { display: grid; gap: 16px; margin-bottom: clamp(48px, 6vw, 88px); }
[data-part="craft"] .cr-head .h2 { max-width: 12em; }
[data-part="craft"] .cr-head .lede { color: var(--ink-2); }
@media (min-width: 900px) {
  [data-part="craft"] .cr-head { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; column-gap: clamp(28px, 3.4vw, 56px); }
  [data-part="craft"] .cr-head .lede { padding-bottom: .5em; }
}

/* The two proofs: the stage, and its readout beside it */
[data-part="craft"] .proofs { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 7vw, 88px); }
@media (min-width: 900px) {
  [data-part="craft"] .proofs { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(28px, 3.4vw, 56px); align-items: stretch; }
}
[data-part="craft"] .pf { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding-top: 18px; border-top: 1px solid var(--hair-2); }
[data-part="craft"] .pf-h { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px; align-items: baseline; }
[data-part="craft"] .pf-n { font-size: 13px; color: var(--ink-2); }
[data-part="craft"] .pf-h .h3, [data-part="craft"] .pf-c { grid-column: 2; }
[data-part="craft"] .pf-c { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 34em; }
html[lang="en"] [data-part="craft"] .pf-c { line-height: 1.45; }
[data-part="craft"] .pf-hint { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* 01 · the stage */
[data-part="craft"] .stage { position: relative; }
[data-part="craft"] .stage canvas { display: block; width: 100%; height: 100%; }
[data-part="craft"] .st-draw { aspect-ratio: 4 / 5; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); background: rgba(207, 180, 138, .16); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
[data-part="craft"] .st-draw.grab { cursor: grabbing; }
@media (min-width: 600px) { [data-part="craft"] .st-draw { aspect-ratio: 16 / 10; } }
[data-part="craft"] .chips { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; font-size: 12px; }
[data-part="craft"] .chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px 5px; border-radius: 999px; background: rgba(42, 30, 23, .07); color: var(--ink-2); }
[data-part="craft"] .chip b { font-weight: 500; color: var(--ink); }
[data-part="craft"] .chip .ar { font-family: var(--f-ar); }
/* without the script: the pixel at rest, crisp */
[data-part="craft"] .still { position: absolute; left: 50%; bottom: 20%; width: 11%; aspect-ratio: 1; margin-left: -5.5%; border-radius: 18.5%; background: var(--wadi); }
[data-part="craft"].live .still { display: none; }
html:not(.js) [data-part="craft"] .chips, html:not(.js) [data-part="craft"] .pf-hint { display: none; }

/* 02 · the readout: three numbers stacked, as tall as the stage */
[data-part="craft"] .figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
[data-part="craft"] .fig { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--hair); }
[data-part="craft"] .fig:first-child { border-top: 0; padding-top: 0; }
[data-part="craft"] .fig .big { display: flex; align-items: baseline; gap: .16em; font: 500 clamp(64px, 18vw, 96px)/.9 var(--f-num); letter-spacing: -.05em; direction: ltr; }
html[lang="ar"] [data-part="craft"] .fig .big { justify-content: flex-end; }
/* Text-sized teal on Sand needs a deeper shade to read (3.4:1 against 2.3:1); the pixel keeps the brand teal. */
[data-part="craft"] .fig.t .big .num { color: #0E8479; }
[data-part="craft"] .fig .u { font: 600 clamp(18px, 2vw, 26px)/1 var(--f-ar); letter-spacing: 0; color: var(--ink-2); }
html[lang="en"] [data-part="craft"] .fig .u { font-family: var(--f-en); }
[data-part="craft"] .fig .fc { font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 24em; }
@media (min-width: 600px) and (max-width: 899px) {
  [data-part="craft"] .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  [data-part="craft"] .fig { border-top: 0; padding-top: 0; }
  [data-part="craft"] .fig .big { font-size: clamp(48px, 8vw, 72px); }
}
@media (min-width: 900px) {
  [data-part="craft"] .pf-fast .figs { flex: 1; align-content: space-between; gap: 22px; }
  [data-part="craft"] .fig .big { font-size: clamp(72px, 7vw, 120px); }
  [data-part="craft"] .pf-fast .pf-h { min-height: 0; }
}