.content-share-actions { display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin:10px 0 4px; }
.content-share-actions button { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; min-width:34px; height:34px; min-height:34px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted,#718096); font-size:0; line-height:0; cursor:pointer; transition:background .15s,color .15s; }
.content-share-actions button::before { content:""; display:block; width:18px; height:18px; background:currentColor; -webkit-mask:var(--action-icon) center/contain no-repeat; mask:var(--action-icon) center/contain no-repeat; }
.content-share-button { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V3m-4 4 4-4 4 4M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E"); }
.content-copy-button { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.content-share-actions button:hover { color:var(--blue,#3469c6); background:rgba(60,100,150,.07); }
.content-share-actions button:focus-visible { outline:2px solid var(--blue,#3469c6); outline-offset:2px; }
.content-share-actions button:disabled { opacity:.5; cursor:wait; }
.content-share-actions button[data-copy-state="copied"] { color:#368064; --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E"); }
.track-details-body { display:flow-root; }
.track-details-body > .content-share-actions { float:right; margin:0 0 6px 12px; }
.track-play-button { display:grid; place-items:center; flex:0 0 32px; width:32px; min-width:0; min-height:44px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--blue,#3469c6); }
.track-play-button:focus-visible { outline:2px solid var(--blue,#3469c6); outline-offset:3px; }
.track-copy > a.track-title { color:inherit; text-decoration:none; }
.track-copy > a.track-title:hover { color:var(--blue,#3469c6); text-decoration:underline; text-underline-offset:3px; }
.track-copy > a.track-title:focus-visible { outline:2px solid var(--blue,#3469c6); outline-offset:3px; border-radius:3px; }
@media(max-width:540px) { .track-play-button { flex-basis:29px; width:29px; } }
.content-permalink { color: inherit; text-decoration: none; }
.content-permalink:hover { text-decoration: underline; text-underline-offset: .15em; }
.content-permalink:focus-visible { outline: 3px solid #638c73; outline-offset: 3px; border-radius: 4px; }
.content-share-dialog { width: min(440px, calc(100vw - 56px)); border: 1px solid #cfcbc2; border-radius: 18px; padding: 24px; background: #fffdf8; color: #28382f; font-family: system-ui, sans-serif; }
.content-share-dialog::backdrop { background: #16251d66; }
.content-share-dialog input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px; font: inherit; }
.content-share-dialog button { display: block; min-height: 40px; margin-top: 16px; padding: 8px 18px; font: inherit; cursor: pointer; }
.shared-work { max-width: 880px; margin: 40px auto 80px; padding: 0 24px; color: #263a30; }
.shared-work h1 { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.2; overflow-wrap: anywhere; }
.shared-work .work-intro { line-height: 1.7; color: #54675c; }
.shared-work a { color: #31664b; text-underline-offset: 4px; }
.shared-work video { display: block; width: 100%; max-height: 70vh; background: #101711; border-radius: 16px; }
.shared-work audio { display: block; width: 100%; margin: 24px 0; }
.shared-work .work-lyrics { white-space: pre-wrap; line-height: 1.9; font: inherit; }
.shared-work .work-notice { font-size: .85rem; line-height: 1.6; color: #6f6454; }
.shared-work .work-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid #dce0d9; }
.shared-work .work-qualities { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 16px 0; }
.shared-work .work-qualities select { min-height: 40px; padding: 6px; font: inherit; }
body.shared-work-page { margin: 0; background: #fffdf8; font-family: system-ui, sans-serif; }
.shared-work-page .work-brand { display: block; max-width: 880px; margin: 24px auto; padding: 0 24px; font-weight: 700; color: #2f6548; text-decoration: none; }
body[data-theme="dark"] .content-share-actions button:hover { background:rgba(180,200,220,.1); }