/* Demo skins: when the live demo plays a product with its own identity, the panel takes that product's real
   interface style. Ultrasystem: ivory canvas, white rows, Inter and Geist, semantic pills, cobalt result. */
.demo, .demo-top, .demo-req, .row, .row .st, .demo-result, .demo-steps span { transition: background .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease; }
.d-head { display: inline-flex; align-items: center; gap: 12px; }
.d-logo { height: 20px; width: auto; display: block; }
.d-logo[hidden] { display: none; }

[data-skin="ultrasystem"] .demo { background: #f9f8f6; color: #171417; border-color: #e6e6e4; box-shadow: 2px 2px 16px rgba(37,69,255,.10), 0 24px 60px rgba(37,58,177,.18); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
[data-skin="ultrasystem"] .demo-top { border-color: #e6e6e4; color: #676665; font-family: "Geist Mono", ui-monospace, monospace; background: #fff; }
[data-skin="ultrasystem"] .demo-top .live::before { background: #2545ff; }
[data-skin="ultrasystem"] .demo-req { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); border-radius: 16px; }
[data-skin="ultrasystem"] .demo-req .mono { color: #2545ff; font-family: "Geist Mono", ui-monospace, monospace; }
[data-skin="ultrasystem"] .demo-req p { font: 600 18px/1.3 "Geist", "Inter", sans-serif; letter-spacing: -0.02em; color: #171417; }
[data-skin="ultrasystem"] .row { background: #fff; color: #484747; font: 500 13px/1.3 "Inter", sans-serif; border-radius: 14px; box-shadow: inset 0 0 0 1px #f0efec; }
[data-skin="ultrasystem"] .row .v { color: #171417; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }
[data-skin="ultrasystem"] .row .st { font: 500 11px/1 "Inter", sans-serif; letter-spacing: 0; text-transform: none; border-radius: 100px; padding: 6px 10px; background: #dbf3ff; color: #00248f; }
[data-skin="ultrasystem"] .row.ok .st { background: #e1f5eb; color: #166638; }
[data-skin="ultrasystem"] .row.flag { background: #fffaf6; box-shadow: inset 3px 0 0 #fa7249, inset 0 0 0 1px #ffe7d7; }
[data-skin="ultrasystem"] .row.flag .st { background: #ffe7d7; color: #9d3107; }
[data-skin="ultrasystem"] .demo-result { background: radial-gradient(80% 120% at 100% 0%, #2545ff, transparent 60%), linear-gradient(160deg, #0c1754, #070d3d); color: #fff; border-radius: 18px; }
[data-skin="ultrasystem"] .demo-result b { font: 600 clamp(22px, 2.4vw, 30px)/1.05 "Geist", "Inter", sans-serif; letter-spacing: -0.035em; text-transform: none; }
[data-skin="ultrasystem"] .demo-result span { color: rgba(255,255,255,.8); }
[data-skin="ultrasystem"] .demo-steps { border-color: #e6e6e4; background: #fff; }
[data-skin="ultrasystem"] .demo-steps span { color: #a2a2a2; border-color: #e6e6e4; font-family: "Geist Mono", ui-monospace, monospace; }
[data-skin="ultrasystem"] .demo-steps span.done { color: #484747; }
[data-skin="ultrasystem"] .demo-steps span.done::before { background: #2545ff; border-color: #2545ff; }
[data-skin="ultrasystem"] .demo-steps span.now { color: #2545ff; }
[data-skin="ultrasystem"] .demo-switch button[aria-selected="true"] { border-top-color: #2545ff; }

/* marked: #0E0E0E panel, violet bar and result under the brand's gradient and grain, Montserrat and Bricolage. */
[data-skin="marked"] .demo { background: #0e0e0e; color: #fff; border-color: #222; box-shadow: 0 30px 70px rgba(67,18,204,.18); font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }
[data-skin="marked"] .demo-top, [data-skin="marked"] .demo-result { background: url("../assets/marked/tex/noise.png") 0 0 / 146px 146px, url("../assets/marked/tex/gradient.jpg") center / cover no-repeat, #4312cc; background-blend-mode: overlay, soft-light, normal; color: #fff; }
[data-skin="marked"] .demo-top { border-color: #4312cc; color: rgba(255,255,255,.78); font-family: "Roboto Mono", ui-monospace, monospace; }
[data-skin="marked"] .demo-top .live::before { background: #c9b8ff; }
[data-skin="marked"] .demo-req { background: #1a1a1a; box-shadow: inset 0 0 0 1px #262626; border-radius: 18px; }
[data-skin="marked"] .demo-req .mono { color: #c9b8ff; font-family: "Roboto Mono", ui-monospace, monospace; }
[data-skin="marked"] .demo-req p { font: 700 18px/1.3 "Bricolage Grotesque", "Montserrat", sans-serif; letter-spacing: -0.02em; color: #fff; }
[data-skin="marked"] .row { background: #161616; color: rgba(255,255,255,.7); font: 500 13px/1.3 "Montserrat", sans-serif; border-radius: 14px; box-shadow: inset 0 0 0 1px #232323; }
[data-skin="marked"] .row .v { color: #fff; font-family: "Roboto Mono", ui-monospace, monospace; font-size: 12px; }
[data-skin="marked"] .row .st { font: 700 11px/1 "Montserrat", sans-serif; font-style: italic; letter-spacing: 0; text-transform: uppercase; border-radius: 100px; padding: 6px 10px; background: #262626; color: #c9b8ff; }
[data-skin="marked"] .row.ok .st { background: #4312cc; color: #fff; }
[data-skin="marked"] .demo-result { border-radius: 18px; }
[data-skin="marked"] .demo-result b { font: 700 clamp(22px, 2.4vw, 30px)/1.05 "Bricolage Grotesque", "Montserrat", sans-serif; letter-spacing: -0.035em; text-transform: none; }
[data-skin="marked"] .demo-result span { color: rgba(255,255,255,.84); }
[data-skin="marked"] .demo-steps { border-color: #222; background: #0e0e0e; }
[data-skin="marked"] .demo-steps span { color: #6f6f6f; border-color: #222; font-family: "Roboto Mono", ui-monospace, monospace; }
[data-skin="marked"] .demo-steps span.done { color: rgba(255,255,255,.75); }
[data-skin="marked"] .demo-steps span.done::before { background: #4312cc; border-color: #4312cc; }
[data-skin="marked"] .demo-steps span.now { color: #c9b8ff; }

/* Entrystarth: the app's light panel, navy bar, green for what went through, as on the totem's Entry key. */
[data-skin="entrystarth"] .demo { background: #f5f8fb; color: #262626; border-color: #dfe7ef; box-shadow: 0 30px 70px rgba(0,62,114,.18); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
[data-skin="entrystarth"] .demo-top { background: #003e72; border-color: #003e72; color: rgba(255,255,255,.75); font-family: "JetBrains Mono", ui-monospace, monospace; }
[data-skin="entrystarth"] .demo-top .live::before { background: #b0e585; }
[data-skin="entrystarth"] .demo-req { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,62,114,.08); }
[data-skin="entrystarth"] .demo-req .mono { color: #003e72; font-family: "JetBrains Mono", ui-monospace, monospace; }
[data-skin="entrystarth"] .demo-req p { font: 700 18px/1.3 "Inter", sans-serif; letter-spacing: -0.02em; color: #262626; }
[data-skin="entrystarth"] .row { background: #fff; color: #4a5866; font: 500 13px/1.3 "Inter", sans-serif; border-radius: 12px; box-shadow: inset 0 0 0 1px #e6edf3; }
[data-skin="entrystarth"] .row .v { color: #262626; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
[data-skin="entrystarth"] .row .st { font: 700 11px/1 "Inter", sans-serif; letter-spacing: .02em; border-radius: 8px; padding: 6px 9px; background: #d6fafb; color: #003e72; }
[data-skin="entrystarth"] .row.ok .st { background: #b0e585; color: #262626; }
[data-skin="entrystarth"] .row.flag .st { background: #f34e00; color: #fff; }
[data-skin="entrystarth"] .demo-result { background: radial-gradient(80% 120% at 100% 0%, rgba(214,250,251,.25), transparent 60%), linear-gradient(160deg, #003e72, #00294d); color: #fff; border-radius: 16px; }
[data-skin="entrystarth"] .demo-result b { font: 900 italic clamp(22px, 2.4vw, 30px)/1.05 "Inter", sans-serif; letter-spacing: -0.035em; text-transform: none; color: #b0e585; }
[data-skin="entrystarth"] .demo-result span { color: rgba(255,255,255,.82); }
[data-skin="entrystarth"] .demo-steps { border-color: #dfe7ef; background: #fff; }
[data-skin="entrystarth"] .demo-steps span { color: #8c99a6; border-color: #e6edf3; font-family: "JetBrains Mono", ui-monospace, monospace; }
[data-skin="entrystarth"] .demo-steps span.done { color: #4a5866; }
[data-skin="entrystarth"] .demo-steps span.done::before { background: #003e72; border-color: #003e72; }
[data-skin="entrystarth"] .demo-steps span.now { color: #003e72; }

/* unik: the system's sand screens with the twilight bar, star blue and azure status, the strong gradient under the result. */
[data-skin="unik"] .demo { background: #f8f4ed; color: #083645; border-color: #e8dfd2; box-shadow: 0 30px 70px rgba(8,54,69,.18); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
[data-skin="unik"] .demo-top { background: #083645; border-color: #083645; color: rgba(248,244,237,.72); font-family: "Geist Mono", ui-monospace, monospace; }
[data-skin="unik"] .demo-top .live::before { background: #e3ff00; }
[data-skin="unik"] .demo-req { background: #fffdf9; border-radius: 18px; box-shadow: 0 1px 2px rgba(8,54,69,.05), 0 8px 24px rgba(8,54,69,.06); }
[data-skin="unik"] .demo-req .mono { color: #04639b; font-family: "Geist Mono", ui-monospace, monospace; }
[data-skin="unik"] .demo-req p { font: 500 19px/1.25 "Geist", "Inter", sans-serif; letter-spacing: -0.03em; color: #083645; }
[data-skin="unik"] .row { background: #fffdf9; color: #4a6470; font: 500 13px/1.3 "Inter", sans-serif; border-radius: 14px; box-shadow: inset 0 0 0 1px #ece4d8; }
[data-skin="unik"] .row .v { color: #083645; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }
[data-skin="unik"] .row .st { font: 500 11px/1 "Geist Mono", monospace; letter-spacing: .03em; border-radius: 100px; padding: 6px 10px; background: #f4ede4; color: #04639b; }
[data-skin="unik"] .row.ok .st { background: #dcf5ff; color: #045a7a; }
[data-skin="unik"] .row.flag .st { background: #fde4e1; color: #b42318; }
[data-skin="unik"] .demo-result { background: radial-gradient(120% 80% at 100% 0%, #e3ff00 0%, rgba(227,255,0,0) 45%), linear-gradient(195deg, #4dd8ff 0%, #057bc1 40%, #083645 85%); color: #f8f4ed; }
[data-skin="unik"] .demo-result b { font: 600 clamp(22px, 2.4vw, 30px)/1.05 "Geist", sans-serif; letter-spacing: -0.045em; text-transform: none; color: #f8f4ed; }
[data-skin="unik"] .demo-result span { color: rgba(248,244,237,.88); }
[data-skin="unik"] .demo-steps { border-color: #e8dfd2; background: #fffdf9; }
[data-skin="unik"] .demo-steps span { color: #8a9aa1; border-color: #ece4d8; font-family: "Geist Mono", ui-monospace, monospace; }
[data-skin="unik"] .demo-steps span.done { color: #4a6470; }
[data-skin="unik"] .demo-steps span.done::before { background: #057bc1; border-color: #057bc1; }
[data-skin="unik"] .demo-steps span.now { color: #04639b; }

/* LumiCloud: paper screens with a plum bar, pastel status chips, the four colours blended under the result; Sora and Plex Mono. */
[data-skin="lumicloud"] .demo { background: #f6f2ef; color: #2b2433; border-color: #e8e0ea; box-shadow: 0 30px 70px rgba(91,63,196,.16); font-family: "Sora", ui-sans-serif, system-ui, sans-serif; }
[data-skin="lumicloud"] .demo-top { background: #2b2433; border-color: #2b2433; color: rgba(246,242,239,.72); font-family: "IBM Plex Mono", ui-monospace, monospace; }
[data-skin="lumicloud"] .demo-top .live::before { background: #ddfe93; }
[data-skin="lumicloud"] .demo-req { background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(43,36,51,.05), 0 8px 24px rgba(91,63,196,.08); }
[data-skin="lumicloud"] .demo-req .mono { color: #5b3fc4; font-family: "IBM Plex Mono", ui-monospace, monospace; }
[data-skin="lumicloud"] .demo-req p { font: 600 18px/1.3 "Sora", sans-serif; letter-spacing: -0.03em; color: #2b2433; }
[data-skin="lumicloud"] .row { background: #fff; color: #5d5466; font: 400 13px/1.3 "Sora", sans-serif; border-radius: 14px; box-shadow: inset 0 0 0 1px #ece4ef; }
[data-skin="lumicloud"] .row .v { color: #2b2433; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; }
[data-skin="lumicloud"] .row .st { font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .03em; border-radius: 100px; padding: 6px 10px; background: #e6dcfd; color: #2b2433; }
[data-skin="lumicloud"] .row.ok .st { background: #ddfe93; color: #2b2433; }
[data-skin="lumicloud"] .row.flag .st { background: #f092ce; color: #2b2433; }
[data-skin="lumicloud"] .demo-result { background: radial-gradient(70% 90% at 100% 0%, rgba(221,254,147,.6), transparent 60%), linear-gradient(135deg, #d2bcfa, #f092ce 55%, #b8dffc); color: #2b2433; }
[data-skin="lumicloud"] .demo-result b { font: 700 clamp(22px, 2.4vw, 30px)/1.05 "Sora", sans-serif; letter-spacing: -0.045em; text-transform: none; color: #2b2433; }
[data-skin="lumicloud"] .demo-result span { color: rgba(43,36,51,.82); }
[data-skin="lumicloud"] .demo-steps { border-color: #e8e0ea; background: #fff; }
[data-skin="lumicloud"] .demo-steps span { color: #9a90a3; border-color: #ece4ef; font-family: "IBM Plex Mono", ui-monospace, monospace; }
[data-skin="lumicloud"] .demo-steps span.done { color: #5d5466; }
[data-skin="lumicloud"] .demo-steps span.done::before { background: #5b3fc4; border-color: #5b3fc4; }
[data-skin="lumicloud"] .demo-steps span.now { color: #5b3fc4; }