/* embed/embed.css — стили встраиваемой доски и конструктора. Классы .eb-* (доска) и .ec-* (конструктор). */
html, body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.eb-wrap { display: flex; flex-direction: column; gap: 4px; padding: 0; }
.eb-board { display: grid; grid-template-columns: repeat(8, 1fr); width: 100%; aspect-ratio: 1; border-radius: 4px; overflow: hidden; }
.eb-sq { position: relative; display: flex; align-items: center; justify-content: center; font-size: clamp(14px, 7vw, 56px); line-height: 1; min-width: 0; }
.eb-skin-classic .eb-light { background: #ecd9b0; } .eb-skin-classic .eb-dark { background: #a97b50; }
.eb-skin-green .eb-light { background: #eeeed2; } .eb-skin-green .eb-dark { background: #769656; }
.eb-skin-blue .eb-light { background: #dee3e6; } .eb-skin-blue .eb-dark { background: #5d8bb5; }
.eb-skin-slate .eb-light { background: #c9ced6; } .eb-skin-slate .eb-dark { background: #5b6474; }
.eb-w { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 1px #000; }
.eb-b { color: #151515; text-shadow: 0 0 1px #fff; }
.eb-duck { font-size: 0.9em; }
.eb-rank, .eb-file { position: absolute; font-size: 10px; font-weight: 700; color: rgba(0, 0, 0, 0.55); }
.eb-rank { top: 1px; left: 2px; } .eb-file { bottom: 1px; right: 2px; }
.eb-credit { align-self: flex-end; font-size: 12px; color: #3b5b8a; text-decoration: none; }
.eb-credit:hover, .eb-credit:focus-visible { text-decoration: underline; }
/* Конструктор /embed/ */
.ec-page { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; color: #1b2430; background: #f7f8fa; min-height: 100vh; }
.ec-page h1 { font-size: 28px; margin: 6px 0 8px; } .ec-page a { color: #1f5fbf; }
.ec-grid { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 20px; align-items: start; margin-top: 16px; }
.ec-form { display: flex; flex-direction: column; gap: 12px; }
.ec-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.ec-form select, .ec-code { font: inherit; padding: 8px 10px; border: 1px solid #98a3b3; border-radius: 8px; background: #fff; color: inherit; }
.ec-code { width: 100%; min-height: 120px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; resize: vertical; box-sizing: border-box; }
.ec-btn { padding: 9px 16px; border-radius: 10px; border: 0; background: #1f7a3f; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.ec-btn:focus-visible, .ec-form select:focus-visible, .ec-code:focus-visible { outline: 2px solid #1f5fbf; outline-offset: 2px; }
.ec-preview { border: 1px dashed #98a3b3; border-radius: 8px; padding: 8px; background: #fff; }
.ec-preview iframe { border: 0; display: block; max-width: 100%; }
.ec-note { font-size: 13px; color: #4a5565; }
@media (max-width: 720px) { .ec-grid { grid-template-columns: 1fr; } }