/* Tacit · "Tacit builds your twin" v2. Dark-first: drawn for section 01's pine, frameless. Scoped to .tw-fig / .tw-svg.
   Add .light to .tw-fig for the cream version (v1's colours). */
.tw-fig{position:relative;aspect-ratio:640/390;container-type:inline-size;isolation:isolate}
/* the faint isometric grid, behind the twin only, fading out around it */
.tw-fig::before{content:"";position:absolute;z-index:-1;left:-16%;right:-16%;top:-24%;bottom:-6%;pointer-events:none;background:repeating-linear-gradient(26.57deg,rgba(241,239,228,.075) 0 .6px,transparent .6px 14px),repeating-linear-gradient(-26.57deg,rgba(241,239,228,.075) 0 .6px,transparent .6px 14px);-webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent);mask-image:radial-gradient(closest-side,#000 52%,transparent)}
.tw-svg{display:block;width:100%;height:100%;overflow:visible}
.tw-svg .tp{fill:#1f3324}.tw-svg .sl{fill:#18291c}.tw-svg .sr{fill:#132418}
.tw-svg .tp,.tw-svg .sl,.tw-svg .sr,.tw-svg .ln,.tw-svg .bx{stroke:#d9ddd1;stroke-width:1;stroke-linejoin:round}
.tw-svg .ln{fill:none}.tw-svg .soft{stroke-opacity:.45}
.tw-svg .bx{fill:#1a2c1e}
.tw-svg .dot{fill:#1a2c1e;stroke:#d9ddd1;stroke-width:1}
.tw-svg .t{font:500 12.5px/1 "JetBrains Mono",monospace;letter-spacing:.1em;fill:#f1efe4;text-transform:uppercase}
.tw-svg .t2{font:400 12.5px/1 "JetBrains Mono",monospace;fill:#f1efe4}
.tw-svg .tc{font:600 8px/1 "JetBrains Mono",monospace;letter-spacing:.04em;fill:#f1efe4}
.tw-svg .mute{fill:#8fa08d}
.tw-svg .rl{font-size:9.5px}
.tw-svg .tm{font-size:9px;letter-spacing:.08em}
.tw-svg .rn{font-size:11.5px}
.tw-svg .ol{font-size:10px;paint-order:stroke;stroke:#1f3324;stroke-width:3px;stroke-linejoin:round}
/* tile names: flat on each tile's front band, in the drawing's perspective, in the twin's blue (lifted for pine) */
.tw-svg .tw-nm{font:600 13px/1 "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;fill:#8593e3;stroke:none}
.tw-svg .tw-band{stroke-opacity:.22}
.tw-svg .ac{fill:#de6a4b}.tw-svg .acs{stroke:#de6a4b;fill:none;stroke-width:1.4}
.tw-svg .bl{fill:#8593e3}.tw-svg .bls{stroke:#8593e3;fill:none;stroke-width:1.4}
.tw-svg .trail{stroke-opacity:.4}
/* phones: object labels and roles drop out; tile names and first names stay (7 px and up at 360 px) */
@container (max-width:460px){.tw-svg .ol,.tw-svg .rl,.tw-svg .tm{display:none}.tw-svg .rn{font-size:12.5px}}
/* light (cream) version */
.tw-fig.light::before{background:repeating-linear-gradient(26.57deg,rgba(24,49,30,.07) 0 .6px,transparent .6px 14px),repeating-linear-gradient(-26.57deg,rgba(24,49,30,.07) 0 .6px,transparent .6px 14px)}
.tw-fig.light .tp{fill:#fffdf8}.tw-fig.light .sl{fill:#efe9dc}.tw-fig.light .sr{fill:#e4ddcc}
.tw-fig.light .tp,.tw-fig.light .sl,.tw-fig.light .sr,.tw-fig.light .ln,.tw-fig.light .bx,.tw-fig.light .dot{stroke:#18311e}
.tw-fig.light .bx,.tw-fig.light .dot{fill:#fffdf8}
.tw-fig.light .t,.tw-fig.light .t2,.tw-fig.light .tc{fill:#18311e}
.tw-fig.light .mute{fill:#6b7567}.tw-fig.light .ol{stroke:#fffdf8}
.tw-fig.light .tw-nm,.tw-fig.light .bl{fill:#5B6CC4}.tw-fig.light .bls{stroke:#5B6CC4}