/* SPDX-License-Identifier: GPL-2.0 */
:root{font:18px system-ui,sans-serif;color:#2e3436;background:#e6e6e4;color-scheme:light}
*{box-sizing:border-box}body{margin:0;padding:12px;overflow-wrap:anywhere}button,input,select{font:inherit}
button,select{min-height:52px;border:0;border-radius:14px;background:#f2f2f0;color:inherit;padding:10px 18px}
button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:active,.active{background:#c4dcf7}
button:focus-visible,article:focus-visible{outline:3px solid #3584e4;outline-offset:-3px}.primary{background:#3584e4;color:white}
input:not([type=range]){min-height:54px;border:1px solid #ccc;border-radius:14px;padding:10px 14px;min-width:0}
header,.tools,nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}header h1{flex:1;text-align:center;font-size:28px;margin:8px}
header{margin-bottom:12px}nav{margin:12px 0}nav button{flex:1;min-width:115px}.tools>input[type=search]{flex:1}
.tools{margin:10px 0}.tools>select{max-width:100%;flex:1}.tools>strong{flex:1}.tools>input[type=range]{flex:1;min-width:90px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px}.card{border-radius:16px;background:#f2f2f0;overflow:hidden;min-width:0;contain:layout style}
.card .picture{aspect-ratio:16/9;background:#dededb}.picture img{width:100%;height:100%;object-fit:contain}
.card h3{font-size:19px;margin:10px 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin:8px 12px;color:#5e5c64;font-size:16px}.card>button{width:100%;border-radius:0}.card[tabindex]{cursor:pointer}
.located{outline:3px solid #3584e4;outline-offset:-3px}.row,.panel{background:#f2f2f0;border-radius:16px;padding:14px;margin:10px 0}
.row{display:flex;align-items:center;gap:12px}.row .description{flex:1;min-width:0}.row h3{margin:0 0 5px;font-size:22px}.row img{width:72px;height:72px;object-fit:contain}
.meta,#note,#player-note{color:#5e5c64}#note:empty,#player-note:empty{display:none}#content h2{font-size:24px}.panel h3{margin-top:0}
progress{width:100%;height:7px;border:0;accent-color:#3584e4}.pager{display:flex;justify-content:space-between;gap:12px;margin:18px 0}
label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}label>input:not([type=checkbox]){flex:1}input[type=checkbox]{width:26px;height:26px;accent-color:#3584e4}
#pair{max-width:600px;margin:20px auto}#pair-form{display:grid;gap:16px}#pair-form label{display:grid;gap:6px}
#player{background:#f2f2f0;border-radius:16px;padding:12px;margin-top:16px;scroll-margin:10px}video{display:block;width:100%;max-height:65vh;background:black;border-radius:10px}
#time{font-variant-numeric:tabular-nums;font-size:15px}#service-link{display:inline-block;padding:10px;color:#1854a0}
#modal{position:fixed;inset:0;z-index:10;background:#0006;display:flex;align-items:center;justify-content:center;padding:18px}
#modal-body{background:#f2f2f0;border-radius:16px;padding:20px;max-width:600px;max-height:90vh;overflow:auto;display:grid;gap:10px;min-width:min(340px,100%)}
[hidden]{display:none!important}:fullscreen{background:#e6e6e4;overflow:auto}:fullscreen body{padding-top:env(safe-area-inset-top,12px)}
@media(max-width:600px){:root{font-size:17px}body{padding:8px}.tools{gap:8px}nav{gap:6px}nav button{min-width:90px;padding:8px}header h1{font-size:25px}.tools>select{min-width:110px}#scope{max-width:150px}.row{padding:12px}.row img{width:54px;height:54px}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .08s}}