html {
     scroll-behavior: smooth;
 }

 @font-face {
     font-family: 'MiniWakuwaku';
     src: url('font/mini-wakuwaku.otf') format('opentype');
 }

 @font-face {
     font-family: 'MiniWakukuMaru';
     src: url('font/mini-wakuwaku-maru.otf') format('opentype');
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --y: #FFE234;
     --y2: #FFD100;
     --ink: #3d2817;
     --soft: #fff8ee;
 }

 body {
     background: var(--y);
     font-family: 'Nunito', sans-serif;
     color: var(--ink);
     cursor: url('cursor/hand_open.png') 12 0, auto;
     transition: background .3s, color .3s;
 }

 * {
     cursor: url('cursor/hand_open.png') 12 0, auto;
 }

 a {
     cursor: url('cursor/hand_point_link .png') 12 0, pointer;
 }

 a:hover {
     cursor: url('cursor/hand_point_link .png') 12 0, pointer;
 }

 button {
     cursor: url('cursor/hand_point.png') 12 0, pointer;
 }

 button:active {
     cursor: url('cursor/hand_closed.png') 12 0, grabbing;
 }

 [onclick] {
     cursor: url('cursor/hand_point.png') 12 0, pointer;
 }

 [onclick]:active {
     cursor: url('cursor/hand_closed.png') 12 0, grabbing;
 }

 /* ─── Glitter ─── */
 .glitter {
     position: fixed;
     pointer-events: none;
     font-size: 1.5rem;
     animation: glitterFall 1.5s ease-out forwards;
 }

 @keyframes glitterFall {
     0% {
         opacity: 1;
         transform: translate(0, 0) scale(1);
     }

     100% {
         opacity: 0;
         transform: translate(var(--tx), var(--ty)) scale(0);
     }
 }

 .card {
     scroll-margin-top: 30px;
 }

 /* ─── Cassette ─── */
 .cassette-btn {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 998;
     width: 132px;
     height: 84px;
     border-radius: 18px;
     background: white;
     border: 3px solid var(--ink);
     box-shadow: 3px 3px 0 var(--ink);
     cursor: url('cursor/hand_point.png') 12 0, pointer;
     overflow: hidden;
     transition: transform .15s;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 6px;
 }

 .cassette-btn:hover {
     transform: translate(-2px, -2px);
 }

 .cassette-btn:active {
     transform: translate(1px, 1px);
 }

 .cassette-btn img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
 }

 .music-note {
     position: fixed;
     pointer-events: none;
     font-size: 1.3rem;
     animation: noteFly 1.2s ease-out forwards;
 }

 @keyframes noteFly {
     0% {
         opacity: 1;
         transform: translate(0, 0) scale(1) rotate(0deg);
     }

     100% {
         opacity: 0;
         transform: translate(var(--nx), var(--ny)) scale(0.4) rotate(var(--nr));
     }
 }

 /* ─── Now playing ─── */
 .now-playing {
     position: fixed;
     top: 20px;
     right: 150px;
     z-index: 999;
     background: white;
     border: 3px solid var(--ink);
     border-radius: 99px;
     padding: 8px 16px;
     display: flex;
     align-items: center;
     gap: 8px;
     box-shadow: 3px 3px 0 var(--ink);
     opacity: 0;
     transform: translateX(12px) scale(0.95);
     transform-origin: right center;
     transition: opacity .25s, transform .25s;
     pointer-events: none;
     white-space: nowrap;
 }

 .now-playing.visible {
     opacity: 1;
     transform: translateX(0) scale(1);
 }

 .now-playing .np-bars {
     display: flex;
     align-items: flex-end;
     gap: 2px;
     height: 16px;
 }

 .now-playing .np-bars span {
     display: block;
     width: 3px;
     background: #ff6b8a;
     border-radius: 2px;
     animation: barBounce 0.6s ease-in-out infinite alternate;
 }

 .now-playing .np-bars span:nth-child(1) {
     height: 6px;
     animation-delay: 0s;
 }

 .now-playing .np-bars span:nth-child(2) {
     height: 14px;
     animation-delay: .1s;
 }

 .now-playing .np-bars span:nth-child(3) {
     height: 9px;
     animation-delay: .2s;
 }

 .now-playing .np-bars span:nth-child(4) {
     height: 14px;
     animation-delay: .05s;
 }

 .now-playing .np-bars span:nth-child(5) {
     height: 6px;
     animation-delay: .15s;
 }

 @keyframes barBounce {
     from {
         transform: scaleY(0.3);
     }

     to {
         transform: scaleY(1);
     }
 }

 .now-playing .np-bars.paused span {
     animation-play-state: paused;
 }

 .now-playing .np-text {
     font-family: 'MiniWakukuMaru', cursive;
     font-size: .8rem;
     color: var(--ink);
 }

 /* ─── Volume ─── */
 .volume-control {
     position: fixed;
     top: 115px;
     right: 20px;
     z-index: 999;
     background: white;
     border: 3px solid var(--ink);
     border-radius: 99px;
     padding: 8px 12px;
     display: flex;
     align-items: center;
     gap: 8px;
     box-shadow: 3px 3px 0 var(--ink);
     opacity: 0;
     visibility: hidden;
     transform: translateY(-8px);
     transition: all .25s ease;
 }

 .volume-control.visible {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .volume-control i {
     color: var(--ink);
     font-size: 0.9rem;
 }

 .volume-control input[type="range"] {
     width: 90px;
     accent-color: #ff6b8a;
 }

 .volume-control input[type="range"]:hover {
     cursor: url('cursor/hand_point.png') 12 0, pointer;
 }

 @media (max-width:768px) {
     .cassette-btn {
         display: none !important;
     }

     .volume-control {
         display: none !important;
     }

     .now-playing {
         right: 20px;
         top: 20px;
     }
 }

 /* ─── Email FAB ─── */
 .email-wrap {
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 999;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     gap: 10px;
 }

 .email-tooltip {
     background: white;
     border: 3px solid var(--ink);
     border-radius: 99px;
     padding: 10px 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1px;
     pointer-events: none;
     opacity: 0;
     transform: translateY(8px) scale(0.95);
     transform-origin: bottom right;
     transition: opacity .2s, transform .2s;
     white-space: nowrap;
     box-shadow: 3px 3px 0 var(--ink);
     position: relative;
 }

 .email-tooltip::after {
     content: '';
     position: absolute;
     bottom: -15px;
     right: 28px;
     border: 8px solid transparent;
     border-top-color: var(--ink);
 }

 .email-tooltip::before {
     content: '';
     position: absolute;
     bottom: -11px;
     right: 29px;
     border: 7px solid transparent;
     border-top-color: white;
     z-index: 1;
 }

 .email-tooltip .tt-label {
     font-family: 'MiniWakukuMaru', cursive;
     font-size: .8rem;
     color: #9a8060;
     letter-spacing: .3px;
 }

 .email-tooltip .tt-addr {
     font-family: 'Nunito', sans-serif;
     font-size: .95rem;
     font-weight: 700;
     color: var(--ink);
 }

 .email-btn {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: var(--ink);
     color: var(--y);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     text-decoration: none;
     box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
     transition: transform .2s, background .2s;
     cursor: url('cursor/hand_point_link .png') 12 0, pointer;
     flex-shrink: 0;
 }

 .email-btn:hover {
     transform: scale(1.1);
     background: #ff6b8a;
     color: white;
 }

 .email-wrap:hover .email-tooltip {
     opacity: 1;
     transform: translateY(0) scale(1);
 }

 /* ─── Page width ─── */
 @media(max-width:767px) {
     .page {
         width: 100vw;
         max-width: 100%;
     }
 }

 @media(min-width:768px) {
     .page {
         width: 100vw;
         max-width: 1000px;
     }
 }

 @media(min-width:1024px) {
     .page {
         width: 100vw;
         max-width: 1200px;
     }
 }

 @media(min-width:1440px) {
     .page {
         width: 100vw;
         max-width: 1400px;
     }
 }

 /* ─── Keyframes ─── */
 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 @keyframes popIn {
     from {
         opacity: 0;
         transform: scale(0.8) translateY(12px);
     }

     to {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }

 @keyframes shimmer {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.55;
     }
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes wiggle {

     0%,
     100% {
         transform: rotate(-2deg);
     }

     50% {
         transform: rotate(2deg);
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes modalPop {
     from {
         opacity: 0;
         transform: scale(0.92);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes squish {
     0% {
         transform: scale(1);
     }

     20% {
         transform: scale(1.3, 0.6);
     }

     40% {
         transform: scale(0.9, 1.15);
     }

     60% {
         transform: scale(1.05, 0.95);
     }

     80% {
         transform: scale(0.98, 1.02);
     }

     100% {
         transform: scale(1);
     }
 }

 .squishing {
     animation: squish 0.4s ease-out;
 }

 /* ─── Layout ─── */
 .page {
     max-width: 1000px;
     margin: 0 auto;
     padding: 0 12px 48px;
     transition: max-width .3s ease;
 }

 .hero {
     text-align: center;
     padding: 36px 16px 0;
     animation: slideUp .6s ease both;
 }

 .logo-wrap {
     display: inline-block;
     animation: float 3s ease-in-out infinite;
 }

 .site-name {
     font-family: 'MiniWakukuMaru', cursive;
     font-size: 2.2rem;
     color: var(--ink);
     letter-spacing: .5px;
     margin-top: 10px;
     line-height: 1.1;
 }

 .site-name .accent {
     color: #ff6b8a;
 }

 .tagline {
     font-size: 1.05rem;
     color: #6b5e4a;
     margin-top: 5px;
     letter-spacing: .3px;
 }

 .stars-row {
     display: flex;
     justify-content: center;
     gap: 6px;
     margin: 12px 0 20px;
     font-size: 1rem;
     animation: shimmer 2.5s ease-in-out infinite;
 }

 .spin-star {
     display: inline-block;
     animation: spin 6s linear infinite;
 }

 /* ─── Nav ─── */
 .pill-nav {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 8px;
     padding: 0 16px 24px;
 }

 .pill-nav a {
     text-decoration: none;
     background: white;
     color: var(--ink);
     font-size: 1rem;
     font-weight: 700;
     padding: 8px 16px;
     border-radius: 99px;
     transition: transform .15s, background .15s;
     font-family: 'MiniWakukuMaru', cursive;
     letter-spacing: .3px;
 }

 .pill-nav a:hover {
     background: var(--ink);
     color: var(--y);
     transform: scale(1.06);
 }

 @media(max-width:480px) {
    .about-row {
         flex-direction: column;
         align-items: center;
     }

     .about-text {
         width: 100%;
     }

     .avi {
         margin-bottom: 12px;
     }

     .pill-nav {
         gap: 6px;
         padding: 0 8px 24px;
     }

     .pill-nav a {
         font-size: .7rem;
         padding: 6px 12px;
     }
 }

 /* ─── Cards ─── */
 .card {
     background: white;
     border-radius: 28px;
     margin: 0 12px 16px;
     padding: 24px 18px;
     animation: popIn .5s ease both;
 }

 .card:nth-child(1) {
     animation-delay: .05s;
 }

 .card:nth-child(2) {
     animation-delay: .1s;
 }

 .card:nth-child(3) {
     animation-delay: .15s;
 }

 .card:nth-child(4) {
     animation-delay: .2s;
 }

 .card:nth-child(5) {
     animation-delay: .25s;
 }

 .sec-head {
     display: flex;
     align-items: center;
     gap: 9px;
     margin-bottom: 16px;
 }

 .sec-icon {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: var(--y);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     flex-shrink: 0;
 }

 .sec-title {
     font-family: 'MiniWakukuMaru', cursive;
     font-size: 1.5rem;
     color: var(--ink);
 }

 /* ─── Gallery tabs ─── */
 .tabs-wrapper {
     display: flex;
     gap: 10px;
     margin-bottom: 18px;
     border-bottom: 2px solid #ffe8f0;
 }

 .tab-btn {
     background: none;
     border: none;
     font-family: 'MiniWakukuMaru', cursive;
     font-size: 1.1rem;
     color: #b0a090;
     padding: 10px 14px;
     cursor: url('cursor/hand_point_link .png') 12 0, pointer;
     position: relative;
     transition: color .2s;
     border-bottom: 3px solid transparent;
     margin-bottom: -2px;
 }

 .tab-btn.active {
     color: var(--ink);
     border-bottom-color: var(--y2);
 }

 .tab-btn:hover {
     color: var(--ink);
 }

 @media(max-width:480px) {
    .about-row {
         flex-direction: column;
         align-items: center;
     }

     .about-text {
         width: 100%;
     }

     .avi {
         margin-bottom: 12px;
     }

     .tabs-wrapper {
         gap: 6px;
         margin-bottom: 12px;
     }

     .tab-btn {
         font-size: .85rem;
         padding: 8px 10px;
     }
 }

 /* ─── Pinterest masonry ─── */
 .masonry-grid {
     columns: 4;
     column-gap: 12px;
 }

 @media(max-width:480px) {
    .about-row {
         flex-direction: column;
         align-items: center;
     }

     .about-text {
         width: 100%;
     }

     .avi {
         margin-bottom: 12px;
     }

     .masonry-grid {
         columns: 2;
         column-gap: 8px;
     }
 }

 @media(min-width:481px) and (max-width:768px) {
    .about-row {
         flex-direction: column;
         align-items: center;
     }

     .about-text {
         width: 100%;
     }

     .avi {
         margin-bottom: 12px;
     }

     .masonry-grid {
         columns: 3;
     }
 }

 .pin-item {
     break-inside: avoid;
     margin-bottom: 12px;
     display: flex;
     flex-direction: column;
 }

 .pin-img-wrap {
     border-radius: 16px;
     overflow: hidden;
     background: #f5f0e8;
     cursor: url('cursor/hand_point_link .png') 12 0, pointer;
     position: relative;
 }

 .pin-img-wrap:hover .pin-hover-overlay {
     opacity: 1;
 }

 .pin-hover-overlay {
     position: absolute;
     inset: 0;
     background: rgba(61, 40, 23, 0.14);
     opacity: 0;
     transition: opacity .2s;
     border-radius: 16px;
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
     padding: 10px;
 }

 .pin-zoom-btn {
     background: var(--y);
     border-radius: 50%;
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     color: var(--ink);
     font-weight: 700;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }

 .pin-img-wrap img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 16px;
     transition: transform .22s;
 }

 .pin-img-wrap:hover img {
     transform: scale(1.04);
 }

 .pin-caption {
     font-family: 'MiniWakukuMaru', cursive;
     font-size: .85rem;
     font-weight: 700;
     color: var(--ink);
     margin: 7px 4px 2px;
 }

 .pin-sub {
     font-size: .75rem;
     color: #9a8060;
     margin: 0 4px;
 }

 .gallery-empty {
     text-align: center;
     color: #9a8060;
     padding: 32px 0;
     font-size: 1rem;
 }

 /* ─── IMAGE MODAL (fixed & improved) ─── */
 .modal-backdrop {
     display: none;
     position: fixed;
     inset: 0;
     z-index: 2000;
     background: rgba(0, 0, 0, 0.82);
     animation: fadeIn .2s ease;
     /* true centering via flex */
     align-items: center;
     justify-content: center;
 }

 .modal-backdrop.open {
     display: flex;
 }

 .modal-box {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background: var(--soft);
     border-radius: 24px;
     padding: 18px;
     max-width: min(92vw, 900px);
     max-height: 92vh;
     width: auto;
     animation: modalPop .22s ease both;
     box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
 }

 .modal-img {
     display: block;
     max-width: 100%;
     max-height: calc(92vh - 120px);
     width: auto;
     height: auto;
     object-fit: contain;
     border-radius: 14px;
     /* pixel-art friendly — no blurry upscaling */
     image-rendering: auto;
 }

 /* caption strip below image */
 .modal-caption-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     margin-top: 12px;
     gap: 12px;
 }

 .modal-caption-text {
     font-family: 'MiniWakukuMaru', cursive;
     font-size: 1rem;
     color: var(--ink);
     flex: 1;
     text-align: center;
 }

 /* close button — top-right of the box */
 .modal-close {
     position: absolute;
     top: -14px;
     right: -14px;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: var(--ink);
     color: var(--y);
     border: none;
     font-size: 1.1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: url('cursor/hand_point.png') 12 0, pointer;
     transition: transform .15s, background .15s;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
     z-index: 1;
 }

 .modal-close:hover {
     transform: scale(1.12);
     background: #ff6b8a;
 }

 /* prev / next arrows */
 .modal-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: white;
     border: 2px solid var(--ink);
     color: var(--ink);
     font-size: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: url('cursor/hand_point.png') 12 0, pointer;
     transition: background .15s, transform .15s;
     box-shadow: 2px 2px 0 var(--ink);
 }

 .modal-arrow:hover {
     background: var(--y);
     transform: translateY(-50%) scale(1.1);
 }

 .modal-arrow.prev {
     left: -54px;
 }

 .modal-arrow.next {
     right: -54px;
 }

 @media(max-width:700px) {
    .about-row {
         flex-direction: column;
         align-items: center;
     }

     .about-text {
         width: 100%;
     }

     .avi {
         margin-bottom: 12px;
     }

     .modal-arrow.prev {
         left: 4px;
     }

     .modal-arrow.next {
         right: 4px;
     }

     .modal-box {
         padding: 12px;
         border-radius: 18px;
     }
 }

 /* ─── About ─── */
 .about-row {
     display: flex;
     gap: 14px;
     align-items: flex-start;

 }

 .avi {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background: var(--y);
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     animation: wiggle 3s ease-in-out infinite;
 }

 .about-text {
     font-size: 1.05rem;
     line-height: 1.65;
     color: var(--ink);
 }

 .about-text strong {
     color: var(--ink);
 }

 /* ─── News ─── */
 .news-list {
     display: flex;
     flex-direction: column;
     gap: 9px;
 }

 .n-item {
     background: #fffbe6;
     border-radius: 14px;
     padding: 12px 14px;
     border-left: 3px solid var(--y2);
 }

 .n-date {
     font-size: .85rem;
     color: #9a8060;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .5px;
 }

 .n-text {
     font-size: 1rem;
     color: #3a2e20;
     margin-top: 3px;
     line-height: 1.5;
 }

 /* ─── Reviews ─── */
 .review-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 14px;
 }

 .review-card {
     background: #fffdf8;
     border-radius: 18px;
     padding: 16px;
     border-left: 4px solid var(--y2);
     transition: transform .15s;
 }

 .review-card:hover {
     transform: translateY(-3px);
 }

 .review-header {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
 }

 .reviewer-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--y);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     flex-shrink: 0;
 }

 .reviewer-info {
     flex: 1;
 }

 .reviewer-name {
     font-family: 'MiniWakukuMaru', cursive;
     font-size: 1.1rem;
     color: var(--ink);
     font-weight: 600;
 }

 .reviewer-title {
     font-size: .9rem;
     color: #9a8060;
 }

 .review-stars {
     color: #ff6b8a;
     font-size: 1rem;
     letter-spacing: 2px;
     margin: 8px 0;
 }

 .review-text {
     font-size: 1rem;
     color: #3a2e20;
     line-height: 1.5;
 }

 /* ─── Commissions ─── */
 .comm-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
 }

 .c-item {
     background: #fffdf8;
     border-radius: 18px;
     padding: 16px 12px;
     text-align: center;
     transition: transform .15s;
 }

 .c-item:hover {
     transform: translateY(-3px);
 }

 .c-item .ci {
     font-size: 1.5rem;
     margin-bottom: 5px;
 }

 .c-item .ctype {
     font-family: 'MiniWakukuMaru', cursive;
     font-size: 1.2rem;
     color: var(--ink);
 }

 .c-item .cprice {
     font-size: 1.5rem;
     font-weight: 700;
     color: #ff6b8a;
     margin: 4px 0;
 }

 .c-item .cdesc {
     font-size: .9rem;
     color: #7a6a5a;
     line-height: 1.4;
 }

 .open-pill {
     display: inline-block;
     background: #e8fbe8;
     color: #2a7a3a;
     font-size: .67rem;
     font-weight: 700;
     border-radius: 99px;
     padding: 3px 10px;
     margin-top: 8px;
 }

 /* ─── Contact ─── */
 .contact-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
 }

 .ct-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
     background: var(--ink);
     color: var(--y);
     text-decoration: none;
     font-family: 'MiniWakukuMaru', cursive;
     font-size: .95rem;
     padding: 10px 6px;
     border-radius: 12px;
     letter-spacing: .2px;
     transition: transform .15s, opacity .15s;
     min-height: 48px;
     flex-direction: column;
     text-align: center;
 }

 .ct-btn:hover {
     opacity: .82;
     transform: scale(1.04);
 }

 .ct-btn .ci2 {
     font-size: 1.2rem;
 }

 @media(max-width:480px) {
     .about-row {
         flex-direction: column;
         align-items: center;
     }

     .about-text {
         width: 100%;
     }

     .avi {
         margin-bottom: 12px;
     }

     .contact-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 6px;
     }

     .ct-btn {
         font-size: .65rem;
         padding: 8px 4px;
         min-height: 40px;
     }

     .ct-btn .ci2 {
         font-size: .95rem;
     }
 }

 .footer {
     text-align: center;
     padding: 14px 0 0;
     font-size: .75rem;
     color: #8a7a60;
 }

 /* ─── Dark theme ─── */
 body.dark-theme {
     --y: #2b1b10;
     --y2: #ede2da;
     --ink: #ffd84d;
     --soft: #3a2416;
 }

 body.dark-theme .card,
 body.dark-theme .cassette-btn,
 body.dark-theme .now-playing,
 body.dark-theme .volume-control,
 body.dark-theme .email-tooltip,
 body.dark-theme .pill-nav a {
     background: var(--soft) !important;
     color: var(--ink) !important;
 }

 .theme-btn {
     position: fixed;
     bottom: 20px;
     left: 20px;
     z-index: 1000;
     width: 58px;
     height: 58px;
     border-radius: 50%;
     border: 3px solid var(--ink);
     background: var(--soft);
     color: var(--ink);
     font-size: 1.4rem;
     box-shadow: 3px 3px 0 var(--ink);
     cursor: url('cursor/hand_point.png') 12 0, pointer;
     transition: transform .15s;
 }

 .theme-btn:hover {
     transform: scale(1.08);
 }