.connection-bottom{flex-wrap:wrap;gap:12px}
.matrix-surface{position:relative;width:100%;height:100%}
.clock-reference{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:3px}
#demo-size{width:auto;max-width:145px;padding:6px;font-size:9px}
.auto-sync{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--muted);margin-top:15px;line-height:1.6}
.auto-sync input,.playlist-list input{accent-color:var(--lime)}
.custom-time{margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.custom-time summary{font-size:10px;color:var(--muted);cursor:pointer}
.custom-time>label{display:block;font-size:9px;color:var(--muted);margin-top:14px}
.custom-time input{display:block;width:100%;margin:9px 0 12px}
.stored-screen{display:grid;grid-template-columns:minmax(0,1fr) 55px auto;align-items:center;gap:10px}
.stored-screen label{font-size:10px}
.stored-screen input,.playlist-add input,.custom-time input{padding:9px 8px;background:#222a21;border:1px solid #48533e;color:var(--text);font-size:11px;border-radius:6px;min-width:0;width:100%}
.playlist-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.playlist-heading h3{font-size:12px;font-weight:500;margin:0}
.playlist-heading span{font:8px var(--mono);color:var(--dim)}
.playlist-add{display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:end;gap:10px;margin:16px 0 10px}
.playlist-add label{font-size:9px;color:var(--muted);line-height:1.5}
.playlist-add input{margin-top:7px}
.playlist-add .button{padding:9px 10px}
.playlist-list{padding:0;margin:14px 0;list-style:none;max-height:250px;overflow:auto;scrollbar-width:thin}
.playlist-list li{display:grid;grid-template-columns:minmax(0,1fr) 34px 34px 50px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.playlist-list label{display:flex;align-items:center;gap:8px;font-size:10px;line-height:1.7;min-width:0}
.playlist-list label span{overflow-wrap:anywhere}
.playlist-list .text-button{min-height:34px;font-size:10px}
.playlist-empty{font-size:10px;line-height:1.8;color:var(--dim);margin:14px 0;padding:12px;border:1px dashed var(--line);border-radius:7px}
#library-context{overflow-wrap:anywhere}
@media(max-width:520px){.session .status{font-size:0;gap:0}.brand{font-size:20px}.brand-mark{font-size:29px}.topbar{gap:10px}}
@media(max-width:360px){.session .button{font-size:9px;padding:10px 8px}.brand{font-size:18px}}
.editor-layout { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 1fr); gap: 28px; align-items: start; }
.editor-workspace { max-width: 512px; width: 100%; }
#editor-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; border-radius: 8px; background: #080d09; outline: 1px solid var(--line); }
#editor-canvas[aria-disabled="true"] { cursor: wait; opacity: .7; }
.editor-grid-note { display: flex; justify-content: space-between; padding: 8px 0; font: 11px monospace; color: var(--muted); }
.editor-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.editor-fields label, .editor-files label { display: grid; gap: 8px; font-size: 12px; }
.editor-fields select { max-width: 150px; }
#editor-color { width: 64px; height: 40px; background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.editor-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.editor-files { display: grid; gap: 14px; margin: 22px 0; }
#editor-import { max-width: 100%; font-size: 12px; }
.editor-files button { justify-self: start; }
.editor-transmit { display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.editor-transmit label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pixel-editor { margin-top: 24px; }
@media (max-width: 680px) { .editor-layout { grid-template-columns: 1fr; } .editor-workspace { margin: 0 auto; } }
.image-uploader { margin-top: 24px; }
.image-layout { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 1fr); gap: 28px; align-items: start; }
.image-preview { width: min(100%, 400px); aspect-ratio: 1; background: #080d09; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.image-preview canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#image-placeholder { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.7; }
.image-inputs { display: grid; gap: 12px; margin-bottom: 22px; }
.image-inputs button { justify-self: start; }
.image-settings label { display: grid; gap: 8px; font-size: 12px; }
.image-settings input[type=file] { max-width: 100%; font-size: 12px; }
.image-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#image-background { width: 64px; height: 38px; background: transparent; border: 1px solid var(--line); }
.image-toggles { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.image-toggles label, .image-settings .image-consent { display: flex; gap: 8px; align-items: start; font-size: 12px; line-height: 1.6; }
.image-destination { margin-bottom: 18px; }
.image-consent { margin-top: 14px; }
.image-advanced { margin: 18px 0; font-size: 12px; color: var(--muted); }
.image-advanced summary { cursor: pointer; margin-bottom: 12px; }
#image-limit, #image-slot { width: 100px; padding: 8px; background: #222a21; color: var(--text); border: 1px solid var(--line); }
@media (max-width: 680px) { .image-layout { grid-template-columns: 1fr; } .image-preview { margin: auto; } }
.image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#image-progress { width: 100%; margin-top: 12px; accent-color: var(--lime); }
.gif-uploader { margin-top: 24px; }
.gif-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
#gif-frame { font: 11px var(--mono); color: var(--muted); }
#gif-from-placeholder { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.7; }
#gif-progress { width: 100%; margin-top: 12px; accent-color: var(--lime); }
#gif-slot, #gif-limit { width: 100px; padding: 8px; background: #222a21; color: var(--text); border: 1px solid var(--line); }
.maintenance { margin-top: 24px; }
.button.danger { border: 1px solid #c17f68; color: #ffcbb8; background: #35251e; }
.erase-confirmation { margin-top: 18px; padding: 18px; border: 1px solid #c17f68; border-radius: 10px; }
.erase-confirmation p { color: #ffcbb8; font-size: 13px; line-height: 1.6; }
.erase-confirmation label { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; font-size: 12px; }
#erase-phrase, #slot-delete-phrase { padding: 12px; width: 100%; max-width: 320px; border: 1px solid var(--line); border-radius: 6px; background: #222a21; color: var(--text); }
#slot-delete-target { overflow-wrap: anywhere; }
.text-uploader { margin-top: 24px; }
#text-content { display: block; width: 100%; margin-top: 8px; padding: 12px; resize: vertical; border: 1px solid var(--line); border-radius: 6px; background: #222a21; color: var(--text); font: 14px var(--mono); }
#text-slot, #text-spacing, #text-line-gap { width: 100px; padding: 8px; background: #222a21; color: var(--text); border: 1px solid var(--line); }
#text-progress { width: 100%; margin-top: 12px; accent-color: var(--lime); }
.editor-color-field { display: flex; flex-direction: column; gap: 8px; font-size: 10px; }
#editor-color-open { display: inline-flex; align-items: center; gap: 8px; }
#editor-color-swatch { width: 16px; height: 16px; border: 1px solid #a7af9e; border-radius: 3px; }
.editor-color-dialog { padding: 14px; margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: #222a21; }
.editor-color-dialog label { display: inline-flex; flex-direction: column; gap: 8px; margin: 0 10px 12px 0; font-size: 11px; }
#editor-color-hex, #text-custom-scale { padding: 9px; max-width: 130px; border: 1px solid var(--line); background: #131814; color: var(--text); border-radius: 6px; }
.reconnect-controls { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.reconnect-controls>label { display: flex; gap: 8px; align-items: start; margin-top: 12px; font-size: 10px; line-height: 1.6; color: var(--muted); }
#editor-fill-controls { margin-top: 12px; }
#editor-fill-controls>label { display: flex; flex-direction: column; gap: 8px; font-size: 11px; }
#editor-fill-tolerance { max-width: 110px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #222a21; color: var(--text); }
#text-speed { max-width: 120px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #222a21; color: var(--text); }
#text-frame { color: var(--muted); font: 11px var(--mono); }
#text-native-speed { max-width: 120px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #222a21; color: var(--text); }
.reconnect-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
#text-send-note[data-blocked="true"] { padding: 10px 12px; border-left: 2px solid var(--lime); color: var(--text); }
#text-effect-delay, #seq-title, #seq-first-slot { padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #222a21; color: var(--text); max-width: 100%; }
.sequence-list { padding: 0; margin: 16px 0; list-style: none; }
.sequence-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sequence-item { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; color: var(--text); }
.sequence-item[aria-pressed="true"] { color: var(--lime); }
.sequence-row button { min-height: 32px; }
.preset-library { margin-top: 24px; }
.preset-library fieldset { display: grid; gap: 18px; min-width: 0; }
.preset-library .image-workspace, .preset-library .image-settings { min-width: 0; }
#preset-name { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #222a21; color: var(--text); width: 100%; }
.preset-list-heading { margin-top: 24px; }
.preset-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.preset-list li { border-bottom: 1px solid var(--line); }
.preset-item { display: block; width: 100%; text-align: left; padding: 14px 4px; overflow-wrap: anywhere; color: var(--text); }
.preset-item[aria-pressed="true"] { color: var(--lime); }