:root{
    --song-bg:#f7f3ea;
    --song-paper:#fffdf8;
    --song-paper-deep:#f1eadc;
    --song-ink:#201b15;
    --song-muted:#746b5f;
    --song-faint:#a99b86;
    --song-line:rgba(61,47,31,.15);
    --song-gold:#9a6d2f;
    --song-red:#7e1616;
    --song-shadow:0 18px 44px rgba(48,35,20,.10);
}

*{box-sizing:border-box}
html{color-scheme:light}
body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 0,rgba(154,109,47,.10),transparent 30%),
        linear-gradient(180deg,#fbf7ee,var(--song-bg));
    color:var(--song-ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.13;
    background-image:radial-gradient(circle,rgba(79,61,37,.34) 0 1px,transparent 1.35px);
    background-size:74px 74px;
    mask-image:linear-gradient(to bottom,#000,transparent 72%);
}

.songObsPage{
    position:relative;
    z-index:1;
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
    padding:0 0 58px;
}
.songObsHero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,320px);
    gap:28px;
    align-items:center;
    margin:8px 0 20px;
    padding:30px 34px;
    border:1px solid var(--song-line);
    border-radius:22px;
    background:linear-gradient(145deg,rgba(255,253,248,.98),rgba(244,237,222,.92));
    box-shadow:var(--song-shadow);
}
.songObsHero h1{
    margin:0;
    max-width:720px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(36px,6vw,70px);
    font-weight:400;
    letter-spacing:-.045em;
    line-height:.95;
}
.songObsKicker{
    margin:0 0 10px;
    color:var(--song-gold);
    font-size:11px;
    font-weight:800;
    letter-spacing:.24em;
    text-transform:uppercase;
}
.songObsIntro{
    max-width:670px;
    margin:18px 0 0;
    color:var(--song-muted);
    line-height:1.75;
}
.songObsHeroCompact{
    grid-template-columns:1fr;
}
.songObsHeroCompact h1{
    max-width:760px;
}
.songObsHeroSheet{
    min-height:220px;
    border:1px solid rgba(154,109,47,.22);
    border-radius:17px;
    background:
        linear-gradient(90deg,transparent 42px,rgba(126,22,22,.16) 43px,transparent 44px),
        repeating-linear-gradient(0deg,rgba(32,27,21,.08),rgba(32,27,21,.08) 1px,transparent 1px,transparent 24px),
        linear-gradient(145deg,#fffdf8,#f2eadb);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:22px;
    color:var(--song-muted);
}
.songObsHeroSheet span{
    color:var(--song-gold);
    font-size:11px;
    font-weight:850;
    letter-spacing:.2em;
    text-transform:uppercase;
}
.songObsHeroSheet strong{
    margin-top:8px;
    font-family:Georgia,"Times New Roman",serif;
    color:var(--song-ink);
    font-size:26px;
    font-weight:400;
}
.songObsArtwork{
    min-height:270px;
    border:1px solid rgba(154,109,47,.18);
    border-radius:18px;
    background:
        linear-gradient(135deg,rgba(126,22,22,.08),transparent 38%),
        repeating-linear-gradient(0deg,rgba(32,27,21,.05),rgba(32,27,21,.05) 1px,transparent 1px,transparent 13px),
        var(--song-paper);
    display:grid;
    place-items:center;
    overflow:hidden;
}
.songObsArtwork img{width:100%;height:100%;object-fit:cover}
.songObsArtworkMark{
    width:72%;
    aspect-ratio:1;
    border:1px solid rgba(154,109,47,.34);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--song-red);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(38px,7vw,72px);
    letter-spacing:-.08em;
    background:radial-gradient(circle,rgba(154,109,47,.14),transparent 64%);
}

.songObsPanel,
.songObsPlayer,
.songObsTimeline,
.songObsRecordingList,
.songObsAside,
.songObsCompare{
    border:1px solid var(--song-line);
    border-radius:20px;
    background:rgba(255,253,248,.96);
    box-shadow:var(--song-shadow);
}
.songObsPanel{padding:22px}
.songObsSectionHead{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
}
.songObsSectionHead h2,
.songObsPanel h2,
.songObsPlayer h2,
.songObsAside h2,
.songObsCompare h2{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(22px,3.4vw,34px);
    font-weight:400;
}
.songObsSmallLink{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:8px 13px;
    border:1px solid rgba(154,109,47,.28);
    border-radius:999px;
    color:var(--song-gold);
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.songObsSmallLink:hover,.songObsSmallLink:focus-visible{background:#fff7e8;outline:none}
.songObsGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.songObsCard{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    gap:16px;
    min-height:132px;
    padding:14px;
    border:1px solid var(--song-line);
    border-radius:16px;
    color:inherit;
    background:linear-gradient(145deg,#fff,#f7f0e2);
}
.songObsCard:hover{transform:translateY(-2px)}
.songObsMiniArt{
    border-radius:12px;
    background:
        radial-gradient(circle at 50% 44%,rgba(126,22,22,.16),transparent 38%),
        var(--song-paper-deep);
    display:grid;
    place-items:center;
    color:var(--song-red);
    font-family:Georgia,"Times New Roman",serif;
    font-size:28px;
}
.songObsCard h3{margin:0 0 6px;font-family:Georgia,"Times New Roman",serif;font-size:24px;font-weight:400}
.songObsMeta{margin:0;color:var(--song-muted);font-size:13px;line-height:1.5}
.songObsCardTakeList{
    display:grid;
    gap:7px;
    margin:12px 0;
    padding:10px 0 0;
    border-top:1px solid var(--song-line);
    list-style:none;
}
.songObsCardTakeList li{
    display:grid;
    gap:2px;
    padding-left:12px;
    border-left:2px solid rgba(154,109,47,.24);
}
.songObsCardTakeList span{font-size:13px;font-weight:850}
.songObsCardTakeList small{color:var(--song-muted);font-size:12px;line-height:1.4}
.songObsLayout{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);
    gap:18px;
    align-items:start;
}
.songObsMainStack{display:grid;gap:18px}
.songObsAside{padding:20px;display:grid;gap:18px}
.songObsDefinition{margin:0}
.songObsDefinition dt{
    margin:0 0 4px;
    color:var(--song-gold);
    font-size:11px;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.songObsDefinition dd{margin:0 0 14px;color:var(--song-muted);line-height:1.55}
.songObsPlayer{padding:20px}
.songObsPlayerTop{
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
.songObsActiveStage,
.songObsStage{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:3px 9px;
    border:1px solid rgba(154,109,47,.26);
    border-radius:999px;
    color:#62451f;
    background:#fff8e9;
    font-size:11px;
    font-weight:760;
    letter-spacing:.05em;
    text-transform:lowercase;
}
.songObsActiveTitle{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:400}
.songObsActiveMeta{margin:5px 0 0;color:var(--song-muted);font-size:13px}
.songObsControls{
    display:grid;
    grid-template-columns:auto auto auto minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
}
.songObsButton{
    min-width:42px;
    min-height:42px;
    border:1px solid rgba(154,109,47,.28);
    border-radius:999px;
    background:#15110d;
    color:#fffdf8;
    font:inherit;
    font-weight:850;
    cursor:pointer;
}
.songObsButton.secondary{background:#fff;color:var(--song-ink)}
.songObsButton.wide{padding:0 16px}
.songObsButton:disabled{opacity:.45;cursor:not-allowed}
.songObsButton:hover:not(:disabled),.songObsButton:focus-visible{transform:translateY(-1px);outline:2px solid rgba(154,109,47,.35);outline-offset:2px}
.songObsSeek{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;color:var(--song-muted);font-size:12px}
.songObsSeek input,.songObsVolume input{width:100%;accent-color:var(--song-gold)}
.songObsVolume{display:flex;align-items:center;gap:8px;color:var(--song-muted);font-size:12px}
.songObsStatus{min-height:22px;margin:12px 0 0;color:var(--song-muted);font-size:13px}
.songObsTimeline,.songObsRecordingList,.songObsCompare{padding:20px}
.songObsTimelineList{display:grid;gap:12px;margin-top:16px}
.songObsTimelineItem{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:14px;
    position:relative;
}
.songObsTimelineItem:before{
    content:"";
    position:absolute;
    left:130px;
    top:10px;
    width:8px;
    height:8px;
    border:2px solid var(--song-gold);
    border-radius:50%;
    background:var(--song-paper);
}
.songObsTimelineDate{color:var(--song-muted);font-size:13px}
.songObsTimelineCard{padding:12px 14px 12px 24px;border-left:1px solid rgba(154,109,47,.24)}
.songObsTimelineCard h3{margin:0 0 6px;font-size:17px}
.songObsRecordings{display:grid;gap:10px;margin-top:16px}
.songObsRecording{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    width:100%;
    min-height:74px;
    padding:12px;
    border:1px solid var(--song-line);
    border-radius:14px;
    background:#fff;
    text-align:left;
    color:inherit;
}
button.songObsRecording{cursor:pointer}
.songObsRecording.is-active{border-color:rgba(126,22,22,.42);box-shadow:0 0 0 3px rgba(126,22,22,.08)}
.songObsRecordingTitle{display:block;font-weight:850}
.songObsRecordingMeta{display:block;margin-top:4px;color:var(--song-muted);font-size:12px}
.songObsUnavailable{color:var(--song-muted);font-size:12px;text-align:right}
.songObsNotes{margin:8px 0 0;color:var(--song-muted);font-size:13px;line-height:1.55}
.songObsCompareGrid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-top:14px}
.songObsField label{display:block;margin-bottom:5px;color:var(--song-muted);font-size:12px;font-weight:800}
.songObsField select{width:100%;min-height:42px;border:1px solid var(--song-line);border-radius:12px;background:#fff;padding:8px 10px;color:var(--song-ink)}
.songObsNotice{
    padding:14px 16px;
    border:1px dashed rgba(154,109,47,.36);
    border-radius:14px;
    background:#fffaf0;
    color:var(--song-muted);
    line-height:1.55;
}
.songObsError{border-color:rgba(126,22,22,.38);background:#fff2ef;color:#6a1914}
.songObsHidden{display:none!important}
.songObsManageGrid{
    display:grid;
    grid-template-columns:minmax(280px,.85fr) minmax(340px,1.15fr);
    gap:18px;
    align-items:start;
}
.songObsEntryList{
    display:grid;
    gap:16px;
    margin-bottom:18px;
}
.songObsEntrySong{
    display:grid;
    gap:12px;
    padding:14px;
    border:1px solid var(--song-line);
    border-radius:16px;
    background:linear-gradient(145deg,#fff,#f7f0e2);
}
.songObsEntrySongHead{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:start;
}
.songObsEntrySong h3{
    margin:0 0 4px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:26px;
    font-weight:400;
}
.songObsEntryRows{
    display:grid;
    gap:7px;
}
.songObsEntryRow{
    display:grid;
    grid-template-columns:34px minmax(150px,1.3fr) minmax(120px,.8fr) minmax(120px,.8fr) 70px auto;
    gap:10px;
    align-items:center;
    min-height:42px;
    padding:8px 10px;
    border:1px solid rgba(61,47,31,.10);
    border-radius:11px;
    background:rgba(255,253,248,.76);
    color:var(--song-muted);
    font-size:12px;
}
.songObsEntryRow strong{
    color:var(--song-ink);
    font-size:13px;
}
.songObsEntryRow a{
    color:var(--song-gold);
    font-weight:850;
    text-decoration:none;
}
.songObsEntryRow a:hover,.songObsEntryRow a:focus-visible{text-decoration:underline;outline:none}
.songObsEditPanel{
    margin-bottom:18px;
}
.songObsForm{
    display:grid;
    gap:13px;
}
.songObsForm label{
    display:grid;
    gap:6px;
    color:var(--song-muted);
    font-size:12px;
    font-weight:850;
    letter-spacing:.04em;
}
.songObsForm input,
.songObsForm select,
.songObsForm textarea{
    width:100%;
    min-height:42px;
    border:1px solid var(--song-line);
    border-radius:12px;
    background:#fff;
    color:var(--song-ink);
    padding:10px 12px;
    font:inherit;
    font-size:14px;
    font-weight:500;
    letter-spacing:0;
}
.songObsForm textarea{
    min-height:86px;
    resize:vertical;
}
.songObsForm input:focus,
.songObsForm select:focus,
.songObsForm textarea:focus{
    outline:2px solid rgba(154,109,47,.28);
    outline-offset:2px;
}
.songObsFormPair{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.songObsCheck{
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center;
    gap:9px!important;
    padding:10px 12px;
    border:1px solid var(--song-line);
    border-radius:12px;
    background:#fffaf0;
}
.songObsCheck input{
    width:auto;
    min-height:0;
    accent-color:var(--song-gold);
}
.songObsParserHost:empty{display:none}
.songObsParserPreview{
    display:grid;
    gap:10px;
    padding:13px;
    border:1px dashed rgba(154,109,47,.38);
    border-radius:14px;
    background:#fffaf0;
    color:var(--song-muted);
}
.songObsParserPreview strong{
    color:var(--song-ink);
    font-family:Georgia,"Times New Roman",serif;
    font-size:18px;
    font-weight:400;
}
.songObsParserPreview dl{
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    gap:6px 12px;
    margin:0;
}
.songObsParserPreview dt{
    color:var(--song-gold);
    font-size:11px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.songObsParserPreview dd{margin:0;color:var(--song-ink);font-size:13px}
.songObsParserPreview p{margin:0;font-size:12px;line-height:1.5}
.songObsParserDates{
    display:grid;
    gap:6px;
    margin:0;
    padding:0;
    list-style:none;
}
.songObsParserDates li{
    display:grid;
    gap:2px;
    padding:7px 9px;
    border:1px solid rgba(61,47,31,.10);
    border-radius:10px;
    background:rgba(255,253,248,.72);
}
.songObsParserDates span{color:var(--song-ink);font-size:12px;font-weight:850}
.songObsParserDates small{color:var(--song-muted);font-size:12px;line-height:1.4}
.songObsParserChoices{color:#6a1914!important}

@media(max-width:880px){
    .songObsHero,.songObsLayout,.songObsGrid,.songObsManageGrid{grid-template-columns:1fr}
    .songObsHero{padding:20px}
    .songObsArtwork,.songObsHeroSheet{min-height:200px}
    .songObsPlayerTop,.songObsSectionHead{display:block}
    .songObsControls{grid-template-columns:auto auto minmax(0,1fr)}
    .songObsButton.wide{grid-column:1/-1}
    .songObsVolume{grid-column:1/-1}
    .songObsTimelineItem{grid-template-columns:1fr}
    .songObsTimelineItem:before{left:0;top:30px}
    .songObsTimelineCard{padding-left:18px;margin-left:9px}
    .songObsCompareGrid{grid-template-columns:1fr}
    .songObsEntrySongHead{display:grid}
    .songObsEntryRow{grid-template-columns:1fr}
    .songObsParserPreview dl{grid-template-columns:1fr}
}

@media(max-width:560px){
    .songObsPage{width:calc(100% - 20px)}
    .songObsHero h1{font-size:40px}
    .songObsCard{grid-template-columns:72px minmax(0,1fr)}
    .songObsMiniArt{min-height:72px}
    .songObsRecording{grid-template-columns:auto minmax(0,1fr)}
    .songObsUnavailable{grid-column:2;text-align:left}
    .songObsSeek{grid-template-columns:1fr;gap:6px}
    .songObsFormPair{grid-template-columns:1fr}
}