/* THU MUA XANH · V6 direction A "Hồ sơ bằng chứng": green felt table, cream paper, brass, kraft; real photos as pinned prints.
   Palette after the two-colour food-packaging reference (#12271D felt, #BFC0AC sand) plus cream paper and brass; lime marks one thing per scene. */
html[data-dir="a"] .v6 { --felt: #12271D; --felt-hi: #1B3A2B; --sand: #BFC0AC; --paper: #F2EDE1; --paper-2: #E7E0CE; --ink6: #13271D; --brass6: #C2A050; --brass-lt: #DCC690; --rust6: #A9512C; }

/* ---------- materials ---------- */
html[data-dir="a"] .v6 .sc-bg { background: var(--felt) !important; }
html[data-dir="a"] .v6 .v6-felt { background: var(--mottle) center / cover; mix-blend-mode: soft-light; opacity: .55; }
html[data-dir="a"] .v6 .v6-felt::after { content: ''; position: absolute; inset: 0; background: radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(4, 10, 7, .55) 100%); }
html[data-dir="a"] .v6 .v6-grain { opacity: .11; }
html[data-dir="a"] .v1 .v6-spot { background: radial-gradient(30% 52% at 73% 44%, rgba(255, 236, 196, .2), rgba(255, 236, 196, .05) 55%, transparent 75%), radial-gradient(60% 40% at 20% 0%, rgba(255, 246, 226, .05), transparent 70%); }
html[data-dir="a"] .v8 .v6-spot { background: radial-gradient(70% 48% at 50% 40%, rgba(255, 236, 196, .13), transparent 72%); transition: background .9s; }
html[data-dir="a"] .v8:not([data-k="0"]) .v6-spot { background: radial-gradient(42% 40% at 26% 70%, rgba(255, 236, 196, .12), transparent 72%), radial-gradient(70% 34% at 50% 20%, rgba(255, 236, 196, .07), transparent 72%); }
/* paper scene */
html[data-dir="a"] .v12 { color: var(--ink6); }
html[data-dir="a"] .v12 .sc-bg { background: var(--paper) !important; }
html[data-dir="a"] .v12 .v6-felt { background: var(--mottle) center / cover; mix-blend-mode: multiply; opacity: .16; }
html[data-dir="a"] .v12 .v6-felt::after { background: radial-gradient(130% 100% at 50% 45%, transparent 60%, rgba(70, 58, 30, .16) 100%); }
html[data-dir="a"] .v12 .v6-grain { mix-blend-mode: multiply; opacity: .2; }
html[data-dir="a"] .v12 .v6-spot { background: radial-gradient(60% 50% at 50% 30%, rgba(255, 255, 255, .55), transparent 70%); }
html[data-dir="a"] .v12 .sc-src { color: rgba(19, 39, 29, .55); }

/* ---------- 01 · cover: the box on a plinth under one light, title in Fraunces ---------- */
html[data-dir="a"] .v1-slot { left: calc(var(--u) * 49); top: calc(var(--u) * 5.8); width: calc(var(--u) * 47); height: calc(var(--u) * 38); }
html[data-dir="a"] .v1-plinth { left: calc(var(--u) * 58); top: calc(var(--u) * 43.4); width: calc(var(--u) * 32); bottom: calc(var(--u) * -0.2); background: linear-gradient(180deg, #DDD4BF 0%, #CEC4AC 50%, #B9AE93 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset calc(var(--u) * 1.2) 0 calc(var(--u) * 2) calc(var(--u) * -1) rgba(255, 255, 255, .22), inset calc(var(--u) * -2) 0 calc(var(--u) * 3) calc(var(--u) * -1.4) rgba(40, 30, 10, .3); }
html[data-dir="a"] .v1-plinth > i { position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--u) * 8.4); background: linear-gradient(180deg, #E9E3D3 0%, #F3EEE3 70%, #F7F3EA 100%); clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%); }
html[data-dir="a"] .v1-plinth::before { content: ''; position: absolute; left: -46%; right: 30%; top: calc(var(--u) * -8.4); height: calc(var(--u) * 20); background: radial-gradient(50% 32% at 46% 30%, rgba(0, 0, 0, .5), transparent 72%); z-index: -1; filter: blur(calc(var(--u) * 0.8)); transform: skewX(-26deg); }
html[data-dir="a"] .v1-plinth > i::after { content: ''; position: absolute; left: 18%; width: 50%; top: 22%; height: 66%; background: radial-gradient(50% 50% at 50% 55%, rgba(48, 36, 14, .62) 0%, rgba(48, 36, 14, .3) 42%, transparent 74%); filter: blur(calc(var(--u) * 0.5)); }
html[data-dir="a"] .v1-chip { left: calc(var(--u) * 38); top: calc(var(--u) * 51.6); width: calc(var(--u) * 18.6); white-space: nowrap; text-align: right; border: 0; border-radius: 0; padding: 0; font: 500 var(--fs-cap)/1.3 var(--font-ui); letter-spacing: .04em; color: rgba(242, 237, 225, .5); }
html[data-dir="a"] .v1-eye { left: calc(var(--u) * 6); top: calc(var(--u) * 7.6); padding: .62em 1em .55em; font: 600 var(--fs-cap)/1 var(--font-ui); letter-spacing: .2em; color: var(--brass-lt); border: 1px solid rgba(194, 160, 80, .5); background: rgba(194, 160, 80, .07); border-radius: 2px; }
html[data-dir="a"] .v1-title { left: calc(var(--u) * 6); top: calc(var(--u) * 12.4); width: calc(var(--u) * 44); font-weight: 600; font-size: calc(var(--u) * 5.1); line-height: 1.16; letter-spacing: -.03em; color: var(--paper); text-wrap: balance; }
html[data-dir="a"] .v1-title em { display: block; margin-top: .3em; font-weight: 600; font-size: .62em; line-height: 1.2; letter-spacing: -.02em; color: var(--lime); }
html[data-dir="a"] .v1-sub { left: calc(var(--u) * 6); top: calc(var(--u) * 33.2); width: calc(var(--u) * 39); font: 400 var(--fs-block)/1.34 var(--font-ui); color: var(--sand); text-wrap: balance; }
html[data-dir="a"] .v1-foot { left: calc(var(--u) * 6); top: calc(var(--u) * 41.4); width: calc(var(--u) * 39); gap: calc(var(--u) * .35); padding-top: calc(var(--u) * 1.6); border-top: 1px solid rgba(194, 160, 80, .32); font-size: var(--fs-body); line-height: 1.35; color: rgba(242, 237, 225, .6); }
html[data-dir="a"] .v1-foot b { color: var(--paper); font-weight: 600; }
html[data-dir="a"] .v1-go { left: calc(var(--u) * 6); top: calc(var(--u) * 50.6); color: rgba(242, 237, 225, .45); }
html[data-dir="a"] body.present:not(.safe) .v1.at1 .v1-title { animation: wowGlow 2.6s cubic-bezier(.22, 1, .36, 1) 1.6s both; }

/* ---------- 08 · evidence: three pinned prints, then one giant number ---------- */
html[data-dir="a"] .v8-hd { left: calc(var(--u) * 6); top: calc(var(--u) * 4); }
html[data-dir="a"] .v8-h1 { font: 600 calc(var(--u) * 3.4)/1.2 var(--font-ui); letter-spacing: -.022em; color: var(--paper); white-space: nowrap; }
html[data-dir="a"] .v8-h1 em { font-style: normal; color: var(--brass-lt); }
html[data-dir="a"] .v8-ph { --w: 26.6; --h: 25; top: calc(var(--u) * 11); width: calc(var(--u) * var(--w)); grid-template-rows: calc(var(--u) * var(--h)) auto; padding: calc(var(--u) * .85) calc(var(--u) * .85) 0; background: var(--paper) var(--noise); background-size: 240px; background-blend-mode: multiply; color: var(--ink6);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 calc(var(--u) * .4) calc(var(--u) * .8) rgba(0, 0, 0, .22), 0 calc(var(--u) * 1.4) calc(var(--u) * 2.6) rgba(0, 0, 0, .3), 0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0, 0, 0, .25);
  transform: rotate(var(--r)); transition: left 1s var(--io6), top 1s var(--io6), width 1s var(--io6), grid-template-rows 1s var(--io6), transform 1s var(--io6), box-shadow .3s; }
html[data-dir="a"] .v8-ph:nth-child(1) { left: calc(var(--u) * 6.4); --r: -1.8deg; }
html[data-dir="a"] .v8-ph:nth-child(2) { left: calc(var(--u) * 36.7); top: calc(var(--u) * 11.7); --r: 1.1deg; }
html[data-dir="a"] .v8-ph:nth-child(3) { left: calc(var(--u) * 67); top: calc(var(--u) * 10.6); --r: -.8deg; }
html[data-dir="a"] .v8-ph:hover { box-shadow: 0 0 0 2px var(--brass6), 0 calc(var(--u) * 1.4) calc(var(--u) * 2.6) rgba(0, 0, 0, .35); }
html[data-dir="a"] .v8-im { background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
html[data-dir="a"] .v8-im img { filter: saturate(.84) contrast(1.05) sepia(.08) brightness(.98); }
html[data-dir="a"] .v8-ph[data-v="ev-g3-paid"] img { object-position: 50% 6%; }
html[data-dir="a"] .v8-ph[data-v="ev-spx"] img { object-position: 50% 30%; }
html[data-dir="a"] .v8-ph[data-v="ev-unbox-0118"] img { object-position: 50% 48%; }
html[data-dir="a"] .v8-pin { position: absolute; z-index: 4; left: 50%; top: calc(var(--u) * -.75); width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); margin-left: calc(var(--u) * -.75); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6E2A6 0%, #C9A24E 42%, #7D5E1C 100%); box-shadow: 0 calc(var(--u) * .35) calc(var(--u) * .5) rgba(0, 0, 0, .45); }
html[data-dir="a"] .v8-badge { left: calc(var(--u) * .6); top: calc(var(--u) * .6); z-index: 2; padding: .32em .6em .28em; font: 700 var(--fs-cap)/1 var(--font-ui); letter-spacing: .12em; color: var(--paper); background: rgba(19, 39, 29, .84); border-radius: 2px; }
html[data-dir="a"] .v8-stamp { right: 5%; bottom: 7%; padding: .16em .5em .1em; font: 900 calc(var(--u) * 2.5)/1 var(--font-ui); letter-spacing: .08em; color: #B3322A; border: calc(var(--u) * .24) solid #B3322A; border-radius: calc(var(--u) * .35); background: rgba(250, 244, 230, .82); box-shadow: inset 0 0 0 calc(var(--u) * .14) rgba(250, 244, 230, .82), inset 0 0 0 calc(var(--u) * .27) #B3322A; transform: rotate(-9deg); transform-origin: 100% 100%; transition: scale 1s var(--io6); -webkit-mask-image: var(--noise); mask-image: var(--noise); -webkit-mask-size: 180px; mask-size: 180px; }
html[data-dir="a"] .v8-ph:nth-child(2) .v8-stamp { transform: rotate(-5deg); }
html[data-dir="a"] .v8-ph:nth-child(3) .v8-stamp { transform: rotate(-12deg); }
html[data-dir="a"] .v8-cap { gap: calc(var(--u) * .1); padding: calc(var(--u) * .8) calc(var(--u) * .25) calc(var(--u) * 1); }
html[data-dir="a"] .v8-step { font: 700 var(--fs-cap)/1.3 var(--font-ui); letter-spacing: .14em; color: #8A6A1E; }
html[data-dir="a"] .v8-cap b { font: 700 calc(var(--u) * 2)/1.18 var(--font-ui); letter-spacing: -.015em; color: var(--ink6); }
html[data-dir="a"] .v8-cap span { font-size: var(--fs-body); line-height: 1.3; color: #3D4B42; }
html[data-dir="a"] .v8-cap em { font-size: var(--fs-cap); line-height: 1.3; color: #6C786F; }
/* beat 1+: prints rise into a row, the number takes the floor */
html[data-dir="a"] .v8.at1 .v8-ph { --w: 23.4; --h: 12.6; top: calc(var(--u) * 10.4); transform: rotate(calc(var(--r) * .45)); }
html[data-dir="a"] .v8.at1 .v8-ph:nth-child(1) { left: calc(var(--u) * 6.2); }
html[data-dir="a"] .v8.at1 .v8-ph:nth-child(2) { left: calc(var(--u) * 38.3); top: calc(var(--u) * 10.8); }
html[data-dir="a"] .v8.at1 .v8-ph:nth-child(3) { left: calc(var(--u) * 70.4); top: calc(var(--u) * 10.2); }
html[data-dir="a"] .v8.at1 .v8-cap { padding: calc(var(--u) * .55) calc(var(--u) * .2) calc(var(--u) * .7); grid-template-columns: auto 1fr; align-items: baseline; column-gap: calc(var(--u) * .8); }
html[data-dir="a"] .v8.at1 .v8-cap b { font-size: calc(var(--u) * 1.75); }
html[data-dir="a"] .v8.at1 .v8-stamp { scale: .62; }
html[data-dir="a"] .v8-hero { left: calc(var(--u) * 6); top: calc(var(--u) * 29.2); width: calc(var(--u) * 46); row-gap: calc(var(--u) * .2); }
html[data-dir="a"] .v8-hl { font: 700 var(--fs-cap)/1.3 var(--font-ui); letter-spacing: .16em; color: var(--brass-lt); }
html[data-dir="a"] .v8-hn { column-gap: .12em; margin-top: calc(var(--u) * 1.1); }
html[data-dir="a"] .v8-hn b { font: 600 calc(var(--u) * 10.2)/.98 var(--font-ui); letter-spacing: -.055em; color: var(--lime); text-shadow: 0 0 calc(var(--u) * 4) rgba(207, 224, 108, .14); }
html[data-dir="a"] .v8-hn small { font: 600 calc(var(--u) * 3.2)/1 var(--font-ui); color: var(--lime); }
html[data-dir="a"] .v8-ho { margin-top: calc(var(--u) * 1.5); }
html[data-dir="a"] .v8-ho b { font: 600 var(--fs-block)/1.2 var(--font-ui); color: var(--paper); }
html[data-dir="a"] .v8-ho span { font-size: var(--fs-body); color: var(--sand); }
html[data-dir="a"] .v8-money { left: calc(var(--u) * 52); top: calc(var(--u) * 31); width: calc(var(--u) * 42); }
html[data-dir="a"] .v8-lbl { font: 700 var(--fs-cap)/1.3 var(--font-ui); letter-spacing: .14em; color: var(--brass-lt); }
html[data-dir="a"] .v8-refb { font: 600 var(--fs-cap)/1 var(--font-ui); color: var(--brass-lt); padding: .4em .8em; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(194, 160, 80, .5); background: none; border: 0; }
html[data-dir="a"] .v8-refb[aria-pressed="true"] { background: var(--brass6); color: var(--ink6); }
html[data-dir="a"] .v8-wf { height: calc(var(--u) * 8.8); margin-top: calc(var(--u) * 2.4); border-bottom: 1px solid rgba(242, 237, 225, .28); }
html[data-dir="a"] .v8-b i { border-radius: 1px; }
html[data-dir="a"] .v8-b.is-tot i { background: var(--paper-2); }
html[data-dir="a"] .v8-b.is-neg i { background: #C26A49; }
html[data-dir="a"] .v8-b.is-pos i { background: var(--brass6); }
html[data-dir="a"] .v8-b.is-paid i { background: var(--lime); box-shadow: 0 0 calc(var(--u) * 1.6) rgba(207, 224, 108, .3); }
html[data-dir="a"] .v8-b b { font: 600 var(--fs-cap)/1 var(--font-ui); color: var(--paper); }
html[data-dir="a"] .v8-b.is-neg b { color: #E9A98C; } html[data-dir="a"] .v8-b.is-pos b { color: var(--brass-lt); } html[data-dir="a"] .v8-b.is-paid b { color: var(--lime); }
html[data-dir="a"] .v8-b span { font-size: var(--fs-cap); line-height: 1.2; color: var(--sand); }
html[data-dir="a"] .v8-tip { font-size: var(--fs-cap); color: var(--ink6); background: var(--paper); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
html[data-dir="a"] .v8-ref { border-top: 1px dashed rgba(194, 160, 80, .55); }
html[data-dir="a"] .v8-ref span { right: calc(100% + var(--u) * .5); font: 600 var(--fs-cap)/1 var(--font-ui); color: var(--brass-lt); }
html[data-dir="a"] .v8.is-ref .v8-ref { border-top: 2px solid var(--brass6); }
html[data-dir="a"] .v8-lim { left: calc(var(--u) * 6); top: calc(var(--u) * 47.8); width: calc(var(--u) * 88); font-size: var(--fs-body); line-height: 1.35; color: rgba(242, 237, 225, .7); }
html[data-dir="a"] .v8-lim b { color: #EBAA8B; font-weight: 600; }
html[data-dir="a"] .v8 .sc-src { color: rgba(242, 237, 225, .45); }

/* ---------- 12 · face-off on paper: two ratios, a balance between the pairs at the start ---------- */
html[data-dir="a"] .v12-hd { left: calc(var(--u) * 6); top: calc(var(--u) * 4); }
html[data-dir="a"] .v12-h1 { font: 600 calc(var(--u) * 3.4)/1.2 var(--font-ui); letter-spacing: -.022em; color: var(--ink6); white-space: nowrap; }
html[data-dir="a"] .v12-h1 em { color: #66703A; }
html[data-dir="a"] .v12-sw { right: calc(var(--u) * 6); top: calc(var(--u) * 4.6); }
html[data-dir="a"] .v12-sw .cx-opt { min-height: 0; padding: .5em 1em; font-size: var(--fs-cap); border-color: rgba(19, 39, 29, .3); color: var(--ink6); }
html[data-dir="a"] .v12-sw .cx-opt[aria-pressed="true"] { background: var(--ink6); border-color: var(--ink6); color: var(--paper); }
html[data-dir="a"] .v12-seam { left: 50%; top: calc(var(--u) * 16); width: 1px; height: calc(var(--u) * 25); background: linear-gradient(180deg, transparent, rgba(19, 39, 29, .28) 12%, rgba(19, 39, 29, .28) 88%, transparent); box-shadow: 1px 0 0 rgba(255, 255, 255, .6); opacity: 0; transition: opacity .6s var(--ez6) .4s, top 1s var(--io6); }
html[data-dir="a"] .v12-prop { left: calc(var(--u) * 43.6); top: calc(var(--u) * 22.8); width: calc(var(--u) * 14); height: auto; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.2) rgba(60, 45, 15, .3)); transition: opacity .7s var(--ez6), translate .9s var(--ez6); }
html[data-dir="a"] .v12.is-bag .v12-prop { opacity: 0; translate: 0 calc(var(--u) * 2); }
html[data-dir="a"] .v12.is-bag .v12-seam { opacity: 1; }
html[data-dir="a"] .v12.is-bag .v12-c { top: calc(var(--u) * 16); }
html[data-dir="a"] .v12.is-end .v12-c { top: calc(var(--u) * 11.4); }
html[data-dir="a"] .v12.is-end .v12-seam { top: calc(var(--u) * 11.4); }
html[data-dir="a"] .v12-c { top: calc(var(--u) * 17); width: calc(var(--u) * 40); height: calc(var(--u) * 26); transition: top 1s var(--io6); }
html[data-dir="a"] .v12-c.qa { left: calc(var(--u) * 6); }
html[data-dir="a"] .v12-c.hb { left: calc(var(--u) * 54); }
html[data-dir="a"] .v12-c > * { transition: top 1s var(--io6), left 1s var(--io6), width 1s var(--io6), height 1s var(--io6); }
html[data-dir="a"] .v12-t { left: 0; top: 0; gap: .6em; font: 700 calc(var(--u) * 2.1)/1.15 var(--font-ui); letter-spacing: -.015em; color: var(--ink6); }
html[data-dir="a"] .v12-t span { font: 600 var(--fs-cap)/1 var(--font-ui); letter-spacing: .04em; color: #6B776E; }
html[data-dir="a"] .v12-im { left: 0; top: calc(var(--u) * 4.4); width: calc(var(--u) * 33); height: calc(var(--u) * 14.4); }
html[data-dir="a"] .v12-c.hb .v12-im { left: calc(var(--u) * 7); }
html[data-dir="a"] .v12-im img { filter: drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1) rgba(60, 45, 15, .28)); }
html[data-dir="a"] .v12-pool { background: radial-gradient(45% 40% at 50% 62%, rgba(255, 255, 255, .7), transparent 72%); }
html[data-dir="a"] .v12-tag { left: 0; bottom: calc(var(--u) * -.4); font: 700 var(--fs-cap)/1 var(--font-ui); letter-spacing: .12em; }
html[data-dir="a"] .v12-tag .l-p { color: #5D6A61; padding: .38em .6em; box-shadow: inset 0 0 0 1px rgba(19, 39, 29, .3); border-radius: 2px; }
html[data-dir="a"] .v12-tag .l-b { color: var(--paper); background: var(--ink6); padding: .38em .6em; border-radius: 2px; }
html[data-dir="a"] .v12-pr { left: 0; top: calc(var(--u) * 20.2); }
html[data-dir="a"] .v12-pr b { font: 700 calc(var(--u) * 2.2)/1 var(--font-ui); letter-spacing: -.01em; color: var(--ink6); }
html[data-dir="a"] .v12-pr small { font: 600 var(--fs-cap)/1 var(--font-ui); color: #6B776E; }
html[data-dir="a"] .v12-bar::before { content: ''; position: absolute; left: 0; top: calc(var(--u) * 23.4); width: calc(var(--u) * 22); height: calc(var(--u) * .42); background: rgba(19, 39, 29, .1); }
html[data-dir="a"] .v12-b0 { left: 0; top: calc(var(--u) * 23.4); width: calc(var(--u) * 22 * var(--base)); height: calc(var(--u) * .42); background: var(--ink6); }
html[data-dir="a"] .v12-b0 span { position: absolute; left: 0; top: calc(var(--u) * .9); font: 600 var(--fs-cap)/1 var(--font-ui); color: #5D6A61; white-space: nowrap; }
html[data-dir="a"] .v12-b1 { left: calc(var(--u) * 22 * var(--base)); top: calc(var(--u) * 23.4); width: calc(var(--u) * 22 * (1 - var(--base))); height: calc(var(--u) * .42); background: var(--rust6); }
html[data-dir="a"] .v12-bar em { left: 0; top: calc(var(--u) * 4.4); font: 600 calc(var(--u) * 9.6)/.98 var(--font-ui); letter-spacing: -.055em; color: var(--ink6); white-space: nowrap; transform: translateY(calc(var(--u) * 1.2)) scale(1.04); transform-origin: 0 100%; filter: blur(4px); }
html[data-dir="a"] .v12-dl { left: calc(var(--u) * 12); top: calc(var(--u) * 24.3); font: 600 var(--fs-body)/1 var(--font-ui); color: #8E3F1F; }
/* beat 1+: the ratio is the slide, the pair shrinks to the side */
html[data-dir="a"] .v12.is-bag .v12-im { left: calc(var(--u) * 26); top: calc(var(--u) * 15.4); width: calc(var(--u) * 14); height: calc(var(--u) * 8.6); }
html[data-dir="a"] .v12.is-bag .v12-c.hb .v12-im { left: calc(var(--u) * 26); }
html[data-dir="a"] .v12.is-bag .v12-pr { top: calc(var(--u) * 15.9); }
html[data-dir="a"] .v12.is-bag .v12-bar::before, html[data-dir="a"] .v12.is-bag .v12-b0, html[data-dir="a"] .v12.is-bag .v12-b1 { top: calc(var(--u) * 19.7); }
html[data-dir="a"] .v12.is-bag .v12-dl { top: calc(var(--u) * 22.9); left: 0; }
html[data-dir="a"] .v12-bar::before, html[data-dir="a"] .v12-b0, html[data-dir="a"] .v12-b1 { transition: top 1s var(--io6), transform .9s var(--ez6) .25s; }
html[data-dir="a"] .v12-il { right: calc(var(--u) * 6); top: calc(var(--u) * 49.4); font-size: var(--fs-cap); color: rgba(19, 39, 29, .55); }
html[data-dir="a"] .v12-end { left: calc(var(--u) * 6); top: calc(var(--u) * 40.2); width: calc(var(--u) * 88); justify-items: center; text-align: center; row-gap: calc(var(--u) * .5); }
html[data-dir="a"] .v12-end p { font: 600 calc(var(--u) * 2.5)/1.3 var(--font-ui); letter-spacing: -.015em; color: var(--ink6); }
html[data-dir="a"] .v12-end em { font-style: normal; background: linear-gradient(180deg, transparent 58%, rgba(207, 224, 108, .9) 58%, rgba(207, 224, 108, .9) 92%, transparent 92%); padding: 0 .1em; }
html[data-dir="a"] .v12-end span { font-size: var(--fs-body); color: #4F5D53; }

/* ---------- shared A pieces for the restyled scenes ---------- */
html[data-dir="a"] .v6 .cn-hd { left: calc(var(--u) * 6); top: calc(var(--u) * 4); }
html[data-dir="a"] .v6 .cn-h1 { font: 600 calc(var(--u) * 3.4)/1.2 var(--font-ui); letter-spacing: -.022em; color: var(--paper); }
html[data-dir="a"] .v6 .cn-h1 em { font-style: normal; color: var(--brass-lt); }
html[data-dir="a"] .v6.a-paper .cn-h1 { color: var(--ink6); }
html[data-dir="a"] .v6.a-paper .cn-h1 em { color: #66703A; }
html[data-dir="a"] .v6 .sc-src { color: rgba(242, 237, 225, .45); }
html[data-dir="a"] .v6.a-paper .sc-src { color: rgba(19, 39, 29, .55); }
html[data-dir="a"] .v6 .v6-pin { position: absolute; z-index: 4; left: 50%; top: calc(var(--u) * -.7); width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); margin-left: calc(var(--u) * -.7); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F6E2A6 0%, #C9A24E 42%, #7D5E1C 100%); box-shadow: 0 calc(var(--u) * .35) calc(var(--u) * .5) rgba(0, 0, 0, .45); pointer-events: none; }
html[data-dir="a"] .v6 { --card-shadow: 0 1px 1px rgba(0, 0, 0, .22), 0 calc(var(--u) * .4) calc(var(--u) * .8) rgba(0, 0, 0, .2), 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(0, 0, 0, .26), 0 calc(var(--u) * 2.6) calc(var(--u) * 4.6) rgba(0, 0, 0, .2); }
/* paper scenes (class a-paper): cream sheet, ink text */
html[data-dir="a"] .v6.a-paper .sc-bg { background: var(--paper) !important; }
html[data-dir="a"] .v6.a-paper .v6-felt { background: var(--mottle) center / cover; mix-blend-mode: multiply; opacity: .16; }
html[data-dir="a"] .v6.a-paper .v6-felt::after { background: radial-gradient(130% 100% at 50% 45%, transparent 60%, rgba(70, 58, 30, .16) 100%); }
html[data-dir="a"] .v6.a-paper .v6-grain { mix-blend-mode: multiply; opacity: .2; }
html[data-dir="a"] .v6.a-paper .v6-spot { background: radial-gradient(60% 50% at 50% 30%, rgba(255, 255, 255, .5), transparent 70%); }

/* ---------- 02 · six dossier cards pinned on felt, a seal tape across ---------- */
html[data-dir="a"] .a2 .v6-spot { background: radial-gradient(70% 55% at 50% 52%, rgba(255, 236, 196, .1), transparent 72%); }
html[data-dir="a"] .a2 .q2-sub { left: calc(var(--u) * 6); top: calc(var(--u) * 8.6); font-size: var(--fs-body); color: var(--sand); }
html[data-dir="a"] .a2 .q2-gal { top: calc(var(--u) * 13.6); height: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: calc(var(--u) * 14.6) calc(var(--u) * 14.6); column-gap: calc(var(--u) * 3.4); row-gap: calc(var(--u) * 5.8); }
html[data-dir="a"] .a2 .q2-gal li, html[data-dir="a"] .a2 .q2-gal li:hover, html[data-dir="a"] .a2 .q2-gal li:focus-within { flex: none; position: relative; }
html[data-dir="a"] .a2 .q2-gal li:nth-child(odd) { --r: -1deg; } html[data-dir="a"] .a2 .q2-gal li:nth-child(even) { --r: .9deg; }
html[data-dir="a"] .a2 .q2-gal li:nth-child(3) { --r: -.5deg; } html[data-dir="a"] .a2 .q2-gal li:nth-child(4) { --r: .6deg; }
html[data-dir="a"] .a2 .q2-p { overflow: visible; border-radius: 1px; background: var(--paper) var(--noise); background-size: 240px; background-blend-mode: multiply; color: var(--ink6); box-shadow: var(--card-shadow); transform: rotate(var(--r)); transition: transform .5s var(--ez6), box-shadow .3s; }
html[data-dir="a"] .a2 .q2-p:hover { transform: rotate(0deg) translateY(calc(var(--u) * -.3)); box-shadow: 0 0 0 2px var(--brass6), var(--card-shadow); }
html[data-dir="a"] .a2 .q2-p::after { display: none; }
html[data-dir="a"] .a2 .q2-v, html[data-dir="a"] .a2 .q2-p:hover .q2-v { left: calc(var(--u) * .9); top: calc(var(--u) * .9); bottom: calc(var(--u) * .9); right: auto; width: 40%; height: auto; overflow: hidden; transform: none; background: radial-gradient(70% 60% at 50% 60%, #FFFFFF, #E9E2D0); box-shadow: inset 0 0 0 1px rgba(19, 39, 29, .08); }
html[data-dir="a"] .a2 .q2-ph { position: absolute; inset: 0; border-radius: 0; box-shadow: none; filter: saturate(.86) contrast(1.04) sepia(.06); }
html[data-dir="a"] .a2 .q2-obj { width: 88%; max-height: 80%; filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * .6) rgba(60, 45, 15, .3)); }
html[data-dir="a"] .a2 .q2-trio { width: 96%; } html[data-dir="a"] .a2 .q2-trio img { filter: drop-shadow(0 calc(var(--u) * .4) calc(var(--u) * .5) rgba(60, 45, 15, .3)); }
html[data-dir="a"] .a2 .q2-bars { width: 64%; height: 66%; gap: 10%; }
html[data-dir="a"] .a2 .q2-bars i { background: rgba(19, 39, 29, .28); } html[data-dir="a"] .a2 .q2-bars i:first-child { background: var(--ink6); }
html[data-dir="a"] .a2 .q2-team { grid-template-columns: repeat(2, auto); gap: calc(var(--u) * .45); }
html[data-dir="a"] .a2 .q2-team i { width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); border-color: #8A6A1E; color: #6E5416; font-size: var(--fs-cap); }
html[data-dir="a"] .a2 .q2-t { left: calc(40% + var(--u) * 2.4); right: calc(var(--u) * 1); top: calc(var(--u) * 1.5); bottom: calc(var(--u) * 1); display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: calc(var(--u) * .3); }
html[data-dir="a"] .a2 .q2-no { font: 700 var(--fs-body)/1.1 var(--font-ui); letter-spacing: .08em; color: #8A6A1E; }
html[data-dir="a"] .a2 .q2-n { font: 700 calc(var(--u) * 2.1)/1.15 var(--font-ui); letter-spacing: -.015em; color: var(--ink6); }
html[data-dir="a"] .a2 .q2-q { font-size: var(--fs-body); line-height: 1.35; min-height: 0; color: #3D4B42; }
html[data-dir="a"] .a2 .q2-c { align-self: end; font-size: var(--fs-cap); color: #5C6B2A; }
/* the seal tape: one order runs through all six parts */
html[data-dir="a"] .a2 .q2-foot { left: calc(var(--u) * -1); top: calc(var(--u) * 29.3); width: calc(var(--u) * 102); height: calc(var(--u) * 4.4); padding: 0 calc(var(--u) * 7); box-sizing: border-box; display: flex; align-items: center; gap: 0; font: 500 var(--fs-body)/1 var(--font-ui); color: var(--ink6); background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 40%, rgba(0, 0, 0, .06)), #C9A86A var(--noise); background-size: auto, 200px; background-blend-mode: normal, multiply; transform: rotate(-1.1deg); box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .8) rgba(0, 0, 0, .35); z-index: 3; white-space: nowrap; }
html[data-dir="a"] .a2 .q2-foot span { font: 800 var(--fs-cap)/1 var(--font-ui); letter-spacing: .18em; color: #5A2A17; padding: .45em .8em; margin-right: calc(var(--u) * 1.6); border: 1.5px solid rgba(90, 42, 23, .7); border-radius: 2px; }
html[data-dir="a"] .a2 .a2-amt { font-weight: 800; color: var(--ink6); background: var(--lime); padding: .12em .35em; margin: 0 .3em; border-radius: 2px; }
html[data-dir="a"] body.present:not(.safe) .a2.is-active .q2-foot { animation: a2tape 1s var(--ez6) 3.1s backwards; }
@keyframes a2tape { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- 03 · kraft desk: the pack is the evidence, three measurement tags, a loupe on the label ---------- */
html[data-dir="a"] .a3 { --kraft: #B9966A; color: var(--ink6); }
html[data-dir="a"] .a3 .sc-bg { background: var(--kraft) !important; }
html[data-dir="a"] .a3 .v6-felt { background: var(--mottle) center / cover; mix-blend-mode: multiply; opacity: .32; }
html[data-dir="a"] .a3 .v6-felt::after { background: radial-gradient(130% 100% at 45% 45%, transparent 55%, rgba(60, 38, 14, .32) 100%); }
html[data-dir="a"] .a3 .v6-grain { mix-blend-mode: multiply; opacity: .28; }
html[data-dir="a"] .a3 .v6-spot { background: radial-gradient(48% 60% at 30% 46%, rgba(255, 246, 226, .32), transparent 70%); }
html[data-dir="a"] .a3 .cn-h1 { color: var(--ink6); }
html[data-dir="a"] .a3 .cn-h1 em { color: #4A3410; }
html[data-dir="a"] .a3 .q3-hd { width: calc(var(--u) * 88); }
html[data-dir="a"] .a3 .q3-brief { margin-top: calc(var(--u) * .5); font-size: var(--fs-body); color: rgba(19, 39, 29, .82); }
html[data-dir="a"] .a3 .sc-src { color: rgba(19, 39, 29, .62); }
html[data-dir="a"] .a3 .q3-slot, html[data-dir="a"] .a3 .q3-pad { left: calc(var(--u) * 4) !important; top: calc(var(--u) * 12.4) !important; width: calc(var(--u) * 54) !important; height: calc(var(--u) * 38) !important; }
html[data-dir="a"] .a3 .q3-chip { left: calc(var(--u) * 6); top: calc(var(--u) * 49.6) !important; border-color: rgba(19, 39, 29, .35); color: rgba(19, 39, 29, .7); }
/* the print */
html[data-dir="a"] .a3 .q3-photo { left: calc(var(--u) * 8) !important; top: calc(var(--u) * 12.4) !important; width: calc(var(--u) * 30.2) !important; height: calc(var(--u) * 39.6) !important; padding: calc(var(--u) * .8); box-sizing: border-box; background: #F7F3EA var(--noise); background-size: 240px; background-blend-mode: multiply; box-shadow: var(--card-shadow); transform: rotate(-1.2deg) translateY(calc(var(--u) * 1.4)); }
html[data-dir="a"] .a3.is-photo .q3-photo { transform: rotate(-1.2deg); }
html[data-dir="a"] .a3 .q3-photo img { position: absolute; inset: calc(var(--u) * .8); width: calc(100% - var(--u) * 1.6); max-width: none; height: calc(100% - var(--u) * 1.6); object-fit: cover; object-position: 50% 50%; border-radius: 0; filter: saturate(.9) contrast(1.04) sepia(.05); }
html[data-dir="a"] .a3 .q3-photo::before, html[data-dir="a"] .a3 .q3-photo::after { content: ''; position: absolute; z-index: 2; top: calc(var(--u) * -1.2); width: calc(var(--u) * 7); height: calc(var(--u) * 2.4); background: rgba(232, 214, 170, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
html[data-dir="a"] .a3 .q3-photo::before { left: calc(var(--u) * -1.6); transform: rotate(-32deg); }
html[data-dir="a"] .a3 .q3-photo::after { right: calc(var(--u) * -1.6); transform: rotate(30deg); }
html[data-dir="a"] .a3 .q3-photo .ev-badge { left: calc(var(--u) * 1.6) !important; top: calc(var(--u) * 1.6) !important; padding: .32em .6em .28em; font: 700 var(--fs-cap)/1 var(--font-ui); letter-spacing: .12em; color: var(--paper); background: rgba(19, 39, 29, .86); border-radius: 2px; }
/* loupe: magnifies "700 ml" on the label (same image, 2.6x), tied to the spot by a brass line */
html[data-dir="a"] .a3 .a3-loupe { left: calc(var(--u) * 43.6); top: calc(var(--u) * 20.4); width: calc(var(--u) * 21); height: calc(var(--u) * 21); border-radius: 50%; z-index: 3; pointer-events: none;
  background: url(../assets/img/ev-label.webp) calc(var(--u) * -22) calc(var(--u) * -34.2) / calc(var(--u) * 77.2) calc(var(--u) * 103) no-repeat #EDE6D6;
  box-shadow: inset 0 0 0 calc(var(--u) * .55) #8B6A25, inset 0 0 0 calc(var(--u) * .95) #D9B866, inset 0 0 calc(var(--u) * 1.6) calc(var(--u) * 1) rgba(0, 0, 0, .25), 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(40, 24, 6, .45);
  opacity: 0; transform: scale(.86); transition: opacity .6s var(--ez6) .5s, transform .9s var(--ez6) .5s; }
html[data-dir="a"] .a3 .a3-loupe::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 45% at 32% 26%, rgba(255, 255, 255, .42), transparent 60%), radial-gradient(80% 80% at 70% 80%, rgba(0, 0, 0, .12), transparent 70%); }
html[data-dir="a"] .a3 .a3-loupe > i { position: absolute; left: 82%; top: 82%; width: calc(var(--u) * 2.2); height: calc(var(--u) * 9); border-radius: calc(var(--u) * 1); background: linear-gradient(90deg, #0F2A1F, #23503A 45%, #0F2A1F); box-shadow: inset 0 calc(var(--u) * 1.3) 0 0 #C9A24E, 0 calc(var(--u) * .6) calc(var(--u) * 1) rgba(0, 0, 0, .35); transform: rotate(-42deg); transform-origin: 50% 0; z-index: -1; }
html[data-dir="a"] .a3 .a3-call { left: calc(var(--u) * 20.6); top: calc(var(--u) * 29.6); width: calc(var(--u) * 23.2); height: 2px; background: linear-gradient(90deg, #8B6A25, #D9B866); transform-origin: 0 50%; transform: rotate(2.9deg) scaleX(0); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .7s var(--ez6) .35s; z-index: 3; pointer-events: none; }
html[data-dir="a"] .a3 .a3-call::before { content: ''; position: absolute; left: calc(var(--u) * -.7); top: calc(var(--u) * -.7); width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); margin-top: 1px; border-radius: 50%; box-shadow: 0 0 0 2px #8B6A25, 0 0 0 calc(var(--u) * .5) rgba(217, 184, 102, .35); }
html[data-dir="a"] .a3.is-photo .a3-loupe { opacity: 1; transform: none; }
html[data-dir="a"] .a3.is-photo .a3-call { transform: rotate(2.9deg) scaleX(1); }
/* three measurement tags */
html[data-dir="a"] .a3 .q3-rail { left: calc(var(--u) * 68.4) !important; top: calc(var(--u) * 12.6); width: calc(var(--u) * 25.6); gap: calc(var(--u) * .8); } /* tighter: the view switch at the end of the rail stays on screen at 1280×720 */
html[data-dir="a"] .a3 .q3-rail > .cx-lbl { color: #4A3410; }
html[data-dir="a"] .a3 .q3-parts { gap: calc(var(--u) * .7); }
html[data-dir="a"] .a3 .q3-part, html[data-dir="a"] .a3 .q3-part[aria-pressed="true"] { grid-template-columns: 1fr; align-items: start; gap: calc(var(--u) * .25); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * .9); border: 0; border-radius: 1px; color: var(--ink6); background: #F4EEDF var(--noise); background-size: 220px; background-blend-mode: multiply; box-shadow: 0 1px 1px rgba(0, 0, 0, .18), 0 calc(var(--u) * .5) calc(var(--u) * 1.1) rgba(40, 24, 6, .22); text-align: left; }
html[data-dir="a"] .a3 .q3-parts .q3-part:last-child { border-bottom: 0; }
html[data-dir="a"] .a3 .q3-part::before, html[data-dir="a"] .a3 .q3-part[aria-pressed="true"]::before { left: calc(var(--u) * 1.2); right: calc(var(--u) * 1.2); top: calc(var(--u) * .45); width: auto; height: calc(var(--u) * .7); margin: 0; border: 0; border-radius: 0; box-shadow: none; background: repeating-linear-gradient(90deg, rgba(19, 39, 29, .55) 0 1px, transparent 1px calc(var(--u) * .8)), repeating-linear-gradient(90deg, rgba(19, 39, 29, .8) 0 1px, transparent 1px calc(var(--u) * 4)); background-size: auto 55%, auto 100%; background-repeat: repeat-x; border-bottom: 1px solid rgba(19, 39, 29, .45); }
html[data-dir="a"] .a3 .q3-part b { font: 700 calc(var(--u) * 2.9)/1.08 var(--font-ui); letter-spacing: -.025em; color: var(--ink6); }
html[data-dir="a"] .a3 .q3-part span, html[data-dir="a"] .a3 .q3-part[aria-pressed="true"] span { font: 600 var(--fs-cap)/1.25 var(--font-ui); letter-spacing: .06em; color: #6B5320; }
html[data-dir="a"] .a3 .q3-read { font-size: var(--fs-body); color: rgba(19, 39, 29, .86); }
html[data-dir="a"] .a3 .q3-nogl { color: #6B5320; }
html[data-dir="a"] .a3 .cx-opt, html[data-dir="a"] .a3 .cx-btn { color: var(--ink6); border-color: rgba(19, 39, 29, .35); }
html[data-dir="a"] .a3 .cx-hint { color: rgba(19, 39, 29, .7); }
/* 3D labels on the kraft desk read in ink */
html[data-dir="a"] body:has(.sc-p3.is-active) .stl { color: #13271D; }
html[data-dir="a"] body:has(.sc-p3.is-active) .sl-t span { color: #6B5320; }
html[data-dir="a"] body:has(.sc-p3.is-active) .sl-ln { stroke: #13271D; }
html[data-dir="a"] body:has(.sc-p3.is-active) .sl-dot { fill: #F2EDE1; stroke: #13271D; }

/* ---------- 04 · felt game board: question cards → two scenes as prints → Kraljic as a board, the box as the piece ---------- */
html[data-dir="a"] .a4 .v6-spot { background: radial-gradient(48% 62% at 32% 52%, rgba(255, 236, 196, .11), transparent 72%); }
html[data-dir="a"] body.present .a4 .q4-ph { opacity: 0 !important; pointer-events: none; }
html[data-dir="a"] .a4 .q4-pool { background: radial-gradient(50% 50% at 50% 50%, rgba(255, 236, 196, .2), transparent 70%); }
/* phase 1 · the question as three answer cards */
html[data-dir="a"] .a4 .q4-qt { left: calc(var(--u) * 47); top: calc(var(--u) * 13.4); width: calc(var(--u) * 47); font-size: var(--fs-block); line-height: 1.35; color: var(--paper); }
html[data-dir="a"] .a4 .q4-opts { left: calc(var(--u) * 47); top: calc(var(--u) * 21.4); width: calc(var(--u) * 47); grid-auto-rows: calc(var(--u) * 5.4); row-gap: calc(var(--u) * 1.2); }
html[data-dir="a"] .a4 .q4-opt, html[data-dir="a"] .a4 .q4-opt:first-child { border: 0; border-radius: 1px; color: var(--ink6); background: var(--paper) var(--noise); background-size: 240px; background-blend-mode: multiply; box-shadow: var(--card-shadow); overflow: hidden; }
html[data-dir="a"] .a4 .q4-opt:nth-child(1) { transform: rotate(-.5deg); } html[data-dir="a"] .a4 .q4-opt:nth-child(2) { transform: rotate(.4deg); } html[data-dir="a"] .a4 .q4-opt:nth-child(3) { transform: rotate(-.3deg); }
html[data-dir="a"] .a4 .q4-opt:hover, html[data-dir="a"] .a4 .q4-opt[aria-pressed="true"] { color: var(--ink6); }
html[data-dir="a"] .a4 .q4-opt::after { background: var(--ink6); }
html[data-dir="a"] .a4 .q4-opt b { font-size: var(--fs-block); color: var(--ink6); }
html[data-dir="a"] .a4 .q4-l { color: #6E5416 !important; border-color: #8A6A1E !important; }
html[data-dir="a"] .a4 .q4-opt[aria-pressed="true"] .q4-l { background: var(--ink6) !important; color: var(--paper) !important; border-color: var(--ink6) !important; }
html[data-dir="a"] .a4.is-rev .q4-opt { color: rgba(19, 39, 29, .55); }
html[data-dir="a"] .a4.is-rev .q4-opt b { color: rgba(19, 39, 29, .55); }
html[data-dir="a"] .a4 .q4-opt.is-ans { color: var(--ink6) !important; background: #F7F2E2 linear-gradient(90deg, rgba(207, 224, 108, .55), rgba(207, 224, 108, .12) 70%, transparent); }
html[data-dir="a"] .a4 .q4-opt.is-ans b { color: var(--ink6); }
html[data-dir="a"] .a4 .q4-opt.is-ans .q4-l { background: var(--ink6) !important; color: var(--lime) !important; border-color: var(--ink6) !important; box-shadow: none; }
html[data-dir="a"] .a4 .q4-opt.is-ans .q4-opt-tag { color: #3F5212; }
html[data-dir="a"] .a4 .q4-opt.is-miss { color: rgba(19, 39, 29, .6) !important; background: #E9E3D3; }
html[data-dir="a"] .a4 .q4-opt.is-miss .q4-l { border-color: rgba(19, 39, 29, .4) !important; color: rgba(19, 39, 29, .6) !important; }
html[data-dir="a"] .a4 .q4-opt.is-miss .q4-opt-tag { color: #7A4B33; }
html[data-dir="a"] .a4 .q4-qf { left: calc(var(--u) * 47); top: calc(var(--u) * 42.6); width: calc(var(--u) * 47); }
html[data-dir="a"] .a4 .q4-qv { font-size: var(--fs-body); color: var(--sand); }
html[data-dir="a"] .a4 .q4-qv b { color: var(--paper); }
/* phase 2 · the two use cases as pinned prints */
html[data-dir="a"] .a4 .q4-scenes { top: calc(var(--u) * 12.8); gap: calc(var(--u) * 3.4); }
html[data-dir="a"] .a4 .q4-scene { grid-template-rows: calc(var(--u) * 19.4) auto; gap: calc(var(--u) * .7); padding: calc(var(--u) * .8) calc(var(--u) * .8) calc(var(--u) * 1); border: 0; background: var(--paper) var(--noise); background-size: 240px; background-blend-mode: multiply; color: rgba(19, 39, 29, .55); box-shadow: var(--card-shadow); }
html[data-dir="a"] .a4 .q4-scene:nth-child(1) { transform: rotate(-.8deg); } html[data-dir="a"] .a4 .q4-scene:nth-child(2) { transform: rotate(.7deg); }
html[data-dir="a"] .a4 .q4-scene svg { background: #16241D; }
html[data-dir="a"] .a4 .q4-scene[aria-pressed="true"] { color: var(--ink6); }
html[data-dir="a"] .a4 .q4-scene[aria-pressed="true"] svg { background: #16241D; }
html[data-dir="a"] .a4 .q4-scene::after { display: none; }
html[data-dir="a"] .a4 .q4-scene span { padding: 0 calc(var(--u) * .3); }
html[data-dir="a"] .a4 .q4-scene b { color: inherit; }
html[data-dir="a"] .a4 .q4-scene small { color: rgba(19, 39, 29, .6); }
html[data-dir="a"] .a4 .q4-res { top: calc(var(--u) * 41.4); }
html[data-dir="a"] .a4 .q4-res b { color: var(--lime); }
html[data-dir="a"] .a4 .q4-res span { color: var(--sand); }
html[data-dir="a"] .a4 .q4-note { top: calc(var(--u) * 41.6); color: rgba(242, 237, 225, .6); }
/* phase 3 · the Kraljic board */
html[data-dir="a"] .a4 .q4-kr { left: calc(var(--u) * 8.6); top: calc(var(--u) * 11.4); width: calc(var(--u) * 56); height: calc(var(--u) * 40.4); gap: 0; border: 0; padding: calc(var(--u) * .9); box-sizing: border-box; background: linear-gradient(135deg, #B08A3E, #E2C779 30%, #9A7631 55%, #D7B867 80%, #8E6B29); box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 240, 200, .4); }
html[data-dir="a"] .a4 .q4-kc { position: relative; padding: calc(var(--u) * 1.8); background: #1B3628 var(--noise); background-size: 220px; background-blend-mode: overlay; border: 0; box-shadow: inset 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .35); }
html[data-dir="a"] .a4 .q4-kc.c-str, html[data-dir="a"] .a4 .q4-kc.c-rou { background-color: #284A37; }
html[data-dir="a"] .a4 .q4-kc b { font-size: calc(var(--u) * 2.4); color: rgba(242, 237, 225, .55); }
html[data-dir="a"] .a4 .q4-kc span { color: rgba(242, 237, 225, .5); }
html[data-dir="a"] .a4 .q4-kr[data-cell] .q4-kc { box-shadow: inset 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .35); }
html[data-dir="a"] .a4 .q4-kr[data-cell="rou"] .c-rou, html[data-dir="a"] .a4 .q4-kr[data-cell="bot"] .c-bot { background-image: radial-gradient(70% 70% at 30% 75%, rgba(255, 236, 196, .2), transparent 75%), var(--noise); }
html[data-dir="a"] .a4 .q4-kr[data-cell="rou"] .c-rou b, html[data-dir="a"] .a4 .q4-kr[data-cell="bot"] .c-bot b { color: var(--lime); }
html[data-dir="a"] .a4 .q4-kr[data-cell="rou"] .c-rou span, html[data-dir="a"] .a4 .q4-kr[data-cell="bot"] .c-bot span { color: var(--paper); }
html[data-dir="a"] .a4 .q4-kr[data-cell="bot"] .c-rou { background-image: var(--noise); box-shadow: inset 0 0 0 2px rgba(220, 198, 144, .7), inset 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .35); }
html[data-dir="a"] .a4 .q4-kr[data-cell="bot"] .c-rou b { color: var(--brass-lt); }
html[data-dir="a"] .a4 .q4-kr::before, html[data-dir="a"] .a4 .q4-kr::after { display: none; }
html[data-dir="a"] .a4 .q4-ky { left: calc(var(--u) * -1.8); color: var(--sand); }
html[data-dir="a"] .a4 .q4-kx { bottom: calc(var(--u) * -2.4); color: var(--sand); }
html[data-dir="a"] .a4 .q4-mk { width: calc(var(--u) * 12); height: calc(var(--u) * 9.4); margin: calc(var(--u) * -4.7) 0 0 calc(var(--u) * -6); }
html[data-dir="a"] .a4 .q4-mk::before { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%); }
html[data-dir="a"] .a4 .a4-arc { position: absolute; inset: calc(var(--u) * .9); width: calc(100% - var(--u) * 1.8); height: calc(100% - var(--u) * 1.8); overflow: visible; pointer-events: none; z-index: 2; }
html[data-dir="a"] .a4 .a4-arc path { fill: none; stroke: var(--brass-lt); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 3000; stroke-dashoffset: 3000; transition: stroke-dashoffset 1.2s var(--ez6) .5s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
html[data-dir="a"] .a4 .a4-head { position: absolute; left: calc(var(--u) * .9 + (100% - var(--u) * 1.8) * .68); top: calc(var(--u) * .9 + (100% - var(--u) * 1.8) * .86); width: 0; height: 0; margin: calc(var(--u) * -.2) 0 0 calc(var(--u) * -.6); border-left: calc(var(--u) * .7) solid transparent; border-right: calc(var(--u) * .7) solid transparent; border-bottom: calc(var(--u) * 1.3) solid var(--brass-lt); transform: rotate(38deg); opacity: 0; transition: opacity .3s 1.5s; z-index: 2; pointer-events: none; }
html[data-dir="a"] .a4 .q4-kr[data-cell="bot"] .a4-arc path { stroke-dashoffset: 0; }
html[data-dir="a"] .a4 .q4-kr[data-cell="bot"] .a4-head { opacity: 1; }
html[data-dir="a"] .a4 .q4-asm { left: calc(var(--u) * 66.6); top: calc(var(--u) * 11.8); width: calc(var(--u) * 27.4); }
html[data-dir="a"] .a4 .q4-asm .cx-lbl { color: var(--brass-lt); }
html[data-dir="a"] .a4 .q4-asm .cx-seg { grid-template-columns: 1fr; gap: calc(var(--u) * .5); }
html[data-dir="a"] .a4 .q4-asm .cx-opt { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: .6em; border: 1px solid rgba(242, 237, 225, .18); color: rgba(242, 237, 225, .45); background: none; border-radius: 1px; }
html[data-dir="a"] .a4 .q4-asm .cx-opt small { color: rgba(242, 237, 225, .4); }
html[data-dir="a"] .a4 .q4-asm .cx-opt[aria-pressed="true"] { border-color: transparent; color: var(--ink6); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .8) rgba(0, 0, 0, .3); }
html[data-dir="a"] .a4 .q4-asm .cx-opt[aria-pressed="true"] small { color: #4D5B51; opacity: 1; }
html[data-dir="a"] .a4 .q4-out { border-top-color: rgba(194, 160, 80, .4); }
html[data-dir="a"] .a4 .q4-out b { color: var(--paper); }
html[data-dir="a"] .a4 .q4-out span { color: var(--sand); }

/* ---------- 05 · dark showroom: Areca on its plinth, then five samples on one shelf, the light on Areca ---------- */
html[data-dir="a"] .a5 { color: var(--paper); --ink: #F2EDE1; --ink2: rgba(242, 237, 225, .75); --ink3: rgba(242, 237, 225, .55); }
html[data-dir="a"] .a5 .sc-bg { background: #0E1D16 !important; }
html[data-dir="a"] .a5 .z5-light { display: none; }
html[data-dir="a"] .a5 .v6-spot { background: radial-gradient(30% 50% at 30% 46%, rgba(255, 236, 196, .2), rgba(255, 236, 196, .04) 60%, transparent 78%); transition: background 1s; }
html[data-dir="a"] .a5.is-all .v6-spot { background: radial-gradient(14% 42% at 13% 46%, rgba(255, 236, 196, .26), rgba(255, 236, 196, .05) 62%, transparent 80%), radial-gradient(60% 40% at 55% 40%, rgba(255, 236, 196, .04), transparent 70%); }
html[data-dir="a"] .a5 .cn-h1 { color: var(--paper); }
html[data-dir="a"] .a5 .cn-h1 em { color: var(--brass-lt); }
/* beat 0 · the sample on a cream plinth (echo of the cover) */
html[data-dir="a"] .a5 .z5-plinth { left: 12%; right: 12%; bottom: 2%; height: 26%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 236, 196, .2), rgba(255, 236, 196, .06) 55%, transparent 72%); clip-path: none; box-shadow: none; }
html[data-dir="a"] .a5 .z5-plinth::after { content: ''; position: absolute; left: 30%; right: 30%; top: 36%; height: 30%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 72%); }
html[data-dir="a"] .a5 .z5h { bottom: 10%; }
html[data-dir="a"] .a5 .z5h img { filter: drop-shadow(0 calc(var(--u) * 1.2) calc(var(--u) * 1.4) rgba(0, 0, 0, .45)); }
html[data-dir="a"] .a5 .z5h-src, html[data-dir="a"] .a5 .z5h.is-real .z5h-src { color: var(--sand); }
html[data-dir="a"] .a5 .z5-real figcaption { color: var(--brass-lt); }
html[data-dir="a"] .a5 .z5-real img { border-color: #F7F3EA; }
html[data-dir="a"] .a5 .z5-cl { background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; border-radius: 1px; box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(0, 0, 0, .4) !important; }
html[data-dir="a"] .a5 .z5-cl b { color: var(--ink6); }
html[data-dir="a"] .a5 .z5-cl { gap: .38em; } /* the value's descenders and the label's stacked marks no longer touch */
/* the explore / all-five switch sits bottom right, clear of the longer beat-2 title */
html[data-dir="a"] .a5 .z5-all { top: calc(var(--u) * 50.9); right: calc(var(--u) * 6); }
/* exploring one sample at the last beat: the gallery takes the bottom row, the closing line waits for the all-five view */
html[data-dir="a"] .a5.is-end:not(.is-all) .z5-end { opacity: 0 !important; transition: opacity .3s; }
html[data-dir="a"] .a5 .z5-cl small { color: #5D6A61; }
html[data-dir="a"] .a5 .z5-ln path { stroke: var(--brass-lt) !important; }
html[data-dir="a"] .a5 .z5-ln circle { fill: var(--brass-lt) !important; }
html[data-dir="a"] .a5 .z5-info { color: var(--paper); }
html[data-dir="a"] .a5 .z5i-n span { color: var(--sand); }
html[data-dir="a"] .a5 .z5i-src { color: var(--sand); box-shadow: inset 0 0 0 1px rgba(242, 237, 225, .3); }
html[data-dir="a"] .a5 .z5i-src.is-real { color: var(--ink6); background: var(--brass-lt); box-shadow: none; }
html[data-dir="a"] .a5 .z5-info .cx-lbl { color: var(--brass-lt); }
html[data-dir="a"] .a5 .z5i-df b { color: var(--paper); }
html[data-dir="a"] .a5 .z5-info .cn5-pr b { color: var(--paper); }
html[data-dir="a"] .a5 .z5-info .cn5-pr small, html[data-dir="a"] .a5 .z5i-op { color: var(--sand); }
html[data-dir="a"] .a5 .z5g-it { color: var(--paper); background: none; box-shadow: inset 0 0 0 1px rgba(242, 237, 225, .14); border-radius: 1px; }
html[data-dir="a"] .a5 .z5g-it:hover { background: rgba(242, 237, 225, .06); }
html[data-dir="a"] .a5 .z5g-it[aria-pressed="true"] { color: var(--ink6); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(0, 0, 0, .4); }
html[data-dir="a"] .a5 .z5g-k { color: var(--sand); }
html[data-dir="a"] .a5 .z5g-it[aria-pressed="true"] .z5g-k { color: #8A6A1E; }
html[data-dir="a"] .a5 .z5g-t small { color: var(--sand); }
html[data-dir="a"] .a5 .z5g-it[aria-pressed="true"] .z5g-t small, html[data-dir="a"] .a5 .z5g-it.is-areca[aria-pressed="true"] small { color: #5C6B2A; }
/* beat 1+ · one shelf, five samples */
html[data-dir="a"] .a5 .z5x { top: calc(var(--u) * 12.6); height: calc(var(--u) * 28); }
html[data-dir="a"] .a5 .a5-shelf { position: absolute; left: calc(var(--u) * -2); right: calc(var(--u) * -2); top: calc(var(--u) * 19.4); height: calc(var(--u) * 1.3); background: linear-gradient(180deg, #E9D8A8 0, #B98F48 22%, #7C5A22 100%); box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 2) rgba(0, 0, 0, .55); z-index: 0; pointer-events: none; }
html[data-dir="a"] .a5 .z5x-g { position: relative; z-index: 1; }
html[data-dir="a"] .a5 .z5x-gl { color: var(--brass-lt); border-bottom: 1px solid rgba(220, 198, 144, .45); }
html[data-dir="a"] .a5 .z5x-g.g-b .z5x-gl, html[data-dir="a"] .a5 .z5x-g.g-c .z5x-gl { color: var(--sand); border-color: rgba(191, 192, 172, .3); }
html[data-dir="a"] .a5 .z5x-it img { filter: drop-shadow(0 calc(var(--u) * .9) calc(var(--u) * 1) rgba(0, 0, 0, .55)); }
html[data-dir="a"] .a5 .z5x-g.g-b .z5x-it img, html[data-dir="a"] .a5 .z5x-g.g-c .z5x-it img { filter: brightness(.58) saturate(.7) drop-shadow(0 calc(var(--u) * .9) calc(var(--u) * 1) rgba(0, 0, 0, .55)); }
html[data-dir="a"] .a5 .z5x-it figcaption { padding-top: calc(var(--u) * 1.2); }
html[data-dir="a"] .a5 .z5x-it b { color: var(--paper); }
html[data-dir="a"] .a5 .z5x-g.g-b .z5x-it b, html[data-dir="a"] .a5 .z5x-g.g-c .z5x-it b { color: rgba(242, 237, 225, .62); }
html[data-dir="a"] .a5 .z5x-it span.is-b { color: var(--brass-lt); }
html[data-dir="a"] .a5 .z5x-it span.is-x { color: #E09A7B; }
html[data-dir="a"] .a5 .z5-end { color: var(--paper); }
html[data-dir="a"] .a5 .z5-end b { color: var(--lime); }
html[data-dir="a"] .a5 .z5-end span { color: var(--sand); }

/* ---------- 06 · paper sheet: five vessels hold the weights; the giant 80,00 replaces the scale of five tags ---------- */
html[data-dir="a"] .a6 .s-G, html[data-dir="a"] .a7 .s-G { --c: #6F8A3B; }
html[data-dir="a"] .a6 .q6-row { left: calc(var(--u) * 6); top: calc(var(--u) * 12.4); width: calc(var(--u) * 52); height: calc(var(--u) * 27.4); gap: calc(var(--u) * 1.5); }
html[data-dir="a"] .a6 .q6-cap { background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35) 40%, rgba(255, 255, 255, .55)); box-shadow: inset 0 0 0 1.5px rgba(19, 39, 29, .28), 0 calc(var(--u) * .8) calc(var(--u) * 1.4) calc(var(--u) * -.6) rgba(60, 45, 15, .25); }
html[data-dir="a"] .a6 .q6-w { color: #6B776E; }
html[data-dir="a"] .a6 .q6-nm { color: var(--ink6); }
html[data-dir="a"] .a6 .q6-nm b { font-weight: 800; }
/* the sum becomes a two-column sheet: weights under the vessels, the score on the right */
html[data-dir="a"] .a6 .q6-sum { left: calc(var(--u) * 6); top: calc(var(--u) * 12.4); width: calc(var(--u) * 88); height: calc(var(--u) * 34); display: grid; grid-template-columns: calc(var(--u) * 52) 1fr; grid-template-rows: calc(var(--u) * 28.6) auto 1fr; grid-template-areas: ". ar" "tot ar" "mx ar"; column-gap: calc(var(--u) * 4); row-gap: calc(var(--u) * .7); align-items: center; pointer-events: none; color: #4F5D53; }
html[data-dir="a"] .a6 .q6-sum > * { pointer-events: auto; }
html[data-dir="a"] .a6 .q6-sum > p:first-child { grid-area: tot; }
html[data-dir="a"] .a6 .q6-mx { grid-area: mx; align-self: start; height: calc(var(--u) * 1.2); background: rgba(19, 39, 29, .08); }
html[data-dir="a"] .a6 .q6-mx s { background: var(--ink6); }
html[data-dir="a"] .a6 .q6-sum b { color: var(--ink6); }
html[data-dir="a"] .a6 .q6-ar { grid-area: ar; align-self: start; display: grid; justify-items: start; row-gap: calc(var(--u) * 1.7); margin-top: calc(var(--u) * 6.2); }
html[data-dir="a"] .a6 .q6-ar span { font: 700 var(--fs-body)/1.3 var(--font-ui); letter-spacing: .02em; color: #8A6A1E; }
html[data-dir="a"] .a6 .q6-sum .q6-tot { font: 600 calc(var(--u) * 10.4)/1 var(--font-ui) !important; letter-spacing: -.055em; color: var(--ink6) !important; min-width: 0; padding: 0 .06em; background: linear-gradient(180deg, transparent 62%, rgba(207, 224, 108, .85) 62%, rgba(207, 224, 108, .85) 88%, transparent 88%); }
html[data-dir="a"] .a6 .q6-ar small { font-size: var(--fs-body); color: #4F5D53; }
html[data-dir="a"] .a6 .q6-rd { left: calc(var(--u) * 62); top: calc(var(--u) * 33.4); width: calc(var(--u) * 32); gap: calc(var(--u) * .45); }
html[data-dir="a"] .a6 .q6-rd b { color: #8A6A1E; }
html[data-dir="a"] .a6 .q6-rd span { font-size: var(--fs-body); line-height: 1.38; color: var(--ink6); }
html[data-dir="a"] .a6 .q6-rd em { font-size: var(--fs-body); color: #3F5212; }
html[data-dir="a"] .a6 .q6-eq { left: calc(var(--u) * 6); top: calc(var(--u) * 46.8) !important; width: calc(var(--u) * 52); line-height: 1.35; color: #5D6A61; }
html[data-dir="a"] .a6 .a6-prop { left: calc(var(--u) * 64); top: calc(var(--u) * 11.6); width: calc(var(--u) * 24); height: auto; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.2) rgba(60, 45, 15, .28)); transition: opacity .6s var(--ez6), translate .9s var(--ez6); pointer-events: none; }
html[data-dir="a"] .a6.at1 .a6-prop { opacity: 0; translate: 0 calc(var(--u) * -2); }

/* ---------- 07 · paper podium: the leader on a top tier with its score large, the rest step down; the decision is a stamp ---------- */
html[data-dir="a"] .a7 .z7-bg::after { display: none; }
html[data-dir="a"] .a7 .z7-stage { left: calc(var(--u) * 6); top: calc(var(--u) * 12.4); width: calc(var(--u) * 57); }
html[data-dir="a"] .a7 .z7-leg { position: absolute; left: 0; top: calc(var(--u) * 29.4); margin: 0; gap: calc(var(--u) * 1.2); color: #5D6A61; }
html[data-dir="a"] .a7 .z7-rows { height: calc(var(--u) * 29); }
html[data-dir="a"] .a7 .z7-spot { left: calc(var(--u) * -1); right: calc(var(--u) * -1); top: calc(var(--u) * -.6); height: calc(var(--u) * 11.6); border-radius: 1px; background: #FBF8EF var(--noise); background-size: 220px; background-blend-mode: multiply; box-shadow: 0 1px 1px rgba(60, 45, 15, .12), 0 calc(var(--u) * .8) calc(var(--u) * 1.8) rgba(60, 45, 15, .16); }
html[data-dir="a"] .a7 .z7-row { height: calc(var(--u) * 4.2); grid-template-columns: calc(var(--u) * 3.4) calc(var(--u) * 13) 1fr calc(var(--u) * 7.6); transform: translateY(calc(var(--u) * (var(--r) * 4.2 + min(var(--r), 1) * 7.8))); opacity: calc(1 - var(--r) * .09); border: 0; }
html[data-dir="a"] .a7 .z7-row:hover, html[data-dir="a"] .a7 .z7-row[aria-pressed="true"] { opacity: 1; }
html[data-dir="a"] .a7 .z7-row .z7-nm b { font-size: calc(var(--u) * (1.62 - var(--r) * .06)); }
html[data-dir="a"] .a7 .z7-row .cn7-v { font-size: calc(var(--u) * (1.95 - var(--r) * .08)); font-weight: 700; color: var(--ink6); }
html[data-dir="a"] .a7 .z7-rk { font-size: var(--fs-body); color: rgba(19, 39, 29, .4); }
html[data-dir="a"] .a7 .z7-bar { height: calc(var(--u) * 1.1); background: rgba(19, 39, 29, .06); }
/* the top tier */
html[data-dir="a"] .a7 .z7-row.is-lead { height: calc(var(--u) * 10.4); grid-template-columns: calc(var(--u) * 3.4) 1fr calc(var(--u) * 22); grid-template-rows: auto auto; grid-template-areas: "rk nm v" "rk bar v"; align-content: start; row-gap: calc(var(--u) * .9); padding-top: calc(var(--u) * 1); box-sizing: border-box; opacity: 1; }
html[data-dir="a"] .a7 .z7-row.is-lead .z7-rk { grid-area: rk; align-self: start; font-size: calc(var(--u) * 2.6); color: #8A6A1E; transform: none; }
html[data-dir="a"] .a7 .z7-row.is-lead .z7-nm { grid-area: nm; }
html[data-dir="a"] .a7 .z7-row.is-lead .z7-nm b { font-size: calc(var(--u) * 2.5); }
html[data-dir="a"] .a7 .z7-row.is-lead .z7-bar { grid-area: bar; height: calc(var(--u) * 2.2); }
html[data-dir="a"] .a7 .z7-row.is-lead .cn7-v { grid-area: v; align-self: start; margin-top: calc(var(--u) * -.5); text-align: right; font: 600 calc(var(--u) * 7)/1 var(--font-ui); letter-spacing: -.055em; color: var(--ink6); }
html[data-dir="a"] .a7:not(.is-dec) .z7-row.is-lead .cn7-v { background: linear-gradient(180deg, transparent 62%, rgba(207, 224, 108, .85) 62%, rgba(207, 224, 108, .85) 90%, transparent 90%); justify-self: end; padding: 0 .06em; }
html[data-dir="a"] .a7 .z7-bd { position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 9.7); margin: 0; padding: 0; border: 0; font-size: var(--fs-cap); color: #4F5D53; }
html[data-dir="a"] .a7 .z7-bd b { font-weight: 700; color: var(--ink6); margin-right: .2em; }
/* the right column */
html[data-dir="a"] .a7 .z7-ins { left: calc(var(--u) * 66.6); width: calc(var(--u) * 27.4); color: var(--ink6); }
html[data-dir="a"] body.present .a7:not(.at1) .z7-ins { top: calc(var(--u) * 13.2); }
html[data-dir="a"] .a7 .z7-dn, html[data-dir="a"] body.present .a7:not(.at1):not(.is-sim) .z7-dn { font: 700 calc(var(--u) * 3.6)/1.05 var(--font-ui) !important; letter-spacing: -.035em; color: var(--ink6); }
html[data-dir="a"] .a7.is-sim .z7-dn { color: #8E3F1F; }
html[data-dir="a"] .a7 .z7-dl { color: #3D4B42; }
html[data-dir="a"] .a7 .z7-why { border-top-color: rgba(19, 39, 29, .14); }
html[data-dir="a"] .a7 .z7-why b { color: var(--ink6); }
html[data-dir="a"] .a7 .z7-why p { color: #3D4B42; }
html[data-dir="a"] .a7 .z7-asm .cx-seg { gap: calc(var(--u) * .4); }
html[data-dir="a"] .a7 .z7-asm .cx-opt { border: 1px solid rgba(19, 39, 29, .2); border-radius: 1px; color: rgba(19, 39, 29, .55); background: none; }
html[data-dir="a"] .a7 .z7-asm .cx-opt[aria-pressed="true"] { border-color: var(--ink6); color: var(--paper); background: var(--ink6); }
html[data-dir="a"] .a7 .z7-asm .cx-opt[aria-pressed="true"] small { color: rgba(242, 237, 225, .75); }
html[data-dir="a"] .a7 .z7-asm .cx-lbl { color: #8A6A1E; }
/* the decision stamp */
html[data-dir="a"] .a7 .z7-dec { margin-top: calc(var(--u) * .8); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.5); border-radius: calc(var(--u) * .5); background: rgba(250, 247, 238, .6); color: var(--ink6); box-shadow: inset 0 0 0 calc(var(--u) * .22) #1C4A34, inset 0 0 0 calc(var(--u) * .42) rgba(250, 247, 238, .6), inset 0 0 0 calc(var(--u) * .56) #1C4A34; transform: rotate(-1.6deg); gap: calc(var(--u) * 1); -webkit-mask-image: var(--noise); mask-image: var(--noise); -webkit-mask-size: 260px; mask-size: 260px; }
html[data-dir="a"] .a7 .z7-dec .cx-lbl { color: #1C4A34; }
html[data-dir="a"] .a7 .z7-dec p:not(.cx-lbl) { color: #1C4A34; }
html[data-dir="a"] .a7 .z7-dec b { color: var(--ink6); background: linear-gradient(180deg, transparent 56%, rgba(207, 224, 108, .9) 56%, rgba(207, 224, 108, .9) 92%, transparent 92%); padding: 0 .08em; }
html[data-dir="a"] body.present:not(.safe) .a7.is-dec .z7-dec { animation: wowStamp .5s cubic-bezier(.3, 0, .3, 1) .35s both; }
html[data-dir="a"] .a7 .z7-tco { color: #4F5D53 !important; }
html[data-dir="a"] .a7 .z7-tco b { color: #8E3F1F; }
html[data-dir="a"] .a7 .a7-prop { left: calc(var(--u) * 69); top: calc(var(--u) * 27.4); width: calc(var(--u) * 22); height: auto; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.2) rgba(60, 45, 15, .26)); transition: opacity .5s var(--ez6); pointer-events: none; }
html[data-dir="a"] .a7.at1 .a7-prop, html[data-dir="a"] .a7.is-sim .a7-prop { opacity: 0; }

/* ---------- 09 · kraft desk: five sheets dealt across, the invoice an empty dashed place ---------- */
html[data-dir="a"] .a9 { --kraft: #B9966A; color: var(--ink6); }
html[data-dir="a"] .a9 .sc-bg { background: var(--kraft) !important; }
html[data-dir="a"] .a9 .sc-bg::before, html[data-dir="a"] .a9 .sc-bg::after { display: none; }
html[data-dir="a"] .a9 .v6-felt { background: var(--mottle) center / cover; mix-blend-mode: multiply; opacity: .32; }
html[data-dir="a"] .a9 .v6-felt::after { background: radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(60, 38, 14, .32) 100%); }
html[data-dir="a"] .a9 .v6-grain { mix-blend-mode: multiply; opacity: .28; }
html[data-dir="a"] .a9 .v6-spot { background: radial-gradient(62% 48% at 50% 44%, rgba(255, 246, 226, .3), transparent 72%); }
html[data-dir="a"] .a9 .cn-h1 { color: var(--ink6); }
html[data-dir="a"] .a9 .cn-h1 em { color: #4A3410; }
html[data-dir="a"] .a9 .sc-src { color: rgba(19, 39, 29, .62); }
html[data-dir="a"] .a9 .z9-flow { display: none; }
html[data-dir="a"] .a9 .z9-docs { top: calc(var(--u) * 12.4); gap: calc(var(--u) * 2.4); }
html[data-dir="a"] .a9 .z9-docs li:nth-child(1) .z9-sh { rotate: -2.2deg; } html[data-dir="a"] .a9 .z9-docs li:nth-child(2) .z9-sh { rotate: 1.4deg; translate: 0 calc(var(--u) * .8); }
html[data-dir="a"] .a9 .z9-docs li:nth-child(3) .z9-sh { rotate: -.8deg; translate: 0 calc(var(--u) * -.4); } html[data-dir="a"] .a9 .z9-docs li:nth-child(4) .z9-sh { rotate: 1.8deg; translate: 0 calc(var(--u) * .5); }
html[data-dir="a"] .a9 .z9-docs li:nth-child(5) .z9-sh { rotate: -1deg; }
html[data-dir="a"] .a9 .z9-sh { height: calc(var(--u) * 23.4); background: linear-gradient(180deg, #FFFEFA, #F6F1E4) , var(--noise); background-blend-mode: multiply; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.4) rgba(60, 38, 14, .35)) drop-shadow(0 1px 1px rgba(60, 38, 14, .25)); }
html[data-dir="a"] .a9 .z9-sh::before { display: none; }
html[data-dir="a"] .a9 .z9-t { font-size: calc(var(--u) * 2.4); }
html[data-dir="a"] .a9 .z9-wm { color: rgba(138, 106, 30, .5); border: 2px solid rgba(138, 106, 30, .45); padding: .25em .6em; border-radius: 3px; }
html[data-dir="a"] .a9 .z9-cnt b { color: var(--ink6); background: linear-gradient(180deg, transparent 56%, rgba(207, 224, 108, .9) 56%, rgba(207, 224, 108, .9) 92%, transparent 92%); padding: 0 .06em; font-size: calc(var(--u) * 2.9); }
html[data-dir="a"] .a9 .z9-sh.is-none { background: rgba(70, 44, 16, .14); outline: calc(var(--u) * .22) dashed #8E3F1F; outline-offset: calc(var(--u) * -.22); filter: none; box-shadow: inset 0 calc(var(--u) * .6) calc(var(--u) * 1.4) rgba(60, 38, 14, .35); }
html[data-dir="a"] .a9 .z9-sh.is-none .z9-t, html[data-dir="a"] .a9 .z9-sh.is-none .z9-nm, html[data-dir="a"] .a9 .z9-sh.is-none .z9-code, html[data-dir="a"] .a9 .z9-sh.is-none .z9-n { color: #6E2F14; }
html[data-dir="a"] .a9 .z9-q { font-size: calc(var(--u) * 7); color: rgba(142, 63, 31, .55); }
html[data-dir="a"] .a9 .z9-sh.is-none .tag { color: #6E2F14; }
html[data-dir="a"] .a9.has-sel .z9-sh:not([aria-pressed="true"]) { opacity: .62; }
html[data-dir="a"] .a9 .z9-idle { top: calc(var(--u) * 39.2) !important; color: var(--ink6); }
html[data-dir="a"] .a9 .z9-idle span { color: rgba(19, 39, 29, .85); }
html[data-dir="a"] .a9 .z9-det { top: calc(var(--u) * 38.6); border-left: 0; border-radius: 1px; background: #FBF8EF var(--noise); background-size: 220px; background-blend-mode: multiply; filter: drop-shadow(0 calc(var(--u) * .9) calc(var(--u) * 1.4) rgba(60, 38, 14, .35)); }
html[data-dir="a"] .a9 .z9-det::after { content: ''; position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * -1.3); width: calc(var(--u) * 1.4); height: calc(var(--u) * 4.2); border: calc(var(--u) * .28) solid #B8954A; border-radius: calc(var(--u) * .7); box-sizing: border-box; transform: rotate(8deg); }

/* ---------- 10 · felt: PO, GR and the missing invoice side by side; links light up or break; the empty invoice reads red ---------- */
html[data-dir="a"] .a10 { color: var(--paper); --rh: calc(var(--u) * 6.6); --rt: calc(var(--u) * 5); --ink: #F2EDE1; --ink2: rgba(242, 237, 225, .78); --ink3: rgba(242, 237, 225, .55); }
html[data-dir="a"] .a10 .sc-bg::before, html[data-dir="a"] .a10 .sc-bg::after { display: none; }
html[data-dir="a"] .a10 .v6-spot { background: radial-gradient(40% 46% at 82% 40%, rgba(214, 120, 90, .1), transparent 72%), radial-gradient(70% 50% at 45% 36%, rgba(255, 236, 196, .09), transparent 72%); }
html[data-dir="a"] .a10 .z10-tri { top: calc(var(--u) * 12.4); }
html[data-dir="a"] .a10 .z10-col { color: var(--ink6); --ink: #13271D; --ink2: #3D4B42; --ink3: #6B776E; }
html[data-dir="a"] .a10 .z10-col.c-po { rotate: -1deg; } html[data-dir="a"] .a10 .z10-col.c-gr { rotate: .8deg; } html[data-dir="a"] .a10 .z10-col.c-inv { rotate: -.6deg; }
html[data-dir="a"] .a10 .z10-bg { border-radius: 1px; background: linear-gradient(180deg, #FFFEFA, #F4EFE2), var(--noise); background-blend-mode: multiply; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.6) rgba(0, 0, 0, .45)) drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
html[data-dir="a"] .a10 .z10-r { border-top-color: rgba(19, 39, 29, .1); }
html[data-dir="a"] .a10 .z10-r:hover { background: rgba(19, 39, 29, .04); }
html[data-dir="a"] .a10[data-row="qty"] .r-qty { background: rgba(207, 224, 108, .26); }
/* the missing invoice: an empty, recessed place outlined in red */
html[data-dir="a"] .a10 .z10-col.is-none { color: #F0B49A; }
html[data-dir="a"] .a10 .z10-col.is-none .z10-bg { background: rgba(120, 40, 20, .16); filter: none; outline: calc(var(--u) * .24) dashed #D9704F; outline-offset: calc(var(--u) * -.24); box-shadow: inset 0 calc(var(--u) * .6) calc(var(--u) * 1.6) rgba(0, 0, 0, .45), 0 0 calc(var(--u) * 3) rgba(217, 112, 79, .18); }
html[data-dir="a"] .a10 .z10-col.is-none .z10-h b { color: #F7C9B4; }
html[data-dir="a"] .a10 .z10-col.is-none .z10-h span, html[data-dir="a"] .a10 .z10-col.is-none .z10-r span { color: #E98E6C; }
html[data-dir="a"] .a10 .z10-col.is-none .z10-r b { color: rgba(240, 180, 154, .7); }
html[data-dir="a"] .a10 .z10-col.is-none .z10-r { border-top-color: rgba(217, 112, 79, .25); }
html[data-dir="a"] .a10[data-row="qty"] .z10-col.is-none .r-qty { background: rgba(217, 112, 79, .12); }
/* links */
html[data-dir="a"] .a10 .z10-lk s { background: rgba(242, 237, 225, .18); }
html[data-dir="a"] .a10.is-run .k-ok s { background: var(--lime); box-shadow: 0 0 12px rgba(207, 224, 108, .6); }
html[data-dir="a"] .a10 .z10-lk.k-ok em { background: var(--lime); color: var(--ink6); }
html[data-dir="a"] .a10.is-run .k-warn s { background: repeating-linear-gradient(90deg, var(--brass-lt) 0 6px, transparent 6px 11px); }
html[data-dir="a"] .a10 .z10-lk.k-warn em { background: rgba(220, 198, 144, .18); color: var(--brass-lt); }
html[data-dir="a"] .a10.is-run .k-no s { background: #E07A57; }
html[data-dir="a"] .a10 .z10-lk.k-no em { background: rgba(224, 122, 87, .18); color: #F2A487; }
html[data-dir="a"] .a10 .z10-scan { filter: brightness(1.4); }
/* verdict, result, exceptions */
html[data-dir="a"] .a10 .z10-bar { top: calc(var(--u) * 39); }
html[data-dir="a"] .a10 .z10-bar .cn10-v { color: var(--sand); }
html[data-dir="a"] .a10 .z10-res { top: calc(var(--u) * 41.6); }
html[data-dir="a"] .a10 .z10-meter .m-ok { background: var(--paper); color: var(--ink6); }
html[data-dir="a"] .a10 .z10-meter .m-no { color: #F2A487; box-shadow: inset 0 0 0 1.5px rgba(224, 122, 87, .75); }
html[data-dir="a"] .a10 .cn10-res b { color: var(--paper); }
html[data-dir="a"] .a10 .cn10-res em { color: #F2A487; }
html[data-dir="a"] .a10 .z10-ex { top: calc(var(--u) * 44.6); }
html[data-dir="a"] .a10 .z10-exh .cx-lbl { color: var(--brass-lt); }
html[data-dir="a"] .a10 .z10-note { color: rgba(242, 237, 225, .6); }
html[data-dir="a"] .a10 .z10-ex li { color: var(--ink6); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; border-radius: 1px; box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(0, 0, 0, .4) !important; }
html[data-dir="a"] .a10 .z10-ex li:nth-child(1) { rotate: -.6deg; } html[data-dir="a"] .a10 .z10-ex li:nth-child(2) { rotate: .5deg; } html[data-dir="a"] .a10 .z10-ex li:nth-child(3) { rotate: -.4deg; }
html[data-dir="a"] .a10 .z10-ex li span { color: #5D6A61; }
html[data-dir="a"] .a10 .z10-res .cn10-res { font-size: calc(var(--u) * 1.62) !important; text-wrap: nowrap; }

/* ---------- 11 · inspection mat: the real photo runs down the left edge, the 3D pack stands big on a measuring mat, the findings sit on a sheet ---------- */
html[data-dir="a"] .a11 .sc-bg { background: #10241A !important; }
html[data-dir="a"] .a11 .sc-bg::after { display: none; }
/* measuring grid: 1u minor, 5u major lines, fading out toward the edges */
html[data-dir="a"] .a11 .sc-bg::before { content: ''; display: block; position: absolute; inset: 0; opacity: 1;
  background:
    linear-gradient(rgba(220, 198, 144, .11) 1px, transparent 1px) 0 0 / calc(var(--u) * 5) calc(var(--u) * 5),
    linear-gradient(90deg, rgba(220, 198, 144, .11) 1px, transparent 1px) 0 0 / calc(var(--u) * 5) calc(var(--u) * 5),
    linear-gradient(rgba(220, 198, 144, .045) 1px, transparent 1px) 0 0 / var(--u) var(--u),
    linear-gradient(90deg, rgba(220, 198, 144, .045) 1px, transparent 1px) 0 0 / var(--u) var(--u);
  -webkit-mask-image: radial-gradient(48% 62% at 46% 54%, #000 30%, transparent 100%); mask-image: radial-gradient(48% 62% at 46% 54%, #000 30%, transparent 100%); }
html[data-dir="a"] .a11 .v6-spot { background: radial-gradient(26% 40% at 46% 56%, rgba(255, 236, 196, .16), rgba(255, 236, 196, .04) 60%, transparent 78%); }
/* the real photo: a full-height portrait strip (the frames are 9:16 phone video) */
html[data-dir="a"] .a11 .cn11-view { left: 0 !important; top: 0 !important; width: calc(var(--u) * 27.6) !important; height: 100% !important; border-radius: 0; box-shadow: calc(var(--u) * .5) 0 calc(var(--u) * 2) rgba(0, 0, 0, .5); z-index: 1; }
html[data-dir="a"] .a11 .cn11-view::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; z-index: 3; background: linear-gradient(180deg, transparent, rgba(220, 198, 144, .55) 20%, rgba(220, 198, 144, .55) 80%, transparent); pointer-events: none; }
html[data-dir="a"] .a11 .cn11-img { filter: saturate(.9) contrast(1.05) sepia(.04); }
html[data-dir="a"] .a11 .cn11-view::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(8, 12, 10, .5) 0%, transparent 16%, transparent 62%, rgba(8, 12, 10, .88) 100%); }
html[data-dir="a"] .a11 .cn11-view .ev-badge { left: calc(var(--u) * 6) !important; top: calc(var(--u) * 5) !important; z-index: 4; padding: .32em .6em .28em; font: 700 var(--fs-cap)/1 var(--font-ui); letter-spacing: .12em; color: var(--ink6); background: var(--paper); border-radius: 2px; }
html[data-dir="a"] .a11 .cn11-tm { left: calc(var(--u) * 6) !important; bottom: calc(var(--u) * 11.6) !important; z-index: 4; color: var(--paper); background: rgba(8, 12, 10, .62); }
html[data-dir="a"] .a11 .q11-zb { z-index: 4; top: calc(var(--u) * 4.6); right: calc(var(--u) * 1.6); bottom: auto; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); } /* clear of the progress bar along the bottom edge */
html[data-dir="a"] .a11 .cn11-view .wow-vf { inset: calc(var(--u) * 9) calc(var(--u) * 2.2) calc(var(--u) * 15.4); }
html[data-dir="a"] .a11 .sc-src { left: calc(var(--u) * 6) !important; right: auto !important; width: calc(var(--u) * 19.6); z-index: 6; color: rgba(242, 237, 225, .74); }
/* the claim across the top of the mat */
html[data-dir="a"] .a11 .cn-hd { left: calc(var(--u) * 31.4); top: calc(var(--u) * 4.3); width: calc(var(--u) * 62.6); z-index: 2; }
html[data-dir="a"] .a11 .cn-h1 { font-size: calc(var(--u) * 2.75); line-height: 1.22; color: var(--paper); text-wrap: balance; }
html[data-dir="a"] .a11 .cn-h1 em { display: block; color: #E79E76; }
/* the 3D pack: the biggest thing on the mat */
html[data-dir="a"] .a11 .q11-slot, html[data-dir="a"] .a11 .q11-pad { left: calc(var(--u) * 29) !important; top: calc(var(--u) * 15.6) !important; width: calc(var(--u) * 34.6) !important; height: calc(var(--u) * 32.8) !important; z-index: 2; }
html[data-dir="a"] .a11 .q11-pad { cursor: grab; }
html[data-dir="a"] .a11 .q11-pad.is-grab { cursor: grabbing; }
html[data-dir="a"] .a11 .q11-chip { left: calc(var(--u) * 31.4) !important; top: calc(var(--u) * 12.3) !important; width: calc(var(--u) * 30) !important; white-space: normal; line-height: 1.3; z-index: 2; color: rgba(220, 198, 144, .78); }
html[data-dir="a"] .a11 .q11-tools { left: calc(var(--u) * 31.4) !important; top: calc(var(--u) * 49.2) !important; width: calc(var(--u) * 32.4) !important; flex-wrap: wrap; gap: calc(var(--u) * .4) calc(var(--u) * 1.6) !important; z-index: 2; }
html[data-dir="a"] .a11 .q11-tools .cx-seg { gap: calc(var(--u) * 1.2); }
html[data-dir="a"] .a11 .q11-tools .cx-opt, html[data-dir="a"] .a11 .q11-tools .cx-btn { font-size: var(--fs-cap) !important; color: rgba(242, 237, 225, .72); border-color: rgba(220, 198, 144, .4); }
html[data-dir="a"] .a11 .q11-tools .cx-opt[aria-pressed="true"] { color: var(--paper); }
html[data-dir="a"] .a11 .q11-drag, html[data-dir="a"] .a11 .q11-drag * { color: rgba(220, 198, 144, .78) !important; }
/* the inspection sheet on the right: layer chips, then what was seen, claimed and still open */
html[data-dir="a"] .a11 .a11-sheet { left: calc(var(--u) * 64.6); top: calc(var(--u) * 12.4); width: calc(var(--u) * 32); height: calc(var(--pn-h, var(--u) * 30) + var(--u) * 10.4); transition: height .5s cubic-bezier(.22, 1, .36, 1); background: var(--paper) var(--noise); background-size: 240px; background-blend-mode: multiply; border-radius: 1px; box-shadow: var(--card-shadow); z-index: 1; }
html[data-dir="a"] .a11 .a11-sheet::before { content: ''; position: absolute; left: 50%; top: calc(var(--u) * -.9); width: calc(var(--u) * 7); height: calc(var(--u) * 1.8); margin-left: calc(var(--u) * -3.5); border-radius: calc(var(--u) * .3); background: linear-gradient(180deg, #E9D9A6 0%, #C2A050 46%, #7D5E1C 100%); box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .6) rgba(0, 0, 0, .45); }
html[data-dir="a"] .a11 .cn11-list { left: calc(var(--u) * 66.8) !important; top: calc(var(--u) * 14.4) !important; width: calc(var(--u) * 27.2) !important; display: flex !important; flex-wrap: wrap; gap: calc(var(--u) * .5) !important; z-index: 2; }
html[data-dir="a"] .a11 .cn11-hs, html[data-dir="a"] .a11 .cn11-hs[aria-pressed="true"] { padding: .32em .7em; border: 1px solid rgba(19, 39, 29, .28) !important; border-radius: 2px; color: rgba(19, 39, 29, .7); background: none; font-size: var(--fs-cap) !important; line-height: 1.2; min-height: 0; }
html[data-dir="a"] .a11 .cn11-hs::before { display: none; }
html[data-dir="a"] .a11 .cn11-hs[aria-pressed="true"] { color: var(--paper); background: var(--ink6); border-color: var(--ink6) !important; }
html[data-dir="a"] .a11 .cn11-hs.is-hot:not([aria-pressed="true"]) { border-color: var(--ink6) !important; color: var(--ink6); }
html[data-dir="a"] .a11 .cn11-pn { left: calc(var(--u) * 66.8) !important; top: calc(var(--u) * 20.6) !important; width: calc(var(--u) * 27.2) !important; gap: 0 !important; z-index: 2; color: var(--ink6); }
html[data-dir="a"] .a11 .cn11-pt { margin: 0 0 calc(var(--u) * .5); font-size: calc(var(--u) * 2.2) !important; line-height: 1.15; color: var(--ink6); }
html[data-dir="a"] .a11 .cn11-q, html[data-dir="a"] .a11 .q11 .cn11-q { display: grid; grid-template-columns: 1fr; row-gap: calc(var(--u) * .3); padding: calc(var(--u) * .7) 0; border: 0; border-top: 1px dotted rgba(19, 39, 29, .35); }
html[data-dir="a"] .a11 .cn11-q p { margin: 0; font-size: var(--fs-body) !important; line-height: 1.34; color: var(--ink6); font-weight: 400; }
html[data-dir="a"] .a11 .cn11-q.q1 .cx-lbl { color: #3F5212; } html[data-dir="a"] .a11 .cn11-q.q2 .cx-lbl { color: #7A5E1F; } html[data-dir="a"] .a11 .cn11-q.q3 .cx-lbl { color: #8E3F1F; }
html[data-dir="a"] .a11 .cn11-q.q3 p { color: #6E2F14 !important; font-weight: 600 !important; }
html[data-dir="a"] .a11 .cn11-b7 { margin-top: calc(var(--u) * .4); gap: calc(var(--u) * .6); }
html[data-dir="a"] .a11 .cn11-b7 span { padding: calc(var(--u) * .35) calc(var(--u) * .7); color: #5D6A61; border-color: rgba(19, 39, 29, .3); background: rgba(255, 255, 255, .4); }
html[data-dir="a"] .a11 .cn11-b7 span b { font-size: calc(var(--u) * 1.75) !important; color: var(--ink6); }
html[data-dir="a"] .a11 .cn11-b7 i { font-size: calc(var(--u) * 1.75) !important; }
html[data-dir="a"] .a11 .cn11-b7 span.is-warn { border-color: #8E3F1F; } html[data-dir="a"] .a11 .cn11-b7 span.is-warn b, html[data-dir="a"] .a11 .cn11-b7 i { color: #8E3F1F; }
/* 3D label: an evidence tag hanging from its layer (stage-ui sits outside the scene: literal colours, the .v6 tokens do not reach it) */
html[data-dir="a"] body:has(.sc-p11.is-active) .stl { color: #13271D; padding: 0; }
html[data-dir="a"] body:has(.sc-p11.is-active) .stl .sl-t { max-width: calc(var(--u) * 14); padding: calc(var(--u) * .55) calc(var(--u) * .9) calc(var(--u) * .6); background: #F2EDE1; border-radius: 2px; box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .9) rgba(0, 0, 0, .45); }
html[data-dir="a"] body:has(.sc-p11.is-active) .stl .sl-t b { color: #13271D; }
html[data-dir="a"] body:has(.sc-p11.is-active) .sl-t span { color: #7A5E1F; }
html[data-dir="a"] body:has(.sc-p11.is-active) .sl-ln { stroke: #DCC690; }
html[data-dir="a"] body:has(.sc-p11.is-active) .sl-dot { fill: #CFE06C; stroke: #10241A; }
html[data-dir="a"] body:has(.sc-p11.is-active) #stage { clip-path: var(--v11clip, none); }
/* hotspots on the model: click a layer on the 3D pack itself (mouse shortcut for the chips, no text) */
.v11-hot { position: absolute; inset: 0; pointer-events: none; display: none; }
body.present.stage-live:has(.sc-p11.is-active.is-ex) .v11-hot { display: block; }
.v11-hot i { position: absolute; left: 0; top: 0; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); margin: calc(var(--u) * -1.3) 0 0 calc(var(--u) * -1.3); border-radius: 50%; pointer-events: auto; cursor: pointer; border: 2px solid rgba(242, 237, 225, .9); background: radial-gradient(circle, rgba(242, 237, 225, .95) 0 18%, rgba(16, 36, 26, .45) 22%); box-shadow: 0 0 0 1px rgba(16, 36, 26, .5), 0 calc(var(--u) * .2) calc(var(--u) * .6) rgba(0, 0, 0, .4); transition: opacity .35s, scale .25s cubic-bezier(.22, 1, .36, 1), border-color .25s, box-shadow .25s; will-change: transform; }
.v11-hot i:hover, .v11-hot i.is-near { scale: 1.28; border-color: var(--lime); }
.v11-hot i.is-on { border-color: var(--lime); background: radial-gradient(circle, var(--lime) 0 26%, rgba(16, 36, 26, .35) 30%); box-shadow: 0 0 0 1px rgba(16, 36, 26, .6), 0 0 calc(var(--u) * 1.4) rgba(207, 224, 108, .55); }
.v11-hot i.is-on::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--lime); animation: v11ring 1.4s cubic-bezier(.22, 1, .36, 1) 2; pointer-events: none; }
.v11-hot i.is-back { opacity: .4; }
@keyframes v11ring { from { scale: 1; opacity: .9; } to { scale: 2.2; opacity: 0; } }
body.safe .v11-hot i.is-on::after { display: none; }
body.safe .a11 .a11-sheet { transition: none; }
@media (prefers-reduced-motion: reduce) { .v11-hot i.is-on::after { display: none; } .v11-hot i, .a11 .a11-sheet { transition: none; } }

/* ---------- 13 · felt board: notes pinned at each station, a red thread runs through them ---------- */
html[data-dir="a"] .a13 .v6-spot { background: radial-gradient(70% 60% at 50% 55%, rgba(255, 236, 196, .09), transparent 72%); }
html[data-dir="a"] .a13 .cn-h1 em { color: var(--brass-lt); }
html[data-dir="a"] .a13 .q13-path .q13-glow { stroke: #000; stroke-width: .7; stroke-opacity: .25; filter: blur(.35px); transform: translate(.15px, .35px); }
html[data-dir="a"] .a13 .q13-path .q13-ln, html[data-dir="a"] .a13 .q13-path path.q13-ln { stroke: #C2412F; stroke-width: .26; stroke-opacity: 1; }
html[data-dir="a"] .a13 .q13-run { display: none; }
html[data-dir="a"] .a13 .q13-md { background: radial-gradient(circle at 36% 30%, #F6E2A6 0%, #C9A24E 45%, #7D5E1C 100%) !important; border: 0 !important; box-shadow: 0 calc(var(--u) * .45) calc(var(--u) * .7) rgba(0, 0, 0, .5) !important; }
html[data-dir="a"] .a13 .q13-md svg { stroke: #2A1E08; }
html[data-dir="a"] .a13 .q13-md svg .f { fill: #2A1E08; }
html[data-dir="a"] .a13 .q13-card { box-sizing: content-box; padding: calc(var(--u) * .8) calc(var(--u) * .9) calc(var(--u) * .9); margin-left: calc(var(--u) * -.9); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; color: var(--ink6); box-shadow: var(--card-shadow); }
html[data-dir="a"] .a13 .q13-st:nth-of-type(odd) .q13-card { rotate: -.9deg; } html[data-dir="a"] .a13 .q13-st:nth-of-type(even) .q13-card { rotate: .8deg; }
html[data-dir="a"] .a13 .q13-n { color: var(--ink6); }
html[data-dir="a"] .a13 .q13-m p { gap: .22em; } /* name and role lines never touch */
html[data-dir="a"] .a13 .q13-n span { color: #8A6A1E; }
html[data-dir="a"] .a13 .q13-m b { color: var(--ink6); }
html[data-dir="a"] .a13 .q13-m span { color: #5D6A61; }
html[data-dir="a"] .a13 .q13-mo { background: transparent; border-color: #8A6A1E; color: #6E5416; }
html[data-dir="a"] .a13 .q13 em, html[data-dir="a"] .a13 em.tnum { color: #3F5212; }
/* the lead's card */
html[data-dir="a"] .a13 .q13-hub { padding: calc(var(--u) * 1) calc(var(--u) * 1.1) calc(var(--u) * 1.1); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; color: var(--ink6); box-shadow: var(--card-shadow); rotate: -1.2deg; }
html[data-dir="a"] .a13 .q13-hub .q13-mo.is-hub { background: radial-gradient(circle at 36% 30%, #F6E2A6 0%, #C9A24E 45%, #7D5E1C 100%); border: 0; box-shadow: 0 calc(var(--u) * .45) calc(var(--u) * .7) rgba(0, 0, 0, .35); }
html[data-dir="a"] .a13 .q13-hub .q13-hic { stroke: #2A1E08; }
html[data-dir="a"] .a13 .q13-ring circle { stroke: #8A6A1E; }
html[data-dir="a"] .a13 .q13-tt { color: var(--ink6); background: var(--lime) !important; }
html[data-dir="a"] .a13 .q13-hub b { color: var(--ink6); }
html[data-dir="a"] .a13 .q13-hub span { color: #4F5D53; }
html[data-dir="a"] .a13 .q13-hub em { color: #3F5212; }

/* ---------- 14 · the closing lines at full size, the box closed on its plinth, the QR as a seal ---------- */
html[data-dir="a"] .a14 .v6-spot { background: radial-gradient(28% 50% at 72% 44%, rgba(255, 236, 196, .18), rgba(255, 236, 196, .04) 60%, transparent 78%); }
html[data-dir="a"] .a14 .cn14-eye { top: calc(var(--u) * 7.6); font: 600 var(--fs-cap)/1 var(--font-ui); letter-spacing: .2em; color: var(--brass-lt); padding: .62em 1em .55em; border: 1px solid rgba(194, 160, 80, .5); background: rgba(194, 160, 80, .07); border-radius: 2px; }
html[data-dir="a"] .a14 .cn14-s { top: calc(var(--u) * 12.4); width: calc(var(--u) * 48); gap: calc(var(--u) * 1.4); }
html[data-dir="a"] .a14 .cn14-s li { font-size: calc(var(--u) * 3.9); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; color: var(--paper); }
html[data-dir="a"] .a14 .cn14-s li em { color: var(--lime); }
html[data-dir="a"] .a14 .cn14-thx { top: calc(var(--u) * 42.4); color: var(--sand); }
html[data-dir="a"] .a14 .cn14-thx span { color: var(--paper); }
html[data-dir="a"] .a14 .cn14-qr { left: calc(var(--u) * 33); top: calc(var(--u) * 40.6); gap: calc(var(--u) * 1.2); padding: calc(var(--u) * .8) calc(var(--u) * 1.4) calc(var(--u) * .8) calc(var(--u) * .8); background: var(--paper) var(--noise); background-size: 220px; background-blend-mode: multiply; border-radius: 1px; box-shadow: inset 0 0 0 calc(var(--u) * .2) #8A6A1E, inset 0 0 0 calc(var(--u) * .4) var(--paper), inset 0 0 0 calc(var(--u) * .55) #8A6A1E, var(--card-shadow); rotate: -2deg; }
html[data-dir="a"] .a14 .cn14-qr img { width: calc(var(--u) * 6.6); height: calc(var(--u) * 6.6); border-radius: 0; box-shadow: none; }
html[data-dir="a"] .a14 .cn14-qr b { color: var(--ink6); }
html[data-dir="a"] .a14 .cn14-qr span { color: #5C6B2A; }
html[data-dir="a"] .a14 .a14-plinth { left: calc(var(--u) * 62); top: calc(var(--u) * 38.6); width: calc(var(--u) * 28); }
html[data-dir="a"] .a14 .a14-plinth > i::after { left: 25%; }

/* ---------- kraft desk (shared): 06 uses it so it does not repeat the paper of 07 ---------- */
html[data-dir="a"] .v6.a-kraft { --kraft: #B9966A; color: var(--ink6); }
html[data-dir="a"] .v6.a-kraft .sc-bg { background: var(--kraft) !important; }
html[data-dir="a"] .v6.a-kraft .v6-felt { background: var(--mottle) center / cover; mix-blend-mode: multiply; opacity: .32; }
html[data-dir="a"] .v6.a-kraft .v6-felt::after { background: radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(60, 38, 14, .32) 100%); }
html[data-dir="a"] .v6.a-kraft .v6-grain { mix-blend-mode: multiply; opacity: .28; }
html[data-dir="a"] .v6.a-kraft .v6-spot { background: radial-gradient(60% 52% at 40% 42%, rgba(255, 246, 226, .3), transparent 72%); }
html[data-dir="a"] .v6.a-kraft .cn-h1 { color: var(--ink6); }
html[data-dir="a"] .v6.a-kraft .cn-h1 em { color: #4A3410; }
html[data-dir="a"] .v6.a-kraft .sc-src { color: rgba(19, 39, 29, .62); }
html[data-dir="a"] .a6.a-kraft .q6-w, html[data-dir="a"] .a6.a-kraft .q6-sum, html[data-dir="a"] .a6.a-kraft .q6-eq, html[data-dir="a"] .a6.a-kraft .q6-ar small { color: rgba(19, 39, 29, .82); }
html[data-dir="a"] .a6.a-kraft .q6-ar span { color: #4A3410; }