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

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

body.monochrome-mode {
--bg: #f8efd9;
--card: rgba(255, 250, 236, 0.78);
--blue: #16815c;
--cyan: #e0444f;
--text: #272723;
--muted: #6b6252;
--border: rgba(42, 77, 59, 0.20);
--particle: rgba(28, 129, 92, 0.18);
--particle-line: 199, 63, 74;
--particle-mouse: rgba(229, 160, 43, 0.16);
--pencil-green: #16815c;
--pencil-red: #e0444f;
--pencil-yellow: #f1b82d;
--pencil-blue: #2876bd;
--pencil-wood: #d7a562;
--pencil-paper: #fff5d8;
--profile-photo: url("/assets/img/foto-rahman-pencil-display.webp");
background:
linear-gradient(90deg, transparent 0 72px, rgba(224, 68, 79, 0.24) 72px 74px, transparent 75px),
radial-gradient(circle at 13% 18%, rgba(22, 129, 92, 0.16), transparent 24%),
radial-gradient(circle at 90% 13%, rgba(241, 184, 45, 0.18), transparent 25%),
radial-gradient(circle at 76% 86%, rgba(40, 118, 189, 0.14), transparent 28%),
radial-gradient(circle at 34% 72%, rgba(224, 68, 79, 0.10), transparent 25%),
repeating-linear-gradient(0deg, transparent 0 30px, rgba(40, 118, 189, 0.10) 31px 32px),
repeating-linear-gradient(116deg, rgba(22, 129, 92, 0.035) 0 2px, transparent 2px 12px),
linear-gradient(135deg, #fff7df, #f1dfb8 52%, #fbefd2);
background-attachment: fixed;
}

body.monochrome-mode::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 20% 30%, rgba(224, 68, 79, 0.050), transparent 12%),
radial-gradient(circle at 70% 64%, rgba(22, 129, 92, 0.052), transparent 16%),
radial-gradient(circle at 54% 18%, rgba(241, 184, 45, 0.075), transparent 13%),
repeating-linear-gradient(115deg, transparent 0 9px, rgba(40, 118, 189, 0.030) 10px 11px),
repeating-linear-gradient(68deg, transparent 0 17px, rgba(224, 68, 79, 0.022) 18px 20px);
mix-blend-mode: multiply;
opacity: 0.76;
}

body.monochrome-mode section,
body.monochrome-mode footer {
position: relative;
z-index: 1;
}

body.monochrome-mode canvas {
opacity: 0.46;
mix-blend-mode: multiply;
}

body.monochrome-mode header {
background: rgba(255, 247, 225, 0.86);
border-bottom-color: rgba(22, 129, 92, 0.20);
box-shadow: 0 12px 28px rgba(90, 64, 30, 0.08);
}

body.monochrome-mode,
body.monochrome-mode a,
body.monochrome-mode p,
body.monochrome-mode span,
body.monochrome-mode strong,
body.monochrome-mode small,
body.monochrome-mode button,
body.monochrome-mode h1,
body.monochrome-mode h2,
body.monochrome-mode h3,
body.monochrome-mode h4,
body.monochrome-mode li,
body.monochrome-mode label,
body.monochrome-mode input,
body.monochrome-mode textarea {
font-family: "Patrick Hand", "Segoe Print", "Bradley Hand ITC", cursive;
letter-spacing: 0;
}

body.monochrome-mode i,
body.monochrome-mode .fa,
body.monochrome-mode .fa-solid,
body.monochrome-mode .fa-regular,
body.monochrome-mode .fa-brands {
font-family: "Font Awesome 6 Free" !important;
}

body.monochrome-mode .fa-brands {
font-family: "Font Awesome 6 Brands" !important;
}

body.monochrome-mode .logo,
body.monochrome-mode .title span,
body.monochrome-mode .title h2 {
font-family: "Patrick Hand", "Segoe Print", "Bradley Hand ITC", cursive;
letter-spacing: 0;
}

body.monochrome-mode .logo,
body.monochrome-mode .hero h1,
body.monochrome-mode .title h2,
body.monochrome-mode .card h3 {
color: #28271f;
text-shadow: 0.7px 0.8px 0 rgba(128, 80, 28, 0.10);
}

body.monochrome-mode .hero h1,
body.monochrome-mode .hero h2 {
font-family: "Patrick Hand", "Segoe Print", "Bradley Hand ITC", cursive;
letter-spacing: 0;
}

body.monochrome-mode .hero h1 {
font-size: clamp(48px, 6.2vw, 84px);
line-height: 1.02;
}

body.monochrome-mode .hero h2 {
color: #28715a;
font-size: clamp(28px, 3.2vw, 46px);
}

body.monochrome-mode .hero-text {
padding: 28px 28px 30px;
border-radius: 18px;
background:
linear-gradient(135deg, rgba(255, 250, 236, 0.72), rgba(250, 236, 200, 0.52)),
repeating-linear-gradient(0deg, transparent 0 30px, rgba(40, 118, 189, 0.095) 31px 32px),
repeating-linear-gradient(112deg, transparent 0 14px, rgba(224, 68, 79, 0.030) 15px 17px);
border: 1px solid rgba(22, 129, 92, 0.15);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.52),
0 22px 48px rgba(90, 64, 30, 0.10);
}

body.monochrome-mode .hero-text::before {
content: "";
position: absolute;
top: -13px;
left: 34px;
width: 118px;
height: 24px;
border-radius: 7px;
background:
linear-gradient(90deg, rgba(241, 184, 45, 0.36), rgba(22, 129, 92, 0.22), rgba(224, 68, 79, 0.20)),
repeating-linear-gradient(105deg, rgba(255,255,255,0.18) 0 4px, transparent 4px 10px);
transform: rotate(-1.4deg);
box-shadow: 0 8px 18px rgba(90, 64, 30, 0.07);
}

body.monochrome-mode .logo {
font-size: 24px;
}

body.monochrome-mode .logo span,
body.monochrome-mode nav a:hover,
body.monochrome-mode .title span,
body.monochrome-mode .card i,
body.monochrome-mode .project-img i {
color: var(--pencil-green);
}

body.monochrome-mode nav a,
body.monochrome-mode .hero p,
body.monochrome-mode .card p,
body.monochrome-mode .about-text p,
body.monochrome-mode .contact-box p {
color: #655e4f;
}

body.monochrome-mode .hero h1 span {
background:
linear-gradient(90deg, var(--pencil-green), var(--pencil-blue) 48%, var(--pencil-red)),
linear-gradient(transparent 62%, rgba(241, 184, 45, 0.42) 62% 88%, transparent 88%);
background-clip: text, border-box;
-webkit-background-clip: text, border-box;
color: transparent;
-webkit-text-fill-color: currentColor;
border-radius: 5px;
padding: 0 5px 2px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

body.monochrome-mode .badge {
background:
linear-gradient(transparent 50%, rgba(241, 184, 45, 0.32) 50% 86%, transparent 86%),
rgba(255, 250, 236, 0.72);
color: #1c684d;
border-color: rgba(22, 129, 92, 0.24);
box-shadow: 0 10px 24px rgba(90, 64, 30, 0.08);
transform: rotate(-0.25deg);
}

body.monochrome-mode .btn {
color: #24513f;
background: rgba(255, 250, 236, 0.70);
border: 1px solid rgba(22, 129, 92, 0.24);
box-shadow: 0 12px 28px rgba(90, 64, 30, 0.09);
}

body.monochrome-mode .btn.primary {
color: #fff8e8;
background:
linear-gradient(135deg, rgba(22, 129, 92, 0.96), rgba(40, 118, 189, 0.92), rgba(224, 68, 79, 0.88)),
repeating-linear-gradient(115deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 8px);
box-shadow: 0 14px 30px rgba(90, 64, 30, 0.16);
}

body.monochrome-mode .btn:hover {
transform: translateY(-3px);
box-shadow: 0 16px 34px rgba(90, 64, 30, 0.14);
}

body.monochrome-mode .hero-card,
body.monochrome-mode .card,
body.monochrome-mode .contact-box {
background:
linear-gradient(135deg, rgba(255, 250, 236, 0.90), rgba(246, 228, 188, 0.72)),
repeating-linear-gradient(115deg, transparent 0 9px, rgba(22, 129, 92, 0.026) 10px 11px),
repeating-linear-gradient(68deg, transparent 0 18px, rgba(224, 68, 79, 0.022) 19px 21px);
border: 1px solid rgba(22, 129, 92, 0.20);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
0 18px 38px rgba(90, 64, 30, 0.10);
backdrop-filter: blur(3px);
}

body.monochrome-mode .card {
border-radius: 18px;
position: relative;
overflow: hidden;
}

body.monochrome-mode .card::before {
content: "";
position: absolute;
top: 16px;
right: 18px;
width: 58px;
height: 10px;
border-radius: 999px;
background: rgba(241, 184, 45, 0.36);
mix-blend-mode: multiply;
transform: rotate(-1.4deg);
}

body.monochrome-mode .grid .card:nth-child(2n) i {
color: var(--pencil-blue);
}

body.monochrome-mode .grid .card:nth-child(3n) i {
color: var(--pencil-red);
}

body.monochrome-mode .grid .card:nth-child(2n)::before {
background: rgba(22, 129, 92, 0.28);
transform: rotate(1.6deg);
}

body.monochrome-mode .grid .card:nth-child(3n)::before {
background: rgba(224, 68, 79, 0.22);
transform: rotate(-1deg);
}

body.monochrome-mode .grid .card:nth-child(odd) {
transform: none;
}

body.monochrome-mode .grid .card:nth-child(even) {
transform: none;
}

body.monochrome-mode .card:hover {
border-color: rgba(22, 129, 92, 0.34);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
0 24px 44px rgba(90, 64, 30, 0.14);
}

body.monochrome-mode .grid .card:hover {
transform: translateY(-6px) rotate(0deg);
}

body.monochrome-mode .tools-intro,
body.monochrome-mode .tools-source,
body.monochrome-mode .tool-tags span {
font-family: "Patrick Hand", "Segoe Print", "Bradley Hand ITC", cursive;
letter-spacing: 0;
}

body.monochrome-mode .tools-intro {
font-size: 19px;
color: #655e4f;
}

body.monochrome-mode .tool-card > * {
position: relative;
z-index: 1;
}

body.monochrome-mode .tool-tags span {
font-size: 13px;
background:
linear-gradient(transparent 44%, rgba(241, 184, 45, 0.28) 44% 84%, transparent 84%),
rgba(255, 250, 236, 0.76);
border-color: rgba(22, 129, 92, 0.20);
color: #24513f;
box-shadow: none;
}

body.monochrome-mode .tool-tags span:nth-child(2n) {
background:
linear-gradient(transparent 44%, rgba(22, 129, 92, 0.22) 44% 84%, transparent 84%),
rgba(255, 250, 236, 0.76);
}

body.monochrome-mode .tool-tags span:nth-child(3n) {
background:
linear-gradient(transparent 44%, rgba(224, 68, 79, 0.20) 44% 84%, transparent 84%),
rgba(255, 250, 236, 0.76);
}

body.monochrome-mode .tools-source {
background: rgba(255, 250, 236, 0.76);
border: 1px solid rgba(22, 129, 92, 0.20);
box-shadow: 0 12px 28px rgba(90, 64, 30, 0.09);
color: #655e4f;
font-size: 15px;
}

body.monochrome-mode .hero-card {
border-radius: 24px;
animation: float 5s ease-in-out infinite;
}

body.monochrome-mode .hero-card::before {
inset: 16px;
border: 1px dashed rgba(22, 129, 92, 0.26);
border-radius: 20px;
}

body.monochrome-mode .hero-card::after {
background: repeating-linear-gradient(
105deg,
transparent 0 14px,
rgba(224, 68, 79, 0.08) 15px 17px,
transparent 18px 28px
);
animation: none;
transform: rotate(-5deg);
opacity: 0.58;
}

body.monochrome-mode .pencil-diary-props {
display: block;
position: absolute;
top: 96px;
right: 7.5%;
width: min(360px, 34vw);
height: 168px;
z-index: 3;
pointer-events: none;
opacity: 0.90;
filter: drop-shadow(0 14px 18px rgba(90, 64, 30, 0.12));
}

body.monochrome-mode .pencil-diary-props::before {
content: "";
position: absolute;
top: -4px;
right: 14px;
width: 132px;
height: 58px;
border-radius: 10px;
background:
linear-gradient(135deg, rgba(22, 129, 92, 0.20), rgba(241, 184, 45, 0.18), rgba(224, 68, 79, 0.13)),
repeating-linear-gradient(0deg, transparent 0 13px, rgba(40, 118, 189, 0.10) 14px 15px);
border: 1px solid rgba(22, 129, 92, 0.18);
transform: rotate(2.2deg);
box-shadow: 0 10px 18px rgba(90, 64, 30, 0.08);
}

body.monochrome-mode .pencil-diary-props::after {
content: "";
position: absolute;
top: -16px;
right: 188px;
width: 68px;
height: 22px;
border-radius: 5px 8px 6px 7px;
background:
linear-gradient(90deg, rgba(241, 184, 45, 0.32), rgba(22, 129, 92, 0.22), rgba(40, 118, 189, 0.18)),
repeating-linear-gradient(105deg, rgba(255,255,255,0.28) 0 4px, transparent 4px 9px);
transform: rotate(-3deg);
box-shadow: 0 8px 14px rgba(90, 64, 30, 0.07);
}

body.monochrome-mode .diary-highlighter {
position: absolute;
height: 18px;
border-radius: 999px 12px 999px 14px;
opacity: 0.66;
mix-blend-mode: multiply;
}

body.monochrome-mode .highlighter-yellow {
top: 20px;
right: 68px;
width: 178px;
background: rgba(241, 184, 45, 0.46);
transform: rotate(-2deg);
}

body.monochrome-mode .highlighter-pink {
top: 48px;
right: 22px;
width: 142px;
background: rgba(224, 68, 79, 0.30);
transform: rotate(1.4deg);
}

body.monochrome-mode .colored-pencil {
position: absolute;
right: 40px;
width: 176px;
height: 16px;
border-radius: 999px 10px 10px 999px;
background:
linear-gradient(90deg, #f3d5a0 0 12px, #3a2a1c 12px 16px, var(--pencil-color) 16px 72%, rgba(255,255,255,0.32) 72% 76%, var(--pencil-color) 76% 100%);
border: 1px solid rgba(57, 42, 26, 0.20);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.26),
0 8px 14px rgba(90, 64, 30, 0.10);
transform-origin: right center;
}

body.monochrome-mode .colored-pencil::before {
content: "";
position: absolute;
left: -18px;
top: -1px;
width: 20px;
height: 18px;
background:
linear-gradient(90deg, transparent 0 42%, var(--pencil-color) 43% 100%),
linear-gradient(135deg, #e7c38b 0 50%, #be8951 51% 100%);
clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

body.monochrome-mode .colored-pencil::after {
content: "";
position: absolute;
right: 11px;
top: 3px;
width: 50px;
height: 2px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.28);
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.08);
}

body.monochrome-mode .pencil-green {
--pencil-color: var(--pencil-green);
top: 88px;
transform: rotate(-12deg);
}

body.monochrome-mode .pencil-red {
--pencil-color: var(--pencil-red);
top: 110px;
right: 30px;
transform: rotate(7deg);
}

body.monochrome-mode .pencil-blue {
--pencil-color: var(--pencil-blue);
top: 132px;
right: 52px;
transform: rotate(-3deg);
}

body.monochrome-mode .diary-eraser {
position: absolute;
top: 72px;
right: 190px;
width: 92px;
height: 42px;
border-radius: 9px;
background:
linear-gradient(90deg, #e86a78 0 45%, #fff1dc 45% 100%);
border: 1px solid rgba(89, 63, 32, 0.24);
transform: rotate(-5deg);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.32),
0 10px 18px rgba(90, 64, 30, 0.11);
}

body.monochrome-mode .diary-eraser::before {
content: "";
position: absolute;
top: 5px;
bottom: 5px;
left: 42px;
width: 1.5px;
background: rgba(98, 61, 35, 0.24);
}

body.monochrome-mode .diary-eraser span {
position: absolute;
right: 10px;
top: 11px;
width: 26px;
height: 4px;
border-radius: 999px;
background: rgba(22, 129, 92, 0.22);
box-shadow: 0 9px 0 rgba(40, 118, 189, 0.15);
}

body.monochrome-mode .diary-sharpener {
position: absolute;
top: 72px;
right: 72px;
width: 76px;
height: 52px;
border-radius: 13px;
background:
linear-gradient(135deg, #39a873, #16815c 62%, #0f5f45),
repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 3px, transparent 3px 8px);
border: 1px solid rgba(16, 80, 57, 0.30);
transform: rotate(4deg);
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.22),
0 10px 18px rgba(90, 64, 30, 0.11);
}

body.monochrome-mode .diary-sharpener::before {
content: "";
position: absolute;
left: 21px;
top: 14px;
width: 28px;
height: 22px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, rgba(44, 29, 20, 0.74) 0 4px, transparent 4px),
radial-gradient(circle, #fff0c6 0 11px, #2f795b 12px 13px, transparent 14px);
}

body.monochrome-mode .diary-sharpener::after {
content: "";
position: absolute;
right: 9px;
top: 12px;
width: 5px;
height: 27px;
border-radius: 999px;
background: rgba(255, 252, 242, 0.42);
transform: rotate(15deg);
}

body.monochrome-mode .diary-sharpener span {
position: absolute;
left: 10px;
bottom: 8px;
width: 50px;
height: 2px;
background: rgba(255, 248, 218, 0.38);
transform: rotate(-5deg);
}

body.monochrome-mode .pencil-shaving {
position: absolute;
width: 31px;
height: 16px;
border-radius: 60% 38% 64% 36%;
background:
radial-gradient(ellipse at 72% 42%, rgba(224, 68, 79, 0.38) 0 16%, transparent 17%),
linear-gradient(135deg, #c6945d, #ead0a4 58%, #9c7043);
border: 1px solid rgba(91, 56, 32, 0.18);
clip-path: polygon(0 45%, 20% 6%, 72% 0, 100% 36%, 78% 100%, 25% 86%);
opacity: 0.70;
}

body.monochrome-mode .shaving-two {
background:
radial-gradient(ellipse at 72% 42%, rgba(22, 129, 92, 0.38) 0 16%, transparent 17%),
linear-gradient(135deg, #c6945d, #ead0a4 58%, #9c7043);
}

body.monochrome-mode .shaving-three {
background:
radial-gradient(ellipse at 72% 42%, rgba(40, 118, 189, 0.38) 0 16%, transparent 17%),
linear-gradient(135deg, #c6945d, #ead0a4 58%, #9c7043);
}

body.monochrome-mode .shaving-one {
right: 120px;
top: 127px;
transform: rotate(-28deg);
}

body.monochrome-mode .shaving-two {
right: 94px;
top: 136px;
transform: rotate(21deg) scale(0.78);
}

body.monochrome-mode .shaving-three {
right: 154px;
top: 132px;
transform: rotate(52deg) scale(0.64);
}

body.monochrome-mode .shaving-four {
right: 66px;
top: 128px;
transform: rotate(-10deg) scale(0.56);
}

body.monochrome-mode .profile-frame {
background:
repeating-linear-gradient(125deg, #16815c 0 2px, #f1b82d 3px 5px, #e0444f 6px 8px, #2876bd 9px 11px, #fff2d0 12px 15px);
box-shadow:
0 18px 38px rgba(90, 64, 30, 0.14);
}

body.monochrome-mode .profile-frame::before {
border-color: rgba(22, 129, 92, 0.30);
border-style: dashed;
}

body.monochrome-mode .coin-face {
background: #fff5d8;
}

body.monochrome-mode .coin-front {
color: var(--pencil-green);
background:
radial-gradient(circle, rgba(255,255,255,0.76), rgba(242, 222, 181, 0.88) 72%),
repeating-linear-gradient(120deg, rgba(224, 68, 79, 0.10) 0 1px, transparent 1px 7px),
repeating-linear-gradient(62deg, transparent 0 10px, rgba(22, 129, 92, 0.07) 11px 12px);
}

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

body.monochrome-mode .project-img,
body.monochrome-mode .about-photo {
background:
linear-gradient(135deg, rgba(255, 250, 236, 0.82), rgba(239, 218, 177, 0.62)),
repeating-linear-gradient(125deg, rgba(22, 129, 92, 0.05) 0 1px, transparent 1px 9px),
repeating-linear-gradient(58deg, transparent 0 13px, rgba(224, 68, 79, 0.04) 14px 15px);
border: 1px solid rgba(22, 129, 92, 0.20);
box-shadow: inset 0 0 18px rgba(90, 64, 30, 0.06);
}

body.monochrome-mode .about-photo i {
color: var(--pencil-blue);
filter: drop-shadow(2px 2px 0 rgba(90, 64, 30, 0.10));
}

body.monochrome-mode .skill {
background:
linear-gradient(transparent 42%, rgba(40, 118, 189, 0.18) 42% 82%, transparent 82%),
rgba(255, 250, 236, 0.74);
border: 1px solid rgba(22, 129, 92, 0.20);
color: #24513f;
box-shadow: none;
transform: none;
}

body.monochrome-mode .skills .skill:nth-child(2n) {
background:
linear-gradient(transparent 42%, rgba(241, 184, 45, 0.24) 42% 82%, transparent 82%),
rgba(255, 250, 236, 0.74);
transform: none;
}

body.monochrome-mode .skills .skill:nth-child(3n) {
background:
linear-gradient(transparent 42%, rgba(224, 68, 79, 0.19) 42% 82%, transparent 82%),
rgba(255, 250, 236, 0.74);
}

body.monochrome-mode .title span {
display: inline-block;
padding: 0 10px;
border-radius: 7px 9px 6px 8px;
background:
linear-gradient(transparent 48%, rgba(241, 184, 45, 0.32) 48% 86%, transparent 86%);
transform: none;
}

body.monochrome-mode .socials a,
body.monochrome-mode .theme-toggle {
color: #24513f;
background: rgba(255, 250, 236, 0.78);
border-color: rgba(22, 129, 92, 0.22);
box-shadow: 0 12px 28px rgba(90, 64, 30, 0.09);
}

body.monochrome-mode footer {
background: rgba(255, 250, 236, 0.68);
border-top-color: rgba(22, 129, 92, 0.18);
color: #655e4f;
font-size: 17px;
}

body.monochrome-mode .blob {
background: radial-gradient(circle, rgba(224, 68, 79, 0.16), rgba(22, 129, 92, 0.10) 46%, transparent 68%);
filter: blur(72px);
}

body.monochrome-mode {
  --theme-menu-bg: rgba(255, 247, 225, 0.95);
  --theme-menu-hover: rgba(22, 129, 92, 0.08);
  --theme-menu-active: rgba(224, 68, 79, 0.13);
}

@media (max-width: 768px) {
body.monochrome-mode .logo {
    max-width: calc(100vw - 202px);
    font-size: 19px;
  }

}

@media (max-width: 768px) {
body.monochrome-mode .hero h1 {
    font-size: clamp(36px, 11vw, 54px);
    line-height: 1.05;
  }

}

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

}

@media (max-width: 768px) {
body.monochrome-mode .hero-text {
    padding: 24px 20px;
  }

}

@media (max-width: 768px) {
body.monochrome-mode .pencil-diary-props {
    top: 82px;
    right: 4%;
    width: 230px;
    height: 106px;
    transform: scale(0.72);
    transform-origin: top right;
    opacity: 0.82;
  }

}

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

}

@media (max-width: 420px) {
body.monochrome-mode .hero h1 {
    font-size: 34px;
  }

}

@media (max-width: 420px) {
body.monochrome-mode .pencil-diary-props {
    top: 76px;
    right: 0;
    transform: scale(0.56);
    opacity: 0.62;
  }

}

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