:root{--paper:#f9f5ec;--white:#fffefa;--ink:#3b4b3e;--sage:#708b73;--rose:#ac697c;--line:#dce3d6;--soft:#f1f4ea;--gold:#d9ae68}
*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at top,#fffdf5,#f4f6eb 70%,#fbf2e8);min-height:100dvh}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid var(--rose);outline-offset:3px}[hidden]{display:none!important}
.masthead{text-align:center;padding:28px 14px 14px}.eyebrow,.overline{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:#9a6d75;font-weight:750}.masthead h1{font:normal clamp(32px,5vw,55px)/1.12 Georgia,serif;margin:9px 0;color:#526c57}.masthead h1 em{font-weight:normal;color:#a86d7f}.masthead p{color:#738475;margin:10px 0 0;font-size:14px}.layout{max-width:1260px;padding:12px 18px 28px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:18px;align-items:start}.panel{border:1px solid var(--line);background:#fffefaed;border-radius:24px;padding:18px;box-shadow:0 12px 34px #3e58400e}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.panel h2{font:normal 28px Georgia,serif;margin:3px 0 0}.zoom-tools{display:flex;align-items:center;gap:8px}.zoom-tools button{width:46px;height:46px;border:1px solid #d6dfd2;background:var(--soft);border-radius:13px;font-size:25px;color:var(--ink)}.zoom-tools output{min-width:48px;text-align:center;font-size:13px;font-weight:700}.board-viewport{height:min(66dvh,740px);min-height:320px;overflow:auto;border:2px solid #d5ddd1;background:#e8e9df;border-radius:16px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}.board-wrap{width:max-content;margin:auto;padding:14px}#board{display:block;touch-action:pan-x pan-y;background:#fff;border:1px solid #cbd1c3}.progress-heading{display:flex;justify-content:space-between;margin:15px 0 8px;font-size:13px;color:#637765}.progress-track{height:11px;border-radius:99px;background:#e8eddf;overflow:hidden}#progress-fill{height:100%;width:0;background:linear-gradient(90deg,#91b99a,#edc17d);transition:width .2s}.board-help{font-size:12px;color:#829082;margin:12px 0 0}.supplies>p{color:#748075;line-height:1.6;font-size:14px}.palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:17px 0}.swatch{min-width:0;min-height:78px;background:#f5f5ed;border:2px solid #e0e5da;border-radius:14px;padding:8px 2px;color:var(--ink);font-weight:700}.swatch[aria-pressed=true]{border-color:#b87987;background:#fff1ed;box-shadow:0 0 0 2px #f6dfdf}.gem-icon{display:block;margin:0 auto 6px;width:29px;height:29px;background:linear-gradient(135deg,#ffffffbb,transparent 46%),var(--gem);clip-path:polygon(50% 0,87% 13%,100% 50%,87% 87%,50% 100%,13% 87%,0 50%,13% 13%)}.swatch-label{font-size:12px}.actions{display:grid;gap:9px}.secondary{background:#f1f4eb;border:1px solid #d8e1d5;color:#4e6852;border-radius:13px;text-align:left;padding:12px;min-height:48px}.secondary:hover,.zoom-tools button:hover{background:#e6eedf}.status{margin-top:18px!important;font-size:13px!important;color:#a16d80!important}footer{text-align:center;color:#929d90;font-size:12px;padding:0 16px 24px}.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;overflow:auto;padding:20px;background:#4b6049ad;-webkit-overflow-scrolling:touch}.dialog{width:min(100%,660px);max-height:94dvh;overflow:auto;background:var(--white);border:1px solid #e7d7c6;border-radius:27px;box-shadow:0 24px 90px #263b2a55;padding:27px;text-align:center}.dialog-icon{font-size:48px}.dialog h2{font:normal clamp(32px,5vw,46px) Georgia,serif;color:#526b54;margin:13px 0}.dialog p{color:#687a6a;line-height:1.75}.primary{border:0;background:#af6d80;color:#fff;border-radius:99px;min-height:48px;padding:13px 26px;font-weight:750;margin-top:8px}.primary:hover{background:#985c6e}.artwork-frame{max-width:510px;margin:16px auto;border:9px solid #e5d1ae;border-radius:18px;overflow:hidden;background:#f8efdf}.artwork-frame svg{width:100%;height:auto;display:block}.letter{font:italic clamp(22px,3vw,29px) Georgia,serif!important;color:#9c6377!important}
@media(max-width:850px){.layout{grid-template-columns:1fr;max-width:790px}.board-viewport{height:52dvh}.palette{grid-template-columns:repeat(5,minmax(0,1fr))}.supplies{margin-bottom:15px}}@media(max-width:500px){.layout{padding:8px 9px 22px;gap:12px}.panel{padding:12px;border-radius:18px}.panel h2{font-size:24px}.board-viewport{height:49dvh}.palette{grid-template-columns:repeat(4,minmax(0,1fr))}.swatch{min-height:68px}.gem-icon{width:25px;height:25px}.dialog{padding:20px 14px}}

/* Final diamond painting celebration */

.painting-complete {
  animation: completedPaintingGlow 2.2s ease-in-out;
}

@keyframes completedPaintingGlow {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(1.35) saturate(1.2);
  }
  100% {
    filter: brightness(1);
  }
}

.completion-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
}

.completion-sparkle {
  position: absolute;
  color: #f5d58b;
  font-size: clamp(18px, 3vw, 38px);
  opacity: 0;
  text-shadow: 0 0 18px rgba(255, 221, 156, 0.9);
  animation: completionTwinkle 1.3s ease-in-out forwards;
}

@keyframes completionTwinkle {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-30deg);
  }
  40% {
    opacity: 1;
    transform: scale(1.25) rotate(10deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) rotate(40deg);
  }
}

.reveal-entrance {
  animation: finishedArtworkEntrance 1.2s ease-out both;
}

@keyframes finishedArtworkEntrance {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .painting-complete,
  .completion-sparkle,
  .reveal-entrance {
    animation: none !important;
  }
}

/* Completed painting message */
.painting-message {
  position: absolute;
  left: 12%;
  bottom: 4.7%;
  width: 76%;
  text-align: center;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(9px, 1.5vw, 20px);
  font-weight: bold;
  color: #92536b;
  pointer-events: none;
  z-index: 3;
}

.painting-message[hidden] {
  display: none !important;
}

/* Final UI polish */
.masthead h1 {font:normal clamp(23px,3.5vw,38px)/1.2 Georgia,serif;letter-spacing:.035em;color:#526c57;margin:6px auto 0;max-width:850px}
.masthead p {margin-top:9px;font-size:14px;color:#8d6a78}
.panel-head h2,.supplies h2 {margin-top:0}
footer strong,footer span {display:block}
footer strong {font-weight:600;color:#657d69;margin-bottom:5px}
.finish-actions {display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.finish-actions .primary {margin-top:8px}
#save-artwork {background:#58755f}
#save-artwork:hover {background:#42614b}
@media(max-width:500px) {.masthead h1{font-size:23px;letter-spacing:.015em}.finish-actions .primary{width:100%}}


/* Personal welcome experience */
.welcome-typewriter {
  min-height: 7em;
  max-width: 460px;
  margin: 20px auto;
  line-height: 1.8;
  cursor: pointer;
}

.welcome-typewriter.is-typing::after {
  content: "|";
  color: #ac697c;
  animation: welcome-caret .8s step-end infinite;
}

@keyframes welcome-caret {
  50% { opacity: 0; }
}

.welcome-open-ready {
  animation: welcome-button-in .4s ease-out both;
}

@keyframes welcome-button-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

#welcome.welcome-leaving {
  animation: welcome-fade-out .26s ease-in forwards;
  pointer-events: none;
}

@keyframes welcome-fade-out {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-typewriter.is-typing::after,
  .welcome-open-ready,
  #welcome.welcome-leaving {
    animation: none;
  }
}

/* Keep the painting a surprise until the gift is opened */
#welcome {
  background: #f9f5ec;
}

#welcome .welcome-dialog {
  box-shadow: 0 18px 60px rgba(59, 75, 62, 0.10);
}

/* Romantic botanical welcome screen */

#welcome {
  background:
    radial-gradient(ellipse at 20% 15%, #f7e5e9 0%, transparent 48%),
    radial-gradient(ellipse at 85% 85%, #f7e8da 0%, transparent 48%),
    #fbf3ef;
}

#welcome .welcome-dialog {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(92vw, 650px);
  padding: 65px 48px 55px;
  background: #fffaf8;
  border: 1px solid #efdce0;
  border-radius: 28px;
  box-shadow: 0 25px 75px rgba(139, 82, 105, 0.13);
}

/* Decorative floral arrangements */
#welcome .welcome-dialog::before,
#welcome .welcome-dialog::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  line-height: 1;
  opacity: 0.8;
}

#welcome .welcome-dialog::before {
  content: "🌻";
  font-size: 100px;
  top: -20px;
  left: -15px;
  transform: rotate(-18deg);
}

#welcome .welcome-dialog::after {
  content: "🌹";
  font-size: 90px;
  bottom: -15px;
  right: -5px;
  transform: rotate(18deg);
}

/* Elegant pink typography */
#welcome #welcome-title {
  font-family: "Snell Roundhand", "Apple Chancery",
               "URW Chancery L", "Brush Script MT", cursive;
  font-size: clamp(42px, 6vw, 64px);
  font-weight: 400;
  line-height: 1.25;
  color: #b66c89;
  margin: 8px 0 20px;
}

#welcome .welcome-typewriter {
  max-width: 440px;
  min-height: 7em;
  margin: 18px auto 25px;
  color: #a56c83;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.85;
  letter-spacing: 0.01em;
}

#welcome .welcome-typewriter.is-typing::after {
  color: #b66c89;
}

#welcome .primary {
  background: #b66c89;
  color: #fff;
  border-radius: 999px;
  padding: 14px 32px;
  box-shadow: 0 6px 18px rgba(182, 108, 137, 0.16);
  transition: background .2s ease, transform .2s ease;
}

#welcome .primary:hover {
  background: #9e5774;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  #welcome .welcome-dialog {
    padding: 65px 24px 45px;
  }

  #welcome .welcome-dialog::before {
    font-size: 68px;
    top: -12px;
    left: -12px;
  }

  #welcome .welcome-dialog::after {
    font-size: 65px;
    bottom: -10px;
    right: -10px;
  }

  #welcome #welcome-title {
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #welcome .primary {
    transition: none;
  }
}


/* Quiet progress backup controls */
.save-indicator{font-size:12px;color:#627c69;margin:8px 0 0}
.save-indicator.save-error{color:#a23e56;font-weight:650}
.backup-tools{margin:16px 0;border-top:1px solid var(--line);padding-top:13px}
.backup-tools summary{cursor:pointer;font-size:13px;font-weight:650;color:#526c57;padding:8px 0;touch-action:manipulation}
.backup-tools p{font-size:12px;line-height:1.5;color:#748075;margin:8px 0}
.backup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.backup-actions .secondary{text-align:center;font-size:12px;padding:10px 5px}
#backup-status{min-height:1em}
@media(max-width:400px){.backup-actions{grid-template-columns:1fr}}