:root {
     /* Classic 1984 Macintosh Beige Palette */
     --mac-beige: #e6dfcf;
     --mac-shadow: #c5bcab;
     --mac-highlight: #ffffff;
     --bezel-dark: #b5ad9b;
     --screen-bg: #1a1a1a;
     --accent-rainbow: linear-gradient(to bottom, #61bb46, #fdb827, #f58220, #e03a3e, #963d97, #009ddc);
 }

 /* Tab panel visibility */
 .tab-panel {
     display: none;
 }

 .tab-panel.active {
     display: block;
 }

 /* Projects panel — centres the Mac mockup */
 .mac-panel.active {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 40px 20px 60px;
     background: var(--finder-bg);
     overflow: hidden; /* prevent scaled stage from bleeding outside the finder */
 }

 /* Column wrapper: Mac case + fullscreen button stacked vertically */
 .mac-stage {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 48px;
 }

 /* Fullscreen button — retro Mac beige embossed style */
 .mac-fullscreen-btn {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 7px 18px;
     font-family: "Garamond", serif;
     font-style: italic;
     font-size: 13px;
     color: #5a5347;
     text-decoration: none;
     background-color: var(--mac-beige);
     border-radius: 6px;
     box-shadow:
         inset -1px -1px 3px var(--mac-shadow),
         inset 1px 1px 3px var(--mac-highlight),
         0 2px 6px rgba(0, 0, 0, 0.15);
     transition: box-shadow 0.12s, transform 0.12s;
     user-select: none;
 }

 .mac-fullscreen-btn:hover {
     box-shadow:
         inset -1px -1px 3px var(--mac-shadow),
         inset 1px 1px 3px var(--mac-highlight),
         0 4px 12px rgba(0, 0, 0, 0.22);
     transform: translateY(-1px);
 }

 .mac-fullscreen-btn:active {
     box-shadow:
         inset 1px 1px 3px var(--mac-shadow),
         inset -1px -1px 3px var(--mac-highlight);
     transform: translateY(0);
 }

 .mac-fullscreen-icon {
     font-size: 15px;
     line-height: 1;
     font-style: normal;
 }

 /* The main outer shell of the Mac */
 .macintosh-case {
     position: relative;
     width: 380px;
     height: 480px;
     background-color: var(--mac-beige);
     border-radius: 12px 12px 4px 4px;
     box-shadow:
         20px 30px 60px rgba(0, 0, 0, 0.2),
         /* Drop shadow on table */
         inset -2px -2px 5px var(--mac-shadow),
         inset 3px 3px 5px var(--mac-highlight);
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 25px;
     box-sizing: border-box;
 }

 /* The deeply recessed area around the screen */
 .recessed-bezel {
     width: 320px;
     height: 250px;
     background-color: var(--bezel-dark);
     border-radius: 18px;
     padding: 18px;
     box-sizing: border-box;
     box-shadow:
         inset 8px 10px 15px rgba(0, 0, 0, 0.3),
         inset -2px -2px 5px rgba(255, 255, 255, 0.2);
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* The container for the iframe/screen content */
 .screen-frame {
     position: relative;
     width: 100%;
     height: 100%;
     background-color: var(--screen-bg);
     border-radius: 8px;
     overflow: hidden;
     border: 3px solid #222;
 }

 /* The dynamic iframe */
 .mac-iframe {
     width: 100%;
     height: 100%;
     border: none;
     background: #000;
     transform: scale(0.5);
     transform-origin: 0 0;
     width: 200%;
     height: 200%;
 }

 /* The glass/CRT effect overlay */
 .crt-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     /* Allows interaction with iframe below */
     background:
         /* Scanlines */
         linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
         /* Screen glare/curvature */
         radial-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.2));
     background-size: 100% 3px, cover;
     z-index: 10;
 }

 /* Bottom section with Logo and Floppy drive */
 .chin-panel {
     width: 100%;
     margin-top: 50px;
     position: relative;
 }

 .floppy-slot-container {
     position: absolute;
     right: 0;
     top: 0;
     width: 160px;
     height: 12px;
     background: #222;
     border-radius: 2px;
     box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.6);
 }

 /* Small notch next to floppy */
 .floppy-slot-container::after {
     content: "";
     position: absolute;
     right: -10px;
     top: 4px;
     width: 4px;
     height: 4px;
     background: #333;
     border-radius: 50%;
 }

 /* Macintosh Logo Styling */
 .logo-area {
     position: absolute;
     left: 0;
     top: -10px;
     display: flex;
     align-items: center;
 }

 .apple-logo {
     width: 18px;
     height: 20px;
     background: var(--accent-rainbow);
     margin-right: 8px;
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     /* Placeholder shape */
     opacity: 0.8;
 }

 .mac-text {
     font-family: "Garamond", serif;
     font-style: italic;
     font-weight: bold;
     font-size: 14px;
     color: #7b7365;
     letter-spacing: -0.5px;
 }

 .mac-text span {
     font-weight: normal;
     font-size: 11px;
     margin-left: 4px;
 }

 /* The base/foot of the unit */
 .case-base {
     position: absolute;
     bottom: -30px;
     width: 100%;
     height: 30px;
     background-color: var(--mac-beige);
     box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.1);
     border-radius: 0 0 10px 10px;
     display: flex;
     align-items: center;
     padding: 0 20px;
     box-sizing: border-box;
 }

 .power-light {
     width: 4px;
     height: 4px;
     background: #333;
     border-radius: 50%;
 }

 /*
  * Mobile scaling — the macintosh case is fixed at 380×480px, which bleeds
  * past the finder boundary on narrow screens. Scale the whole .mac-stage
  * (case + fullscreen button) down proportionally, then pull up with a
  * negative margin-bottom to collapse the extra layout space that
  * transform:scale() leaves behind.
  *
  * Stage natural layout height ≈ 480px (case) + 48px (gap) + 34px (button) = 562px
  * margin-bottom formula: -(1 − scale) × 562px
  */

 /* ≤ 419px  (e.g. 375px iPhone) — scale 0.85, fits 335px available width */
 @media (max-width: 419px) {
     .mac-stage {
         transform: scale(0.85);
         transform-origin: top center;
         margin-bottom: -84px; /* (1 - 0.85) × 562 ≈ 84px */
     }
 }

 /* ≤ 359px  (e.g. 320px small phone) — scale 0.72, fits 280px available width */
 @media (max-width: 359px) {
     .mac-stage {
         transform: scale(0.72);
         transform-origin: top center;
         margin-bottom: -157px; /* (1 - 0.72) × 562 ≈ 157px */
     }
 }