/* Momen di Pakem. The hero actions ("Kartu Pos Hari Ini"): a card that carries a small copy of the Story people get (the live
   day counter and today's postmark, filled by foto-pakem.js), the button to the message board, and Instagram and TikTok as a quiet line. */
.hk-root{--hk-ease:cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;align-items:center;gap:6px;width:min(100%,340px);margin:0 auto;padding-top:16px;font-family:Arial,Helvetica,sans-serif;text-align:left}
.hk-root *{box-sizing:border-box}
.hk-make{position:relative;display:block;width:100%;min-height:138px;margin:0;padding:15px 14px 15px 118px;border:1px solid #fbf8ef;border-radius:22px;background:linear-gradient(180deg,#fbf8ef,#f6f1e4);color:#17352f;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:0 3px 0 #e2c3a0,0 16px 36px -14px #17352fa6;transition:transform .35s var(--hk-ease),box-shadow .35s}
.hk-make:active{transform:translateY(2px);box-shadow:0 1px 0 #e2c3a0,0 8px 20px -12px #17352fa6}
/* two-tone ring (cream on ink) so focus shows over the card and over the dark foot of the hero photo */
.hk-root .hk-make:focus-visible{outline:2px solid #fbf8ef;outline-offset:3px;box-shadow:0 3px 0 #e2c3a0,0 0 0 7px #17352f}

/* the mini Story: the same postcard the camera makes, at 88px wide */
.hk-story{position:absolute;left:16px;bottom:13px;width:88px;height:156px;border-radius:7px;overflow:hidden;background:linear-gradient(180deg,#f6f1e4e8,#f6f1e4ee 70%,#dce2cff0),url(/assets/pakem.webp) 50% 0/cover #f6f1e4;box-shadow:0 14px 24px -10px #17352f80,0 2px 5px #17352f26,0 0 0 .5px #87634c4d;transform:rotate(-7deg);transform-origin:40% 100%;transition:translate .5s var(--hk-ease),rotate .5s var(--hk-ease),scale .5s var(--hk-ease);animation:hk-rise 1s 1.6s var(--hk-ease) backwards,hk-nudge 7s 5s ease-in-out 3;pointer-events:none}
.hk-story>span{position:absolute}
.hk-bar{left:24%;right:24%;height:1.5px;border-radius:1px;background:#87634c59}
.hk-bar-top{left:31.5%;right:31.5%;top:15.9%;height:3.8%;border-radius:0;background:url(/assets/kop.webp?v=20261031) 50% 50%/contain no-repeat;filter:drop-shadow(0 1px 1.5px #14140a40)}
.hk-bar-foot{top:94.4%;left:18%;right:18%;height:1px;background:#303e3159}
.hk-card{left:10.2%;top:22.7%;width:79.6%;height:58.7%;background:repeating-linear-gradient(-45deg,#87634c 0 2.3px,#fbf8ef 2.3px 4.3px,#e9b949 4.3px 6.6px,#fbf8ef 6.6px 8.6px);box-shadow:0 3px 6px -1px #87634c40;transform:rotate(-1.5deg)}
.hk-card::before{content:"";position:absolute;inset:2.4px;background:#fbf8ef}
.hk-photo{position:absolute;left:5px;right:5px;top:5px;height:84%;background:url(/assets/pakem.webp) 62% 62%/cover #dce2cf}
.hk-line{position:absolute;left:6px;bottom:5px;width:54%;height:1.5px;border-radius:1px;background:#303e318c}
.hk-pm{left:calc(78% - 12px);top:calc(29% - 12px);width:24px;height:24px;padding-top:1px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #87634ccc;border-radius:50%;background:#fbf8efa6;box-shadow:inset 0 0 0 1.6px #fbf8efa6,inset 0 0 0 2.4px #87634c99;color:#87634c;transform:rotate(-12deg);line-height:1}
.hk-pm-d{font:700 7px/1 Georgia,'Times New Roman',serif}
.hk-pm-m{margin-top:.5px;font:700 3.6px/1 Arial,sans-serif;letter-spacing:.3px}
.hk-stamp{left:calc(77.6% - 12.8px);top:calc(71.7% - 16px);filter:drop-shadow(0 1.5px 1.6px #17352f59);transform:rotate(4.3deg)}
.hk-perf{display:block;width:25.6px;height:32px;padding:2.2px;background:#fbf8ef;-webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle at 50% 50%,#0000 .95px,#000 1.2px) -1.6px -1.6px/3.2px 3.2px;mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle at 50% 50%,#0000 .95px,#000 1.2px) -1.6px -1.6px/3.2px 3.2px}
.hk-perf svg{display:block;width:100%;height:100%}
.hk-tape{left:calc(77.6% - 11px);top:calc(71.7% - 19px);width:13px;height:4.6px;background:#e9b949a6;transform:rotate(-24deg)}
.hk-ops{left:22.2%;right:22.2%;top:84.1%;height:7.2%;border-radius:2.5px;background:#fbf8efe6;box-shadow:0 1px 2.5px #17352f2e}
.hk-ops i{position:absolute;left:8%;right:8%;bottom:24%;height:1px;border-radius:1px;background:#dcdcca}
.hk-ops i::before{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--done,0%);border-radius:1px;background:#87634c}
.hk-day{left:27%;top:85.4%;font:400 7px/1 Georgia,'Times New Roman',serif;letter-spacing:-.2px;color:#17352f;white-space:nowrap}
.hk-of{right:27%;top:86.4%;font:italic 4.6px/1 Georgia,'Times New Roman',serif;color:#303e31bf;white-space:nowrap}

/* the words and the action */
.hk-copy{display:flex;flex-direction:column;align-items:flex-start}
.hk-kicker{font-size:10.5px;line-height:1.3;letter-spacing:1.4px;text-transform:uppercase;color:#87634c}
.hk-title{margin-top:4px;font:400 26px/1.04 Georgia,'Times New Roman',serif;letter-spacing:-.6px;color:#17352f}
.hk-title i{color:#87634c}
.hk-go{display:inline-flex;align-items:center;gap:7px;min-height:34px;margin-top:11px;padding:0 12px 0 11px;border-radius:999px;background:#17352f;color:#fbf8ef;font-size:12.5px;font-weight:700;letter-spacing:.2px;box-shadow:0 6px 14px -6px #17352fa6}
.hk-go svg{flex:none;width:16px;height:16px;color:#e9b949}
.hk-go .hk-arrow{width:14px;height:14px;color:#fbf8ef;transition:transform .35s var(--hk-ease)}
@media(hover:hover){.hk-make:hover{transform:translateY(-2px);box-shadow:0 5px 0 #e2c3a0,0 20px 40px -14px #17352fb3}.hk-make:hover .hk-story{translate:0 -8px;rotate:-3deg;scale:1.04}.hk-make:hover .hk-arrow{transform:translateX(3px)}}
.hk-make:focus-visible .hk-story,.hk-make:active .hk-story{translate:0 -8px;rotate:-3deg;scale:1.04}

/* Instagram, a quiet line under it */
.hk-social{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 4px;margin:0;color:#fbf8ef;font-size:12.5px;line-height:1.2;text-shadow:0 1px 3px #17352fe6,0 0 12px #17352f80}
.hk-social-name{padding:0 6px 0 4px}
.hk-social-name b{font-weight:700}
.hk-ig{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:999px;color:#fbf8ef;font-size:12.5px;line-height:1.2;text-decoration:none;text-shadow:0 1px 3px #17352fe6,0 0 12px #17352f80;-webkit-tap-highlight-color:transparent;transition:background .25s}
.hk-ig>span:not(.sr-only){text-decoration:underline;text-decoration-color:#e9b949;text-decoration-thickness:1.5px;text-underline-offset:4px}
.hk-ig svg{flex:none;width:17px;height:17px;color:#e9b949;filter:drop-shadow(0 1px 2px #17352fcc)}
@media(hover:hover){.hk-ig:hover{background:#17352f33}}
.hk-ig:active{background:#17352f33}
.hk-root .hk-ig:focus-visible{outline:2px solid #fbf8ef;outline-offset:2px;box-shadow:0 0 0 6px #17352f}

@keyframes hk-rise{from{transform:translateY(10px) rotate(-3deg)}}
@keyframes hk-nudge{0%,86%,100%{transform:rotate(-7deg)}91%{transform:translateY(-6px) rotate(-10deg)}95%{transform:translateY(1px) rotate(-6.4deg)}}
@media(max-width:360px){.hk-make{padding-left:110px}.hk-story{left:13px;width:82px;height:146px}.hk-title{font-size:24px}}
@media(prefers-reduced-motion:reduce){.hk-story,.hk-make,.hk-go .hk-arrow,.hk-ig{animation:none;transition:none}}
/* the third action, a smaller sister of the main card: a blank postcard with lines and a stamp, and "Kirim kartu pos";
   it walks the page down to the board at the end of Postcard perjalanan (pesan.js) */
.hk-post{position:relative;display:flex;align-items:center;gap:13px;width:100%;min-height:72px;margin:4px 0 0;padding:10px 12px 10px 14px;border:1px solid #fbf8ef;border-radius:18px;background:linear-gradient(180deg,#fbf8efeb,#f6f1e4eb);color:#17352f;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 3px 0 #e2c3a0,0 12px 28px -14px #17352fa6;transition:transform .35s var(--hk-ease),box-shadow .35s}
.hk-post:active{transform:translateY(2px);box-shadow:0 1px 0 #e2c3a0,0 6px 16px -10px #17352fa6}
.hk-note{position:relative;flex:none;width:58px;height:42px;border:3px solid transparent;border-radius:3px;background:linear-gradient(#fbf8ef,#fbf8ef) padding-box,repeating-linear-gradient(135deg,#87634c 0 4px,#fbf8ef 4px 6px,#e9b949 6px 10px,#fbf8ef 10px 12px) border-box;box-shadow:0 5px 10px -5px #17352f80;transform:rotate(-6deg);transition:transform .45s var(--hk-ease)}
.hk-note-lines{position:absolute;left:5px;right:20px;top:9px;height:18px;background:repeating-linear-gradient(#0000 0 5px,#c9bf9f 5px 6px)}
.hk-note-stamp{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:13px;height:16px;border-radius:1px;background:#17352f;color:#e9b949;outline:1px dashed #fbf8ef;outline-offset:-2px}
.hk-note-stamp svg{width:9px;height:9px}
.hk-post-copy{display:flex;flex:1;min-width:0;flex-direction:column}
.hk-post-kicker{font-size:10px;line-height:1.3;letter-spacing:1.3px;text-transform:uppercase;color:#87634c}
.hk-post-title{margin-top:2px;font:400 20px/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.4px;color:#17352f}
.hk-post-go{display:inline-flex;flex:none;align-items:center;gap:5px;min-height:32px;padding:0 11px 0 13px;border:1px solid #17352f;border-radius:999px;color:#17352f;font-size:12.5px;font-weight:700}
.hk-post-go svg{width:14px;height:14px;transition:transform .35s var(--hk-ease)}
@media(hover:hover){.hk-post:hover{transform:translateY(-2px);box-shadow:0 5px 0 #e2c3a0,0 16px 32px -14px #17352fb3}.hk-post:hover .hk-note{transform:rotate(-2deg) translateY(-3px)}.hk-post:hover .hk-post-go svg{transform:translateX(3px)}}
.hk-post:focus-visible .hk-note,.hk-post:active .hk-note{transform:rotate(-2deg) translateY(-3px)}
.hk-root .hk-post:focus-visible{outline:2px solid #fbf8ef;outline-offset:3px;box-shadow:0 3px 0 #e2c3a0,0 0 0 7px #17352f}
@media(prefers-reduced-motion:reduce){.hk-post,.hk-note,.hk-post-go svg{transition:none}}
/* on a short screen the hero card can reach the scroll cue pinned to the first screen; then the cue steps aside (foto-pakem.js) */
.scroll-cue.is-crowded{opacity:0;visibility:hidden}
/* phones: more air between the countdown and the card (the small Story never touches it), the board card slimmer, and
   Instagram and TikTok as two small tiles beside it, so nothing hides under the browser bar. The card drops its arrow there
   so "Kirim kartu pos" stays on one line next to the tiles. */
@media(max-width:599px){
  .hk-root{display:grid;grid-template-columns:1fr auto;gap:12px 10px;padding-top:30px}
  .hk-make{grid-column:1/-1}
  .hk-post{grid-column:1;margin:0;min-height:62px;padding:8px 10px 8px 12px;gap:11px}
  .hk-note{width:48px;height:35px}
  .hk-note-lines{top:7px;right:17px;height:15px}
  .hk-post-kicker{font-size:9.5px;letter-spacing:1.1px}
  .hk-post-title{font-size:18px}
  .hk-post-go{display:none}
  .hk-social{grid-column:2;align-self:stretch;flex-wrap:nowrap;gap:8px}
  .hk-social-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hk-ig{align-self:stretch;justify-content:center;width:50px;min-height:62px;padding:0;border:1px solid #fbf8ef;border-radius:18px;background:linear-gradient(180deg,#fbf8efeb,#f6f1e4eb);color:#17352f;text-shadow:none;box-shadow:0 3px 0 #e2c3a0,0 12px 28px -14px #17352fa6}
  .hk-ig svg{width:24px;height:24px;color:#87634c;filter:none}
  .hk-ig>span:not(.sr-only){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* a phone whose visible screen is short (foto-pakem.js adds .is-short): the empty space around the wordmark tightens
   before anything is drawn smaller, so the whole first screen fits with Jelajahi Pakem under the cards */
.page.is-short{padding-top:16px}
.page.is-short main{padding-top:38px}
.page.is-short .description{margin:12px 0 16px}
.page.is-short .countdown{margin-bottom:12px}
.page.is-short .hk-root{padding-top:24px}
/* wider screens (layout B): the two cards stand side by side as a pair of postcards, under a countdown card as wide as the
   pair, so every edge lines up; Instagram and TikTok stay a quiet line under them. Phones keep the single column. */
@media(min-width:600px){
  .countdown{width:min(100%,600px)}
  .hk-root{width:min(100%,600px);display:grid;grid-template-columns:1.45fr 1fr;align-items:stretch;gap:10px 12px;padding-top:14px}
  .hk-make{grid-column:1;min-height:150px}
  .hk-post{grid-column:2;width:auto;margin:0;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;padding:16px 14px 14px;border-radius:22px}
  .hk-post .hk-note{width:64px;height:46px}
  .hk-post-title{font-size:22px}
  .hk-social{grid-column:1/-1;justify-self:center}
}
/* the poster (wide screens and phones held sideways, see style.css): both cards keep the countdown's rhythm, the kicker on the
   first line, the title on the second and the button along the bottom, so the three cards of the row read across as one. The
   blank postcard of the board card sits in its bottom corner, opposite its button. Instagram and TikTok keep a full touch
   height but take less room in the row (negative margins). */
@media(min-width:560px) and (min-aspect-ratio:5/4){
  .js .hk-make{display:flex;min-height:0;padding:17px 16px 15px 120px;border-radius:20px}
  .js .hk-copy{flex:1}
  .js .hk-kicker,.js .hk-post-kicker{font-size:11px;line-height:1.3;letter-spacing:1.4px}
  .js .hk-title,.js .hk-post-title{margin-top:5px;font-size:26px;line-height:1.04;letter-spacing:-.6px}
  .js .hk-go{margin-top:auto}
  .js .hk-post{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"copy copy" ". ." "go note";gap:0;padding:17px 18px 15px;border-radius:20px}
  .js .hk-post-copy{grid-area:copy}
  .js .hk-post-go{display:inline-flex;grid-area:go;align-self:end;min-height:34px;margin-top:12px}
  .js .hk-post .hk-note{grid-area:note;align-self:end;justify-self:end;width:58px;height:42px;margin:0 2px 1px 0}
  .js .hk-social{margin-top:10px}
  .js .hk-ig{margin:-6px 0}
  /* a phone held sideways (style.css shrinks the wordmark there too): the small Story is drawn smaller, so it stands less high */
  @media(max-height:460px){.js .hk-story{zoom:.8}.js .hk-make{padding-left:104px}}
}

/* the camera sheet, in the site's paper and forest colours */
.fp-dialog{width:min(430px,calc(100vw - 32px));height:min(860px,calc(100dvh - 32px));max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:24px;background:#f6f1e4;color:#303e31;overflow:hidden;box-shadow:0 30px 80px -30px #0b1410}
.fp-dialog::backdrop{background:#17352fcc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media(max-width:560px){.fp-dialog{width:100vw;height:100dvh;border-radius:0}}
.fp-sheet{display:flex;flex-direction:column;height:100%;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));gap:10px}
.fp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fp-top h2{margin:0;font:400 24px/1.1 Georgia,'Times New Roman',serif;color:#17352f}
.fp-top h2 i{color:#87634c}
.fp-close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #dcdcca;border-radius:50%;background:#fbf8ef;color:#303e31;cursor:pointer}
.fp-close svg{width:18px;height:18px}
.fp-inapp{margin:0;padding:10px 12px;border-radius:12px;background:#efe5c7;color:#5b4a1d;font-size:12.5px;line-height:1.45}
.fp-stage{position:relative;flex:1 1 0;min-height:0;align-self:center;max-width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#e6ece0;box-shadow:inset 0 0 0 1px #dcdcca}
.fp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fp-video.is-mirrored{transform:scaleX(-1)}
/* the result: the postcard and its Senja look side by side, one stage wide each, moved by a swipe */
.fp-track{position:absolute;inset:0;display:flex;touch-action:pan-y;transition:transform .42s cubic-bezier(.22,1,.36,1);cursor:grab;-webkit-user-select:none;user-select:none}
.fp-track:active{cursor:grabbing}
.fp-slide{position:relative;flex:0 0 100%;width:100%;height:100%;background:#f4eedf}
.fp-slide[data-look="senja"]{background:#16243a}
.fp-result,.fp-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.fp-result[hidden],.fp-clip[hidden]{display:none}
.fp-work{position:absolute;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
.fp-work video{width:2px;height:2px}
.fp-looks{display:flex;gap:6px;padding:4px;border:1px solid #dcdcca;border-radius:99px;background:#fbf8ef}
.fp-looks[hidden]{display:none}
.fp-look{display:grid;place-items:center;width:36px;height:32px;padding:0;border:0;border-radius:99px;background:none;color:#87634c;cursor:pointer;transition:background .25s,color .25s}
.fp-look svg{width:18px;height:18px}
.fp-look[aria-pressed="true"]{background:#17352f;color:#f6f1e4}
.fp-look:last-child[aria-pressed="true"]{background:#16243a;color:#f3e27a}
.fp-pip{position:absolute;z-index:1;left:12px;bottom:12px;width:30%;aspect-ratio:3/4;object-fit:cover;border:5px solid #fcfaf3;border-radius:4px;box-shadow:0 8px 20px -8px #0008;transform:rotate(-4deg) scaleX(-1);background:#17352f}
.fp-pip[hidden]{display:none}
/* the flash (the torch, or for the front camera the screen lit white) and the lens switch, over the camera */
.fp-flash{position:absolute;z-index:2;right:10px;top:8px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#17352fb3;color:#f6f1e4;cursor:pointer;transition:background .2s,color .2s}
.fp-flash svg{width:20px;height:20px}
.fp-flash[aria-pressed="true"]{background:#e9b949;color:#17352f}
.fp-flash[aria-pressed="true"] svg{fill:currentColor}
.fp-flash[hidden],.fp-lens[hidden],.fp-light[hidden]{display:none}
.fp-lens{position:absolute;z-index:2;left:50%;bottom:12px;display:flex;gap:4px;padding:4px;transform:translateX(-50%);border-radius:99px;background:#17352f66}
.fp-lens button{display:grid;place-items:center;min-width:38px;height:38px;padding:0 6px;border:0;border-radius:99px;background:#17352fcc;color:#f6f1e4;font:700 12.5px/1 Arial,Helvetica,sans-serif;cursor:pointer;transition:transform .2s,color .2s}
.fp-lens button[aria-pressed="true"]{color:#e9b949;transform:scale(1.1)}
.fp-light{position:fixed;inset:0;z-index:5;background:#fff;pointer-events:none}
.fp-dialog.is-lit{background:#fff}
.fp-dialog.is-lit .fp-stage{box-shadow:0 0 0 10px #fff,0 0 90px 36px #fff}
.fp-thumb{position:absolute;left:12px;bottom:12px;width:30%;aspect-ratio:3/4;object-fit:cover;border:5px solid #fcfaf3;border-radius:4px;box-shadow:0 8px 20px -8px #0008;transform:rotate(-4deg)}
.fp-step{position:absolute;z-index:2;left:50%;top:12px;margin:0;padding:6px 12px;transform:translateX(-50%);border-radius:99px;background:#f6f1e4e6;color:#303e31;font-size:12px;letter-spacing:.6px;white-space:nowrap}
.fp-count{position:absolute;inset:0;display:grid;place-items:center;margin:0;font:400 132px/1 Georgia,'Times New Roman',serif;color:#fcfaf3;text-shadow:0 6px 30px #0009;pointer-events:none}
.fp-fallback{position:absolute;inset:0;display:grid;align-content:center;gap:12px;padding:22px;background:#f4eedf}
.fp-fallback-text{margin:0 0 4px;font-size:14px;line-height:1.5;color:#303e31}
.fp-pick{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 16px;border:1px solid #17352f;border-radius:14px;background:#fbf8ef;color:#17352f;font-size:14.5px;cursor:pointer}
.fp-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.fp-pick:has(input:disabled){opacity:.45;cursor:default}
.fp-pick.is-done{background:#17352f;color:#f6f1e4}
.fp-pick.is-done span::after{content:" ✓"}
.fp-pick:focus-within{outline:2px solid #87634c;outline-offset:3px}
.fp-skip{justify-self:center;padding:6px 10px;border:0;background:none;color:#5d6852;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fp-controls{display:grid;justify-items:center;gap:8px}
.fp-shutter{width:74px;height:74px;padding:0;border:4px solid #17352f;border-radius:50%;background:#fcfaf3;box-shadow:inset 0 0 0 5px #f6f1e4,inset 0 0 0 40px #87634c;cursor:pointer;transition:transform .12s}
.fp-shutter:active{transform:scale(.93)}
.fp-shutter:disabled{opacity:.5}
/* Video: a red button inside the ring; while it records the button turns into a square and the ring fills over five seconds */
.fp-shutter{position:relative}
.fp-shutter.is-video{box-shadow:inset 0 0 0 5px #f6f1e4}
.fp-shutter.is-video::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#c4553d;transition:inset .2s,border-radius .2s}
.fp-shutter.is-rec::before{inset:21px;border-radius:7px}
.fp-shutter.is-rec::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(#c4553d calc(var(--p,0) * 1turn),#0000 0);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 4px))}
.fp-modes{display:flex;gap:4px;padding:3px;border:1px solid #dcdcca;border-radius:99px;background:#fbf8ef}
.fp-modes[hidden]{display:none}
.fp-mode{min-width:66px;height:32px;padding:0 14px;border:0;border-radius:99px;background:none;color:#5d6852;font:inherit;font-size:13px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:background .25s,color .25s}
.fp-mode[aria-pressed="true"]{background:#17352f;color:#f6f1e4}
.fp-done{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fp-done button,.fp-done a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 16px;border:1px solid #17352f;border-radius:99px;background:#fbf8ef;color:#17352f;font:inherit;font-size:14px;text-decoration:none;cursor:pointer}
.fp-done .fp-share{background:#17352f;color:#f6f1e4}
.fp-done .fp-share:disabled,.fp-done .fp-save:not([href]){opacity:.45;cursor:default}
.fp-done svg{width:18px;height:18px}
.fp-status{min-height:1em;margin:0;font-size:13px;line-height:1.4;color:#5d6852;text-align:center}
.fp-status:empty{display:none}
.fp-note{margin:0;font-size:11.5px;color:#7a856b;text-align:center}
.fp-dialog button:focus-visible,.fp-dialog a:focus-visible{outline:2px solid #87634c;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.fp-shutter,.fp-shutter::before,.fp-track,.fp-look,.fp-mode{transition:none}}