@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400;1,600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap');

:root{font-family:'DM Sans',sans-serif;color:#343d34;background:#f0f4ee;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #658164;outline-offset:4px}header{height:100px;margin:0 5%;border-bottom:1px solid #dedfd5;display:flex;align-items:center;gap:38px}.brand{font-family:Lora,Georgia,serif;font-size:29px;font-weight:600;letter-spacing:-1.2px;text-decoration:none;color:#374437;white-space:nowrap}.brand-icon{font-family:Georgia;font-weight:400;font-size:30px;vertical-align:-1px;margin-right:9px}.brand-dot{color:#8c9c6e}.tagline{font-size:9px;letter-spacing:2px;color:#636c5b}.header-actions{margin-left:auto;display:flex;gap:23px;align-items:center}#save-status{font-size:11px;color:#636c5b}#save-status:before{content:'✓';margin-right:6px}.icon-button{background:none;border:0;font-size:23px}.focus-button{background:transparent;border:1px solid #d5d9cb;border-radius:6px;padding:10px 14px;font-size:11px;display:flex;gap:8px}main{max-width:1320px;margin:48px auto 0;padding:0 48px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px}.notebook-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#616b57}h1{font:400 26px Lora,Georgia,serif;margin:9px 0 0;letter-spacing:-.7px}.text-button{background:none;border:0;font-size:11px;color:#6d795f}.toolbar{height:55px;display:flex;align-items:center;gap:17px;border:1px solid #dedfd3;border-radius:8px 8px 0 0;background:#fafaf5;padding:0 20px}.toolbar-group{display:flex;align-items:center;gap:9px}.toolbar-label{font-size:10px;color:#646b59;margin-right:3px}.swatch{width:18px;height:18px;border:1px solid #d9d9cd;border-radius:50%;padding:0}.swatch.selected{outline:1px solid #687b59;outline-offset:3px}.cream,[data-color=cream]{--paper:#fffdf4;background-color:var(--paper)}.white,[data-color=white]{--paper:#ffffff;background-color:var(--paper)}.sage,[data-color=sage]{--paper:#edf1e6;background-color:var(--paper)}.rose,[data-color=rose]{--paper:#f7eae5;background-color:var(--paper)}.blue,[data-color=blue]{--paper:#eaf0f3;background-color:var(--paper)}.divider{width:1px;height:18px;background:#e2e4d9}.tool{border:0;background:none;padding:5px 0;font-size:16px;color:#66715f;display:flex;align-items:center;gap:7px}.tool span{font-size:10px}.tool.active{color:#52664a}.toolbar-end{margin-left:auto;font-size:8px;letter-spacing:1.5px;color:#6a715f}.paper{position:relative;min-height:588px;box-shadow:0 7px 12px #4d54360a,0 1px 2px #4d54361a;border:1px solid #deded1;border-top:0;border-radius:0 0 4px 4px;transition:background-color .2s}.paper.bound:before{content:'';position:absolute;left:43px;top:0;bottom:0;width:1px;background:#dbb6a98c}.rings{display:none;position:absolute;left:-12px;top:52px;bottom:35px;width:25px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 34px,#969d8c 35px,#d9dcd1 37px,#929b87 39px,transparent 41px,transparent 51px);border-radius:8px}.bound .rings{display:block}.paper-content{padding:30px 35px 18px 70px}.page-meta{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.8px;color:#6d705c}#title{width:100%;display:block;border:0;background:transparent;font:400 29px Lora,Georgia,serif;color:#4c5142;margin:30px 0 22px;padding:0;outline:none}#title::placeholder{color:#7e806e}#writing{resize:vertical;width:100%;min-height:377px;display:block;border:0;border-radius:0;background:transparent;font:16px/32px Lora,Georgia,serif;color:#4d5347;outline:none;padding:0 0 0;overflow:auto}#writing::placeholder{color:#777b68;font-style:italic}.ruled #writing{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,#b4bca035 31px,#b4bca035 32px);background-attachment:local}.paper-footer{display:flex;justify-content:space-between;font-size:9px;color:#69725e;margin-top:26px}.paper-footer span:nth-child(2){font-size:7px;letter-spacing:2px}.below-paper{display:flex;justify-content:space-between;color:#68725e;font-size:9px;margin-top:18px}.below-paper i{display:inline-block;width:5px;height:5px;background:#8fa17a;border-radius:50%;margin-right:5px}.below-paper>span:last-child{font-family:Lora,serif;font-style:italic}aside{padding-top:4px}.music-card{border:1px solid #dce0d2;border-radius:9px;padding:22px;background:#f0f2e8}.music-top{display:flex;justify-content:space-between;align-items:center}.music-top .eyebrow{font-size:8px;letter-spacing:1.4px}h2{font:400 23px Lora,Georgia,serif;margin:17px 0 10px;letter-spacing:-.6px}.music-card>p{font-size:11px;color:#626e56;line-height:1.8;margin:0 0 23px}.playlist-art{height:198px;background:#b8c0a7;position:relative;overflow:hidden;border-radius:4px;isolation:isolate}.playlist-art:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(40deg,#ffffff04 0,#ffffff04 1px,#00000003 1px,#00000003 3px);z-index:3}.moon{position:absolute;top:23px;right:34px;width:45px;height:45px;border-radius:50%;background:#e7e4ca}.mountain{position:absolute;width:320px;height:180px;border-radius:50%;background:#8f9e83;transform:rotate(-23deg);left:-80px;top:110px}.mountain.two{background:#62765e;left:40px;top:137px;transform:rotate(25deg)}.art-label{position:absolute;left:20px;top:34px;font:25px/1.2 Lora,serif;color:#faf5e1;z-index:2;letter-spacing:-1px}.art-label small{display:block;font:6px 'DM Sans',sans-serif;letter-spacing:1.8px;margin-top:55px}.playlist-info{margin:18px 0 16px}.playlist-info>span{font-size:12px;font-weight:600}.playlist-info small{display:block;font-size:10px;color:#657257;margin-top:6px}.music-note{text-align:center;margin-top:17px;color:#657358;font:italic 10px Lora,serif}.small-note{text-align:center;margin-top:30px;color:#68725e}.small-note>span{font:40px Georgia;color:#b1baa3}.small-note p{font:italic 12px/1.8 Lora,serif;margin:0 0 15px}.small-note small{font-size:7px;letter-spacing:1.8px}footer{max-width:1224px;margin:42px auto 25px;display:flex;justify-content:space-between;color:#68725e;font-size:9px}#exit-focus{position:fixed;right:24px;bottom:24px;background:#f4f5ed;border:1px solid #d5d9cb;border-radius:7px;padding:12px;font-size:11px}.focused header,.focused aside,.focused .notebook-heading,.focused .toolbar,.focused footer,.focused .below-paper{display:none}.focused main{display:block;max-width:880px;margin-top:35px}.focused .paper{border-top:1px solid #deded1}.sans #writing,.sans #title{font-family:'DM Sans',sans-serif}dialog{border:1px solid #d9dece;border-radius:12px;max-width:390px;background:#fafbf4;padding:25px;color:#48553f}dialog::backdrop{background:#26352155}dialog p{font-size:13px;line-height:1.7}dialog>div{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}dialog button{padding:9px;border:1px solid #d5dacb;border-radius:5px;background:#eef1e7}#confirm-new{background:#536a45;color:white}@media(min-width:1500px){main{margin-top:65px}}@media(max-width:1050px){header{gap:20px}.tagline{display:none}main{padding:0 28px;gap:25px;grid-template-columns:minmax(0,1fr) 235px}.toolbar{gap:12px;padding:0 14px}.toolbar-end{display:none}.paper-content{padding-right:26px;padding-left:58px}footer{margin:35px 28px}}@media(max-width:760px){header{height:78px;margin:0 22px}.brand{font-size:25px}.header-actions{gap:12px}#save-status{display:none}main{display:block;margin-top:30px;padding:0 22px}h1{font-size:21px}.notebook-heading{gap:10px}.toolbar{gap:12px}.toolbar-label{display:none}.toolbar-group{gap:8px}.tool span{font-size:9px}.paper-content{padding-left:40px;padding-right:20px}.paper.bound:before{left:27px}.rings{left:-9px;width:19px}#title{font-size:24px}.paper-footer span:nth-child(2){display:none}.below-paper{font-size:8px}aside{margin:32px auto 0;max-width:400px}.music-card{padding:22px}.playlist-art{height:165px}.small-note{display:none}footer{font-size:8px;gap:10px}.focused main{padding:0 18px} .focus-button{padding:9px}.playlist-art .mountain{width:450px}.playlist-art .moon{right:60px}}

[hidden]{display:none!important}

/* Small labels retain their quiet scale with clearer ink. */
.tagline,.page-meta,.toolbar-label,.toolbar-end,.paper-footer,.below-paper,footer{font-weight:500}
.music-card>

.sound-mark{color:#536a45;font-size:22px}.sound-label{display:block;font-size:11px;color:#5c6d4d;margin:0 0 7px}#sound-select{width:100%;padding:10px;border:1px solid #c7cfbb;border-radius:5px;background:#fafbf4;color:#43533b;font:12px "DM Sans",sans-serif}#sound-player{display:block;width:100%;height:40px;margin-top:16px}.music-card>.sound-status{font-size:11px;line-height:1.7;color:#5c6d4d;margin:12px 0 0}.sound-credit{display:block;color:#536a45;font-size:10px;margin-top:8px}#sound-select:focus-visible{outline:2px solid #658164;outline-offset:3px}

/* A quieter notebook, with the app name at the right and optional corner audio. */
header{justify-content:space-between;gap:20px}.header-actions{margin-left:0}.brand{margin-left:auto;font-size:27px;letter-spacing:-.7px}
main{display:block;max-width:960px;margin:36px auto 0;padding:0 40px 110px}.notebook-heading{margin-bottom:22px}.notebook-heading h1{margin:0;font-size:23px}.paper-footer span:nth-child(2){font-size:9px;letter-spacing:normal}.below-paper{justify-content:flex-start}
.corner-player{position:fixed;right:20px;bottom:18px;z-index:10;width:112px;border:1px solid #cdd3c3;border-radius:9px;background:#f4f6ed;box-shadow:0 3px 18px #37443712;font-size:11px;color:#43533b}
.corner-player summary{cursor:pointer;padding:12px 14px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}.corner-player summary::-webkit-details-marker{display:none}.corner-player summary:focus-visible{outline:2px solid #658164;outline-offset:3px;border-radius:8px}.corner-player[open]{width:280px}.corner-player[open] summary{border-bottom:1px solid #dce1d2}.player-panel{padding:12px}.player-panel .sound-label{font-size:10px}.player-panel #sound-select{padding:7px;font-size:11px}.player-panel #sound-player{height:32px;margin-top:10px}.player-panel .sound-status{font-size:10px;line-height:1.5;margin:8px 0 0;color:#5c6d4d}.player-panel .sound-credit{font-size:9px;margin-top:6px}
#exit-focus{right:auto;left:20px;bottom:18px;z-index:11}.focused main{padding-bottom:110px}.focused .corner-player{display:block}
@media(max-width:760px){header{gap:12px;margin:0 18px}.brand{font-size:22px}.header-actions{gap:8px}.focus-button span{display:none}.focus-button{font-size:16px}main{margin-top:25px;padding:0 22px 100px}.notebook-heading h1{font-size:21px}.corner-player{right:12px;bottom:12px}.corner-player[open]{width:min(280px,calc(100vw - 24px))}#exit-focus{left:12px;bottom:12px}}

.paper-footer span:nth-child(2){display:inline}

.brand{display:flex;align-items:center;flex-shrink:0}.brand img{display:block;width:220px;max-width:100%;height:auto}@media(max-width:760px){.brand img{width:170px}}@media(max-width:380px){.brand img{width:145px}}

/* Project library */
main{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;max-width:1260px;padding:0 40px 110px}.workspace{min-width:0}.library-sidebar{padding:2px 20px 20px 0;border-right:1px solid #dce0d2;max-height:calc(100vh - 160px);overflow:auto;position:sticky;top:24px}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:22px}.library-heading h2{font:500 15px 'DM Sans',sans-serif;letter-spacing:0;margin:0}.library-heading .text-button{font-size:10px;padding:5px 0}.project-group{margin-bottom:13px}.project-button{display:block;text-align:left;width:100%;background:transparent;border:0;padding:9px 5px;font-size:12px;font-weight:600;overflow-wrap:anywhere}.project-button:before{content:'\25B8';display:inline-block;margin-right:8px;color:#6b7d5d}.project-button[aria-expanded=true]:before{content:'\25BE'}.draft-list{border-left:1px solid #d3dac8;margin-left:9px;padding-left:9px;display:grid;gap:5px}.draft-button{display:block;width:100%;text-align:left;padding:9px 10px;border:1px solid transparent;background:transparent;border-radius:6px}.draft-button span{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.draft-button small{display:block;font-size:9px;color:#657257;margin-top:5px}.draft-button:hover{background:#edf0e6}.draft-button.selected{background:#e6ecdd;border-color:#cbd6bf;color:#3f5733}.library-note{font-size:10px;color:#68725e;margin-top:24px}.project-title{min-width:0;display:flex;align-items:center;gap:12px}.project-title h1{overflow-wrap:anywhere}.project-title .text-button{font-size:10px}.draft-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}.new-draft-button{font-size:11px;background:#536a45;border:1px solid #536a45;color:white;border-radius:5px;padding:9px 12px}.new-draft-button:hover{background:#425938}#project-form label{display:block;font-size:12px;margin:20px 0 8px}#project-input{width:100%;font:14px 'DM Sans',sans-serif;padding:10px;border:1px solid #c7cfbb;background:white;border-radius:5px;color:#343d34}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.dialog-actions button[type=submit]{background:#536a45;color:white}#project-dialog{width:min(390px,calc(100vw - 32px))}#save-status{max-width:310px}.below-paper{line-height:1.7}.focused .library-sidebar{display:none}
@media(max-width:1050px){main{padding-left:24px;padding-right:24px;grid-template-columns:185px minmax(0,1fr);gap:24px}.notebook-heading{flex-wrap:wrap;gap:12px}.project-title h1{font-size:21px}}
@media(max-width:760px){main{display:block;padding:0 22px 100px}.library-sidebar{position:static;max-height:260px;border-right:0;border-bottom:1px solid #dce0d2;padding:0 0 15px;margin-bottom:24px}.library-heading{margin-bottom:10px}.library-note{margin:12px 0 0}.draft-list{grid-template-columns:repeat(2,minmax(0,1fr))}.notebook-heading{align-items:center}.draft-actions{gap:10px}.project-title h1{font-size:21px}.focused main{display:block}#save-status{display:block;font-size:9px;max-width:120px}.brand img{width:145px}}

/* Centered branding and quieter controls. */
:root{background:#f0f4ee}header{display:grid;grid-template-columns:1fr auto 1fr;position:relative}.header-actions{grid-column:1;grid-row:1;justify-self:start}.brand{grid-column:2;grid-row:1;margin:0;justify-self:center}.focus-corner{position:fixed;left:20px;bottom:18px;z-index:11;width:38px;height:38px;display:grid;place-items:center;background:#f4f6ed;border:1px solid #cdd3c3;border-radius:8px;color:#43533b;font-size:20px}.focused .focus-corner{display:none}#exit-focus{font-size:11px;padding:10px;background:#f4f6ed}.below-paper:has(#storage-note:empty){display:none}.below-paper{color:#874c35}.below-paper i{display:none}.draft-row{display:flex;align-items:center;gap:3px}.draft-button{min-width:0;flex:1}.draft-delete{border:0;background:transparent;color:#7b6b59;font-size:19px;padding:7px;border-radius:4px;line-height:1}.draft-delete:hover{background:#f2e5df;color:#8a3f2f}.delete-action{color:#874c35!important}.project-title{flex-wrap:wrap;gap:9px}.project-title .delete-action{font-size:10px}.new-draft-button{white-space:nowrap}.library-note{margin-bottom:0}#confirm-delete{background:#874c35;color:white!important;border-color:#874c35}
@media(max-width:760px){header{margin:0 18px;height:78px;gap:5px}.brand img{width:170px}.header-actions{gap:0}.focus-corner{left:12px;bottom:12px}.draft-actions{flex-wrap:wrap}.draft-list{grid-template-columns:1fr}.project-title{width:100%}}@media(max-width:380px){.brand img{width:145px}}

#exit-focus{width:38px;height:38px;font-size:20px;padding:0;display:grid;place-items:center;border-radius:8px}

/* Selection formatting and exports. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#font-family,#export-format{font:11px 'DM Sans',sans-serif;border:1px solid #d3d9c8;background:#fafbf6;color:#45543d;border-radius:5px;padding:7px;max-width:150px}.toolbar{height:auto;min-height:55px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:14px}.formatting-bar{display:flex;align-items:center;gap:5px;padding:8px 14px;border:1px solid #dedfd3;border-top:0;background:#fafaf5;flex-wrap:wrap}.formatting-bar button{border:1px solid transparent;border-radius:4px;background:transparent;color:#47563e;min-width:30px;padding:5px 7px;font-size:11px}.formatting-bar button:hover,.formatting-bar button[aria-pressed=true]{background:#e5ebdc;border-color:#cbd5bf}.formatting-bar .divider{margin:0 6px}#paper #writing,#paper #title{font-family:var(--writing-font,Lora,Georgia,serif)}#writing{white-space:pre-wrap;overflow-wrap:anywhere;resize:none;min-height:377px;cursor:text}#writing:empty:before{content:attr(data-placeholder);color:#777b68;pointer-events:none;font-style:italic}#writing p,#writing div{margin:0}#writing h2{font-family:inherit;font-size:23px;font-weight:700;line-height:32px;margin:16px 0;letter-spacing:normal}#writing h3{font-family:inherit;line-height:32px;margin:16px 0}#writing ul,#writing ol{margin:0;padding-left:26px}#writing blockquote{border-left:2px solid #bcc8b1;padding-left:15px;margin:0 0 0 5px}.focused .formatting-bar{display:none}.site-footer{max-width:none;margin:0;padding:20px 140px 82px;display:flex;justify-content:center;gap:24px;font-size:11px;color:#657257}.site-footer a{color:#52664a;text-underline-offset:3px}.site-footer span{font-family:Lora,Georgia,serif;font-style:italic}.header-actions{gap:8px}main{padding-bottom:35px}
@media(max-width:760px){header{height:110px;grid-template-columns:1fr auto 1fr;align-content:start;padding-top:18px;row-gap:8px}.header-actions{grid-column:1 / -1;grid-row:2;justify-self:center}.brand{grid-row:1}.site-footer{padding:25px 20px 90px;flex-direction:column;align-items:center;gap:10px}#font-family{max-width:145px}.formatting-bar{padding:7px;gap:3px}.focused main{padding-bottom:100px}}

.background-label{font-size:10px;color:#646b59}#background-color{font:11px "DM Sans",sans-serif;border:1px solid #d3d9c8;background:#fafbf6;color:#45543d;border-radius:5px;padding:7px}#background-color:focus-visible{outline:2px solid #658164;outline-offset:3px}

:root{background:#f0f4ee}.site-footer{flex-direction:column;align-items:center;gap:8px}

/* White means neutral RGB(255,255,255), including the adjacent editor chrome. */
#paper.white{--paper:#ffffff;background-color:#ffffff;background-image:none}
.workspace:has(#paper.white) .toolbar,.workspace:has(#paper.white) .formatting-bar{background-color:#ffffff}
#paper.white .paper-content{background-color:transparent}