Nostalgia pura: cada bloco é uma janela Aero de vidro, com o orb do Iniciar e a barra de tarefas.
Using a template swaps your colors, font and custom CSS. Your name, bio, avatar and links stay.
See the CSS
/* Windows 7 */
/* title bar buttons and their glow: ported from 7.css by Khang Nguyen (MIT), https://khang-nd.github.io/7.css */
:root {
--font: 'Segoe UI', 'Open Sans', system-ui, sans-serif;
--i-min: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAFCAYAAABxeg0vAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA7SURBVHgBlY+xDQAgDMNaiQ9B8AHcxAlI/NYtKwj6QOohUzxYc+1HAqQ3e03qXNpwwcyE5QsAaEGjDRf8ZAza6Bz6VQAAAABJRU5ErkJggg==");
--i-max: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABsSURBVHgBlZHBCYAwDEVT6YaKbqArOILgBLqBosP1VkhAaQ6S1lKad+ihPy8kxLT9+IACG57r2KqKu2GCBpTYtEMOOQELzrnv4z53I4vDjjJnwXsPJWTOAiJGHVNB5pGwLjPk+AlEBLUY7eFebCosBHOR7vYAAAAASUVORK5CYII=");
--i-close: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACUSURBVHgBlZFNCoQwDIVbmRvOMHOAAd0K/uDGlYKiCG4VPICi9yu0oCSQoFUXFtKEl6+voZXvr7sKay1TL690FOexY+Hz87i2decOuDKQsNGVe8AGYTRJIh0Y+orBvxszCPllOymlxN06jNE26Qnwg4zdHQLrMhFaawwAqAadDPE1ijwUxhiMKCmxCZk06OMYTz5lAx3xWDeXkLNAAAAAAElFTkSuQmCC");
--b-gloss: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .3) 45%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, rgba(255, 255, 255, .5));
--b-red: radial-gradient(circle at -60% 50%, #0007 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #0007 5% 10%, #0000 50%), linear-gradient(#e0a197e5, #cf796a 25% 50%, #d54f36 50%);
}
html, body { overflow-x: clip; }
body.zbr-page { padding-bottom: 72px; font-size: 15px; }
::selection { background: #3399ff; color: #fff; }
/* ---------- windows ----------
Each block is a window. It is "inactive" (pale glass, glassy close button) until the
pointer is on it; then it activates like the focused window: deeper glass, red close, bigger shadow. */
.zbr-card {
--glass: linear-gradient(118deg, rgba(150, 188, 222, .62), rgba(200, 222, 242, .55) 40%, rgba(140, 178, 218, .62) 62%, rgba(178, 206, 236, .58));
--close: var(--i-close) no-repeat 50%, var(--b-gloss);
--btn: rgba(255, 255, 255, .2);
--ctl-border: rgba(0, 0, 0, .3);
--shadow: 0 0 0 1px rgba(15, 30, 55, .55), inset 0 0 0 1px rgba(40, 60, 90, .4), 0 6px 18px rgba(0, 0, 0, .35);
position: relative; border-radius: 8px; color: #1b1b1b;
border: 7px solid transparent; border-top-width: 30px;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 26px, transparent 26px) border-box,
repeating-linear-gradient(118deg, transparent 0 46px, rgba(255, 255, 255, .14) 46px 70px, transparent 70px 150px) border-box,
var(--glass) border-box;
backdrop-filter: blur(10px);
box-shadow: var(--shadow);
/* deactivating waits a moment, so crossing the gaps between the buttons doesn't flicker */
transition: box-shadow .25s .3s, --glass 0s .3s, --close 0s .3s, --btn 0s .3s, --ctl-border 0s .3s;
transition-behavior: allow-discrete;
animation: win-open .32s cubic-bezier(.2, .9, .3, 1.15) backwards;
}
.zbr-card:hover {
--glass: linear-gradient(118deg, rgba(95, 158, 215, .86), rgba(165, 208, 240, .74) 40%, rgba(80, 138, 205, .86) 62%, rgba(135, 188, 232, .8));
--close: var(--i-close) no-repeat 50%, var(--b-gloss), var(--b-red);
--btn: var(--b-gloss);
--ctl-border: rgba(0, 0, 0, .7);
--shadow: 0 0 0 1px rgba(15, 30, 55, .8), inset 0 0 0 1px rgba(40, 60, 90, .55), 0 14px 40px rgba(0, 0, 0, .6), 0 0 22px rgba(120, 200, 255, .35);
transition-delay: 0s;
z-index: 1;
}
/* windows pop open one after another, like they do at logon */
.zbr-col > :nth-child(2) { animation-delay: .06s; }
.zbr-col > :nth-child(3) { animation-delay: .12s; }
.zbr-col > :nth-child(4) { animation-delay: .18s; }
.zbr-col > :nth-child(n+5) { animation-delay: .24s; }
.zbr-main > :nth-child(1) { animation-delay: .1s; }
.zbr-main > :nth-child(2) { animation-delay: .16s; }
.zbr-main > :nth-child(3) { animation-delay: .22s; }
@keyframes win-open { from { opacity: 0; transform: scale(.9) translateY(10px); } }
:where(.cols-2) .zbr-card.zbr-box { border-radius: 8px; padding: 0; }
.cols-2 .zbr-box-body { padding: 16px; }
/* title text: black with the white Aero glow */
.cols-2 .zbr-box-title, .cols-2 .zbr-box-profile .zbr-box-body::before, .cols-1 main.zbr-card::before {
font-size: .85rem; font-weight: 400; color: #000; white-space: nowrap;
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 4px #fff;
}
.cols-2 .zbr-box-title {
position: absolute; top: -30px; left: 2px; right: -1px; height: 30px; margin: 0;
display: block; line-height: 30px; padding: 0 116px 0 0;
overflow: clip; overflow-clip-margin: 14px; text-overflow: ellipsis;
}
.cols-2 .zbr-box-profile .zbr-box-body::before {
content: 'Profile'; position: absolute; top: -30px; left: 2px; height: 30px; line-height: 30px;
}
/* The three buttons each belong to a different element, so each lights up on its own:
minimize = the heading (or the name/views/posts title on blocks without one),
maximize = the block body, close = the window. Those elements ignore the pointer
themselves (pointer-events: none) and only their button takes it; the content inside
the body gets it back. */
.cols-2 .zbr-card, .cols-2 .zbr-box-title, .cols-2 .zbr-box-body,
.cols-2 .zbr-box-profile .zbr-name, .cols-2 .zbr-box-views .zbr-views, .cols-2 .zbr-box-posts .zbr-posts-title { pointer-events: none; }
.cols-2 .zbr-box-body > * { pointer-events: auto; }
.cols-2 .zbr-box-title::after, .cols-2 .zbr-box-profile .zbr-name::after, .cols-2 .zbr-box-views .zbr-views::after, .cols-2 .zbr-box-posts .zbr-posts-title::after,
.cols-2 .zbr-box-body::after, .cols-2 .zbr-card::after {
content: ''; position: absolute; top: -30px; width: 29px; height: 19px; box-sizing: border-box;
border: 1px solid var(--ctl-border); border-top: 0; border-right: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 1px 0 rgba(255, 255, 255, .5);
pointer-events: auto; transition: box-shadow .3s;
}
/* minimize */
.cols-2 .zbr-box-title::after, .cols-2 .zbr-box-profile .zbr-name::after, .cols-2 .zbr-box-views .zbr-views::after, .cols-2 .zbr-box-posts .zbr-posts-title::after {
right: 76px; border-radius: 0 0 0 5px; background: var(--i-min) no-repeat center 10px, var(--btn);
}
.cols-2 .zbr-box-title::after { top: 0; }
/* maximize */
.cols-2 .zbr-box-body::after { right: 47px; background: var(--i-max) no-repeat 50%, var(--btn); }
/* close */
.cols-2 .zbr-card::after {
right: -1px; width: 48px; border-right: 1px solid var(--ctl-border); border-radius: 0 0 5px 0;
background: var(--close); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 1px 0 rgba(255, 255, 255, .5);
}
/* hover glow (7.css): cyan on minimize and maximize, hot red on close */
.cols-2 .zbr-box-title:hover::after, .cols-2 .zbr-box-profile .zbr-name:hover::after, .cols-2 .zbr-box-views .zbr-views:hover::after, .cols-2 .zbr-box-posts .zbr-posts-title:hover::after {
background: var(--i-min) no-repeat center 10px, radial-gradient(circle at bottom, #2aceda, transparent 65%), linear-gradient(#b6d9ee 50%, #1a6ca1 0);
box-shadow: 0 0 7px 3px #5dc4f0, inset 0 0 0 1px #fffa;
}
.cols-2 .zbr-box-body:hover:not(:has(:hover))::after {
background: var(--i-max) no-repeat 50%, radial-gradient(circle at bottom, #2aceda, transparent 65%), linear-gradient(#b6d9ee 50%, #1a6ca1 0);
box-shadow: 0 0 7px 3px #5dc4f0, inset 0 0 0 1px #fffa;
}
.cols-2 .zbr-box-title:active::after, .cols-2 .zbr-box-profile .zbr-name:active::after, .cols-2 .zbr-box-views .zbr-views:active::after, .cols-2 .zbr-box-posts .zbr-posts-title:active::after {
background: var(--i-min) no-repeat center 10px, radial-gradient(circle at bottom, #0bfdfa, transparent 65%), linear-gradient(#86a7bc 50%, #092747 0);
}
.cols-2 .zbr-box-body:active:not(:has(:active))::after {
background: var(--i-max) no-repeat 50%, radial-gradient(circle at bottom, #0bfdfa, transparent 65%), linear-gradient(#86a7bc 50%, #092747 0);
}
.cols-2 .zbr-card:hover:not(:has(:hover))::after {
background: var(--i-close) no-repeat 50%, var(--b-gloss),
radial-gradient(circle at 50% 170%, #f4e676 10% 20%, #0000 60%),
radial-gradient(circle at -60% 50%, #000a 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #000a 5% 10%, #0000 50%),
linear-gradient(#fb9d8b, #ee6d56 25% 50%, #d42809 50%);
box-shadow: 0 0 7px 3px #e68e75, inset 0 0 0 1px #fffa;
}
.cols-2 .zbr-card:active:not(:has(:active))::after {
background: var(--i-close) no-repeat 50%, var(--b-gloss),
radial-gradient(circle at 50% 170%, #dcc03f 10% 20%, #0000 60%),
radial-gradient(circle at -60% 50%, #000 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #000 5% 10%, #0000 50%),
linear-gradient(#cf8d80, #c4553f 25% 50%, #a01c03 50%);
box-shadow: 0 0 5px 2px #e68e75, inset 0 0 0 1px #fff6;
}
/* 1 column: the main box is one window, with the whole button strip on it */
.cols-1 main.zbr-card::before {
content: 'Profile'; position: absolute; top: -30px; left: 2px; height: 30px; line-height: 30px;
}
.cols-1 main.zbr-card::after {
content: ''; position: absolute; top: -30px; right: -1px; width: 106px; height: 19px; box-sizing: border-box;
border: 1px solid var(--ctl-border); border-top: 0; border-radius: 0 0 5px 5px;
background: var(--i-close) no-repeat right 18px center, var(--i-min) no-repeat 8px 10px, var(--i-max) no-repeat 37px 4px,
linear-gradient(var(--ctl-border), var(--ctl-border)) 28px 0 / 1px 100% no-repeat,
linear-gradient(var(--ctl-border), var(--ctl-border)) 57px 0 / 1px 100% no-repeat,
var(--b-gloss), var(--b-red) right / 48px 100% no-repeat;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}
/* touch screens have no hover: show every window as the active one */
@media (hover: none) {
.zbr-card {
--glass: linear-gradient(118deg, rgba(95, 158, 215, .86), rgba(165, 208, 240, .74) 40%, rgba(80, 138, 205, .86) 62%, rgba(135, 188, 232, .8));
--close: var(--i-close) no-repeat 50%, var(--b-gloss), var(--b-red);
--btn: var(--b-gloss);
--ctl-border: rgba(0, 0, 0, .7);
--shadow: 0 0 0 1px rgba(15, 30, 55, .8), inset 0 0 0 1px rgba(40, 60, 90, .55), 0 10px 32px rgba(0, 0, 0, .5);
}
}
/* ---------- inside the windows ---------- */
.zbr-avatar { border-radius: 4px; border: 3px solid #fff; box-shadow: 0 0 0 1px #8ba6c8, 0 3px 8px rgba(0, 0, 0, .3); transition: box-shadow .4s; }
.zbr-avatar:hover { box-shadow: 0 0 0 1px #5aa0e0, 0 0 14px 3px rgba(80, 170, 255, .75); transition-duration: .15s; }
.zbr-name { font-weight: 400; color: #1e395b; font-size: 1.6rem; }
.cols-1 .zbr-box-title, .zbr-posts-title { font-weight: 400; color: #1e395b; font-size: 1.1rem; }
.zbr-bio { opacity: 1; color: #444; }
/* Explorer-style hover: pale blue box that fades in fast and out slow; pressed = selected */
.zbr-link, :where(.cols-2) .zbr-link, .zbr-friend, .zbr-gallery a {
border: 1px solid transparent; border-radius: 3px;
background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)) transparent;
transition: background-color .5s, border-color .5s, box-shadow .5s;
}
.zbr-link:hover, :where(.cols-2) .zbr-link:hover, .zbr-friend:hover, .zbr-gallery a:hover {
border-color: #b8d6fb; background-color: #e3effd; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
transition-duration: .1s;
}
.zbr-link:active, .zbr-friend:active, .zbr-gallery a:active { border-color: #7da2ce; background-color: #c4dcf7; }
.zbr-links { gap: 2px; }
.zbr-link, :where(.cols-2) .zbr-link { color: #1b1b1b; font-weight: 400; padding: 7px 10px; text-align: left; }
:where(.cols-2) .zbr-link:hover, .zbr-link:hover { transform: none; color: #1b1b1b; }
.zbr-icon { color: #1e72c8; transition: transform .2s; }
.zbr-link:hover .zbr-icon { transform: scale(1.15); }
.zbr-friend { padding: 5px 3px; }
.zbr-gallery a { padding: 2px; }
.zbr-gallery a:hover img { opacity: 1; }
/* details view rows */
.zbr-table th, .zbr-table td { padding-left: 6px; transition: background-color .5s; }
.zbr-table tr:hover th, .zbr-table tr:hover td { background-color: #eaf3fd; transition-duration: .1s; }
.zbr-table th, .zbr-table td, .zbr-comment { border-color: #e3e8ef; }
.zbr-table th { opacity: 1; color: #6d6d6d; font-weight: 400; }
.zbr-comment { transition: background-color .5s; padding-left: 6px; padding-right: 6px; border-radius: 3px; }
.zbr-comment:hover { background-color: #f3f8fe; transition-duration: .1s; }
.zbr-text, .zbr-html { color: #1b1b1b; }
.zbr-friend { color: #1b1b1b; }
.zbr-friend img, .zbr-friend .zbr-noavatar, .zbr-comment-author img, .zbr-comment-author .zbr-noavatar {
border-radius: 3px; border: 2px solid #fff; box-shadow: 0 0 0 1px #a8bcd6;
}
.zbr-noavatar { background: linear-gradient(#5fa8e8, #1e5fae); color: #fff; }
.zbr-online { color: #2a8a2a; font-weight: 600; }
/* buttons (7.css): grey glass, blue on hover, pressed darker, pulsing when focused */
.zbr-btn, .zbr-music-toggle {
color: #222; font-weight: 400; border-radius: 3px; padding: 5px 16px;
border: 1px solid #8e8f8f; box-shadow: inset 0 0 0 1px #fffc;
background: linear-gradient(#f2f2f2 45%, #ebebeb 45%, #cfcfcf);
transition: border-color 1s linear, box-shadow .3s;
}
.zbr-btn:hover, .zbr-music-toggle:hover { filter: none; border-color: #3c7fb1; background: linear-gradient(#eaf6fd 45%, #bee6fd 45%, #a7d9f5); transition-duration: .3s; }
.zbr-btn:active, .zbr-music-toggle:active {
border-color: #6d91ab; box-shadow: inset 1px 1px 0 #0003, inset -1px 1px 0 #0001;
background: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db);
}
.zbr-btn:focus-visible, .zbr-music-toggle:focus-visible {
outline: 1px dotted #000; outline-offset: -4px; border-color: #5586a3;
background: linear-gradient(#eaf6fd 45%, #bee6fd 45%, #a7d9f5);
animation: pulse 1s ease infinite alternate;
}
@keyframes pulse { from { box-shadow: inset 0 0 3px 1px #34deffdd; } to { box-shadow: inset 0 0 1px 1px #34deffdd; } }
.zbr-btn-ghost, .zbr-btn-on { background: none; border: 0; box-shadow: none; color: #0066cc; opacity: 1; animation: none; }
.zbr-btn-ghost:hover { background: none; text-decoration: underline; color: #3399ff; }
/* the music button lives in the system tray, next to the clock */
.zbr-music-toggle, .zbr-music-toggle:hover, .zbr-music-toggle:active, .zbr-music-toggle:focus-visible {
top: auto; bottom: 5px; right: 104px; z-index: 7; width: 30px; height: 30px; padding: 0;
border: 1px solid transparent; border-radius: 3px; background: none; box-shadow: none; animation: none;
color: #fff; text-shadow: 0 0 4px #000; font-size: .8rem;
}
.zbr-music-toggle:hover { border-color: rgba(255, 255, 255, .45); background: linear-gradient(rgba(255, 255, 255, .32), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .14)); }
.zbr-music-toggle:active { background: rgba(0, 0, 0, .25); }
@media (max-width: 420px) { .zbr-music-toggle, .zbr-music-toggle:hover { right: 84px; } }
/* text box */
.zbr-wall-form {
border: 1px solid #abadb3; border-top-color: #8e8f8f; border-radius: 2px; padding-left: 8px; background: #fff;
transition: border-color .3s, box-shadow .3s;
}
.zbr-wall-form:hover { border-color: #b7d5ea; border-top-color: #5794bf; }
.zbr-wall-form:focus-within { border-color: #a4c9e3; border-top-color: #3d7bad; box-shadow: 0 0 4px rgba(61, 123, 173, .35); }
.zbr-wall-form input { padding: 7px 0; color: #1b1b1b; }
.zbr-send { color: #1e72c8; border-radius: 3px; border: 1px solid transparent; transition: border-color .3s; }
.zbr-send:hover { border-color: #3c7fb1; background: linear-gradient(#eaf6fd 45%, #bee6fd 45%, #a7d9f5); }
.zbr-send:active { background: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db); }
.zbr-views { opacity: 1; color: #6d6d6d; }
/* tooltip */
.zbr-tip {
background: linear-gradient(#fff, #e4e5f0); color: #575757; border: 1px solid #767676; border-radius: 3px;
font-weight: 400; box-shadow: 2px 2px 3px rgba(0, 0, 0, .3);
}
/* scrollbar (7.css) */
html::-webkit-scrollbar { width: 17px; }
html::-webkit-scrollbar-track { background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%); }
html::-webkit-scrollbar-thumb {
border: 1px solid #8e8f8f; border-radius: 3px; box-shadow: inset 0 0 0 1px #fffc;
background: linear-gradient(90deg, #f2f2f2 45%, #ebebeb 45%, #cfcfcf);
}
html::-webkit-scrollbar-thumb:hover { border-color: #3c7fb1; background: linear-gradient(90deg, #eaf6fd 45%, #bee6fd 45%, #a7d9f5); }
html::-webkit-scrollbar-thumb:active { border-color: #6d91ab; background: linear-gradient(90deg, #c4e5f6 45%, #98d1ef 45%); }
/* music splash: the "Welcome" logon screen with its spinning ring */
.zbr-splash {
gap: 16px; font-weight: 300; letter-spacing: 0; font-size: 1.9rem; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
background: radial-gradient(ellipse at 50% 45%, #3c97e2, #0d4f9a 55%, #062a5c); backdrop-filter: none;
}
.zbr-splash::before {
content: ''; width: 30px; height: 30px; border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 25%, #bfefff 100%);
-webkit-mask: radial-gradient(circle, transparent 52%, #000 55%); mask: radial-gradient(circle, transparent 52%, #000 55%);
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- taskbar ---------- */
html::after {
content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: 40px; pointer-events: none;
backdrop-filter: blur(8px);
border-top: 1px solid rgba(255, 255, 255, .35);
background:
linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .15)) right / 14px 100% no-repeat,
linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)) right 14px top 0 / 1px 100% no-repeat,
linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 50%, rgba(0, 0, 0, .12) 50%, rgba(255, 255, 255, .05)),
rgba(25, 45, 75, .62);
}
/* Start orb with the four-color flag; it breathes like the orb does under the pointer */
html::before {
content: ''; position: fixed; left: 6px; bottom: 0; z-index: 6; width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
border: 1px solid rgba(0, 20, 50, .8);
background:
radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255, 255, 255, .75), rgba(255, 255, 255, .1) 70%, transparent 72%),
linear-gradient(#f65314, #f65314) 13px 13px / 9px 9px no-repeat,
linear-gradient(#7cbb00, #7cbb00) 23px 13px / 9px 9px no-repeat,
linear-gradient(#00a1f1, #00a1f1) 13px 23px / 9px 9px no-repeat,
linear-gradient(#ffbb00, #ffbb00) 23px 23px / 9px 9px no-repeat,
radial-gradient(circle at 50% 80%, #6fe0ff, #2a86d6 40%, #0c3f84 72%, #062550);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 12px rgba(90, 190, 255, .75);
animation: orb 3s ease-in-out infinite alternate;
}
@keyframes orb { to { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 20px 4px rgba(120, 215, 255, .9); } }
/* system tray clock: Windows 7 release day */
body.zbr-page::after {
content: '10:07 PM\A 10/22/2009'; white-space: pre; position: fixed; right: 26px; bottom: 0; z-index: 6; height: 40px;
display: flex; align-items: center; text-align: center; pointer-events: none;
font: 12px/1.35 'Segoe UI', 'Open Sans', sans-serif; color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, .7);
}
@media (max-width: 420px) {
body.zbr-page::after { content: '10:07 PM'; }
}
@media (prefers-reduced-motion: reduce) {
.zbr-card, html::before, .zbr-splash::before { animation: none; }
}
