/* A compact Shanghai music guide. Photography leads; controls use quiet glass. */
.guide-page { --accent:#b9c5ff; max-width:760px; margin:auto; padding:18px 20px 35px; color:#f2f3f7; font-family:-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif; }
.guide-page * { box-sizing:border-box; }
.guide-page a { color:inherit; text-decoration:none; }
.guide-page button { font:inherit; cursor:pointer; }
.guide-page button:disabled { opacity:.55; cursor:wait; }
.guide-page :focus-visible { outline:2px solid #b9c5ff; outline-offset:4px; }
.guide-page h1,.guide-page h2,.guide-page h3,.guide-page p { margin:0; }
.guide-page small { color:#98a3b9; font-size:10px; letter-spacing:.12em; }
.guide-page img { background:#151925; object-fit:cover; }
.guide-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.guide-heading h2 { margin-top:7px; font-size:21px; font-weight:650; letter-spacing:-.04em; }
.guide-heading a,.guide-muted { color:#a8b2c4!important; font-size:12px; line-height:1.8; }
.guide-section-all { display:inline-flex; align-items:center; min-height:44px; flex-shrink:0; white-space:nowrap; }
.guide-section-all:focus-visible { outline:2px solid #c5ceff; outline-offset:4px; border-radius:4px; }
.guide-section { padding:27px 0; border-bottom:1px solid #ffffff10; scroll-margin-top:105px; }
.guide-empty { padding:25px 18px; border:1px solid #ffffff14; border-radius:16px; background:#ffffff03; color:#aab4c7; font-size:13px; line-height:1.9; }
.guide-empty a { display:inline-block; color:#c1cbff; margin-top:10px; }
.guide-carousel { margin:0 -4px 17px; }
.guide-slides { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:23px; background:#151825; }
.guide-slides::-webkit-scrollbar { display:none; }
.guide-slide { position:relative; display:block; flex:0 0 100%; height:310px; scroll-snap-align:start; overflow:hidden; }
.guide-slide img { width:100%; height:100%; }
.guide-slide:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#05070c10 15%,#05070c66 45%,#05070cf5); }
.guide-slide>div { position:absolute; z-index:1; left:23px; right:23px; bottom:24px; }
.guide-slide h1 { font-size:29px; letter-spacing:-.055em; line-height:1.14; margin:10px 0; text-wrap:balance; }
.guide-slide p { color:#c1c6d3; font-size:12px; }
.guide-slide b { display:block; font-size:12px; font-weight:500; margin-top:15px; color:#d8deff; }
.guide-slide-nav { display:flex; justify-content:center; gap:7px; margin:11px 0 0; }
.guide-slide-nav button { width:18px; height:4px; padding:0; border:0; border-radius:2px; background:#3d4354; }
.guide-slide-nav button[aria-pressed=true] { background:#bfcbff; width:32px; }
.guide-search-link { display:flex; align-items:center; gap:10px; border:1px solid #ffffff16; background:linear-gradient(140deg,#ffffff0c,#ffffff03); border-radius:15px; padding:16px; font-size:20px; }
.guide-search-link span { color:#8f9ab0; font-size:12px; flex:1; }
.guide-search-link b { font-size:10px; color:#bac5e2; font-weight:500; }
.guide-shortcuts { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:20px 0 0; padding-bottom:16px; border-bottom:1px solid #ffffff13; }
.guide-shortcuts a { text-align:center; font-size:14px; padding:5px; border-right:1px solid #ffffff13; }
.guide-shortcuts a:last-child { border:0; }
.guide-shortcuts span { display:block; font-size:9px; color:#777f96; letter-spacing:.15em; margin-bottom:5px; }
.guide-event { padding:17px 0; min-width:0; border-bottom:1px solid #ffffff0c; }
.guide-event:last-child { border:0; }
.guide-event-main { display:grid; grid-template-columns:108px minmax(0,1fr); gap:16px; align-items:start; }
.guide-event-poster { display:block; overflow:hidden; border-radius:13px; aspect-ratio:3/4; background:#151925; }
.guide-event-poster>img { display:block; width:100%; height:100%; object-fit:cover; }
.guide-date-art { position:relative; display:flex; height:100%; min-height:100%; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(ellipse at 0 0,#7588c531,transparent 72%),linear-gradient(155deg,#202736,#10151f); color:#d5def6; }
.guide-date-art small { color:#b7c4df; font-size:11px; letter-spacing:.16em; }
.guide-date-art strong { font-size:38px; line-height:1.1; font-weight:500; letter-spacing:-.06em; font-variant-numeric:tabular-nums; margin:5px 0; }
.guide-date-art i { font-size:10px; font-style:normal; letter-spacing:.17em; color:#91a2c0; }
.guide-date-art>span { font-size:7px; letter-spacing:.3em; color:#7785a0; margin-top:13px; }
.guide-event-venue .guide-claim-label { margin-left:7px; }
.guide-claim-label { font-size:10px; color:#a5abc0; font-weight:400; letter-spacing:0; }
.guide-event-copy { display:flex; flex-direction:column; min-width:0; min-height:144px; }
.guide-event-link { display:block; min-width:0; }
.guide-event .guide-event-date { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-size:11px; letter-spacing:0; line-height:1.5; }
.guide-event-date em { color:#b5c2e3; font-size:10px; font-style:normal; white-space:nowrap; }
.guide-event h3 { margin:7px 0 8px; line-height:1.35; font-size:17px; font-weight:650; letter-spacing:-.025em; overflow-wrap:anywhere; }
.guide-event .guide-event-venue { font-size:12px; line-height:1.55; color:#b6bfd1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guide-event .guide-event-lineup { margin-top:3px; font-size:11px; line-height:1.5; color:#8590a5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guide-event-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; }
.guide-event-footer-copy { flex:1; min-width:0; }
.guide-event-footer .guide-tags { margin:0; gap:5px; }
.guide-event-footer .guide-tags span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; padding:4px 7px; line-height:1.25; }
.guide-event-footer .guide-event-distance { min-height:32px; gap:3px; padding:3px 6px; }
.guide-event-location { flex:0 0 auto; }
.guide-event-distance { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px; min-height:40px; max-width:104px; padding:5px 7px; border:1px solid #b9c5ff18; border-radius:9px; background:#b9c5ff06; color:#d9e2ff; font:inherit; cursor:pointer; }
.guide-event-distance small { display:flex; align-items:center; gap:4px; color:#98a9c3; font-size:10px; letter-spacing:0; line-height:1.2; }
.guide-event-distance svg { width:10px; height:12px; }
.guide-event-distance b { font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1.2; }
.guide-event-distance b.is-unavailable { font-size:10px; color:#98a9c3; }
.guide-page .guide-event-distance:disabled,.mine-v2 .guide-event-distance:disabled { cursor:default; opacity:1; border-color:transparent; background:none; }
.guide-event-distance:focus-visible { outline:2px solid #b9c5ff; outline-offset:3px; }
.guide-event .guide-event-feedback,.mine-v2 .guide-event-feedback { margin:9px 0 0; color:#c5bda6; font-size:11px; line-height:1.7; white-space:normal; overflow-wrap:anywhere; }
.guide-event-feedback[hidden] { display:none; }
.mine-v2-event .guide-event-distance { align-items:flex-start; justify-self:start; flex-direction:row; align-items:center; gap:7px; max-width:100%; min-height:32px; margin-top:3px; }
.mine-v2-event .guide-event-distance b { font-size:11px; color:#becbeb; }
@media(max-width:480px){
  .guide-event-main { grid-template-columns:94px minmax(0,1fr); gap:13px; }
  .guide-event-copy { min-height:126px; }
  .guide-event h3 { font-size:16px; margin:6px 0; }
  .guide-event-footer { gap:8px; padding-top:8px; }
  .guide-event-footer .guide-event-distance { padding:3px 0 3px 6px; max-width:86px; }
}
.guide-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:9px; }
.guide-tags span { font-size:10px; color:#c3ccdd; padding:4px 7px; border:1px solid #ffffff14; border-radius:6px; background:#ffffff04; }
.guide-entity { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid #ffffff0c; }
.guide-entity:last-child { border-bottom:0; }
.guide-entity img { width:76px; height:84px; flex-shrink:0; border-radius:12px; }
.guide-entity.venues img { width:88px; height:74px; }
.guide-entity>div { flex:1; min-width:0; }
.guide-entity h3 { font-size:16px; margin:4px 0; }
.guide-entity small { font-size:10px; letter-spacing:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guide-entity p { color:#919db5; font-size:10px; margin-top:6px; }
.guide-entity>i { font-size:22px; color:#8e99ad; font-style:normal; }
.guide-artist-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 12px; }
.guide-artist-feed { min-height:70px; padding:24px 0; text-align:center; color:#919db5; font-size:12px; }
.guide-artist-feed p { margin:0 0 12px; }
.guide-artist-feed button { padding:9px 18px; border:1px solid #ffffff24; border-radius:20px; background:#ffffff08; color:#d9e1f5; cursor:pointer; }
.guide-artist-feed button[hidden] { display:none; }
.guide-artist-card { display:flex; flex-direction:column; gap:10px; min-width:0; color:#f2f4fa; text-decoration:none; }
.guide-artist-card>img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border:1px solid #ffffff16; border-radius:18px; background:#0e131b; transition:border-color .18s; }
.guide-artist-card h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.9em; margin:0; overflow:hidden; overflow-wrap:anywhere; text-align:center; font-size:14px; font-weight:600; line-height:1.45; }
.guide-artist-card:focus-visible { outline:2px solid #c5ceff; outline-offset:4px; border-radius:18px; }
@media(hover:hover) { .guide-artist-card:hover>img { border-color:#b8c9ff77; } }
@media(max-width:520px) {
  .guide-artist-grid { gap:16px 7px; }
  .guide-artist-card { gap:8px; }
  .guide-artist-card>img { border-radius:12px; }
  .guide-artist-card h3 { font-size:12px; }
}
.guide-entity-distance { flex:0 0 86px; display:grid; justify-items:end; align-content:center; gap:7px; padding-left:10px; border-left:1px solid #ffffff0d; white-space:nowrap; }
.guide-entity-distance small { display:flex; align-items:center; gap:4px; color:#9ca9bf; font-size:10px; }
.guide-entity-distance svg { width:10px; height:12px; }
.guide-entity-distance b { color:#d9e2ff; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.guide-entity-distance b.is-unavailable { font-size:11px; color:#9ca9bf; font-weight:400; }
.guide-discover-location { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding:11px 12px; border:1px solid #c6d2ff14; border-radius:12px; background:#b2c4ff06; }
.guide-discover-location p { color:#a0adc4; font-size:11px; line-height:1.65; }
.guide-discover-location button { flex-shrink:0; min-height:40px; padding:7px 11px; border:1px solid #c6d2ff26; border-radius:10px; background:#c6d2ff0d; color:#d6dfff; font-size:12px; }
.guide-discover-location+.guide-result-heading { margin-top:16px; }
.guide-entity.venues h3,.guide-entity.venues .guide-tags span { overflow-wrap:anywhere; }
@media(max-width:480px) {
  .guide-discover .guide-entity.venues { gap:10px; }
  .guide-discover .guide-entity.venues>img { width:64px; height:64px; }
  .guide-entity-distance { flex-basis:70px; padding-left:7px; gap:6px; }
  .guide-entity-distance b { font-size:13px; }
  .guide-entity-distance b.is-unavailable { font-size:10px; }
}
.guide-operating-venues { position:relative; isolation:isolate; padding:26px 18px 16px; margin:24px -4px 0; border:1px solid #d7e3ff24; border-radius:28px; background:radial-gradient(ellipse at 78% 0,#23263566,transparent 45%),linear-gradient(145deg,#0a0d13,#050709); box-shadow:inset 0 1px #ffffff0a; }
.guide-operating-venues .guide-heading { align-items:center; margin-bottom:14px; }
.guide-operating-venues .guide-heading h2 { font-size:25px; letter-spacing:.015em; }
.guide-operating-venues .guide-heading small { color:#a8b4dd; letter-spacing:.19em; }
.guide-venue-all { white-space:nowrap; border:1px solid #d7e3ff24; border-radius:999px; padding:9px 14px; background:#05070a70; }
.guide-venue-signature { position:absolute; top:23px; right:145px; z-index:-1; font:italic 25px/1.05 Georgia,serif; transform:rotate(-12deg); color:#8c94ab50; }
.guide-venue-distance svg { width:12px; height:14px; flex-shrink:0; }
.guide-venue-note { margin:18px 0 0!important; padding-top:12px; border-top:1px solid #ffffff12; color:#929bae; font-size:10px; line-height:1.8; }
.guide-venue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.guide-venue-card { position:relative; display:flex; align-items:flex-end; width:100%; min-width:0; min-height:0; aspect-ratio:1; overflow:hidden; border:1px solid #ffffff16; border-radius:18px; background:#0e131b; transition:transform .18s,border-color .18s; }
.guide-venue-card>img { position:absolute; inset:0; width:100%; height:100%; }
.guide-venue-card:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#00000015 10%,#02040722 35%,#020407d9 66%,#020407 100%); pointer-events:none; }
.guide-venue-distance { position:absolute; z-index:2; top:9px; right:8px; display:flex; align-items:center; gap:4px; padding:6px 8px; border-radius:20px; background:#040609bf; font-size:11px; color:#f6f7fa; border:1px solid #ffffff0b; white-space:nowrap; }
.guide-venue-copy { position:relative; z-index:1; min-width:0; width:100%; padding:14px 12px; }
.guide-venue-card h3 { font-size:18px; line-height:1.25; letter-spacing:-.015em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guide-venue-card p { margin-top:7px; color:#afb8ca; font-size:11px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guide-venue-status { display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:11px; font-size:10px; line-height:1.6; color:#aeb8cb; }
.guide-venue-status>span:first-child { display:flex; gap:5px; align-items:center; }
.guide-venue-status i { width:6px; height:6px; border-radius:50%; background:#818b9e; flex-shrink:0; }
.guide-venue-status.is-open>span:first-child { color:#39e2af; }
.guide-venue-status.is-open i { background:#27dfac; box-shadow:0 0 10px #27dfac33; }
.guide-venue-copy em { display:block; font-size:9px; font-style:normal; color:#aab1c1; margin-top:5px; }
@media(hover:hover) { .guide-venue-card:hover { transform:translateY(-3px); border-color:#b8c9ff55; } }
@media(max-width:520px) {
  .guide-operating-venues { padding:20px 10px 12px; margin-left:-8px; margin-right:-8px; border-radius:22px; }
  .guide-operating-venues .guide-heading { gap:6px; }
  .guide-operating-venues .guide-heading h2 { font-size:20px; }
  .guide-venue-all { padding:7px 10px; font-size:10px!important; }
  .guide-venue-signature { display:none; }
  .guide-venue-grid { gap:7px; }
  .guide-venue-card { min-height:0; aspect-ratio:1; border-radius:12px; }
  .guide-venue-distance { top:6px; right:4px; font-size:9px; padding:5px; gap:3px; }
  .guide-venue-distance svg { width:10px; height:12px; }
  .guide-venue-copy { padding:10px 7px; }
  .guide-venue-card h3 { font-size:13px; }
  .guide-venue-card p { font-size:10px; margin-top:5px; }
  .guide-venue-status { flex-direction:column; gap:2px; font-size:10px; margin-top:7px; }
}
.guide-source { padding:22px 0; color:#7e8aa1; font-size:10px; line-height:1.9; }
.guide-source b { font-weight:500; color:#b6c3df; }
.guide-opening-hours { margin:16px 0; padding:4px 16px; border:1px solid #ffffff15; border-radius:15px; background:#ffffff04; }
.guide-opening-hours>div { display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid #ffffff0c; font-size:13px; line-height:1.6; }
.guide-opening-hours>div:last-child { border-bottom:0; }
.guide-opening-hours dt { color:#98a3b9; flex-shrink:0; }
.guide-opening-hours dd { margin:0; text-align:right; color:#e0e5f1; }
.guide-source span { display:block; }
.guide-source a { color:#b9c8e7; }
.guide-discover-title h1 { font-size:29px; margin-top:6px; letter-spacing:-.04em; }
.guide-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; border-bottom:1px solid #ffffff14; }
.guide-directory-back { display:inline-flex; margin:16px 0 0; color:#aeb7ca; font-size:14px; padding:8px 0; }
.guide-artist-search-help { font-size:12px; color:#aab4c9; line-height:1.6; margin:10px 0; }
.guide-search-clear[hidden] { display:none; }
.guide-artist-search-examples { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:12px 0; font-size:12px; color:#929cb0; }
.guide-artist-search-examples button { border:1px solid #ffffff18; background:#ffffff08; color:#cad1e0; border-radius:20px; padding:7px 12px; }
.guide-results[aria-busy="true"] { opacity:.55; }
.guide-label-intro { color:#a6b4cd; font-size:12px; line-height:1.8; margin:18px 0 0; }
.guide-entity.labels img { width:80px; height:80px; object-fit:contain; background:#141b29; }
.guide-entity.labels .guide-label-summary { font-size:12px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:6px 0 10px; }
.guide-detail-hero.guide-label-hero>img { height:260px; max-height:260px; object-fit:contain; }
.guide-categories button { padding:0 0 14px; color:#8f9aaf; background:none; border:0; font-size:17px; }
.guide-categories button[aria-pressed=true] { color:white; border-bottom:2px solid #c0c9ff; }
.guide-search { display:flex; border:1px solid #ffffff16; background:#ffffff06; border-radius:13px; padding:5px; margin:18px 0; }
.guide-search input { min-width:0; flex:1; background:none; border:0; padding:10px; color:#f2f4fa; outline:0; font-size:13px; }
.guide-search button { background:#c2ceff; color:#171c2d; border:0; border-radius:9px; padding:7px 14px; font-size:12px; }
.guide-periods { display:flex; gap:5px; overflow-x:auto; margin-bottom:16px; scrollbar-width:none; }
.guide-periods button { flex-shrink:0; padding:9px 11px; border:1px solid transparent; background:none; color:#909cb4; border-radius:9px; font-size:12px; }
.guide-periods button[aria-pressed=true] { border-color:#bdcaff22; color:#d1d9fa; background:#bdcaff0e; }
.guide-selects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.guide-selects label { display:grid; gap:5px; color:#828fa5; font-size:10px; }
.guide-selects select,.guide-selects input { width:100%; min-width:0; height:37px; border:1px solid #ffffff14; border-radius:9px; background:#141a27; padding:7px; color:#c0cada; color-scheme:dark; font-size:12px; }
.guide-result-heading { display:flex; justify-content:space-between; margin:22px 0 3px; color:#93a0b6; font-size:11px; }
.guide-advanced { border:1px solid #ffffff14; border-radius:12px; background:#ffffff03; }
.guide-advanced summary { padding:12px 13px; min-height:44px; cursor:pointer; font-size:12px; color:#b9c5db; list-style:none; display:flex; align-items:center; gap:10px; }
.guide-advanced summary::-webkit-details-marker { display:none; }
.guide-advanced summary span { margin-left:auto; color:#8e9ab2; font-size:11px; }
.guide-advanced summary:after { content:'展开 ＋'; color:#b6c4e3; font-size:11px; }
.guide-advanced[open] summary:after { content:'收起 −'; }
.guide-advanced .guide-selects { padding:0 13px 13px; }
.guide-pagination { display:flex; justify-content:center; gap:30px; padding:25px 0; color:#b9c8e7; font-size:12px; }
.guide-detail { padding-top:0; }
.guide-detail-hero { position:relative; margin:0 -20px; padding-bottom:0; background:#111620; }
.guide-detail-hero>img { width:100%; max-height:590px; object-fit:contain; display:block; }
.guide-event-poster-wrap { position:relative; width:fit-content; max-width:100%; margin:0 auto; min-height:68px; }
.guide-event-poster-wrap>img { display:block; max-width:100%; max-height:590px; width:auto; height:auto; object-fit:contain; }
.guide-detail-text .guide-event-poster-wrap { width:100%; }
.guide-poster-labels { position:absolute; right:12px; bottom:12px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:calc(100% - 24px); z-index:2; }
.guide-poster-label { display:flex; align-items:center; gap:7px; max-width:100%; padding:5px 10px 5px 5px; border:1px solid #ffffff29; border-radius:24px; background:#090d16dd; color:#fff; text-decoration:none; box-shadow:0 3px 12px #0005; backdrop-filter:blur(10px); }
.guide-poster-label img,.guide-label-monogram { width:30px; height:30px; flex:none; border-radius:50%; object-fit:contain; background:#fff; }
.guide-label-monogram { display:grid; place-items:center; color:#292344; font-size:15px; font-weight:700; }
.guide-poster-label b { overflow-wrap:anywhere; font-size:12px; line-height:1.3; }
.guide-poster-label:focus-visible { outline:2px solid #c5caff; outline-offset:3px; }
.guide-detail-hero.portrait>img { height:440px; object-fit:cover; object-position:top; }
.guide-detail-hero>div { padding:27px 22px 24px; background:linear-gradient(145deg,#1a2130,#0b101a); }
.guide-detail-hero h1 { margin:9px 0; font-size:32px; line-height:1.15; letter-spacing:-.05em; overflow-wrap:anywhere; }
.guide-detail-hero p { font-size:12px; color:#a6b4cd; }
.guide-detail-text>div { padding-top:83px; background:radial-gradient(ellipse at 90% 0,#7a8dd51c,transparent 65%),linear-gradient(145deg,#1a2130,#0b101a); }
.guide-source-lineup ul { list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.guide-source-lineup li { padding:14px 12px; border:1px solid #ffffff13; border-radius:11px; background:#ffffff03; color:#e0e5f0; font-size:14px; overflow-wrap:anywhere; }
.guide-source-place h3 { margin-bottom:8px; font-size:20px; overflow-wrap:anywhere; }
.guide-source-place .guide-claim-label { display:block; margin-top:10px; }
.guide-facts>div { min-width:0; overflow-wrap:anywhere; }
.guide-back { position:absolute; top:16px; left:16px; width:37px; height:37px; display:grid; place-items:center; color:white!important; background:#080d17b0; border:1px solid #ffffff35; border-radius:50%; font-size:28px; }
.guide-share { position:absolute; top:16px; right:16px; width:37px; height:37px; display:grid; place-items:center; color:white; background:#080d17b0; border:1px solid #ffffff35; border-radius:50%; font-size:21px!important; }
.guide-facts { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:22px 0; }
.guide-facts>div { display:flex; flex-direction:column; gap:6px; }
.guide-facts b,.guide-facts a { font-size:14px; }
.guide-facts span { font-size:11px; line-height:1.7; color:#9eabc1; }
.guide-anchor-nav { display:flex; justify-content:space-between; position:sticky; top:0; z-index:4; padding:15px 0; border-top:1px solid #ffffff15; border-bottom:1px solid #ffffff15; background:#0d131feF; backdrop-filter:blur(16px); font-size:13px; }
.guide-prose { white-space:pre-line; color:#bec7d7; font-size:14px; line-height:1.9; margin-bottom:15px!important; overflow-wrap:anywhere; }
.guide-map { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:17px 13px; background:#b1c3ff08; border:1px solid #b1c3ff20; color:#b6c9f1!important; border-radius:12px; font-size:12px; margin-top:12px; }
.guide-map b { flex-shrink:0; font-size:10px; }
.guide-ticket { display:flex; gap:15px; align-items:center; margin-bottom:19px; }
.guide-ticket strong { font-size:25px; }
.guide-ticket span { color:#96a3bb; font-size:11px; }
.guide-bottom { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,580px); padding:12px 18px calc(12px + env(safe-area-inset-bottom)); display:flex; gap:12px; z-index:40; background:#101724ed; border-top:1px solid #ffffff15; backdrop-filter:blur(18px); }
.guide-bottom a,.guide-profile-action button { background:#c5ceff; color:#12192b; border:0; border-radius:13px; padding:13px 20px; font-size:13px; font-weight:650; text-align:center; }
.guide-bottom a { flex:1; }
.guide-bottom button { min-width:90px; background:none; color:#d4def7; border:0; font-size:13px; }
.guide-bottom .guide-community-button { flex:1; min-height:46px; background:#c5ceff; color:#12192b; border-radius:13px; padding:13px 20px; font-weight:650; cursor:pointer; }
.guide-community-dialog { box-sizing:border-box; width:min(390px,calc(100vw - 36px)); max-height:calc(100dvh - 48px); overflow:auto; padding:32px 24px 24px; border:1px solid #ffffff24; border-radius:24px; background:#141824; color:#f3f4fa; text-align:center; box-shadow:0 24px 100px #0009; }
.guide-community-dialog::backdrop { background:#03050bd9; backdrop-filter:blur(8px); }
.guide-community-close { position:absolute; top:8px; right:8px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:#c9cde2; font-size:26px; cursor:pointer; }
.guide-community-dialog>small { color:#aab5ed; font-size:10px; letter-spacing:2px; }
.guide-community-dialog h2 { margin:12px 0 8px; font-size:24px; }
.guide-community-event { color:#bdc4d7; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.guide-community-qr { margin:22px auto 18px; padding:16px; background:#fff; color:#333; border-radius:16px; width:min(100%,280px); box-sizing:border-box; }
.guide-community-qr img { display:block; width:100%; height:auto; border-radius:0; -webkit-touch-callout:default; }
.guide-community-qr img[hidden] { display:none; }
.guide-community-help,.guide-community-note { font-size:13px; line-height:1.7; }
.guide-community-note { padding:10px 12px; background:#c5ceff12; color:#c5ceff; border-radius:10px; white-space:pre-line; }
.guide-community-empty { padding:36px 10px; line-height:1.8; color:#c8cede; }
.guide-community-muted,.guide-community-empty small { font-size:11px; color:#919bb1; }
.guide-event-detail { padding-bottom:100px; }
.guide-profile-action { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:22px 0 0; }
.guide-profile-action a { color:#9faec9; font-size:11px; }
/* Artist listening guide: editorial hierarchy, no fabricated metrics. */
.guide-artist-detail {max-width:780px;padding-bottom:calc(100px + env(safe-area-inset-bottom));}
.guide-artist-detail .guide-detail-hero>div {padding:24px 22px 28px;background:linear-gradient(160deg,#191e2d,#0b0e15);}
.guide-artist-detail .guide-detail-hero p.guide-artist-tagline {margin:12px 0 0;font-size:15px;line-height:1.7;color:#aeb7ca;}
.guide-artist-detail .guide-heading small {display:none;}
.guide-artist-detail .guide-heading h2 {font-size:20px;margin-top:0;letter-spacing:0;}
.guide-artist-nav {gap:8px;padding:0;}
.guide-artist-nav a {display:flex;align-items:center;justify-content:center;min-height:52px;flex:1;font-size:13px;}
.guide-artist-nav a:hover,.guide-artist-nav a:focus {color:#d5dcff;background:#b9c5ff08;}
.guide-artist-dock {position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,560px);z-index:45;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#0d1019f5;border-top:1px solid #b9c5ff20;backdrop-filter:blur(20px);box-shadow:0 -12px 28px #0003;}
.guide-artist-dock button {width:100%;min-height:48px;border:1px solid #dbe0ff30;border-radius:15px;background:#c5ceff;color:#171d35;font-size:15px;font-weight:650;}
.guide-artist-dock button[aria-pressed="true"] {background:#242b41;color:#d1d9f7;}
.guide-artist-dock #guide-feedback:empty {display:none;}
.guide-artist-dock #guide-feedback:not(:empty) {margin:0 0 8px;font-size:12px;line-height:1.5;}
#app:has(.guide-artist-detail) :is(.mini-tabbar,.detail-fab) {display:none!important;}
#app:has(.guide-artist-detail) .mini-main {padding-bottom:0;}
.guide-music-copy {border:1px solid #b9c5ff25;border-radius:9px;background:#a6b9ec08;color:#c0cdee;font-size:12px;padding:9px 12px;margin-top:12px;min-height:40px;}
.guide-copy-result {display:block;color:#a8b2c4;font-size:11px;line-height:1.6;overflow-wrap:anywhere;user-select:text;margin-top:7px;}
.guide-copy-result[hidden] {display:none;}
.guide-artist-facts {margin:0;padding:4px 18px;border:1px solid rgba(190,200,240,.12);border-radius:16px;background:rgba(170,183,235,.035);}
/* A separate 16:9 editorial cover; artist directory portraits remain untouched. */
.guide-artist-detail .guide-artist-cover {background:#111727;overflow:hidden;}
.guide-artist-detail .guide-artist-cover>.guide-artist-cover-art {position:relative;display:flex;align-items:center;gap:7%;aspect-ratio:16/9;padding:11% 6% 7%;background:radial-gradient(ellipse at 25% 40%,#6478a966,transparent 65%),linear-gradient(120deg,#26324e,#171c31);isolation:isolate;}
.guide-cover-texture {position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;overflow:hidden;gap:2px;transform:rotate(-8deg) scale(1.1);opacity:.12;pointer-events:none;}
.guide-cover-texture span {font-size:clamp(30px,9vw,68px);font-weight:800;line-height:1.2;white-space:nowrap;letter-spacing:-.035em;color:#a5b8e8;}
.guide-artist-cover-art .guide-cover-portrait {display:block;width:36%;height:auto;aspect-ratio:1;flex-shrink:0;object-fit:cover;object-position:center 25%;border-radius:50%;border:2px solid #c6d5ff25;box-shadow:0 12px 28px #04081870;}
.guide-artist-cover .guide-cover-name {min-width:0;flex:1;position:relative;}
.guide-artist-cover .guide-cover-name small {font-size:8px;letter-spacing:.16em;color:#b7c6e9;}
.guide-artist-cover .guide-cover-name .guide-cover-logo {display:block;width:100%;height:auto;max-height:150px;aspect-ratio:2/1;object-fit:contain;margin-top:10px;border-radius:0;filter:drop-shadow(0 3px 7px #060b2250);}
.guide-artist-detail .guide-artist-cover h1.guide-cover-accessible-name {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.ops-auto-cover-preview>article {max-width:440px;margin:14px auto;border-radius:16px;overflow:hidden;pointer-events:none;}
.ops-auto-cover-preview .guide-back,.ops-artist-preview .guide-back {display:none;}
.ops-auto-cover-preview>small {display:block;line-height:1.7;}
.guide-artist-cover .guide-cover-name .guide-cover-logo.is-monochrome-white {filter:brightness(0) invert(1) drop-shadow(0 3px 7px #060b2250);}
.guide-artist-cover .guide-cover-name .guide-cover-logo {background:transparent;}
.guide-artist-detail .guide-artist-cover h1 {font-size:clamp(22px,5.2vw,38px);line-height:1.05;letter-spacing:-.025em;overflow-wrap:anywhere;margin:10px 0 0;}
.guide-artist-detail .guide-artist-cover .guide-cover-tagline {padding:16px 22px;margin:0;font-size:13px;line-height:1.7;color:#b7c0d5;background:#101521;}
.guide-artist-detail .guide-artist-cover.has-custom-cover>.guide-artist-cover-art {padding:0;display:block;background:#111521;}
.guide-artist-cover-art .guide-custom-cover {display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;}
.guide-artist-detail .guide-artist-cover.has-custom-cover>.guide-cover-name {padding:20px 22px 8px;background:#101521;}
.guide-artist-cover :is(.guide-back,.guide-share) {top:12px;width:34px;height:34px;z-index:3;}
.guide-artist-facts>div {display:grid;grid-template-columns:minmax(95px,30%) minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid rgba(190,200,240,.09);}
.guide-artist-facts>div:last-child {border-bottom:0;}
.guide-artist-facts dt {color:#a8afc2;font-size:13px;line-height:1.7;}
.guide-artist-facts dd {margin:0;white-space:pre-line;overflow-wrap:anywhere;font-size:15px;line-height:1.7;color:#eeeef5;}
.guide-artist-detail .guide-detail-hero.portrait {height:auto;max-height:none;min-height:0;}
.guide-artist-detail .guide-detail-hero.portrait>img {height:clamp(260px,45vw,440px);object-position:center 28%;}
.guide-artist-detail .guide-detail-hero h1 {font-size:clamp(32px,6vw,56px);line-height:1.03;letter-spacing:-1.6px;overflow-wrap:anywhere;}
.guide-artist-alias {margin:24px 0 5px;color:#aab8d6;font-size:12px;letter-spacing:1px;}
.guide-artist-tagline {font-size:20px;line-height:1.6;font-weight:500;color:#e4e9f4;margin:18px 0 0;overflow-wrap:anywhere;}
.guide-artist-detail .guide-profile-action {padding:20px 0 24px;}
.guide-artist-nav {justify-content:space-between;}
.guide-artist-detail .guide-section {padding:30px 0;}
.guide-listen-note {border-left:2px solid #b6b9f5;padding:4px 0 1px 18px;margin-top:22px;}
.guide-listen-note>small {display:block;font-size:11px;color:#b9c4e0;margin-bottom:8px;letter-spacing:1px;}
.guide-listen-note p:last-child {margin-bottom:0!important;}
.guide-listen-track {display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:23px 0;border-top:1px solid #ffffff12;}
.guide-track-number {font-size:13px;color:#7f8baa;font-variant-numeric:tabular-nums;padding-top:3px;}
.guide-track-meta {display:flex;align-items:center;gap:10px;font-size:10px;color:#a3afc5;margin-bottom:8px;}
.guide-track-meta b {background:#b8b8fb17;border:1px solid #b8b8fb35;border-radius:5px;padding:3px 7px;color:#d1cfff;font-size:10px;font-weight:500;}
.guide-listen-track h3 {font-size:19px;margin:0 0 7px;line-height:1.4;overflow-wrap:anywhere;}
.guide-listen-track small {color:#9ba8c0;}
.guide-listen-track p {color:#afbcd0;font-size:13px;line-height:1.85;white-space:pre-line;overflow-wrap:anywhere;margin:12px 0;}
.guide-listen-track a {display:inline-flex;align-items:center;min-height:44px;color:#d4d8fb;font-size:12px;}
.guide-artist-story,.guide-more-tracks {border-bottom:1px solid #ffffff14;padding:8px 0;}
.guide-artist-story summary,.guide-more-tracks summary {display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;cursor:pointer;min-height:52px;font-size:14px;color:#d5def0;}
.guide-artist-story summary::-webkit-details-marker,.guide-more-tracks summary::-webkit-details-marker {display:none;}
.guide-artist-story[open]>summary span,.guide-more-tracks[open]>summary span {transform:rotate(45deg);}
.guide-legacy-listen {margin-top:18px;}
.guide-music-platforms {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.guide-music-platforms a {border:1px solid #b4bce025;border-radius:12px;background:#a3b5e006;padding:16px;font-size:12px;overflow-wrap:anywhere;color:#c7d0e4;}
.guide-artist-detail :is(summary,a,button):focus-visible {outline:2px solid #c5ceff;outline-offset:4px;}
@media(max-width:480px){.guide-artist-detail .guide-detail-hero.portrait>img{height:320px;}.guide-artist-tagline{font-size:18px;}.guide-listen-track{gap:10px;grid-template-columns:25px minmax(0,1fr);}.guide-artist-detail .guide-section{padding:25px 0;}}
#guide-feedback { color:#eab3b3; font-size:12px; }
#app:has(.guide-event-detail) .mini-tabbar,#app:has(.guide-event-detail) .detail-fab { display:none!important; }
#app:has(.guide-detail) .mini-top { display:none; }
@media(max-width:380px){.guide-page{padding-left:15px;padding-right:15px}.guide-event-main{grid-template-columns:84px minmax(0,1fr);gap:11px}.guide-event-copy{min-height:112px}.guide-event h3{font-size:15px}.guide-event-distance{max-width:86px;padding:5px}.guide-slide{height:275px}.guide-periods{gap:0}.guide-periods button{padding:8px 9px}.guide-detail-hero{margin:0 -15px}}
@media(prefers-reduced-motion:reduce){.guide-slides{scroll-behavior:auto!important}.guide-venue-card{transition:none}}
.guide-slide.guide-slide-text { height:238px; background:radial-gradient(ellipse at 100% 0,#7891cf26,transparent 66%),linear-gradient(135deg,#1d2537,#0c101a); }
.guide-slide-text:after { background:linear-gradient(90deg,#12182799,#0c101a33); }
.guide-slide-graphic { position:absolute; width:220px; height:220px; right:-80px; top:-50px; border:1px solid #aabcff24; border-radius:50%; box-shadow:0 0 0 22px #aabcff05,0 0 0 44px #aabcff04,0 0 0 66px #aabcff03; }
.guide-slide-text>div { top:25px; bottom:23px; display:flex; flex-direction:column; justify-content:flex-end; }
.guide-slide-text h1 { font-size:27px; line-height:1.17; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.guide-slide-text small { color:#a9b8d8; font-size:10px; }
.guide-slide-text b { margin-top:13px; }
.guide-slide-source { margin-left:8px; font-size:10px; color:#9daecb; }
.guide-slides:has(.guide-slide-text):not(:has(.guide-slide img)) { border:1px solid #bbcaff1b; }
.guide-slides:has(.guide-slide img) .guide-slide-text { height:310px; }
.mine-v2-event .mine-event-artwork { display:block; flex:0 0 54px; width:54px; height:72px; overflow:hidden; border-radius:10px; }
.mine-event-artwork .guide-date-art small { font-size:9px; }
.mine-event-artwork .guide-date-art strong { font-size:24px; margin:3px 0; }
.mine-event-artwork .guide-date-art i { font-size:8px; }
.mine-event-artwork .guide-date-art>span { font-size:6px; margin-top:3px; }
@media(max-width:380px){.guide-slide.guide-slide-text{height:228px}.guide-slide-text h1{font-size:23px}.guide-slide-text>div{left:19px;right:19px}.guide-event-venue .guide-claim-label{display:block;margin-left:0}.guide-source-lineup li{font-size:13px;padding:12px 10px}}
@media(max-width:380px){.guide-slides:has(.guide-slide img) .guide-slide-text{height:275px}}
.guide-venue-card { min-height:0;aspect-ratio:1; }.guide-venue-card>img { object-fit:cover; }
@media(max-width:760px){.guide-venue-card { min-height:0;aspect-ratio:1; }.guide-venue-card .guide-venue-copy { padding:8px; }.guide-venue-card .guide-venue-copy>p { display:none; }.guide-venue-card h3 { font-size:12px; }.guide-venue-status { gap:3px; }.guide-venue-status>span:first-child { display:none; }.guide-venue-status>span { font-size:10px; }.guide-venue-distance { font-size:10px;top:6px;right:6px; }}
/* Artist story: restrained, readable chronology, including long mobile entries. */
.guide-career-timeline{list-style:none;margin:26px 0 0;padding:0 0 0 18px;border-left:1px solid #a7b6e344}
.guide-career-timeline li{position:relative;margin:0;padding:0 0 28px 14px;min-width:0}
.guide-career-timeline li:last-child{padding-bottom:2px}
.guide-career-timeline li:not(.is-note)::before{content:"";position:absolute;left:-23px;top:7px;width:8px;height:8px;border-radius:50%;background:#c7ccff;box-shadow:0 0 0 5px #9faff214}
.guide-career-year{display:block;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:#c7ccff;letter-spacing:.04em}
.guide-career-timeline p{margin:9px 0 0;line-height:1.8;color:var(--muted,#b8bfd0);overflow-wrap:anywhere}
.guide-career-timeline .is-note p{margin-top:0}
.guide-artist-card {scroll-margin-top:85px;}
.guide-artist-index {position:fixed;right:max(4px,calc((100vw - 560px)/2 - 20px));top:50%;transform:translateY(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;width:24px;max-height:calc(100dvh - 180px);overflow-y:auto;padding:5px 0;border-radius:16px;background:#141723e8;backdrop-filter:blur(12px);touch-action:none;scrollbar-width:none;}
.guide-artist-index[hidden],.guide-artist-letter[hidden] {display:none;}
.guide-artist-index button {display:grid;place-items:center;flex:1 0 0;min-height:12px;width:24px;max-height:20px;padding:1px 0;border:0;background:none;color:#9ca7bb;font-size:10px;font-weight:600;line-height:16px;cursor:pointer;}
.guide-artist-index button:disabled {opacity:.25;cursor:default;}
.guide-artist-index button.active {color:#10121e;background:#c5caff;border-radius:7px;}
.guide-artist-index button:focus-visible {outline:2px solid #fff;outline-offset:-2px;border-radius:7px;}
.guide-artist-letter {position:fixed;right:max(40px,calc((100vw - 560px)/2 + 20px));top:50%;transform:translateY(-50%);z-index:9;padding:18px;min-width:60px;text-align:center;border:1px solid #b6bdff33;border-radius:18px;background:#24283aee;color:#d5d9ff;font-size:32px;pointer-events:none;}
.guide-artist-index {gap:0;justify-content:flex-start;height:min(540px,calc(100dvh - 180px));overflow:hidden;box-sizing:border-box;}
.guide-artist-index button {flex:1 1 0;min-height:0;line-height:1;}
@media(max-width:600px){.guide-artist-index{right:1px;width:18px;}.guide-artist-index button{width:18px;font-size:9px;}}
.guide-artist-card {position:relative;}
.guide-djmag-badge {position:absolute;top:2px;right:2px;display:grid;justify-items:center;gap:1px;padding:3px 4px;border:1px solid #edd395a6;border-radius:6px 6px 9px 9px;background:linear-gradient(145deg,#352a13f5,#171209f5);box-shadow:0 2px 6px #0004;color:#f8dda0;pointer-events:none;line-height:1;}
.guide-djmag-badge svg {width:11px;height:11px;}
.guide-djmag-badge b {font-size:8px;white-space:nowrap;letter-spacing:.02em;}
.guide-djmag-badge small {font-size:6.5px;color:#e1c994;font-variant-numeric:tabular-nums;}
@media(max-width:520px){.guide-djmag-badge{top:1px;right:1px;padding:3px;}.guide-djmag-badge svg{width:9px;height:9px;}.guide-djmag-badge b{font-size:7px;}.guide-djmag-badge small{font-size:6px;}}
.guide-error-actions {display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:20px;}
.guide-error-actions .button {min-height:44px;display:inline-flex;align-items:center;}