/* Two selectable treatments of the original dog drawing; no image replacement. */
body::before{z-index:0;opacity:.3;background-position:center 180px;background-size:min(1400px,100vw) auto;filter:invert(1);mix-blend-mode:screen}
.shell,.public-main{position:relative;z-index:1}
.brand{flex-direction:column;text-align:center;gap:12px;margin-bottom:18px}
.brand img{width:146px;height:146px}
.brand>span{font-size:15px;line-height:1.35}
.login-logo{width:220px;height:220px}
.appearance-switch{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #434a31;border-radius:10px;background:#10140ded;flex-shrink:0}
.appearance-switch>span{padding:0 7px;font-size:11px;color:#bcc6a5}
.appearance-switch button{background:transparent;border:0;border-radius:6px;color:#c6cdbb;padding:7px 10px;font-size:11px;min-height:34px}
.appearance-switch button[aria-pressed=true]{background:#e8f92c;color:#182007;font-weight:600}
.page-heading{position:relative;isolation:isolate;min-height:230px;padding:28px;border:1px solid #434c2d;border-radius:18px;overflow:hidden;align-items:flex-end;background:linear-gradient(110deg,#080b07 5%,#12180c 70%,#20290e)}
.page-heading::before{content:"";position:absolute;z-index:-1;inset:0;background:url("dog-background.c7f42c5320eb.png") no-repeat right 42%;background-size:760px auto;filter:invert(1);mix-blend-mode:screen;opacity:.58;pointer-events:none;mask-image:linear-gradient(90deg,transparent 12%,#000 48%)}
.page-heading>div,.page-heading>.actions,.page-heading>.button{position:relative;z-index:1}
.page-heading>div:first-child{max-width:65%;text-shadow:0 2px 10px #000}
.page-heading p,.page-heading .muted{color:#d7deca}
.page-heading h1{font-size:clamp(26px,3vw,38px)}
.page-heading .button{background-color:#1a2314}
html[data-background="panorama"] body::before{opacity:.14;background-position:right bottom}
html[data-background="panorama"] .panel{background:#141712f2}
html[data-background="panorama"] .accent-panel{background:linear-gradient(115deg,#283418f2,#13180ff2)}
html[data-background="immersive"] body::before{opacity:.46;background-position:calc(50% + 100px) 125px;background-size:max(1000px,95vw) auto;filter:invert(1) sepia(.65) saturate(1.5)}
html[data-background="immersive"] .page-heading{background:linear-gradient(110deg,#090c087d,#0f140b22);border-color:#596138;min-height:260px}
html[data-background="immersive"] .page-heading::before{display:none}
html[data-background="immersive"] .panel{background:#11160cda;backdrop-filter:blur(2px)}
html[data-background="immersive"] .accent-panel{background:linear-gradient(115deg,#283418db,#13180fdd)}
html[data-background="immersive"] .calendar-panel{background:#0b1008a8}
.public-main .appearance-switch{width:fit-content;margin-left:auto}
@media(max-width:1100px){.brand img{width:112px;height:112px}.brand>span{font-size:12px}.page-heading{min-height:235px}.page-heading::before{background-size:680px auto}.topbar{gap:12px}}
@media(max-width:760px){.brand{flex-direction:row;text-align:left;gap:14px;margin-bottom:0}.brand img{width:96px;height:96px}.brand>span{font-size:13px}.login-story .login-logo{width:160px;height:160px}.appearance-switch{order:3;width:100%;justify-content:center}.topbar .environment{width:auto}.page-heading{padding:22px;min-height:300px;align-items:flex-start;justify-content:flex-end;flex-direction:column;gap:16px}.page-heading>div:first-child{max-width:100%}.page-heading h1{font-size:28px}.page-heading::before{background-size:660px auto;background-position:27% -60px;opacity:.48;mask-image:linear-gradient(180deg,#000 15%,#0009 65%,transparent)}.page-heading>div:first-child{text-shadow:0 1px 6px #000,0 2px 12px #000}.page-heading .actions{flex-wrap:wrap}html[data-background="immersive"] body::before{background-size:900px auto;background-position:27% 230px;opacity:.42}html[data-background="immersive"] .page-heading{min-height:300px}.public-main .appearance-switch{width:100%;margin-bottom:24px}}
/* The source is a pale pencil drawing: lift its strokes after inversion. */
.page-heading::before{filter:invert(1) brightness(2.6);opacity:.7}
html[data-background="immersive"] body::before{filter:invert(1) brightness(2.4) sepia(.65) saturate(1.5);opacity:.55}
@media(max-width:760px){.page-heading::before{opacity:.65}html[data-background="immersive"] body::before{opacity:.52}}