:root { --bg:#0b0a10; --panel:#15131c; --panel2:#1d1a27; --line:#2b2736; --fg:#e8e4f0; --dim:#9a94ab; --acc:#ffb23a; --acc2:#8fe3ff; --danger:#ff5a5a; }
* { box-sizing:border-box; } html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
a { color:var(--acc2); text-decoration:none; } a:hover { text-decoration:underline; }
button, select, input { font:inherit; color:inherit; }
button { background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:6px 12px; cursor:pointer; } button:hover { border-color:var(--acc); }
button.primary { background:var(--acc); color:#1a1408; border-color:var(--acc); font-weight:600; }
button.mini { padding:2px 8px; font-size:12px; }
select { background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:5px 8px; }
header.top { display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel); }
header.top .brand { font-weight:800; letter-spacing:.12em; color:var(--acc); text-transform:uppercase; }
header.top .brand small { color:var(--dim); letter-spacing:0; text-transform:none; font-weight:400; margin-left:8px; }
header.top .spacer { flex:1; }
.tabs { display:flex; gap:6px; } .tabs button.on { background:var(--acc); color:#1a1408; border-color:var(--acc); }
main.gallery { padding:18px 16px 40px; max-width:1500px; margin:0 auto; }
.section-title { color:var(--dim); text-transform:uppercase; letter-spacing:.14em; font-size:12px; margin:22px 4px 10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:transform .12s, border-color .12s; }
.card:hover { transform:translateY(-2px); border-color:#3d3750; }
.card .shot { aspect-ratio:16/10; background:#000 center/cover no-repeat; position:relative; display:block; image-rendering:auto; }
.card .shot .fam { position:absolute; top:8px; left:8px; font-size:11px; letter-spacing:.1em; padding:2px 7px; border-radius:4px; background:rgba(0,0,0,.55); color:var(--acc2); }
.card .shot .num { position:absolute; top:8px; right:8px; font-size:11px; padding:2px 7px; border-radius:4px; background:rgba(0,0,0,.55); color:var(--dim); }
.card .body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card h3 { margin:0; font-size:16px; } .card p { margin:0; color:var(--dim); font-size:13px; flex:1; }
.card .row { display:flex; align-items:center; gap:8px; }
.card .row .spacer { flex:1; }
.stars .star { background:none; border:0; padding:0 1px; color:#4a4458; font-size:16px; cursor:pointer; } .stars .star.on { color:var(--acc); }
.tags { display:flex; flex-wrap:wrap; gap:4px; } .tags span { font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:4px; padding:1px 6px; }
/* viewer */
.viewer { display:grid; grid-template-rows:auto 1fr auto; height:100%; }
.stage { position:relative; min-height:0; background:#000; grid-row:2; }
.stage .vp { position:absolute; inset:0; } .stage .vp canvas { display:block; width:100%; height:100%; outline:none; }
.stage.split { display:grid; grid-template-columns:1fr 1fr; gap:2px; } .stage.split .vp { position:relative; }
.stage .label { position:absolute; left:10px; top:8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc2); background:rgba(0,0,0,.5); padding:3px 8px; border-radius:4px; pointer-events:none; }
.hud { font:12px ui-monospace,Menlo,Consolas,monospace; color:var(--dim); }
footer.bar { display:flex; align-items:center; gap:14px; padding:8px 16px; border-top:1px solid var(--line); background:var(--panel); flex-wrap:wrap; }
footer.bar .keys { color:var(--dim); font-size:12px; } footer.bar .keys b { color:var(--fg); font-weight:600; background:var(--panel2); border:1px solid var(--line); border-radius:4px; padding:0 5px; margin:0 2px; }
aside.params { position:absolute; right:10px; top:10px; width:250px; background:rgba(21,19,28,.9); border:1px solid var(--line); border-radius:8px; padding:10px 12px; backdrop-filter:blur(6px); max-height:calc(100% - 20px); overflow:auto; }
aside.params.empty { display:none; } aside.params h3 { margin:0 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.prow { display:grid; grid-template-columns:1fr auto; gap:2px 8px; margin:6px 0; font-size:12px; } .prow input[type=range] { grid-column:1/3; width:100%; } .prow b { color:var(--acc); font-weight:600; }
.note { position:absolute; left:10px; bottom:10px; max-width:420px; background:rgba(21,19,28,.85); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:12px; color:var(--dim); }
.hidden { display:none !important; }
.pill { display:inline-block; font-size:11px; padding:2px 8px; border-radius:99px; border:1px solid var(--line); color:var(--dim); }
kbd { font:inherit; }
@media (max-width:700px) { aside.params { width:200px; } footer.bar .keys { display:none; } }