:root { color-scheme: light dark; --ink: #29263b; --muted: #777281; --paper: #faf8f4; --page-gradient: linear-gradient(135deg, #fbe5d9 0%, #efe3f4 50%, #dce9f8 100%); }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); background-image: var(--page-gradient); min-height: 100vh; color: var(--ink); font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
  button, a { -webkit-tap-highlight-color: transparent; }
  header { max-width: 1280px; margin: auto; padding: 34px 56px; display: flex; align-items: center; justify-content: space-between; }
  .brand { display: flex; gap: 11px; align-items: center; font-weight: 750; font-size: 23px; letter-spacing: -.8px; }
  .mark { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg,#f3ac89,#cc8bc9 55%,#739dea); display: grid; place-items: center; color: white; font-size: 23px; }
  main { max-width: 1280px; margin: auto; }
  .hero { padding: 65px 56px 45px; display: grid; grid-template-columns: 1fr 1.12fr; align-items: center; gap: 24px; min-height: 580px; }
  .eyebrow { font-size: 11px; font-weight: 650; letter-spacing: 2px; text-transform: uppercase; color: #8a7586; margin-bottom: 24px; display: flex; align-items: center; gap: 9px; }
  .spark { color: #b58dcc; font-size: 19px; }
  h1 { font-size: clamp(48px,5.3vw,76px); line-height: 1.035; letter-spacing: -4px; font-weight: 750; margin: 0 0 24px; }
  .headline-ending { white-space: nowrap; }
  h1 em { font-style: normal; color: #a97ac0; }
  .description { max-width: 320px; font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0 0 31px; }
  .download { display: inline-block; text-decoration: none; }
  .download img { display: block; width: 180px; height: 60px; }
  .gallery { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; isolation: isolate; }
  .gallery::before { content: ""; position: absolute; width: 430px; height: 320px; background: radial-gradient(ellipse,#eaddf0 0%,#f1e8df55 50%,transparent 70%); z-index: -2; }
  .wallpaper { position: absolute; width: 190px; height: 350px; border: 6px solid #fff; border-radius: 31px; box-shadow: 0 15px 25px #4c35551a; overflow: hidden; transition: background .4s, transform .4s; }
  .left { transform: translate(-142px, 15px) rotate(-12deg); background: linear-gradient(165deg,#f8dca1,#f4a98d 50%,#d982a3); z-index: -1; }
  .right { transform: translate(142px, 14px) rotate(12deg); background: linear-gradient(155deg,#cbd5f4,#9696df 50%,#54598c); z-index: -1; }
  .center { height: 380px; width: 202px; background: linear-gradient(160deg,#f9c5b5,#d3afd8 53%,#8da8e0); box-shadow: 0 22px 35px #4c355526; }
  .lockscreen { padding-top: 35px; text-align: center; color: #fff; text-shadow: 0 1px 12px #6d54721a; }
  .date { font-size: 11px; font-weight: 550; }
  .time { font-size: 52px; letter-spacing: -3px; line-height: 1.25; font-weight: 650; }
  .bottom-line { position: absolute; bottom: 9px; left: calc(50% - 26px); width: 52px; height: 4px; border-radius: 4px; background: #ffffffaa; }
  .palette-section { text-align: center; padding: 0 24px 48px; }
  .palette-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #918693; margin-bottom: 17px; }
  .palettes { display: flex; justify-content: center; gap: 14px; }
  .palette { border: 1px solid transparent; padding: 8px 12px; border-radius: 30px; background: transparent; cursor: pointer; color: var(--muted); font: inherit; font-size: 11px; display: flex; align-items: center; gap: 8px; transition: background .2s, border-color .2s; }
  .palette:hover { background: #fff8; }
  .palette[aria-pressed="true"] { background: white; border-color: #e4dce7; color: var(--ink); box-shadow: 0 3px 8px #29263b05; }
  .swatch { width: 24px; height: 24px; border-radius: 50%; background: var(--colors); }
  button:focus-visible, a:focus-visible { outline: 3px solid #9874bd; outline-offset: 5px; }
  .closing { border-top: 1px solid #e9e4e3; margin: 0 56px; padding: 25px 0 29px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 11px; color: #9a949e; }
  .closing p { margin: 0; }
  @media(min-width:1400px) { .hero { padding-top: 95px; padding-bottom: 70px; } }
  @media(max-width:800px) { header { padding: 25px 27px; } .hero { grid-template-columns: 1fr; text-align: center; padding: 38px 24px 16px; gap: 35px; } .eyebrow { justify-content: center; margin-bottom: 18px; } h1 { font-size: 57px; letter-spacing: -3px; } .description { margin: 0 auto 24px; font-size: 16px; } .gallery { height: 360px; } .wallpaper { width: 156px; height: 285px; border-width: 5px; border-radius: 26px; } .center { width: 173px; height: 325px; } .left { transform: translate(-103px,10px) rotate(-11deg); } .right { transform: translate(103px,10px) rotate(11deg); } .gallery::before { width: 100%; } .closing { margin: 0 27px; } .palettes { gap: 4px; flex-wrap: wrap; } .palette { padding: 7px 9px; } }
  @media(max-width:380px) { .wallpaper { width: 140px; } .center { width: 160px; } h1 { font-size: 49px; } .left { transform: translate(-78px,10px) rotate(-11deg); } .right { transform: translate(78px,10px) rotate(11deg); } .closing { gap: 15px; font-size: 10px; } }
  @media(prefers-color-scheme: dark) {
    :root { --ink: #f2edf6; --muted: #b4aabd; --paper: #1c1923; --page-gradient: linear-gradient(135deg, #322031 0%, #29213e 50%, #192a43 100%); }
    .eyebrow, .palette-label { color: #b7a6c0; }
    .spark, h1 em { color: #d3a6eb; }
    .closing { color: #a99aaf; }
    .gallery::before { background: radial-gradient(ellipse,#70548040 0%,#45334d20 50%,transparent 70%); }
    .wallpaper { border-color: #39313f; box-shadow: 0 15px 25px #0003; }
    .center { box-shadow: 0 22px 35px #0005; }
    .palette:hover { background: #ffffff0a; }
    .palette[aria-pressed="true"] { background: #302837; border-color: #54445e; box-shadow: 0 3px 8px #0002; }
    .closing { border-color: #39313f; }
    button:focus-visible, a:focus-visible { outline-color: #d3a6eb; }
  }
  @media(prefers-reduced-motion:reduce) { * { transition: none !important; } }