:root{
  --bg:#fff9f3;
  --surface:#fffefb;
  --ink:#163f37;
  --muted:#67766f;
  --mint:#68bc98;
  --mint-deep:#3f9477;
  --pink:#efa5b7;
  --peach:#f7c69c;
  --yellow:#f2dc78;
  --line:#e4ddd4;
  --shadow:0 24px 70px rgba(22,63,55,.12);
}

*{box-sizing:border-box}

html{min-height:100%}

body{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 8% 10%,rgba(239,165,183,.34),transparent 22%),
    radial-gradient(circle at 92% 86%,rgba(104,188,152,.28),transparent 23%),
    linear-gradient(135deg,#fff4e5 0%,var(--bg) 52%,#edf8f2 100%);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.56;
}

body:before,
body:after{
  content:"";
  position:fixed;
  z-index:-1;
  border-radius:38% 62% 58% 42%;
  transform:rotate(18deg);
}

body:before{
  width:104px;
  height:104px;
  left:6%;
  bottom:12%;
  background:rgba(242,220,120,.68);
}

body:after{
  width:84px;
  height:84px;
  right:8%;
  top:10%;
  background:rgba(247,198,156,.7);
  transform:rotate(-14deg);
}

a{color:inherit}

.preview-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px 20px;
}

.preview-card{
  width:min(720px,100%);
  padding:48px;
  overflow:hidden;
  position:relative;
  background:rgba(255,254,251,.94);
  border:1px solid rgba(22,63,55,.09);
  border-radius:26px 26px 50px 26px;
  box-shadow:var(--shadow);
}

.preview-card:after{
  content:"";
  position:absolute;
  width:118px;
  height:118px;
  right:-48px;
  top:-42px;
  border-radius:50%;
  background:var(--pink);
  opacity:.72;
}

.preview-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:1;
  color:var(--ink);
  font-size:23px;
  font-weight:900;
  letter-spacing:-.045em;
  text-decoration:none;
}

.preview-brand-mark{
  width:42px;
  height:42px;
  position:relative;
  border-radius:15px 15px 19px 13px;
  background:var(--mint);
  box-shadow:inset 0 0 0 1px rgba(22,63,55,.05);
  transform:rotate(-3deg);
}

.preview-brand-mark:before{
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  right:-4px;
  top:5px;
  border:3px solid var(--surface);
  border-radius:50%;
  background:var(--pink);
}

.preview-copy{margin:68px 0 36px}

.preview-eyebrow,
.preview-status{
  display:inline-block;
  padding:7px 11px;
  border-radius:9px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.preview-eyebrow{background:#fff7cf}

h1{
  max-width:600px;
  margin:16px 0 20px;
  color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
  font-size:clamp(48px,9vw,78px);
  letter-spacing:-.055em;
  line-height:.96;
}

.preview-copy p{
  max-width:590px;
  margin:0;
  color:var(--muted);
  font-size:18px;
}

.preview-status{
  background:#e6f5ee;
  color:var(--mint-deep);
}

.preview-form{
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff5ea;
}

.preview-form label{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  font-weight:800;
}

.preview-form-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}

.preview-form input,
.preview-form button{
  min-height:48px;
  border-radius:999px;
  font:inherit;
}

.preview-form input{
  min-width:0;
  padding:0 17px;
  border:1px solid #d5cec4;
  background:#fff;
  color:var(--ink);
}

.preview-form button{
  padding:0 20px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  font-weight:820;
}

.preview-form input:focus-visible,
.preview-form button:focus-visible,
.preview-entry:focus-visible{
  outline:3px solid rgba(104,188,152,.42);
  outline-offset:3px;
}

.preview-error{
  margin:12px 2px 0;
  color:#9b3851;
  font-size:14px;
  font-weight:700;
}

.preview-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:56px;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}

.preview-footer a{
  color:var(--ink);
  font-weight:750;
  text-underline-offset:3px;
}

.preview-entry{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  position:fixed;
  right:14px;
  bottom:14px;
  border-radius:50%;
  color:var(--ink);
  opacity:.16;
  transition:opacity .18s ease,background .18s ease;
}

.preview-entry:hover,
.preview-entry:focus-visible{
  background:rgba(255,255,255,.7);
  opacity:.72;
}

.preview-entry span{
  width:8px;
  height:8px;
  position:relative;
  border:2px solid currentColor;
  border-radius:50%;
}

.preview-entry span:after{
  content:"";
  width:2px;
  height:7px;
  position:absolute;
  left:1px;
  top:6px;
  border-radius:999px;
  background:currentColor;
}

@media(max-width:620px){
  .preview-shell{padding:20px 14px}
  .preview-card{padding:30px 24px;border-radius:22px 22px 38px 22px}
  .preview-copy{margin:52px 0 30px}
  .preview-form-row{grid-template-columns:1fr}
  .preview-form button{width:100%}
  .preview-footer{display:grid;margin-top:42px}
}

@media(prefers-reduced-motion:reduce){
  .preview-entry{transition:none}
}