:root {
  color-scheme: light;
  --cream: #FDF0E6;
  --brown: #3B2A22;
  --peacock: #4BA7B0;
  --hairline: rgba(59,42,34,.20);
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { min-height:100%; background:var(--cream); }
body { margin:0; min-height:100vh; background:var(--cream); font-family:var(--display); color:var(--brown); -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible { outline:3px solid var(--peacock); outline-offset:4px; }
[hidden] { display:none!important; }
.app-shell { max-width:1160px; min-height:100vh; margin:auto; padding:0 clamp(22px,4.6vw,62px); display:flex; flex-direction:column; }
.site-header { min-height:102px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hairline); gap:14px; }
.brand { display:flex; gap:10px; align-items:center; color:var(--brown); text-decoration:none; letter-spacing:.075em; font-size:17px; font-weight:600; white-space:nowrap; }
.brand-mark { width:26px; height:30px; flex:none; }
.collection-button { display:inline-flex; align-items:center; gap:7px; background:transparent; color:var(--brown); border:0; font-size:17px; font-weight:500; padding:12px 0 12px 12px; white-space:nowrap; }
.collection-button svg,.text-button svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.55; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.saved-count { min-width:23px; height:23px; padding:1px 5px; text-align:center; display:inline-grid; place-items:center; border:1px solid var(--hairline); border-radius:50%; font-size:14px; }
.main-grid { width:100%; flex:1; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr); align-items:center; gap:clamp(28px,5.5vw,84px); padding-top:42px; padding-bottom:44px; }
.intro { align-self:center; padding:0; max-width:550px; }
.eyebrow { font-size:clamp(21px,2.5vw,28px); font-weight:400; letter-spacing:0; margin:0 0 24px; color:var(--peacock); }
h1 { font-family:var(--display); font-weight:500; font-size:clamp(60px,7.1vw,106px); line-height:1.04; letter-spacing:-.055em; margin:0; }
h1 em { font-style:italic; font-weight:500; color:var(--peacock); white-space:nowrap; letter-spacing:-.065em; }
.experience { display:flex; flex-direction:column; align-items:center; min-width:0; }
.card-scene { perspective:1350px; width:min(100%,356px); aspect-ratio:356/469; position:relative; }
.card { width:100%; height:100%; border-radius:10px; }
.card-inner { width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform 760ms cubic-bezier(.25,.75,.22,1); }
.card-inner.is-flipped { transform:rotateY(180deg); }
.card-side { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:10px; overflow:hidden; box-shadow:0 19px 36px rgba(63,39,30,.13),0 3px 9px rgba(63,39,30,.08); }
/* Fixed peacock face with the approved arched door illustration. */
.card-front { background:var(--peacock); color:#FFF8F2; padding:13px; }
.card-front-border { height:100%; border:1px solid rgba(255,248,242,.82); border-radius:4px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:19px 14px; }
.card-front-top { font-size:19px; font-weight:500; letter-spacing:.035em; }
.door-art { width:76%; max-height:59%; }
.card-front-bottom { display:flex; width:100%; align-items:center; justify-content:center; font-size:18px; font-weight:400; }
/* The five bright colorways are randomly selected on each draw. */
.card-back { transform:rotateY(180deg); color:var(--brown); background:#F6D65B; padding:13px; }
.card-back[data-tone="orange"] { background:#F4A261; }
.card-back[data-tone="yellow"] { background:#F6D65B; }
.card-back[data-tone="lilac"] { background:#B9B0EA; }
.card-back[data-tone="green"] { background:#8FD694; }
.card-back[data-tone="blue"] { background:#6EC5E9; }
.card-back-frame { height:100%; border:1px solid rgba(59,42,34,.56); border-radius:4px; display:flex; flex-direction:column; padding:24px 18px 22px; }
.card-message { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8px 6px; min-height:0; }
.card-message h2 { font-size:clamp(32px,3.15vw,46px); line-height:1.08; letter-spacing:-.035em; font-weight:500; margin:0; max-width:290px; text-wrap:balance; }
.card-separator { width:34px; height:1px; background:var(--brown); opacity:.65; margin:25px 0; flex:none; }
.card-body { white-space:pre-line; font-size:clamp(19px,1.9vw,24px); line-height:1.34; font-weight:400; margin:0; max-width:278px; text-wrap:pretty; }
.card-back-footer { text-align:center; font-size:14px; letter-spacing:.13em; font-weight:500; }
.card-controls { width:min(100%,356px); display:flex; flex-direction:column; align-items:center; }
.draw-button { width:100%; min-height:58px; display:flex; justify-content:space-between; align-items:center; margin-top:21px; background:var(--peacock); color:#FFF8F2; border:1px solid var(--peacock); padding:0 19px 0 24px; font-size:21px; font-weight:500; transition:background .2s,transform .2s; }
.draw-button:hover { background:#388D96; border-color:#388D96; }
.draw-button:active { transform:translateY(2px); }
.draw-button:disabled { opacity:.68; cursor:wait; }
.button-arrow { font-size:25px; font-weight:400; }
.after-draw { width:100%; display:flex; justify-content:center; align-items:center; gap:13px; min-height:54px; padding-top:9px; }
.text-button { padding:9px 3px; display:flex; align-items:center; gap:7px; background:none; color:var(--brown); border:0; font-size:18px; font-weight:500; }
.text-button.saved { color:#206F78; }
.text-button.saved svg { fill:currentColor; }
.action-divider { width:1px; height:19px; background:var(--hairline); }
.under-card-note { font-size:17px; text-align:center; color:rgba(59,42,34,.79); line-height:1.4; margin:13px 0 0; }
.site-footer { border-top:1px solid var(--hairline); min-height:78px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:21px; font-weight:400; }
.footer-heart { font-size:24px; color:var(--peacock); }
.collection-dialog { position:fixed; max-height:min(78vh,780px); width:min(calc(100vw - 32px),510px); inset:0; border:1px solid rgba(59,42,34,.35); border-radius:8px; background:#FFF8F2; color:var(--brown); padding:26px; box-shadow:0 25px 110px rgba(31,23,19,.25); }
.collection-dialog::backdrop { background:rgba(39,25,22,.55); backdrop-filter:blur(3px); }
.dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dialog-header h2 { font-size:37px; font-weight:500; margin:0; }
.close-button { width:37px; height:37px; border:1px solid var(--hairline); border-radius:50%; background:transparent; color:var(--brown); font-size:28px; line-height:1; display:grid; place-items:center; }
.saved-description { font-size:20px; line-height:1.4; margin:18px 0; }
.saved-list { display:flex; flex-direction:column; gap:11px; max-height:43vh; overflow-y:auto; padding:2px 3px 8px 0; }
.saved-item { background:var(--cream); border:1px solid rgba(59,42,34,.17); padding:18px; display:grid; gap:10px; }
.saved-item h3 { font-size:26px; font-weight:500; line-height:1.18; margin:0; }
.saved-item p { font-size:19px; white-space:pre-line; line-height:1.45; margin:0; }
.saved-actions { display:flex; justify-content:space-between; gap:16px; }
.saved-actions button { background:transparent; border:0; border-bottom:1px solid var(--hairline); padding:4px 0; font-size:18px; font-weight:500; color:#206F78; }
.empty-saved { min-height:120px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:21px; line-height:1.5; color:rgba(59,42,34,.7); }
.storage-note { font-size:17px; line-height:1.4; color:rgba(59,42,34,.75); margin:16px 0 0; }
.toast { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 24px); transform:translate(-50%,15px); background:var(--brown); color:white; padding:13px 20px; min-width:170px; max-width:calc(100vw - 40px); text-align:center; box-shadow:0 10px 30px rgba(59,42,34,.16); border-radius:5px; font-size:18px; line-height:1.3; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; z-index:10; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
@media(max-width:800px) {
  .site-header { min-height:75px; }
  .main-grid { grid-template-columns:1fr; justify-items:center; gap:28px; padding-top:42px; padding-bottom:52px; }
  .intro { width:min(100%,550px); text-align:center; }
  .eyebrow { margin-bottom:12px; }
  h1 { font-size:clamp(51px,8.7vw,79px); }
  h1 em { white-space:normal; }
  .experience { width:100%; }
  .card-scene,.card-controls { max-width:340px; }
  .card-message h2 { font-size:clamp(32px,5vw,41px); }
  .card-body { font-size:clamp(19px,3.4vw,22px); }
}
@media(max-width:420px) {
  .app-shell { padding-left:20px; padding-right:20px; }
  .site-header { min-height:72px; }
  .brand { font-size:14px; gap:6px; }
  .brand-mark { width:23px; height:26px; }
  .collection-button { font-size:14px; gap:5px; }
  .collection-button svg { width:16px; height:16px; }
  .saved-count { font-size:12px; min-width:20px; height:20px; }
  .main-grid { padding-top:28px; gap:25px; padding-bottom:40px; }
  .eyebrow { font-size:20px; }
  h1 { font-size:clamp(44px,11.3vw,60px); }
  .card-scene,.card-controls { width:min(100%,310px); }
  .card-message h2 { font-size:clamp(29px,7.9vw,35px); }
  .card-body { font-size:clamp(18px,5.3vw,21px); }
  .card-separator { margin:19px 0; }
  .card-back-frame { padding:17px 12px 17px; }
  .under-card-note { font-size:16px; }
  .site-footer { font-size:18px; padding:18px 0; }
}
@media(min-width:801px) and (max-height:770px) {
  .main-grid { padding-top:22px; padding-bottom:24px; }
  .card-scene,.card-controls { width:min(100%,306px); }
  h1 { font-size:clamp(55px,6.6vw,90px); }
  .card-message h2 { font-size:35px; }
  .card-body { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; }
}
@media(max-width:360px) {
  .site-header { flex-wrap:wrap; justify-content:center; gap:0; padding:9px 0; }
  .brand { width:100%; justify-content:center; }
  .collection-button { padding:5px 0; }
}