/* AIOS Pro — plate treatments (overlay layer). Loaded AFTER site.css. Changes nothing unless carries a treatment class. Same SVG geometry in every case — only ink, weight and ground differ. (no class) the current plates, untouched .pl-etched four separated ink tiers; texture recedes, subject advances .pl-tinted figure/ground — plate gets a ground so white objects read as objects To roll back: remove the to this file. To ship one: put the class on and fold the rules into site.css. */ /* ══════════════════════════════════════════════════════════════════ A — ETCHED The diagnosis: everything sat in one narrow lightness band. This pulls the four layers apart. Named objects and their labels move toward ink; the field texture moves further away from it; iris is spent at real strength on the few marks that carry meaning. ══════════════════════════════════════════════════════════════════ */ /* tier 1 — the subject: what the figure is about */ html.pl-etched .pl-lbl{font-size:15.5px;font-weight:400;fill:#211F27} html.pl-etched .pl-quote{font-size:21.5px;fill:#131118} html.pl-etched .pl-stage{font-size:19.5px;fill:#18161D} html.pl-etched .pl-region{font-size:16.5px;fill:#2A2833} /* tier 2 — supporting voice: was #A6A3B2, effectively invisible at render scale */ html.pl-etched .pl-sm{fill:#7D7A89} html.pl-etched .pl-out{fill:#514E5C} html.pl-etched .pl-note{font-size:14px;fill:#4C1D95} /* tier 3 — structure: containers and axes get a real edge */ html.pl-etched .pl-soft{stroke:#C7C5D1;stroke-width:1.15;fill:#FFFFFF} html.pl-etched .pl-line{stroke:#B7B5C2;stroke-width:1.1} html.pl-etched .pl-spine{stroke:#18161D;stroke-width:1.4;opacity:.74} /* tier 4 — texture: pushed lighter, deliberately. this is what buys the contrast above */ html.pl-etched .pl-texture{stroke:#E6E7EC} html.pl-etched .pl-grid{stroke:#EEEFF3} /* accent — fewer places, full strength */ html.pl-etched .pl-iris{stroke-width:1.15;opacity:.8} html.pl-etched .pl-irisd{opacity:.6;stroke-width:1.1} html.pl-etched .pl-dash{opacity:.64;stroke-width:1.15} html.pl-etched .pl-fill{fill:rgba(109,40,217,.1);stroke:rgba(109,40,217,.64)} html.pl-etched .pl-pass{fill:rgba(109,40,217,.11);stroke:rgba(109,40,217,.64)} html.pl-etched .pl-bar-dumb{stroke-opacity:.3} html.pl-etched .pl-bar-smart{stroke-opacity:.82} html.pl-etched .pl-reply{stroke-opacity:.85;stroke-width:4} /* the plate itself: a little more presence, so the figure sits on something */ html.pl-etched .plate{border-color:#DEDFE6;box-shadow:0 1px 2px rgba(24,22,29,.04),0 10px 28px rgba(24,22,29,.06)} html.pl-etched .plate-legend span{color:#7D7A89} html.pl-etched .plate-legend b{color:#3B3945} /* the non-plate figures, same logic */ html.pl-etched .fig-arrow{stroke-opacity:.42} html.pl-etched .fig-ring{stroke:#CFCBD9;stroke-width:1.3} html.pl-etched .fig-loop{stroke:#CFCBD9;stroke-width:1.3} html.pl-etched .fig-split{stroke:#E4E5EA} html.pl-etched .fig-panel-sub,html.pl-etched .fig-row-lbl{fill:#7D7A89} html.pl-etched .fig-note{fill:#6E6B7A} html.pl-etched .fig-block-lbl{fill:#514E5C} html.pl-etched .fig-block-you{fill:rgba(24,22,29,.07);stroke:rgba(24,22,29,.22)} html.pl-etched .fig-block-sys{fill:rgba(109,40,217,.08);stroke:rgba(109,40,217,.48)} html.pl-etched .fig-live{stroke-opacity:.68} html.pl-etched .fig-live-long{stroke-opacity:.72} html.pl-etched .fig-rel{stroke-opacity:.2} html.pl-etched .fig-loop-lbl{fill:#6E6B7A} html.pl-etched .fig-wait{stroke-opacity:.5} html.pl-etched .fig-wait-lbl{fill:rgba(229,52,43,.78)} /* the architecture plates — same four tiers, applied to the sy-* / ar-* primitives */ html.pl-etched .sy-face{fill:#FFFFFF;stroke:rgba(101,52,191,.72);stroke-width:1.25} html.pl-etched .sy-side{fill:#F1EDFA;stroke:rgba(101,52,191,.52);stroke-width:1.15} html.pl-etched .sy-face-hi{fill:#AB8DE5;stroke:#4F1FA3;stroke-width:1.3} html.pl-etched .sy-side-hi{fill:#7A54CE;stroke:#4F1FA3;stroke-width:1.2} html.pl-etched .sy-guide{stroke:rgba(101,52,191,.44)} html.pl-etched .sy-lead{stroke:rgba(101,52,191,.62);stroke-width:1.15} html.pl-etched .sy-chip{stroke:rgba(101,52,191,.62);stroke-width:1.2} html.pl-etched .sy-arc{stroke:rgba(101,52,191,.7);stroke-width:1.25} html.pl-etched .sy-spine{stroke:#18161D;stroke-width:1.6} html.pl-etched .sy-grid{fill:rgba(109,40,217,.2)} html.pl-etched .sy-name{fill:#211F27} html.pl-etched .sy-det{font-size:13px;fill:#6E6B7A} html.pl-etched .sy-arclbl{font-size:14px;fill:#4C4956} html.pl-etched .sy-edge{fill:#6E6B7A} html.pl-etched .ar-box{stroke:#C7C5D1;stroke-width:1.15} html.pl-etched .ar-rule{stroke:#B7B5C2;stroke-width:1.1} html.pl-etched .ar-edge{stroke:rgba(101,52,191,.66);stroke-width:1.2} html.pl-etched .ar-fill{fill:rgba(109,40,217,.1);stroke:rgba(109,40,217,.64)} html.pl-etched .ar-gate{stroke:rgba(109,40,217,.64);stroke-width:1.2} html.pl-etched .ar-mono{fill:#3B3945} html.pl-etched .ar-dim{fill:#7D7A89} html.pl-etched .ar-h{fill:#514E5C} html.pl-etched .ar-note{font-size:15px;fill:#4C4956} html.pl-etched .ar-plot{stroke:#C7C5D1} /* ══════════════════════════════════════════════════════════════════ B — TINTED The other way out: don't add ink, add ground. The plate interior goes to a faint cool paper, so the white-filled objects become objects — lifted, edged, casting a hair of shadow. Lines can stay delicate and still read, because they now have something to read against. Type darkens to mid-ink, never to black. ══════════════════════════════════════════════════════════════════ */ html.pl-tinted .plate{background:#F7F7FA;border-color:#E4E4EC;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(24,22,29,.04),0 12px 32px rgba(24,22,29,.07)} /* objects lift off the ground */ html.pl-tinted .pl-soft{stroke:#DCDBE5;stroke-width:1;fill:#FFFFFF;filter:drop-shadow(0 1px 1.5px rgba(24,22,29,.07))} html.pl-tinted .pl-line{stroke:#C6C5D0} html.pl-tinted .pl-texture{stroke:#DDDDE5} html.pl-tinted .pl-grid{stroke:#E7E7EE} html.pl-tinted .pl-spine{stroke:#18161D;stroke-width:1.3;opacity:.6} /* type: mid-ink, one clear step between levels */ html.pl-tinted .pl-lbl{font-size:15.5px;fill:#2B2933} html.pl-tinted .pl-sm{fill:#75727F} html.pl-tinted .pl-out{fill:#57545F} html.pl-tinted .pl-stage{fill:#211F27} html.pl-tinted .pl-region{fill:#33313A} html.pl-tinted .pl-quote{fill:#18161D} html.pl-tinted .pl-note{fill:#4C1D95} html.pl-tinted .pl-iris{opacity:.7} html.pl-tinted .pl-irisd{opacity:.54} html.pl-tinted .pl-dash{opacity:.56} html.pl-tinted .pl-fill{fill:rgba(109,40,217,.09);stroke:rgba(109,40,217,.55)} html.pl-tinted .pl-pass{fill:rgba(109,40,217,.1);stroke:rgba(109,40,217,.55)} html.pl-tinted .pl-bar-dumb{stroke-opacity:.26} html.pl-tinted .pl-bar-smart{stroke-opacity:.72} html.pl-tinted .pl-reply{stroke-opacity:.78} html.pl-tinted .plate-legend{border-top-color:#E4E4EC} html.pl-tinted .plate-legend span{color:#75727F} html.pl-tinted .plate-legend b{color:#3B3945} html.pl-tinted .plate-rule i{background:#D5D4DE} html.pl-tinted .fig-arrow{stroke-opacity:.36} html.pl-tinted .fig-ring{stroke:#D5D1DE} html.pl-tinted .fig-loop{stroke:#D5D1DE} html.pl-tinted .fig-panel-sub,html.pl-tinted .fig-row-lbl{fill:#8A8794} html.pl-tinted .fig-note{fill:#75727F} html.pl-tinted .fig-block-lbl{fill:#57545F} html.pl-tinted .fig-rel{stroke-opacity:.17} /* the architecture plates — ground instead of ink; the plates become objects */ html.pl-tinted .sy-face{fill:#FFFFFF;stroke:rgba(101,52,191,.5);filter:drop-shadow(0 1px 1.5px rgba(24,22,29,.08))} html.pl-tinted .sy-side{fill:#EFEBF9;stroke:rgba(101,52,191,.4)} html.pl-tinted .sy-face-hi{fill:#B79BEA;stroke:#5B2AB0} html.pl-tinted .sy-side-hi{fill:#8A64D6;stroke:#5B2AB0} html.pl-tinted .sy-guide{stroke:rgba(101,52,191,.34)} html.pl-tinted .sy-lead{stroke:rgba(101,52,191,.5)} html.pl-tinted .sy-chip{fill:#FFFFFF;stroke:rgba(101,52,191,.5);filter:drop-shadow(0 1px 1.5px rgba(24,22,29,.07))} html.pl-tinted .sy-arc{stroke:rgba(101,52,191,.6)} html.pl-tinted .sy-spine{stroke:#18161D;stroke-width:1.4;opacity:.7} html.pl-tinted .sy-grid{fill:rgba(109,40,217,.16)} html.pl-tinted .sy-name{fill:#2B2933} html.pl-tinted .sy-det{fill:#75727F} html.pl-tinted .sy-arclbl{fill:#57545F} html.pl-tinted .sy-edge{fill:#75727F} html.pl-tinted .ar-box{stroke:#DCDBE5;fill:#FFFFFF;filter:drop-shadow(0 1px 1.5px rgba(24,22,29,.07))} html.pl-tinted .ar-rule{stroke:#C6C5D0} html.pl-tinted .ar-edge{stroke:rgba(101,52,191,.56)} html.pl-tinted .ar-fill{fill:rgba(109,40,217,.09);stroke:rgba(109,40,217,.55)} html.pl-tinted .ar-gate{fill:#FFFFFF;stroke:rgba(109,40,217,.55)} html.pl-tinted .ar-mono{fill:#3B3945} html.pl-tinted .ar-dim{fill:#8A8794} html.pl-tinted .ar-h{fill:#57545F} html.pl-tinted .ar-note{fill:#57545F} html.pl-tinted .ar-plot{stroke:#D5D4DE} /* ── the temporary A/B control (delete plates-ab.js and this block to remove) ── */ [data-plate-ab]{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #E0E1E7;box-shadow:0 6px 22px rgba(24,22,29,.12);font-family:'Outfit',sans-serif} [data-plate-ab] button{appearance:none;border:0;background:none;font:inherit;font-size:12.5px;font-weight:300;color:#6E6B7A;padding:6px 13px;border-radius:999px;cursor:pointer;transition:.16s cubic-bezier(.2,.7,.25,1);white-space:nowrap} [data-plate-ab] button:hover{color:#18161D} [data-plate-ab] button[aria-pressed="true"]{background:#18161D;color:#fff;font-weight:400} @media print{[data-plate-ab]{display:none}}