/* Djinja-C visual rules, web edition. Copyright (c) 2026 Djinja-C Limited.
   The rules: djinja-c-intelligence/knowledge/visual-rules.md. The reference is
   2DSUITE (src/index.html). Every Djinja-C app page links this file instead of
   inventing its own colours. Nothing here pulses, blinks or sweeps. */
:root{
  --bg:#03060d;--s1:#060c18;--s2:#0a1220;--s3:#0e1a2e;
  --bd:rgba(0,200,255,.10);--bhi:rgba(0,200,255,.25);
  --gr:#00ffaa;--or:#ff9a3c;--cy:#00c8ff;--ro:#ff2255;
  --gr-rgb:0,255,170;--or-rgb:255,154,60;--cy-rgb:0,200,255;
  --tx:#f0f8ff;--mu:#d6ecff;--mute:#7f9ab3;
  --plate:rgba(6,12,24,.78);
  --disp:"Orbitron","Bahnschrift","Segoe UI",system-ui,sans-serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"DM Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
}
html.light,:root[data-theme="light"]{
  --bg:#e8edf4;--s1:#dce3ec;--s2:#d0d8e4;--s3:#c4ceda;
  --bd:rgba(0,80,140,.12);--bhi:rgba(0,80,140,.25);
  --gr:#009966;--or:#cc5500;--cy:#0077bb;--ro:#cc1144;
  --gr-rgb:0,153,102;--or-rgb:204,85,0;--cy-rgb:0,119,187;
  --tx:#000;--mu:#222;--mute:#4a5d70;
  --plate:rgba(255,255,255,.78);
}
.dj *,.dj *::before,.dj *::after{box-sizing:border-box}
body.dj{margin:0;color:var(--tx);font-family:var(--sans);overflow-x:hidden;
  background:
    radial-gradient(60% 50% at 50% -5%,rgba(var(--gr-rgb),.09),transparent),
    radial-gradient(45% 40% at 92% 8%,rgba(var(--or-rgb),.07),transparent),
    radial-gradient(40% 40% at 4% 26%,rgba(var(--cy-rgb),.08),transparent),
    linear-gradient(180deg,#091424 0%,var(--bg) 100%) fixed}
html.light body.dj,:root[data-theme="light"] body.dj{background:linear-gradient(180deg,#eef3f8,var(--bg)) fixed}
body.dj::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(var(--cy-rgb),.025) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--cy-rgb),.025) 1px,transparent 1px);background-size:48px 48px}
.dj a{color:inherit;text-decoration:none}
.dj img{display:block;max-width:100%}
.dj-wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 24px}

/* top bar, like 2DSUITE's: dark glass with the brand line on top */
.dj-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;
  background:linear-gradient(180deg,rgba(12,25,40,.92),rgba(7,16,30,.86));border-bottom:1px solid rgba(var(--cy-rgb),.18);backdrop-filter:blur(14px)}
.dj-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gr) 25%,var(--or) 50%,var(--cy) 75%,transparent)}
html.light .dj-bar{background:linear-gradient(180deg,#e0e8f2,#d8e2ee)}
.dj-brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;letter-spacing:.06em;color:var(--tx)}
.dj-brand img{width:30px;height:30px}
.dj-links{display:flex;gap:22px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.dj-links a:hover{color:var(--gr)}
@media(max-width:700px){.dj-links .opt{display:none}}

/* type */
.dj-eye{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cy)}
.dj-h1{font-family:var(--disp);font-weight:900;line-height:1.05;font-size:clamp(34px,6vw,64px);letter-spacing:.02em;margin:12px 0}
.dj-h2{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.4vw,32px);margin:0 0 12px}
.dj-lead{color:var(--mu);font-size:clamp(16px,2vw,19px);line-height:1.6;max-width:700px}
.dj-gr{color:var(--gr)} .dj-or{color:var(--or)} .dj-cy{color:var(--cy)}

/* glass plate: the 2DSUITE panel */
.dj-plate{position:relative;isolation:isolate;background:var(--plate);border:1px solid var(--bd);border-radius:16px;padding:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.35)}
.dj-plate::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 90% at 10% -40%,rgba(255,255,255,.07),transparent 60%),linear-gradient(112deg,transparent 62%,rgba(255,255,255,.035) 62.5%,rgba(255,255,255,.035) 72%,transparent 72.5%)}
.dj-plate.gr{border-color:rgba(var(--gr-rgb),.35)} .dj-plate.or{border-color:rgba(var(--or-rgb),.35)} .dj-plate.cy{border-color:rgba(var(--cy-rgb),.35)}

/* capsule glass pill */
.dj-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:20px;border:1px solid var(--bd);background:rgba(3,6,13,.6);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);position:relative;overflow:hidden;isolation:isolate}
.dj-pill > *{position:relative;z-index:1}
.dj-pill::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(130% 150% at 12% -70%,rgba(255,255,255,.26) 0%,rgba(255,255,255,.08) 58%,rgba(255,255,255,0) 58.6%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.dj-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}
.dj-pill.gr{color:var(--gr);border-color:rgba(var(--gr-rgb),.35);background:rgba(var(--gr-rgb),.07)}
.dj-pill.or{color:var(--or);border-color:rgba(var(--or-rgb),.4);background:rgba(var(--or-rgb),.08)}
.dj-pill.cy{color:var(--cy);border-color:rgba(var(--cy-rgb),.35);background:rgba(var(--cy-rgb),.07)}
html.light .dj-pill{background:rgba(255,255,255,.7)}

/* "Coming soon" is <span class="dj-pill or"><span class="dot"></span>Coming soon</span>:
   orange, steady, never blinking. */

/* buttons */
.dj-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:10px;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.06em;
  border:1px solid rgba(var(--cy-rgb),.35);background:rgba(var(--cy-rgb),.08);color:var(--tx);cursor:pointer;transition:transform .2s,background .2s}
.dj-btn:hover{transform:translateY(-2px);background:rgba(var(--cy-rgb),.16)}
.dj-btn.gr{background:var(--gr);border-color:var(--gr);color:#00170e;box-shadow:0 0 24px rgba(var(--gr-rgb),.3)}
.dj-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* list with brand ticks */
.dj-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dj-list li{position:relative;padding-left:24px;color:var(--mu);line-height:1.55}
.dj-list li::before{content:'';position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--cy);box-shadow:0 0 8px rgba(var(--cy-rgb),.5)}
.dj-list.gr li::before{background:var(--gr)} .dj-list.or li::before{background:var(--or)}

.dj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.dj-foot{position:relative;z-index:1;border-top:1px solid var(--bd);margin-top:70px;padding:28px 24px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute)}
.dj-foot a{color:var(--cy)}

/* hex glass button: the 2DSUITE toolbar's, 58 x 64, scaled with zoom only */
.dj-hex{--hex:path('M 22.9 3.4 Q 29 0 35.1 3.4 L 51.9 12.6 Q 58 16 58 23 L 58 41 Q 58 48 51.9 51.4 L 35.1 60.6 Q 29 64 22.9 60.6 L 6.1 51.4 Q 0 48 0 41 L 0 23 Q 0 16 6.1 12.6 Z');
  position:relative;width:58px;height:64px;clip-path:var(--hex);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(168deg,#3b4f6b 0%,#1a2740 38%,#0a1220 72%,#060b14 100%);color:var(--hx,var(--cy));
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.dj-hex::before{content:'';position:absolute;inset:0;clip-path:var(--hex);background:rgba(var(--hx-rgb,var(--cy-rgb)),.10)}
.dj-hex::after{content:'';position:absolute;inset:0;clip-path:var(--hex);pointer-events:none;
  background:radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.28),rgba(255,255,255,.05) 55%,transparent 56%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 22%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.dj-hex svg{position:relative;z-index:1;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dj-hex.gr{--hx:var(--gr);--hx-rgb:var(--gr-rgb)} .dj-hex.or{--hx:var(--or);--hx-rgb:var(--or-rgb)} .dj-hex.cy{--hx:var(--cy);--hx-rgb:var(--cy-rgb)}
.dj-hex.big{zoom:1.6}