:root { --panel: rgba(10,14,20,.78); --fg:#eaf0ff; }
html,body{ margin:0; height:100%; background:#0b1020; color:var(--fg); font-family: system-ui,-apple-system,"Segoe UI",Roboto; }
#canvasWrap{ position:fixed; inset:0; }
.hint{ position:fixed; top:10px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.35); padding:6px 12px; border-radius:999px; font-weight:600; z-index:9; }
#emotionBadge{ position:fixed; top:50px; left:50%; transform:translateX(-50%); padding:6px 14px; border-radius:999px; font-weight:800; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2); z-index:9; }
#ui{ position:fixed; inset:auto 0 0 0; background:var(--panel); backdrop-filter: blur(6px); display:flex; gap:10px; align-items:center; padding:8px 12px; flex-wrap:wrap; z-index:10; }
.btn{ appearance:none; border:0; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; background:#4e7bff; color:#fff; }
.btn.ghost{ background:rgba(255,255,255,.12); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.pill{ background:#151c2f; color:#cfe0ff; border-radius:999px; padding:8px 12px; font-weight:600; display:flex; align-items:center; gap:8px; }
label{ display:flex; align-items:center; gap:8px; }
input[type="range"]{ width:150px; }
#seconds{ width:74px; }
#overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; backdrop-filter: blur(4px); background:rgba(0,0,0,.45); z-index:20; }
#overlay h1{ margin:0 0 8px 0; font-size:64px; }
#overlay .big{ font-size:92px; font-weight:900; line-height:1; }
.kbd{ padding:2px 8px; border-radius:6px; background:#111827; border:1px solid #374151; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#topRight{ position:fixed; top:8px; right:8px; display:flex; gap:8px; z-index:11; }
.toast{ position:fixed; left:50%; bottom:108px; transform:translateX(-50%); background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.22); padding:10px 14px; border-radius:12px; font-weight:700; z-index:12; display:none; }