/* Layout: a writing desk at dusk — ink-navy linen, one narrow column; washi sheets, airmail envelopes and postcards lie on it like objects. Single deliberate look (no dark/light swap): the desk is dark, every paper is light. */
:root{
  --desk:#1e2638; --desk-2:#273149; --desk-ink:#efe6d1; --desk-muted:#b6ab92;
  --ink:#2b2620; --ink-muted:#6d6152;
  --paper-card:#ece0c5; --paper-edge:#d2c19f; --cream-field:#f2e8d3;
  /* every paper you hold is cream washi in soft lamplight, never stark white: the fibres show through a cream wash,
     and the edges are soft (a little aged toward the rim, feathered against the desk) */
  --washi-wash:linear-gradient(170deg,rgba(241,231,208,.66),rgba(229,214,185,.66));
  --washi-paper:var(--washi-wash),var(--washi) center/1000px auto no-repeat,var(--paper-card);
  --red-paper:linear-gradient(170deg,rgba(186,72,62,.9),rgba(164,56,48,.9)),var(--washi) center/1000px auto no-repeat,var(--air-red);
  --env-paper:linear-gradient(170deg,rgba(243,233,211,.55),rgba(231,217,189,.55)),var(--envtex) center/cover,var(--env);
  /* (the washi sheet is drawn at its own size and centred, so its torn edges never show inside a box) */
  --paper-soft:inset 0 0 0 1px rgba(255,247,226,.24),inset 0 0 24px rgba(128,94,50,.14);
  --paper-soft-sm:inset 0 0 0 1px rgba(255,247,226,.22),inset 0 0 10px rgba(128,94,50,.13);
  --paper-halo:0 0 0 1px rgba(236,222,192,.12),0 0 5px rgba(236,222,192,.12);
  --air-red:#b2423a; --air-blue:#2d4c88; --gold:#c8a66a; --wax:#8e1f22;
  --env:#ede2c9; --env-in:#e2d6bd; --pm:#2a2622;
  --accent:#b2423a;
  --shadow:0 2px 4px rgba(6,10,20,.35),0 14px 30px rgba(6,10,20,.45);
  --f-display:"IM Fell English",Georgia,"Times New Roman",serif;
  --f-body:"EB Garamond",Garamond,Georgia,serif;
  --f-post:"Special Elite","Courier New",ui-monospace,monospace;
  --washi:url("assets/paper/washi.webp");
  --card:url("assets/paper/card.jpg");
  --envtex:url("assets/paper/envelope.jpg");
  --seal:url("assets/keeps/seal.webp");
  --seal-ken:url("assets/keeps/seal_ken.webp");
  --seal-under:url("assets/keeps/seal_under.webp");
  --tw-h:url("assets/keeps/twine_h.webp"); --tw-v:url("assets/keeps/twine_v.webp"); --tw-bow:url("assets/keeps/twine_bow.webp");
  --seal-ken-under:url("assets/keeps/seal_ken_under.webp");
  color-scheme:light;
}
html,body{height:100%}
body{color:var(--desk-ink);font-family:var(--f-body);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-color:var(--desk);
  background-image:radial-gradient(ellipse at 50% 0%,rgba(255,230,180,.07),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px),
    radial-gradient(ellipse at 50% 120%,rgba(0,0,0,.35),transparent 70%);
  background-attachment:fixed}
/* letters are written and read on an old mahogany writing desk */
body.wood{--desk:#2c0f09;--desk-2:#3d170e;background:#3a140c}
body.wood::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(255,200,150,.08),transparent 65%),
    linear-gradient(rgba(25,6,2,.18),rgba(25,6,2,.18)),
    url("assets/paper/mahogany-desk.webp") center/cover no-repeat}
body.wood{--desk-muted:#e3d3b4}
body.wood :is(.small,.quiet,h2,h3,.comp-head .mid,.btn.ghost){text-shadow:0 1px 3px rgba(20,4,0,.85)}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,.tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:620px;margin:0 auto;padding-inline:16px;padding-block:14px 48px}

/* masthead */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:6px 22px;border-bottom:1px solid rgba(200,166,106,.28);margin-bottom:22px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:46px;height:41px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.brand h1{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:2rem;margin:0;letter-spacing:.01em;color:var(--desk-ink)}
.chev{width:38px;height:26px;border-radius:2px;background:repeating-linear-gradient(-45deg,var(--air-red) 0 5px,var(--env) 5px 8px,var(--air-blue) 8px 13px,var(--env) 13px 16px);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.who{font-family:var(--f-post);font-size:.78rem;color:var(--desk-muted);text-align:right;line-height:1.5}

/* buttons & controls: paper objects carry dark ink */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--paper-edge);background:var(--washi-paper);color:var(--ink);border-radius:4px;padding:9px 18px;font-family:var(--f-body);font-size:1.02rem;letter-spacing:.01em;box-shadow:var(--paper-soft-sm),var(--paper-halo),0 1px 3px rgba(0,0,0,.3)}
.btn.primary{background:var(--red-paper);border-color:rgba(122,36,30,.75);box-shadow:inset 0 0 0 1px rgba(255,214,200,.12),inset 0 0 14px rgba(70,12,8,.22),0 1px 3px rgba(0,0,0,.35);color:#fbf3e3;font-variant:small-caps;letter-spacing:.06em;font-size:1.08rem}
.btn.danger{color:var(--air-red)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--desk-ink);padding-inline:6px}
.btn:disabled{opacity:.5;cursor:default}
.btn.block{width:100%;padding-block:14px;font-size:1.15rem}
.seg{display:inline-flex;border:1px solid var(--paper-edge);border-radius:4px;padding:3px;background:var(--washi-paper);box-shadow:var(--paper-soft-sm),var(--paper-halo),0 1px 3px rgba(0,0,0,.3)}
.seg button{border:0;background:none;padding:6px 14px;border-radius:2px;font-size:.98rem;color:var(--ink-muted)}
.seg button[aria-pressed="true"]{background:var(--air-blue);color:#f7efdd}
.field{flex:1 1 180px;min-width:0;border:1px solid var(--paper-edge);background:var(--cream-field);box-shadow:inset 0 1px 4px rgba(110,80,40,.1);color:var(--ink);border-radius:3px;padding:10px 12px;font:inherit}
.small{font-size:.9rem;color:var(--desk-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* stationery-card notes (name, passcode, notices) */
.note{background:var(--washi-paper);color:var(--ink);border-radius:4px;padding:20px 22px;display:grid;gap:12px;box-shadow:var(--paper-soft),var(--paper-halo),var(--shadow)}
/* the deckled edge: the paper sits on a layer behind the words, and only that layer is roughened */
.note,.sigbox{position:relative;isolation:isolate;background:none;box-shadow:none}
.note::before,.sigbox::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:4px;
  background:var(--washi-paper);box-shadow:var(--paper-soft),var(--paper-halo),var(--shadow);filter:url(#deckle)}
.note h2{font-family:var(--f-display);font-weight:400;font-size:1.45rem;margin:0}
.note p,.note .small{margin:0;color:var(--ink-muted)}
/* asking for the passcode only when something needs opening */
.unlock-ov{position:fixed;inset:0;z-index:70;display:grid;place-items:start center;overflow-y:auto;overscroll-behavior:contain;background:rgba(16,12,10,.72);padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}
.unlock-card{width:min(100%,420px)}
.unlock-ov>.note{margin-block:auto}   /* centred, and scrolls from the top when taller than the screen */
.note .linkish{color:var(--ink-muted);justify-self:start;opacity:1}
/* the recovery card, shown once after choosing a passcode, and printable on its own */
.rc-brand{font-family:var(--f-display);font-style:italic;font-size:1.05rem;color:var(--ink-muted)}
.note .rc-code{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:8px 26px;font-family:var(--f-post);font-size:clamp(1.2rem,6vw,1.6rem);letter-spacing:.1em;color:var(--ink);padding:18px 8px;margin:2px 0;border:1px dashed #b9a88a;background:#fbf6ea}
.note .btn.ghost{color:var(--ink-muted)}
.rc-input{font-family:var(--f-post);letter-spacing:.06em;text-transform:uppercase}
@media print{body *{visibility:hidden!important}#rc-card,#rc-card *{visibility:visible!important}#rc-card{position:absolute;left:0;top:0;width:100%;box-shadow:none}#rc-card::before{box-shadow:none;filter:none}#rc-card .rc-acts{display:none!important}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.quiet{padding:30px 8px;text-align:center;color:var(--desk-muted);font-style:italic}
.quiet .big{font-family:var(--f-display);font-style:normal;font-size:1.45rem;color:var(--desk-ink);display:block;margin-bottom:4px}

/* airmail envelope (mailbox arrival) */
.arrivals{display:grid;gap:14px;margin-bottom:26px}
.arrival{position:relative;display:block;width:100%;border:0;padding:0;background:none;text-align:left}
.mini-env{position:relative;aspect-ratio:1.6;max-width:100%;border-radius:3px;box-shadow:var(--shadow);
  background:repeating-linear-gradient(-45deg,var(--air-red) 0 12px,var(--env) 12px 19px,var(--air-blue) 19px 31px,var(--env) 31px 38px)}
.mini-env::before{content:"";position:absolute;inset:10px;background:var(--env);background-image:radial-gradient(ellipse at 30% 20%,rgba(255,243,218,.38),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(150,120,70,.10),transparent 60%)}
.mini-env .flapline{display:none}
.mini-env.is-card{background:var(--card) center/cover;border-radius:2px;transform:rotate(-1.2deg)}
.mini-env.is-card::before{display:none}
.mini-env.is-card::after{content:"POST CARD";position:absolute;left:0;right:0;top:7%;text-align:center;font-family:var(--f-display);letter-spacing:.45em;font-size:.8rem;color:#7d6f57}
.env-copy{position:absolute;inset:10px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 22px;color:var(--ink)}
.env-copy .lbl{font-family:var(--f-post);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.env-copy .from{font-family:var(--f-display);font-style:italic;font-size:clamp(1.7rem,7vw,2.3rem);line-height:1.05}
.env-copy .tap{font-size:.92rem;color:var(--ink-muted);font-style:italic;margin-top:2px}
.etiquette{position:absolute;left:24px;top:24px;background:var(--air-blue);color:#f4ecda;padding:5px 10px 4px;border-radius:2px;box-shadow:0 0 0 2px var(--env),0 0 0 3px var(--air-blue);text-align:center;line-height:1.05;z-index:1}
.etiquette b{display:block;font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.05rem}
.etiquette span{display:block;font-family:var(--f-post);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase}
.stamp{position:absolute;right:22px;top:20px;width:54px;height:64px;z-index:1;
  background:radial-gradient(circle,var(--env) 1.8px,transparent 2.3px) -1px -1px/6px 6px,var(--air-blue);transform:rotate(2deg)}
.stamp::before{content:"";position:absolute;inset:4px;background:var(--air-blue);box-shadow:inset 0 0 0 2px rgba(244,236,218,.75)}
.stamp i{position:absolute;inset:4px;display:grid;place-items:center;align-content:center;gap:1px;font-style:normal;color:#f4ecda;text-align:center;line-height:1}
.stamp i span{font-family:var(--f-post);font-size:.42rem;letter-spacing:.08em}
.stamp i b{font-family:var(--f-display);font-weight:400;font-size:1.15rem}
.stamp i em{font-size:.7rem;font-style:normal}
.postmark{position:absolute;right:58px;top:30px;width:74px;height:74px;border-radius:50%;border:1.5px solid rgba(42,38,34,.55);display:grid;place-items:center;text-align:center;font-family:var(--f-post);font-size:.6rem;line-height:1.25;color:rgba(42,38,34,.75);transform:rotate(-12deg);z-index:2}
.postmark::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(42,38,34,.32)}
.postmark b{font-size:.82rem}
.waves{position:absolute;right:120px;top:44px;width:80px;height:36px;z-index:2;background:repeating-linear-gradient(to bottom,transparent 0 6px,rgba(42,38,34,.4) 6px 7.5px);-webkit-mask:linear-gradient(90deg,transparent,#000 30%);mask:linear-gradient(90deg,transparent,#000 30%);transform:rotate(-12deg) skewX(-8deg);border-radius:40%}
.bundle{position:relative}
.bundle .arr-top{position:relative;z-index:2}
.bundle .arr-top .envf,.bundle .arr-top .mini-env{animation:none}
.bundle.tied .arr-top{transform:rotate(-.8deg)}
.under{position:absolute;inset:0;border-radius:2px;background:var(--envtex) center/cover,var(--env);box-shadow:0 1px 2px rgba(0,0,0,.4),var(--shadow);z-index:1}
.under.u1{transform:translate(8px,7px) rotate(2.2deg);filter:brightness(.94)}
.under.u2{transform:translate(-6px,13px) rotate(-2.6deg);filter:brightness(.88)}
.twine{position:absolute;inset:0;z-index:3;pointer-events:none;transform:rotate(-.8deg);filter:drop-shadow(0 1px 1px rgba(40,25,5,.4))}
/* the twine runs across the top letter, over the edges of the letters beneath, then turns round the back: its own fibers darken as it goes over each edge */
.twine .tw-h{position:absolute;left:-5px;right:-6px;top:82.6%;height:12px;border-radius:6px;background:var(--tw-h) left center/auto 100% repeat-x}
.twine .tw-v{position:absolute;top:-2px;bottom:-16px;left:17.8%;width:9px;border-radius:5px;background:var(--tw-v) center top/100% auto repeat-y}
.twine .tw-h::after,.twine .tw-v::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;filter:brightness(.38) saturate(.8)}
.twine .tw-h::after{-webkit-mask-image:linear-gradient(to right,#000 0,rgba(0,0,0,.45) 4px,transparent 6px,transparent calc(100% - 7px),rgba(0,0,0,.42) calc(100% - 5px),#000 100%);
  mask-image:linear-gradient(to right,#000 0,rgba(0,0,0,.45) 4px,transparent 6px,transparent calc(100% - 7px),rgba(0,0,0,.42) calc(100% - 5px),#000 100%)}
.twine .tw-v::after{-webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.42) 2px,transparent 4px,transparent calc(100% - 17px),rgba(0,0,0,.42) calc(100% - 15px),rgba(0,0,0,.55) calc(100% - 8px),#000 100%);
  mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.42) 2px,transparent 4px,transparent calc(100% - 17px),rgba(0,0,0,.42) calc(100% - 15px),rgba(0,0,0,.55) calc(100% - 8px),#000 100%)}
.twine .tw-bow{position:absolute;left:calc(17.8% + 4px);top:calc(82.6% + 6px);width:74px;aspect-ratio:182/118;transform:translate(-50%,-52%) rotate(-3deg);background:var(--tw-bow) center/contain no-repeat}
.arr-card{position:relative;aspect-ratio:1.5;border:8px solid #ece1c8;border-radius:2px;box-shadow:var(--shadow);transform:rotate(-1.2deg);overflow:hidden;background:#d8cdb4;container-type:inline-size}
.arr-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arr-cap{display:block;margin-top:12px;text-align:center;color:var(--desk-muted);font-style:italic}
.arr-cap .lbl{font-family:var(--f-post);font-style:normal;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.arr-cap b{font-family:var(--f-display);font-weight:400;font-size:1.3rem;color:var(--desk-ink)}
@media (prefers-reduced-motion:no-preference){.arrival .bundle{animation:bob 4s ease-in-out infinite}}
.arrival .count{position:absolute;right:22px;bottom:20px;font-family:var(--f-post);font-size:.75rem;background:var(--air-red);color:#fbf3e3;padding:2px 8px;border-radius:2px;z-index:3}
@media (prefers-reduced-motion:no-preference){.arrival .mini-env{animation:bob 4s ease-in-out infinite}
 @keyframes bob{50%{transform:translateY(-4px) rotate(-.5deg)}}}

/* the bundle of letters */
.section-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:34px 0 14px}
.section-h h2{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.55rem;margin:0}
.list{display:grid;gap:10px}
.tile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:var(--env-paper);color:var(--ink);border-radius:2px;padding:10px 14px 10px 10px;box-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 14px rgba(6,10,20,.3)}
.tile:nth-child(odd){transform:rotate(-.3deg)} .tile:nth-child(even){transform:rotate(.25deg)}
.tile .stub{flex:0 0 auto;width:62px;height:40px;border-radius:2px;position:relative;
  background:repeating-linear-gradient(-45deg,var(--air-red) 0 5px,var(--env) 5px 8px,var(--air-blue) 8px 13px,var(--env) 13px 16px)}
.tile .stub::before{content:"";position:absolute;inset:4px;background:var(--env)}
.tile .stub::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;left:50%;top:50%;margin:-6px 0 0 -6px;background:radial-gradient(circle at 35% 35%,#c2453f,var(--wax) 70%)}
.tile .stub.read::after{background:none;inset:4px;width:auto;height:auto;margin:0;border-radius:0;
  background:linear-gradient(to bottom right,transparent calc(50% - .5px),var(--env-in) 50%,transparent calc(50% + .5px)) left/50% 60% no-repeat,linear-gradient(to bottom left,transparent calc(50% - .5px),var(--env-in) 50%,transparent calc(50% + .5px)) right/50% 60% no-repeat}
.tile .meta{min-width:0;flex:1}
.tile .t1{font-family:var(--f-display);font-style:italic;font-size:1.2rem;line-height:1.2}
.tile .t2{font-family:var(--f-post);font-size:.74rem;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.chip{font-family:var(--f-post);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:2px;background:var(--wax);color:#fbf3e3;flex:0 0 auto}
.tile .stub.card{background:var(--card) center/cover;box-shadow:inset 0 0 0 1px var(--paper-edge)}
.tile .stub.card::before{inset:6px auto 6px 54%;width:1px;background:#bdb095}
.tile .stub.card::after{left:auto;top:5px;right:5px;margin:0;width:9px;height:11px;border-radius:0;background:var(--air-blue)}

/* washi sheet */
.sheet{position:relative;width:100%;max-width:100%;aspect-ratio:1000/1400;background:var(--washi) center/100% 100% no-repeat;filter:drop-shadow(0 2px 2px rgba(6,10,20,.35)) drop-shadow(0 14px 22px rgba(6,10,20,.4))}
.sheet.photo{}
.sheet.photo img{inset:6% 7%;width:86%;height:88%;object-fit:contain}
.sheet canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sheet img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sheet .pgno{position:absolute;right:7%;bottom:3.2%;font-family:var(--f-display);font-style:italic;font-size:.8rem;color:#9a8b70}
.pages .sheet:nth-child(odd){transform:rotate(-.45deg)} .pages .sheet:nth-child(even){transform:rotate(.55deg)}

/* composer */
.comp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-block:4px 14px}
.sendpair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0 0 14px}
.sendpair .btn{white-space:nowrap;padding-inline:10px}
.sendpair .btn[hidden]+.btn{grid-column:1 / -1}
.sendpair.solo{grid-template-columns:1fr}
/* narrow phones: the two desk buttons tighten up rather than run off the screen */
@media (max-width:420px){#v-comp .sendpair .btn{letter-spacing:.05em;padding-inline:6px;gap:6px}}
@media (max-width:360px){#v-comp .sendpair .btn{white-space:normal;line-height:1.15;letter-spacing:.03em}body.desk-dark #v-comp .sendpair .btn::before,body.desk-dark #v-comp .sendpair .btn::after{display:none}}
.comp-head .mid{font-family:var(--f-post);font-size:.8rem;color:var(--desk-muted);font-variant-numeric:tabular-nums;text-align:center}
.mid.warn{color:#f0a49c}
.stage{display:flex;justify-content:center;padding-block:4px}
.stage .sheet{width:min(100%,calc((100svh - 250px) / 1.4));min-width:min(100%,260px)}
.trays{position:sticky;bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px);padding-top:14px;background:linear-gradient(to bottom,transparent,var(--desk) 16px);display:grid;gap:10px;margin-top:14px}
.trays.flat{position:static;background:none}
.tray{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--paper-card);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--desk),0 0 0 4px var(--gold)}
.nib{width:38px;height:32px;border-radius:3px;border:1px solid var(--paper-edge);background:var(--paper-card);display:grid;place-items:center}
.nib span{display:block;border-radius:99px;background:var(--ink)}
.nib[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold)}
.nib.pen-tool{color:var(--ink)}
.nib.pen-tool svg{width:22px;height:22px;display:block}
.swatch.more{background:var(--paper-card);display:grid;place-items:center;color:var(--ink);font:500 1.25rem/1 var(--f-body);padding:0}
.swatch.more[aria-expanded="true"]:not(.on){box-shadow:0 0 0 2px var(--desk),0 0 0 4px rgba(200,166,106,.6)}
#c-ink{column-gap:20px;row-gap:10px}
.inkset,.nibset{display:flex;gap:8px;align-items:center}
.nibset[hidden]{display:none}
.ink-more{flex-basis:100%;display:grid;grid-template-columns:repeat(5,30px);gap:10px 12px;justify-content:center;padding:2px 0 2px}
.ink-more .swatch{width:30px;height:30px}
.sep{width:1px;height:24px;background:rgba(200,166,106,.35);margin-inline:2px}
.tool{border:1px solid var(--paper-edge);background:var(--washi-paper);color:var(--ink);border-radius:4px;padding:6px 11px;font-size:.92rem;box-shadow:var(--paper-soft-sm),var(--paper-halo),0 1px 3px rgba(0,0,0,.3)}
.tool[aria-pressed="true"]{background:var(--air-blue);color:#f7efdd;border-color:var(--air-blue)}
.tool:disabled{opacity:.45;cursor:default}
.tray [data-drawonly][hidden]{display:none}
.confirm{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.95rem;color:var(--desk-muted)}
.modebar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.typebox{display:grid;gap:10px;margin-bottom:18px}
.typebox textarea{width:100%;resize:vertical;min-height:7.5em;font-size:18px;line-height:1.55;font-family:var(--f-body);background:var(--cream-field);box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chipt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--paper-edge);background:var(--washi-paper);color:var(--ink);border-radius:3px;padding:6px 12px;font-size:.95rem;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.chipt input{accent-color:var(--air-red);margin:0}

/* reader */
.reader-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:4px 16px}
.stampline{font-family:var(--f-post);font-size:.8rem;color:var(--desk-muted);text-align:right;font-variant-numeric:tabular-nums}
.reader-title{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:2rem;margin:0 0 18px}
.pages{display:grid;gap:28px}
.reader-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:28px}
.skip{font-family:var(--f-post);font-size:.8rem}

/* envelope overlay */
.ov{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(14,19,30,.82);backdrop-filter:blur(3px);padding:16px}
.ov-inner{display:grid;gap:20px;justify-items:center}
.ov-hint{font-family:var(--f-post);color:var(--desk-muted);font-size:.85rem;letter-spacing:.06em;margin:0}
.env{position:relative;width:min(86vw,440px);aspect-ratio:1.55;perspective:1400px;border:0;background:none;padding:0}
.env>div{position:absolute}
.env-back,.env-pocket,.env-flap{inset:0;border-radius:3px;background:repeating-linear-gradient(-45deg,var(--air-red) 0 12px,var(--env) 12px 19px,var(--air-blue) 19px 31px,var(--env) 31px 38px)}
.env-back::after{content:"";position:absolute;inset:10px;background:var(--env-in)}
.env-back{z-index:0;box-shadow:var(--shadow)}
.env-letter{left:7%;right:7%;top:6%;bottom:6%;z-index:2;background:var(--washi) center/100% 100%;transition:transform .75s cubic-bezier(.2,.8,.2,1) .45s}
.env-pocket{z-index:3;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.env-pocket::after{content:"";position:absolute;inset:10px;background:var(--env);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}
.env-flap{z-index:4;bottom:auto;height:60%;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .55s ease .15s,z-index 0s .42s;border-radius:3px 3px 0 0}
.env-flap::after{content:"";position:absolute;inset:10px 10px 0;background:var(--env);clip-path:polygon(0 0,100% 0,50% 92%);background-image:linear-gradient(to bottom,rgba(0,0,0,.04),transparent)}
.env-seal{z-index:6;left:50%;top:60%;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:47% 53% 50% 48%/52% 46% 54% 48%;
  background:radial-gradient(circle at 38% 34%,#c9524b 0,#a32a2b 34%,var(--wax) 62%,#5e1416 100%);box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 -2px 4px rgba(0,0,0,.35);display:grid;place-items:center;transition:transform .35s ease,opacity .35s}
.env-seal::before{content:"";position:absolute;inset:16%;border-radius:50%;box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 1px 0 rgba(255,190,180,.25)}
.env-seal::after{content:"\2665";color:#6d1719;font-size:clamp(.9rem,3.6vw,1.4rem);text-shadow:0 1px 0 rgba(255,170,160,.35);line-height:1}
.env-label{z-index:5;left:20px;bottom:18px;right:120px;color:var(--ink);pointer-events:none}
.env-label .lbl{font-family:var(--f-post);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.env-label .from{font-family:var(--f-display);font-style:italic;font-size:clamp(1.4rem,5.5vw,2rem);line-height:1.05}
.env .postmark{z-index:5;right:20px;top:auto;bottom:16px;width:70px;height:70px}
.env.open .env-seal{transform:translate(-30%,-140%) rotate(-40deg) scale(.7);opacity:0}
.env.open .env-flap{transform:rotateX(180deg);z-index:1}
.env.open .env-letter{transform:translateY(-62%)}
.env.open .env-label,.env.open .postmark{opacity:0;transition:opacity .3s}
.env.fly{transition:transform .9s cubic-bezier(.5,0,.75,0),opacity .9s;transform:translate(60vw,-70vh) rotate(-14deg) scale(.6);opacity:0}
.env:not(.open) .env-seal{opacity:1}
@media (prefers-reduced-motion:reduce){.env-flap,.env-letter,.env.fly,.env-seal{transition:none}}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);background:var(--washi-paper);color:var(--ink);padding:10px 18px;border-radius:3px;font-size:.98rem;z-index:80;max-width:calc(100% - 32px);box-shadow:var(--paper-soft-sm),var(--paper-halo),var(--shadow)}

/* postcard */
.sheet.postcard{aspect-ratio:3/2;background:var(--card) center/cover;filter:none;box-shadow:var(--shadow);border-radius:2px}
.pc-decor{display:none;position:absolute;inset:0;pointer-events:none}
.sheet.postcard .pc-decor,.pc-back .pc-decor{display:block}
.pc-decor::before{content:"";position:absolute;left:54%;top:16%;bottom:9%;width:1.5px;background:#b9ab8f}
.pc-decor::after{content:"POST CARD";position:absolute;left:0;right:0;top:5.5%;text-align:center;font-family:var(--f-display);letter-spacing:.45em;font-size:clamp(.55rem,2vw,.9rem);color:#7d6f57}
.pc-lines{position:absolute;left:58%;right:5%;top:46%;height:40%;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1.5px),#b9ab8f calc(25% - 1.5px),#b9ab8f 25%)}
.pc-stamp{position:absolute;right:5%;top:12%;width:12%;aspect-ratio:.84;background:radial-gradient(circle,#efe5cf 1.6px,transparent 2.1px) -1px -1px/5.5px 5.5px,var(--air-red);transform:rotate(1.5deg)}
.pc-stamp::before{content:"";position:absolute;inset:4px;background:var(--air-red);box-shadow:inset 0 0 0 1.5px rgba(244,236,218,.75)}
.pc-stamp::after{content:"\2665";position:absolute;inset:0;display:grid;place-items:center;color:#f4ecda;font-size:clamp(.7rem,2.6vw,1.2rem);line-height:1}
.pc-label{position:absolute;left:58%;top:16%;font-family:var(--f-display);font-style:italic;font-size:clamp(.6rem,2.1vw,.95rem);color:#f4ecda;background:var(--air-blue);padding:2px 9px;border-radius:2px;box-shadow:0 0 0 2px #efe5cf,0 0 0 3px var(--air-blue)}
.pc-mark{position:absolute;right:13%;top:17%;width:16%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(42,38,34,.5);display:grid;place-items:center;text-align:center;font-family:var(--f-post);font-size:clamp(.4rem,1.3vw,.58rem);line-height:1.2;color:rgba(42,38,34,.7);transform:rotate(-14deg)}
.pc-mark b{font-size:1.2em}
.pc{perspective:1600px;padding-block:8px}
.pc-inner{position:relative;display:block;width:100%;aspect-ratio:3/2;max-width:100%;border:0;padding:0;background:none;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.pc-inner.flipped{transform:rotateY(180deg)}
.pc-face{position:absolute;inset:0;border-radius:2px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--shadow);background:var(--card) center/cover}
.pc-front{border:9px solid #ece1c8;background:#ece1c8}
.pc-front img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.18) saturate(.92) contrast(1.02)}
.pc-back{transform:rotateY(180deg)}
.pc-back canvas{position:absolute;inset:0;width:100%;height:100%}
.pc-hint{text-align:center;margin:12px 0 0;font-style:italic}
@media (prefers-reduced-motion:reduce){.pc-inner{transition:none}}
.pcfront{display:grid;gap:8px;margin-bottom:16px;justify-items:center}
.pcpick{position:relative;width:min(100%,420px);aspect-ratio:3/2;border:1.5px dashed rgba(200,166,106,.6);border-radius:2px;background:rgba(255,255,255,.04);color:var(--desk-muted);display:grid;place-items:center;overflow:hidden;padding:0;font-style:italic}
.pcpick.has{border:9px solid #ece1c8;box-shadow:var(--shadow)}
.pcpick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.18) saturate(.92)}
.pcpick.has span{position:absolute;right:10px;bottom:10px;background:rgba(30,38,56,.8);color:#f4ecda;font-size:.85rem;font-style:normal;padding:4px 10px;border-radius:2px}
.pcfront .small{margin:0;text-align:center;font-style:italic}

/* polaroids */
.pola{display:block;width:100%;border:0;margin:0;background:#efe5cf;padding:6% 6% 0;border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 22px rgba(6,10,20,.45);transform:rotate(var(--r,0deg));transition:transform .2s;text-align:center;color:var(--ink)}
button.pola:hover{transform:rotate(0deg) scale(1.03)}
.pola img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#cfc6b4;filter:sepia(.12) saturate(.95)}
.pola canvas.cap{display:block;width:100%;aspect-ratio:2000/480}
.pola .pcap{display:block;min-height:2.2em;padding:.3em .2em .5em;font-family:"Caveat","Bradley Hand","Segoe Print",cursive;font-size:clamp(1rem,4vw,1.3rem);line-height:1.1}
.tucked{margin-top:34px}
.tucked h3{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.4rem;margin:0 0 18px}
.polas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,42%),1fr));gap:28px 22px;padding:4px 6px}
.lb{position:fixed;inset:0;z-index:25;display:grid;place-items:center;align-content:center;gap:18px;background:rgba(14,19,30,.88);backdrop-filter:blur(4px);padding:16px}
.lb-inner{width:min(88vw,440px)}
.pv{overflow-y:auto;place-items:start center;align-content:start;padding:22px 16px 90px}
.pv-pages{display:grid;gap:22px;width:min(100%,520px)}
.pv .sheet{width:100%}
.pv .sheet.pv-edit{cursor:text;touch-action:manipulation}
.pv-st{position:absolute;z-index:3;cursor:grab;touch-action:none;border-radius:2px}
.pv-st:hover{outline:1.5px dashed rgba(178,66,58,.55);outline-offset:3px}
.pv-ghost{position:fixed;z-index:1000;pointer-events:none;opacity:.95;transform:rotate(-2deg) scale(1.04);filter:drop-shadow(0 6px 10px rgba(40,25,10,.35));cursor:grabbing}
.pv-caret{position:absolute;width:2px;background:#2b2620;animation:pcblink 1s steps(1) infinite;pointer-events:none;z-index:2}
.pv-close{white-space:nowrap;position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.lb .pola{--r:-1.5deg}
.lb .pola .pcap{font-size:1.6rem}
.polas-edit{margin-top:22px;display:grid;gap:12px}
.pe-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pe-title{font-family:var(--f-display);font-style:italic;font-size:1.25rem}
.pe-row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.pe{width:146px;background:#efe5cf;padding:7px 7px 6px;border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 14px rgba(6,10,20,.4);transform:rotate(var(--r))}
.pe-photo{position:relative}
.pe-photo img{display:block;width:100%;aspect-ratio:1;object-fit:cover;filter:sepia(.12)}
.pe-x{position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;border:0;background:var(--wax);color:#fbf3e3;font-size:1rem;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.pe-cap{width:100%;min-width:0;margin-top:6px;font-size:1.15rem!important;border:0;border-bottom:1px solid #d6cbb3;background:transparent;font:500 1rem "Caveat","Bradley Hand",cursive;color:var(--ink);padding:2px 0;text-align:center}
.pe-add{width:146px;aspect-ratio:.82;border:1.5px dashed rgba(200,166,106,.6);border-radius:2px;background:rgba(255,255,255,.04);color:var(--desk-muted);display:grid;place-content:center;gap:4px;font-size:.9rem;font-style:italic}
.pe-add b{font-size:1.7rem;font-weight:400;font-style:normal;color:var(--desk-ink)}
.env-pola{position:absolute;left:35%;top:12%;width:30%;aspect-ratio:.84;z-index:2;background:#efe5cf;border-radius:1px;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:rotate(var(--rot));transition:transform .85s cubic-bezier(.2,.8,.2,1) .7s}
.env-pola::before{content:"";position:absolute;left:8%;right:8%;top:7%;aspect-ratio:1;background:var(--img,#cfc6b4) center/cover;filter:sepia(.12)}
.env.open .env-pola{transform:translate(var(--tx),-92%) rotate(var(--rot))}
.pc-arrive{position:relative;width:min(86vw,440px);aspect-ratio:3/2;border:9px solid #ece1c8;padding:0;border-radius:2px;overflow:hidden;background:#cfc6b4;box-shadow:var(--shadow);transform:rotate(-2.5deg);transition:transform .6s ease,opacity .6s}
.pc-arrive img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.18) saturate(.92)}
.pc-arrive .postmark{top:10px;right:12px;border-color:rgba(42,38,34,.65);color:rgba(42,38,34,.85);background:rgba(243,234,215,.35)}
.pc-ov-from{position:absolute;left:10px;bottom:10px;background:#ece1c8;color:var(--ink);font-family:var(--f-display);font-style:italic;font-size:1.1rem;padding:3px 12px;border-radius:1px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.pc-arrive.turn{transform:rotateY(90deg) scale(1.04)}
.pc-arrive.fly{transition:transform .9s cubic-bezier(.5,0,.75,0),opacity .9s;transform:translate(60vw,-70vh) rotate(-14deg) scale(.6);opacity:0}
/* envelope front */
.envf{position:relative;aspect-ratio:1.6;max-width:100%;border-radius:3px;box-shadow:var(--shadow);--envbg:#e3d8be;
  background:repeating-linear-gradient(-45deg,var(--air-red) 0 12px,var(--env) 12px 19px,var(--air-blue) 19px 31px,var(--env) 31px 38px)}
.envf-in{position:absolute;inset:10px;background:var(--env);background-image:radial-gradient(ellipse at 30% 20%,rgba(255,243,218,.38),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(150,120,70,.1),transparent 60%)}
.envf-ink{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.etiquette.envf-tag{left:5%;top:40%;transform:rotate(-2deg);z-index:2}
.envf-stamps{position:absolute;right:4%;top:6%;width:31%;display:flex;flex-direction:row-reverse;gap:5%;align-items:flex-start;z-index:2}
.envf-stamp{width:47.5%;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.envf-stamp.a{transform:rotate(2deg)} .envf-stamp.b{transform:rotate(-3deg);margin-top:7%}
.envf-stamp svg,.envf-pm svg,.pc-stamp svg,.pc-pm svg,.pc-ov-pm svg{display:block;width:100%;height:auto}
.envf-pm{position:absolute;right:13%;top:12%;width:40%;z-index:3;pointer-events:none}
.envf.unposted .envf-pm{display:none}
.envf-ov{width:min(86vw,440px);border:0;padding:0;background:none;transition:transform .42s ease-in}
.envf-ov.turn{transform:rotateY(90deg)}
.env.turnin{animation:turnin .42s ease-out}
@keyframes turnin{from{transform:rotateY(-90deg)}to{transform:none}}
.tucked .envf{transform:rotate(-.8deg)}
/* postcard stamp & postmark */
.pc-stamp{position:absolute;right:5%;top:11%;width:12.5%;transform:rotate(1.5deg);filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));--envbg:#e8dfca}
.pc-stamp{background:none;aspect-ratio:auto;outline:0;border:0}
.pc-stamp::before,.pc-stamp::after{content:none;display:none}
.pc-pm{position:absolute;right:10%;top:9%;width:34%;pointer-events:none}
.pc-back canvas.pc-addr{z-index:1}
.pc-ov-pm{position:absolute;right:2%;top:3%;width:48%;z-index:2;pointer-events:none}
.pc-arrive.lift{transform:rotate(0deg) scale(1.05)}
.pc-arrive.lift.turn{transform:rotateY(90deg) scale(1.05)}
/* keepsakes */
.keeps{display:flex;flex-wrap:wrap;gap:20px 28px;justify-content:center;align-items:center;padding:6px 4px 30px}
.keep{border:0;background:none;padding:0;width:120px;transform:rotate(var(--r));filter:drop-shadow(0 3px 3px rgba(0,0,0,.45)) drop-shadow(0 10px 12px rgba(6,10,20,.35));transition:transform .2s}
.keep svg,.keep img{display:block;width:100%;height:auto}
.keep[data-keep=stone]{width:150px} .keep[data-keep=feather],.keep[data-keep=dove],.keep[data-keep=jay]{width:76px} .keep[data-keep=cross]{width:84px} .keep[data-keep=michael],.keep[data-keep=mary]{width:104px} .keep[data-keep=flower]{width:118px}
button.keep:hover{transform:rotate(0deg) scale(1.06)}
.keep.big{width:min(62vw,270px)!important;margin:0 auto;transform:none}
/* opened up close: wide things are held by width, tall things (feathers, lavender) by height, so each sits comfortably on the screen */
.keep.big{width:auto!important;display:flex;justify-content:center}
.keep.big img,.keep.big svg{width:auto;height:auto;max-width:min(62vw,270px);max-height:min(46vh,340px)}
.keep-cap{text-align:center;font-family:var(--f-display);font-style:italic;font-size:1.35rem;color:var(--desk-ink);margin:10px 0 0}
.env-keep{position:absolute;left:38%;top:16%;width:24%;z-index:2;transform:rotate(var(--rot));transition:transform .85s cubic-bezier(.2,.8,.2,1) .75s;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.env.open .env-keep{transform:translate(var(--tx),-82%) rotate(var(--rot))}
.env-keep svg,.env-keep img{display:block;width:100%;height:auto}
/* composer: keepsake picker & addresses */
.envbox{margin-top:26px;display:grid;gap:14px}
.kp-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.kp{border:1px dashed rgba(200,166,106,.45);background:rgba(255,255,255,.03);border-radius:3px;padding:10px 6px 8px;display:grid;justify-items:center;align-content:end;gap:6px;color:var(--desk-muted);font-size:.84rem;line-height:1.15;text-align:center;font-style:italic}
.kp svg,.kp img{height:64px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.kp[aria-pressed="true"]{border:1px solid var(--gold);background:rgba(200,166,106,.14);color:var(--desk-ink)}
.addr-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.addr-fields{grid-template-columns:1fr}}
.af{display:grid;gap:5px;min-width:0}
.af span{font-family:var(--f-post);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--desk-muted)}
.af textarea{resize:vertical;font-size:17px;line-height:1.4;width:100%}
#c-envprev .envf{transform:rotate(-.6deg)}
.stampnote{margin:0;font-style:italic}
/* classic textured envelopes: no airmail stripes */
.mini-env,.envf,.env-back,.env-pocket,.env-flap{background:var(--envtex) center/cover,var(--env)}
.mini-env::before{background:radial-gradient(ellipse at 30% 20%,rgba(255,243,218,.22),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(120,90,40,.10),transparent 60%);inset:0}
.mini-env{border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(120,95,55,.18) inset,var(--shadow)}
.envf{border-radius:2px;box-shadow:0 0 0 1px rgba(120,95,55,.18) inset,var(--shadow)}
.envf-in{inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,243,218,.2),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(120,90,40,.08),transparent 60%)}
.env-back{border-radius:2px}
.env-back::after{inset:0;background:linear-gradient(rgba(80,58,24,.16),rgba(80,58,24,.16)),var(--envtex) center/cover}
.env-pocket{background:linear-gradient(rgba(90,66,30,.28),rgba(90,66,30,.28)),var(--envtex) center/cover;border-radius:2px}
.env-pocket::after{inset:2px 0 0;background:var(--envtex) center/cover;clip-path:polygon(0 0,50% 53.4%,100% 0,100% 100%,0 100%);border-radius:0 0 2px 2px}
.env-flap{background:linear-gradient(rgba(90,66,30,.3),rgba(90,66,30,.3)),var(--envtex) center/cover;border-radius:2px 2px 0 0}
.env-flap::after{inset:0 1px 2px;background:linear-gradient(to bottom,rgba(255,255,255,.12),rgba(0,0,0,.05)),var(--envtex) center/cover;clip-path:polygon(0 0,100% 0,50% 96.5%)}
.tile .stub{background:var(--envtex) center/cover,var(--env);box-shadow:0 0 0 1px rgba(120,95,55,.35) inset}
.tile .stub::before{background:none}
.chev{width:38px;height:26px;border-radius:2px;background:linear-gradient(to bottom right,transparent calc(50% - .6px),rgba(110,85,50,.55) 50%,transparent calc(50% + .6px)) left top/50% 62% no-repeat,linear-gradient(to bottom left,transparent calc(50% - .6px),rgba(110,85,50,.55) 50%,transparent calc(50% + .6px)) right top/50% 62% no-repeat,var(--envtex) center/cover,var(--env);box-shadow:0 1px 3px rgba(0,0,0,.45)}
.env .postmark{display:none}
.env .env-label{display:none}
.env-seal{width:25%;aspect-ratio:1;margin:-12.5% 0 0 -12.5%;border-radius:0;background:var(--seal) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 2px 2px rgba(40,10,5,.45)) drop-shadow(0 5px 8px rgba(40,10,5,.25))}
.env-seal::before,.env-seal::after{content:none;display:none}
.tile .stub::after{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--seal) center/contain no-repeat;border-radius:0;filter:drop-shadow(0 1px 1px rgba(40,10,5,.4))}
.tile .stub.read::after{filter:none}
/* envelope fronts: a draft, and a sealed letter addressed and stamped */
.tile .stub.front{background:var(--envtex) center/cover,var(--env);overflow:hidden}
.tile .stub.front::before,.tile .stub.front::after{content:none}
.stub.front .st{position:absolute;top:4px;right:4px;width:11px;height:14px;background:var(--mini-stamp,var(--air-blue)) center/cover;box-shadow:0 0 0 1.5px #f3ead6,0 1px 2px 1.5px rgba(60,40,15,.25)}
.stub.front .pm{position:absolute;top:6px;right:12px;width:12px;height:12px;border-radius:50%;border:1px solid rgba(43,38,32,.42)}
.stub.front .pm::after{content:"";position:absolute;right:10px;top:2px;width:7px;height:7px;background:repeating-linear-gradient(to bottom,rgba(43,38,32,.26) 0 1px,transparent 1px 3px)}
.stub.front .ad{position:absolute;left:18px;top:22px;width:28px;height:12px;--ln:rgba(43,38,32,.72);background:linear-gradient(var(--ln),var(--ln)) 0 0/100% 1.3px no-repeat,linear-gradient(var(--ln),var(--ln)) 0 5px/82% 1.3px no-repeat,linear-gradient(var(--ln),var(--ln)) 0 10px/62% 1.3px no-repeat}
.stub.front.draft b{position:absolute;inset:0;display:grid;place-items:center;font-weight:400}
.stub.front.draft b span{font-family:var(--f-post);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--air-red);border:1.3px solid currentColor;border-radius:2px;padding:1px 3px 0 5px;transform:rotate(-9deg);opacity:.85}

.envf-tag{display:none}
.envf-stamps{width:27%;right:4%;top:6%}
.envf-stamp.a{width:100%;transform:rotate(1.5deg)}
.envf-stamp img,.pc-stamp img,.mini-stamp img,.stamp-pick img{display:block;width:100%;height:auto}
.envf-pm{right:21.5%;top:12%;width:38%;opacity:.78;mix-blend-mode:multiply}
.pc-stamp{width:21%;right:4%;top:10%}
.pc-pm{right:14%;top:8%;width:34%}
.mini-stamp{position:absolute;right:22px;top:20px;width:26%;max-width:150px;transform:rotate(1.5deg);filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3));z-index:1}
.mini-env .postmark{right:22%;top:28px}
.mini-env .waves{right:calc(22% + 60px)}
.stamp-pick{display:flex;gap:12px;flex-wrap:wrap}
.stamp-pick button{display:grid;gap:6px;justify-items:center;width:132px;padding:8px 8px 6px;border:1px dashed rgba(200,166,106,.45);background:rgba(255,255,255,.03);border-radius:3px;color:var(--desk-muted);font-style:italic;font-size:.9rem}
.stamp-pick button img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.stamp-pick button[aria-pressed="true"]{border:1px solid var(--gold);background:rgba(200,166,106,.14);color:var(--desk-ink)}
.envf-stamp,.pc-stamp{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.pc-label{display:none!important}
.pc-pm{right:17%;width:32%;opacity:.78;mix-blend-mode:multiply}
.stamp-pick{display:grid;gap:14px}
.sp-h{display:block;font-family:var(--f-post);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--desk-muted);margin-bottom:8px}
.sp-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.stamp-pick .sp-row button{width:auto}
.stamp-pick{display:flex;flex-wrap:wrap;gap:14px 10px;align-items:flex-start}
.stamp-pick .sp-group{flex:0 0 auto}
.stamp-pick .sp-group.wide{flex-basis:100%}
.stamp-pick .sp-group:not(.wide) .sp-row{grid-template-columns:repeat(var(--n),minmax(104px,118px))}
.keep[data-keep^=pc_]{width:92px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)) drop-shadow(0 8px 12px rgba(6,10,20,.35))}
.keep[data-keep^=pc_] img{border-radius:4px}
.lb-card .lb-inner{width:min(80vw,330px)}
.hc{perspective:1600px;width:100%;aspect-ratio:300/510;cursor:pointer;outline:none}
.hc:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:6px}
.hc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,.7,.2,1)}
.hc.flipped .hc-in{transform:rotateY(180deg)}
.hc-in img{position:absolute;inset:0;width:100%;height:100%;border-radius:7px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2px 4px rgba(0,0,0,.4),0 18px 34px rgba(6,10,20,.55)}
.hc-in::after{content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 42%,transparent 54%);backface-visibility:hidden}
.hc-b{transform:rotateY(180deg)}
.hc-hint{font-size:1.05rem;margin-top:14px}
@media (prefers-reduced-motion:reduce){.hc-in{transition:none}}
.kp img[src*="hc_"],.kp img{border-radius:3px}
.kp-tools{display:inline-flex;align-items:center;gap:10px;flex:none;white-space:nowrap}
#c-keepbox{display:grid;gap:10px}
.pe-sub{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px}
.pe-subt{font-family:var(--f-display);font-size:1.08rem;color:var(--desk-ink);font-variant:small-caps;letter-spacing:.05em}
.polas-edit .pe-sub{margin-top:0}
.kp-clear{padding:4px 10px;font-size:.85rem;white-space:nowrap}
.sigov{position:fixed;inset:0;z-index:28;display:grid;place-items:center;background:rgba(14,19,30,.86);backdrop-filter:blur(3px);padding:16px}
.sigbox{width:min(100%,520px);color:var(--ink);border-radius:4px;padding:18px;display:grid;gap:10px}
.sig-h{margin:0;font-family:var(--f-display);font-style:italic;font-size:1.5rem}
.sig-sub{margin:0;color:var(--ink-muted)}
.sigcv{width:100%;aspect-ratio:1000/380;background:var(--washi) center/cover;border-radius:2px;touch-action:none;box-shadow:inset 0 0 0 1px var(--paper-edge);background-image:linear-gradient(to top,transparent 26%,rgba(110,90,60,.35) 26%,rgba(110,90,60,.35) calc(26% + 1px),transparent calc(26% + 1px)),var(--washi)}
.sig-row{justify-content:flex-end}
.stu{z-index:29;overflow-y:auto;overscroll-behavior:contain;place-items:start center}
.sigbox .small{text-shadow:none!important;color:var(--ink-muted)!important}
.stubox{margin-block:auto}
.stu-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.stu-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:10px}
.stu-tile{position:relative;aspect-ratio:1;border:1px dashed var(--paper-edge);border-radius:3px;background:#efe5cf;display:grid;place-items:center;padding:10px;color:var(--ink-muted);font-style:italic;font-size:.9rem;text-align:center;line-height:1.2}
.stu-tile img{max-width:100%;max-height:100%;object-fit:contain;transform:rotate(-2deg)}
.stu-tile[aria-pressed="true"]{border:2px solid var(--air-red);box-shadow:0 0 0 3px rgba(178,66,58,.15)}
.stu-tile.add b{display:block;font-size:1.8rem;font-style:normal;font-weight:400;color:var(--ink)}
.stu-use{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.stu-new{display:grid;gap:10px;margin-top:6px}
.stu-pad{position:relative;width:100%;aspect-ratio:1;background:var(--washi) center/cover;border-radius:2px;box-shadow:inset 0 0 0 1px var(--paper-edge);overflow:hidden}
.stu-pad canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.stu-ph{position:absolute;inset:auto 0 12px;text-align:center;color:var(--ink-muted);font-style:italic;pointer-events:none}
.stu-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.stu-inks{display:inline-flex;gap:8px}
.stu-inks .swatch{width:30px;height:30px}
.stu-inks .swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--air-red),0 1px 3px rgba(0,0,0,.4)}
.my-sp{display:grid;gap:4px;justify-items:center}
.my-sp>button:first-child{width:100%}
.my-press{font-size:.8rem}
.sp-row .sp-add{border-style:dashed;place-content:center;min-height:110px}
.sp-row .sp-add b{font-size:1.7rem;font-weight:400;font-style:normal;color:var(--desk-ink)}
.uw-spec .uw-stampico{width:52%!important}
.pola .pcap.tw{font-family:var(--f-post);font-size:clamp(.82rem,3.2vw,1rem);letter-spacing:.02em;padding-top:.55em}
.keep[data-keep=clover]{width:110px} .keep[data-keep=lavender]{width:62px} .keep[data-keep=pine]{width:96px}
.keep[data-keep=bouquet]{width:150px}
.asken-bar{background:rgba(45,76,136,.22);border:1px solid rgba(134,163,230,.45);color:var(--desk-ink);border-radius:3px;padding:10px 14px;margin-bottom:14px;font-size:.95rem;line-height:1.4}
.asken-bar b{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.1rem}
.stackbox{margin-top:22px;background:rgba(255,255,255,.04);border:1px dashed rgba(200,166,106,.45);border-radius:3px;padding:14px;display:grid;gap:10px}
.stack-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.stack-h h2{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.35rem;margin:0}
.stack-pile{display:grid;gap:8px}
.stack-item.tile{cursor:default}
.stack-item{display:flex;align-items:center;gap:12px;background:var(--env-paper);color:var(--ink);border-radius:2px;padding:8px 10px;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.stack-item:nth-child(odd){transform:rotate(-.6deg)} .stack-item:nth-child(even){transform:rotate(.5deg)}
.stack-item .si-meta{flex:1;min-width:0;line-height:1.25}
.stack-item .si-t2{font-size:.85rem;color:var(--ink-muted)}
.stack-item{flex-wrap:wrap}
.stack-item .si-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;flex-basis:100%;margin-top:-6px}
.stack-item .si-acts button{border:0;background:none;color:var(--ink-muted);font-size:.85rem;font-style:italic;text-decoration:underline;text-underline-offset:3px;padding:4px}
.tile .stackof{font-size:.8rem;font-style:italic;color:var(--ink-muted)}
.draftbox .si-sn{font-family:var(--f-post);font-size:.92rem;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.draftbox .stack-item{cursor:pointer}
.draftbox .si-sn.sealed{font-family:var(--f-body);font-style:italic;color:var(--ink-muted)}
.draftbox .si-meta{flex:1 1 0;min-width:0;overflow:hidden}
.draftbox,.draftbox .stack-pile{grid-template-columns:minmax(0,1fr)}
.asken-link{display:block;margin:10px auto 0;font-style:italic;color:var(--desk-muted);text-decoration:underline;text-underline-offset:3px}
/* the typewriter */
.twm{max-width:560px;margin:2px auto 0;user-select:none;-webkit-user-select:none}
.twm-window{position:relative;height:min(44vh,340px);overflow:hidden;border-radius:12px 12px 0 0;background:radial-gradient(ellipse at 50% 115%,#3a4560,#141a27 72%);cursor:text;box-shadow:inset 0 12px 26px rgba(0,0,0,.5)}
.twm-sheet{position:absolute;left:0;top:0;background:var(--washi) center/100% 100% no-repeat;will-change:transform;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.twm-sheet.postcard{background:var(--card) center/cover;border-radius:3px}
.twm-sheet canvas{position:absolute;inset:0;width:100%;height:100%}
.twm-bail{position:absolute;left:0;right:0;bottom:0;height:13px;background:linear-gradient(#f4f4f4,#a3a3a3 40%,#5a5a5a);box-shadow:0 -3px 7px rgba(0,0,0,.35)}
.twm-bail::before,.twm-bail::after{content:"";position:absolute;top:-3px;width:34px;height:18px;border-radius:9px;background:linear-gradient(#3b3b3b,#0e0e0e)}
.twm-bail::before{left:22%}.twm-bail::after{right:22%}
.twm-guide{position:absolute;left:50%;bottom:13px;width:84px;height:17px;margin-left:-42px;background:linear-gradient(#ededed,#8a8a8a);clip-path:polygon(0 35%,43% 35%,50% 0,57% 35%,100% 35%,100% 100%,0 100%);opacity:.9}
.twm-bar{position:absolute;left:50%;bottom:24px;width:4px;height:0;margin-left:-2px;background:#2a2a2a;border-radius:2px}
.twm-bar.hit{animation:tbhit .1s ease-out}
@keyframes tbhit{0%{height:0}45%{height:22px}100%{height:0}}
.twm-hint{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-post);font-size:.8rem;color:#efe6d1;background:rgba(20,26,39,.78);padding:5px 11px;border-radius:2px;pointer-events:none}
.tw-input{position:absolute!important;left:50%;bottom:22px;width:2px!important;min-height:0!important;height:2px;opacity:0;padding:0!important;border:0!important;resize:none;caret-color:transparent;font-size:16px!important;z-index:-1}
.twm-body{position:relative;background:linear-gradient(#2c2f37,#131519 55%,#0b0c10);border-radius:0 0 24px 24px;padding:0 14px 18px;box-shadow:0 16px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.twm-platen{position:relative;height:30px;margin:0 -14px;background:linear-gradient(#4c4c4c,#141414 38%,#050505 70%,#2e2e2e);border-radius:0 0 4px 4px}
.twm-platen::before,.twm-platen::after{content:"";position:absolute;top:3px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#fff,#bdbdbd 40%,#575757 76%)}
.twm-platen::before{left:-9px}.twm-platen::after{right:-9px}
.twm-badge{text-align:center;font-family:var(--f-display);font-style:italic;color:var(--gold);font-size:1.15rem;letter-spacing:.06em;margin:10px 0 12px;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.twm-badge::before,.twm-badge::after{content:"";display:inline-block;width:46px;height:1px;background:rgba(200,166,106,.55);vertical-align:middle;margin:0 10px}
.twm-keys{display:grid;gap:7px;justify-items:center}
.twm-row{display:flex;gap:5px}
.twk{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-post);font-size:.74rem;color:#1d1b17;background:radial-gradient(circle at 50% 42%,#f6eedb 0 54%,#d6caae 60%,#141414 62%,#dcdcdc 69%,#7a7a7a 79%,#262626 86%);box-shadow:0 3px 0 #000,0 5px 5px rgba(0,0,0,.5);transition:transform .06s}
.twk.down{transform:translateY(3px);box-shadow:0 0 0 #000,0 1px 2px rgba(0,0,0,.5)}
.twk-space{display:block;width:min(64vw,230px);height:16px;border-radius:8px;background:linear-gradient(#ece2ca,#bcae8e);box-shadow:0 3px 0 #000,0 5px 5px rgba(0,0,0,.5);transition:transform .06s}
.twk-space.down{transform:translateY(3px);box-shadow:none}
@media (max-width:380px){.twk{width:25px;height:25px;font-size:.66rem}.twm-row{gap:4px}}
.twm-ctrl{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.tw-onpage{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:12px}
.tw-onpage .small{width:100%;text-align:center;margin:0}
.tw-chip{position:relative;width:64px;height:64px;border-radius:3px;background:#ece1c8;border:1px solid var(--paper-edge);display:grid;place-items:center;padding:6px;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.tw-chip img{max-width:100%;max-height:100%;object-fit:contain}
.tw-chip .pe-x{top:-9px;right:-9px;width:24px;height:24px}
.after-write{height:22px}
.testbar{display:grid;gap:4px;margin:0 0 18px;padding:10px 14px;border:1px dashed #d9a441;border-radius:3px;background:rgba(217,164,65,.12);color:var(--desk-ink);font-size:.95rem}
.testbar b{font-family:var(--f-post);letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:#e7c27a}
.testbar .tb-acts{display:flex;gap:16px}
.testbar .linkish{padding:2px 0}
.quiet-acts{display:flex;justify-content:center;gap:18px;margin:10px 0 2px}
.pc-pull{display:flex;justify-content:center;margin:2px 0 6px}
.pc-pull .linkish{opacity:.6;font-size:.8rem}
.linkish{border:0;background:none;padding:4px 2px;color:var(--desk-muted);font-size:.85rem;font-style:italic;text-decoration:underline;text-decoration-color:rgba(200,166,106,.35);text-underline-offset:3px;opacity:.8}
.linkish:hover,.linkish:focus-visible{opacity:1;color:var(--desk-ink)}
.linkish.arm{color:#e8a29b;opacity:1;text-decoration-color:currentColor}
#c-twdate[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 1px 2px rgba(0,0,0,.3)}
#c-twdate[aria-pressed="true"]::before{content:"\2713  "}
/* ---------- the writing desk's controls: gold-stamped cream card, like engraved 1920s stationery ---------- */
#v-comp{--dcard:#eee2c7;--dcard-lo:#e2d3b4;--dcard-wash:linear-gradient(180deg,rgba(238,226,199,.74),rgba(226,211,180,.74));--gilt:#9b7531;--gilt-rule:#c4a15a;--gilt-fill:linear-gradient(180deg,#d9bb72,#b58e43)}
#v-comp .comp-head .btn.ghost{font-family:var(--f-display);font-style:italic;font-size:1.1rem}
#v-comp .btn:not(.ghost),#v-comp .seg,#v-comp .tool{
  background:var(--dcard-wash),var(--washi) center/1000px auto no-repeat,var(--dcard);border:1px solid var(--gilt-rule);border-radius:3px;color:var(--gilt);
  box-shadow:inset 0 0 0 3px rgba(236,224,197,.9),inset 0 0 0 4px rgba(196,161,90,.55),inset 0 0 14px rgba(128,94,50,.12),var(--paper-halo),0 2px 4px rgba(0,0,0,.4);
  text-shadow:0 1px 0 rgba(255,246,226,.6);font-variant:small-caps;letter-spacing:.1em}
#v-comp .btn.primary{font-size:1.14rem;padding-block:15px}
#v-comp .seg{padding:5px}
#v-comp .seg button{color:#8f7a55;font-variant:small-caps;letter-spacing:.08em;padding:6px 15px;text-shadow:none}
#v-comp .seg button[aria-pressed="true"],#v-comp .tool[aria-pressed="true"]{background:var(--gilt-fill);color:#fbf4e4;text-shadow:0 1px 0 rgba(90,60,20,.45)}
#v-comp .tool{font-size:.9rem;padding:7px 12px}
#v-comp .tool.kp-clear{padding:4px 10px;font-size:.82rem}
#v-comp .btn:disabled,#v-comp .tool:disabled{opacity:1;color:rgba(155,117,49,.38)}
#v-comp :is(.btn:not(.ghost),.tool,.seg button):active:not(:disabled){transform:translateY(1px)}
#v-comp .tray .nib,#v-comp .swatch.more:not(.on){border:1px solid var(--gilt-rule);color:var(--gilt)}
#v-comp .tray .nib span{background:var(--gilt)}
#v-comp .tray .nib[aria-pressed="true"]{box-shadow:0 0 0 2px #d9bb72}
#v-comp #c-twdate[aria-pressed="true"]{background:var(--gilt-fill);color:#fbf4e4}
#v-comp .theme-seg{padding:3px}
#v-comp .theme-seg button{padding:4px 10px;font-size:.82rem;letter-spacing:.06em;white-space:nowrap}
/* dark: black lacquer and gold, an Art Deco desk set */
body.desk-dark #v-comp{--lac:#17110e;--lac-hi:#241b16;--foil:#d8b86c;--foil-dim:rgba(216,184,108,.58);--lac-frame:inset 0 0 0 2px var(--lac),inset 0 0 0 3px rgba(216,184,108,.35)}
body.desk-dark #v-comp .btn:not(.ghost),body.desk-dark #v-comp .seg,body.desk-dark #v-comp .tool{
  background:linear-gradient(180deg,var(--lac-hi),var(--lac));border:1px solid var(--foil);border-radius:0;color:var(--foil);
  box-shadow:var(--lac-frame),0 2px 6px rgba(0,0,0,.55);text-shadow:none;letter-spacing:.14em}
body.desk-dark #v-comp .sendpair .btn::before,body.desk-dark #v-comp .sendpair .btn::after{content:"";width:5px;height:5px;background:var(--foil);transform:rotate(45deg);flex:none;opacity:.85}
body.desk-dark #v-comp .seg button{color:var(--foil-dim);border-radius:0;text-shadow:none}
body.desk-dark #v-comp .seg button[aria-pressed="true"]{background:none;color:#f0d896;box-shadow:inset 0 -2px 0 var(--foil);text-shadow:none}
body.desk-dark #v-comp .tool[aria-pressed="true"],body.desk-dark #v-comp #c-twdate[aria-pressed="true"]{background:linear-gradient(180deg,var(--lac-hi),var(--lac));color:#f0d896;box-shadow:var(--lac-frame),inset 0 -3px 0 var(--foil),0 2px 6px rgba(0,0,0,.55)}
body.desk-dark #v-comp .btn:disabled,body.desk-dark #v-comp .tool:disabled{color:rgba(216,184,108,.3);border-color:rgba(216,184,108,.35)}
body.desk-dark #v-comp .tray .nib,body.desk-dark #v-comp .swatch.more:not(.on){background:linear-gradient(180deg,var(--lac-hi),var(--lac));border:1px solid var(--foil);color:var(--foil);border-radius:0;box-shadow:0 2px 4px rgba(0,0,0,.45)}
body.desk-dark #v-comp .swatch.more:not(.on){border-radius:50%}
body.desk-dark #v-comp .tray .nib span{background:var(--foil)}
body.desk-dark #v-comp .tray .nib[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--foil),0 0 0 1px var(--foil)}
/* who it's to, from the address book */
#v-comp .to-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 14px}
#v-comp .to-row label{font-family:var(--f-display);font-style:italic;font-size:1.25rem;color:var(--desk-ink);text-shadow:0 1px 3px rgba(20,4,0,.85)}
#v-comp .recip{appearance:none;-webkit-appearance:none;min-width:min(14em,70vw);padding:9px 38px 9px 16px;border:1px solid var(--gilt-rule);border-radius:2px;color:var(--gilt);
  font:1.05rem var(--f-body);font-variant:small-caps;letter-spacing:.08em;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239b7531' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center no-repeat,linear-gradient(180deg,var(--dcard),var(--dcard-lo));
  box-shadow:inset 0 0 0 3px var(--dcard),inset 0 0 0 4px rgba(196,161,90,.55),0 2px 4px rgba(0,0,0,.4)}
body.desk-dark #v-comp .recip{color:var(--foil);border-color:var(--foil);border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d8b86c' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center no-repeat,linear-gradient(180deg,var(--lac-hi),var(--lac));
  box-shadow:var(--lac-frame),0 2px 6px rgba(0,0,0,.55)}
#v-comp .recip option{color:var(--ink);background:#f4ecda}
/* the address book */
.book-card{width:min(100%,460px)}
/* your photos and the public library */
.lib-card{width:min(100%,540px)}
.lib-tabs{justify-self:start;margin-bottom:4px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;max-height:min(50vh,420px);overflow:auto;padding:2px 2px 6px}
.lib-cell{position:relative}
.lib-th{display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:2px;overflow:hidden;background:var(--env);box-shadow:0 1px 2px rgba(0,0,0,.25),0 3px 8px rgba(60,40,15,.18)}
.lib-th img{display:block;width:100%;height:100%;object-fit:cover}
.lib-th.busy{opacity:.5}
.lib-x{position:absolute;top:4px;right:4px;min-width:24px;height:24px;padding:0 6px;border:0;border-radius:12px;background:rgba(43,38,32,.72);color:#f6eedc;font-size:.85rem;line-height:24px}
.lib-x.arm{background:var(--air-red);font-family:var(--f-body);font-style:italic}
.lib-keep{justify-self:start}

.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bk-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px dashed var(--paper-edge)}
.bk-name{font-family:var(--f-display);font-size:1.2rem;color:var(--ink)}
.bk-link{font-family:var(--f-post);font-size:.85rem}
.bk-pending{font-size:.9rem}
#v-comp .to-note{margin:-4px 0 6px;color:var(--ink-muted)}#v-comp .to-note .linkish{font-size:inherit}
.bk-who{display:grid;gap:2px;min-width:0}
.bk-sub{font-size:.88rem;color:var(--ink-muted);overflow-wrap:anywhere}
.bk-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px;flex:none;max-width:52%}
.bk-acts .linkish{font-size:.92rem;white-space:nowrap}
.bk-sealed{margin:0}
.bk-f{display:grid;gap:4px;font-family:var(--f-display);color:var(--ink)}
.bk-f>span{font-size:1.02rem}.bk-f i{font-size:.85rem;color:var(--ink-muted);margin-left:4px}
.bk-f .field{width:100%;flex:none}
.bk-f small{font-family:var(--f-body);font-size:.85rem;color:var(--ink-muted)}
.bk-f textarea.field{resize:vertical;min-height:4.6em;line-height:1.35}
.bk-err{color:var(--air-red);margin:0;min-height:0}.bk-err:empty{display:none}
.bk-send{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bk-send.four{grid-template-columns:1fr 1fr}
.bk-send .btn{text-decoration:none}
/* "Open when…" */
.ow-card{width:min(100%,480px)}
.ow-list{display:grid;gap:4px;max-height:max(160px,calc(100svh - 390px));overflow-y:auto;overscroll-behavior:contain;padding-right:4px;border-bottom:1px solid var(--paper-edge)}
.ow-opt{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px dashed var(--paper-edge);font-family:var(--f-display);font-size:1.08rem;color:var(--ink);cursor:pointer}
.ow-opt input{accent-color:#b58e43;width:18px;height:18px;flex:none}
.ow-add{align-items:center;flex-wrap:nowrap}.ow-add .field{flex:1 1 0;min-width:0;width:0}
.ow-pre{font-family:var(--f-display);font-style:italic;color:var(--ink-muted);white-space:nowrap}
.btn.block.ow-write{margin-top:10px;font-family:var(--f-display);font-style:italic;font-size:1.08rem}
#v-comp .ow-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 14px;margin:-4px 0 16px;text-align:center}
#v-comp .ow-t{font-family:var(--f-display);font-style:italic;font-size:1.45rem;color:#e9cf8f;text-shadow:0 1px 3px rgba(20,4,0,.85)}
#v-comp .ow-n{font-family:var(--f-post);font-size:.8rem;color:var(--desk-muted)}
#v-comp .ow-bar .linkish{flex-basis:100%}
.stackbox.owbox{margin:0 0 18px}
.owbox .ow-pile{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:6px 2px 10px}
.owbox .ow-pile .twine{display:none}
.ow-env{position:relative;aspect-ratio:1.6;border:0;border-radius:2px;background:var(--envtex) center/cover,var(--env);box-shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(120,95,55,.18) inset,var(--shadow);
  display:grid;place-items:center;padding:30px 38px 14px 14px;cursor:pointer;transition:transform .15s}
.ow-env:nth-child(odd){transform:rotate(-1.2deg)}
.ow-env:nth-child(even){transform:rotate(1deg)}
.ow-env:hover,.ow-env:focus-visible{transform:translateY(-2px) rotate(0)}
.ow-env::after{content:"";position:absolute;right:10px;top:9px;width:22px;height:26px;border:1px dashed rgba(120,95,55,.45);border-radius:1px}
.envf-ow{position:absolute;left:7%;bottom:9%;max-width:52%;z-index:2;font-family:var(--f-display);font-style:italic;font-size:clamp(.9rem,3.6vw,1.35rem);line-height:1.2;color:#3b2f22;transform:rotate(-2deg);border-bottom:1px solid rgba(59,47,34,.35);padding-bottom:2px}
.ow-env-t{font-family:var(--f-display);font-style:italic;font-size:1.05rem;line-height:1.25;color:#3b2f22;text-align:center;max-width:85%}
.conf-chip{justify-self:start}
canvas.hearts{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:40}
.twm{max-width:600px}
.uw{position:relative;width:100%;aspect-ratio:1300/1604;cursor:text;-webkit-tap-highlight-color:transparent}
.uw-back,.uw-front{position:absolute;left:0;top:9.352%;width:100%;height:auto;pointer-events:none}
.uw-back{filter:drop-shadow(0 22px 26px rgba(4,8,16,.6)) drop-shadow(0 4px 6px rgba(4,8,16,.45))}
.uw-clip{position:absolute;left:-30%;right:-30%;top:0;height:31.2%;overflow:hidden;pointer-events:none}
.uw-clip .twm-sheet{left:30%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.uw .twm-sheet{left:0}
.uw-clip{left:0;right:0}
.uw-curl{position:absolute;left:0;right:0;bottom:0;height:8%;background:linear-gradient(to bottom,transparent,rgba(20,16,10,.30))}
.uw-keys{position:absolute;inset:0;pointer-events:none}
.uwk{position:absolute;display:block}
.uwk i{position:absolute;inset:0;border-radius:inherit;background-repeat:no-repeat;transition:transform .06s ease-out,filter .06s}
.uwk.down{background:radial-gradient(circle,rgba(0,0,0,.85) 60%,rgba(0,0,0,0) 72%)}
.uwk-bar.down{background:rgba(0,0,0,.8)}
.uwk.down i{transform:translateY(16%) scale(.95);filter:brightness(.82)}
.uwk-bar.down i{transform:translateY(22%)}
.uw .twm-bar{position:absolute;width:3px;height:14px;margin:-14px 0 0 -1.5px;background:#1d1d1d;border-radius:2px;transform-origin:bottom;transform:scaleY(0);bottom:auto}
.uw .twm-bar.hit{animation:tbhit2 .1s ease-out}
@keyframes tbhit2{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.uw .twm-hint{bottom:auto}
/* paper standing in the machine: tilted back, curving over the platen, lit like the photo */
.uw-tilt{position:absolute;inset:0}
.uw .twm-sheet{filter:brightness(.94) saturate(.92) drop-shadow(5px 9px 9px rgba(6,6,10,.5)) drop-shadow(0 1px 1px rgba(6,6,10,.35))}
.uw-light{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 35%,rgba(0,0,0,0) 65%,rgba(20,16,10,.12) 100%)}
.uw-curl{left:22.3%!important;right:22.3%!important;height:16%;mix-blend-mode:multiply;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(40,32,22,.10) 45%,rgba(30,24,16,.32) 80%,rgba(10,8,6,.62) 100%)}
.uw-spec{position:absolute;padding:0;border:0;background:none;pointer-events:auto;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.uw-spec-cap{position:absolute;inset:6%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,#f7f0dd 0 58%,#d9ccad 66%,#1a1a1a 69%,#e2e2e2 76%,#8a8a8a 86%,#2e2e2e 93%);box-shadow:0 3px 0 #000,0 5px 6px rgba(0,0,0,.55);transition:transform .07s ease-out,box-shadow .07s}
.uw-name{width:92%;height:auto;transform:rotate(-8deg)}
.uw-name{width:auto;font-family:"Caveat","Bradley Hand",cursive;font-weight:700;color:#1f2a4d;line-height:1;transform:rotate(-8deg);white-space:nowrap}
.uw-spec svg{width:44%;height:auto;fill:#b3202c;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}
.uw-spec.down .uw-spec-cap{transform:translateY(12%) scale(.96);box-shadow:0 0 0 #000,0 1px 2px rgba(0,0,0,.6)}
.uw-spec[aria-pressed="true"] .uw-spec-cap{box-shadow:0 0 0 2px rgba(200,166,106,.95),0 0 12px 3px rgba(200,166,106,.55),0 2px 0 #000}
.uw-spec:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.twm-note{text-align:center;margin:12px 0 0;font-style:italic}
/* SIGN and ♥ are printed on the photo's keys: they press like every other key and glow softly while switched on */
.uw-spec.uw-photo{border-radius:50%;overflow:visible}
.uw-photo i{position:absolute;inset:0;border-radius:50%;background-repeat:no-repeat;transition:transform .06s ease-out,filter .06s}
.uw-photo.down{background:radial-gradient(circle,rgba(0,0,0,.85) 60%,rgba(0,0,0,0) 72%)}
.uw-photo.down i{transform:translateY(16%) scale(.95);filter:brightness(.82)}
.uw-photo[aria-pressed="true"]{box-shadow:0 0 0 2px rgba(214,169,79,.9),0 0 12px 3px rgba(214,169,79,.5)}
.hk-menu{position:absolute;right:2%;bottom:21%;z-index:6;width:min(78%,330px);background:var(--paper-card);color:var(--ink);border-radius:4px;padding:10px;display:grid;gap:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.5);animation:hkin .14s ease-out}
.hk-menu::after{content:"";position:absolute;right:7%;bottom:-7px;width:14px;height:14px;background:var(--paper-card);transform:rotate(45deg)}
@keyframes hkin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hk-menu{animation:none}}
.hk-item{border:1px solid var(--paper-edge);background:var(--cream-field);border-radius:3px;padding:6px;display:grid;place-items:center;gap:2px;color:var(--ink);font-size:.9rem}
.hk-item:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.hk-close{grid-template-columns:minmax(0,1fr) auto;justify-items:start;gap:10px;padding:8px 10px}
.hk-on{font-family:var(--f-post);font-size:.72rem;letter-spacing:.06em;color:var(--ink-muted);white-space:nowrap}
.hk-close img{height:28px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.hk-close[aria-checked="true"]{border-color:var(--gold);background:rgba(200,166,106,.18)}
.hk-stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.hk-st{aspect-ratio:1}
.hk-st img{max-width:100%;max-height:52px;object-fit:contain;transform:rotate(-2deg)}
.hk-new{aspect-ratio:1;border-style:dashed;color:var(--ink-muted);font-style:italic;font-size:.78rem;line-height:1.1}
.hk-new b{font-size:1.3rem;font-weight:400;font-style:normal;color:var(--ink)}
/* ebony keys with engraved gold */
.uw-spec-cap{background:radial-gradient(circle at 50% 38%,#2b2620 0 30%,#120f0c 56%,#050505 62%,#e6e6e6 66%,#9a9a9a 76%,#3a3a3a 86%,#111 93%)!important;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.08),0 3px 0 #000,0 5px 6px rgba(0,0,0,.55)!important}
.uw-spec[aria-pressed="true"] .uw-spec-cap{box-shadow:inset 0 2px 3px rgba(255,255,255,.08),0 0 0 2px rgba(214,169,79,.95),0 0 12px 3px rgba(214,169,79,.5),0 2px 0 #000!important}
.uw-name{font-family:"IM Fell English",Georgia,serif!important;font-weight:400!important;font-style:normal;letter-spacing:.08em;transform:none!important;
  background:linear-gradient(180deg,#f6e3a4 0%,#d9b05a 42%,#a77826 55%,#e8c879 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;
  filter:drop-shadow(0 -.6px 0 rgba(0,0,0,.95)) drop-shadow(0 .7px 0 rgba(255,226,150,.35))}
.uw-spec svg{fill:url(#uwgold2)!important;width:46%!important;filter:drop-shadow(0 -.6px 0 rgba(0,0,0,.95)) drop-shadow(0 .7px 0 rgba(255,226,150,.35))!important}
.uw-spec svg .uw-heart-in{fill:none;stroke:rgba(90,58,10,.55);stroke-width:1}
/* postcard: write straight onto the card */
.sheet.pc-write{cursor:text}
.pc-caret{display:none;position:absolute;width:2px;background:#1f2a4d;animation:pcblink 1s steps(1) infinite;pointer-events:none;z-index:2}
.sheet.pc-write:focus-within .pc-caret{display:block}
@keyframes pcblink{50%{opacity:0}}
.pc-keys{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px auto 0;max-width:560px}
.pc-keys .pc-spec{position:relative;width:56px;height:56px;flex:0 0 auto}
.pc-keys-note{flex:1;text-align:center;font-style:italic;margin:0}
/* postcard stickers */
.sheet.pc-write{touch-action:none}
.sheet.pcs-over{outline:2px dashed rgba(200,166,106,.8);outline-offset:4px}
.pc-stickers{margin:16px auto 0;max-width:560px;display:grid;gap:8px}
.pcs-tray{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;padding:12px;border:1px dashed rgba(200,166,106,.45);border-radius:4px;background:rgba(255,255,255,.03)}
.pcs{position:relative;display:grid;place-items:center;min-width:90px;min-height:54px;padding:8px 12px;border:0;border-radius:3px;cursor:grab;touch-action:none;
  background:#f1e9d6;box-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 12px rgba(6,10,20,.35);transform:rotate(-1.5deg);transition:opacity .2s,transform .15s}
.pcs:nth-child(2){transform:rotate(1.2deg)}
.pcs:hover{transform:rotate(0) scale(1.03)}
.pcs.placed{opacity:.35}
.pcs span{font-family:var(--f-body);font-style:italic;color:var(--ink-muted);font-size:.9rem}
.pcs span:empty{display:none}
.pcs-note{text-align:center;margin:0;font-style:italic}
.pcs-ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%) rotate(-3deg) scale(1.06);filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
/* postcard front lettering */
.pcpick,.pc-front,.pc-arrive{container-type:inline-size}
.pct-host{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pct{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;line-height:1;font-size:calc(var(--fs) * 1cqw);pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.pc-front .pct,.pc-arrive .pct{pointer-events:none;cursor:default}
.pct-retro{font-family:"Alfa Slab One",Rockwell,"Courier New",serif;text-transform:uppercase;letter-spacing:.03em;color:#f6e7bd;
  text-shadow:-.03em -.03em 0 #a8322d,.03em -.03em 0 #a8322d,-.03em .03em 0 #a8322d,.03em .03em 0 #a8322d,.06em .07em 0 #1e2638,.08em .1em .12em rgba(0,0,0,.45)}
.pct-script{font-family:"Pacifico","Brush Script MT",cursive;color:#fff8ea;transform:translate(-50%,-50%) rotate(-6deg);
  text-shadow:0 .035em 0 #a8322d,.03em .07em 0 rgba(30,38,56,.85),0 .1em .18em rgba(0,0,0,.45)}
.pct-engraved{font-family:"Abril Fatface","Didot","Bodoni 72",Georgia,serif;text-transform:uppercase;letter-spacing:.07em;
  background:linear-gradient(180deg,#fbeec4 0%,#e0b860 40%,#a8792a 55%,#efd28a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(.02em .03em 0 rgba(40,24,6,.95)) drop-shadow(0 .06em .1em rgba(0,0,0,.5))}
.pct-poster{font-family:"Bebas Neue","Oswald","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.14em;color:#ffffff;
  text-shadow:.05em .05em 0 #a8322d,.1em .1em 0 #1e2638,0 .1em .2em rgba(0,0,0,.35)}
.pcpick.has span{top:10px;left:10px;right:auto;bottom:auto;z-index:2}
.pct-edit{width:min(100%,420px);display:grid;gap:10px;margin-top:4px}
.pct-styles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pct-styles button{display:grid;justify-items:center;gap:4px;padding:8px 4px 6px;border:1px dashed rgba(200,166,106,.45);border-radius:3px;background:rgba(255,255,255,.03);color:var(--desk-muted);font-size:.85rem;font-style:italic}
.pct-styles button[aria-pressed="true"]{border:1px solid var(--gold);background:rgba(200,166,106,.14);color:var(--desk-ink)}
.pct-s{position:static;transform:none;font-size:1.7rem;line-height:1.1;pointer-events:none}
.pct-s.pct-script{transform:rotate(-6deg)}
.pct-hint{margin:0;text-align:center;font-style:italic}
/* the wax seal: a press of the thumb, it pops loose from the envelope and rides up on the tip of the flap */
.env-seal{background:none!important}
.env-seal::before{content:""!important;display:block!important;position:absolute;inset:0;box-shadow:none;border-radius:0;background:var(--si,var(--seal)) center/contain no-repeat}
.env-seal::after{content:none!important;display:none!important}
/* once the flap is folded back only the wax's underside shows — the part past the flap's tip, behind the rising letter */
.env-seal.under{z-index:1;filter:drop-shadow(0 1px 1.5px rgba(40,10,5,.4))}
.env-seal.under::before{background-image:var(--siu,var(--seal-under));clip-path:polygon(0 0,100% 0,100% 88.7%,50% 50%,0 88.7%)}
.env.breaking .env-seal{animation:sealpress .34s ease-in-out}
@keyframes sealpress{0%{transform:none}45%{transform:translateY(1.5px) scale(.94)}75%{transform:scale(.97) rotate(-1.5deg)}100%{transform:none}}
.env.broken.open .env-seal{transition:none;opacity:1}
.env.broken.open .env-flap{transition:transform .8s cubic-bezier(.45,.05,.35,1) .22s,z-index 0s .6s}
.env.broken.open .env-letter{transition:transform .9s cubic-bezier(.2,.8,.2,1) .7s}
.env.broken.open .env-pola{transition:transform .9s cubic-bezier(.2,.8,.2,1) .95s}
.env.broken.open .env-keep{transition:transform .9s cubic-bezier(.2,.8,.2,1) 1s}