/* Base. */
:root{
  --radius: 24px;
  --shadow: 0 20px 60px rgba(0,0,0,.25);
  --txt: #0f1020;
  --txtLight: #5a5b74;

  /* Personal. */
  --pink-50:  #fff1f6;
  --pink-100: #ffe2ec;
  --pink-200: #ffd0df;
  --pink-300: #ffbfd2;
  --pink-400: #ffafc7;
  --pink-500: #ff9dbb;

  --pastel-pink-grad:
    linear-gradient(135deg,
      var(--pink-200) 0%,
      var(--pink-300) 50%,
      var(--pink-400) 100%
    );

  --pastel-outline-color: #e9c8de;

  --pastel-rainbow:
    linear-gradient(135deg,
      #ffd6e7 0%,
      #ffe6d6 17%,
      #fff8cc 34%,
      #d8ffe3 51%,
      #d6f1ff 68%,
      #e7dcff 85%,
      #ffd6f7 100%
    );

  /* Professional. */
  --sleek-bg: #0b0c12;
  --sleek-grad:
    radial-gradient(1200px 800px at 100% 0%, #121420 0%, #0b0c12 55%, #07070c 100%),
    radial-gradient(400px 240px at 80% 20%, rgba(247, 205, 186, .12), transparent 60%);
  --rose-50:  #fff6f2;
  --rose-100: #fde8e1;
  --rose-200: #f7d8c7;
  --rose-300: #eec0ac;
  --rose-400: #d99e8e;
  --rose-500: #b97a6b;
  --rose-600: #b76e79;
  --rose-700: #8f5a55;

  --sleek-accent: var(--rose-600);
  --sleek-accent-ghost: rgba(183, 110, 121, .45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--txt);
  background:#0a0a0f;
}

/* Layout. */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height:100vh;
}
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}

.panel{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(28px, 4vw, 48px);
  isolation:isolate;
}
.panel::before, .panel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  transition:opacity .6s ease, transform .6s ease;
}

/* Cards. */
.card{
  width:min(640px, 92%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: clamp(28px, 4vw, 48px);
  display:grid; gap:16px;
}
.card.pastel{
  background: rgba(255,255,255,.75);
  border: 2px solid rgba(255,255,255,.8);
  text-align:center;
}
.card.sleek{
  background: rgba(13,14,21,.6);
  border: 1px solid rgba(183,110,121,.25);
  color:#f3e9ef;
  text-align:left;
}

/* Text. */
.title{
  font-size: clamp(32px, 5vw, 56px);
  line-height:1.02; margin:0; letter-spacing:.2px;
}
.subtitle{
  margin:0 0 8px 0;
  font-size: clamp(15px, 2.2vw, 18px);
  color:var(--txtLight);
}
.card.sleek .title{ color:#f8edf2; }
.card.sleek .subtitle{ color:#d9c3c9; }

/* Buttons. */
.actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.actions.start{ justify-content:flex-start; }

.btn{
  appearance:none; border:none; cursor:pointer;
  border-radius: 14px;
  padding: 14px 20px;
  font-weight:700; letter-spacing:.2px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  outline-offset: 3px; text-decoration:none; display:inline-block;
  position: relative;
  background-clip: padding-box, border-box;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

/* Buttons. */
.btn-pastel{
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
  color:#4b3f57;
  box-shadow: 0 10px 30px rgba(255, 159, 203, .35);
}

/* Personal pastel rainbow outline. */
.card.pastel .btn-pastel:hover{
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, var(--pink-400), var(--pink-500)) padding-box,
    var(--pastel-rainbow) border-box;
  box-shadow:
    0 10px 30px rgba(255, 159, 203, .45),
    0 0 0 0 rgba(0,0,0,0);
}

/* Professional white outline. */
.btn-sleek{
  background: linear-gradient(135deg, var(--rose-200), var(--rose-600));
  color:#1a1213;
  box-shadow: 0 10px 30px rgba(183,110,121,.35);
}
.card.sleek .btn-sleek:hover{
  border: 2px solid rgba(255,255,255,.9);
  background: linear-gradient(135deg, var(--rose-200), var(--rose-600));
  box-shadow:
    0 10px 30px rgba(183,110,121,.45),
    0 0 0 0 rgba(0,0,0,0);
}

/* Buttons. */
.btn-outline{ background: transparent; border:1.5px solid currentColor; }

.pastel-outline{
  color:#5a5b74;
  border-color: var(--pastel-outline-color);
}

/* Personal rounded buttons. */
.card.pastel .pastel-outline:hover{
  color:#4b3f57;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) padding-box,
    var(--pastel-rainbow) border-box;
  box-shadow: 0 10px 26px rgba(186,148,255,.25);
}

/* Professional rounded buttons. */
.sleek-outline{
  color:#f3e9ef;
  border-color: var(--sleek-accent-ghost);
}
.card.sleek .sleek-outline:hover{
  color:#f8edf2;
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(183,110,121,.12);
  box-shadow: 0 10px 26px rgba(183,110,121,.25);
}

/* Panel backgrounds. */
.panel.pastel{ background: var(--pastel-pink-grad); }
.panel.pastel::after{
  background:
    radial-gradient(500px 260px at 20% 90%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(380px 220px at 80% 15%, rgba(255,255,255,.35), transparent 60%);
  mix-blend-mode: screen;
}
.panel.sleek{ background: var(--sleek-grad); }

/* Watermark. */
.mark{
  position:absolute; inset:24px auto auto 24px;
  font-weight:800; opacity:.14; letter-spacing:.1em; text-transform:uppercase;
  font-size:12px; color:#000;
}
.mark.right{ inset:24px 24px auto auto; color:#eec0ac; }

/* Accessibility. */
@media (prefers-reduced-motion: reduce){
  .panel::before, .panel::after, .btn{ transition:none !important; }
  .btn:hover{ transform:none; }
}