.board-color-field{display:inline-flex;align-items:center;gap:4px;font-size:.875rem}
.board-color-picker{position:relative;display:inline-block;vertical-align:middle}
.board-color-picker summary{display:flex;align-items:center;gap:5px;min-height:30px;padding:3px 6px;list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:6px;background:var(--panel,#fff);color:var(--ink)}
.board-color-picker summary::-webkit-details-marker{display:none}
.board-color-chip{display:block;width:22px;height:20px;border:1px solid #20292540;border-radius:3px}
.board-color-grid{position:absolute;z-index:30;top:calc(100% + 6px);left:0;display:grid;grid-template-columns:repeat(5,30px);gap:7px;width:max-content;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel,#fffefa);box-shadow:0 8px 24px #20292529}
.board-background-control .board-color-grid{left:auto;right:0}
.board-color-picker:not([open]) .board-color-grid{display:none}
.board-color-grid button.board-color-swatch{box-sizing:border-box;width:30px;height:30px;min-height:30px;padding:0;border:1px solid #20292540;border-radius:5px;font:700 18px/1 system-ui,sans-serif;cursor:pointer}
.board-color-grid button.board-color-swatch[aria-pressed=true]{outline:2px solid var(--green);outline-offset:2px}
.board-color-grid button.board-color-texture{grid-column:1/-1;width:100%;font-size:12px}
.board-color-texture,.board-color-chip.is-texture{background-image:url('chalkboard-texture.png');background-size:180px}
.board-color-picker :is(summary,button):focus-visible{outline:2px solid var(--green);outline-offset:3px}
#colors{grid-template-columns:repeat(5,31px)}
#colorMenu .color-popover{width:max-content}
.board-wrap[data-background]:not(.document-mode):not(.writing-mode):not([data-background=texture]){background:var(--board-background-color,#194536)}
.board-wrap[data-light-background=true]:not(.document-mode) .hint{color:rgba(32,41,37,.45)}
.board-wrap[data-light-background=true] .board-pan button{color:var(--green);border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.07)}
.board-wrap[data-light-background=true] .text-editor{border-color:rgba(var(--accent-rgb),.55)}
.board-wrap[data-light-background=true] .board-content-zoom{--zoom-ink:rgba(32,41,37,.88);--zoom-surface:rgba(255,255,255,.3);--zoom-border:rgba(32,41,37,.16);--zoom-hover:rgba(32,41,37,.08)}
body.board-fullscreen:not([data-board-background=texture]){background:var(--board-background-color,#194536)}
@media(max-width:650px){.writing-controls .board-color-picker{position:static}.writing-controls .board-color-grid{left:6px;right:auto}}