/* An old writing desk: warm stone, linen, sand, walnut and terracotta. */
:root{--bg:#d6cfc6;--ink:#382d26;--green:#49382c;--line:#b5a592;--muted:#615246;--paper:#eee5d3;color-scheme:light}
body{background:var(--bg);font-size:15px}
.header{border-bottom:1px solid #a6a794;gap:40px}
.brand{display:inline-flex;align-items:center;gap:9px;color:#49382c;font-size:28px;letter-spacing:-1px}
.brand-logo{display:block;object-fit:contain;flex-shrink:0;width:52px;height:52px}
.brand-dot{color:#96523b;margin-left:-7px}
.header nav{font-size:13px;font-weight:500;gap:25px}
.header nav .active:after{height:3px;bottom:19px}
.header-note,.header-note span{color:#5c5249}
.little-dot,.status-dot{background:#635444}
.intro{padding-top:40px;padding-bottom:33px}
.intro h1{color:#382d26}
.intro h1 em{color:#87513b}
.eyebrow{color:#574a3e;font-size:11px}
.intro p{color:#504a44;font-size:14px}
.intro-foot,.desk-bottom>span{color:#584b3e}
.spark,.tiny-flower{color:#7b6136}
.workshop{max-width:1240px;grid-template-columns:310px 1fr;gap:26px}
.toolbox{background:#e9e0d2;border:1px solid #ada49b;box-shadow:0 3px 12px #3c342c0d}
.box-title{color:#3d3329;font-size:21px}
.box-title>span:first-child{color:#605245}
.tabs{border-color:#b0a69d;margin:0 12px;gap:2px}
.tabs button{color:#63594f;border-radius:6px 6px 0 0}
.tabs button span{font-size:12px;font-weight:500}
.tabs button.selected{color:#382d26;background:#c6ad90}
.tabs button.selected:after{background:#c6ad90;height:3px;left:0;right:0}
#options{scrollbar-color:#8c7e70 transparent}
.option-label{color:#473b2f;font-size:11px;letter-spacing:.7px;line-height:1.5}
.option-caption,.note-label,.upload-help{color:#5c534a;font-size:12px;line-height:1.65}
.swatch{border-color:#92887e;box-shadow:none}
.swatch.selected:after{border:2px solid #49382c}
.swatch.selected:before{color:#3c3126;text-shadow:0 1px 2px #fff;font-size:14px}
.pattern,.font-choice{border:1px solid #b0a79e;background:#f0e8dc;color:#453a2f;font-size:12px}
.pattern{font-size:21px}
.pattern small{font-size:11px}
.pattern.selected,.font-choice.selected{border:2px solid #8f4e38;background:#ead8c8;color:#512f23;font-weight:600}
.toolbox-bottom{background:#ddceba;border-color:#b5aa9f;color:#55483b;font-size:18px}
.writing-area{background:#c6ad90;border:1px solid #ada398;border-radius:12px;padding:19px 17px 20px}
.desk-top{color:#51483e;font-size:12px;margin-bottom:20px}
.desk-top button{color:#43382c;font-size:12px;font-weight:600;gap:7px}
.letter{border-color:#b7ab90;box-shadow:0 8px 20px #453b3127,0 1px 3px #453b3126}
.letter:before{opacity:.035}
.letter-top,.letter-mark{color:#605448;font-size:11px}
.letter-mark{font:16px Caveat,cursive}
.recipient-label{color:#5a5045;font-size:10px;letter-spacing:1px}
.letter input::placeholder,.letter textarea::placeholder{color:var(--letter-ink);opacity:.78}
.letter input:focus,.letter textarea:focus{outline:2px dashed #6c5946;outline-offset:5px}
.letter-bottom{border-color:#bcb9a2}
.letter-bottom>span:last-child{color:#5d5248;font-size:10px;letter-spacing:0}
.letter-bottom>span:first-child{color:#645342}
.floating-flower{color:#a47c37;text-shadow:none}
.desk-leaf{color:#796653}
.postcard-decoration{background:#eee5d3}
.postcard-decoration span{color:#584b3e;font-size:14px}
.stamp-decoration{color:#574737;border-color:#8c7865}
.desk-bottom{padding-top:7px}
.desk-bottom>span{font-size:18px}
.primary{background:#49382c;color:#fff5e4;font-size:13px;font-weight:500;padding:14px 19px;box-shadow:0 3px 7px #3d312420}
.primary:hover{background:#35271e;filter:none}
.secondary{color:#49382c;border-color:#8b7d6f;background:#e4d7c6;font-size:13px}
.how{border-color:#a6a794}
.how strong{color:#43392f;font-size:13px;font-weight:600}
.how p>span{color:#595149;font-size:12px}
.how-number{color:#6a5a4a}
.how-line{background:#b0a396}
footer{color:#5c5045;border-color:#a6a794}
footer .brand{color:#49382c;font-size:22px;gap:8px}
footer .brand-logo{width:36px;height:36px}
footer>span{font-size:19px}
footer button{font-size:12px;color:#4b3f33;text-decoration:underline;text-underline-offset:4px}
.heart{color:#934f3b}
.card-choice{background:#f0e5d5;border-color:#b0a79e;color:#473b2f}
.card-choice span{font:12px/1.5 'DM Sans',sans-serif;min-height:41px;gap:6px;padding:7px 3px 2px}
.card-choice.selected{border:2px solid #8f4e38;background:#ead8c8;box-shadow:none;padding:4px}
.card-choice b{color:#4e3f30;font-size:16px}
.card-choice .card-crop{filter:none!important}
.upload-card{border:2px dashed #7e6c59;background:#e6d4c1;color:#493c2f;min-height:134px}
.upload-card strong{font-size:13px;font-weight:600}
.upload-card small{color:#5b4c3e;font-size:12px}
.upload-card:disabled{opacity:.8}
.uploaded-gallery{grid-column:1/-1}
.upload-help{grid-column:1/-1}
.uploaded-thumb{background:#eee5d3;border-color:#aca094}
.uploaded-thumb>span{font-size:12px;color:#473b2f}
.uploaded-thumb button,.attached button{background:#eee5d3;color:#453a2e}
.note-label .seal-input{font-size:13px}
.seal-input,.share-field{background:#f0e5d5;border-color:#a69a8e;color:#42382d;font-size:13px}
.seal-input::placeholder{color:#665d53;opacity:1}
.remove-cards{color:#6b3e2e;font-size:12px}
.checkbox-label{font-size:13px}
.attached figcaption{color:#483b2e;font-size:17px}
.attached figcaption p{color:#4c4537;font-size:18px;border-color:#ada093}
.frame-ivory{background:#e9dfc8}
.option-preview{background:#e6d4c1}
.read-intro>p,.opening-status,.loading-letter{color:#594e42}
.envelope-name,.envelope-stamp{color:#4c3d2e}
dialog{background:#e9ddcb;border-color:#a3988c}
dialog::backdrop{background:#34281fa6}
.modal-subtitle,.about-text{color:#51483e;font-size:14px}
.close{color:#514437}
.toast{background:#49382c;color:#fff3df;font-size:14px}
button:focus-visible,a:focus-visible{outline:3px solid #79452f;outline-offset:4px}
.material-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.material-choice{padding:6px;border:1px solid #a1978d;border-radius:5px;background:#eee8d9;text-align:left;min-width:0;overflow:hidden}
.material-choice.selected{border:2px solid #8f4e38;padding:5px;background:#ead8c8}
.material-sample{display:block;height:54px;border:1px solid #91836a66;box-shadow:inset 0 1px 2px #fff7,0 2px 3px #43372a1f;background-size:180px;background-blend-mode:multiply;border-radius:2px;margin-bottom:7px}
.material-choice strong{display:block;font-size:12px;color:#49382c;font-weight:600;line-height:1.5}
.material-choice small{display:block;font-size:10px;color:#5c5146;line-height:1.45;margin-top:3px}
.material-choice.selected strong:after{content:' ✓';color:#49382c}
.letter:before{background-image:var(--paper-texture);background-size:420px;opacity:.22;mix-blend-mode:multiply;border-radius:inherit}
.letter{box-shadow:inset 0 1px 1px #fff7,inset 0 -2px 2px #80715521,0 8px 20px #453b3127,0 1px 3px #453b3126}
.lined{background-image:repeating-linear-gradient(transparent 0 32px,#77655355 32px 33px,transparent 33px 34px)}
.grid-paper{background-image:linear-gradient(#76624f3d 1px,transparent 1px),linear-gradient(90deg,#76624f3d 1px,transparent 1px)}
.dotted{background-image:radial-gradient(#67544080 1px,transparent 1.2px)}
.floral{background-color:var(--paper)}
.env-front:after,.env-flap:after,.env-back:after,.env-letter:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-image:var(--envelope-texture);background-size:230px;mix-blend-mode:multiply;opacity:.58}
.env-letter:after{background-image:var(--paper-texture);opacity:.22}
.env-front{border-bottom:2px solid #61524366}
.env-back{box-shadow:0 12px 25px #44382b40,0 2px 2px #3c322855}
.env-flap{background-color:color-mix(in srgb,var(--env) 80%,#f1e8d3)}
.envelope-materials .material-sample{border-radius:1px;box-shadow:0 3px 0 #9b927e,0 5px 3px #43372a24}
.paper-materials .material-sample{background-size:230px;background-color:#eee5d3!important;background-blend-mode:soft-light}
.env-front{filter:drop-shadow(0 -1px 1px #45382a55);box-shadow:inset 0 -2px 2px #52463933}
.env-flap{filter:drop-shadow(0 3px 2px #45382a66)}
.env-flap:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L50 99L100 0' fill='none' stroke='%23434f37' stroke-opacity='.5' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.env-lining{box-shadow:inset 0 3px 10px #372b1e44;background-image:repeating-linear-gradient(45deg,#6d574133 0 1px,transparent 1px 7px);background-size:auto;background-blend-mode:normal}
.envelope-stripes .env-front,.envelope-stripes .env-flap{background-image:repeating-linear-gradient(45deg,transparent 0 10px,#6b533b38 10px 13px,transparent 13px 18px)}
.envelope-dots .env-front,.envelope-dots .env-flap{background-image:radial-gradient(#59463270 1.6px,transparent 1.9px);background-size:15px 15px}
.envelope-botanical .env-front,.envelope-botanical .env-flap{background-size:35px 41px}
@media(max-width:720px){.material-choice strong{font-size:12px}.material-choice small{font-size:10px}.material-sample{height:60px}.option-section:has(.material-grid){grid-column:1/-1}.material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Remove the host's injected promotional overlay from the public experience. */
#nl-badge-frame{display:none!important;visibility:hidden!important;pointer-events:none!important}
@media(min-width:1450px){.workshop{max-width:1300px;grid-template-columns:320px 1fr}}
@media(max-width:1050px){.header{gap:25px}.brand{font-size:25px}.workshop{grid-template-columns:280px 1fr;gap:18px}.writing-area{padding:17px 12px}.paper-wrap{padding-right:20px}.desk-bottom>span{max-width:170px}}
@media(max-width:720px){.header{height:auto;min-height:85px;flex-wrap:wrap;gap:0;padding:11px 18px}.header .brand{font-size:25px;gap:6px}.brand-logo{width:43px;height:43px}.header nav{gap:19px;height:32px}.header nav button,.header nav button:last-child{font-size:12px;max-width:none;white-space:nowrap}.intro{padding:28px 18px}.intro p{font-size:14px}.eyebrow{font-size:10px}.intro h1{font-size:40px}.intro-foot{font-size:21px}.workshop{display:flex;padding:0 14px;gap:21px}.writing-area{width:100%;padding:16px 12px 19px}.tabs button span{font-size:12px}#options{max-height:480px}.option-label{font-size:11px}.pattern small{font-size:10px}.choice-row .font-choice{font-size:12px}.desk-top{font-size:11px}.desk-bottom{align-items:center}.desk-bottom>span{max-width:130px;font-size:16px}.primary{font-size:12px;padding:13px 14px;gap:12px}.paper-wrap{padding-right:13px;padding-left:4px;min-height:420px}.letter{padding:25px 20px 15px}.letter-top>span:last-child{font-size:10px}.letter-mark{font-size:14px}.postcard-decoration{width:95px;right:-6px}.letter-bottom>span:last-child{font-size:9px}.card-choice span{font:13px/1.5 'DM Sans',sans-serif;min-height:42px}.upload-card{min-height:150px}.how{margin:30px 20px 0;padding:25px 0}.how strong{font-size:14px}.how p>span{font-size:13px}footer{gap:18px;padding:22px 20px}footer .brand{font-size:21px}.seal-settings .choice-row .font-choice{font-size:11px}}
@media(max-width:420px){.header{justify-content:center}.header nav{width:100%;justify-content:center;gap:25px}.header nav button,.header nav button:last-child{font-size:12px}.header .brand{font-size:26px}.intro h1{font-size:35px}.spark{font-size:25px}.intro p{font-size:13px}.option-caption{font-size:11px}.letter-top{gap:6px}.letter-mark{font-size:12px}.desk-bottom>span{max-width:110px}.primary{gap:8px;padding:13px 12px}}