/* the editor around the poster: same paper/ink, same fonts */
:root { --ink:#0a0a0a; --paper:#fbfbf8; --dim:#8c8c88; --line:#d8d8d2; --stage:#ecece6; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--paper); color:var(--ink);
  font:15px/1.5 'IBM Plex Mono', ui-monospace, monospace; }
button, input, textarea { font:inherit; color:inherit; }

.app { display:grid; grid-template-columns:380px 1fr; height:100vh; }
.panel { overflow-y:auto; padding:28px 28px 40px; border-right:2px solid var(--ink); }
.stage { position:relative; overflow:hidden; background:var(--stage); padding:32px;
  display:flex; align-items:center; justify-content:center; }
#holder { position:relative; box-shadow:0 0 0 2px var(--ink), 10px 10px 0 var(--ink); }
#scaler { transform-origin:0 0; position:absolute; top:0; left:0; }

header h1 { font-size:26px; margin:0 0 6px; font-weight:700; letter-spacing:-.01em; }
header p { margin:0 0 8px; color:var(--dim); font-size:13px; }
.cur { display:inline-block; width:.55em; height:.95em; background:var(--ink); vertical-align:-.12em; margin-left:4px;
  animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .cur { animation:none; } }
code { background:var(--ink); color:var(--paper); padding:0 4px; font-size:12px; }

fieldset { border:0; border-top:2px solid var(--ink); margin:20px 0 0; padding:12px 0 0; min-width:0; }
legend { font-weight:700; padding:0 8px 0 0; font-size:13px; }
label { display:block; margin:10px 0 0; font-size:13px; }
label small { color:var(--dim); font-size:12px; margin-left:6px; }
input, textarea { display:block; width:100%; margin-top:4px; padding:8px 10px; background:#fff;
  border:2px solid var(--ink); border-radius:0; outline:none; }
textarea { resize:vertical; line-height:1.4; font-size:14px; }
input:focus, textarea:focus { box-shadow:4px 4px 0 var(--ink); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hint { color:var(--dim); font-size:12px; margin:6px 0 8px; }
.hint code { font-size:11px; }

.seg { display:flex; gap:0; margin-top:4px; }
.seg.wrap { flex-wrap:wrap; }
.seg.wrap button { flex:1 0 33.33%; }
.seg button { flex:1; border:2px solid var(--ink); margin:0 -2px -2px 0; background:#fff; padding:8px 6px; cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--ink); color:var(--paper); font-weight:700; }

button { cursor:pointer; }
.actions { display:grid; gap:8px; margin-top:24px; }
.actions button, .ghost { border:2px solid var(--ink); background:#fff; padding:10px; }
.actions .primary { background:var(--ink); color:var(--paper); font-weight:700; font-size:16px; padding:14px; }
.actions .primary:disabled { opacity:.6; cursor:wait; }
.ghost { border-style:dashed; background:transparent; width:100%; padding:7px; font-size:13px; }
button:hover:not(:disabled) { box-shadow:3px 3px 0 var(--ink); }
button:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.warn { margin:14px 0 0; padding:10px; background:var(--ink); color:var(--paper); font-size:13px; }

@media (max-width: 860px) {
  .app { grid-template-columns:1fr; grid-template-rows:70vh auto; height:auto; }
  .panel { border-right:0; border-bottom:2px solid var(--ink); padding:20px 16px; order:2; }
  .stage { order:1; height:70vh; padding:16px; }
}