.ever-md-shell, .ever-md-shell * { box-sizing: border-box; }
.ever-md-shell {
  --ever-bg: #030303;
  --ever-ink: #f6f2ec;
  --ever-muted: rgba(246,242,236,.64);
  --ever-faint: rgba(246,242,236,.12);
  --lcd-bg: #63c8ef;
  --lcd-ink: #092234;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(circle at 52% 30%, rgba(255,255,255,.07), transparent 26%), #030303;
  color: var(--ever-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
}
.ever-md-nav {
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  left: clamp(20px, 4vw, 58px);
  right: clamp(20px, 4vw, 58px);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.ever-md-logo { width: clamp(34px, 4vw, 62px); height: clamp(34px, 4vw, 62px); display: inline-flex; align-items: center; justify-content: center; }
.ever-md-logo img { width: 100%; height: 100%; object-fit: contain; display:block; }
.ever-md-nav a { color: var(--ever-ink); text-decoration: none; font-size: clamp(11px, .85vw, 13px); letter-spacing: .25em; font-weight: 600; }
.ever-md-nav-center { justify-self: center; }
.ever-md-nav-right { justify-self: end; }
.ever-md-stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(92px, 11vh, 120px) 18px clamp(38px, 5vh, 64px);
}
.ever-md-statusline {
  height: 16px;
  margin-bottom: 10px;
  color: rgba(255,255,255,.55);
  font-size: 10px;
  letter-spacing: .36em;
  text-transform: uppercase;
}
.ever-md-device-wrap {
  position: relative;
  width: min(76vw, 960px);
  max-width: 960px;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.82));
  transform: translateZ(0);
}
.ever-md-device { width: 100%; display: block; height: auto; user-select: none; pointer-events: none; }
.ever-md-lcd {
  position: absolute;
  left: 51.95%;
  top: 11.6%;
  width: 33.9%;
  height: 25.3%;
  padding: 2.3% 3.1%;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.02) 34%, rgba(0,0,0,.08)),
    var(--lcd-bg);
  color: var(--lcd-ink);
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  text-transform: uppercase;
  line-height: .98;
  text-shadow: 0 0 2px rgba(7,30,40,.1);
  box-shadow: inset 0 0 16px rgba(255,255,255,.28), inset 0 0 18px rgba(0,0,0,.16);
}
.ever-md-lcd::before {
  content: "";
  position:absolute; inset:0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.06) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  pointer-events:none;
  opacity:.5;
}
.ever-md-lcd::after {
  content: "";
  position:absolute; inset:-20%;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.45), transparent 20%);
  pointer-events:none;
  opacity:.35;
  animation: everLcdBreath 4.5s ease-in-out infinite;
}
@keyframes everLcdBreath { 0%,100%{opacity:.26;}50%{opacity:.44;} }
.ever-md-lcd-glow { position:absolute; inset:0; background: linear-gradient(110deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-120%); animation: everLcdSweep 9s ease-in-out infinite; }
@keyframes everLcdSweep { 0%, 74% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
.ever-md-lcd-row, .ever-md-lcd-title, .ever-md-lcd-artist, .ever-md-lcd-album, .ever-md-lcd-bottom { position: relative; z-index: 2; }
.ever-md-lcd-top { display:flex; align-items:center; justify-content:space-between; font-size: clamp(12px, 1.65vw, 22px); }
.ever-md-battery { width: 30px; height: 14px; border: 2px solid currentColor; display:inline-block; position:relative; opacity:.95; }
.ever-md-battery::after { content:""; position:absolute; right:-5px; top:3px; width:3px; height:6px; background:currentColor; }
.ever-md-battery i { display:block; height:100%; width:72%; background:currentColor; opacity:.62; }
.ever-md-lcd-title { margin-top: 3px; white-space: nowrap; overflow: hidden; font-size: clamp(11px, 1.45vw, 20px); }
.ever-md-lcd-title span { display:inline-block; min-width:100%; }
.ever-md-lcd-title.is-long span { animation: everLcdMarquee 8.5s linear infinite; padding-left: 100%; }
@keyframes everLcdMarquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ever-md-lcd-artist, .ever-md-lcd-album { font-size: clamp(11px, 1.45vw, 20px); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.ever-md-lcd-bottom { margin-top: 3px; display:flex; gap: 10px; align-items:center; font-size: clamp(10px, 1.35vw, 19px); }
.ever-md-hit { position:absolute; z-index:8; background:transparent; border:0; padding:0; cursor:pointer; border-radius:999px; }
.ever-md-hit:focus-visible { outline:2px solid rgba(130,220,255,.85); outline-offset:2px; }
.ever-md-hit-prev { left: 52.5%; top: 48%; width: 8%; height: 7%; }
.ever-md-hit-play { left: 62%; top: 59%; width: 7.5%; height: 9%; }
.ever-md-hit-next { left: 61.2%; top: 48%; width: 8%; height: 7%; }
.ever-md-hit-support { left: 81%; top: 45%; width: 10%; height: 14%; }
.ever-md-now { margin-top: clamp(10px, 2vh, 22px); text-align:center; }
.ever-md-now span { display:block; color: var(--ever-muted); font-size:10px; letter-spacing:.36em; }
.ever-md-now strong { display:block; margin-top: 7px; text-transform:uppercase; font-size: clamp(22px, 3vw, 44px); line-height: .9; letter-spacing:-.04em; }
.ever-md-now em { display:block; margin-top: 7px; color: var(--ever-muted); font-style:normal; font-size:12px; letter-spacing:.25em; }
.ever-md-controls {
  width: min(820px, 92vw);
  display:grid;
  grid-template-columns: auto auto auto 1fr auto;
  gap: 10px;
  align-items:center;
  margin-top: 20px;
}
.ever-md-controls button, .ever-md-linkbar a, .ever-md-support-actions a {
  appearance:none;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: var(--ever-ink);
  border-radius: 999px;
  padding: 11px 15px;
  text-decoration:none;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ever-md-controls button:hover, .ever-md-linkbar a:hover, .ever-md-support-actions a:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.09); transform: translateY(-1px); }
.ever-md-main-play { min-width: 96px; }
.ever-md-progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  overflow:hidden;
  cursor:pointer;
}
.ever-md-progress-fill { width: 0%; height: 100%; background: rgba(255,255,255,.78); border-radius: inherit; }
.ever-md-linkbar { margin-top: 14px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; min-height:42px; }
.ever-md-support-panel {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(16px);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 20px;
}
.ever-md-support-panel.is-open { display:flex; }
.ever-md-support-card {
  position:relative;
  width:min(540px, 94vw);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 34px;
  background: linear-gradient(180deg, rgba(24,24,24,.96), rgba(5,5,5,.96));
  box-shadow: 0 40px 160px rgba(0,0,0,.86);
}
.ever-md-close { position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.16); background:transparent; color:#fff; cursor:pointer; }
.ever-md-support-card span { color: var(--ever-muted); font-size: 10px; letter-spacing:.32em; text-transform:uppercase; }
.ever-md-support-card h3 { margin: 10px 0 12px; font-size: clamp(28px, 5vw, 48px); line-height:.9; letter-spacing:-.05em; text-transform:uppercase; }
.ever-md-support-card p { color: var(--ever-muted); line-height:1.55; margin: 0 0 24px; }
.ever-md-support-actions { display:flex; flex-wrap:wrap; gap:10px; }
.ever-md-empty { color: var(--ever-muted); font-size: 12px; letter-spacing:.08em; }
@media (max-width: 760px) {
  .ever-md-stage { padding-top: 82px; justify-content: flex-start; }
  .ever-md-device-wrap { width: min(108vw, 820px); margin-left: 2vw; }
  .ever-md-lcd { border-radius: 5px; }
  .ever-md-controls { grid-template-columns: repeat(3, auto); justify-content:center; }
  .ever-md-progress { grid-column: 1 / -1; width: 86vw; order: -1; }
  .ever-md-controls button:last-child { grid-column: 1 / -1; justify-self:center; }
}

/* v0.2 layout hardening */
.ever-md-shell {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
}
.ever-md-stage {
  width: 100%;
  min-height: 100svh;
  padding-top: clamp(86px, 9.5vh, 118px);
  padding-bottom: clamp(126px, 17vh, 188px);
}
.ever-md-device-wrap {
  width: min(88vw, 1120px);
  max-width: 1120px;
}
.ever-md-now {
  max-width: min(920px, 92vw);
}
.ever-md-controls,
.ever-md-linkbar {
  position: relative;
  z-index: 6;
}
@media (max-width: 760px) {
  .ever-md-shell { min-height: auto; }
  .ever-md-stage {
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: 74px;
    padding-bottom: 72px;
  }
  .ever-md-device-wrap {
    width: min(116vw, 760px);
    margin-left: 0;
  }
  .ever-md-now strong { font-size: clamp(22px, 9vw, 42px); }
  .ever-md-linkbar { max-width: 92vw; margin-left: auto; margin-right: auto; }
}