.editor-page #workspace { margin-top: 24px; }
.editor-page .source { position: static; }
.editor-page .settings > label:first-child { margin-top: 0; }
.editor-page #draft-help, .editor-page #billing-charge { font-size: 13px; }
.editor-page #explorer { margin-bottom: 40px; }
.editor-page #explorer .connection { margin: 24px 0; }
.editor-page #results { margin-top: 40px; }
.editor-page #output-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.editor-page #connection-status:empty { display: none; }
html[data-design=modern] .editor-page > section.intro { margin: 28px 0 20px; }
html[data-design=modern] .editor-page > #workspace { margin: 0 0 40px; }
html[data-design=modern] .editor-page #rewrite { background: var(--ink); border-color: var(--ink); color: var(--white); }
html[data-design=modern] .editor-page #rewrite:hover:not(:disabled) { background: #2b493a; }
html[data-design=modern] .editor-page #rewrite:disabled { background: #5c6d63; }
html[data-design=modern] .editor-page #analyze { background: transparent; color: var(--ink); border-color: transparent; }
html[data-design=modern] .editor-page #analyze:hover:not(:disabled) { background: #e9f0e6; }
html[data-design=modern] .editor-page .settings { background: transparent; padding: 0; }
html[data-design=modern] .editor-page #instructions { height: auto; }
html[data-design=modern] .editor-page #explorer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
html[data-design=modern] .editor-page #editing-details { margin-top: 24px; }
@media (max-width: 760px) {
  html[data-design=modern] .editor-page .source textarea { height: 330px; padding: 16px; font-size: 16px; }
  .editor-page .settings { max-width: none; }
  .editor-page .actions { align-items: stretch; }
}

html[data-design=modern] .editor-page h1 { font-size: clamp(36px, 4vw, 48px); margin-bottom: 18px; }
.editor-page #editor-access { max-width: 560px; margin: 32px 0 56px; }
.editor-page #editor-access h2 { margin-top: 0; }
.editor-page #editor-login { max-width: 380px; }
.editor-page #editor-login-submit { margin-top: 24px; }
.editor-page .editor-demo { margin-top: 32px; padding-top: 24px; border-top: 1px solid #b8c7bc; }
.editor-page .editor-demo span { display: block; margin-top: 8px; }
.editor-page #workspace .workbench { display: block; }
.editor-page .editing-options { margin-top: 24px; }
.editor-page .editing-options > .settings { margin: 20px 0 0; border: 0; padding: 0; min-width: 0; max-width: 620px; }
.editor-page .other-actions { margin: 16px 0; }
.editor-page #source[readonly] { opacity: .8; }
.editor-page #access-status:empty, .editor-page #editor-availability:empty { display: none; }
html[data-design=modern] main.editor-page { max-width: 1000px; }
html[data-design=modern] .editor-page #editor-access h2 { font-size: 24px; }
html[data-design=modern] .editor-page .editor-demo span, html[data-design=modern] #access-description { color: var(--muted); }
html[data-design=modern] .editor-page .source textarea { min-height: 300px; height: 36vh; max-height: 600px; }
html[data-design=modern] .editor-page .editing-options > .settings { padding: 0; }
.editor-page #status:empty, .editor-page #billing-charge:empty { display: none; }
html[data-design=modern] .editor-page .source { position: static; }
html[data-design=modern] .editor-page #editor-login-submit { background: var(--ink); border-color: var(--ink); color: var(--white); }
html[data-design=modern] .editor-page #editor-login-submit:hover:not(:disabled) { background: #2b493a; }
.editor-page button:disabled { cursor: not-allowed; }

.editor-page #example-actions:not([hidden]) { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.editor-page #edit-access-note, .editor-page .example-caption { font-size: 14px; color: #53655d; }
.editor-page #pricing-examples { margin: 24px 0 40px; }
.editor-page .comparison-controls { margin: 16px 0; }
.editor-page #back-to-examples { margin-bottom: 16px; }
.editor-page .recorded-level[hidden] { display: none; }
.editor-page .edit-note { margin-top: 12px; }
.editor-page .edit-note p { max-width: 70ch; }
html[data-design=modern] .editor-page #edit-own-text { background: var(--ink); color: var(--white); border-color: var(--ink); }
@media (max-width: 540px) {
  .editor-page #example-actions { gap: 8px; }
  .editor-page .comparison-changes .recorded-text { max-height: 240px; }
}

.editor-page .comparison-controls label { margin-top: 0; }
.editor-page [data-example], .editor-page .recorded-level { margin-top: 12px; }
html[data-design=modern] .editor-page .comparison-controls label { margin-top: 0; }