/* Raised pastel fabric, metallic gold thread and floral embroidery from the deck. */
:root{--paper:#f3c5cf;--cream:#fff6e7;--ink:#602f42;--muted:#7d5362;--olive:#a84364;--olive-dark:#7d2948;--line:#c49b4c;--terra:#a07425;--thread:#cba45a;--thread-light:#fff1be;--rose:#e4a3b6;--cloth:repeating-linear-gradient(0deg,#fff9ee25 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#a84e7010 0 1px,transparent 1px 3px)}
body{background:var(--cloth),radial-gradient(ellipse at 17% 0,#f6dde8 0,transparent 45%),radial-gradient(ellipse at 100% 70%,#cfcae3,transparent 55%),linear-gradient(140deg,#efb8c6,#e3b5c9 65%,#dbc4df);color:var(--ink)}body::before{inset:10px;border:2px solid #d6ad62;border-radius:22px;box-shadow:0 0 0 2px #fff0c0,0 0 0 5px #be8c44,inset 0 0 0 3px #fff0b899;z-index:5}.app-shell{max-width:1320px;padding-inline:48px}.topbar{height:90px;border-bottom:2px solid #c69b4c;box-shadow:0 2px 0 #fff0ba,0 5px 0 #bc8d3955}.brand{font-size:1.05rem;color:#743752;font-weight:700;letter-spacing:.12em;text-shadow:0 1px 0 #fff3d8}.brand-mark{font-size:32px;color:#a27021;filter:drop-shadow(0 1px 0 #fff5c5)}.topbar .text-button{color:#754057;background:#fff1de66;border:1px solid #c79d57;border-radius:18px;padding:8px 15px;box-shadow:inset 0 1px 2px #fffbe7;font-size:.8rem}.page-botanicals,.panel-bloom{display:none}
.hero{position:relative;isolation:isolate;min-height:690px;margin:42px 0 34px;padding:48px 44px;gap:22px;background:var(--cloth),radial-gradient(ellipse at 30% 20%,#fffdf1,#fff3df 58%,#f3dfd9);border:3px solid #bf9245;border-radius:38px 38px 28px 28px;box-shadow:0 0 0 3px #ffefb8,0 0 0 7px #bd8c43,0 0 0 10px #f7dba0,0 16px 35px #8549642b,inset 0 0 0 4px #fff8e3,inset 0 0 0 6px #cca65f}
.hero::before,.hero::after{content:"";display:block;position:absolute;width:165px;height:165px;background:url('./assets/embroidered-flowers.svg') center/contain no-repeat;pointer-events:none;z-index:-1;opacity:.95}.hero::before{left:-7px;top:-10px;transform:rotate(88deg)}.hero::after{right:-7px;bottom:-7px;transform:rotate(-92deg)}.hero-copy{z-index:2}.hero-copy::before{display:none}.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:#956922;letter-spacing:.14em;font-size:.72rem}.hero .eyebrow::before,.hero .eyebrow::after{content:"✦";color:#b88e3d;text-shadow:0 1px #fff3bd}.hero h1{color:#713a49;font-weight:700;font-size:clamp(2.3rem,3.6vw,3.3rem);line-height:1.6;letter-spacing:.02em;text-shadow:0 1px #fff8de,1px 2px #c5a16d38}.warm-ink{color:#a3395c}.hero-tag{position:relative;display:inline-block;color:#8f5b1c!important;font-size:1.07rem;font-weight:700;letter-spacing:.08em;margin:0 0 22px;padding:10px 18px;background:linear-gradient(90deg,#f1d99833,#fff1cb,#f1d99833);border-top:1px solid #c79a49;border-bottom:1px solid #c79a49;box-shadow:0 2px 0 #fff9df}.hero .lead{color:#764b54;font-size:1rem;line-height:2}.hero-art{z-index:1}.hero-halo{inset:11% -3% 10%;border:3px double #d2a451;background:var(--cloth),radial-gradient(ellipse,#f1c0d3,#e0d5e7 54%,#f6e6d166);box-shadow:0 0 0 3px #fff0b8,inset 0 0 0 4px #fff5d544;transform:rotate(9deg)}.talisman-art img{border-radius:9px;filter:drop-shadow(0 9px 9px #75401f44)}
.button{border-radius:10px;border:1px solid #b78a38;font-weight:600}.button-primary{background:var(--cloth),linear-gradient(165deg,#d57892,#ad4969 55%,#9a3e5c);color:#fff8e4;border:2px solid #bd9146;box-shadow:0 0 0 2px #ffebaf,inset 0 0 0 2px #f2b4c38c,inset 0 3px 7px #ffe9d938,0 5px 0 #843a5366,0 9px 17px #8d4f6e20;text-shadow:0 1px 1px #712741}.button-primary:hover{background:var(--cloth),linear-gradient(150deg,#cc6888,#913554)}.hero .button-primary{padding:14px 23px;min-height:56px;font-size:1rem;margin-top:8px}.button-quiet,.button-outline{background:var(--cloth),linear-gradient(130deg,#fff8e8,#f4ded8);border-color:#c69b51;color:#7a3c55;box-shadow:inset 0 0 0 2px #fff4d8,0 2px 0 #c4a36f44}.button-quiet:hover,.button-outline:hover{background:#f7dee6}.icon-button{color:#885366}.icon-button:hover{background:#f0d7df}
.progress-wrap{margin-top:36px}.progress-meta{color:#6f3d54;font-weight:600}.progress{height:6px;background:#d6a3bb;border:1px solid #bd9250;box-shadow:0 1px #ffedbe}.progress i{background:linear-gradient(90deg,#e5c476,#b88237,#edce85)}.panel{position:relative;isolation:isolate;max-width:1060px;padding:46px 44px;margin-top:30px;border:3px solid #bf934d;border-radius:26px;background:var(--cloth),linear-gradient(140deg,#fff9e9,#fff0e3);box-shadow:0 0 0 3px #ffedb4,0 0 0 6px #c49950,0 14px 30px #8a526e20,inset 0 0 0 4px #fff8e8,inset 0 0 0 6px #d6b77c}
.panel::before{content:"";position:absolute;right:-4px;top:-6px;width:115px;height:115px;background:url('./assets/embroidered-flowers.svg') center/contain no-repeat;transform:rotate(180deg);opacity:.85;pointer-events:none;z-index:-1}.panel::after{border:1px dashed #c49a5366;border-radius:19px;inset:10px}.panel>.eyebrow{color:#9a6d2e;font-size:.7rem}.panel>.eyebrow::before{content:"✿";color:#ba7f98;font-size:26px;text-shadow:1px 1px #fbe1a1}.panel>h1{color:#74314d;font-weight:600}.panel>.lead{color:#77515b}.card-spread{gap:22px}.card-image{display:block;aspect-ratio:auto;object-fit:contain;background:transparent;border:1px solid #bd914c;border-radius:8px;box-shadow:0 0 0 2px #fff1bf,0 4px 0 #b7834055,0 9px 18px #8d527433}
.card-back{aspect-ratio:1024/1758;border:3px solid #c79d53;outline:2px solid #fff0b6;outline-offset:2px;border-radius:13px;background:url('./assets/embroidered-flowers.svg') left bottom/100% auto no-repeat,var(--cloth),linear-gradient(135deg,#ecc2d6,#dca4bf 60%,#e1c6df);color:#843551;box-shadow:inset 0 0 0 3px #fff0bb,inset 0 0 0 6px #c39851,0 6px 13px #7e466c2c;gap:20px;overflow:hidden}
.draw-card:nth-child(2) .card-back{background-image:url('./assets/embroidered-flowers.svg'),var(--cloth),linear-gradient(135deg,#c5dcec,#a8c9e3,#d1d6e8);color:#355974}.draw-card:nth-child(3) .card-back{background-image:url('./assets/embroidered-flowers.svg'),var(--cloth),linear-gradient(135deg,#ead8c1,#e5c39e,#f1dcc1);color:#855532}.card-back::before{content:"";display:block;position:absolute;inset:11px;border:1px dashed #ffe7a5;border-radius:6px;pointer-events:none}.card-back::after{display:none}.card-back strong{font-weight:600;font-size:1.8rem;line-height:1.9;letter-spacing:.18em;text-shadow:0 1px 0 #fff1c2,1px 2px #a96c6620}.card-back span{color:#a6742b;text-shadow:0 1px 0 #fff2b7}.card-back .back-flower{font-size:3.5rem;line-height:1;filter:drop-shadow(0 2px 1px #986d3e44)}.card-back .back-food{font-size:1.7rem}.card-back small{padding:5px 8px;background:#fff0ddaa;border:1px solid #cea35a;color:#754557;font-size:.74rem;letter-spacing:.04em}.card-text{min-height:112px;padding-top:16px}.card-text strong{color:#913e5d}.card-text span{color:#77525e}.card-text small{color:#8d6a36}.draw-card.selected .card-image{outline:3px solid #c89441;outline-offset:4px}.choose-feeling.selected,.suggestion.selected{background:var(--cloth),linear-gradient(140deg,#f2d3df,#ebbbcf);border-color:#bd8f43;box-shadow:inset 0 0 0 2px #fff0c4;color:#773951}.draw-card>.text-button{color:#8c4d65}.support-intro h2{color:#9c4865}.support-intro h2 small{color:#9c752e}.food-note,.summary-card,.final-card{background:var(--cloth),linear-gradient(125deg,#f8ead2,#f9dfdf);border:2px solid #c49c56;box-shadow:inset 0 0 0 3px #fff5d9;border-radius:14px}.food-note{border-left-width:4px}.food-note strong{color:#8c5c21;font-size:1rem}.food-note p,.final-card p{color:#6e4752}.suggestion{background:var(--cloth),#fff7e9;border:1px solid #cba767;color:#6f4656;border-radius:12px}.suggestion-icon{color:#ad8350}.edit-summary{color:#744758}.edit-summary input{background:#fffaf0;border:1px solid #caa468;box-shadow:inset 0 2px 5px #996e4320}.question{color:#7b4155}.muted,.tiny-note{color:#88616c}.summary-image-frame{border:2px solid #cba15b;background:#fff2df;box-shadow:0 0 0 3px #fff0b8}.final-card h2{color:#944760}.gentle-reminder{color:#75515c}
dialog{background:var(--cloth),#fff4e7;border:3px solid #c29548;box-shadow:0 0 0 3px #ffecb0,0 24px 80px #5b2c4b55}.dialog-head{background:var(--cloth),#fff4e7;border-color:#c9a269;color:#7d3d57}.card-dialog-content p,.card-dialog-content li{color:#714856}dialog::backdrop{background:#49233788;backdrop-filter:blur(3px)}
footer{position:relative;display:flex;flex-direction:column;align-items:center;border-top:2px solid #bc8c3d;box-shadow:0 -2px #ffebad;padding:28px 0 30px;margin-top:42px;gap:14px}footer::before{display:none}.teacher-links{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;width:100%}.teacher-link{display:inline-flex;justify-content:center;align-items:center;gap:11px;min-height:52px;padding:12px 23px;border:2px solid #bf9750;border-radius:12px;color:#71455b;background:var(--cloth),linear-gradient(130deg,#fff4df,#f5d7df);box-shadow:0 0 0 2px #ffedb3,inset 0 0 0 2px #fff4d8,0 4px 0 #9f6d4c33;text-decoration:none;font-size:.92rem;font-weight:600}.teacher-link:hover{transform:translateY(-2px)}.teacher-link>span:first-child{color:#9a7335;font-size:1.3rem}.line-link{background:var(--cloth),linear-gradient(130deg,#e1eee2,#bdd7cb);color:#365c4d}.line-link>span:first-child{font-family:Arial,sans-serif;font-size:.72rem;color:#fff;background:#4c8a6c;border-radius:8px;padding:4px 6px}.footer-note{font-size:.72rem;color:#815868;margin:0}
.hero::before,.hero::after,.panel::before{z-index:0}
@media(max-width:900px){.hero{padding:42px 28px}.hero h1{font-size:2.25rem}.hero::before,.hero::after{width:130px;height:130px}.talisman-art{height:470px}.panel{padding-inline:28px}}
@media(max-width:760px){body::before{inset:5px;border-radius:18px}.app-shell{padding-inline:24px}.topbar{height:76px;gap:10px}.brand{font-size:.9rem;letter-spacing:.06em}.brand-mark{font-size:26px}.topbar .text-button{font-size:.7rem;padding:7px 10px}.hero{display:flex;flex-direction:column;margin:30px 0 27px;padding:42px 20px 0;min-height:0;gap:0;border-radius:28px;overflow:visible}.hero::before{width:110px;height:110px;top:-8px;left:-9px;opacity:.8}.hero::after{width:105px;height:105px;right:-8px;bottom:-8px;opacity:.8}.hero .eyebrow{font-size:.65rem;letter-spacing:.09em;gap:6px}.hero h1{font-size:clamp(1.65rem,6.7vw,2.6rem);line-height:1.65;margin:19px 0 17px;font-weight:700}.hero-tag{font-size:clamp(.82rem,3vw,1.05rem);padding:9px 6px;letter-spacing:.03em;margin-bottom:18px}.hero .lead{font-size:.88rem;line-height:2;max-width:none}.hero .button-primary{font-size:.92rem;padding:12px 15px;min-height:52px;margin-top:3px}.talisman-art{width:calc(100% + 18px);margin:12px -9px 0;height:clamp(305px,84vw,450px);min-height:0}.talisman-art img{width:49%}.hero-left{left:0;top:12%;transform:rotate(-13deg)}.hero-right{right:-1%;top:10%;transform:rotate(12deg)}.hero-center{left:26%;top:5%}.hero-halo{inset:13% -3% 14%}.progress-wrap{margin-top:31px}.progress-meta{font-size:.72rem}.panel{padding:32px 15px;margin-top:26px;border-radius:21px;margin-bottom:44px}.panel::before{width:90px;height:90px}.panel>.eyebrow{font-size:.6rem;letter-spacing:.09em;gap:7px}.panel>h1{font-size:1.5rem;line-height:1.6}.panel>.lead{font-size:.91rem;line-height:1.9}.card-spread{gap:10px;margin-inline:-3px}.card-back{border-width:2px;border-radius:8px;outline-width:1px;gap:10px;box-shadow:inset 0 0 0 2px #fff0bb,inset 0 0 0 4px #c39851,0 6px 13px #7e466c2c}.card-back::before{inset:7px}.card-back .back-flower{font-size:1.8rem}.card-back strong{font-size:.95rem;line-height:1.8;letter-spacing:.12em}.card-back .back-food{font-size:1rem}.card-back small{font-size:.59rem;letter-spacing:0;padding:3px;max-width:80px;line-height:1.6}.card-text{min-height:142px}.card-text small{font-size:.66rem;line-height:1.7;min-height:42px}.card-text strong{font-size:.9rem}.card-text span{font-size:.79rem;line-height:1.7}.choose-feeling{font-size:.69rem;padding:8px 2px;min-height:48px;gap:0}.draw-card>.text-button{font-size:.71rem}.button-row .button{font-size:.78rem}.food-note{padding:17px 14px}.food-note strong{font-size:.95rem}.food-note p{font-size:.91rem}.suggestion{font-size:.91rem}.teacher-links{flex-direction:column;align-items:stretch;gap:13px;max-width:360px}.teacher-link{min-height:50px;font-size:.85rem;padding:12px 15px}footer{padding-top:24px;margin-top:32px}.footer-note{font-size:.69rem}.image-dialog .enlarged-card{max-height:64vh}.card-dialog-content img{width:145px}}
@media(max-width:360px){.app-shell{padding-inline:19px}.brand{font-size:.8rem}.hero{padding-inline:14px}.hero h1{font-size:1.6rem}.panel{padding-inline:12px}.card-spread{gap:7px}.card-back strong{font-size:.85rem}.card-back small{font-size:.56rem}.choose-feeling{font-size:.65rem}.card-text span{font-size:.75rem}.card-text small{font-size:.62rem}}
