:root{--bg:#121211;--card:#1b1b1a;--line:#2c2c2a;--fg:#f2f0eb;--muted:#9a9893;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
:root{--sans:"SF Pro Text","SF Pro Display","SF Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--serif:"Instrument Serif",Georgia,serif}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--fg);font:15px/1.4 var(--sans);padding:24px}
.card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 20px 16px}
.top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.top h1{margin:0;font-size:15px;font-weight:600;color:#cfcdc8}
.top span{font-size:13px;color:var(--muted)}
.hero{display:flex;align-items:flex-end;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pic{position:relative;width:148px;height:148px;flex:none;border-radius:12px;overflow:hidden;background:#242422}
.pic canvas{width:100%;height:100%;display:block}
.add{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);cursor:pointer;font-size:13px;border:1px dashed #3a3a37;border-radius:12px}
.add b{font-size:28px;font-weight:300;color:var(--fg)}
.add.over{border-color:var(--fg)}
input[type=file]{display:none}
.scan{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);background-size:100% 200%;animation:scan 1.1s linear infinite}
@keyframes scan{from{background-position:0 100%}to{background-position:0 -100%}}
.px,.chip{position:absolute;border:0;background:rgba(20,20,20,.75);color:#fff;cursor:pointer}
.px{top:6px;right:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.px svg{width:12px;height:12px;fill:currentColor}
.px[aria-pressed=true]{background:#fff;color:#111}
.chip{bottom:6px;right:6px;border-radius:10px;padding:2px 8px;font-size:12px}
.score{padding-bottom:4px}
.lab{font-size:13px;color:var(--muted)}
.num{font:400 72px/1 var(--serif);margin-top:4px}
.msg{margin:12px 0 0;font-size:13px;color:#e0a37a}
.facts{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:13px;color:var(--muted)}
.facts dd{margin:4px 0 0;font-size:18px;font-weight:700}
.facts dd small{font-size:13px;font-weight:400;color:var(--muted);margin-left:4px}
.moodbox{padding:14px 0 6px}
.moods{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(4,auto);column-gap:16px;row-gap:3px;margin-top:6px}
.m{display:flex;justify-content:space-between;color:#c9c7c2}
.m.top1{color:var(--fg);font-weight:700}
.acts{display:flex;justify-content:space-between;gap:8px;padding-top:12px}
.btn{background:none;border:0;color:var(--fg);font:600 14px var(--sans);cursor:pointer;padding:4px 0}
.card.busy .acts{opacity:.5;pointer-events:none}