/* s11 — EUDR countdown, reverse trace, geometry trap */
.s11 { --pw: 1000px; --ph: 700px; }
.slide .src.s11-src { bottom: 62px; max-width: 1680px; }
.s11-h2 { font-size: 62px; }
.s11-demo { position: absolute; right: 0; top: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.s11.st1 .s11-demo { opacity: 1; }

/* compact countdown chip (steps 1+) */
.s11-chip { position: absolute; right: 0; top: 52px; display: flex; align-items: center; gap: 14px; padding: 10px 20px 10px 16px; border: 1px solid rgba(242, 193, 78, .45); border-radius: 16px; background: rgba(40, 32, 8, .5); color: var(--ink2); font-size: 18px; line-height: 1.2; opacity: 0; transform: translateY(-10px); transition: opacity .6s var(--ease-out) .3s, transform .8s var(--ease-out) .3s; }
.s11-chip b { color: var(--gold); font-weight: 600; }
.s11-chip-n { font: 800 50px/1 var(--font); color: var(--gold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.s11.st1 .s11-chip { opacity: 1; transform: none; }

/* ── Hero (step 0) ───────────────────────────────────────── */
.s11-hero { position: absolute; left: 0; top: 150px; width: 1680px; height: 740px; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s; }
.s11.st1 .s11-hero { opacity: 0; transform: translateY(-40px) scale(.97); filter: blur(10px); pointer-events: none; }
.s11-count { position: absolute; left: 0; top: 0; width: 860px; }
.s11-cl { font: 600 22px/1 var(--mono); letter-spacing: .3em; color: var(--ink3); margin: 10px 0 0 10px; }
.s11-big { display: flex; align-items: baseline; gap: 22px; margin-top: -6px; }
.s11-bn { font: 800 330px/0.9 var(--font); letter-spacing: -.06em; color: var(--gold); font-variant-numeric: tabular-nums; text-shadow: 0 0 80px rgba(242, 193, 78, .28); }
.s11-bu { font: 700 72px/1 var(--font); color: var(--ink); letter-spacing: -.02em; }
.s11-cs { font-size: 30px; color: var(--ink2); max-width: 820px; margin-top: 4px; }
.s11-cs b { color: var(--ink); }
.s11-today { font-size: 18px; color: var(--ink3); margin-top: 14px; letter-spacing: .02em; }
.s11-today span { color: var(--ink2); }

.s11-rules { position: absolute; left: 920px; top: 26px; width: 760px; display: flex; flex-direction: column; gap: 16px; }
.s11-rule { display: flex; gap: 20px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; }
.s11-rule i { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); font: 700 22px/43px var(--mono); text-align: center; font-style: normal; }
.s11-rule b { display: block; font-size: 28px; font-weight: 600; line-height: 1.2; }
.s11-rule span { display: block; font-size: 20px; color: var(--ink3); margin-top: 6px; }

.s11-tl { position: absolute; left: 0; top: 520px; width: 1680px; height: 200px; }
.s11-track { position: absolute; left: 40px; right: 40px; top: 40px; height: 4px; background: linear-gradient(90deg, var(--line2) 0 390px, transparent 390px 450px, var(--line2) 450px); border-radius: 2px; }
.s11-brk { position: absolute; left: 400px; top: 18px; font: 600 34px var(--mono); color: var(--ink3); }
.s11-fill { position: absolute; top: 36px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--gold), #ffdf8a); box-shadow: 0 0 24px rgba(242, 193, 78, .55); }
.s11-span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 18px; color: var(--gold); white-space: nowrap; }
.s11-node { position: absolute; top: 30px; width: 270px; transform: translateX(-12px); }
.s11-node i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink2); }
.s11-node b { display: block; font: 700 26px/1 var(--mono); margin-top: 18px; letter-spacing: -.02em; }
.s11-node span { display: block; font-size: 19px; color: var(--ink3); margin-top: 8px; line-height: 1.3; }
.s11-node.n-cut i { border-color: var(--green); } .s11-node.n-cut b { color: var(--green); }
.s11-node.n-now i { border-color: var(--ink); background: var(--ink); width: 16px; height: 16px; margin: 4px; }
.s11-node.n-now { top: 70px; } .s11-node.n-now i { display: none; }
.s11-node.n-now b { font-size: 20px; color: var(--ink2); margin-top: 0; } .s11-node.n-now span { margin-top: 4px; }
.s11-node.n-now::before { content: ''; position: absolute; left: 11px; top: -30px; width: 2px; height: 26px; background: var(--ink2); }
.s11-node.n-app i { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 8px rgba(242, 193, 78, .18); }
.s11-node.n-app b { color: var(--gold); font-size: 34px; }
.s11-node.n-app { width: 380px; }
.s11-node.n-sm i { border-color: var(--amber); }
.s11-node.n-sm b { color: var(--amber); }

/* ── Map panel (steps 1+) ─────────────────────────────────── */
.s11-panel { position: absolute; left: 0; top: 150px; width: var(--pw); height: var(--ph); border-radius: 22px; overflow: hidden; border: 1px solid var(--line2); background: #06140e; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .8s var(--ease-out) .25s, transform 1s var(--ease-out) .25s; }
.s11.st1 .s11-panel { opacity: 1; transform: none; }
.s11-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.s11-plabel { position: absolute; left: 22px; top: 18px; font-size: 16px; color: var(--ink2); background: rgba(4, 12, 9, .78); padding: 8px 14px; border-radius: 10px; letter-spacing: .03em; }
.s11-ground { fill: #0a1d15; }
.s11-ct { fill: none; stroke: rgba(170, 230, 200, .07); stroke-width: 1.2; }
.s11-river { fill: none; stroke: rgba(76, 201, 240, .35); stroke-width: 7; stroke-linecap: round; }
.s11-scen { fill: rgba(170, 230, 200, .035); stroke: rgba(170, 230, 200, .12); stroke-width: 1; stroke-dasharray: 4 4; }
.s11-c08p { stroke: rgba(62, 224, 143, .5); stroke-width: 1.4; }
.s11-c08t { font: 700 11px var(--font); fill: var(--green); text-anchor: middle; }
.s11-c08s { font: 400 8px var(--font); fill: var(--ink3); text-anchor: middle; }
.s11-trace { fill: none; stroke: var(--cyan); stroke-width: 2; opacity: .8; }
.s11-lp { fill: rgba(184, 242, 107, .1); stroke: rgba(184, 242, 107, .55); stroke-width: 2; transition: fill .5s, stroke .5s; }
.s11-lp.ok { fill: rgba(62, 224, 143, .2); stroke: var(--green); }
.s11-lp.bad { fill: rgba(255, 176, 32, .2); stroke: var(--amber); }
.s11-lot.sel .s11-lp { stroke-width: 4; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }
.s11-lid { font: 700 16px var(--mono); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: rgba(4, 12, 9, .8); stroke-width: 4px; }
.s11-badge circle { stroke-width: 2.5; }
.s11-badge.ok circle { fill: #0b2a1b; stroke: var(--green); } .s11-badge.ok text { fill: var(--green); }
.s11-badge.bad circle { fill: #3a2606; stroke: var(--amber); } .s11-badge.bad text { fill: var(--amber); }
.s11-badge text { font: 800 19px var(--font); text-anchor: middle; }
.s11-cbody { fill: #7a2c1c; } .s11-crib { stroke: rgba(0, 0, 0, .28); stroke-width: 5; } .s11-cedge { fill: none; stroke: #f06e50; stroke-width: 2; }
.s11-ct1 { font: 700 17px var(--mono); fill: var(--ink); text-anchor: middle; } .s11-ct2 { font: 400 15px var(--font); fill: var(--ink3); text-anchor: middle; }

/* geometry trap (step 2) — SVG units are zoomed ~2.08× */
.s11-clear { stroke: none; } .s11-clear.in { fill: rgba(62, 224, 143, .22); }
.s11-dbt { font: 500 7.5px var(--mono); fill: var(--ink2); letter-spacing: .02em; }
.s11-clear-ln { fill: none; stroke: var(--cyan); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(76, 201, 240, .8)); }
.s11-c07ln { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; }
.s11-pin-ring { fill: rgba(242, 193, 78, .14); stroke: var(--gold); stroke-width: 1.2; }
.s11-pin-dot { fill: var(--gold); } .s11-pin-stem { stroke: var(--gold); stroke-width: 1.5; }
.s11-pinlbl rect, .s11-satlbl rect { fill: rgba(4, 12, 9, .88); stroke: rgba(242, 193, 78, .6); stroke-width: .8; }
.s11-satlbl rect { stroke: rgba(76, 201, 240, .7); }
.s11-pinlbl text, .s11-satlbl text { font: 700 10.5px var(--mono); fill: var(--gold); letter-spacing: .05em; }
.s11-satlbl text { fill: var(--cyan); }
.s11-pinlbl text.sub, .s11-satlbl text.sub { font: 400 10px var(--font); fill: var(--ink2); letter-spacing: 0; }
.s11-split text { font: 800 15px var(--font); text-anchor: middle; paint-order: stroke; stroke: rgba(4, 12, 9, .85); stroke-width: 3px; }
.s11-split .in, .s11-split .ins { fill: var(--ink); } .s11-split .out, .s11-split .outs { fill: var(--amber); } .s11-split .in { fill: var(--green); }
.s11-split .ins, .s11-split .outs { font: 600 9px var(--font); }
.s11-trapnote { position: absolute; left: 1036px; width: 644px; top: 488px; opacity: 0; transition: opacity .7s var(--ease-out) 3.6s; z-index: 2; background: rgba(4, 12, 9, .9); border: 1px solid var(--line2); border-left: 4px solid var(--amber); border-radius: 12px; padding: 14px 20px; font-size: 22px; line-height: 1.35; color: var(--ink); }
.s11-trapnote b { display: block; font: 600 15px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 4px; }

/* ── Right column ───────────────────────────────────────── */
.s11-side { position: absolute; left: 1036px; top: 150px; width: 644px; height: 700px; display: flex; flex-direction: column; gap: 16px; }
.s11-side .card { flex: none; padding: 20px 24px; border-radius: 18px; opacity: 0; transform: translateX(50px); filter: blur(8px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s, max-height .8s var(--ease-out), padding .6s; }
.s11.st1 .s11-c1, .s11.st3 .s11-c2, .s11.st4 .s11-c3 { opacity: 1; transform: none; filter: none; }
.s11.st1 .s11-c1 { transition-delay: .5s; } .s11.st3 .s11-c2 { transition-delay: .25s; } .s11.st4 .s11-c3 { transition-delay: .15s; }
.s11-c1 { max-height: 360px; overflow: hidden; }
.s11-ch, .s11-row { display: grid; grid-template-columns: 1fr 92px 196px; white-space: nowrap; gap: 10px; align-items: center; }
.s11-ch { font: 600 14px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.s11-row { font-size: 21px; padding: 9px 8px; border-bottom: 1px solid rgba(170, 230, 200, .07); color: var(--ink2); cursor: pointer; border-radius: 8px; }
.s11-row b { font-family: var(--mono); color: var(--ink); font-weight: 700; margin-right: 6px; }
.s11-row.sel { background: rgba(255, 255, 255, .06); }
.s11-row .g { font: 500 16px var(--mono); color: var(--ink3); } .s11-row .g.pt { color: var(--gold); }
.s11-row .v { font-size: 19px; font-weight: 600; } .s11-row .v.ok { color: var(--green); } .s11-row .v.bad { color: var(--amber); }
.s11-sum { display: none; font-size: 21px; color: var(--ink2); }
.s11-sum b { color: var(--ink); }
.s11-c1.collapsed { max-height: 64px; padding: 16px 24px; }
.s11-c1.collapsed .s11-ch, .s11-c1.collapsed .s11-row { display: none; }
.s11-c1.collapsed .s11-sum { display: block; }

.s11-flow { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: stretch; gap: 8px; }
.s11-fn { border-radius: 14px; padding: 12px 16px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); }
.s11-fn small { display: block; font: 600 14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.s11-fn b { display: block; font-size: 21px; margin: 4px 0 2px; line-height: 1.2; }
.s11-fn span { display: block; font-size: 17px; color: var(--ink3); line-height: 1.3; }
.s11-fn.eu { border-color: rgba(242, 193, 78, .55); background: rgba(242, 193, 78, .07); } .s11-fn.eu b { color: var(--gold); }
.s11-fa { align-self: center; text-align: center; font-size: 30px; color: var(--ink3); }
.s11-dd { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.s11-ddl { font-size: 20px; color: var(--ink2); margin-bottom: 8px; }
.s11-sw { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 999px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); font: 600 18px var(--mono); }
.s11-sw span { position: relative; z-index: 1; padding: 9px 12px; text-align: center; color: var(--ink3); transition: color .4s; white-space: nowrap; }
.s11-sw .o1 { color: #04130c; }
.s11-sw i { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 4px); border-radius: 999px; background: var(--green); transition: left .6s var(--ease-back), background .4s, width .6s; }
.s11-sw.on .o1 { color: var(--ink3); } .s11-sw.on .o2 { color: #1a0c00; }
.s11-sw.on i { left: calc(50% + 2px); width: calc(50% - 4px); background: var(--amber); box-shadow: 0 0 22px rgba(255, 176, 32, .6); }
.s11-dd p { margin: 10px 0 0; font-size: 19px; line-height: 1.38; color: var(--ink2); }
.s11-dd p b { color: var(--ink); }

.s11-c3h b { display: block; font-size: 23px; } .s11-c3h span { display: block; font-size: 17px; color: var(--ink3); margin-top: 2px; }
.s11-bar { display: flex; height: 26px; margin: 10px 0 10px; border-radius: 8px; overflow: hidden; gap: 2px; }
.s11-bar i { display: block; width: var(--w); transform-origin: 0 50%; }
.s11-bar i.r { min-width: 6px; }
.s11-bar .g, .s11-leg .g { background: var(--green); } .s11-bar .y, .s11-leg .y { background: var(--gold); } .s11-bar .r, .s11-leg .r { background: var(--red); }
.s11-leg { display: flex; flex-direction: column; gap: 2px; font-size: 18px; color: var(--ink2); }
.s11-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 10px; }
.s11-leg b { color: var(--ink); font-family: var(--mono); margin-right: 6px; }
.s11-leg .em { color: var(--gold); font-weight: 600; }

.s11-fly { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 24px 6px rgba(255, 176, 32, .7); z-index: 6; pointer-events: none; }
.s11-hint { position: absolute; right: 22px; bottom: 18px; opacity: 0; transition: opacity .6s; background: rgba(4, 12, 9, .78); padding: 8px 14px; border-radius: 10px; }
.s11.st2 .s11-hint { opacity: 0 !important; }
/* zoomed view: labels of the other lots would show up clipped at the panel edge */
.s11-lid { transition: opacity .4s; }
.s11.st2 .s11-lot:not([data-i="3"]) .s11-lid { opacity: 0; }
.s11.st2 .s11-trapnote { opacity: 1; } .s11.st3 .s11-trapnote { opacity: 0 !important; transition: opacity .3s; }
/* glossary chips: EUDR + cut-off on the opening screen (inside the hero, so they leave with it); DDS at step 2 */
.s11-gl0 { left: 920px; top: -142px; width: 760px; gap: 8px; }
.s11-gl0 .gl-chip { padding: 7px 12px 7px 10px; line-height: 1.28; }
.s11-ddsgl { position: absolute; left: 1036px; width: 644px; top: 662px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .7s var(--ease-out); }
.s11.st2 .s11-ddsgl { opacity: 1; pointer-events: auto; transition-delay: 4s; }
.s11.st3 .s11-ddsgl { opacity: 0 !important; pointer-events: none; transition: opacity .3s; }