:root {
  --ink: #21120d;
  --paper: #f7e3bd;
  --muted: rgba(247, 227, 189, 0.72);
  --line: rgba(247, 227, 189, 0.28);
  --panel: rgba(28, 14, 9, 0.76);
  --accent: #f49b32;
  --serif: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, serif;
  --sans: Avenir Next, Futura, Trebuchet MS, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; overflow-x: clip; }
body { background: #2a1710; color: var(--paper); font-family: var(--sans); }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.stage { position: relative; min-height: 100svh; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px; }
.artwork, .vignette, .grain { position: absolute; inset: 0; pointer-events: none; }
.artwork { z-index: -3; background: url('/bandar-protest.png') center center / cover no-repeat; animation: settle 1.4s cubic-bezier(.2,.8,.2,1) both; }
.vignette { z-index: -2; background: linear-gradient(180deg, rgba(23, 9, 4, .42), transparent 27%, transparent 58%, rgba(16, 7, 4, .76)), linear-gradient(90deg, rgba(18, 8, 4, .28), transparent 26%, transparent 74%, rgba(18, 8, 4, .2)); }
.grain { z-index: -1; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.placard-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.placard { position: absolute; display: block; width: clamp(48px, 7vw, 92px); height: clamp(30px, 4vw, 56px); border: 2px solid rgba(74, 42, 23, .72); background: rgba(181, 130, 74, .72); box-shadow: 0 4px 8px rgba(28, 12, 5, .24), inset 0 1px 0 rgba(255, 227, 169, .22); transform-origin: 50% 100%; will-change: transform; animation: placard-sway 4.8s ease-in-out infinite; }
.placard::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 42px; background: rgba(61, 35, 20, .7); transform: translateX(-50%); }
.placard-a { left: 8%; bottom: 38%; transform: rotate(-5deg); animation-delay: -1.7s; }
.placard-b { left: 28%; bottom: 35%; animation-duration: 5.4s; animation-delay: -2.4s; }
.placard-c { right: 24%; bottom: 37%; animation-duration: 4.4s; animation-delay: -1.8s; }
.placard-d { right: 7%; bottom: 39%; animation-duration: 5.1s; animation-delay: -3.2s; }

.topbar { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; position: relative; z-index: 2; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.clock { justify-self: start; font-variant-numeric: tabular-nums; }
.presence { display: inline-flex; align-items: center; gap: 8px; justify-self: center; color: var(--paper); }
.presence-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(244,155,50,.18), 0 0 14px rgba(244,155,50,.9); }
.presence-label { color: var(--muted); }
.top-actions { justify-self: end; display: inline-flex; align-items: center; gap: 18px; }
.share-button, .video-link, .contact-link { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); text-decoration: none; transition: color .2s ease, transform .2s ease; }
.share-button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.share-button:hover { color: white; transform: translateY(-1px); }
.video-link:hover { color: white; transform: translateY(-1px); }
.contact-link { padding-bottom: 4px; border-bottom: 1px solid rgba(247,227,189,.58); }
.contact-link:hover { color: white; border-color: white; }
.share-button:focus-visible, .video-link:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--paper); outline-offset: 5px; }
.arrow { color: var(--accent); font-size: 15px; }
.share-icon { color: var(--accent); font-size: 15px; }

.identity { position: absolute; top: 11vh; left: 24px; right: 24px; text-align: center; color: var(--ink); animation: rise .9s .15s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow, .subtitle { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow { margin-bottom: 14px; opacity: .75; }
.identity h1 { margin: 0; font-family: var(--serif); font-size: clamp(3.4rem, 8vw, 7.5rem); font-weight: 800; line-height: .84; letter-spacing: -.075em; text-shadow: 0 2px 0 rgba(247,227,189,.18), 0 8px 26px rgba(67,28,8,.23); }
.subtitle { margin-top: 22px; opacity: .8; }

.player-shell { position: relative; width: min(100%, 540px); display: grid; grid-template-columns: auto 1fr auto; gap: 11px 12px; align-items: center; margin-bottom: 3vh; padding: 10px 13px 10px 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(29, 18, 14, .46); box-shadow: 0 14px 38px rgba(16,7,3,.28), inset 0 1px 0 rgba(255,255,255,.16); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); animation: rise .9s .3s cubic-bezier(.2,.8,.2,1) both; }
.track-mark { width: 40px; height: 40px; flex: 0 0 auto; border: 1.5px solid rgba(247,227,189,.72); border-radius: 50%; background: url('/bandar-protest.png') 50% 42% / auto 360% no-repeat, linear-gradient(145deg, #ed9b36, #7d2f18); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 12px rgba(16,7,3,.28); will-change: transform; }
.player-shell.is-playing .track-mark { animation: thumbnail-spin 9s linear infinite; }
.track-info { min-width: 0; }
.track-title { margin: 0 0 3px; color: var(--paper); font-family: var(--serif); font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.track-meta, .time-row { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.divider { margin: 0 5px; color: rgba(247,227,189,.4); }
.player-controls { grid-column: 2 / 3; display: flex; align-items: center; gap: 12px; min-width: 0; }
.play-button { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.play-button:hover { transform: scale(1.06); background: white; }
.play-icon { width: 0; height: 0; margin-left: 3px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid currentColor; }
.is-playing .play-icon { width: 11px; height: 14px; margin: 0; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.timeline { flex: 1; min-width: 0; }
input[type='range'] { width: 100%; height: 4px; appearance: none; border-radius: 99px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--progress, 0%), rgba(247,227,189,.25) var(--progress, 0%), rgba(247,227,189,.25) 100%); cursor: pointer; }
input[type='range']::-webkit-slider-thumb { width: 11px; height: 11px; appearance: none; border: 2px solid var(--paper); border-radius: 50%; background: var(--accent); }
input[type='range']::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid var(--paper); border-radius: 50%; background: var(--accent); }
.time-row { display: flex; justify-content: space-between; margin-top: 7px; font-variant-numeric: tabular-nums; }
.volume-button { align-self: center; border: 0; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; transition: color .2s ease; }
.volume-button:hover { color: var(--paper); }

@keyframes settle { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes placard-sway { 0%, 100% { transform: translateX(-4px) rotate(-4deg); } 50% { transform: translateX(5px) rotate(4deg); } }
@keyframes thumbnail-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .stage { padding: 18px 16px 16px; }
  .topbar { grid-template-columns: 1fr auto; gap: 14px; font-size: 9px; }
  .presence { grid-column: 1 / -1; grid-row: 2; }
  .top-actions { grid-column: 2; grid-row: 1; gap: 10px; }
  .share-label { display: none; }
  .contact-link { padding-bottom: 3px; }
  .artwork { background-position: 53% center; }
  .placard-a { left: 4%; bottom: 34%; }
  .placard-b { left: 25%; bottom: 32%; }
  .placard-c { right: 18%; bottom: 34%; }
  .placard-d { right: 2%; bottom: 35%; }
  .identity { top: 14vh; left: 16px; right: 16px; }
  .identity h1 { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .eyebrow { font-size: 8px; }
  .subtitle { margin-top: 16px; font-size: 8px; }
  .player-shell { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; margin-bottom: max(1vh, 8px); gap: 12px 10px; padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); border-radius: 20px; }
  .track-mark { width: 42px; height: 42px; }
  .track-info { grid-column: 2 / -1; }
  .track-title { font-size: 13px; }
  .track-meta { font-size: 9px; }
  .player-controls { grid-column: 1 / -1; gap: 10px; }
  .play-button { width: 42px; height: 42px; }
  .timeline { padding-right: 48px; }
  input[type='range'] { height: 26px; background-size: 100% 5px; touch-action: none; }
  input[type='range']::-webkit-slider-thumb { width: 16px; height: 16px; }
  input[type='range']::-moz-range-thumb { width: 14px; height: 14px; }
  .time-row { margin-top: 2px; }
  .volume-button { position: absolute; right: 6px; bottom: calc(22px + env(safe-area-inset-bottom)); width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(247,227,189,.18); border-radius: 50%; background: rgba(247,227,189,.08); touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }