#open-notebook{position:absolute;right:4%;top:155px;z-index:4;border:1px solid #2454bf40;border-radius:30px;padding:12px 18px;background:#fffdf5;color:#2454bf;font:500 12px Inter,sans-serif;cursor:pointer}
#notebook{position:absolute;z-index:4;top:210px;right:4%;width:clamp(420px,34vw,540px);padding:22px 26px 20px 34px;box-sizing:border-box;background:repeating-linear-gradient(transparent 0 31px,#2454bf09 31px 32px),#fffdf5;border:1px solid #ded8c9;border-radius:3px 13px 13px 3px;box-shadow:0 18px 45px #34312412;transform:rotate(1deg);color:#24365b;animation:open-notes .4s ease-out}
#notebook:before{content:'';position:absolute;left:18px;top:0;bottom:0;border-left:1px solid #f0967240}
#notebook header{display:flex;align-items:center;justify-content:space-between;font:10px Inter,sans-serif;text-transform:uppercase;letter-spacing:.1em}
#notebook h2{font:600 36px/1.1 Caveat,cursive;margin:12px 0}
#notebook p{font:12px/1.6 Inter,sans-serif;margin:10px 0}
#notebook button{background:none;border:0;color:#2454bf;cursor:pointer;font:11px Inter,sans-serif;padding:7px 0;text-decoration:underline;text-underline-offset:3px}
#notebook #close-notebook{font-size:25px;text-decoration:none;padding:0 5px}
#notebook section{margin:20px 0 0}
#notebook label{display:block;font:600 11px/1.4 Inter,sans-serif}
#notebook textarea{box-sizing:border-box;display:block;width:100%;min-height:70px;resize:vertical;overflow:hidden;background:transparent;border:0;border-bottom:1px solid #2454bf25;color:#2454bf;font:500 23px/1.25 Caveat,cursive;padding:8px 0}
#notebook textarea:focus{outline:2px solid #ff901f;outline-offset:3px}
#notebook section div{display:flex;gap:18px}
#notebook .notebook-help{font-size:10px;color:#697080}
#notebook #download-notebook{margin-top:10px;font-size:12px}
#notebook button:disabled{opacity:.5;cursor:wait}
#notebook[hidden],#open-notebook[hidden]{display:none}
@media(min-width:1051px){.notebook-open #conversation{margin-left:6%;width:calc(86% - clamp(420px,34vw,540px));max-width:850px}.notebook-open #answer{font-size:clamp(32px,3.5vw,48px)}.notebook-open #experience{min-height:1050px}}
@media(max-width:1050px){
 #open-notebook{position:fixed;top:auto;bottom:max(18px,env(safe-area-inset-bottom));right:18px;left:auto;padding:15px 20px;box-shadow:0 5px 25px #24365b25;max-width:calc(100% - 36px);font-size:13px;background:#fffdf5;z-index:6}
 #notebook{position:relative;top:auto;right:auto;left:auto;margin:0 auto;width:100%;max-width:680px;min-height:100svh;overflow:visible;transform:none;border:0;border-radius:0;box-shadow:none;padding:0 24px max(32px,env(safe-area-inset-bottom)) 34px;animation:none}
 #notebook header{position:sticky;top:0;background:#fffdf5;z-index:1;padding:16px 0;margin-bottom:25px;border-bottom:1px solid #ded8c9;min-height:60px;box-sizing:border-box}
 #notebook #close-notebook{font:500 13px Inter,sans-serif;min-height:44px;padding:8px}
 #notebook h2{font-size:40px}#notebook label{font-size:13px}#notebook textarea{font-size:26px;min-height:90px;resize:none}
 #notebook section{margin-top:26px}#notebook section button{min-height:44px;font-size:13px;padding:10px 4px}
 #notebook .notebook-help{font-size:12px}#notebook #download-notebook,#notebook #notebook-contact{min-height:44px;font-size:14px}
 .notebook-open .entry-nav,.notebook-open #conversation,.notebook-open #signature,.notebook-open #ink,.notebook-open .paper-grain,.notebook-open .corner-note,.notebook-open #replay,.notebook-open #skip,.notebook-open #open-notebook{display:none!important}
 .notebook-open #experience{min-height:100svh;background:#fffdf5}
 #conversation{padding-bottom:80px}
}
@keyframes open-notes{from{opacity:0;translate:20px 10px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#notebook{animation:none}}
