body.sp-dl,body:has(> #screen-landing.sp-dl:not([hidden])){
--c-bg:#0B1633;--c-surface:#131F3F;--c-surface-2:#182033;--c-surface-3:#1F2B4A;
--c-text-primary:#F6F4EF;--c-text-secondary:#9AA6BD;--c-text-tertiary:#8390AB;--c-text-dim:#5F6B85;
--c-accent:#6D95FF;--c-accent-subtle:rgba(50,107,255,0.16);
--c-border:rgba(246,244,239,0.08);--c-border-hover:rgba(246,244,239,0.16);
--font-heading:Georgia,'Times New Roman',serif;
--font-body:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
--font-mono:'Courier New',Courier,monospace;
--text-2xs:clamp(0.625rem,0.58rem + 0.22vw,0.75rem);--text-xs:clamp(0.75rem,0.70rem + 0.25vw,0.875rem);
--text-sm:clamp(0.875rem,0.82rem + 0.28vw,1rem);--text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
--text-lg:clamp(1.125rem,1.05rem + 0.38vw,1.25rem);--text-xl:clamp(1.25rem,1.15rem + 0.5vw,1.5rem);
--text-2xl:clamp(1.5rem,1.3rem + 1vw,2rem);--text-3xl:clamp(2rem,1.6rem + 2vw,3rem);
--text-4xl:clamp(2.5rem,1.8rem + 3.5vw,4.5rem);
--lh-tight:1.1;--lh-snug:1.25;--lh-base:1.5;--ls-tight:-0.02em;--ls-wide:0.05em;--ls-wider:0.1em;
--fw-regular:400;--fw-semibold:600;--fw-bold:700;
--sp-1:0.25rem;--sp-2:0.5rem;--sp-3:0.75rem;--sp-4:1rem;--sp-5:1.25rem;--sp-6:1.5rem;--sp-8:2rem;
--sp-10:2.5rem;--sp-12:3rem;--sp-16:4rem;
--radius-sm:2px;--radius-md:4px;--radius-lg:8px;--radius-xl:16px;--radius-full:9999px;
--nav-rail-w:300px;--nav-mobile-h:56px;--z-nav-rail:100;--z-nav-mobile:300;
--dur-fast:150ms;--dur-base:250ms;--ease-out:cubic-bezier(0,0,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);
background:var(--c-bg);color:var(--c-text-primary);padding-left:var(--nav-rail-w)}
@media (min-width:1024px) and (max-width:1279px){body.sp-dl,body:has(> #screen-landing.sp-dl:not([hidden])){--nav-rail-w:232px}}
@media (max-width:1023px){body.sp-dl,body:has(> #screen-landing.sp-dl:not([hidden])){--nav-rail-w:0px;padding-top:var(--nav-mobile-h)}}
html:has(> body.sp-dl){background:#0B1633}
html.sp-doc body.sp-dl{margin:0}
.sp.sp-dl{--sp-bg:var(--c-bg);--sp-fg:var(--c-text-primary);--sp-muted:var(--c-text-secondary);
--sp-line:var(--c-border-hover);--sp-soft:var(--c-surface);--sp-accent:var(--c-accent);
--sp-head:var(--font-heading);background:var(--c-bg);color:var(--c-text-primary);font-family:var(--font-body)}
.sp-dl h1,.sp-dl h2,.sp-dl h3,.sp-dl h4{font-family:var(--font-heading);font-weight:var(--fw-bold);
letter-spacing:var(--ls-tight);text-transform:none;color:var(--c-text-primary)}
.sp-dl h1{font-size:var(--text-4xl);line-height:var(--lh-tight);margin-top:40px}
.sp-dl h2{font-size:var(--text-2xl)}
.sp-dl .sp-lede{color:var(--c-text-secondary) !important}
.sp-dl .sp-steps li::before{background:var(--c-accent);color:var(--c-bg);font-family:var(--font-heading);font-weight:700}
.sp-dl .sp-btn{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-bg) !important;
border-radius:var(--radius-lg)}
.sp-dl .sp-btn:hover{background:var(--c-text-primary);border-color:var(--c-text-primary);filter:none}
.sp-dl .sp-btn2{background:transparent;color:var(--c-accent) !important}
.sp-dl .sp-btn2:hover{color:var(--c-bg) !important}
.sp-dl .sp-box{background:var(--c-surface);border-left-color:var(--c-accent)}
.sp-dl #ct2-t-drive:checked~.ct2-tablist label[for=ct2-t-drive],.sp-dl #ct2-t-lang:checked~.ct2-tablist label[for=ct2-t-lang],.sp-dl #ct2-t-mach:checked~.ct2-tablist label[for=ct2-t-mach]{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-bg)}
.sp-dl .sp-code input{background:var(--c-surface);color:var(--c-text-primary);border-color:var(--c-text-secondary)}
.sp-dl .sp-code input::placeholder{color:var(--c-text-tertiary)}
.sp-dl .sp-error{color:#FF9B8F !important}
.sp-dl .lang-menu-list,.sp-dl .lang-menu .lang-pill{background:var(--c-surface)}
body:has(> #screen-landing.sp-dl:not([hidden])) .site-foot{border-top-color:var(--c-border)}
body:has(> #screen-landing.sp-dl:not([hidden])) .foot-nav a,
body:has(> #screen-landing.sp-dl:not([hidden])) .foot-legal a{color:var(--c-text-secondary)}
body:has(> #screen-landing.sp-dl:not([hidden])) .foot-legal{color:var(--c-text-tertiary)}
/* ---- .nav-rail, from main.css 02-nav.css (JS-only parts left out:
   drawer, back/home icons, the sub-menus nobody here has) ---- */
.sp-dl .nav-rail{--rail-pad:var(--sp-8);--rail-znak:22px;position:fixed;inset-block:0;left:0;
width:var(--nav-rail-w);height:100vh;display:flex;flex-direction:column;padding-block:var(--sp-8);
background:var(--c-bg);border-right:1px solid var(--c-border);z-index:var(--z-nav-rail);overflow-y:auto;
overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--c-border) transparent;box-sizing:border-box}
.sp-dl .nav-rail__vrh{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;
padding-inline:var(--rail-pad);margin-bottom:var(--sp-10)}
.sp-dl .nav-rail__logo{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--fw-bold);
letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--c-text-primary);text-decoration:none;
transition:color var(--dur-fast) var(--ease-out);line-height:1.1}
.sp-dl .nav-rail__logo:hover{color:var(--c-accent)}
.sp-dl .nav-rail__sub{display:block;margin-top:4px;font-family:var(--font-body);font-size:var(--text-2xs);
font-weight:var(--fw-semibold);letter-spacing:0.2em;color:var(--c-text-secondary)}
.sp-dl .nav-rail__list{display:flex;flex-direction:column;flex:1;list-style:none;margin:0;padding:0}
.sp-dl .nav-rail__item{position:relative;margin:0}
.sp-dl .nav-rail__link{position:relative;display:block;width:100%;box-sizing:border-box;
padding:7px var(--rail-pad) 7px calc(var(--rail-pad) + var(--rail-znak));font-family:var(--font-body);
font-size:var(--text-base);font-weight:var(--fw-regular);line-height:1.45;letter-spacing:0;text-align:left;
color:var(--c-text-secondary);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.sp-dl .nav-rail__link:hover,.sp-dl .nav-rail__link:focus-visible{color:var(--c-text-primary)}
.sp-dl .nav-rail__link[aria-current="page"]{color:var(--c-accent)}
.sp-dl .nav-rail__lang{flex-shrink:0;padding:var(--sp-6) var(--rail-pad) 0 calc(var(--rail-pad) + var(--rail-znak))}
.sp-dl .nav-rail .lang-menu{margin-left:0}
.sp-dl .nav-rail .lang-menu>summary{color:var(--c-text-secondary)}
.sp-dl .nav-rail .lang-menu-list{position:static;margin-top:8px;box-shadow:none;min-width:0;max-width:12rem}
.sp-dl .nav-rail__cta{display:block;flex-shrink:0;margin:var(--sp-8) var(--rail-pad) 0;padding:var(--sp-4) var(--sp-5);
border-radius:var(--radius-lg);background:var(--c-accent);color:var(--c-bg);text-decoration:none;
transition:background var(--dur-fast) var(--ease-out)}
.sp-dl .nav-rail__cta:hover,.sp-dl .nav-rail__cta:focus-visible{background:var(--c-text-primary)}
.sp-dl .nav-rail__cta-naslov{display:block;font-family:var(--font-body);font-size:var(--text-base);
font-weight:var(--fw-semibold);line-height:1.25}
.sp-dl .nav-rail__cta-tekst{display:block;margin-top:3px;font-size:var(--text-sm);line-height:1.35;opacity:0.72}
@media (min-width:1024px) and (max-width:1279px){
.sp-dl .nav-rail{--rail-pad:var(--sp-5)}
.sp-dl .nav-rail__link{font-size:var(--text-sm);padding-block:6px}}
@media (prefers-reduced-motion:reduce){.sp-dl .nav-rail__link{transition:none}}
/* ---- mobile top bar, from main.css; the drawer is the rail itself ---- */
.sp-dl .sp-navcheck{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0}
.sp-dl .nav-mobile-bar{display:none;position:fixed;top:0;left:0;right:0;height:var(--nav-mobile-h);
background:var(--c-bg);border-bottom:1px solid var(--c-border);align-items:center;justify-content:space-between;
padding-inline:var(--sp-4);z-index:var(--z-nav-mobile);box-sizing:border-box}
.sp-dl .nav-mobile-bar__logo{font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--fw-bold);
letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--c-text-primary);text-decoration:none}
.sp-dl .nav-mobile-bar__toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
color:var(--c-text-primary);border-radius:var(--radius-md);cursor:pointer;
transition:background var(--dur-fast) var(--ease-out)}
.sp-dl .nav-mobile-bar__toggle:hover{background:var(--c-surface-2)}
.sp-dl .sp-navcheck:focus-visible + .nav-mobile-bar .nav-mobile-bar__toggle{outline:2px solid var(--c-accent);outline-offset:3px}
.sp-dl .nav-mobile-bar__hamburger,.sp-dl .nav-mobile-bar__hamburger::before,.sp-dl .nav-mobile-bar__hamburger::after{
display:block;width:20px;height:1.5px;background:currentColor;border-radius:var(--radius-full);
transition:transform var(--dur-base) var(--ease-in-out),opacity var(--dur-base) var(--ease-in-out)}
.sp-dl .nav-mobile-bar__hamburger{position:relative}
.sp-dl .nav-mobile-bar__hamburger::before,.sp-dl .nav-mobile-bar__hamburger::after{content:'';position:absolute;left:0}
.sp-dl .nav-mobile-bar__hamburger::before{top:-6px}
.sp-dl .nav-mobile-bar__hamburger::after{top:6px}
.sp-dl .sp-navcheck:checked + .nav-mobile-bar .nav-mobile-bar__hamburger{background:transparent}
.sp-dl .sp-navcheck:checked + .nav-mobile-bar .nav-mobile-bar__hamburger::before{transform:translateY(6px) rotate(45deg)}
.sp-dl .sp-navcheck:checked + .nav-mobile-bar .nav-mobile-bar__hamburger::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1023px){
.sp-dl .nav-rail{display:none}
.sp-dl .nav-mobile-bar{display:flex}
.sp-dl .sp-navcheck:checked ~ .nav-rail{display:flex;top:var(--nav-mobile-h);bottom:0;width:100%;height:auto;
background:var(--c-surface);border-right:0}
.sp-dl .sp-navcheck:checked ~ .nav-rail .nav-rail__vrh{display:none}
.sp-dl .sp-navcheck:checked ~ .nav-rail .nav-rail__list{flex:0}
.sp-dl .nav-rail{--rail-pad:var(--sp-4)}
.sp-dl .nav-rail__link{font-size:var(--text-lg);padding-block:12px}}
@media (min-width:1024px){.sp-dl .sp-navcheck{display:none}}
@media (max-width:600px){.sp-dl .sp-btn{display:block;width:100%}}
@media (max-width:1023px){.sp-dl .sp-chapter,.sp-dl .sp-course{scroll-margin-top:72px}}
/* v1.57: the course catalogue on the Demo page (old landing rail, new tokens) */
.sp-dl .sp-cat{margin:var(--sp-10) 0 var(--sp-4);border-top:1px solid var(--c-border-hover)}
.sp-dl .sp-cat h2{margin:var(--sp-6) 0 var(--sp-3)}
.sp-dl .sp-cat-g{border-bottom:1px solid var(--c-border-hover)}
.sp-dl .sp-cat-g>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
gap:var(--sp-4);min-height:52px;padding:var(--sp-3) 0;font-family:var(--font-heading);font-size:var(--text-xl);
color:var(--c-text-primary)}
.sp-dl .sp-cat-g>summary::-webkit-details-marker{display:none}
.sp-dl .sp-cat-g>summary:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.sp-dl .sp-cat-sign::before{content:'+';font-family:var(--font-body);font-size:1.4rem;color:var(--c-accent)}
.sp-dl .sp-cat-g[open] .sp-cat-sign::before{content:'\2212'}
.sp-dl .sp-cat-l{list-style:none;margin:0 0 var(--sp-4);padding:0 0 0 var(--sp-4);border-left:1px solid var(--c-border-hover)}
.sp-dl .sp-cat-i{margin:0}
.sp-dl .sp-cat-x{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
padding:var(--sp-2) var(--sp-3);margin:0;border:0;border-left:3px solid transparent;background:transparent;
font:inherit;font-size:var(--text-base);line-height:1.4;text-align:left;color:var(--c-text-tertiary);text-decoration:none}
.sp-dl .sp-cat-i[data-status=live] .sp-cat-x{color:var(--c-text-primary);border-left-color:var(--c-accent);cursor:pointer}
.sp-dl .sp-cat-i[data-status=live] .sp-cat-x:hover{background:var(--c-surface)}
.sp-dl .sp-cat-x:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}
.sp-dl .sp-cat-st{flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);
text-transform:uppercase;color:var(--c-text-tertiary)}
.sp-dl .sp-cat-i[data-status=live] .sp-cat-st{color:var(--c-accent)}
.sp-dl .sp-not{color:var(--c-text-secondary)}
/* v1.51f: legal pages and the survey in the same shell */
body.sp-legal{--bg:var(--c-bg);--fg:var(--c-text-primary);--muted:var(--c-text-secondary);--accent:var(--c-accent);
--line:var(--c-border-hover);--card:var(--c-surface);--body:var(--c-text-primary);
font-family:var(--font-body);font-size:17px;line-height:1.7}
body.sp-legal .wrap{max-width:720px;padding:2rem 16px 4rem;box-sizing:border-box}
body.sp-legal h1,body.sp-legal h2,body.sp-legal h3,body.sp-legal h4{font-family:var(--font-heading);font-weight:700;
letter-spacing:-0.02em;color:var(--c-text-primary)}
body.sp-legal h1{font-size:var(--text-3xl);line-height:1.15}
body.sp-legal h2{font-size:var(--text-xl);margin-top:2.4rem}
body.sp-legal h3{font-size:var(--text-lg);color:var(--c-text-primary)}
body.sp-legal a{color:var(--c-accent)}
body.sp-legal .legal-nav a[aria-current="page"]{color:var(--c-text-primary)}
body.sp-legal p,body.sp-legal li{color:var(--c-text-primary);overflow-wrap:anywhere}
body.sp-legal ul{padding-left:1.3rem}
body.sp-legal li{margin:.3rem 0}
body.sp-legal table{width:100%;border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}
body.sp-legal th,body.sp-legal td{border:1px solid var(--c-border-hover);padding:.5rem .7rem;text-align:left;vertical-align:top}
body.sp-legal th{background:var(--c-surface)}
body.sp-legal .contact-form button,body.sp-legal button[type=submit]{background:var(--c-accent);color:var(--c-bg)}
body.sp-legal .legal-foot,body.sp-legal .form-note,body.sp-legal .notice{color:var(--c-text-secondary)}
body.sp-legal .sp-legal-links{margin-top:1rem;font-size:.9rem}