:root{
  --bg:#0e1113;
  --panel:#191d20;
  --panel2:#242a2e;
  --line:#3b4348;
  --text:#f5f1e9;
  --muted:#aeb5ba;
  --accent:#ffbd2e;
  --danger:#f14e4e;
  --tape:#d83c32;
  --radius:20px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px)
}

*{
  box-sizing:border-box
}

html{
  min-width:320px;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}

body{
  margin:0;
  min-width:320px;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(
      circle at 50% 0,
      #20262a 0,
      #0e1113 43%,
      #090b0c 100%
    );
  color:var(--text);
  font-family:Inter,system-ui,sans-serif
}

button,
input,
textarea,
select{
  font:inherit
}

button{
  touch-action:manipulation
}

.hidden{
  display:none!important
}

/* Header */

.topbar{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--safe-top) clamp(18px,4vw,58px) 0;
  border-bottom:1px solid #262b2e;
  background:rgba(10,12,13,.9);
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:50
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  color:inherit;
  text-decoration:none;
  min-width:0
}

.brand-icon{
  display:block;
  width:34px;
  height:34px;
  flex:none;
  border-radius:7px
}

.brand strong{
  display:block;
  font-size:20px;
  white-space:nowrap
}

.brand small{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.15em;
  margin-top:3px;
  white-space:nowrap
}

.topbar nav{
  display:flex;
  gap:10px
}

.mobile-menu-heading,
.menu-toggle,
.menu-backdrop{
  display:none
}

/* Main page */

.page-shell{
  width:min(980px,94vw);
  margin:0 auto;
  padding:18px 0 calc(24px + var(--safe-bottom))
}

.eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--accent)
}

/* Cassette */

.cassette{
  position:relative;
  width:100%;
  background:
    linear-gradient(
      145deg,
      #22272a,
      #080a0b 70%
    );
  border:4px solid #444b50;
  border-radius:22px;
  padding:38px 28px 18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 0 0 5px #121517;
  overflow:hidden
}

.cassette::before{
  content:"";
  position:absolute;
  inset:10px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 4px
    );
  pointer-events:none
}

.screw{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      #222 25%,
      #777 27%,
      #151515 56%
    );
  z-index:2
}

.s1{
  top:15px;
  left:15px
}

.s2{
  top:15px;
  right:15px
}

.s3{
  bottom:15px;
  left:15px
}

.s4{
  bottom:15px;
  right:15px
}

/* Cassette label */

.label-panel{
  position:relative;
  z-index:1;
  background:
    repeating-linear-gradient(
      #f3efe5 0 37px,
      #c9c4b9 38px,
      #f3efe5 39px
    );
  border-radius:10px 10px 0 0;
  padding:10px 18px;
  min-height:108px;
  display:flex;
  gap:28px;
  color:#161616
}

.side-mark{
  width:50px;
  height:50px;
  border-radius:5px;
  background:#343638;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:32px;
  font-weight:600;
  flex:0 0 auto
}

.label-copy{
  min-width:0;
  flex:1
}

.handwritten{
  font-family:Caveat,cursive
}

.handwritten.title{
  font-size:clamp(34px,5vw,54px);
  line-height:.9;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.label-meta{
  font-size:clamp(11px,1.5vw,15px);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#3a3a3a
}

.handwritten.message{
  font-size:clamp(20px,2.6vw,29px);
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

/* Reels */

.reel-row{
  position:relative;
  z-index:1;
  background:var(--tape);
  min-height:136px;
  display:grid;
  grid-template-columns:
    minmax(92px,130px)
    minmax(92px,150px)
    minmax(150px,1fr)
    minmax(92px,150px)
    minmax(48px,90px);
  align-items:center;
  gap:clamp(10px,2vw,20px);
  padding:14px 20px;
  color:white
}

.tape-spec{
  font-size:13px
}

.tape-spec b{
  font-size:34px;
  display:block;
  margin-top:10px
}

.reel{
  width:min(100%,108px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      #111 0 34%,
      #ddd 35% 55%,
      #8e8e8e 56% 60%,
      #1a1a1a 61%
    );
  display:grid;
  place-items:center;
  justify-self:center;
  box-shadow:0 0 0 8px rgba(0,0,0,.25)
}

.reel span{
  width:51%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      #111 0 12deg,
      #dedbd1 12deg 24deg
    );
  mask:
    radial-gradient(
      circle,
      transparent 0 27%,
      #000 29%
    )
}

.cassette.playing .reel span{
  animation:spin 2.2s linear infinite
}

.tape-window{
  width:100%;
  height:78px;
  border:9px solid #111;
  border-radius:20px;
  background:#20180f;
  overflow:hidden;
  box-shadow:inset 0 0 24px #000
}

.tape-roll{
  height:100%;
  background:
    linear-gradient(
      90deg,
      #332116 0 38%,
      #dedede 47% 54%,
      #332116 62% 100%
    );
  opacity:.85
}

.arrow{
  font-size:42px;
  text-align:center
}

/* Track note and player */

.cassette-media{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:
    minmax(240px,.78fr)
    minmax(430px,1.35fr);
  gap:10px;
  background:#0d1012;
  border:7px solid #141719;
  border-top:9px solid #0d0f10;
  border-radius:0 0 10px 10px;
  padding:10px;
  min-height:250px
}

.track-note-panel{
  position:relative;
  min-height:230px;
  border-radius:8px;
  overflow:hidden;
  background:
    linear-gradient(
      145deg,
      #2d3337,
      #15191c
    );
  border:1px solid #30373b;
  display:flex;
  align-items:flex-end
}

.tape-artwork{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.track-note-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.92) 0,
      rgba(0,0,0,.42) 48%,
      rgba(0,0,0,.12) 100%
    )
}

.track-note-panel:not(.has-artwork) .track-note-shade{
  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(255,189,46,.16),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #2b3034,
      #111416
    )
}

.track-note-copy{
  position:relative;
  z-index:1;
  padding:16px;
  width:100%
}

.track-note-copy strong{
  display:block;
  font-size:clamp(18px,2vw,24px);
  line-height:1.2;
  color:#fff;
  margin:0 0 10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.track-note-copy p{
  font-family:Caveat,cursive;
  font-size:clamp(24px,2.8vw,36px);
  line-height:1.08;
  margin:0;
  color:#f4efe7;
  overflow-wrap:anywhere
}

.player-frame{
  position:relative;
  z-index:2;
  background:#000;
  aspect-ratio:16/9;
  min-height:0;
  border:0;
  border-radius:8px;
  overflow:hidden;
  align-self:center
}

.player-frame iframe,
.player-frame>div:first-child{
  width:100%;
  height:100%;
  display:block
}

.empty-player{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:
    linear-gradient(
      135deg,
      #15191b,
      #050607
    );
  color:var(--muted);
  text-align:center;
  padding:20px
}

.empty-player strong{
  color:var(--text);
  font-size:22px
}

.empty-player.hidden{
  display:none
}

.cassette-feet{
  display:flex;
  justify-content:space-around;
  padding-top:8px
}

.cassette-feet i{
  width:32px;
  height:20px;
  background:#060708;
  border-radius:5px
}

/* Controls */

.under-tape{
  padding:10px 12px 0;
  text-align:center
}

.now-playing{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap
}

.now-playing strong{
  font-size:20px;
  min-width:0;
  overflow-wrap:anywhere
}

.now-playing span:last-child{
  color:var(--muted)
}

.tape-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:10px 0
}

.enjoy{
  font-size:27px;
  color:#ddd;
  margin:8px 0 0
}

/* Buttons */

.primary-btn,
.ghost-btn,
.danger-btn,
.icon-btn{
  border:0;
  border-radius:10px;
  padding:11px 16px;
  font-weight:700;
  cursor:pointer;
  min-height:44px
}

.primary-btn{
  background:var(--accent);
  color:#151515
}

.ghost-btn{
  background:#252a2e;
  color:var(--text);
  border:1px solid #3a4146
}

.danger-btn{
  background:var(--danger);
  color:white
}

.icon-btn{
  background:transparent;
  color:var(--text);
  font-size:26px;
  padding:4px 9px
}

/* Dialogs and forms */

.modal{
  border:0;
  padding:0;
  background:transparent;
  color:var(--text);
  width:min(780px,95vw);
  max-height:92dvh
}

.modal::backdrop{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px)
}

.small-modal{
  width:min(560px,95vw)
}

.modal-card{
  background:
    linear-gradient(
      150deg,
      #22272b,
      #121517
    );
  border:1px solid #41484d;
  border-radius:18px;
  padding:22px;
  box-shadow:0 25px 80px #000;
  max-height:92dvh;
  overflow:auto;
  overscroll-behavior:contain
}

.modal-card header,
.modal-card footer,
.track-header{
  display:flex;
  align-items:center;
  gap:12px
}

.modal-card header{
  justify-content:space-between;
  border-bottom:1px solid #343a3e;
  padding-bottom:15px;
  margin-bottom:20px
}

.modal-card h2,
.modal-card h3{
  margin:4px 0
}

.modal-card footer{
  border-top:1px solid #343a3e;
  padding-top:18px;
  margin-top:20px
}

.spacer{
  flex:1
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.form-grid .full{
  grid-column:1/-1
}

label{
  display:block;
  font-weight:700;
  font-size:13px;
  margin:12px 0
}

label small,
.muted{
  color:var(--muted);
  font-weight:400
}

input,
textarea,
select{
  width:100%;
  margin-top:7px;
  background:#121517;
  border:1px solid #41484d;
  border-radius:9px;
  color:var(--text);
  padding:12px;
  min-height:46px
}

.track-header{
  justify-content:space-between;
  margin:24px 0 10px
}

.track-list{
  display:grid;
  gap:9px
}

.track-item{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:10px;
  align-items:start;
  border:1px solid #373e42;
  background:#171b1e;
  border-radius:12px;
  padding:10px
}

.track-item .number{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#111;
  border-radius:7px;
  font-weight:800
}

.track-item input,
.track-item textarea{
  margin:0
}

.track-fields{
  display:grid;
  gap:7px;
  min-width:0
}

.track-note-field{
  resize:vertical;
  min-height:64px
}

.note-count{
  justify-self:end;
  color:var(--muted);
  font-size:11px;
  margin-top:-3px
}

.track-buttons{
  display:flex;
  gap:5px
}

.track-buttons button{
  padding:7px 9px
}

.my-tapes-list{
  display:grid;
  gap:10px;
  margin-top:18px
}

.my-tape-card{
  border:1px solid #3a4146;
  border-radius:12px;
  padding:14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px
}

.my-tape-card h3{
  margin:0
}

.my-tape-card p{
  margin:5px 0;
  color:var(--muted)
}

.my-tape-actions{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap
}

.copy-row{
  display:flex;
  gap:8px
}

.copy-row input,
.copy-row button{
  margin-top:7px
}

.form-error{
  color:#ff7a7a;
  min-height:20px
}

.toast{
  position:fixed;
  left:50%;
  bottom:calc(25px + var(--safe-bottom));
  transform:translate(-50%,20px);
  background:#fff;
  color:#111;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:99;
  max-width:calc(100vw - 32px);
  text-align:center
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0)
}

@keyframes spin{
  to{
    transform:rotate(360deg)
  }
}

/*
 * MOBILE MODE
 *
 * The hamburger menu appears at 900px and below.
 * Every mobile scale/layout change is applied at the same breakpoint.
 */
@media (max-width:900px){

  html{
    font-size:16px
  }

  .topbar{
    height:66px;
    min-height:66px;
    padding:var(--safe-top) 14px 0
  }

  .brand{
    gap:10px
  }

  .brand-icon{
    width:28px;
    height:28px;
    border-radius:6px
  }

  .brand strong{
    font-size:16px
  }

  .brand small{
    display:none
  }

  .menu-toggle{
    display:flex;
    width:48px;
    height:48px;
    border:1px solid #3a4146;
    border-radius:12px;
    background:#252a2e;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    z-index:62
  }

  .menu-toggle span{
    display:block;
    width:23px;
    height:3px;
    background:#fff;
    border-radius:2px;
    transition:.2s
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(8px) rotate(45deg)
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg)
  }

  .topbar nav{
    position:fixed;
    top:0;
    right:0;
    width:min(86vw,360px);
    height:100dvh;
    padding:
      calc(20px + var(--safe-top))
      18px
      calc(20px + var(--safe-bottom));
    background:
      linear-gradient(
        160deg,
        #252b2f,
        #0e1113
      );
    box-shadow:-18px 0 50px rgba(0,0,0,.55);
    display:flex;
    flex-direction:column;
    gap:10px;
    transform:translateX(105%);
    transition:transform .23s ease;
    z-index:61
  }

  .topbar nav.open{
    transform:translateX(0)
  }

  .topbar nav>.primary-btn,
  .topbar nav>.ghost-btn{
    width:100%;
    min-height:50px;
    padding:14px 16px;
    text-align:left
  }

  .mobile-menu-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #3a4146;
    padding-bottom:12px;
    margin-bottom:8px
  }

  .mobile-menu-heading strong{
    font-size:20px
  }

  .menu-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    border:0;
    opacity:0;
    visibility:hidden;
    transition:.2s;
    z-index:60
  }

  .menu-backdrop.open{
    opacity:1;
    visibility:visible
  }

  body.menu-open{
    overflow:hidden
  }

  .page-shell{
    width:100%;
    margin:0;
    padding:
      10px
      8px
      calc(24px + var(--safe-bottom))
  }

  .cassette{
    width:100%;
    max-width:none;
    padding:34px 9px 11px;
    border-width:3px;
    border-radius:18px;
    box-shadow:
      0 18px 45px rgba(0,0,0,.5),
      inset 0 0 0 3px #121517
  }

  .cassette::before{
    inset:7px
  }

  .screw{
    width:15px;
    height:15px
  }

  .s1,
  .s2{
    top:10px
  }

  .s3,
  .s4{
    bottom:10px
  }

  .s1,
  .s3{
    left:10px
  }

  .s2,
  .s4{
    right:10px
  }

  .label-panel{
    min-height:104px;
    padding:10px 12px;
    gap:10px
  }

  .side-mark{
    width:44px;
    height:44px;
    min-width:44px;
    font-size:28px
  }

  .handwritten.title{
    font-size:clamp(31px,9vw,42px);
    line-height:1
  }

  .label-meta{
    margin-top:4px;
    font-size:10px;
    line-height:1.2
  }

  .handwritten.message{
    margin-top:3px;
    font-size:clamp(21px,5.8vw,28px);
    line-height:1.05
  }

  .reel-row{
    min-height:112px;
    padding:12px 11px;
    grid-template-columns:
      clamp(68px,19vw,88px)
      minmax(120px,1fr)
      clamp(68px,19vw,88px);
    gap:clamp(10px,3vw,18px)
  }

  .tape-spec,
  .arrow{
    display:none
  }

  .reel{
    width:100%;
    max-width:88px;
    box-shadow:0 0 0 5px rgba(0,0,0,.25)
  }

  .tape-window{
    min-width:0;
    height:clamp(56px,15vw,76px);
    border-width:7px;
    border-radius:15px
  }

  .cassette-media{
    grid-template-columns:1fr;
    min-height:0;
    padding:8px;
    gap:9px;
    border-width:5px;
    border-top-width:7px
  }

  .track-note-panel{
    min-height:120px
  }

  .track-note-copy{
    padding:14px
  }

  .track-note-copy strong{
    font-size:18px;
    margin:0 0 8px
  }

  .track-note-copy p{
    font-size:clamp(24px,6.5vw,31px);
    line-height:1.08
  }

  .player-frame{
    width:100%;
    min-height:0;
    height:auto;
    aspect-ratio:16/9
  }

  .player-frame iframe,
  #youtubePlayer{
    width:100%;
    height:100%
  }

  .empty-player{
    min-height:0;
    height:100%;
    padding:18px 12px
  }

  .empty-player strong{
    font-size:20px
  }

  .empty-player span{
    font-size:15px
  }

  .cassette-feet{
    padding-top:6px
  }

  .cassette-feet i{
    width:24px;
    height:14px
  }

  .under-tape{
    width:100%;
    padding:10px 0 0
  }

  .now-playing{
    display:grid;
    grid-template-columns:
      auto
      minmax(0,1fr)
      auto;
    gap:8px;
    padding:0 4px;
    text-align:left
  }

  .now-playing .eyebrow{
    font-size:10px
  }

  .now-playing strong{
    font-size:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }

  #trackCounter{
    font-size:14px
  }

  .tape-actions{
    display:grid;
    grid-template-columns:
      1fr
      1.25fr
      1fr;
    gap:8px;
    margin:10px 0
  }

  .tape-actions button{
    min-height:48px;
    padding:10px 6px;
    font-size:14px
  }

  .tape-actions #shareBtn,
  .tape-actions #remixTapeActionBtn{
    grid-column:1/-1
  }

  .enjoy{
    margin:14px 0 4px;
    font-size:24px
  }

  .form-grid{
    grid-template-columns:1fr
  }

  .form-grid .full{
    grid-column:auto
  }

  .modal{
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:none;
    margin:0
  }

  .modal-card{
    width:100%;
    height:100%;
    max-height:none;
    border:0;
    border-radius:0;
    padding:
      calc(18px + var(--safe-top))
      16px
      calc(18px + var(--safe-bottom));
    box-shadow:none
  }

  .small-modal .modal-card{
    height:auto;
    max-height:94dvh;
    border-radius:18px 18px 0 0;
    position:absolute;
    bottom:0
  }

  .track-header{
    align-items:flex-end
  }

  .track-header button{
    white-space:nowrap
  }

  .my-tape-card{
    grid-template-columns:1fr
  }

  .my-tape-actions button{
    flex:1 1 44%
  }

  .copy-row{
    flex-direction:column
  }

  .copy-row button{
    margin-top:0
  }

  .modal-card footer{
    position:sticky;
    bottom:calc(-18px - var(--safe-bottom));
    background:
      linear-gradient(
        180deg,
        rgba(18,21,23,.92),
        #121517 28%
      );
    padding-bottom:var(--safe-bottom);
    z-index:3
  }
}

/* First-visit welcome */
.welcome-copy{
  display:grid;
  gap:10px
}

.welcome-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.55
}

.welcome-links{
  display:grid;
  gap:14px;
  padding-top:2px
}

.welcome-links > div{
  padding-left:14px;
  border-left:2px solid var(--line)
}

.welcome-links a{
  color:var(--accent);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .18s ease
}

.welcome-links p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45
}

.welcome-links a:hover,
.welcome-links a:focus-visible{
  color:#ffd36d
}

.welcome-modal footer .primary-btn{
  min-width:140px
}

/* Extra adjustments for narrow phones */
@media (max-width:420px){

  .page-shell{
    padding-inline:6px
  }

  .cassette{
    padding-inline:7px
  }

  .label-panel{
    padding-inline:9px
  }

  .side-mark{
    width:40px;
    height:40px;
    min-width:40px;
    font-size:25px
  }

  .reel-row{
    grid-template-columns:
      66px
      minmax(110px,1fr)
      66px;
    gap:10px;
    padding-inline:8px
  }

  .track-item{
    grid-template-columns:28px 1fr
  }

  .track-fields{
    grid-column:2
  }

  .track-buttons{
    grid-column:2;
    display:grid;
    grid-template-columns:repeat(3,1fr)
  }

  .track-buttons button{
    width:100%
  }
}

/* Compact desktop layout for short monitors */
@media (max-height:820px) and (min-width:901px){

  .page-shell{
    width:min(900px,92vw);
    padding-top:10px;
    padding-bottom:12px
  }

  .cassette{
    padding-top:30px;
    padding-bottom:12px
  }

  .label-panel{
    min-height:96px
  }

  .reel-row{
    min-height:118px
  }

  .cassette-media{
    min-height:220px
  }

  .track-note-panel{
    min-height:205px
  }

  .under-tape{
    padding-top:7px
  }

  .enjoy{
    display:none
  }
}


/* YouTube cassette attribution */
.youtube-cassette-link {
  position:absolute;
  top:14px;
  right:18px;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:#222;
  font-family:Inter,system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  opacity:.88;
  transition:opacity .2s ease,transform .2s ease
}
.youtube-cassette-link:link,
.youtube-cassette-link:visited,
.youtube-cassette-link:hover,
.youtube-cassette-link:focus-visible {
  color:#222;
  text-decoration:none
}
.youtube-cassette-link:hover,
.youtube-cassette-link:focus-visible {
  opacity:1;
  transform:translateY(-1px)
}
.youtube-cassette-link svg {
  width:42px;
  height:auto;
  display:block
}
.youtube-cassette-link span {
  color:#222;
  text-decoration:none;
  letter-spacing:.2px
}
.label-copy {
  padding-right:120px
}

/* Information links below the tape */
.site-footer {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin:14px 0 4px;
  padding:4px 12px;
  font-size:25px;
  color:#ddd
}
.site-footer a {
  color:inherit;
  text-decoration:none;
  transition:color .2s ease,transform .2s ease
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color:var(--accent);
  transform:translateY(-1px)
}
.site-footer span {
  color:#777
}

/* Track editor actions */
.track-list-bottom-actions {
  display:flex;
  justify-content:flex-end;
  margin-top:14px
}
.track-list-bottom-actions button {
  min-width:210px
}

@media (max-width:900px) {
  .youtube-cassette-link {
    top:10px;
    right:10px;
    opacity:.95
  }
  .youtube-cassette-link svg {
    width:36px
  }
  .youtube-cassette-link span {
    display:none
  }
  .label-copy {
    padding-right:42px
  }
  .site-footer {
    gap:8px;
    margin-top:14px;
    font-size:23px
  }
  .track-list-bottom-actions button {
    width:100%;
    min-height:50px
  }
  #editorForm footer {
    flex-wrap:wrap
  }
  #copyManageLinkBtn,
  #deleteTapeBtn {
    flex:1 1 auto
  }
}

@media (max-width:420px) {
  .site-footer {
    gap:6px;
    font-size:21px
  }
}


/* Green add-track actions */
.success-btn{
  border:0;
  border-radius:10px;
  min-height:44px;
  padding:11px 16px;
  background:#2f9e44;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .18s ease,transform .18s ease
}
.success-btn:hover,.success-btn:focus-visible{
  background:#37b24d;
  transform:translateY(-1px)
}

/* Copy-button feedback */
.copy-private-link-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}

.ghost-btn.copy-success,
.primary-btn.copy-success{
  background:#2f9e44;
  border-color:#37b24d;
  color:#fff;
  transform:none
}

.ghost-btn.copy-success:hover,
.ghost-btn.copy-success:focus-visible,
.primary-btn.copy-success:hover,
.primary-btn.copy-success:focus-visible{
  background:#2f9e44;
  border-color:#37b24d;
  color:#fff
}

@media (max-width:900px){
  .track-header{
    align-items:flex-end
  }

  .track-list-bottom-actions{
    justify-content:flex-end
  }

  .copy-private-link-wrap{
    width:100%
  }

  .copy-private-link-wrap button{
    flex:1 1 auto
  }
}


#artworkInput::file-selector-button {
  appearance: none;
  border: 1px solid #69737a;
  border-radius: 9px;
  background: linear-gradient(135deg, #3a444b, #22292e);
  color: #fff;
  padding: 9px 14px;
  margin-right: 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .1s;
}

#artworkInput::file-selector-button:hover {
  background: linear-gradient(135deg, #4a565e, #2b343a);
  border-color: #8d9aa2;
}

#artworkInput::file-selector-button:active {
  transform: translateY(1px);
}

#artworkInput:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}