.player-tools {
 --clip-ink: #203b35;
 --clip-muted: #53635d;
 --clip-paper: #fffef9;
 --clip-line: #d4dbd1;
 color: var(--clip-ink);
 font: 14px/1.65 "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.player-tools *, .player-tools *::before, .player-tools *::after { box-sizing: border-box; }
.player-tools [hidden] { display: none !important; }
.player-tools button, .player-tools textarea { font: inherit; }
.player-tools button { cursor: pointer; }
.player-tools a { color: inherit; }
.player-tools :focus-visible { outline: 2px solid #427269; outline-offset: 3px; }
.player-tools-touch-menu { display: none; }
.player-tools-copy-field, .player-tools-announcement {
 position: fixed;
 width: 1px;
 height: 1px;
 padding: 0;
 border: 0;
 overflow: hidden;
 clip-path: inset(50%);
 white-space: nowrap;
}
.player-tools-copy-field { inset: 0 auto auto 0; }
.player-tools-menu {
 position: fixed;
 z-index: 81;
 display: grid;
 width: max-content;
 max-width: calc(100vw - 16px);
 max-height: calc(100dvh - 16px);
 overflow-y: auto;
 padding: 6px;
 border: 1px solid var(--clip-line);
 border-radius: 8px;
 background: var(--clip-paper);
 box-shadow: 0 8px 32px #1528202e;
}
.player-tools-menu :is(button, a) {
 display: block;
 min-height: 40px;
 padding: 8px 12px;
 border: 0;
 border-radius: 4px;
 background: transparent;
 color: inherit;
 text-align: left;
 text-decoration: none;
 white-space: normal;
}
.player-tools-menu :is(button, a):is(:hover, :focus-visible) { background: #edf0e9; }
.player-clips {
 position: fixed;
 z-index: 70;
 inset: auto 0 0;
 display: flex;
 flex-direction: column;
 height: var(--player-clips-block);
 padding: 14px 16px max(14px, env(safe-area-inset-bottom));
 border: 1px solid var(--clip-line);
 border-radius: 12px 12px 0 0;
 background: var(--clip-paper);
 color: var(--clip-ink);
 box-shadow: 0 -5px 24px #142e241c;
}
.player-clips-visible {
 --player-clips-block: min(42dvh, 360px);
 scroll-padding-block-end: var(--player-clips-block);
}
.player-clips-visible body { padding-block-end: var(--player-clips-block); }
.player-clips-entries { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.player-tools-copy-error { max-width: 245px; margin: 5px 10px 8px; color: #842c28; font-size: 12px; }
.player-clips-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}
.player-clips-head h2 { margin: 0; font-size: 20px; }
.player-clips-status { margin: 8px 0; color: var(--clip-muted); }
.player-clips-status:empty { margin: 0; }
.player-clips-empty { color: var(--clip-muted); }
.player-clip { padding-block: 14px; border-top: 1px solid var(--clip-line); }
.player-clip:first-child { margin-top: 12px; }
.player-clip blockquote {
 margin: 0;
 padding: 9px 12px;
 border-inline-start: 2px solid #9aa99d;
 background: #f0f2eb;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
}
.player-clip-source { margin: 9px 0 14px; overflow-wrap: anywhere; }
.player-clip-source a { text-decoration: underline; text-underline-offset: .2em; }
.player-clip-source small { display: block; color: var(--clip-muted); }
.player-clip label { display: block; font-weight: 600; }
.player-clip textarea {
 display: block;
 width: 100%;
 min-height: 65px;
 margin-top: 4px;
 padding: 8px;
 border: 1px solid var(--clip-line);
 border-radius: 4px;
 background: #fff;
 color: var(--clip-ink);
 resize: vertical;
}
.player-clip-actions { display: flex; gap: 8px; margin-top: 8px; }
.player-clips button {
 min-height: 40px;
 padding: 6px 12px;
 border: 1px solid var(--clip-line);
 border-radius: 4px;
 background: transparent;
 color: inherit;
}
.player-clip-actions button:first-child { background: var(--clip-ink); color: var(--clip-paper); }
@media (min-width: 1100px) and (pointer: fine) {
 .player-clips-visible { --player-clips-inline: clamp(310px, 27vw, 400px); --player-clips-block: 0px; }
 .player-clips-visible body { margin-inline-end: var(--player-clips-inline); }
 .player-clips {
  inset: 0 0 0 auto;
  width: var(--player-clips-inline);
  height: auto;
  padding: 20px 18px;
  border-radius: 0;
  box-shadow: -5px 0 20px #142e2412;
 }
 .player-clips-visible .header-main { padding-inline: 22px; gap: 14px; }
 .player-clips-visible .utility { gap: 12px; }
 .player-clips-visible #main-navigation { gap: 13px; font-size: 11px; }
}
@media (pointer: coarse) {
 .player-tools-touch-menu:not([hidden]) {
  position: fixed;
  z-index: 75;
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(var(--player-clips-block, 0px) + max(12px, env(safe-area-inset-bottom)));
  display: block;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--clip-line);
  border-radius: 6px;
  background: var(--clip-paper);
  color: var(--clip-ink);
  box-shadow: 0 2px 10px #142e2420;
 }
 .player-tools-menu :is(button, a), .player-clips button { min-height: 44px; }
 .player-clip textarea { font-size: 16px; }
}
@media print {
 .player-tools { display: none; }
 .player-clips-visible body { margin-inline-end: 0; padding-block-end: 0; }
}