/* =============================================
   PHOEBE CHO PORTFOLIO — style.css
   Exact values from Figma inspect
   ============================================= */

/* --- Web Font via @font-face --- */
@font-face {
  font-family: 'SFPro';
  src: url('fonts/SFProDisplay-Regular.woff2') format('woff2'),
       url('fonts/SFProDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SFPro';
  src: url('fonts/SFProDisplay-Medium.woff2') format('woff2'),
       url('fonts/SFProDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SFPro';
  src: url('fonts/SFProDisplay-Semibold.woff2') format('woff2'),
       url('fonts/SFProDisplay-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SFPro';
  src: url('fonts/SFProDisplay-Bold.woff2') format('woff2'),
       url('fonts/SFProDisplay-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Variables (exact Figma palette) --- */
:root {
  /* Figma exact colors */
  --c-page-bg:    #FCFCFC;
  --c-frame-bg:   #EEEEEE;
  --c-frame-border: #D6D6D6;
  --c-white:      #FFFFFF;
  --c-sidebar-bg: #F8F8F8;
  --c-sidebar-border: #DDDDDD;
  --c-main-border: #DFDEDE;
  --c-highlight:  #E6E6E6;
  --c-divider:    #F2F2F2;
  --c-text:       #000000;
  --c-label:      #A9A9A9;
  --c-section-label: #B0B0B0;
  --c-active-link: #5598F2;
  --c-dot-red:    #FF4C58;
  --c-dot-yellow: #FFC600;
  --c-dot-green:  #00CA48;
  --c-muted:      #535A5A;

  /* Typography — exact Figma values */
  --f-ui: 'SFPro', -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --f-ui-alt: 'SFPro', -apple-system, 'SF UI Display', 'Helvetica Neue', Arial, sans-serif;

  /* link states */
  --link:         #0066cc;
  --link-visited: #551a8b;
  --link-hover:   #0044aa;
  --link-active:  #cc0000;

  /* overlay */
  --overlay-bg: rgba(0,0,0,0.4);
}

/* --- Dark mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --c-page-bg:    #1a1a1a;
    --c-frame-bg:   #2a2a2a;
    --c-frame-border: #444;
    --c-white:      #222;
    --c-sidebar-bg: #252525;
    --c-sidebar-border: #3a3a3a;
    --c-main-border: #3a3a3a;
    --c-highlight:  #2c4a6e;
    --c-divider:    #333;
    --c-text:       #e8e8e8;
    --c-label:      #777;
    --c-section-label: #666;
    --c-active-link: #6ab0ff;
    --c-muted:      #999;
    --link:         #6ab0ff;
    --link-visited: #c084fc;
    --link-hover:   #90c8ff;
    --link-active:  #ff6b6b;
  }
}

body.dark-mode {
  --c-page-bg:    #1a1a1a;
  --c-frame-bg:   #2a2a2a;
  --c-frame-border: #444;
  --c-white:      #222;
  --c-sidebar-bg: #252525;
  --c-sidebar-border: #3a3a3a;
  --c-main-border: #3a3a3a;
  --c-highlight:  #2c4a6e;
  --c-divider:    #333;
  --c-text:       #e8e8e8;
  --c-label:      #777;
  --c-section-label: #666;
  --c-active-link: #6ab0ff;
  --c-muted:      #999;
  --link:         #6ab0ff;
  --link-visited: #c084fc;
  --link-hover:   #90c8ff;
  --link-active:  #ff6b6b;
}

/* =============================================
   RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--c-page-bg);
  color: var(--c-text);
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  min-height: 100vh;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Link states */
a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); }
a:active { color: var(--link-active); }

/* ---- Explicit element-level typography (required by assignment) ---- */
p {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text);
}
h1 {
  font-family: var(--f-ui);
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.2;
}
h2 {
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.3;
}
h3 {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.3;
}

/* ---- Footer (present on all pages) ---- */
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--c-page-bg);
  border-top: 1px solid var(--c-divider, #e0e0e0);
  font-family: var(--f-ui);
  font-size: 11px;
  color: var(--c-label, #aaa);
}
.footer-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-nav a {
  font-family: var(--f-ui);
  font-size: 11px;
  color: var(--c-label, #aaa);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--link); text-decoration: underline; }
.footer-credit {
  font-family: var(--f-ui);
  font-size: 10px;
  color: var(--c-label, #aaa);
  margin: 0;
}

/* Music song nav anchor links */
.music-page-header {
  position: relative;
}
.music-song-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 6px 70px;
  font-family: var(--f-ui);
  font-size: 10px;
  border-bottom: 1px solid var(--c-divider, #eee);
  background: var(--c-page-bg);
  width: 100%;
  max-width: 1440px;
  justify-content: center;
}
.music-song-nav-label {
  font-size: 10px;
  color: #808080;
  font-family: var(--f-ui);
  margin: 0;
}
.music-song-nav a {
  font-size: 10px;
  color: #808080;
  text-decoration: underline;
  font-family: var(--f-ui);
}
.music-song-nav a:hover { color: var(--link); }

/* About me nav */
.abt-nav {
  position: absolute;
  top: 10px;
  right: 120px;
  display: flex;
  gap: 12px;
  z-index: 5;
}
.abt-nav a {
  font-family: var(--f-ui);
  font-size: 10px;
  color: #808080;
  text-decoration: none;
}
.abt-nav a:hover { color: var(--link); text-decoration: underline; }
.abt-section { display: contents; }

/* Traffic light dots */
.tl {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.tl-red    { background: var(--c-dot-red); }
.tl-yellow { background: var(--c-dot-yellow); }
.tl-green  { background: var(--c-dot-green); }

/* Stone button */
.stone-btn {
  background: none; border: none; cursor: pointer;
  padding: 0; display: flex; align-items: center;
  border-radius: 4px; transition: opacity 0.15s;
  line-height: 1;
}
.stone-btn:hover { opacity: 0.7; }

/* =============================================
   OVERLAY MENU (stone button trigger) — exact Figma CSS
   Container: 258×821, all elements absolute
   ============================================= */
.overlay-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.35); z-index: 100;
}
.overlay-backdrop.visible { display: block; }

/* Slide-in panel — wraps the exact 258px Figma panel */
.overlay-menu {
  position: fixed;
  top: 0; left: -280px;
  width: 258px;
  height: 100vh;
  z-index: 200;
  transition: left 0.25s ease;
  overflow-y: auto;
  overflow-x: hidden;
}
.overlay-menu.open { left: 0; }

/* Exact Figma inner: 258×821, bg:#f8f8f8, radius:20, border:2px #ddd */
.overlay-menu-inner {
  position: relative;
  width: 258px;
  min-height: 821px;
  background-color: #f8f8f8;
  border-radius: 20px;
  border: 2px solid #dddddd;
  box-sizing: border-box;
  font-size: 11px;
  color: #000;
  font-family: var(--f-ui);
}

/* Traffic lights: 10px, top:32, left:24(red)/40(yellow)/56(green) */
.overlay-tl-red {
  position: absolute; top: 32px; left: 24px;
  border-radius: 50%; background: #FF4C58;
  width: 10px; height: 10px;
}
.overlay-tl-yellow {
  position: absolute; top: 32px; left: 40px;
  border-radius: 50%; background: #FFC600;
  width: 10px; height: 10px;
}
.overlay-tl-green {
  position: absolute; top: 32px; left: 56px;
  border-radius: 50%; background: #00CA48;
  width: 10px; height: 10px;
}

/* "Phoebe Cho @ Portfolio": top:30, left:77, 12px, SF UI Display, 500 */
.overlay-title {
  position: absolute; top: 30px; left: 77px;
  font-size: 12px; font-weight: 500;
  font-family: var(--f-ui-alt); color: #000;
}

/* Highlight bar: top:57, left:15, width:236, height:25, bg:#e6e6e6, radius:5 */
.overlay-highlight {
  position: absolute; top: 57px; left: 15px;
  border-radius: 5px; background: #e6e6e6;
  width: 236px; height: 25px;
}

/* Home icon: top:59, left:24, 17×20 */
.overlay-home-icon {
  position: absolute; top: 59px; left: 24px;
  width: 17px; height: 20px; object-fit: cover;
}

/* "Overview": top:63, left:51, 12px, SF UI Display, 500, #5598f2 */
.overlay-overview {
  position: absolute; top: 63px; left: 51px;
  font-size: 12px; font-weight: 500;
  font-family: var(--f-ui-alt); color: #5598F2;
  text-decoration: none;
}

/* Section labels */
/* "Selected Works": top:111, left:15, 10px, 600, #b0b0b0 */
.overlay-label-selected {
  position: absolute; top: 111px; left: 15px;
  font-size: 10px; font-weight: 600; color: #B0B0B0;
}
/* "Art": top:183, left:15 */
.overlay-label-art {
  position: absolute; top: 183px; left: 15px;
  font-size: 10px; font-weight: 600; color: #B0B0B0;
}
/* "About": top:309, left:15 */
.overlay-label-about {
  position: absolute; top: 309px; left: 15px;
  font-size: 10px; font-weight: 600; color: #B0B0B0;
}

/* Nav links: 11px, 500, black */
/* sd icons at left ~17-21 */
/* "Music": top:135, left:41 */
.overlay-link-music {
  position: absolute; top: 135px; left: 41px;
  font-size: 11px; font-weight: 500; color: #000;
  text-decoration: none; cursor: pointer;
  width: 36px; display: inline-block;
}
/* "All": top:204, left:38 */
.overlay-link-all {
  position: absolute; top: 204px; left: 38px;
  font-size: 11px; font-weight: 500; color: #000;
  text-decoration: none; width: 85px; display: inline-block;
}
/* "Physical works": top:225, left:38 */
.overlay-link-physical {
  position: absolute; top: 225px; left: 38px;
  font-size: 11px; font-weight: 500; color: #000;
  text-decoration: none; width: 85px; display: inline-block;
}
/* "Digital works": top:246, left:37 */
.overlay-link-digital {
  position: absolute; top: 246px; left: 37px;
  font-size: 11px; font-weight: 500; color: #000;
  text-decoration: none; width: 85px; display: inline-block;
}
/* "Artist statement": top:266, left:37 */
.overlay-link-statement {
  position: absolute; top: 266px; left: 37px;
  font-size: 11px; font-weight: 500; color: #000;
  text-decoration: none; width: 85px; display: inline-block;
}
/* "Socials + more info + contact": top:333, left:38 */
.overlay-link-socials {
  position: absolute; top: 333px; left: 38px;
  font-size: 11px; font-weight: 500; color: #000;
  text-decoration: none; width: 144px; display: inline-block;
}

/* Hover states for all nav links */
.overlay-link-music:hover, .overlay-link-all:hover,
.overlay-link-physical:hover, .overlay-link-digital:hover,
.overlay-link-statement:hover, .overlay-link-socials:hover,
.overlay-overview:hover { color: #5598F2; }

/* Icon positions (sd icons) */
.overlay-icon-music    { position: absolute; top: 132px; left: 21px; width: 16px; height: 16px; object-fit: cover; }
.overlay-icon-all      { position: absolute; top: 201px; left: 18px; width: 16px; height: 16px; object-fit: cover; }
.overlay-icon-physical { position: absolute; top: 222px; left: 17px; width: 16px; height: 16px; object-fit: cover; }
.overlay-icon-digital  { position: absolute; top: 244px; left: 17px; width: 16px; height: 16px; object-fit: cover; }
.overlay-icon-statement{ position: absolute; top: 266px; left: 16px; width: 16px; height: 16px; object-fit: cover; }
.overlay-icon-socials  { position: absolute; top: 331px; left: 17px; width: 16px; height: 16px; object-fit: cover; }

/* Close button (not in Figma but needed for UX) */
.overlay-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none;
  font-size: 14px; cursor: pointer; color: #666;
  border-radius: 4px; padding: 2px 6px; z-index: 5;
}
.overlay-close:hover { background: rgba(0,0,0,0.08); }

/* Active page indicator */
.overlay-link-music.overlay-active,
.overlay-link-all.overlay-active,
.overlay-link-physical.overlay-active,
.overlay-link-digital.overlay-active,
.overlay-link-statement.overlay-active,
.overlay-link-socials.overlay-active { color: #5598F2; font-weight: 600; }

/* =============================================
   INDEX PAGE
   ============================================= */
.page-index {
  background: var(--c-page-bg);
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}

/* Outer frame: #EEEEEE, shadow, border-radius:15, border:3px #D6D6D6 */
/* Figma: width:1353, height:846, left:36, top:89 */
.index-frame {
  background: var(--c-frame-bg);
  border: 3px solid var(--c-frame-border);
  border-radius: 15px;
  box-shadow: 0px 20px 75px 5px #BFBFBF;
  width: 100%;
  max-width: 1353px;
  min-height: 600px;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* Sidebar: width:258, bg:#F8F8F8, border-radius:20, border:2px #DDDDDD */
/* Figma: left:44, top:101, width:258, height:821 */
/* In the frame these become relative offsets */
.index-sidebar {
  width: 258px;
  flex-shrink: 0;
  background: var(--c-sidebar-bg);
  border-radius: 20px;
  border: 2px solid var(--c-sidebar-border);
  margin: 8px;
  padding: 20px 0 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Traffic lights row */
.index-traffic-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  margin-bottom: 4px;
}

/* Title: left:117, font: 12px SF UI Display 500, black */
.index-window-title {
  font-family: var(--f-ui-alt);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  margin-left: 4px;
  flex: 1;
}

/* Overview highlight bar: bg:#E6E6E6, border-radius:5 */
/* width:236, height:25, left:55 (margin from sidebar left 11px) */
.index-overview-bar {
  background: var(--c-highlight);
  border-radius: 5px;
  height: 25px;
  margin: 8px 11px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

/* Overview label: color:#5598F2, 12px SF UI Display 500 */
.index-overview-label {
  font-family: var(--f-ui-alt);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-active-link);
}

/* Section labels: color:#B0B0B0, 10px, 600 */
.index-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--c-section-label);
  padding: 0 20px;
  margin-bottom: 3px;
}

/* Sidebar items: color:black, 11px 500 */
.index-sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
  border-radius: 4px;
  margin: 1px 6px;
  transition: background 0.1s;
  line-height: 1.6;
}
.index-sidebar-item:hover {
  background: rgba(0,0,0,0.05);
  color: var(--c-text);
}

.sidebar-item-icon { font-size: 13px; flex-shrink: 0; }

/* Main content area: bg:white, border-radius:20, border:2px #DFDEDE */
/* Figma: left:316, width:1060, height:821 */
.index-main {
  flex: 1;
  background: var(--c-white);
  border-radius: 20px;
  border: 2px solid var(--c-main-border);
  margin: 8px 8px 8px 0;
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* File rows */
.index-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 40px;
  padding: 20px 0;
}

/* Dividers: outline: 2px #F2F2F2, width: 944px */
.index-divider {
  width: 100%;
  border: none;
  border-top: 2px solid var(--c-divider);
  margin: 0;
}

/* File items */
.index-file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  color: var(--c-text);
  transition: opacity 0.15s;
}
.index-file-item:hover { opacity: 0.75; }

.index-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* File labels: color:#A9A9A9, 11px, 500 */
.index-file-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-label);
  text-align: center;
  word-break: break-word;
  max-width: 90px;
  line-height: 1.3;
  text-decoration: none;
}

/* Decorative image positioned absolutely in main */
.index-deco-img {
  position: absolute;
  right: -20px;
  top: 60px;
  pointer-events: none;
}
.index-deco-img img {
  display: block;
  max-width: 470px;
  height: auto;
}

/* =============================================
   MUSIC PAGE
   ============================================= */

/* Page bg: #FCFCFC, full canvas */
.music-page {
  background: var(--c-page-bg);
  min-height: 100vh;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center; /* centers the canvas horizontally */
}

/* Header: stone button + title — centered at max 1440px */
.music-page-header {
  position: relative;
  height: 70px;
  width: 100%;
  max-width: 1440px;
}

/* Stone icon: left:17, top:14, 43x50 */
.music-stone {
  position: absolute;
  left: 17px;
  top: 10px;
  z-index: 10;
}

/* "music" h1 */
.music-h1 {
  position: absolute;
  left: 70px;
  top: 16px;
  font-family: var(--f-ui);
  font-size: 28px;
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: -0.5px;
}

/* </> button — REMOVED, now using image button instead */
/* .music-code-btn kept for reference but not used */

/* ---- LISTEN IMAGE BUTTON (musicbutton.png) ----
   Figma: width:284, height:83, "Click to listen" at top:34, left:192 */
.music-listen-btn {
  position: relative;   /* changed from absolute — now sits in normal flow */
  display: block;
  width: 284px;
  height: 83px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  z-index: 5;           /* renders above mic image */
  flex-shrink: 0;
}
.music-listen-btn img {
  position: absolute;
  top: 0; left: 0;
  width: 284px;
  height: 83px;
  object-fit: cover;
  display: block;
}
.music-listen-btn .listen-btn-label {
  position: absolute;
  top: 34px;
  left: 192px;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 500;
  color: #535a5a;
  pointer-events: none;
  white-space: nowrap;
}
.music-listen-btn:hover { opacity: 0.9; }

/* Canvas: columns laid out absolutely */
.music-canvas {
  position: relative;
  width: 1440px;
  max-width: 100vw;
  min-height: 2400px;
  overflow-x: auto;
}

/* Row 1 columns: start at top:120px to clear header + nav bar */
.song-col {
  position: absolute;
  top: 120px;
  display: flex;
  flex-direction: column;
}

/* Row 2 columns: 120px offset + ~1050px row height = 1170px */
.song-col-r2 {
  top: 1170px;
}

/* Song title: 11px, 700, black */
.song-title {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text);
  word-wrap: break-word;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* Song lyrics: 11px, 500, black */
.song-lyrics {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text);
  word-wrap: break-word;
  line-height: 1.5;
  white-space: pre-line;
}

/* Image + click to listen below lyrics */
.song-img-wrap {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.song-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  display: block;
}

/* "Click to listen" button: color:#535A5A, 12px, 500 */
.click-to-listen {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--c-muted);
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s;
}
.click-to-listen:hover { color: var(--link); }

/* Stacked second song within same column (for me below seeing each other) */
.song-col-stacked { margin-top: 24px; }

/* Row gap between row1 and row2 */
.music-row-gap {
  position: absolute;
  top: 0; left: 0; width: 1px;
  /* just a layout anchor — actual spacing is via absolute top values */
}

/* Listen button positions */
/* Row 1 */
.music-deco-1 {
  position: absolute;
  left: 908px;
  top: 526px;
  display: flex;
  flex-direction: column;  /* mic on top, button below */
  align-items: flex-start;
  width: 482px;
}
/* Row 2 */
.music-deco-2 {
  position: absolute;
  left: 928px;
  top: 1673px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 482px;
}
.music-deco img { display: block; max-width: 100%; }

/* mic icon: pointer-events none so it NEVER intercepts button clicks */
.mic-icon {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* =============================================
   WHERE TO LISTEN MODAL — updated Figma CSS
   Container: 414×392, all elements absolute
   ============================================= */
.listen-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  align-items: center;
  justify-content: center;
  background: rgba(113,113,113,0.3);
}
.listen-modal.open { display: flex; }

/* Outer container: 414×392 */
.listen-modal-win {
  position: relative;
  width: 414px;
  height: 392px;
  font-size: 18px;
  color: #000;
  font-family: var(--f-ui);
  flex-shrink: 0;
}

/* Outer bg: #e1e1e1, radius:5, inset shadow */
.listen-modal-outer {
  position: absolute;
  top: 0; left: 0;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25) inset;
  border-radius: 5px;
  background-color: #e1e1e1;
  width: 414px;
  height: 392px;
}

/* Inner white: top:33, left:7, width:401, height:352 */
.listen-modal-inner {
  position: absolute;
  top: 33px; left: 7px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25) inset;
  border-radius: 5px;
  background-color: #fff;
  border-right: 2px solid #a8a8a8;
  border-bottom: 2px solid #a8a8a8;
  border-left: 2px solid #a8a8a8;
  box-sizing: border-box;
  width: 401px;
  height: 352px;
}

/* Traffic light dots: #c4c4c4, 15px, top:11 */
.listen-dot-1 {
  position: absolute; top: 11px; left: 15px;
  border-radius: 50%; background: #c4c4c4;
  width: 15px; height: 15px;
}
.listen-dot-2 {
  position: absolute; top: 11px; left: 38px;
  border-radius: 50%; background: #c4c4c4;
  width: 15px; height: 15px;
}
.listen-dot-3 {
  position: absolute; top: 11px; left: 61px;
  border-radius: 50%; background: #c4c4c4;
  width: 15px; height: 15px;
}

/* Close button */
.listen-modal-close {
  position: absolute;
  top: 8px; left: 8px;
  background: none; border: none;
  font-size: 13px; cursor: pointer;
  color: #666; z-index: 10;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; line-height: 1;
}
.listen-modal-close:hover { background: rgba(0,0,0,0.08); }

/* Title: top:8, left:135 (updated from 254) */
.listen-modal-filename {
  position: absolute;
  top: 8px; left: 135px;
  font-size: 18px; font-weight: 600;
  font-family: var(--f-ui);
  color: #000; white-space: nowrap;
}

/* Links — updated positions from new Figma CSS */
.listen-link {
  position: absolute;
  font-size: 18px; font-weight: 500;
  font-family: var(--f-ui);
  text-decoration: underline;
  color: #000; transition: color 0.1s;
}
.listen-link:visited { color: #000; }
.listen-link:hover { color: #5598F2; }

/* apple music: top:86, left:38 */
.listen-link-apple     { top: 86px;  left: 38px; }
/* spotify: top:127, left:100 */
.listen-link-spotify   { top: 127px; left: 100px; }
/* youtube: top:170, left:125 */
.listen-link-youtube   { top: 170px; left: 125px; }
/* deezer: top:208, left:159 */
.listen-link-deezer    { top: 208px; left: 159px; }
/* tiktok: top:250, left:181 */
.listen-link-tiktok    { top: 250px; left: 181px; }
/* soundcloud: top:284, left:202 */
.listen-link-soundcloud { top: 284px; left: 202px; }
/* iheartradio: top:319, left:252 */
.listen-link-iheartradio { top: 319px; left: 252px; }

/* =============================================
   ART PAGE
   ============================================= */

/* Page bg: #FCFCFC */
.art-page {
  background: #FCFCFC;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 66px 70px;
}

/* Outer card: left:70, top:66, width:1300, height:880, bg:white, shadow, radius:15 */
.art-card {
  background: #FFFFFF;
  border-radius: 15px;
  box-shadow: 0px 20px 75px 5px #BFBFBF;
  width: 100%;
  max-width: 1300px;
  min-height: 880px;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* ---- LEFT SIDEBAR ---- */
/* width:222, bg:#F8F8F8, shadow, radius:20, border:2px white */
.art-sidebar {
  width: 222px;
  flex-shrink: 0;
  background: #F8F8F8;
  box-shadow: 10px 3px 20px 5px rgba(0,0,0,0.05);
  border-radius: 20px;
  border: 2px solid #FFFFFF;
  margin: 11px;
  padding: 14px 0 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Traffic lights row + stone button */
.art-tl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  /* top:101 relative to card → within sidebar margin(11) = ~14px from sidebar top */
}
.art-tl-row .tl { width: 12px; height: 12px; }

.art-stone { margin-left: auto; }

/* "Art" / "Digital Art" section labels: color:#B0B0B0, 14px, 600 */
.art-sidebar-section-label {
  font-size: 14px;
  font-weight: 600;
  color: #B0B0B0;
  padding: 0 18px;
  margin-bottom: 4px;
}

/* Nav items: color:black, 14px, 500 */
.art-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 18px;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  text-decoration: none;
  border-radius: 5px;
  margin: 1px 8px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: calc(100% - 16px);
  line-height: 1.5;
  transition: background 0.1s;
}
.art-nav-item:hover { background: rgba(0,0,0,0.04); color: #000; }

/* art-filter-btn: <button> elements in sidebar — shares art-nav-item styles */
.art-filter-btn {
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}
.art-filter-btn.art-filter-active { background: #E6E6E6; }

/* Active digital works highlight: bg:#E6E6E6, radius:5, color:#009BFF */
.art-nav-active {
  background: #E6E6E6;
  color: #009BFF !important;
}
.art-nav-active:hover { background: #E6E6E6; }

/* Active filter (All highlighted): bg:#E6E6E6 */
.art-filter-active {
  background: #E6E6E6;
}

.art-nav-icon { font-size: 16px; flex-shrink: 0; }

/* FX buttons at bottom of sidebar */
/* Figma: left:1187/1253/1322, top:888/919 — snow/worm/blobs labels + icons */
.art-fx-btns {
  margin-top: auto;
  padding: 16px 12px 12px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-top: 1px solid #E6E6E6;
}
.art-fx-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.art-fx-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
}
.art-fx-btn:hover { background: rgba(0,0,0,0.06); }
.art-fx-btn.fx-active { background: #E6E6E6; }
.art-fx-icon { font-size: 20px; line-height: 1; }

/* snow/worm/blobs labels: color:#808080, 12px, 500 */
.art-fx-label {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 500;
  color: #808080;
}

/* Decorative sidebar image (bottom-left, overflows) */
.art-sidebar-deco {
  margin-top: 20px;
  padding: 0 0 0 4px;
  overflow: hidden;
}
.art-sidebar-deco img { display: block; width: 100%; height: auto; }

/* ---- CENTER MAIN ---- */
.art-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
}

/* Top bar: arrows pill + title + searchbar */
.art-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 0;
  flex-shrink: 0;
}

/* Back/forward arrow pill: bg:white, shadow, radius:70 */
/* Figma: width:67, height:30 */
.art-nav-pill {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0px 4px 20px 3px rgba(0,0,0,0.06);
  border-radius: 70px;
  width: 67px; height: 30px;
  flex-shrink: 0;
  overflow: hidden;
}
.art-arrow {
  background: none; border: none; cursor: pointer;
  flex: 1; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.art-arrow:hover { background: rgba(0,0,0,0.05); }

/* "Digital Works" title: color:#4D4D4D, 18px, 700 */
.art-main-title {
  font-family: var(--f-ui);
  font-size: 18px;
  font-weight: 700;
  color: #4D4D4D;
  flex-shrink: 0;
}

/* Search pill: bg:#F7F7F7, shadow, outline:2px #DFDFDF, radius:70, height:29 */
/* width:763 in Figma — just let it flex */
.art-searchbar-pill {
  background: #F7F7F7;
  box-shadow: 0px 7px 10px 4px rgba(0,0,0,0.03);
  border-radius: 70px;
  outline: 2px solid #DFDFDF;
  height: 29px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  flex: 1;
}
.art-searchbar-emoji { font-size: 16px; }

/* "All" select: color:black, 14px, 500 */
.art-filter-select-el {
  border: none; background: transparent;
  font-family: var(--f-ui); font-size: 14px; font-weight: 500;
  color: #000000; outline: none; cursor: pointer; flex: 1;
}

/* Divider: outline:1px #E6E6E6 */
.art-main-divider {
  border: none;
  border-top: 1px solid #E6E6E6;
  margin: 14px 20px 0;
  flex-shrink: 0;
}

/* Featured image: width:694, height:463, shadow */
.art-featured-wrap {
  padding: 16px 20px 0;
  flex-shrink: 0;
}
.art-featured-img {
  width: 100%;
  max-width: 694px;
  height: auto;
  display: block;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
}

/* Filmstrip: thumbnails row at bottom */
/* Figma thumbs: various heights 47-94, widths 51-88, all shadow+radius */
.art-filmstrip {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 20px 16px;
  flex-wrap: wrap;
  margin-top: auto;
}

.art-thumb {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
  border: 2px solid transparent;
  transition: border-color 0.15s, opacity 0.15s;
}
.art-thumb:hover { opacity: 0.85; border-color: #009BFF; }
.art-thumb-selected,
.art-thumb.selected { border-color: #009BFF; }
.art-thumb-bordered { border: 1px solid #000000 !important; }
.art-thumb.hidden { display: none; }
.art-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Text sections below */
.art-sections-wrap {
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.art-text-section-h {
  font-family: var(--f-ui); font-size: 14px; font-weight: 700;
  color: #4D4D4D; margin-bottom: 6px;
  border-bottom: 1px solid #E6E6E6; padding-bottom: 4px;
}
.art-text-section-p {
  font-family: var(--f-ui); font-size: 12px; font-weight: 500;
  color: #808080; line-height: 1.7; margin-bottom: 8px;
}

/* ---- RIGHT INFO PANEL ---- */
/* width:203, bg:#FAFAF9, border-left:1px #E6E6E6 */
.art-info-panel {
  width: 203px;
  flex-shrink: 0;
  background: #FAFAF9;
  border-left: 1px solid #E6E6E6;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 14px 10px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Thumbnail: 83x55, shadow, radius:4 */
.art-info-thumb-wrap { margin-bottom: 8px; }
.art-info-thumb {
  width: 83px; height: 55px;
  object-fit: cover; border-radius: 4px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
  display: block;
}

/* Filename: color:#4D4D4D, 14px, 600 */
.art-info-filename {
  font-family: var(--f-ui); font-size: 14px; font-weight: 600;
  color: #4D4D4D; margin-bottom: 2px; word-break: break-word;
}
/* File type: color:#808080, 12px, 500 */
.art-info-filetype {
  font-family: var(--f-ui); font-size: 12px; font-weight: 500;
  color: #808080; margin-bottom: 14px;
}

/* "Information" / "Tags" headings: color:#4B4B4B, 14px, 700 */
.art-info-heading {
  font-family: var(--f-ui); font-size: 14px; font-weight: 700;
  color: #4B4B4B; margin-bottom: 6px;
}

.art-info-dl { display: flex; flex-direction: column; gap: 0; }

/* dt: color:#808080, 12px, 600 */
.art-info-dt {
  font-family: var(--f-ui); font-size: 12px; font-weight: 600;
  color: #808080; margin-top: 6px;
}
/* dd: color:#4B4B4B, 12px, 500 */
.art-info-dd {
  font-family: var(--f-ui); font-size: 12px; font-weight: 500;
  color: #4B4B4B; margin-left: 0; margin-bottom: 4px;
}
/* Dividers between dl items: outline:1px #E6E6E6 */
.art-info-divider {
  border: none; border-top: 1px solid #E6E6E6; margin: 6px 0;
}

/* Tags: exact Figma colors per tag, 10px, 500, radius:4 */
.art-info-tags {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.art-tag {
  font-family: var(--f-ui); font-size: 10px; font-weight: 500;
  padding: 1px 6px; border-radius: 4px; height: 14px;
  display: inline-flex; align-items: center;
}

/* FX Canvas */
#fx-canvas {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 9999; width: 100vw; height: 100vh;
}

/* =============================================
   ABOUT ME PAGE — scattered floating card layout
   ============================================= */

/* Page: bg:#FCFCFC, canvas 1440×1024 — centered */
.page-abtme {
  background: #FCFCFC;
  min-height: 100vh;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}

/* Canvas: all elements positioned absolutely */
.abt-canvas {
  position: relative;
  width: 1440px;
  flex-shrink: 0;
  min-height: 1024px;
  background: #FCFCFC;
}

/* Stone button: positioned at left:16, top:17 */
.abt-stone {
  position: absolute;
  z-index: 10;
}

/* ---- PILL CARDS ---- */
/* All pills: bg:#F0F0F0, inset shadow, radius:20, border-top:1px black */
.abt-pill {
  position: absolute;
  background: #F0F0F0;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.25) inset;
  border-radius: 20px;
  border-top: 1px solid #000000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Card group wrapper: holds label + type pills stacked, positioned absolutely */
.abt-card-group {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.abt-pill-label {
  position: relative;
  background: #F0F0F0;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.25) inset;
  border-radius: 20px;
  border-top: 1px solid #000000;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.abt-pill-type {
  position: relative;
  background: #F0F0F0;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.25) inset;
  border-radius: 20px;
  border-top: 1px solid #000000;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* Label text: black, 10px, 400 */
.abt-pill-text {
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 400;
  color: #000000;
  word-wrap: break-word;
}

/* Value cards: larger pill with account/content text at 12px, 400 */
.abt-pill-value {
  display: flex;
  align-items: center;
}
.abt-val {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  padding: 0 14px;
}

/* Underlined links in pill values */
.abt-ulink {
  color: #000000;
  text-decoration: underline;
  font-size: inherit;
  font-weight: inherit;
}
.abt-ulink:visited { color: #333; }
.abt-ulink:hover { color: var(--link); }

/* ---- macOS WINDOW ---- */
/* Outer: bg:#EEEEEE, shadow, radius:15, border:3px #D6D6D6 */
.abt-mac-frame {
  position: absolute;
  background: #EEEEEE;
  box-shadow: 0px 20px 75px 5px #BFBFBF;
  border-radius: 15px;
  border: 3px solid #D6D6D6;
  overflow: hidden;
}

/* Inner: bg:#F8F8F8, radius:20, border:2px #DDDDDD */
.abt-mac-inner {
  background: #F8F8F8;
  border-radius: 20px;
  border: 2px solid #DDDDDD;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Titlebar */
.abt-mac-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 6px;
  flex-shrink: 0;
}
.abt-mac-tl {
  display: flex; gap: 8px; flex-shrink: 0;
}
.abt-mac-tl .tl { width: 12px; height: 12px; }

/* "Phoebe Cho @ Portfolio": black, 12px, SF UI Display, 500 */
.abt-mac-title {
  font-family: var(--f-ui-alt);
  font-size: 12px;
  font-weight: 500;
  color: #000000;
  margin-left: 4px;
}

/* "about me" highlight bar: width:644, height:22, bg:#E6E6E6, radius:5 */
.abt-mac-highlight-bar {
  background: #E6E6E6;
  border-radius: 5px;
  height: 22px;
  margin: 2px 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  flex-shrink: 0;
}
.abt-mac-bar-icon { font-size: 14px; }
/* "about me": color:#5598F2, 13px, SF UI Display, 500 */
.abt-mac-bar-label {
  font-family: var(--f-ui-alt);
  font-size: 13px;
  font-weight: 500;
  color: #5598F2;
}

/* Content area inside window */
.abt-mac-content {
  position: relative;
  flex: 1;
  /* left:37 from inner matches Figma group-container left offset */
  margin: 0 0 0 37px;
  width: 609px;
  min-height: 437px;
  overflow: hidden;
}

/* "phoebe cho" name: top:17, left:0, 18px, 500 — Figma exact */
.abt-mac-name {
  position: absolute;
  top: 17px;
  left: 0;
  font-family: var(--f-ui);
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  width: 433px;
}

/* Aliases below name */
.abt-mac-aliases {
  position: absolute;
  top: 60px;
  left: 0;
  font-family: var(--f-ui);
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  line-height: 1.6;
  width: 433px;
}

/* Photo: top:0, left:387, 209x278 — Figma: .a60f2a6-icon top:0 left:387 */
.abt-mac-photo-wrap {
  position: absolute;
  top: 0;
  left: 387px;
}
.abt-mac-photo {
  width: 209px;
  height: 278px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 7px 7px 4px rgba(0,0,0,0.25);
  display: block;
}

/* Toast: top:278, left:0, 606x159 — Figma: .abtmepng-icon top:278 left:0 */
/* Handles both class names: abt-mac-toast (original) and abt-me-toast (user's version) */
.abt-mac-toast,
.abt-me-toast {
  position: absolute;
  top: 278px;
  left: 0;
  width: 606px;
  height: 159px;
  overflow: hidden;
}
.abt-mac-toast img,
.abt-me-toast img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Toast fallback letters */
.abt-toast-fallback {
  display: flex; align-items: center; gap: 4px;
  padding: 16px 0 0;
}
.toast-letter {
  font-family: var(--f-ui); font-size: 40px; font-weight: 700;
  color: #c8a26a; text-shadow: 1px 1px 0 #a07840;
}
.toast-spacer { width: 20px; }

/* ---- FOBOCHO BUBBLE ---- */
/* bg:rgba(27,113,174,0.67), shadow, radius:999, border:6px rgba(9,96,158,0.35) */
.abt-fobocho-bubble {
  position: absolute;
  background: rgba(27, 113, 174, 0.67);
  box-shadow: 20px 20px 30px 10px rgba(45, 140, 207, 0.60);
  border-radius: 999px;
  border: 6px solid rgba(9, 96, 158, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.abt-fobocho-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.60) 100%);
  border-radius: 999px;
  filter: blur(7.5px);
}
/* "FOBOCHO": white, 60px, 600 */
.abt-fobocho-text {
  position: relative;
  z-index: 1;
  font-family: var(--f-ui);
  font-size: 60px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -1px;
}

/* Laptop person image */
.abt-laptop-img {
  position: absolute;
}
.abt-laptop-img img { display: block; }

/* Fun fact button — floating interactive element */
.abt-funfact-btn {
  position: absolute;
  left: 789px;
  top: 940px;
  background: #F0F0F0;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.25) inset;
  border-radius: 20px;
  border-top: 1px solid #000;
  border-left: none; border-right: none; border-bottom: none;
  padding: 8px 18px;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 400;
  color: #000;
  cursor: pointer;
  transition: background 0.15s;
  z-index: 5;
}
.abt-funfact-btn:hover { background: #E6E6E6; }

.abt-funfact-display {
  position: absolute;
  left: 789px;
  top: 978px;
  width: 340px;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 400;
  color: #000;
  font-style: italic;
  line-height: 1.5;
  transition: opacity 0.3s;
  z-index: 5;
}

/* Dark mode / theme toggle */
.abt-theme-btn {
  position: absolute;
  right: 280px;
  top: 5px;
  background: #F0F0F0;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.25) inset;
  border-radius: 20px;
  border-top: 1px solid #000;
  border-left: none; border-right: none; border-bottom: none;
  padding: 6px 14px;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
}
.abt-theme-btn:hover { background: #E6E6E6; }

/* =============================================
   RESPONSIVE — mobile: 1 column
   ============================================= */
@media (max-width: 768px) {
  .page-index, .page-art, .page-abtme {
    padding: 8px;
    align-items: flex-start;
  }

  /* Index */
  .index-frame {
    flex-direction: column;
    max-width: 100%;
  }
  .index-sidebar {
    width: 100%; border-radius: 12px;
    margin: 6px 6px 0;
    flex-direction: row; flex-wrap: wrap;
    padding: 8px 0;
  }
  .index-traffic-lights { padding: 6px 12px; }
  .index-window-title { font-size: 11px; }
  .index-section-label { margin-top: 4px !important; padding: 0 10px; }
  .index-sidebar-item { padding: 2px 10px; font-size: 10px; }
  .index-overview-bar { margin: 4px 8px; }
  .index-main { margin: 0 6px 6px; border-radius: 12px; padding: 16px; }
  .index-row { gap: 16px 24px; padding: 12px 0; }
  .index-deco-img { display: none; }

  /* Music */
  .music-page { padding-top: 0; }
  .music-page-header { height: 60px; }
  .music-canvas {
    width: 100%; min-width: unset;
    position: static;
    display: flex; flex-direction: column; gap: 28px;
    padding: 10px 16px 40px;
    min-height: unset;
  }
  .song-col, .song-col-r2 {
    position: static !important;
    width: 100% !important;
    top: auto !important; left: auto !important;
  }
  .song-col-stacked { margin-top: 28px; }
  .music-deco-1, .music-deco-2 {
    position: static; width: 100%;
    margin: 20px 0;
  }
  .music-row-gap { display: none; }
  .music-h1 { left: 70px; top: 8px; font-size: 22px; }

  /* Art */
  .art-page { padding: 10px; }
  .art-card { flex-direction: column; max-width: 100%; min-height: unset; }
  .art-sidebar {
    width: 100%; border-radius: 12px; margin: 6px 6px 0;
    flex-direction: row; flex-wrap: wrap;
    padding: 8px; min-height: unset;
  }
  .art-sidebar-section-label { padding: 4px 8px; }
  .art-nav-item { font-size: 12px; padding: 3px 8px; }
  .art-fx-btns { margin-top: 6px; border-top: none; padding-top: 0; }
  .art-sidebar-deco { display: none; }
  .art-info-panel {
    width: 100%; border-left: none; border-top: 1px solid #E6E6E6;
    border-radius: 0 0 15px 15px; flex-direction: row; flex-wrap: wrap;
    gap: 16px; padding: 12px;
  }
  .art-featured-img { max-width: 100%; }
  .art-filmstrip { flex-wrap: wrap; }

  /* About me */
  .abt-canvas {
    width: 100%;
    min-height: unset;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  .abt-stone { position: relative; left: auto; top: auto; margin-bottom: 8px; }
  .abt-card-group { position: relative; left: auto !important; top: auto !important; }
  .abt-pill { position: relative; left: auto !important; top: auto !important; }
  .abt-pill-label, .abt-pill-type { position: relative; }
  .abt-pill-value { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; min-height: 36px; }
  .abt-mac-frame { position: relative; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; min-height: 400px; }
  .abt-mac-photo { width: 120px; height: auto; }
  .abt-mac-content { margin: 0; width: 100%; padding: 12px; }
  .abt-mac-name { position: relative; top: auto; left: auto; font-size: 15px; width: 100%; }
  .abt-mac-aliases { position: relative; top: auto; left: auto; font-size: 13px; width: 100%; }
  .abt-mac-photo-wrap { position: absolute; top: 10px; left: auto; right: 10px; }
  .abt-mac-toast, .abt-me-toast { position: relative; top: auto; left: auto; width: 100%; height: auto; margin-top: 12px; }
  .abt-fobocho-bubble { position: relative; left: auto !important; top: auto !important; width: 100% !important; height: 100px !important; }
  .abt-fobocho-text { font-size: 40px; }
  .abt-laptop-img { position: relative; left: auto !important; top: auto !important; }
  .abt-funfact-btn { position: relative; left: auto; top: auto; }
  .abt-funfact-display { position: relative; left: auto; top: auto; width: 100%; }
  .abt-theme-btn { position: relative; right: auto; top: auto; }
}

  /* Listen modal: scale down on mobile */
  .listen-modal-win { transform: scale(0.7); transform-origin: center; }