.emo { width: min(900px, 100%); margin: 0 auto; }
.drop { display: block; border: 3px dashed #4a5aa0; padding: 40px 16px; text-align: center; cursor: pointer; font-size: 20px; color: #cfd6f5; }
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--accent); color: var(--accent); outline: none; }
.emo-grid { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.emo-grid[hidden], .emo [hidden] { display: none !important; }
.emo-opts { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.emo-opts .row { display: flex; flex-direction: column; gap: 6px; font-size: 18px; }
.emo-opts b { color: var(--accent); font-weight: normal; }
.seg { display: flex; flex-wrap: wrap; }
.seg button, .emo-opts input[type=text] { font-family: inherit; font-size: 18px; background: var(--card); color: var(--fg); border: 2px solid #4a5aa0; padding: 6px 12px; cursor: pointer; }
.seg button + button { margin-left: -2px; }
.seg button.on { background: var(--accent); color: var(--bg); border-color: var(--accent); position: relative; }
.emo-opts input[type=text] { cursor: text; }
.emo-opts input[type=range] { width: 100%; accent-color: var(--accent); }
.vin { display: flex; gap: 8px; }
.vin input, .vin select { width: 33%; font-family: inherit; font-size: 18px; background: var(--card); color: var(--fg); border: 2px solid #4a5aa0; padding: 6px; }
.emo h2 { color: var(--accent); font-weight: normal; font-size: 32px; margin: 48px 0 8px; text-align: center; }
.mini { font-family: inherit; font-size: 15px; background: transparent; color: #cfd6f5; border: 2px solid #4a5aa0; padding: 4px 10px; cursor: pointer; align-self: flex-start; }
.mini:hover { color: var(--accent); border-color: var(--accent); }
.checker canvas { cursor: grab; touch-action: none; }
#wave { width: 100%; height: 150px; touch-action: none; background: #0d1a40; margin-top: 16px; cursor: crosshair; display: block; }
.snd .buttons { gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.snd .emo-opts { margin-top: 12px; }
.chk { font-size: 16px; color: #cfd6f5; display: flex; gap: 8px; align-items: flex-start; }
.emo-prev { flex: 1 1 260px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.checker { background: repeating-conic-gradient(#1b2a5c 0 25%, #0d1a40 0 50%) 0 0 / 20px 20px; padding: 12px; }
.checker canvas { display: block; width: 256px; height: 256px; image-rendering: auto; }
.emo .meta { font-size: 14px; color: #aab4e0; margin: 0; text-align: center; }
.emo .meta.err { color: #ff8a8a; }
.emo .note { margin-top: 28px; text-align: left; line-height: 1.5; }
.dc { background: #313338; width: 100%; max-width: 340px; padding: 12px; font-family: Arial, sans-serif; color: #dbdee1; }
.dc-msg { display: flex; gap: 12px; align-items: flex-start; }
.dc-name { font-size: 15px; font-weight: 600; color: #fff; } .dc-name small { font-weight: 400; font-size: 11px; color: #949ba4; margin-left: 6px; }
.dc-text { font-size: 15px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.dc canvas { image-rendering: auto; } .dc canvas.av { border-radius: 50%; }
.dc-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.emo .buttons { display: flex; }

.av-dot { width: 40px; height: 40px; border-radius: 50%; background: #5865f2; flex: 0 0 40px; }
.dc-body { min-width: 0; }
.dc-jumbo { display: flex; gap: 4px; margin-top: 6px; }
#ps canvas { display: block; margin-top: 4px; }
.mini { font-family: inherit; font-size: 15px; background: transparent; color: #cfd6f5; border: 2px solid #4a5aa0; padding: 4px 10px; cursor: pointer; align-self: flex-start; }
.mini:hover { color: var(--accent); border-color: var(--accent); }
.mini:disabled { opacity: .5; cursor: default; }