:root { --fg: #000; --bg: #fff; --line: #ddd; --mute: #777; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 14px/1.45 -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; }
main { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr); height: 100vh; }
form { overflow-y: auto; padding: 0 28px 60px; border-right: 1px solid var(--line); }
aside { background: #f2f2f2; overflow: auto; padding: 24px; }
.sheet { width: 8.5in; height: 11in; margin: 0 auto; transform-origin: top left; }
iframe { display: block; width: 8.5in; height: 100%; border: 0; background: #fff; }

.bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 14px 0 12px; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.brand { letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.grow { flex: 1; }

button { font: inherit; font-size: 13px; color: var(--fg); background: none;
  border: 1px solid var(--fg); border-radius: 0; padding: 4px 10px; cursor: pointer; }
button:hover { background: var(--fg); color: var(--bg); }
button.primary { background: var(--fg); color: var(--bg); }
button.primary:hover { background: #333; }
button.ghost { border-color: var(--line); color: var(--mute); padding: 2px 7px; font-size: 12px; }
button.ghost:hover { border-color: var(--fg); color: var(--fg); background: none; }
button:disabled { opacity: 0.5; cursor: default; }

h2 { font-size: 12px; font-weight: normal; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 26px 0 8px; display: flex; align-items: baseline; gap: 10px; }
h2 .grow { flex: 1; }

label { display: block; margin: 0 0 10px; }
label span { display: block; font-size: 11px; color: var(--mute); margin-bottom: 2px; }
input, textarea { display: block; width: 100%; font: inherit; color: var(--fg); background: none;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0; outline: none; }
input:focus, textarea:focus { border-bottom-color: var(--fg); }
textarea { resize: vertical; min-height: 3.2em; line-height: 1.4; }

.grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.grid .full { grid-column: 1 / -1; }

.entry { padding: 10px 0 2px; border-top: 1px dashed var(--line); }
.entry .tools { display: flex; gap: 4px; justify-content: flex-end; margin-bottom: 6px; }

.hint { font-size: 11px; color: var(--mute); margin: -6px 0 10px; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; height: auto; }
  form { border-right: 0; border-bottom: 1px solid var(--line); }
  aside { padding: 12px; }
}