@font-face { font-family: PLsans; src: url("../fonts/Arimo-VariableFont_wght.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: PLbold; src: url("../fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: PLcond; src: url("../fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: PLhead; src: url("../fonts/BebasNeue-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: PLserif; src: url("../fonts/Tinos-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: PLretro; src: url("../fonts/PressStart2P-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: PLterm; src: url("../fonts/VT323-Regular.ttf") format("truetype"); font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 PLsans, sans-serif; color: #0b2347; background: #f4f6f8; }
header, #invalid, #holding, #blocked { padding: 12px 16px; }
.brand { font-weight: 800; letter-spacing: .04em; }
h1 { font-size: 1.25rem; margin: 0; }
#app > header { background: #0b2347; color: #fff; }
#app > header a { color: #fff; }
.hint { color: #475467; font-size: .85rem; }
#app > header .hint { color: #d5dce8; }
.header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
button, select, input, textarea { font: inherit; }
button { background: #f26a10; color: #fff; border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
button.on { outline: 2px solid #0b2347; }
.layout { display: grid; grid-template-columns: 200px 1fr 280px; gap: 12px; padding: 12px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
aside, main { background: #fff; border-radius: 12px; padding: 10px; min-width: 0; }
#slides button { display: block; width: 100%; margin: 4px 0; text-align: left; background: #eef2f6; color: #0b2347; }
#slides button.on { background: #0b2347; color: #fff; }
#stage-wrap { overflow: auto; background: #111; border-radius: 8px; padding: 8px; }
#stage { position: relative; background: #000; margin: 0 auto; }
#stage canvas { image-rendering: pixelated; display: block; }
#stage video, #stage img { position: absolute; object-fit: fill; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tools button { background: #0b2347; }
.xy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.row, label.row { display: flex; gap: 8px; align-items: center; margin: 8px 0 2px; font-weight: 700; }
input[type="number"], select, textarea { width: 100%; padding: 6px 8px; border: 1px solid #d5dce8; border-radius: 8px; }
textarea { min-height: 64px; }
.styles { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.styles button { background: #fff; color: #0b2347; border: 1px solid #d5dce8; text-align: left; }
.styles .group { font-size: .75rem; font-weight: 800; color: #667085; margin-top: 6px; }
#align { display: flex; gap: 4px; }
#invalid, #holding, #blocked { margin: 16px; background: #fff; border-radius: 12px; }
#library { position: fixed; inset: 0; background: rgba(11,35,71,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
#library[hidden] { display: none; }
.lib-box { background: #fff; border-radius: 12px; max-width: 860px; width: 100%; max-height: 90vh; overflow: auto; padding: 12px; }
#lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
#lib-grid button { background: #0b2347; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
#lib-grid img, #lib-grid video { width: 100%; height: 72px; object-fit: cover; background: #000; }
#status { min-height: 1.2em; }