/* Shared visual layer. Reading content and existing animation transforms are preserved. */
:root{--bg:#0d1018;--surface:#151b28;--surface2:#1c2536;--ink:#eef3ff;--muted:#bac6da;--line:#39465e;--teal:#95d9ff;--accentbg:#1d354b;--chrome:#090c13;--chrome-line:#303a50;--ui-blue:#99deff;--ui-violet:#c5baff;--ui-shadow:#00000038;--ui-edge:#ffffff16}
:root[data-theme=light]{--bg:#f3f5fa;--surface:#fff;--surface2:#e9eff8;--ink:#162238;--muted:#4d607a;--line:#bdcadd;--teal:#155b89;--accentbg:#e0edfa;--chrome:#e6ecf6;--chrome-line:#bcc9df;--ui-shadow:#23334e13;--ui-edge:#ffffffc0}
body{background:radial-gradient(ellipse at 95% 0,#8280d312,transparent 38rem),var(--bg)}
.header{background:var(--chrome);background:color-mix(in srgb,var(--chrome) 94%,transparent);border-bottom:1px solid var(--chrome-line);box-shadow:0 8px 30px var(--ui-shadow);backdrop-filter:blur(16px)}
.footer{background:var(--chrome);border-top:1px solid var(--chrome-line)}
.main-nav{border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--ui-edge),0 8px 24px var(--ui-shadow)}
.main-nav a,.nav-group summary{border-radius:10px;transition:background-color .2s,color .2s,box-shadow .2s}
.main-nav a:hover,.nav-group summary:hover,.nav-group[open]>summary{background:var(--accentbg);color:var(--teal);box-shadow:inset 0 -2px 0 var(--teal)}
.main-nav a[aria-current=page]{background:var(--accentbg);box-shadow:inset 0 -2px 0 var(--teal);color:var(--teal)}
.nav-group>div{box-shadow:0 18px 45px var(--ui-shadow);border-radius:16px}
.language-bar{padding-block:14px}.language-bar label{display:inline-flex;align-items:center;gap:9px}.language-bar label svg{color:var(--teal);flex:none}
.language-bar select{border-radius:12px;background:var(--surface);padding-inline:14px 34px}
.page-hero,.v2-hero,.page-intro,.study-intro{background-image:radial-gradient(ellipse at 92% 12%,#9394ed14,transparent 64%)}
.eyebrow{color:var(--teal)}
.teaching-image{margin:28px 0;max-width:760px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}.teaching-image h2{font-size:1.2rem;line-height:1.5;margin:0;padding:18px 22px}.teaching-image>a{display:block}.teaching-image img{display:block;width:100%;height:auto}.teaching-image figcaption{padding:18px 22px}.teaching-image figcaption p{font-size:.95rem;line-height:1.75;margin:0 0 10px}.teaching-image small{color:var(--muted);font-size:.8rem}
.card,.journey,.progress-overview,.owasp-feature,.study-next{background:linear-gradient(140deg,var(--surface),var(--surface2));border:1px solid var(--line);border-radius:18px;box-shadow:inset 0 1px 0 var(--ui-edge),0 6px 22px var(--ui-shadow)}
.card,.journey{transition:border-color .2s,box-shadow .2s,background-color .2s}
.card:hover,.journey:hover,.card:focus-within,.journey:focus-visible{border-color:var(--teal);box-shadow:inset 0 1px 0 var(--ui-edge),0 10px 28px var(--ui-shadow),0 0 0 1px var(--teal)}
.journey:nth-child(3n+2){border-top:3px solid #9b8ad5}.journey:nth-child(3n+3){border-top:3px solid #5a9bab}.journey:nth-child(3n+1){border-top:3px solid #669dcb}
.lesson-row{border-radius:10px;padding-inline:14px;transition:background-color .18s,color .18s}.lesson-row:hover{background:var(--accentbg)}
.lesson-aside{border-radius:14px}.lesson-aside a{border-radius:0 7px 7px 0;padding-block:7px}
.callout,.quiz{border-radius:16px;border-color:var(--line)}
.system-player{border-radius:18px;border-color:var(--line);box-shadow:inset 0 1px 0 var(--ui-edge),0 12px 30px var(--ui-shadow)}
button:not(:disabled),a.primary,a.button,a.btn,.back-to-top{border-radius:12px;border:1px solid var(--line);background:linear-gradient(145deg,var(--surface2),var(--surface));color:var(--ink);box-shadow:inset 0 1px 0 var(--ui-edge),0 3px 0 var(--ui-shadow);transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s}
button.primary:not(:disabled),a.primary,.fun-promo a.primary,.searchbox button:not(:disabled),[data-analytics-accept]:not(:disabled){background:linear-gradient(115deg,#8edcff,#b4c7ff);border-color:#badfff;color:#08101d;font-weight:700;box-shadow:inset 0 1px 0 #ffffffb0,0 4px 0 #345774,0 8px 20px #64aeed18}
button:not(:disabled):hover,a.primary:hover,a.button:hover,a.btn:hover,.back-to-top:hover,.fun-promo a.primary:hover,.searchbox button:not(:disabled):hover,.system-choices button:not(:disabled):hover{background:#080d17;color:#a7e3ff;border-color:#99deff;box-shadow:inset 0 1px 0 #ffffff24,0 3px 0 #253e5c,0 0 18px #89cbff20;text-decoration:none}
button[aria-pressed=true]:not(:disabled),button[aria-selected=true]:not(:disabled),.system-choices button[aria-pressed=true]:not(:disabled){background:linear-gradient(115deg,#9ddfff,#cec5ff);color:#080d17;border-color:#b7dcff;box-shadow:inset 0 -3px 0 #293b6545;font-weight:700}
button[aria-pressed=true]:not(:disabled):hover,button[aria-selected=true]:not(:disabled):hover,.system-choices button[aria-pressed=true]:not(:disabled):hover{background:#080d17;color:#a7e3ff;border-color:#99deff}
button:not(:disabled):active,a.primary:active,a.button:active{box-shadow:inset 0 3px 8px #00000050;filter:none}
button:disabled{box-shadow:none;cursor:not-allowed}
:is(button,a,input,select,summary):focus-visible{outline:3px solid var(--teal);outline-offset:4px}
input:not([type=radio]):not([type=checkbox]):not([type=range]),select{border-radius:10px}
input[type=radio],input[type=checkbox]{accent-color:var(--teal)}
@media(max-width:600px){.card,.journey,.system-player{border-radius:14px}.header{backdrop-filter:none}.language-bar{gap:10px}.language-bar>span{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.card,.journey,.main-nav a,.nav-group summary,.lesson-row,button:not(:disabled),a.primary,a.button,a.btn,.back-to-top{transition:none}}
@media(forced-colors:active){button,a.primary,a.button,.journey,.card{border:1px solid ButtonText;box-shadow:none}button[aria-pressed=true]{outline:2px solid Highlight}}