/* A local illustration of schema-enforced maker/checker rules. */
.database-demo{--constraint-state:#91f1cd;margin:30px 0 32px;border:1px solid #85e6d43d;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,#153a4666,#071a2be6);box-shadow:0 25px 65px #0003}
.database-scene{position:relative;perspective:1000px;isolation:isolate;padding:35px 12px 25px;background:radial-gradient(ellipse at 50% 50%,#3679671c,transparent 65%);color:#a2f5e2}
.database-readout{position:absolute;left:6%;top:6%;font:9px/1.6 Plex,monospace;letter-spacing:.12em;text-transform:uppercase;color:#8fc7cb;z-index:2}
.database-world{transform:rotateX(var(--database-tilt-x,0deg)) rotateY(var(--database-tilt-y,0deg));transition:transform .5s ease-out;transform-style:preserve-3d;pointer-events:none}
.database-world>svg{display:block;width:100%;height:auto;overflow:visible}
.database-ground{fill:none;stroke:#90eddb;stroke-opacity:.15;stroke-width:1}
.database-glass{fill:url(#databaseGlass);stroke:#9dffe9;stroke-width:1.3;stroke-opacity:.65}
.database-top{fill:#8bf8e92d;stroke:#aaffec;stroke-width:1.3;stroke-opacity:.85}
.database-seam{fill:none;stroke:#8bffe7;stroke-width:1.6;stroke-opacity:.6;filter:drop-shadow(0 0 5px #8bffe75c)}
.database-engraving{fill:none;stroke:#9ee9d6;stroke-width:2.1;stroke-opacity:.44}
.database-light{fill:var(--constraint-state);filter:drop-shadow(0 0 5px var(--constraint-state))}
.database-layer{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 13px 14px #0003)}
.database-connections{fill:none;stroke-width:1.7;stroke-dasharray:5 8;filter:drop-shadow(0 0 5px #8bffe738)}
.database-inbound{stroke:#8ef3e1;stroke-opacity:.75}
.database-review-path{stroke:#e5bf7c;stroke-opacity:.75}
.database-release-path{stroke:var(--constraint-state);stroke-opacity:.85}
.database-person-halo{fill:none;stroke:#92f6df;stroke-opacity:.5;stroke-width:1.2;stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center}
.database-person-core{fill:#99eeda12;stroke:#9bf8e2;stroke-opacity:.6;stroke-width:1.3}
.database-person-line{fill:none;stroke:#9bf8e2;stroke-width:1.4;stroke-opacity:.75}
.database-paper{fill:#8bf8e910;stroke:#a7eae3;stroke-opacity:.65;stroke-width:1.3;stroke-linejoin:round}
.database-paper-edge{fill:#8bf8e91b;stroke:#a7eae3;stroke-opacity:.4;stroke-width:1.2;stroke-linejoin:round}
.database-paper-line{fill:none;stroke:#a7eae3;stroke-opacity:.5;stroke-width:1.5}
.database-release-record{transform:translateY(40px)}
.database-draft{transform-box:fill-box;transform-origin:center}
.database-approval{fill:#183332;stroke:#e5bf7c;stroke-width:1.6;filter:drop-shadow(0 0 7px #e5bf7c40)}
.database-check{fill:none;stroke:#f4d395;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.database-lock{fill:#163632;stroke:#b9ffe7;stroke-width:1.8;filter:drop-shadow(0 0 10px #88f9d954)}
.database-rejection{fill:#372821;stroke:#ffba98;stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .3s}
.database-audit{fill:#97f6df05;stroke:#97f6df;stroke-opacity:.38;stroke-width:1}
.database-maker-label,.database-checker-label{position:absolute;top:58%;font:11px/1.6 Plex,monospace;color:#a3c9ce;text-align:center;z-index:2}
.database-maker-label{left:7%;width:21%}
.database-checker-label{right:2.5%;width:29%;white-space:nowrap}
.database-core-label{position:absolute;top:70%;left:34%;right:34%;text-align:center;z-index:2;pointer-events:none}
.database-core-label strong{display:block;font:500 18px/1.4 Archivo,sans-serif;letter-spacing:-.02em;color:#c2ffed}
.database-core-label>span{display:block;font:8px/1.6 Plex,monospace;letter-spacing:.05em;color:#8ec9cd}
.database-demo figcaption{padding:23px 26px 12px;border-top:1px solid #94e8da22;display:flex;flex-direction:column;gap:8px}
.database-demo figcaption strong{font-size:19px;font-weight:500;line-height:1.4}
.database-demo figcaption>span{font-size:13px;line-height:1.7;color:var(--muted);max-width:60ch}
.database-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:13px 26px 18px}
.database-cases button{padding:12px 10px;min-height:45px;background:#143446;border:1px solid #8fd4d442;border-radius:7px;color:#afccd5;font-size:13px;line-height:1.4;transition:border-color .2s,background .2s}
.database-cases button:hover{border-color:#b8ffeca1}
.database-cases button[aria-pressed="true"]{border-color:#91f1cda6;color:#c0ffec;background:#24574e66;box-shadow:inset 0 0 18px #a5ffda09}
.database-result{display:flex;gap:13px;margin:0 26px 23px;padding:16px 18px;border-left:2px solid var(--constraint-state);background:#80f4cd08;border-radius:0 6px 6px 0;min-height:92px;align-items:flex-start}
.database-result-light{width:6px;height:6px;border-radius:50%;background:var(--constraint-state);box-shadow:0 0 10px var(--constraint-state);flex-shrink:0;margin-top:9px}
.database-result strong{font-size:15px;line-height:1.5;font-weight:500;color:var(--constraint-state);display:block;margin-bottom:4px}
.database-result div>span{display:block;font-size:13px;line-height:1.7;color:#aecbd2}
.database-rules{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0;padding:17px 26px 21px;border-top:1px solid #94e8da22;list-style:none;color:#97bdc8;font-size:11px;line-height:1.6}
.database-rules li{display:flex;align-items:center;gap:8px}
.database-rules li:before{content:'';width:4px;height:4px;border-radius:50%;background:#83dac7;flex-shrink:0}
.database-demo[data-result="blocked"]{--constraint-state:#ffbf9c}
.database-demo[data-result="blocked"] .database-release-path{stroke-dasharray:2 6;stroke-opacity:.25;animation:none}
.database-demo[data-result="blocked"] .database-release-record{opacity:.16}
.database-demo[data-result="blocked"] .database-rejection{opacity:1}
.database-demo[data-example="self"] .database-checker .database-person-halo{stroke:#ffbf9c}
.database-demo[data-example="self"] .database-approval{stroke:#ffbf9c}
.database-demo[data-example="self"] .database-checker .database-check,.database-demo[data-example="uncleared"] .database-checker .database-check{opacity:0}
.database-demo[data-example="uncleared"] .database-review-path{stroke-opacity:.15;animation:none}
.database-demo[data-example="uncleared"] .database-approval{opacity:.22}
.database-evidence .system-screen{transform:none}
.database-evidence .system-screen img{width:100%;height:auto;max-height:600px;object-fit:contain;border-radius:5px}
body:has(.database-demo) .guide-trigger{position:static;display:flex;width:max-content;max-width:90%;margin:24px auto}
@media(prefers-reduced-motion:no-preference){.database-layer{animation:database-float 9s ease-in-out infinite;animation-delay:var(--layer-delay)}.database-draft{animation:database-float 9s ease-in-out infinite;animation-delay:-5s}.database-connections path{animation:database-transmission 10s linear infinite}.database-person-halo{animation:database-review 28s linear infinite}.database-light{animation:database-status-glow 5s ease-in-out infinite}}
.database-scene.is-offscreen *{animation-play-state:paused!important}
@keyframes database-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes database-transmission{to{stroke-dashoffset:-156}}
@keyframes database-review{to{transform:rotate(360deg)}}
@keyframes database-status-glow{0%,100%{opacity:.5}50%{opacity:1}}
@media(max-width:780px){.database-demo figcaption{padding:23px 22px 12px}.database-cases{margin-left:22px;margin-right:22px}.database-result{margin-left:22px;margin-right:22px}.database-rules{padding-left:22px;padding-right:22px}}
@media(max-width:480px){.database-scene{padding:35px 2px 30px}.database-readout{font-size:7px;top:7%}.database-maker-label,.database-checker-label{font-size:8px;top:58%}.database-core-label{top:65%}.database-core-label strong{font-size:13px}.database-core-label>span{font-size:7px}.database-demo figcaption{padding:19px 17px 10px}.database-demo figcaption strong{font-size:17px}.database-demo figcaption>span{font-size:12px}.database-cases{gap:7px;margin:12px 17px 18px}.database-cases button{font-size:11px;padding:11px 6px;min-height:52px}.database-result{margin:0 17px 19px;padding:13px 12px;gap:10px}.database-result strong{font-size:14px}.database-result div>span{font-size:12px}.database-rules{font-size:10px;padding:16px 17px 19px;gap:9px 15px}.database-rules li{gap:7px}}
@media(prefers-reduced-motion:reduce){.database-world,.database-cases button,.database-rejection{transition:none}}
