@font-face {
  font-family:Outfit;
  src:url("assets/fonts/Outfit-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
* { box-sizing:border-box; }
:root { color-scheme:dark; background:#050403; color:#f6e2cc; font-family:"Segoe UI",Tahoma,Arial,sans-serif; }
body, h1, p { margin:0; }
img { display:block; width:100%; height:auto; }
.stage {
  isolation:isolate; position:relative; overflow:clip; display:grid; grid-template-rows:1fr auto;
  align-items:center; justify-items:center; margin:auto; min-height:100vh; min-height:100svh;
  padding:clamp(46px,9vh,110px) 5vw clamp(42px,6vh,72px);
}
.wings { position:absolute; z-index:-2; overflow:hidden; inset:0; background:#030303; pointer-events:none; }
.wings i {
  position:absolute; top:-1%; bottom:-1%; width:34%; background:#030303 url("assets/site/garden.webp") 42% 58%/cover;
  mask-image:linear-gradient(90deg,#000 4%,#000d 22%,#0006 51%,#0001 76%,transparent 100%);
}
.wings i:first-child { left:0; }
.wings i:last-child { right:0; background-position:77% 18%; transform:rotate(180deg); }
.wings::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#030303b8 0%,transparent 23%,transparent 68%,#03030373 87%,#030303db 100%);
}
.invitation {
  align-self:center; display:flex; flex-direction:column; align-items:center; width:100%;
  padding:clamp(0px,2vh,22px) 0 clamp(28px,5vh,67px);
}
.signature { width:clamp(175px,17.3vw,260px); margin-bottom:clamp(20px,3.7vh,48px); filter:drop-shadow(0 0 .4px #82bda5); }
h1 { width:min(61vw,868px); position:relative; isolation:isolate; }
h1::before, .verse::before, .payment::before {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-48% -28%; background:radial-gradient(ellipse 50% 50% at center,#030303 46%,#030303ed 67%,transparent 100%);
}
h1 img { filter:drop-shadow(0 0 .55px #f6e2cc); }
.verse { position:relative; isolation:isolate; width:clamp(230px,23vw,330px); margin-top:clamp(8px,1.8vh,23px); }
.verse img { filter:brightness(1.14) drop-shadow(0 0 .55px #82bda5); }
.payment { width:min(100%,380px); position:relative; isolation:isolate; }
.payment::before { inset:-90% -40% -75%; }
.hand-number { width:89%; margin:0 auto clamp(11px,1.5vh,17px); filter:drop-shadow(0 0 .55px #f6e2cc); }
.payline { position:relative; direction:ltr; display:grid; grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr); align-items:center; padding-top:5px; border-top:1px solid #f6e2cc58; }
.digits {
  grid-column:2; display:inline-block; white-space:nowrap;
  font-family:Outfit,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(18px,1.5vw,22px); line-height:1.5; font-weight:400;
  font-variant-numeric:lining-nums tabular-nums; letter-spacing:.035em; unicode-bidi:isolate; user-select:all;
}
.digits span + span { margin-left:.48em; }
.copy { grid-column:3; justify-self:start; border:0; margin-left:3px; padding:0; display:grid; place-items:center; min-width:44px; min-height:44px; color:#f6e2cc; background:transparent; cursor:pointer; }
.copy-icon { display:block; width:14px; height:17px; border:1.5px solid; border-radius:2px; position:relative; }
.copy-icon::before { content:""; position:absolute; left:-5px; top:-5px; width:10px; height:13px; border-left:1.5px solid; border-top:1.5px solid; border-radius:2px 0 0; }
.copy:hover, .copy[data-state="copied"] { color:#a9d9c4; }
.copy[data-state="copied"] .copy-icon { border:0; border-bottom:2px solid; border-left:2px solid; width:17px; height:9px; border-radius:0; transform:translateY(-2px) rotate(-45deg); }
.copy[data-state="copied"] .copy-icon::before { display:none; }
.copy:focus-visible, .digits:focus-visible { outline:2px solid #82bda5; outline-offset:3px; border-radius:2px; }
.status { display:block; position:absolute; top:100%; width:100%; line-height:1.45; font-size:13px; text-align:center; }
.sr, .status:not(.manual) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
::selection { color:#030303; background:#b2dbc7; }
@media (max-width:680px) {
  .stage { padding:clamp(44px,10svh,95px) 5.8vw clamp(40px,6.4svh,64px); }
  .wings i { width:46%; background-size:auto 98%; mask-image:linear-gradient(90deg,#000c,#0008 29%,#0002 66%,transparent 100%); }
  .wings::after { background:linear-gradient(180deg,#03030388,transparent 15%,#030303be 32%,#03030391 57%,transparent 73%,#030303b8 90%,#030303e8 100%); }
  .invitation { padding:20px 0 clamp(36px,6svh,58px); }
  .signature { width:clamp(149px,43vw,200px); margin-bottom:clamp(27px,4.4svh,39px); }
  h1 { width:100%; }
  h1::before { inset:-77% -30%; }
  .verse { width:min(71%,244px); margin-top:clamp(19px,3.6svh,33px); }
  .payment { width:min(100%,320px); }
  .payment::before { inset:-110% -48% -80%; }
  .hand-number { width:92%; }
  .digits { font-size:clamp(16px,4.7vw,20px); }
  .digits span + span { margin-left:.37em; }
  .copy { margin-left:0; }
}
@media (max-height:570px) and (min-width:681px) {
  .stage { padding:25px 5vw 32px; }
  .invitation { padding:0 0 18px; }
  .signature { width:150px; margin-bottom:12px; }
  h1 { width:min(58vw,590px); }
  .verse { width:180px; margin-top:5px; }
}