:root{--ink:#21120d;--paper:#f7e3bd;--muted:#f7e3bdb8;--line:#f7e3bd47;--panel:#1c0e09c2;--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{color:var(--paper);font-family:var(--sans);background:#2a1710}button,a,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.stage{isolation:isolate;flex-direction:column;justify-content:space-between;align-items:center;min-height:100svh;padding:24px;display:flex;position:relative;overflow:hidden}.artwork,.vignette,.grain{pointer-events:none;position:absolute;inset:0}.artwork{z-index:-3;background:url(/bandar-protest.png) 50%/cover no-repeat;animation:1.4s cubic-bezier(.2,.8,.2,1) both settle}.vignette{z-index:-2;background:linear-gradient(#1709046b,#0000 27% 58%,#100704c2),linear-gradient(90deg,#12080447,#0000 26% 74%,#12080433)}.grain{z-index:-1;opacity:.1;mix-blend-mode:soft-light;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")}.placard-field{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.placard{transform-origin:50% 100%;will-change:transform;background:#b5824ab8;border:2px solid #4a2a17b8;width:clamp(48px,7vw,92px);height:clamp(30px,4vw,56px);animation:4.8s ease-in-out infinite placard-sway;display:block;position:absolute;box-shadow:0 4px 8px #1c0c053d,inset 0 1px #ffe3a938}.placard:after{content:"";background:#3d2314b3;width:2px;height:42px;position:absolute;top:100%;left:50%;transform:translate(-50%)}.placard-a{animation-delay:-1.7s;bottom:38%;left:8%;transform:rotate(-5deg)}.placard-b{animation-duration:5.4s;animation-delay:-2.4s;bottom:35%;left:28%}.placard-c{animation-duration:4.4s;animation-delay:-1.8s;bottom:37%;right:24%}.placard-d{animation-duration:5.1s;animation-delay:-3.2s;bottom:39%;right:7%}.topbar{z-index:2;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 10px #0009;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;width:100%;font-size:11px;display:grid;position:relative}.clock{font-variant-numeric:tabular-nums;justify-self:start}.presence{color:var(--paper);justify-self:center;align-items:center;gap:8px;display:inline-flex}.presence-dot{background:var(--accent);border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #f49b322e,0 0 14px #f49b32e6}.presence-label{color:var(--muted)}.top-actions{justify-self:end;align-items:center;gap:18px;display:inline-flex}.share-button,.video-link,.contact-link{color:var(--paper);align-items:center;gap:8px;text-decoration:none;transition:color .2s,transform .2s;display:inline-flex}.share-button{cursor:pointer;background:0 0;border:0;padding:0}.share-button:hover,.video-link:hover{color:#fff;transform:translateY(-1px)}.contact-link{border-bottom:1px solid #f7e3bd94;padding-bottom:4px}.contact-link:hover{color:#fff;border-color:#fff}.share-button:focus-visible,.video-link:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--paper);outline-offset:5px}.arrow,.share-icon{color:var(--accent);font-size:15px}.identity{text-align:center;color:var(--ink);animation:.9s cubic-bezier(.2,.8,.2,1) .15s both rise;position:absolute;top:11vh;left:24px;right:24px}.eyebrow,.subtitle{letter-spacing:.17em;text-transform:uppercase;margin:0;font-size:10px;font-weight:600}.eyebrow{opacity:.75;margin-bottom:14px}.identity h1{font-family:var(--serif);letter-spacing:-.075em;text-shadow:0 2px #f7e3bd2e,0 8px 26px #431c083b;margin:0;font-size:clamp(3.4rem,8vw,7.5rem);font-weight:800;line-height:.84}.subtitle{opacity:.8;margin-top:22px}.player-shell{-webkit-backdrop-filter:blur(28px)saturate(170%);background:#18100d8f;border:1px solid #ffffff40;border-radius:999px;align-items:center;gap:14px;width:min(100%,480px);min-height:86px;margin-bottom:3vh;padding:8px 14px 8px 8px;animation:.9s cubic-bezier(.2,.8,.2,1) .3s both rise;display:flex;position:relative;box-shadow:0 16px 42px #10070357,inset 0 1px #ffffff29}.track-mark{will-change:transform;background:url(/bandar-protest.png) 50% 42%/auto 360% no-repeat,linear-gradient(145deg,#ed9b36,#7d2f18);border:1.5px solid #f7e3bdc2;border-radius:50%;flex:none;width:54px;height:54px;box-shadow:inset 0 1px #ffffff3d,0 5px 14px #1007034d}.player-shell.is-playing .track-mark{animation:9s linear infinite thumbnail-spin}.track-info{flex:1 1 0;min-width:0}.track-title{color:var(--paper);font-family:var(--serif);letter-spacing:-.02em;text-overflow:ellipsis;white-space:nowrap;margin:0 0 3px;font-size:14px;font-weight:700;overflow:hidden}.track-meta,.time-row{color:var(--muted);letter-spacing:.04em;margin:0;font-size:9px}.divider{color:#f7e3bd66;margin:0 5px}.player-controls{flex:none;align-items:center;gap:7px;display:flex}.play-button{cursor:pointer;background:var(--paper);width:44px;height:44px;color:var(--ink);border:0;border-radius:50%;flex:none;place-items:center;transition:transform .2s,background .2s;display:grid;box-shadow:0 4px 12px #0c050238}.play-button:hover{background:#fff;transform:scale(1.06)}.play-icon{border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:10px solid;width:0;height:0;margin-left:3px}.is-playing .play-icon{border:0;border-left:3px solid;border-right:3px solid;width:11px;height:14px;margin:0}.timeline{min-width:0;margin-top:7px}input[type=range]{appearance:none;background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--progress,0%), #f7e3bd40 var(--progress,0%), #f7e3bd40 100%) center / 100% 2px no-repeat;cursor:pointer;touch-action:none;border-radius:99px;width:100%;height:10px}input[type=range]::-webkit-slider-thumb{appearance:none;border:1.5px solid var(--paper);background:var(--accent);border-radius:50%;width:9px;height:9px}input[type=range]::-moz-range-thumb{border:1.5px solid var(--paper);background:var(--accent);border-radius:50%;width:8px;height:8px}.time-row{font-variant-numeric:tabular-nums;align-items:center;gap:5px;margin-top:1px;display:flex}@keyframes settle{0%{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes placard-sway{0%,to{transform:translate(-4px)rotate(-4deg)}50%{transform:translate(5px)rotate(4deg)}}@keyframes thumbnail-spin{to{transform:rotate(360deg)}}@media (width<=600px){.stage{padding:18px 16px 16px}.topbar{grid-template-columns:1fr auto;gap:14px;font-size:9px}.presence{grid-area:2/1/auto/-1}.top-actions{grid-area:1/2;gap:10px}.share-label{display:none}.contact-link{padding-bottom:3px}.artwork{background-position:53%}.placard-a{bottom:34%;left:4%}.placard-b{bottom:32%;left:25%}.placard-c{bottom:34%;right:18%}.placard-d{bottom:35%;right:2%}.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{border-radius:999px;gap:10px;min-height:86px;margin-bottom:max(1vh,8px);padding:8px 10px 8px 8px}.track-mark{width:54px;height:54px}.track-title{font-size:13px}.track-meta{font-size:9px}.play-button{width:44px;height:44px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}