:root {
  --bg:#070707;
  --shell-1:#fff;
  --shell-2:#e7e7e7;
  --shell-3:#bdbdbd;
  --screen:#fff;

  --blue-1:#8ab7ff;
  --blue-2:#2764c5;
  --blue-3:#17478f;

  --line:#dedede;
  --text:#0b0b0b;
  --muted:#6a6a6a;

  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Lucida Grande","Helvetica Neue",Arial,sans-serif;
}

* {
  box-sizing:border-box;
}

html,
body {
  min-height:100%;
}

body {
  margin:0;
  min-height:100svh;
  padding:18px 10px;
  overflow-x:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 12%, #1c2b4a 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, #2a1c47 0%, transparent 55%),
    #050506;
  color:#fff;
  font-family:var(--ui);
}

button {
  font:inherit;
}


/* =========================================================
   FULL-PAGE BACKGROUND VIDEO
   ========================================================= */

.site-background {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
  pointer-events:none;
  background:#000;
  filter:brightness(.68) saturate(.9);
}

.site-background-overlay {
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(
      circle at center,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.18) 62%,
      rgba(0,0,0,.43) 100%
    );
}


/* =========================================================
   SITE / IPOD SHELL
   ========================================================= */

.site-shell {
  width:100%;
  display:grid;
  place-items:center;
}

.ipod-wrap {
  display:grid;
  justify-items:center;
  gap:10px;
}

.ipod {
  width:min(500px,96vw);
  padding:20px 20px 17px;
  border:1px solid #7d7d7d;
  border-radius:36px;

  background:
    linear-gradient(
      145deg,
      var(--shell-1) 0%,
      var(--shell-2) 35%,
      #d2d2d2 72%,
      var(--shell-3) 100%
    );

  box-shadow:
    0 36px 85px rgba(0,0,0,.64),
    0 5px 15px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.95);

  position:relative;
}

.ipod::before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:30px;
  pointer-events:none;
}


/* =========================================================
   SCREEN
   ========================================================= */

.screen-bezel {
  padding:3px;
  border-radius:7px;
  background:#7f7f7f;

  box-shadow:
    inset 0 1px 5px rgba(0,0,0,.32),
    0 1px 0 rgba(255,255,255,.75);
}

.screen {
  height:365px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:4px;

  /* MUST be transparent so the video can show through */
  background:transparent;

  color:var(--text);
  position:relative;
}


/* =========================================================
   PERSISTENT VIDEO INSIDE IPOD SCREEN
   ========================================================= */

.screen-background-video {
  position:absolute;
  top:24px;
  left:0;

  width:100%;
  height:calc(100% - 24px);

  object-fit:cover;
  object-position:center;

  z-index:0;
  pointer-events:none;

  opacity:.16;

  filter:
    brightness(.9)
    saturate(.75);
}

/* =========================================================
   SCANLINES / LED TEXTURE
   ========================================================= */

.screen::after {
  content:"";
  position:absolute;
  inset:24px 0 0;

  pointer-events:none;

  z-index:20;
  opacity:.12;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.16) 0,
      rgba(0,0,0,.16) 1px,
      transparent 1px,
      transparent 3px
    );

  mix-blend-mode:multiply;
}


/* =========================================================
   STATUS BAR
   ========================================================= */

.statusbar {
  flex:0 0 24px;

  display:grid;
  grid-template-columns:28px 1fr 42px;
  align-items:center;
  gap:3px;

  padding:0 6px;

  position:relative;
  z-index:2;

  background:
    linear-gradient(
      to bottom,
      #e0e7f1 0%,
      #bccadd 48%,
      #a1b3cd 100%
    );

  border-bottom:1px solid #7f8fa7;

  font-size:11px;
  font-weight:700;

  text-shadow:
    0 1px 0 rgba(255,255,255,.75);
}

.status-title {
  overflow:hidden;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.status-right {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:4px;
}

.status-icon {
  border:0;
  padding:0;
  background:transparent;
  color:#111;
  cursor:pointer;
  font-size:11px;
}

.status-back {
  opacity:.35;
}

.status-back.active {
  opacity:1;
}

.battery {
  width:17px;
  height:8px;
  padding:1px;

  border:1px solid #333;

  background:rgba(255,255,255,.45);

  position:relative;
}

.battery::after {
  content:"";
  position:absolute;
  top:1px;
  right:-3px;
  width:2px;
  height:4px;
  background:#333;
}

.battery>span {
  display:block;
  width:76%;
  height:100%;
  background:#333;
}


/* =========================================================
   DYNAMIC SCREEN CONTENT
   ========================================================= */

.screen-main {
  flex:1;

  min-width:0;
  min-height:0;

  position:relative;
  z-index:1;

  /* This is now the white translucent glass over the video */
  background:rgba(255,255,255,.45);

  overflow:hidden;
}

.screen-main.screen-change {
  animation:screenChange .16s ease-out;
}

@keyframes screenChange {
  from {
    opacity:.72;
    transform:translateY(1px);
  }

  to {
    opacity:1;
    transform:none;
  }
}


/* =========================================================
   MENUS
   ========================================================= */

.menu {
  width:100%;
  height:100%;

  margin:0;
  padding:0;

  list-style:none;
  overflow:auto;
}

.menu-item {
  min-height:31px;

  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:9px;

  padding:0 10px;

  border-bottom:1px solid #e8e8e8;

  color:#111;

  cursor:default;
  outline:none;
}

.menu-item.active {
  color:#fff;

  background:
    linear-gradient(
      to bottom,
      var(--blue-1) 0%,
      var(--blue-2) 58%,
      var(--blue-3) 100%
    );
}

.menu-arrow {
  font-size:16px;
  line-height:1;
}


/* =========================================================
   PAGES
   ========================================================= */

.page {
  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  overflow:hidden;
}

.page-scroll {
  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  padding:11px;

  overflow:auto;
  scrollbar-width:thin;
}

.page-heading {
  margin-bottom:5px;

  font-size:14px;
  font-weight:800;
  line-height:1.05;
}

.page-meta {
  margin-bottom:10px;

  color:var(--muted);

  font:9px/1.5 var(--mono);
}

.page-meta strong,
.page-meta b {
  color:inherit;
  font:inherit;
  font-weight:400;
}

.page-copy {
  font-size:11px;
  line-height:1.45;
}

.small-rule {
  height:1px;
  margin:9px 0;
  background:var(--line);
}

.row {
  min-height:29px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  padding:6px 3px;

  border-top:1px solid var(--line);

  font-size:10px;
}

.row:first-of-type {
  border-top:0;
}

.row strong {
  font-size:11px;
}

.row-arrow {
  font-size:15px;
}


/* =========================================================
   RELEASE / RECORD PAGES
   ========================================================= */

.release {
  min-height:100%;

  display:flex;
  flex-direction:column;
  gap:8px;
}

.art {
  width:102px;
  height:102px;

  margin:0 auto;

  overflow:hidden;
  background:#101010;
}

.art img {
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
}

.art-fallback {
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  color:#3f3f3f;
  background:
    linear-gradient(145deg,#1d1d1d 0%,#0c0c0c 100%);

  font-size:34px;
}

.release-title {
  text-align:center;

  font-size:13px;
  font-weight:800;
}

.release-sub {
  color:var(--muted);

  text-align:center;

  font:9px var(--mono);
}

.tracklist {
  margin-top:2px;
}

.track {
  width:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:7px 3px;

  border:0;
  border-top:1px solid var(--line);

  background:#fff;
  color:#111;

  text-align:left;

  cursor:pointer;

  font-size:10px;
}

.track.active {
  background:#edf3ff;
}


/* =========================================================
   MEDIA / VIDEO
   ========================================================= */

.media {
  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  display:grid;
  grid-template-rows:minmax(0,1fr) auto;

  overflow:hidden;

  background:#000;
  color:#fff;
}

.media-stage {
  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  position:relative;

  overflow:hidden;

  background:#000;

  display:grid;
  place-items:center;
}

.media-stage>img,
.media-stage>video,
.media-stage>iframe {
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  max-width:none;
  max-height:none;

  margin:0;
  padding:0;

  border:0;

  background:#000;

  object-fit:contain;
}

.media-toolbar {
  position:absolute;

  left:6px;
  right:6px;
  bottom:6px;

  z-index:5;

  display:flex;
  justify-content:space-between;

  gap:6px;

  pointer-events:none;
}

.media-toolbar button {
  padding:4px 6px;

  border:1px solid rgba(255,255,255,.45);

  background:rgba(0,0,0,.65);
  color:#fff;

  pointer-events:auto;

  cursor:pointer;

  font-size:9px;
}

.media-caption {
  width:100%;
  min-width:0;

  padding:6px 8px;

  border-top:1px solid #333;

  background:#111;

  font-size:9px;
  line-height:1.35;

  overflow:hidden;
}

.media-caption strong {
  display:block;
  margin-bottom:2px;

  font-size:10px;
}


/* =========================================================
   PHOTO GRID
   ========================================================= */

.photo-grid {
  width:100%;

  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:5px;
}

.thumb {
  width:100%;

  aspect-ratio:1/1;

  min-width:0;

  padding:0;

  position:relative;

  border:1px solid #bbb;

  overflow:hidden;

  background:#ddd;

  cursor:pointer;
}

.thumb img {
  display:block;

  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  object-fit:cover;
  object-position:center;
}

.thumb::after {
  content:attr(data-label);

  position:absolute;

  left:3px;
  bottom:3px;

  padding:2px 3px;

  background:rgba(0,0,0,.68);
  color:#fff;

  font:7px var(--mono);
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.empty {
  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  display:grid;
  place-items:center;

  padding:14px;

  text-align:center;
}

.empty-inner {
  font-size:10px;
  line-height:1.45;
}

.empty-code {
  display:block;

  margin-top:6px;

  color:var(--muted);

  font:9px var(--mono);
}


/* =========================================================
   CLICK WHEEL
   ========================================================= */

.wheel {
  width:250px;
  height:250px;

  margin:24px auto 4px;

  position:relative;

  border:1px solid #bcbcbc;
  border-radius:50%;

  background:
    radial-gradient(
      circle at 36% 28%,
      #fff 0%,
      #efefef 36%,
      #d3d3d3 70%,
      #b8b8b8 100%
    );

  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.9),
    inset 0 -5px 10px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.85);

  touch-action:none;
  user-select:none;
}

.wheel-hit {
  position:absolute;

  padding:6px;

  border:0;

  background:transparent;
  color:#777;

  cursor:pointer;

  font-size:11px;
  font-weight:800;

  -webkit-tap-highlight-color:transparent;
}

.wheel-hit:hover,
.wheel-hit:focus-visible {
  color:#111;
}

.wheel-hit.pressed {
  color:#111;
  filter:brightness(.92);
}

.wheel-menu {
  top:9px;
  left:50%;

  transform:translateX(-50%);
}

.wheel-prev {
  top:50%;
  left:9px;

  transform:translateY(-50%);

  font-size:13px;
}

.wheel-next {
  top:50%;
  right:9px;

  transform:translateY(-50%);

  font-size:13px;
}

.wheel-play {
  bottom:8px;
  left:50%;

  transform:translateX(-50%);

  font-size:12px;
}

.wheel-center {
  width:80px;
  height:80px;

  position:absolute;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border:1px solid #c2c2c2;
  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #fff 0%,
      #ececec 48%,
      #d6d6d6 100%
    );

  cursor:pointer;

  box-shadow:
    0 2px 4px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.95);

  -webkit-tap-highlight-color:transparent;
}

.wheel-center:active,
.wheel-center.pressed {
  background:#d0d0d0;
}


/* =========================================================
   LABELS
   ========================================================= */

.device-mark {
  color:rgba(0,0,0,.34);

  text-align:center;

  letter-spacing:3px;

  font-size:8px;
}

.outside-note {
  color:rgba(255,255,255,.35);

  font:8px var(--mono);

  letter-spacing:1.2px;
}

.outside-note a {
  color:rgba(255,255,255,.6);
}

.outside-note a:hover,
.outside-note a:focus-visible {
  color:#fff;
}


/* =========================================================
   FOCUS
   ========================================================= */

:focus-visible {
  outline:2px solid #5d94f2;
  outline-offset:2px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }

  .screen-main.screen-change {
    animation:none!important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px) {

  body {
    min-height:100svh;

    padding:
      max(7px,env(safe-area-inset-top))
      5px
      max(12px,env(safe-area-inset-bottom));

    align-items:center;
  }

  .site-shell {
    width:100%;
  }

  .ipod-wrap {
    width:100%;
    max-width:none;
    gap:6px;
  }

  .ipod {
    width:97vw;
    max-width:none;

    padding:14px 14px 11px;

    border-radius:28px;
  }

  .screen {
    width:100%;

    height:43svh;

    min-height:270px;
    max-height:390px;
  }

  .screen-background-video {
    top:24px;
    height:calc(100% - 24px);
  }

  .media {
    grid-template-rows:minmax(0,1fr) auto;
  }

  .media-stage {
    min-height:0;
  }

  .media-stage>img,
  .media-stage>video,
  .media-stage>iframe {
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
  }

  .wheel {
    width:min(58vw,245px);
    height:min(58vw,245px);

    margin-top:18px;
  }

  .wheel-center {
    width:min(19vw,76px);
    height:min(19vw,76px);
  }

  .device-mark {
    font-size:7px;
  }

  .outside-note {
    font-size:7px;
  }
}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width:360px) {

  .ipod {
    width:98vw;

    padding-left:11px;
    padding-right:11px;
  }

  .screen {
    min-height:250px;
  }

  .photo-grid {
    gap:4px;
  }

  .media-caption {
    font-size:8px;
  }

  .media-caption strong {
    font-size:9px;
  }
}
/* PHOTO GRID SELECTION */

.photo-grid .thumb {
  position: relative;
  transition:
    transform 120ms ease,
    filter 120ms ease,
    box-shadow 120ms ease;
}

.photo-grid .thumb.active {
  transform: scale(1.035);
  filter: brightness(1.12);

  box-shadow:
    0 0 0 2px rgba(45, 125, 255, 0.95),
    0 0 7px rgba(45, 125, 255, 0.85),
    0 0 16px rgba(45, 125, 255, 0.55);
}
.live-list .live-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition:
    transform 120ms ease,
    filter 120ms ease,
    box-shadow 120ms ease;
}

.live-list .live-item.active {
  transform: scale(1.015);
  filter: brightness(1.12);

  box-shadow:
    0 0 0 2px rgba(45, 125, 255, 0.95),
    0 0 7px rgba(45, 125, 255, 0.85),
    0 0 16px rgba(45, 125, 255, 0.55);
}

/* =========================================================
   STUDIO DASHBOARD
   (studio.html — account, upload & library management)
   ========================================================= */

.studio-body {
  display:block;
  place-items:initial;
  padding:0;
  min-height:100svh;
  background:
    radial-gradient(circle at 30% 12%, #1c2b4a 0%, transparent 55%),
    radial-gradient(circle at 80% 85%, #2a1c47 0%, transparent 55%),
    #050506;
}

.studio-shell {
  max-width:760px;
  margin:0 auto;
  padding:28px 18px 80px;
}

.studio-header {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
  flex-wrap:wrap;
}

.studio-brand {
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
}

.studio-brand span {
  color:var(--blue-1);
}

.studio-header nav {
  display:flex;
  gap:14px;
  font:12px var(--mono);
}

.studio-header nav a {
  color:rgba(255,255,255,.7);
  text-decoration:none;
}

.studio-header nav a:hover {
  color:#fff;
}

.studio-card {
  background:rgba(20,20,24,.78);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:22px;
  margin-bottom:18px;
  backdrop-filter:blur(6px);
}

.studio-card h2 {
  margin:0 0 4px;
  font-size:15px;
}

.studio-card h3 {
  margin:0 0 12px;
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.studio-lede {
  margin:0 0 18px;
  color:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.5;
}

.field {
  display:block;
  margin-bottom:14px;
}

.field label {
  display:block;
  margin-bottom:6px;
  font:11px var(--mono);
  color:rgba(255,255,255,.55);
  letter-spacing:.4px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field select {
  width:100%;
  padding:10px 12px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:14px;
  font-family:var(--ui);
}

.field input::placeholder {
  color:rgba(255,255,255,.3);
}

.field-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.field-row .field {
  flex:1 1 160px;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 16px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  font:13px var(--ui);
  font-weight:600;
  cursor:pointer;
}

.btn:hover {
  background:rgba(255,255,255,.11);
}

.btn-primary {
  background:var(--blue-2);
  border-color:var(--blue-3);
}

.btn-primary:hover {
  background:var(--blue-3);
}

.btn-danger {
  background:rgba(220,60,60,.15);
  border-color:rgba(220,60,60,.4);
  color:#ff9d9d;
}

.btn-danger:hover {
  background:rgba(220,60,60,.28);
}

.btn-small {
  padding:6px 10px;
  font-size:12px;
  border-radius:7px;
}

.btn[disabled] {
  opacity:.5;
  cursor:default;
}

.studio-tabs {
  display:flex;
  gap:6px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.studio-tab {
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.7);
  font:12px var(--ui);
  font-weight:600;
  cursor:pointer;
}

.studio-tab.active {
  background:var(--blue-2);
  border-color:var(--blue-3);
  color:#fff;
}

.studio-panel {
  display:none;
}

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

.studio-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.studio-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.studio-item .thumb-sm {
  width:38px;
  height:38px;
  border-radius:7px;
  object-fit:cover;
  background:#111;
  flex:none;
}

.studio-item-main {
  flex:1;
  min-width:0;
}

.studio-item-title {
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.studio-item-meta {
  font:11px var(--mono);
  color:rgba(255,255,255,.45);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.studio-item-actions {
  display:flex;
  gap:6px;
  flex:none;
}

.studio-empty {
  padding:20px;
  text-align:center;
  color:rgba(255,255,255,.4);
  font-size:13px;
}

.studio-status {
  font:12px var(--mono);
  padding:10px 12px;
  border-radius:9px;
  margin-bottom:14px;
}

.studio-status.error {
  background:rgba(220,60,60,.15);
  border:1px solid rgba(220,60,60,.4);
  color:#ff9d9d;
}

.studio-status.ok {
  background:rgba(60,180,120,.15);
  border:1px solid rgba(60,180,120,.4);
  color:#9dffce;
}

.studio-auth-toggle {
  margin-top:14px;
  font-size:12px;
  color:rgba(255,255,255,.5);
}

.studio-auth-toggle a {
  color:var(--blue-1);
  cursor:pointer;
  text-decoration:underline;
}

.share-box {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.share-box input {
  flex:1 1 220px;
}

.version-bar {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.version-bar select {
  flex:1 1 180px;
}

.studio-footer-note {
  text-align:center;
  color:rgba(255,255,255,.3);
  font:11px var(--mono);
  margin-top:24px;
}

.studio-footer-note a {
  color:rgba(255,255,255,.5);
}

@media (max-width:480px) {
  .studio-shell {
    padding:20px 12px 60px;
  }

  .studio-card {
    padding:16px;
    border-radius:12px;
  }
}