:root{--tn-text: #0D2B3E;--tn-dark: rgb(34, 39, 46);--tn-dark-50: rgba(34, 39, 46, .5);--tn-dark-20: rgba(34, 39, 46, .2);--tn-light: #ffffff;--tn-light-50: rgba(255, 255, 255, .5);--tn-light-20: rgba(255, 255, 255, .2);--tn-primary: #3d79fc;--tn-primary-50: rgba(61, 121, 252, .5);--tn-primary-20: rgba(61, 121, 252, .2);--tn-notepad-lines: repeating-linear-gradient(var(--tn-light), var(--tn-light) 25px, var(--tn-primary) 26px, var(--tn-primary) 26px);--tn-notepad-lines-dark: repeating-linear-gradient(var(--tn-dark), var(--tn-dark) 25px, rgba(255, 255, 255, .3) 26px, rgba(255, 255, 255, .3) 26px);--tn-logo-background: repeating-linear-gradient(var(--tn-light), var(--tn-light) 8px, var(--tn-primary) 9px, var(--tn-primary) 9px);--tn-logo--background-dark: repeating-linear-gradient(var(--tn-dark), var(--tn-dark) 8px, var(--tn-light) 9px, var(--tn-light) 9px);--tn-font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}html,body{padding:0;margin:0}body{font-family:var(--tn-font-family);background-color:var(--tn-light);box-sizing:border-box;padding:84px 32px 32px;display:flex;justify-content:center;flex-wrap:wrap;overflow:auto;color:var(--tn-text)}body.dark{background-color:var(--tn-dark)}::selection{background-color:#0000ff1a}body.dark ::selection{background-color:#ffffff26}#app{width:100%}nav{padding:24px 32px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:fixed;display:flex;z-index:1000;top:0;left:0;right:0;background:var(--tn-light-50);margin-bottom:24px;align-items:center;justify-content:space-between;transition:padding .5s,box-shadow .5s}nav.compact{padding:12px 32px;box-shadow:0 1px var(--tn-dark-20)}nav .logo{flex:0 0 auto;font-size:16px;display:flex;align-items:center}nav .logo .mark{display:block;width:36px;height:36px;box-shadow:0 -1px var(--tn-primary-50);position:relative;background:var(--tn-logo-background)}body.dark nav{background:var(--tn-dark-50)}body.dark nav.compact{box-shadow:0 1px var(--tn-light-20)}body.dark nav .logo .mark{box-shadow:0 -1px var(--tn-light-50);background:var(--tn-logo--background-dark)}nav .logo .type{margin-left:12px;color:var(--tn-primary)}body.dark .logo .type{color:var(--tn-light)}nav .mode-switch{flex:none;border:none;margin:0;width:auto;height:auto;text-align:center;vertical-align:middle;font-size:14px;border-radius:32px;padding:6px;cursor:pointer;background-color:var(--tn-primary);color:var(--tn-light);transition:all .2s;box-shadow:0 0 0 0 transparent;outline:none}nav .mode-switch svg{width:20px;height:20px;vertical-align:middle;fill:snow}nav .mode-switch:hover{box-shadow:0 0 0 4px var(--tn-primary-20)}body.dark nav .mode-switch{background-color:var(--tn-light)}body.dark nav .mode-switch:hover{box-shadow:0 0 0 4px var(--tn-light-20)}body.dark nav .mode-switch svg{fill:var(--tn-dark)}#notepad-container{max-width:680px;position:relative;height:auto;box-sizing:border-box;background:var(--tn-notepad-lines);padding:0 26px 26px;margin:0;border:none;outline:none;font-size:18px;line-height:26px;vertical-align:baseline;font-family:var(--tn-font-family);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;margin-inline:auto;color:var(--tn-text)}#notepad-container:focus,#notepad-container:active,#notepad-container:hover{outline:none}body.dark #notepad-container{background:var(--tn-notepad-lines-dark);color:var(--tn-light)}.character-count{font-size:14px;line-height:14px;opacity:.5;position:fixed;padding:4px 8px;border-radius:14px;background-color:var(--tn-dark-20);bottom:32px;right:32px}body.dark .character-count{color:var(--tn-light);opacity:.65;background-color:var(--tn-light-20)}.visually-hidden{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}