/* Tacit · Stack Explorer, isometric edition — the stage's styles. Scoped: .sxi (the section) and .sxi-svg (the drawing).
   The panel keeps the site's own .sx-* rules untouched; only the stage's ground and drawing are new. */

/* the ground: the faint isometric grid on #f7f4ec, dissolving into the page (no hard panel edge) */
.sxi .sx-window{background:linear-gradient(180deg,#f5f1e7 0,rgba(245,241,231,0) 160px),linear-gradient(0deg,#f5f1e7 0,rgba(245,241,231,0) 220px),radial-gradient(70% 70% at 62% 56%,#f7f4ec 40%,#f5f1e7)}
.sxi .sx-vp{position:relative}
.sxi .sx-vp::before{content:"";position:absolute;inset:-6% -14% -6% -4%;pointer-events:none;background:repeating-linear-gradient(26.57deg,rgba(24,49,30,.075) 0 .6px,transparent .6px 14px),repeating-linear-gradient(-26.57deg,rgba(24,49,30,.075) 0 .6px,transparent .6px 14px);-webkit-mask-image:radial-gradient(58% 56% at 50% 56%,#000 35%,transparent 100%);mask-image:radial-gradient(58% 56% at 50% 56%,#000 35%,transparent 100%)}
.sxi-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.sxi-svg *{vector-effect:non-scaling-stroke}

/* drawing vocabulary — the plates of "What it holds", the twin and the tacit scale */
.sxi-svg .tp{fill:#fffdf8}.sxi-svg .sl{fill:#efe9dc}.sxi-svg .sr{fill:#e4ddcc}
.sxi-svg .tp,.sxi-svg .sl,.sxi-svg .sr,.sxi-svg .gtp,.sxi-svg .gsl,.sxi-svg .gsr{stroke:#18311e;stroke-width:1;stroke-linejoin:round}
.sxi-svg .gtp{fill:#c9dbd1;fill-opacity:.34}.sxi-svg .gsl{fill:#c9dbd1;fill-opacity:.55}.sxi-svg .gsr{fill:#c9dbd1;fill-opacity:.8}
.sxi-svg .ln{fill:none;stroke:#18311e;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.sxi-svg .soft{stroke-opacity:.42}
.sxi-svg .dsh{stroke-dasharray:3 3}
.sxi-svg .thick{stroke-width:1.6}
.sxi-svg .tr{stroke-opacity:.3}
.sxi-svg .trd{fill:#18311e;fill-opacity:.32}
.sxi-svg .arc{stroke-opacity:.72}
.sxi-svg .grid{stroke:#18311e;stroke-opacity:.11;stroke-width:.7}
.sxi-svg .etch{stroke:#18311e;stroke-opacity:.1;stroke-width:.7}
.sxi-svg .well{fill:#18311e;fill-opacity:.035;stroke:#18311e;stroke-opacity:.3;stroke-width:.8}
.sxi-svg .sxi-logo{fill:#18311e}
.sxi-svg .led{fill:#fffdf8;stroke:#18311e;stroke-width:.9}

/* the one accent: coral for what is moving or changing */
.sxi-svg .ac{fill:#de6a4b}
.sxi-svg .acl{fill:none;stroke:#de6a4b;stroke-width:1.3}
.sxi-svg .lint{fill:none;stroke:#de6a4b;stroke-width:1.4;opacity:0}
.sxi-svg .scan{fill:#de6a4b;fill-opacity:.1;stroke:#de6a4b;stroke-width:1.2;opacity:0}
.sxi-svg .care{fill:none;stroke:#de6a4b;stroke-width:1.5;stroke-linecap:round}
.sxi-svg .sheen{fill:#fffdf8;fill-opacity:.85}

/* flat marks on the app cards, the hub and the spec cards */
.sxi-svg .u-ln{fill:none;stroke:#18311e;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.sxi-svg .u-soft{fill:none;stroke:#18311e;stroke-opacity:.38;stroke-width:.8;stroke-linecap:round}
.sxi-svg .u-fill{fill:#18311e}
.sxi-svg .u-pale{fill:#efe9dc}
.sxi-svg .u-tp{fill:#fffdf8}
.sxi-svg .u-pale.u-ln,.sxi-svg .u-tp.u-ln{stroke-opacity:.7}
.sxi-svg .u-wt{fill:none;stroke:#fffdf8;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.sxi-svg text{font-family:"JetBrains Mono",ui-monospace,monospace;fill:#18311e;stroke:none}
.sxi-svg .t-lb{font-weight:700;letter-spacing:.04em}
.sxi-svg .t-gl{font-weight:600}
.sxi-svg .t-ai{font-weight:700}
.sxi-svg .t-mc{font-weight:600;letter-spacing:.06em;fill:#44503f}

/* the box: a line frame, the far edges dashed through the glass, the faintest glass fill, the T tab */
.sxi-svg .fr{fill:none;stroke:#18311e;stroke-width:1.15;stroke-linecap:round}
.sxi-svg .frb{stroke-opacity:.4;stroke-dasharray:3 3}
.sxi-svg .glass{fill:#c9dbd1;fill-opacity:.13;stroke:none}
.sxi-svg .tab{fill:#18311e;stroke:#18311e}
.sxi-svg .tab-t{fill:#f5f1e7}

/* the engineer (pine) and the client team (the twin's blue) */
.sxi-svg .eng{fill:#18311e;stroke:#18311e;stroke-width:1}
.sxi-svg .cli{fill:#dfe2f3;stroke:#5B6CC4;stroke-width:1}
.sxi-svg .cli-h{fill:#fffdf8;stroke:#5B6CC4;stroke-width:1}
.sxi-svg .badge{fill:#f5f1e7}
.sxi-svg .badge-t{fill:#18311e}
.sxi-svg .disc{fill:#d5ddd2;fill-opacity:.55;stroke:#18311e;stroke-opacity:.28;stroke-width:1}

/* what never takes the pointer: the box, the walk path, the care ring */
.sxi-svg .sxi-frame,.sxi-svg .nohit{pointer-events:none}

/* ghost slabs: a lighter, thinner plate, its contents nearly gone (--d: 0 → 1, set by the stage) */
.sxi-L{--d:0}
.sxi-L>.sxi-c{opacity:calc(1 - var(--d)*.94)}
.sxi-L>.sxi-p>*{stroke-opacity:calc(1 - var(--d)*.62);stroke-width:calc(1 - var(--d)*.45)}
.sxi-L>.sxi-p>.sl{fill:color-mix(in srgb,#efe9dc,#f7f4ec calc(var(--d)*72%));fill-opacity:calc(1 - var(--d)*.45)}
.sxi-L>.sxi-p>.sr{fill:color-mix(in srgb,#e4ddcc,#f7f4ec calc(var(--d)*66%));fill-opacity:calc(1 - var(--d)*.45)}
.sxi-L>.sxi-p>.tp{fill-opacity:calc(1 - var(--d)*.6)}
.sxi-L>.sxi-p>.gtp{fill-opacity:calc(.34 - var(--d)*.22)}