:root{--handle-bg:#dfdfdf33;--handle-bg-hover:#dfdfdfcc;--handle-size:4px}body{font-size:90%}.subheader{border-bottom:1px solid var(--silver);margin-bottom:0;padding:0 1rem}.app-grid{grid-template-rows:1fr 1fr 1fr;grid-template-areas:"markdown""html""preview";height:calc(100vh - 80px);display:grid}#markdown,#html,#preview{flex-direction:column;display:flex}#markdown,#html{border-bottom:1px solid var(--grey100)}#markdown{border-right:1px solid var(--grey100);grid-area:markdown;position:relative}#markdown:after{background-color:var(--handle-bg);content:"";cursor:ns-resize;height:var(--handle-size);z-index:10;width:100%;position:absolute;inset:auto auto 0 0}#markdown:hover:after{background-color:var(--handle-bg-hover)}#html{grid-area:html}#markdown-editor,#html-editor{height:100%}#preview{grid-area:preview;min-height:20vh;max-height:60vh;position:relative}#preview>.subheader:before{background-color:var(--handle-bg);content:"";cursor:ns-resize;height:var(--handle-size);z-index:10;width:100%;margin-left:-1rem;position:absolute;top:0}#preview>.subheader:hover:before{background-color:var(--handle-bg-hover)}#preview-content{height:calc(100% - 61px);padding:0 1rem;overflow-y:auto}#preview-content h1,#preview-content h2,#preview-content h3,#preview-content h4,#preview-content h5,#preview-content h6,#preview-content hr,#preview-content ol,#preview-content p,#preview-content pre,#preview-content table,#preview-content ul{margin-bottom:.75em}#preview-content h1{font-size:1.75em}#preview-content h2{border:none;padding:0}#preview-content table{border-spacing:0;width:100%}#preview-content table,#preview-content table th{border-bottom:1px solid var(--grey200)}#preview-content table td,#preview-content table th{padding:.5em 4px}#preview-content table tbody tr:nth-child(2n){background-color:var(--silver)}#preview-content ol,#preview-content ul{margin-left:1em}#preview-content blockquote{border-left:1px solid var(--black);padding-left:.5rem}#preview-content code{color:var(--pink);word-break:break-word;padding:0 2px;font-family:monospace;font-size:1rem;display:inline-block}#preview-content pre{background-color:var(--silver);width:100%;padding:.5rem}#preview-content pre code{color:var(--black);font-size:.875rem}@media screen and (width>=48rem){body{font-size:100%}.app-grid{grid-template:"markdown html"2fr"preview preview"1fr/1fr 1fr;height:calc(100vh - 57px)}.header,.subheader{align-items:center;display:flex}#preview{max-height:80vh}#markdown:after{background-color:var(--handle-bg);content:"";cursor:ew-resize;height:100%;width:var(--handle-size);z-index:10;position:absolute;inset:0 0 auto auto}#markdown:hover:after{background-color:var(--handle-bg-hover)}}