:root{--paper:#f4f2ea;--ink:#1d1d1b;--red:#c94942;--sage:#bed6b8;--sage-deep:#7a9b75;--blush:#e4ceca;--line:#b7b9ae}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#faf8f2 0,#e8dfdc 65%,#d7bfbe 100%);color:var(--ink);font-family:"DM Sans",sans-serif;display:grid;place-items:center;overflow-x:hidden}
button,input{font:inherit}
.shell{width:min(100%,720px);min-height:100vh;padding:18px;display:grid;place-items:center}
.card{position:relative;isolation:isolate;width:100%;min-height:min(860px,calc(100vh - 36px));overflow:hidden;background:var(--paper);border:1px solid rgba(29,29,27,.15);border-radius:32px;box-shadow:0 35px 80px rgba(79,52,51,.22);text-align:center;padding:54px clamp(22px,7vw,64px)}
.card:after{content:"";position:absolute;z-index:-2;inset:auto -20% -20% -20%;height:35%;background:linear-gradient(180deg,rgba(228,206,202,.25),rgba(217,181,181,.8));filter:blur(1px)}
.grain{position:absolute;z-index:-1;inset:0;opacity:.22;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E")}
.eyebrow{display:inline-flex;border:1.5px solid #9d9c94;border-radius:999px;padding:8px 18px;font-size:.78rem;font-weight:700;letter-spacing:.23em}
h1,h2{font-family:"Instrument Serif",serif;font-weight:400;letter-spacing:-.045em;line-height:.85;margin:50px 0 18px}
h1{font-size:clamp(4rem,12vw,7.5rem)}
h2{font-size:clamp(3.7rem,10vw,6.8rem)}
h1 em,h2 em{color:var(--red);font-weight:400}
.mood{margin:0;font-size:1.1rem;color:#5d5a55;min-height:1.5em;transition:opacity .2s}
.flower{width:min(72%,340px);height:auto;margin:10px auto 0;display:block;filter:drop-shadow(0 10px 14px rgba(102,90,83,.1))}
.actions{position:absolute;left:0;right:0;bottom:0;height:168px;background:linear-gradient(135deg,#bbd9b4,#a9cfa4);border-radius:28px 28px 0 0;display:grid;place-items:center;overflow:visible}
.yes-btn{width:100%;height:100%;border:0;background:transparent;font-size:clamp(2.6rem,8vw,4rem);font-weight:800;letter-spacing:.02em;cursor:pointer;transition:transform .2s,filter .2s}
.yes-btn:hover{transform:scale(1.04);filter:brightness(.96)}
.no-btn{position:absolute;right:22px;top:-28px;border:1px solid rgba(201,73,66,.35);background:#fff7f1;color:#b44e48;border-radius:999px;padding:10px 15px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(79,52,51,.12);transition:left .22s ease,top .22s ease,transform .15s}
.dodge-counter{position:absolute;top:20px;right:24px;border:1px solid rgba(29,29,27,.18);border-radius:999px;padding:8px 13px;font-size:.82rem;color:#8b4e4b;background:rgba(255,255,255,.45)}
.plan-view{padding-top:42px}
.plan-view h2{margin:38px 0 36px}
.back{position:absolute;left:25px;top:24px;border:0;background:transparent;font-size:2rem;cursor:pointer;color:#555}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left}
label,legend{font-size:.76rem;letter-spacing:.17em;font-weight:700}
input{display:block;width:100%;margin-top:10px;border:1.5px solid var(--line);background:rgba(255,255,255,.35);border-radius:16px;padding:17px 16px;font-size:1rem;color:var(--ink);outline:none}
input:focus{border-color:var(--sage-deep);box-shadow:0 0 0 4px rgba(122,155,117,.15)}
fieldset{border:0;margin:38px 0 30px;padding:0}
legend{width:100%;margin-bottom:20px;font-size:.84rem}
.plan-options{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.plan-pill{border:1.5px solid #9fb49b;background:#dce9d9;border-radius:999px;padding:12px 18px;font-weight:600;cursor:pointer;transition:.18s ease}
.plan-pill:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(81,105,77,.12)}
.plan-pill.selected{background:#779d70;color:white;border-color:#779d70;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.submit-btn,.restart-btn{border:0;border-radius:16px;padding:18px 26px;background:#a9cca4;color:#173317;font-weight:800;font-size:1rem;cursor:pointer;transition:.2s}
.submit-btn{width:100%}
.submit-btn:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.2)}
.submit-btn:not(:disabled):hover,.restart-btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(71,102,66,.2)}
.success-view{display:flex;flex-direction:column;align-items:center;justify-content:center}
.success-view[hidden],.plan-view[hidden],.ask-view[hidden]{display:none}
.success-view h2{margin:42px 0 16px}.success-view p{max-width:460px;font-size:1.15rem;line-height:1.6}.heart-art{width:210px;margin:10px 0 18px;animation:beat 1.5s infinite}
.confetti{position:absolute;inset:0;background-image:radial-gradient(circle,#c94942 0 3px,transparent 4px),radial-gradient(circle,#7a9b75 0 3px,transparent 4px),radial-gradient(circle,#e9ad5b 0 3px,transparent 4px);background-size:83px 91px,107px 79px,131px 119px;opacity:.28;animation:fall 10s linear infinite}
@keyframes beat{50%{transform:scale(1.06)}}@keyframes fall{to{background-position:0 300px,0 260px,0 380px}}
@media(max-width:560px){.shell{padding:0}.card{min-height:100svh;border-radius:0;border:0;padding:44px 22px}.ask-content{padding-top:14px}h1{margin-top:42px;font-size:4.3rem}.flower{width:78%}.field-grid{grid-template-columns:1fr}.plan-view h2{font-size:4rem;margin-bottom:28px}.actions{height:145px}.eyebrow{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.ask-view{padding-bottom:190px;min-height:800px}
.actions{display:grid;grid-template-columns:1fr 2fr;background:transparent;overflow:hidden;padding:14px 24px}
.yes-btn{background:linear-gradient(135deg,#bbd9b4,#a9cfa4);border-radius:24px;min-width:0}
.yes-btn:hover{transform:none;filter:brightness(.96)}
.no-zone{position:relative;width:100%;height:100%;overflow:hidden}
.no-zone .no-btn{--no-scale:1;left:75%;top:50%;right:auto;min-width:0;width:calc(50% * var(--no-scale));height:calc(100% * var(--no-scale));transform:translate(-50%,-50%);border:0;border-radius:24px;background:linear-gradient(135deg,#bbd9b4,#a9cfa4);color:var(--ink);box-shadow:none;font-size:calc(clamp(2.6rem,8vw,4rem) * var(--no-scale));font-weight:800;letter-spacing:.02em;padding:0;cursor:pointer;transition:left .22s ease,top .22s ease,font-size .22s ease,width .22s ease,height .22s ease}
.no-zone .no-btn[hidden]{display:none}
.ask-view h1{font-size:clamp(3.7rem,9vw,6rem);margin-top:36px}
.flower{width:250px;max-width:70%;margin-top:14px}
.confetti{pointer-events:none;z-index:-1}
.plan-pill{flex:0 0 auto}
.plan-pill:last-child{margin-inline:0}
.message-label{display:block;width:100%;max-width:460px;text-align:left;margin:12px 0 10px}
.free-message{display:block;width:100%;max-width:460px;min-height:150px;resize:vertical;border:1.5px solid var(--line);border-radius:16px;padding:16px;background:rgba(255,255,255,.5);color:var(--ink);font:inherit;line-height:1.6;outline:none}
.free-message:focus{border-color:var(--sage-deep);box-shadow:0 0 0 4px rgba(122,155,117,.15)}
html{-webkit-text-size-adjust:100%}
.shell,.card,.field-grid>*{min-width:0}
fieldset{min-width:0}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
input,textarea{max-width:100%;font-size:16px}
.field-grid input{font-size:16px}
.success-view p{overflow-wrap:anywhere}
.success-view h2{font-size:clamp(3rem,9vw,6rem)}
.success-view>*{flex-shrink:0}
@media(max-width:560px){
  .card{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(32px,env(safe-area-inset-bottom))}
  .ask-view{padding-bottom:170px}
  .actions{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .success-view{justify-content:flex-start;padding-top:48px}
  .success-view h2{font-size:clamp(3rem,13vw,4.5rem)}
  .success-view p{font-size:1rem}
  .free-message{font-size:16px}
  .plan-pill{min-height:44px}
}
@media(max-width:360px){
  .field-grid{grid-template-columns:1fr!important}
  .ask-view h1{font-size:clamp(2.7rem,12.5vw,3.3rem)!important}
  .eyebrow{letter-spacing:.15em}
  .actions{padding-inline:18px}
}
@media(max-width:560px){.ask-view{min-height:max(700px,100svh);padding-top:72px;padding-bottom:170px}.ask-view h1{font-size:clamp(3.3rem,13vw,4.6rem);margin-top:32px}.flower{width:230px}.field-grid{grid-template-columns:1fr 1fr;gap:12px}.field-grid label{min-width:0;font-size:.65rem}.field-grid input{min-width:0;padding:14px 9px;font-size:.9rem}.plan-pill{padding:11px 12px;font-size:.86rem}.plan-options{gap:10px}.plan-view .eyebrow{margin-top:20px}.plan-view h2{font-size:clamp(3rem,12vw,4rem)}.back{top:14px}.dodge-counter{top:18px}}