* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: Arial, sans-serif; }
@font-face { font-family: OpenDyslexic; src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@master/ttf/OpenDyslexic-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
button, input { font-size: 20px; padding: 8px 12px; }

.viewer { background: #000; color: #fff; overflow: hidden; height: 100%; }
#stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
#script { position: relative; width: 1024px; margin-left: auto; margin-right: auto; text-align: center; font-size: 64px; line-height: 1.1; white-space: pre !important; word-wrap: normal !important; overflow-wrap: normal !important; word-break: keep-all !important; -webkit-hyphens: none !important; hyphens: none !important; padding: 0 5% 50vh; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.script-line { display: block; white-space: pre; }
.paragraph-gap { display: block; height: 0; min-height: 0; margin: 0; padding: 0; line-height: 0; overflow: hidden; }
.reading-normal #script, .reading-normal #preview-script { font-family: Arial, sans-serif; }
.reading-dyslexic #script, .reading-dyslexic #preview-script { font-family: OpenDyslexic, Verdana, Arial, sans-serif; }
.reading-bionic #script, .reading-bionic #preview-script { font-family: Arial, sans-serif; }
.reading-bionic strong { font-weight: bold; }
#stage, #reading-line { transform-origin: center center; }
.mirror-horizontal #stage, .mirror-horizontal #reading-line { transform: scaleX(-1); }
.mirror-vertical #stage, .mirror-vertical #reading-line { transform: scaleY(-1); }
.mirror-horizontal.mirror-vertical #stage, .mirror-horizontal.mirror-vertical #reading-line { transform: scale(-1, -1); }
#reading-line { position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; margin-top: -35px; color: #fff; text-align: left; pointer-events: none; }
#reading-line span { display: inline-block; font-size: 60px; line-height: 70px; }
#viewer-diagnostics { display: none; }
#status { margin-left: 8px; color: #fff; }
#agent { max-width: 700px; margin-top: 4px; font: 11px Arial, sans-serif; color: #fff; word-wrap: break-word; }

.controller { padding: 24px; color: #111; background: #eee; }
.controller h1 { font-size: 28px; }
.panel { padding: 20px; background: #fff; border: 1px solid #bbb; }
.panel button { margin: 4px; }
.panel label { display: inline-block; margin: 4px; }
.editor-layout { display: table; width: 100%; table-layout: fixed; }
.editor-panel, .monitor-panel { display: table-cell; vertical-align: top; width: 50%; padding: 16px; }
.editor-panel { padding-left: 0; }
.editor-panel label { display: block; margin: 8px 0; }
.editor-panel textarea { display: block; width: 100%; font: 20px Arial, sans-serif; padding: 8px; }
.controls { margin: 12px 0; }
.controls label { display: inline-block; margin-right: 12px; }
.controls input { width: 90px; }
.monitor-panel h2 { margin-top: 0; }
#preview { position: relative; height: 360px; overflow: hidden; color: #fff; background: #000; border: 4px solid #555; }
#preview-stage { position: absolute; top: 0; left: 0; width: 1024px; height: 748px; overflow: hidden; transform-origin: top left; }
#preview-script { position: relative; width: 1024px; text-align: center; white-space: pre !important; word-wrap: normal !important; overflow-wrap: normal !important; word-break: keep-all !important; -webkit-hyphens: none !important; hyphens: none !important; padding: 0 5% 374px; }
#preview-line { position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; margin-top: -35px; color: #fff; pointer-events: none; }
#preview-line span { font-size: 60px; line-height: 70px; }
.mirror-preview #preview-stage { transform-origin: top left; }
.hint { color: #555; font-size: 14px; }