:root{--bg:#f7f8fa;--card:#fff;--text:#1c1e21;--muted:#65676b;--accent:#13a8a8;--line:#e3e5e8}@media (prefers-color-scheme:dark){:root{--bg:#121417;--card:#1c1f24;--text:#e8eaed;--muted:#9aa0a6;--accent:#39c5bb;--line:#2c3036}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:15px/1.5 system-ui,-apple-system,Apple SD Gothic Neo,sans-serif}header,main{max-width:960px;margin:0 auto;padding:16px}h1{color:var(--accent);margin:8px 0 4px}.lead{color:var(--muted);margin:0 0 16px}.desc{color:var(--muted);margin:10px 0 0;font-size:13px}.controls{gap:8px;display:flex}.controls input[type=search]{flex:1;min-width:0}.toggle{white-space:nowrap;color:var(--muted);cursor:pointer;align-items:center;gap:4px;font-size:14px;display:flex}.toggle input{accent-color:var(--accent);margin:0}input,select,.tags button{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px}.tags{flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none;display:flex}.tags button{cursor:pointer;border-radius:999px;padding:4px 10px}.tags button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}.tags li{color:var(--muted);font-size:12px}.tags li:before{content:"#"}#list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;display:grid}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}.card .open{width:100%;height:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;justify-content:flex-start;padding:0;display:flex}.card .open:hover .title{color:var(--accent)}.card .open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}.thumb{aspect-ratio:16/9;object-fit:cover;background:#000;width:100%;display:block}.body{padding:10px 12px 12px;display:block}.body>span{display:block}.title{font-size:16px;font-weight:600}.title-ja{color:var(--muted);font-size:13px}.meta{color:var(--muted);margin:0;font-size:13px}.badges{color:var(--muted);margin-top:6px;font-size:12px}.why{margin:8px 0}.why-line{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:6px;font-size:13px;display:-webkit-box;overflow:hidden}.why:empty,.title-ja:empty,.why-line:empty{display:none}.uses .empty{color:var(--muted);font-size:13px}#detail{border:1px solid var(--line);background:var(--card);width:min(720px,100vw - 24px);max-height:calc(100vh - 24px);color:var(--text);border-radius:14px;padding:0}#detail::backdrop{background:#0000008c}#detail form{z-index:1;text-align:right;height:0;position:sticky;top:0}#detail .close{color:#fff;cursor:pointer;background:#0000008c;border:0;border-radius:999px;width:32px;height:32px;margin:8px;font-size:16px}.player{background:#000}.player iframe{aspect-ratio:16/9;border:0;width:100%;display:block}.no-video{color:#ccc;text-align:center;margin:0;padding:32px 16px}.detail-body{padding:14px 18px 18px}.detail-body h2{margin:0;font-size:20px}.detail-body>p{margin:2px 0 0}.detail-body .title-ja{font-size:14px}.detail-body .badges{margin:8px 0 0}.detail-body h3{margin:18px 0 8px;font-size:15px}.uses{gap:10px;margin:0;padding-left:0;list-style:none;display:grid}.use-head{font-size:14px;font-weight:600}.uses ul{color:var(--muted);margin:2px 0 0;padding-left:18px;font-size:13px}.detail-body a{color:var(--accent)}.links{margin:16px 0 0;font-size:13px}