:root{color-scheme:dark;--bg:#151619;--panel:#242529;--line:#46474d;--text:#fff;--dim:#bdc0c9;--accent:#8cc8ff;--gold:#ffcf6b;--field:#1b1c20}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.5 system-ui,sans-serif}
.shell{max-width:1660px;margin:auto;padding-inline:clamp(12px,3vw,44px)}
header{padding-top:30px}
h1{font-weight:630;font-size:clamp(27px,4vw,43px);line-height:1.12;margin:7px 0 22px;letter-spacing:-.035em}
.eyebrow{color:var(--dim);font-size:12px;letter-spacing:.15em}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
input,select,button,textarea{font:inherit;color:inherit}
button,input:not([type=range],[type=checkbox]),select,textarea,.toggle{background:var(--field);border:1px solid var(--line);border-radius:11px}
button,input:not([type=range],[type=checkbox]),select,.toggle{min-height:48px;padding:0 12px}
button{cursor:pointer;background:#32343a;font-weight:590}
button:hover,.toggle:hover{border-color:#828998}
button:disabled{opacity:.62;cursor:wait}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=search]{width:min(100%,350px);flex:1 1 220px}
.toggle{display:flex;align-items:center;gap:8px;cursor:pointer}
input[type=checkbox],input[type=range]{accent-color:var(--gold)}
#count{color:var(--dim);min-height:24px;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,385px),1fr));gap:12px;padding-bottom:48px}
.card{min-width:0;min-height:156px;display:grid;grid-template-columns:42% minmax(0,1fr);grid-template-rows:1fr;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:inset 0 1px 0 #ffffff10,0 12px 30px #0003;position:relative}
.card[hidden]{display:none}
.thumb{position:relative;display:grid;place-items:center;min-height:100%;overflow:hidden;border-radius:17px 0 0 17px;background:#303139;color:white;text-decoration:none}
.thumb iframe{position:absolute;inset:0;width:400%;height:400%;border:0;transform:scale(.25);transform-origin:top left;pointer-events:none}
.thumb span{position:absolute;bottom:6px;left:6px;border-radius:8px;background:#151619e8;padding:2px 7px;font-size:12px}
.thumb:hover span,.thumb:focus-visible span{background:#fff;color:#161619}
.info{min-width:0;display:flex;flex-direction:column;padding:8px 9px 7px;gap:5px}
.toprow{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center}
.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:15px;font-weight:620}
.name span{display:inline-block}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .name.overflow:hover span{animation:scan var(--scroll-time,4s) linear .45s both}
  @keyframes scan{to{transform:translateX(var(--scroll-to,0))}}
}
.rating{position:relative;z-index:1}
.rating[data-open]{z-index:4}
.star{display:grid;place-items:center;padding:0;min-width:44px;min-height:44px;position:relative;border-color:transparent;background:transparent}
.star svg{width:22px;height:22px;grid-area:1/1}
.controls{position:absolute;right:0;top:100%;width:min(200px,75vw);padding:8px 10px;border:1px solid #656873;background:#25272d;border-radius:11px;box-shadow:0 12px 25px #0008}
.controls input{width:100%;min-height:44px;display:block}
.controls output{font-variant-numeric:tabular-nums;color:var(--gold)}
textarea{width:100%;min-height:54px;resize:vertical;padding:7px;font-size:16px}
.save{min-height:17px;font-size:11px;color:var(--dim)}
.save button{min-height:44px;font-size:12px}
.hint{margin:0;color:var(--dim);font-size:11px}
.entry{display:grid;place-items:center;min-height:100svh;padding:16px}
.login{width:min(100%,360px);padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:20px}
.login form{display:grid;gap:8px}
#login-error{color:#ffb1b1;margin:0}
#login-error:empty{display:none}
@media(max-width:490px){.tools>*{font-size:16px}.tools select{flex:1 1 auto}.card{grid-template-columns:40% minmax(0,1fr)}}