*,*:before,*:after{box-sizing:border-box}:root{color-scheme:dark light;font-family:system-ui,sans-serif}.button-loading{opacity:.5;cursor:wait;filter:grayscale(1)}svg{height:1em;width:1em;vertical-align:middle}.menu,.popover{background:canvas;padding:.5rem;border:1px solid}header{display:flex;align-items:center;gap:.75rem;padding:.25rem .75rem;border-bottom:1px solid}.header-info{flex-grow:1}.header-name input,.header-name h1{font:inherit;background:transparent;font-weight:700;border:1px solid transparent;border-radius:3px;padding:1px 4px;margin:0 0 0 -5px}.header-name input:hover{border-color:graytext}.header-icon{font-size:1.5rem}.header-buttons{display:flex;align-items:center;gap:.5ch}.row{display:flex;flex-grow:1}.col{display:flex;flex-direction:column;flex-grow:1;width:0}.col details[open]{flex-grow:1}details>:not(summary){position:absolute;inset:0;width:100%;height:calc(100% - var(--tab-height));top:var(--tab-height);border:none;border-top:1px solid;margin:0}#app{display:flex;flex-direction:column;width:100%;height:100dvh}body{margin:0}.row>:not(:last-child){border-right:1px solid}.col>:not(:last-child),.col>details:last-child:not(details[open]~details){border-bottom:1px solid}.col details{position:relative;overflow:hidden}html{--tab-height: 1.5rem}summary{height:var(--tab-height);padding:0 .25rem}textarea{resize:none}.console{overflow-y:auto}.console ul{margin:0;padding:0}.console li{display:block;border-bottom:1px solid color-mix(canvastext 30%,transparent);padding:.125rem .25rem}.unread-badge{background:accentcolor;color:accentcolortext;padding:2px 1ch;display:inline-block;vertical-align:1px;border-radius:9999px;line-height:1;font-size:.75rem}.count{border:1px solid graytext;background:canvas;padding:0 .75ch;border-radius:3px;position:relative;margin-left:1px;min-width:3.125ch;text-align:center}.count:before{content:"";border:inherit;background:inherit;position:absolute;top:50%;left:0;width:6px;height:6px;transform:translate(-50%,-50%) rotate(45deg);clip-path:polygon(0 0,1px 1px,2px 1px,calc(100% - 1px) calc(100% - 2px),calc(100% - 1px) calc(100% - 1px),100% 100%,0 100%)}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;flex-grow:1;padding-bottom:3rem}.menu{flex-direction:column;padding:2px}.menu>a,.menu>button{font:inherit;color:inherit;text-decoration:none;border:none;background:none;display:block;margin:0;padding:.125rem .25rem;cursor:pointer}:is(.menu>a,.menu>button)[data-active]{background:accentcolor;color:accentcolortext}.handle-input form{display:flex;align-items:center;gap:.5ch}.page-loading{position:fixed;z-index:101;top:0;left:0;right:0;height:3px;transform-origin:top;transform:scaleY(1);opacity:1;transition:1.5s transform ease-out,.3s .25s opacity ease-out}.page-loading.loaded{transform:scaleY(0);opacity:0}.page-loading.loaded:after{content:"";position:absolute;inset:0;background:accentcolor;transform:translate(0);animation:page-loading-gaslighting .4s ease-out}.page-loading .page-loading-gaslighting{width:100%;height:100%;background:accentcolor;transform:translate(-100%);animation:page-loading-gaslighting 60s cubic-bezier(0,1,.22,1)}@keyframes page-loading-gaslighting{0%{transform:translate(-100%)}to{transform:translate(0)}}.pen-list{display:block;margin:0;padding:0}.pen-list li{display:block;border:1px solid canvastext;margin-bottom:.5rem;padding:.25rem}.profile-pens{max-width:32rem;margin:0 auto;width:100%;padding:1rem}.pen-info{display:flex;justify-content:space-between}.page-error>*{margin:0}.page-error{gap:.25rem}.code-editor .cm-editor{width:100%;height:100%}.cm-activeLine{background-color:transparent!important}.textarea-fallback{padding-block:5px;padding-left:36px;background:linear-gradient(to right,light-dark(#f5f5f5,#333338) 29.5px,light-dark(#ddd,#333338) 0,light-dark(#ddd,#333338) 30px,transparent 0)}