body.glass-mode .coin-front {
opacity: 0;
animation: none;
}

body.glass-mode .coin-back {
opacity: 1;
transform: scale(1);
animation: none;
}

body.glass-mode .tool-tags span {
background: rgba(0, 150, 210, 0.08);
border-color: rgba(0, 150, 210, 0.18);
color: #102033;
}

body.glass-mode {
--bg: #edf5ff;
--card: rgba(255, 255, 255, 0.28);
--blue: #6fa0ff;
--cyan: #5ee8d2;
--text: #0e1e30;
--muted: #4a6275;
--border: rgba(120, 160, 210, 0.28);
--particle: rgba(121, 169, 255, 0.72);
--particle-line: 121, 169, 255;
--particle-mouse: rgba(200, 140, 255, 0.34);
--profile-photo: url("/assets/img/foto-rahman-glass.png");
background:
radial-gradient(ellipse at 15% 15%, rgba(120, 239, 217, 0.52) 0%, transparent 38%),
radial-gradient(ellipse at 85% 8%,  rgba(200, 140, 255, 0.42) 0%, transparent 38%),
radial-gradient(ellipse at 78% 86%, rgba(121, 169, 255, 0.42) 0%, transparent 36%),
radial-gradient(ellipse at 38% 58%, rgba(240, 165, 214, 0.30) 0%, transparent 38%),
linear-gradient(150deg, #e8f5ff 0%, #ede8ff 42%, #fbeeff 72%, #f5fff8 100%);
}

body.glass-mode header {
background: rgba(255, 255, 255, 0.48);
border-bottom-color: rgba(106, 134, 167, 0.18);
box-shadow: 0 14px 36px rgba(63, 93, 125, 0.08);
backdrop-filter: blur(22px) saturate(1.25);
-webkit-backdrop-filter: blur(22px) saturate(1.25);
}

body.glass-mode .logo,
body.glass-mode .hero h1,
body.glass-mode .title h2,
body.glass-mode .card h3 {
color: #102033;
}

body.glass-mode .logo span,
body.glass-mode nav a:hover,
body.glass-mode .title span,
body.glass-mode .card i,
body.glass-mode .project-img i,
body.glass-mode .about-photo i {
color: #4e88ff;
}

body.glass-mode nav a,
body.glass-mode .hero h2,
body.glass-mode .hero p,
body.glass-mode .card p,
body.glass-mode .about-text p,
body.glass-mode .contact-box p {
color: #52677c;
}

body.glass-mode .hero h1 span {
background: linear-gradient(90deg, #4e88ff, #63dfd0, #f0a5d6);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

body.glass-mode .badge {
background: rgba(255, 255, 255, 0.36);
color: #2560d8;
border-color: rgba(120, 169, 255, 0.36);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.88),
0 4px 16px rgba(121, 169, 255, 0.18),
0 0 12px rgba(200, 140, 255, 0.12);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
}

body.glass-mode .btn {
color: #102033;
background: rgba(255, 255, 255, 0.34);
border-color: rgba(106, 134, 167, 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
backdrop-filter: blur(14px) saturate(1.18);
-webkit-backdrop-filter: blur(14px) saturate(1.18);
}

body.glass-mode .btn.primary {
color: #061525;
background: linear-gradient(135deg,
rgba(121, 169, 255, 0.96) 0%,
rgba(120, 239, 217, 0.92) 50%,
rgba(200, 180, 255, 0.78) 100%);
border-color: rgba(255, 255, 255, 0.60);
box-shadow:
0 16px 44px rgba(79, 133, 214, 0.32),
0 0 24px rgba(120, 239, 217, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.glass-mode .btn:hover,
body.glass-mode .card:hover,
body.glass-mode .socials a:hover,
body.glass-mode .theme-toggle:hover {
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 0.96),
0 18px 52px rgba(90, 130, 200, 0.22),
0 0 36px rgba(120, 239, 217, 0.36),
0 0 20px rgba(200, 140, 255, 0.20);
}

body.glass-mode .hero-card,
body.glass-mode .card,
body.glass-mode .contact-box {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.76);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 0.96),
inset 0 -1px 0 rgba(160, 200, 255, 0.18),
inset 1px 0 0 rgba(255, 255, 255, 0.40),
0 8px 32px rgba(80, 110, 170, 0.14),
0 28px 80px rgba(60, 80, 140, 0.12);
backdrop-filter: blur(34px) saturate(1.9) brightness(1.04);
-webkit-backdrop-filter: blur(34px) saturate(1.9) brightness(1.04);
}

body.glass-mode .hero-card::before {
border-color: rgba(255, 255, 255, 0.56);
box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.28);
}

body.glass-mode .hero-card::after {
background: linear-gradient(
90deg,
transparent,
rgba(121, 169, 255, 0.32),
rgba(120, 239, 217, 0.42),
rgba(255, 255, 255, 0.62),
rgba(240, 165, 214, 0.32),
rgba(200, 180, 255, 0.28),
transparent
);
}

body.glass-mode .profile-frame {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.94) 0%,
rgba(120, 239, 217, 0.76) 35%,
rgba(200, 140, 255, 0.62) 65%,
rgba(240, 165, 214, 0.70) 100%);
box-shadow:
0 16px 52px rgba(79, 133, 214, 0.30),
0 0 70px rgba(120, 239, 217, 0.30),
0 0 100px rgba(200, 140, 255, 0.18);
}

body.glass-mode .profile-frame::before {
border-color: rgba(255, 255, 255, 0.58);
box-shadow: 0 0 48px rgba(121, 169, 255, 0.26);
}

body.glass-mode .coin-face {
background: rgba(255, 255, 255, 0.42);
}

body.glass-mode .coin-front {
color: #4e88ff;
background: radial-gradient(circle, rgba(255, 255, 255, 0.82), rgba(121, 169, 255, 0.18) 72%);
}

body.glass-mode .coin-back {
filter: saturate(0.9) brightness(1.08) contrast(0.96);
}

body.glass-mode .project-img,
body.glass-mode .about-photo,
body.glass-mode .skill {
background: rgba(255, 255, 255, 0.24);
border-color: rgba(255, 255, 255, 0.68);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 0.90),
0 4px 18px rgba(80, 120, 190, 0.12);
backdrop-filter: blur(24px) saturate(1.6);
-webkit-backdrop-filter: blur(24px) saturate(1.6);
}

body.glass-mode .project-img {
background:
linear-gradient(135deg, rgba(121, 169, 255, 0.22), rgba(240, 165, 214, 0.18)),
rgba(255, 255, 255, 0.30);
}

body.glass-mode .about-photo {
background:
linear-gradient(135deg, rgba(120, 239, 217, 0.22), rgba(121, 169, 255, 0.18)),
rgba(255, 255, 255, 0.30);
}

body.glass-mode .skill {
color: #1f4f90;
}

body.glass-mode .socials a,
body.glass-mode .theme-toggle {
color: #2560d8;
background: rgba(255, 255, 255, 0.32);
border-color: rgba(255, 255, 255, 0.72);
box-shadow:
inset 0 1.5px 0 rgba(255, 255, 255, 0.92),
0 4px 16px rgba(100, 140, 220, 0.16);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
}

body.glass-mode footer {
background: rgba(255, 255, 255, 0.26);
border-top-color: rgba(140, 180, 230, 0.28);
backdrop-filter: blur(24px) saturate(1.5);
-webkit-backdrop-filter: blur(24px) saturate(1.5);
}

body.glass-mode .blob {
background: radial-gradient(circle, rgba(100, 210, 255, 0.64) 0%, rgba(120, 239, 217, 0.34) 50%, transparent 72%);
filter: blur(56px);
}

body.glass-mode .blob.two {
background: radial-gradient(circle, rgba(200, 130, 255, 0.56) 0%, rgba(240, 165, 214, 0.32) 50%, transparent 72%);
}

body.glass-mode {
--bg: #eef8ff;
--card: rgba(255, 255, 255, 0.34);
--blue: #3478ff;
--cyan: #19c9d2;
--text: #07182b;
--muted: #455f76;
--border: rgba(255, 255, 255, 0.62);
--particle: rgba(44, 128, 255, 0.68);
--particle-line: 44, 128, 255;
--particle-mouse: rgba(23, 201, 210, 0.28);
--profile-photo: url("/assets/img/rahman-abu2-bg-glasses.png");
--profile-photo-position: center top;
background:
linear-gradient(120deg, rgba(255, 255, 255, 0.96) 0%, rgba(221, 244, 255, 0.86) 26%, rgba(245, 239, 255, 0.88) 54%, rgba(231, 255, 249, 0.90) 100%),
linear-gradient(155deg, #eaf7ff 0%, #eff2ff 48%, #f7fbff 100%);
}

body.glass-mode::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
linear-gradient(115deg, transparent 0 16%, rgba(255, 255, 255, 0.36) 16% 16.8%, transparent 17% 34%, rgba(52, 120, 255, 0.11) 34% 34.8%, transparent 35%),
linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
background-size: 100% 100%, 58px 58px, 58px 58px;
mask-image: linear-gradient(to bottom, black 0%, black 72%, transparent 100%);
}

body.glass-mode::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(128deg, transparent 5%, rgba(52, 120, 255, 0.16) 18%, rgba(255, 255, 255, 0.30) 21%, transparent 34%),
linear-gradient(52deg, transparent 48%, rgba(25, 201, 210, 0.16) 57%, rgba(255, 255, 255, 0.26) 60%, transparent 72%),
linear-gradient(168deg, transparent 24%, rgba(208, 132, 255, 0.12) 42%, transparent 58%);
opacity: .95;
}

body.glass-mode header {
padding-top: 18px;
padding-bottom: 18px;
background: rgba(255, 255, 255, 0.58);
border-bottom-color: rgba(255, 255, 255, 0.78);
box-shadow:
0 22px 70px rgba(73, 100, 135, 0.12),
inset 0 -1px 0 rgba(120, 181, 255, 0.15);
backdrop-filter: blur(30px) saturate(1.65);
-webkit-backdrop-filter: blur(30px) saturate(1.65);
}

body.glass-mode .logo {
letter-spacing: .2px;
}

body.glass-mode nav a {
position: relative;
font-weight: 600;
color: #405a70;
}

body.glass-mode nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -8px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #3478ff, #19c9d2);
opacity: 0;
transform: scaleX(.55);
transition: .25s ease;
}

body.glass-mode nav a:hover::after {
opacity: 1;
transform: scaleX(1);
}

body.glass-mode .hero {
min-height: 100vh;
grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
gap: 64px;
padding-top: 132px;
}

body.glass-mode .hero::before {
content: "";
position: absolute;
inset: 98px 5% 28px;
z-index: 0;
border-radius: 36px;
border: 1px solid rgba(255, 255, 255, 0.52);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.12)),
linear-gradient(120deg, rgba(52, 120, 255, 0.10), transparent 46%, rgba(25, 201, 210, 0.12));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.86),
0 34px 110px rgba(67, 95, 128, 0.16);
backdrop-filter: blur(18px) saturate(1.35);
-webkit-backdrop-filter: blur(18px) saturate(1.35);
}

body.glass-mode .hero-text {
padding: 18px 0 18px 6px;
}

body.glass-mode .badge {
font-weight: 700;
letter-spacing: .5px;
color: #075f9d;
background: rgba(255, 255, 255, 0.54);
border-color: rgba(255, 255, 255, 0.82);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 12px 34px rgba(51, 127, 210, 0.14);
}

body.glass-mode .badge i {
color: #19a9b5;
filter: drop-shadow(0 5px 12px rgba(25, 201, 210, 0.32));
}

body.glass-mode .hero h1 {
max-width: 760px;
font-size: clamp(44px, 5.8vw, 78px);
line-height: 1.04;
letter-spacing: 0;
}

body.glass-mode .hero h1 span {
background: linear-gradient(92deg, #0d2a4a 0%, #3478ff 44%, #19c9d2 72%, #9b66f5 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

body.glass-mode .hero h2 {
display: inline-flex;
width: fit-content;
padding: 7px 14px;
border-radius: 999px;
color: #16456c;
background: rgba(255, 255, 255, 0.44);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.glass-mode .hero p {
font-size: 16px;
color: #3f5b73;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}

body.glass-mode .terminal {
max-width: 560px;
border-radius: 18px;
color: #0f5c95;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.28)),
rgba(255, 255, 255, 0.34);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.94),
0 16px 44px rgba(61, 104, 160, 0.12);
backdrop-filter: blur(24px) saturate(1.55);
-webkit-backdrop-filter: blur(24px) saturate(1.55);
}

body.glass-mode .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
font-weight: 700;
color: #0b243c;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.34));
border-color: rgba(255, 255, 255, 0.78);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.96),
0 13px 36px rgba(70, 105, 150, 0.14);
}

body.glass-mode .btn.primary {
color: #ffffff;
background: linear-gradient(135deg, #1f6dff 0%, #19c9d2 58%, #8d6cf8 100%);
border-color: rgba(255, 255, 255, 0.72);
box-shadow:
0 20px 52px rgba(31, 109, 255, 0.27),
0 10px 30px rgba(25, 201, 210, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.glass-mode .btn:hover,
body.glass-mode .card:hover,
body.glass-mode .socials a:hover,
body.glass-mode .theme-toggle:hover {
transform: translateY(-5px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.98),
0 22px 62px rgba(47, 101, 170, 0.20),
0 0 34px rgba(25, 201, 210, 0.22);
}

body.glass-mode .hero-card {
min-height: 520px;
border-radius: 38px;
overflow: visible;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16)),
rgba(255, 255, 255, 0.24);
border-color: rgba(255, 255, 255, 0.76);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.94),
inset 0 -1px 0 rgba(101, 157, 227, 0.12),
0 28px 90px rgba(47, 87, 128, 0.18);
backdrop-filter: blur(32px) saturate(1.65);
-webkit-backdrop-filter: blur(32px) saturate(1.65);
}

body.glass-mode .hero-card::before {
inset: -1px;
border-radius: inherit;
border-color: rgba(255, 255, 255, 0.78);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.78), transparent 28%, rgba(25, 201, 210, 0.24) 58%, rgba(151, 104, 246, 0.22));
mask-image: linear-gradient(#000 0 0);
box-shadow:
inset 0 0 76px rgba(255, 255, 255, 0.24),
0 0 0 1px rgba(255, 255, 255, 0.20);
}

body.glass-mode .hero-card::after {
width: 70%;
height: 140%;
left: 7%;
top: -26%;
border-radius: 999px;
background: linear-gradient(92deg, transparent, rgba(255, 255, 255, 0.54), rgba(25, 201, 210, 0.18), transparent);
filter: blur(4px);
transform: rotate(22deg);
animation: glassPanelSweep 7s ease-in-out infinite;
}

body.glass-mode .profile-frame {
width: 318px;
height: 318px;
padding: 9px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(25, 201, 210, 0.66) 38%, rgba(52, 120, 255, 0.70) 70%, rgba(154, 102, 245, 0.62));
box-shadow:
0 24px 76px rgba(31, 109, 255, 0.23),
0 0 64px rgba(25, 201, 210, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body.glass-mode .profile-frame::before {
inset: -28px;
border-width: 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.70);
box-shadow:
0 0 52px rgba(52, 120, 255, 0.15),
inset 0 0 44px rgba(255, 255, 255, 0.20);
}

body.glass-mode .profile-frame::after {
content: "Glass Ops";
position: absolute;
right: -92px;
bottom: 32px;
z-index: 4;
padding: 12px 16px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: .9px;
text-transform: uppercase;
color: #095179;
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(255, 255, 255, 0.82);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 18px 42px rgba(56, 104, 158, 0.16);
backdrop-filter: blur(18px) saturate(1.45);
-webkit-backdrop-filter: blur(18px) saturate(1.45);
}

body.glass-mode .coin-face {
background: rgba(255, 255, 255, 0.46);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.70);
}

body.glass-mode .coin-back {
filter: saturate(1.04) brightness(1.05) contrast(1.02);
}

body.glass-mode .card,
body.glass-mode .contact-box,
body.glass-mode .tools-source {
position: relative;
overflow: hidden;
border-radius: 26px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.28)),
rgba(255, 255, 255, 0.30);
border-color: rgba(255, 255, 255, 0.76);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.94),
0 18px 54px rgba(57, 92, 132, 0.13);
backdrop-filter: blur(26px) saturate(1.55);
-webkit-backdrop-filter: blur(26px) saturate(1.55);
}

body.glass-mode .card::before,
body.glass-mode .contact-box::before,
body.glass-mode .tools-source::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.64), transparent 34%, rgba(25, 201, 210, 0.13) 74%, transparent);
pointer-events: none;
}

body.glass-mode .card > *,
body.glass-mode .contact-box > *,
body.glass-mode .tools-source > * {
position: relative;
z-index: 1;
}

body.glass-mode .card:hover {
border-color: rgba(52, 120, 255, 0.36);
}

body.glass-mode .card i,
body.glass-mode .project-img i,
body.glass-mode .about-photo i,
body.glass-mode .tools-source i,
body.glass-mode .tools-source a {
color: #1f6dff;
}

body.glass-mode .card h3,
body.glass-mode .title h2 {
color: #0b243c;
}

body.glass-mode .card p,
body.glass-mode .about-text p,
body.glass-mode .contact-box p,
body.glass-mode .tools-intro,
body.glass-mode .tools-source {
color: #456078;
}

body.glass-mode .title span {
display: inline-flex;
padding: 7px 13px;
border-radius: 999px;
letter-spacing: 1.5px;
color: #0b6b9b;
background: rgba(255, 255, 255, 0.48);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

body.glass-mode .about-photo,
body.glass-mode .project-img,
body.glass-mode .skill,
body.glass-mode .tool-tags span {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22)),
linear-gradient(135deg, rgba(52, 120, 255, 0.13), rgba(25, 201, 210, 0.13));
border-color: rgba(255, 255, 255, 0.78);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.90),
0 12px 32px rgba(57, 102, 154, 0.11);
backdrop-filter: blur(22px) saturate(1.45);
-webkit-backdrop-filter: blur(22px) saturate(1.45);
}

body.glass-mode .about-photo {
font-size: 96px;
}

body.glass-mode .skill,
body.glass-mode .tool-tags span {
color: #103b62;
font-weight: 700;
}

body.glass-mode .socials a,
body.glass-mode .theme-toggle {
color: #1f6dff;
background: rgba(255, 255, 255, 0.50);
border-color: rgba(255, 255, 255, 0.80);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.94),
0 12px 30px rgba(58, 103, 161, 0.12);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
}

body.glass-mode footer {
background: rgba(255, 255, 255, 0.44);
border-top-color: rgba(255, 255, 255, 0.72);
color: #536a80;
backdrop-filter: blur(24px) saturate(1.45);
-webkit-backdrop-filter: blur(24px) saturate(1.45);
}

body.glass-mode .blob {
opacity: .62;
filter: blur(78px);
}

@media (max-width: 900px) {
body.glass-mode .hero {
grid-template-columns: 1fr;
gap: 34px;
padding-top: 116px;
}

}

@media (max-width: 900px) {
body.glass-mode .hero::before {
inset: 92px 4% 20px;
border-radius: 30px;
}

}

@media (max-width: 900px) {
body.glass-mode .hero-card {
min-height: 390px;
}

}

@media (max-width: 900px) {
body.glass-mode .profile-frame {
width: 250px;
height: 250px;
}

}

@media (max-width: 900px) {
body.glass-mode .profile-frame::after {
right: 50%;
bottom: -42px;
transform: translateX(50%);
}

}

@media (max-width: 768px) {
body.glass-mode header {
padding: 14px 5%;
}

}

@media (max-width: 768px) {
body.glass-mode .logo {
max-width: calc(100vw - 188px);
font-size: 16px;
}

}

@media (max-width: 768px) {
body.glass-mode .hero {
padding-top: 104px;
}

}

@media (max-width: 768px) {
body.glass-mode .hero-text {
padding: 0;
}

}

@media (max-width: 768px) {
body.glass-mode .hero h1 {
font-size: clamp(34px, 10vw, 48px);
}

}

@media (max-width: 768px) {
body.glass-mode .hero h2 {
font-size: 19px;
}

}

@media (max-width: 768px) {
body.glass-mode .buttons {
gap: 10px;
}

}

@media (max-width: 768px) {
body.glass-mode .btn {
width: 100%;
padding: 12px 16px;
}

}

@media (max-width: 768px) {
body.glass-mode .card,
body.glass-mode .contact-box {
padding: 22px;
}

}

@media (max-width: 768px) {
body.glass-mode .about-photo {
height: 250px;
font-size: 72px;
}

}

@media (max-width: 420px) {
body.glass-mode .logo {
max-width: calc(100vw - 132px);
font-size: 14px;
}

}

@media (max-width: 420px) {
body.glass-mode .hero-card {
min-height: 330px;
}

}

@media (max-width: 420px) {
body.glass-mode .profile-frame {
width: 210px;
height: 210px;
}

}

body.glass-mode {
  --theme-menu-bg: rgba(255, 255, 255, 0.92);
  --theme-menu-hover: rgba(0, 120, 180, 0.08);
  --theme-menu-active: rgba(0, 150, 210, 0.13);
}

body.glass-mode .theme-toggle-icon {
  color: #07111f;
}

body.glass-mode .coin-back {
background: var(--profile-photo) var(--profile-photo-position) / cover no-repeat;
}