.content-wrapper{max-width:40rem;margin:0 auto;padding:1rem;position:relative}.note-column{position:absolute;left:calc(100% + 2rem);top:0;width:17rem}.note-panel{position:absolute;left:0;width:100%;box-sizing:border-box;max-height:80vh;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:4px;padding:.75rem;z-index:100;box-shadow:0 2px 8px #00000026}.note-hint{position:fixed;left:calc(50% + 22rem);top:50%;transform:translateY(-50%);width:17rem;box-sizing:border-box;border:1px solid #ddd;border-radius:4px;padding:.75rem;background:#fff}@media(max-width:81rem){.content-wrapper{display:flex;align-items:flex-start;max-width:none;margin:0}.content-wrapper>main{flex:1;min-width:0}.note-column{position:relative;left:auto;top:auto;flex-shrink:0;margin-left:2rem}.note-hint{position:static;transform:none;width:auto}}@media(max-width:640px){.page-root{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.content-wrapper{flex:1;display:block;overflow-y:auto;padding:1rem 1rem 5rem}.note-column{position:fixed;left:0;right:0;bottom:0;width:100%;top:auto;margin-left:0;flex-shrink:unset;background:#fff;border-top:1px solid #ddd;border-radius:12px 12px 0 0;box-shadow:0 -2px 16px #0000001f;padding:.75rem 1rem;box-sizing:border-box;z-index:200;max-height:60vh;overflow-y:auto;transform:translateY(110%);transition:transform .25s ease}.note-column.drawer-open{transform:translateY(0)}.note-column .note-panel{position:static;top:auto;border:none;padding:0;box-shadow:none;max-height:none;overflow-y:visible;background:transparent;width:auto}.note-column .note-hint{position:static;transform:none;width:auto;border:none;padding:.25rem 0;background:transparent}}