:root{
  --sky:#243149; --dusk:#3f3a52; --horizon:#6f4f47;
  --earth:#2a2016; --earth-deep:#130e09;
  --cream:#f3ece0; --cream-dim:#c9bfb0; --cream-faint:#9b9081;
  --rose:#d24d5e; --rose-lit:#f0808c; --amber:#eaa652;
  --line:rgba(243,236,224,.16);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--cream);
  background:var(--earth-deep);
  min-height:100dvh;
  padding:calc(env(safe-area-inset-top,0px) + 30px) 22px
          calc(env(safe-area-inset-bottom,0px) + 34px);
  display:flex; flex-direction:column; align-items:center;
  -webkit-font-smoothing:antialiased;
}
/* the Barnsley roses at The Seam — the real thing, doing the hero's job */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:#0d0a07 url("roses-the-seam.jpg") center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(135% 95% at 50% -6%, rgba(16,20,34,0) 0%, rgba(16,20,34,.22) 48%, rgba(16,20,34,0) 64%),
    linear-gradient(180deg,
      rgba(18,23,38,.30) 0%, rgba(38,32,48,.40) 30%,
      rgba(43,32,24,.66) 62%, rgba(15,11,7,.94) 100%)}
.wrap{width:100%; max-width:480px; margin:auto; text-align:center;
  display:flex; flex-direction:column; gap:0}

.rose{width:38px; height:38px; margin:0 auto 22px; opacity:.92}

h1{font-family:"Fraunces",serif; font-weight:560; font-optical-sizing:auto;
  font-size:clamp(34px,10vw,46px); line-height:1.02; letter-spacing:-.01em;
  margin:0 0 14px; text-shadow:0 2px 26px rgba(8,10,18,.55)}
.lede{font-family:"Fraunces",serif; font-weight:400; font-size:18px;
  line-height:1.5; color:var(--cream); margin:0 auto; max-width:34ch;
  text-shadow:0 1px 16px rgba(8,10,18,.6)}
.prompts{font-size:14.5px; line-height:1.6; color:var(--cream-dim);
  margin:14px auto 0; max-width:32ch}
.intro{position:relative; isolation:isolate}
.intro::before{content:""; position:absolute; inset:-26px -12% -6px; z-index:-1;
  background:radial-gradient(130% 100% at 50% 44%,
    rgba(9,11,19,.68) 0%, rgba(9,11,19,.40) 50%, rgba(9,11,19,0) 76%);
  filter:blur(7px); pointer-events:none}

.ideasbtn{margin:16px auto 0; display:inline-flex; gap:6px; align-items:center;
  font-family:inherit; font-size:13.5px; color:var(--cream-dim); background:transparent;
  border:0; cursor:pointer; padding:6px 2px;
  border-bottom:1px dashed rgba(243,236,224,.35); transition:color .2s,border-color .2s}
.ideasbtn:hover{color:var(--cream); border-color:var(--amber)}
.ideasbtn:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
.ideasbtn span{color:var(--amber)}

.ring{position:relative; display:grid; place-items:center; width:min(360px,94vw); margin:0 auto}
.idea{position:absolute; max-width:112px; font-family:"Hanken Grotesk",sans-serif;
  font-size:12px; line-height:1.32; color:var(--cream); text-align:center;
  background:rgba(14,11,18,.52); border:1px solid rgba(243,236,224,.14); border-radius:12px;
  padding:7px 10px; pointer-events:none; opacity:0; transition:opacity .45s ease;
  text-shadow:0 1px 8px rgba(8,10,18,.7); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
body.show-ideas .idea{opacity:1}
body.recording .idea{opacity:0}
.idea.ul{top:2px;  left:-4px}
.idea.ur{top:2px;  right:-4px}
.idea.ml{top:50%;  left:-10px; transform:translateY(-50%)}
.idea.mr{top:50%;  right:-10px; transform:translateY(-50%)}
.idea.ll{bottom:2px; left:-4px}
.idea.lr{bottom:2px; right:-4px}

.stage{margin:38px 0 8px; display:flex; flex-direction:column; align-items:center; gap:16px}
.recwrap{position:relative; width:200px; height:200px; display:grid; place-items:center}
.glow{position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(240,128,140,.55), transparent 66%);
  transform:scale(.6); opacity:0; transition:opacity .4s}
.recording .glow{opacity:1}

.recbtn{position:relative; width:150px; height:150px; border-radius:50%;
  border:2px solid rgba(243,236,224,.30);
  background:radial-gradient(circle at 50% 38%, #34281c, #211913);
  color:var(--cream); cursor:pointer; display:grid; place-items:center;
  transition:transform .12s ease, border-color .3s, box-shadow .3s;
  box-shadow:0 14px 40px -18px #000, inset 0 1px 0 rgba(255,255,255,.06)}
.recbtn:hover{border-color:rgba(243,236,224,.55)}
.recbtn:active{transform:scale(.97)}
.recbtn:focus-visible{outline:3px solid var(--amber); outline-offset:5px}
.dot{width:52px; height:52px; border-radius:50%; background:var(--rose);
  box-shadow:0 0 0 0 rgba(210,77,94,.5); transition:all .25s}
.recording .recbtn{border-color:var(--rose-lit)}
.recording .dot{width:34px; height:34px; border-radius:9px; background:var(--rose-lit)}

.reclabel{font-size:15px; font-weight:500; color:var(--cream); letter-spacing:.01em;
  text-shadow:0 1px 12px rgba(8,10,18,.7)}
.timer{font-family:"Fraunces",serif; font-size:30px; font-weight:400;
  font-variant-numeric:tabular-nums; letter-spacing:.02em; min-height:1px;
  text-shadow:0 1px 14px rgba(8,10,18,.7)}
.limit{font-size:12.5px; color:var(--cream-faint)}

.panel{display:none; flex-direction:column; align-items:center; gap:18px;
  width:100%; margin-top:6px}
.panel.show{display:flex}
.review{display:flex; gap:10px; align-items:center; justify-content:center}
.mini{font-family:inherit; font-size:14px; font-weight:500; color:var(--cream);
  background:rgba(243,236,224,.08); border:1px solid var(--line);
  padding:11px 18px; border-radius:999px; cursor:pointer; transition:background .2s,border-color .2s;
  display:inline-flex; align-items:center; gap:8px}
.mini:hover{background:rgba(243,236,224,.15); border-color:rgba(243,236,224,.4)}
.mini:focus-visible{outline:2px solid var(--amber); outline-offset:3px}

.namefield{width:100%; max-width:320px}
.namefield input{width:100%; font-family:inherit; font-size:16px; color:var(--cream);
  text-align:center; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:12px 4px; transition:border-color .2s}
.namefield input::placeholder{color:var(--cream-faint)}
.namefield input:focus{outline:none; border-bottom-color:var(--amber)}

.send{width:100%; max-width:320px; font-family:inherit; font-size:17px; font-weight:600;
  color:#2a1712; background:linear-gradient(180deg,#f0b968,var(--amber));
  border:0; border-radius:14px; padding:16px; cursor:pointer;
  box-shadow:0 12px 30px -12px rgba(234,166,82,.7); transition:transform .12s, filter .2s}
.send:hover{filter:brightness(1.05)}
.send:active{transform:translateY(1px)}
.send:focus-visible{outline:3px solid var(--cream); outline-offset:3px}
.send[disabled]{opacity:.6; cursor:default; box-shadow:none}
.consent{font-size:12.5px; line-height:1.55; color:var(--cream-faint);
  max-width:34ch; margin:-4px auto 0}
.consent b{color:var(--cream-dim); font-weight:600}

.status{min-height:18px; font-size:13.5px; color:var(--amber); margin-top:2px}
.status.err{color:#f0a0a0}

.done{display:none; flex-direction:column; align-items:center; gap:14px; padding:14px 0}
.done.show{display:flex}
.done h2{font-family:"Fraunces",serif; font-weight:560; font-size:30px; margin:0}
.done p{font-size:15px; color:var(--cream-dim); line-height:1.55; max-width:30ch; margin:0}
.again{margin-top:6px}

footer{margin-top:40px; font-size:11.5px; color:var(--cream-faint); text-align:center; line-height:1.6}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}