#codec-compact { --cc-blue:#0875d1; --cc-ink:#203951; --cc-muted:#5c7288; --cc-border:#dfe8f0; --cc-row-padding:8px; color-scheme:light; font:14px/1.45 Inter,"Noto Sans JP","Yu Gothic UI",sans-serif; background:#fff; color:var(--cc-ink); padding:0 18px 12px; }
#codec-compact * { box-sizing:border-box; }
#codec-compact h1,#codec-compact h2 { margin:0; font-weight:500; }
#codec-compact h1 { font-size:18px; letter-spacing:-.45px; }
#codec-compact h2 { font-size:14px; }
#codec-compact .cc-header { display:flex; align-items:center; gap:8px; min-height:42px; padding:4px 0; border-bottom:1px solid var(--cc-border); }
#codec-compact .cc-header h1 { white-space:nowrap; }
#codec-compact .cc-header-links { display:flex; align-items:center; gap:6px; margin-left:auto; }
#codec-compact .cc-header-links a { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:4px 9px; border:1px solid var(--cc-border); border-radius:6px; color:var(--cc-ink); background:#fff; font-size:12px; text-decoration:none; white-space:nowrap; }
#codec-compact .cc-header-links a:hover { color:var(--cc-blue); background:#eaf5fd; border-color:#b5d5ed; }
#codec-compact .cc-header-links .cc-github-link { width:32px; padding:5px; }
#codec-compact button,#codec-compact select,#codec-compact input { font:inherit; }
#codec-compact button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:30px; padding:4px 9px; border:1px solid var(--cc-border); border-radius:6px; background:#fff; color:var(--cc-ink); white-space:nowrap; }
#codec-compact button:hover:not(:disabled) { background:#eaf5fd; border-color:#b5d5ed; }
#codec-compact button:disabled { opacity:.5; }
#codec-compact .cc-primary { background:var(--cc-blue); color:#fff; border-color:var(--cc-blue); }
#codec-compact .cc-primary:hover:not(:disabled) { background:#0563b5; border-color:#0563b5; }
#codec-compact .cc-icon { width:34px; height:34px; padding:1px; border-color:transparent; background:transparent; color:var(--cc-muted); flex-shrink:0; font-size:30px; line-height:1; }
#codec-compact .cc-icon svg { display:block; width:30px; height:30px; }
#codec-compact .cc-player { display:grid; grid-template-columns:48px minmax(0,1fr) 44px auto; grid-template-rows:auto auto auto; align-items:center; column-gap:11px; row-gap:3px; padding:12px; margin:12px 0; border:1px solid #d6e8f6; border-radius:8px; background:#f7fbff; }
#codec-compact .cc-player.cc-drag { background:#e3f3ff; border-color:var(--cc-blue); }
#codec-compact .cc-play { grid-column:1; grid-row:1/3; width:48px; min-height:48px; align-self:stretch; border-radius:9px; }
#codec-compact .cc-filename { grid-column:2; grid-row:1; min-width:0; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#codec-compact .cc-change { grid-column:4; grid-row:1/3; min-height:48px; align-self:stretch; font-size:12px; }
#codec-compact .cc-loop { grid-column:3; grid-row:1/3; min-height:48px; align-self:stretch; }
#codec-compact .cc-loop[aria-pressed="true"] { color:#fff; background:var(--cc-blue); border-color:var(--cc-blue); }
#codec-compact .cc-loop[aria-pressed="true"]:hover { background:#0563b5; border-color:#0563b5; }
#codec-compact .cc-source-info { grid-column:2; grid-row:2; display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; color:var(--cc-muted); font-size:12px; }
#codec-compact .cc-source-info span { white-space:nowrap; }
#codec-compact .cc-source-info span+span::before { content:'·'; margin-right:8px; color:#94a6b7; }
#codec-compact .cc-seek-row { grid-column:1/-1; grid-row:3; display:flex; align-items:center; gap:9px; margin-top:5px; font-size:11px; font-variant-numeric:tabular-nums; color:var(--cc-muted); }
#codec-compact .cc-seek { flex:1; min-width:0; height:20px; margin:0; accent-color:var(--cc-blue); }
#codec-compact .cc-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
#codec-compact .cc-table-head,#codec-compact .cc-row { display:grid; grid-template-columns:minmax(190px,1fr) 128px 104px 135px var(--cc-actions-width,106px); column-gap:12px; align-items:center; }
#codec-compact .cc-table-head { padding:6px 10px; color:var(--cc-muted); font-size:11px; }
#codec-compact .cc-table-head>span:not(:first-child) { text-align:right; }
#codec-compact .cc-patterns { border:1px solid var(--cc-border); border-radius:7px; overflow:hidden; }
#codec-compact .cc-row { padding:var(--cc-row-padding) 10px; min-height:54px; border-top:1px solid var(--cc-border); }
#codec-compact .cc-row:first-child { border-top:0; }
#codec-compact .cc-row.cc-selected { background:#edf7ff; box-shadow:inset 3px 0 var(--cc-blue); }
#codec-compact .cc-identity { min-width:0; display:flex; align-items:center; gap:9px; }
#codec-compact .cc-identity input { width:17px; height:17px; margin:0; accent-color:var(--cc-blue); flex-shrink:0; }
#codec-compact .cc-label { display:flex; flex-direction:column; justify-content:center; min-width:0; min-height:36px; flex:1; }
#codec-compact .cc-codec { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-weight:500; }
#codec-compact .cc-codec .cc-state { font-size:11px; font-weight:400; color:#5d7389; }
#codec-compact .cc-sub { font-size:11px; color:var(--cc-muted); overflow-wrap:anywhere; }
#codec-compact .cc-metrics { display:contents; }
#codec-compact .cc-metric { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13px; }
#codec-compact .cc-unit { font-size:11px; color:var(--cc-muted); }
#codec-compact .cc-ratio small { display:block; color:var(--cc-muted); font-size:11px; }
#codec-compact .cc-mobile-label { display:none; }
#codec-compact .cc-actions { display:flex; align-items:center; justify-content:flex-end; gap:2px; }
#codec-compact .cc-editor { padding:11px; margin:8px 0; border:1px solid #bddaf0; border-radius:7px; background:#f7fbff; }
#codec-compact .cc-editor-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#codec-compact .cc-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#codec-compact .cc-field { display:grid; gap:4px; font-size:12px; color:var(--cc-muted); }
#codec-compact select { width:100%; min-height:34px; padding:4px 6px; border:1px solid #c6d8e7; border-radius:5px; background:#fff; color:var(--cc-ink); }
#codec-compact .cc-editor-buttons { display:flex; justify-content:flex-end; gap:7px; margin-top:10px; }
#codec-compact .cc-notice { padding:8px 0 0; font-size:12px; color:var(--cc-muted); }
#codec-compact .cc-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#codec-compact [hidden] { display:none!important; }
@media(max-width:740px) {
 #codec-compact { padding:0 10px 10px; }
 #codec-compact .cc-table-head { display:none; }
 #codec-compact .cc-row { grid-template-columns:minmax(0,1fr) auto; gap:3px 5px; }
 #codec-compact .cc-identity { grid-column:1; grid-row:1; }
 #codec-compact .cc-actions { grid-column:2; grid-row:1; }
 #codec-compact .cc-metrics { grid-column:1/3; grid-row:2; display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px; padding-left:26px; }
 #codec-compact .cc-metric { font-size:12px; text-align:left; }
 #codec-compact .cc-ratio small { display:inline; margin-left:4px; }
 #codec-compact .cc-mobile-label { display:inline; color:var(--cc-muted); font-size:11px; margin-right:3px; }
 #codec-compact .cc-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:430px) {
 #codec-compact { font-size:13px; }
 #codec-compact .cc-player { padding:9px; column-gap:6px; grid-template-columns:44px minmax(0,1fr) 44px auto; }
 #codec-compact .cc-play { width:44px; }
 #codec-compact .cc-change { font-size:11px; padding:4px 6px; }
 #codec-compact .cc-source-info { font-size:11px; column-gap:5px; }
 #codec-compact .cc-source-info span+span::before { margin-right:5px; }
 #codec-compact .cc-metrics { padding-left:0; gap:3px 10px; }
 #codec-compact .cc-row { padding-left:9px; padding-right:7px; }
 #codec-compact .cc-identity { gap:7px; }
 #codec-compact .cc-sub { font-size:11px; }
 #codec-compact select { font-size:16px; }
}
@media(pointer:coarse) {
 #codec-compact { --cc-actions-width:132px; }
 #codec-compact .cc-header-links a { min-height:44px; }
 #codec-compact .cc-header-links .cc-github-link { width:44px; }
 #codec-compact button { min-height:44px; }
 #codec-compact .cc-icon { width:44px; }
 #codec-compact .cc-actions { gap:0; }
 #codec-compact .cc-seek { height:32px; }
 #codec-compact .cc-label { min-height:44px; }
}

body { margin:0; }
#codec-compact { box-sizing:border-box; max-width:1120px; margin:auto; min-height:100vh; }
#codec-compact button { cursor:pointer; }
#codec-compact button:disabled { cursor:default; }
#codec-compact :focus-visible { outline:2px solid var(--cc-blue); outline-offset:3px; }
#codec-compact .cc-mark { display:block; width:24px; height:24px; flex-shrink:0; }
#codec-compact .cc-empty { margin:12px; color:var(--cc-muted); font-size:12px; }
#codec-compact .cc-notice { overflow-wrap:anywhere; }
#codec-compact .cc-graph { margin-top:12px; border:1px solid var(--cc-border); border-radius:7px; }
#codec-compact .cc-graph summary { padding:9px 11px; cursor:pointer; font-size:13px; }
#codec-compact .cc-graph-content { padding:0 11px 8px; }
#codec-compact .cc-graph-legend { display:flex; flex-wrap:wrap; gap:5px 14px; min-width:0; font-size:11px; color:var(--cc-muted); }
#codec-compact .cc-graph-legend span::before { content:''; display:inline-block; width:15px; margin-right:5px; vertical-align:middle; border-top:2px solid var(--cc-blue); }
#codec-compact .cc-graph-legend .cc-graph-reference::before { border-top:2px solid #728394; }
#codec-compact #graph-plots h3 { margin:8px 0 2px; font-size:12px; font-weight:500; }
#codec-compact #graph-plots canvas { display:block; width:100%; }
#codec-compact .cc-graph-time { position:relative; }
#codec-compact #graph-cursor { position:absolute; top:8px; height:144px; width:1.5px; background:#203951; pointer-events:none; }
#codec-compact #graph-status { margin:5px 0 0; font-size:11px; color:var(--cc-muted); }

#codec-compact .cc-toolbar-actions { display:flex; gap:6px; }
#codec-compact.cc-game-open>main { visibility:hidden; }
#codec-compact dialog.cc-game { color:var(--cc-ink); width:520px; max-width:calc(100% - 24px); max-height:calc(100dvh - 24px); padding:0; border:1px solid var(--cc-border); border-radius:14px; box-shadow:0 18px 70px #20395126; overflow:auto; }
#codec-compact dialog.cc-game::backdrop { background:rgba(229,237,245,.97); }
#codec-compact .cc-game-header { display:flex; align-items:center; gap:8px; padding:16px 20px 12px; border-bottom:1px solid var(--cc-border); }
#codec-compact .cc-game h2 { font-size:18px; font-weight:600; }
#codec-compact #game-close { margin-left:auto; width:34px; min-height:34px; padding:0; border:0; font-size:25px; color:var(--cc-muted); }
#codec-compact .cc-game-content { padding:20px; }
#codec-compact .cc-game-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; }
#codec-compact .cc-game h3 { font-size:17px; font-weight:500; margin:0; }
#codec-compact .cc-game-heading>span { color:var(--cc-muted); font-size:12px; white-space:nowrap; }
#codec-compact .cc-game-player { background:#f5faff; border:1px solid #d6e8f6; border-radius:9px; padding:12px; margin-bottom:20px; }
#codec-compact .cc-game-controls { display:flex; align-items:center; gap:10px; }
#codec-compact .cc-game-controls>span { flex:1; font-weight:500; }
#codec-compact .cc-game-play { width:44px; height:44px; min-height:44px; flex-shrink:0; padding:0; border-radius:8px; }
#codec-compact .cc-game-play svg { width:26px; height:26px; }
#codec-compact .cc-game-play[aria-busy=true] svg { display:none; }
#codec-compact .cc-game-play[aria-busy=true]::after { content:''; display:block; width:22px; height:22px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:cc-game-spin .8s linear infinite; }
@keyframes cc-game-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { #codec-compact .cc-game-play[aria-busy=true]::after { animation:none; } }
#codec-compact #game-loop { width:38px; min-height:38px; padding:7px; }
#codec-compact #game-loop[aria-pressed=true] { color:#fff; background:var(--cc-blue); border-color:var(--cc-blue); }
#codec-compact .cc-game-seek { display:flex; align-items:center; gap:8px; margin-top:9px; color:var(--cc-muted); font-size:11px; font-variant-numeric:tabular-nums; }
#codec-compact .cc-game-seek input { flex:1; min-width:0; margin:0; accent-color:var(--cc-blue); }
#codec-compact #game-status { margin:7px 0 0; color:var(--cc-muted); font-size:12px; }
#codec-compact #game-retry { margin-top:7px; }
#codec-compact .cc-game-choices { display:grid; grid-template-columns:1fr 1fr; gap:9px; border:0; padding:0; margin:0; min-width:0; }
#codec-compact .cc-game-choices legend { padding:0; margin-bottom:9px; font-size:12px; color:var(--cc-muted); }
#codec-compact .cc-game-choice { display:flex; align-items:center; gap:10px; min-height:79px; padding:11px 12px; border:1px solid #d5e1eb; border-radius:8px; background:#fff; cursor:pointer; min-width:0; }
#codec-compact .cc-game-choice:has(input:checked),#codec-compact .cc-game-choice.cc-game-correct { border-color:var(--cc-blue); background:#edf7ff; box-shadow:inset 0 0 0 1px var(--cc-blue); }
#codec-compact .cc-game-choice input { width:17px; height:17px; margin:0; accent-color:var(--cc-blue); flex-shrink:0; }
#codec-compact .cc-game-name { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:14px; font-weight:500; }
#codec-compact .cc-game-name small { color:var(--cc-blue); font-size:10px; font-weight:400; }
#codec-compact .cc-game-detail { display:block; color:var(--cc-muted); font-size:11px; margin-top:3px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
#codec-compact .cc-game-action { min-height:42px; width:100%; margin-top:18px; }
#codec-compact .cc-game-description { margin:0 0 16px; font-size:12px; color:var(--cc-muted); }
#codec-compact .cc-game-setup { grid-template-columns:1fr; gap:7px; }
#codec-compact .cc-game-setup .cc-game-choice { min-height:60px; padding:9px 12px; }
#codec-compact .cc-game-feedback { padding:12px; margin:0 0 15px; border:1px solid #c4e1f6; border-radius:8px; background:#f1f9ff; color:#1466a5; }
#codec-compact .cc-game-feedback strong { display:block; font-size:15px; font-weight:500; }
#codec-compact .cc-game-feedback small { display:block; margin-top:2px; color:var(--cc-muted); font-size:12px; }
#codec-compact .cc-game-answered { cursor:default; }
#codec-compact .cc-game-choice.cc-game-answered:not(.cc-game-correct) { border-color:var(--cc-border); background:#fff; box-shadow:none; }
#codec-compact .cc-game-listen { display:flex; gap:6px; margin-bottom:9px; }
#codec-compact .cc-game-listen button { flex:1; min-height:32px; font-size:12px; }
#codec-compact .cc-game-listen button[aria-pressed=true] { border-color:#9fc9e9; color:#0875d1; background:#e6f3ff; }
#codec-compact .cc-game-result { text-align:center; padding:15px 0 7px; }
#codec-compact .cc-game-result img { width:44px; height:44px; margin-bottom:8px; }
#codec-compact .cc-game-result p { font-size:28px; font-weight:500; margin:14px 0 20px; }
#codec-compact .cc-game-result strong { color:var(--cc-blue); font-size:38px; font-weight:600; }
#codec-compact .cc-game-result>div { display:flex; gap:8px; }
#codec-compact .cc-game-result button { flex:1; min-height:42px; }
@media(max-width:520px) {
 #codec-compact dialog.cc-game { width:calc(100% - 24px); border-radius:12px; }
 #codec-compact .cc-game-header { padding:12px 16px 10px; }
 #codec-compact .cc-game-content { padding:16px; }
 #codec-compact .cc-game-choices { grid-template-columns:1fr; gap:7px; }
 #codec-compact .cc-game-choice { min-height:59px; padding:9px 11px; }
 #codec-compact .cc-game-detail { margin-top:1px; }
 #codec-compact .cc-game-player { margin-bottom:16px; }
 #codec-compact .cc-game-heading { margin-bottom:13px; }
}