@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%}body{font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;line-height:1.4;color:#222;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:#b3d4fc}a{color:#428bca;text-decoration:none}a:hover{text-decoration:underline}.app{position:relative;width:100%;height:100%;min-height:100vh}.status-bar{position:fixed;top:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:10;background:#fff}.status-bar .logo{font-size:24px;font-weight:300;color:#b9b9b9;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none}.status-bar .logo:hover{color:#888;text-decoration:none}.pill-btn{display:inline-flex;align-items:center;height:25px;padding:0 20px;border:1px solid #e4e4e4;border-radius:80px;background:transparent;color:#b9b9b9;font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;line-height:25px;text-transform:lowercase;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease;white-space:nowrap}.pill-btn:hover{border-color:#bbb;color:#888}.pill-btn.active{background:#333;border-color:#333;color:#fff}.note-container{width:100%;height:100%;padding-top:70px;display:flex;justify-content:center}.note-area{width:600px;min-height:calc(100vh - 70px);padding:60px 20px 220px;border:none;outline:none;resize:none;font-family:Open Sans,sans-serif;font-size:18px;font-weight:400;line-height:1.6;color:#222;background:transparent}.note-area::placeholder{color:#ccc}.note-preview{width:600px;min-height:calc(100vh - 70px);padding:60px 20px 220px;font-family:Open Sans,sans-serif;font-size:18px;font-weight:400;line-height:1.6;color:#222}.note-preview h1{font-size:2em;font-weight:700;margin:.5em 0 .3em;line-height:1.2}.note-preview h2{font-size:1.5em;font-weight:700;margin:.5em 0 .3em;line-height:1.2}.note-preview h3{font-size:1.2em;font-weight:700;margin:.5em 0 .3em;line-height:1.3}.note-preview p{margin:.5em 0}.note-preview ul,.note-preview ol{padding-left:1.5em;margin:.5em 0}.note-preview li{margin:.2em 0}.note-preview a{color:#428bca}.note-preview strong{font-weight:700}.note-preview em{font-style:italic}.note-preview code{background:#f5f5f5;padding:2px 6px;border-radius:3px;font-size:.9em}.note-preview pre{background:#f5f5f5;padding:12px 16px;border-radius:4px;overflow-x:auto;margin:.5em 0}.note-preview pre code{background:none;padding:0}.note-preview blockquote{border-left:3px solid #e4e4e4;padding-left:16px;color:#666;margin:.5em 0}.note-preview hr{border:none;border-top:1px solid #e4e4e4;margin:1em 0}.bottom-bar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;z-index:10;pointer-events:none}.bottom-bar>*{pointer-events:auto}.bottom-left{display:flex;gap:8px}.bottom-right{display:flex;gap:8px;align-items:center}.save-flash{color:#2ecc71;font-size:14px;font-weight:400;opacity:0;transition:opacity .3s ease;margin-right:8px}.save-flash.visible{opacity:1}.modal-overlay{position:fixed;inset:0;background:#ffffffd9;display:flex;align-items:center;justify-content:center;z-index:100}.modal-card{background:#fff;border:1px solid #e4e4e4;border-radius:8px;max-width:640px;width:90%;padding:40px 48px;box-shadow:0 2px 20px #0000000f}.modal-card h3{font-size:18px;font-weight:700;margin:0 0 16px;color:#222}.modal-card h3:not(:first-child){margin-top:28px}.modal-card li{list-style:none;font-size:16px;line-height:1.8;color:#222}.modal-card .kbd{font-size:14px}.modal-card a{color:#428bca}.modal-footer{display:flex;justify-content:space-between;margin-top:32px}@media(max-width:700px){.note-area,.note-preview{width:100%;padding:30px 16px 180px}.status-bar{padding:0 16px}.bottom-bar{padding:12px 16px}.modal-card{padding:24px 20px}}