:root{--paper:#f3ebdf;--cream:#fcf8f0;--ink:#463a2b;--muted:#80725f;--olive:#657057;--olive-dark:#48543e;--sage:#e2e5d6;--line:#dacfbd;--terra:#a37b57;--pale:#eee3d3;--shadow:0 16px 42px rgba(86,65,38,.12);font-family:'DM Sans','Noto Serif TC',serif;color:var(--ink);background:var(--paper);font-synthesis:none;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--paper);font-size:16px;line-height:1.65}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--olive-dark)}:focus-visible{outline:3px solid #b98458;outline-offset:3px}.app-shell{max-width:1200px;min-height:100vh;margin:auto;padding:0 44px}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:10px;align-items:center;color:var(--ink);font-weight:600;text-decoration:none;letter-spacing:.06em}.brand-mark{color:var(--olive);font-size:24px}.text-button{border:0;padding:8px 2px;background:transparent;color:var(--olive-dark);font-size:.92rem;text-decoration:underline;text-underline-offset:4px}.text-button:hover{color:var(--terra)}.small{font-size:.8rem}.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:650px;gap:40px;padding:50px 0 38px}.hero-copy{max-width:570px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:.72rem;color:var(--olive);font-weight:700}.hero h1{font-family:'Noto Serif TC',serif;font-size:clamp(3.2rem,7vw,5.8rem);font-weight:500;line-height:1.2;letter-spacing:.08em;margin:18px 0}.hero-tag{font-family:'Noto Serif TC',serif;font-size:1.42rem;color:var(--olive-dark);margin:0 0 14px}.lead{font-size:1.08rem;color:#586052;max-width:480px;margin:0 0 24px}.privacy-pills{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.privacy-pills span{border:1px solid #d6dcca;border-radius:30px;padding:6px 12px;font-size:.78rem;color:#52634d;background:#f2f3e9}.button{border-radius:999px;min-height:50px;border:1px solid transparent;padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-weight:600;transition:transform .18s ease,background .18s ease}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--olive);color:white;box-shadow:0 8px 18px rgba(63,83,64,.14)}.button-primary:hover{background:var(--olive-dark)}.button-quiet{color:var(--olive-dark);background:#efede5;border-color:#e2ddcf}.button-outline{background:transparent;color:var(--olive-dark);border-color:#cbd3c3}.button-outline:hover,.button-quiet:hover{background:#e7ebdf}.full{width:100%}.tiny-note{font-size:.78rem;color:var(--muted);margin:14px 0 0}.hero-art{height:520px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:48% 52% 50% 48%;background:radial-gradient(ellipse at 51% 57%,#e6e5d5 0,#e6e5d5 35%,#ece9da 65%,transparent 66%)}.sun{position:absolute;width:95px;height:95px;right:16%;top:12%;border-radius:50%;background:#e7d9b9;opacity:.72}.leaf{position:absolute;color:#89977d;font-size:150px;opacity:.56}.leaf-a{left:6%;top:25%;transform:rotate(-30deg)}.leaf-b{right:7%;bottom:13%;transform:rotate(145deg)}.hero-card{z-index:1;width:245px;height:345px;background:linear-gradient(145deg,#f9f7ef,#e8e6d8);border:1px solid rgba(130,134,112,.3);box-shadow:12px 22px 40px rgba(61,67,53,.15);transform:rotate(-7deg);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--olive-dark);font-family:'Noto Serif TC',serif;position:relative}.hero-card:before,.hero-card:after{content:'✳';position:absolute;color:#a3ac91;font-size:30px}.hero-card:before{top:15px;right:20px}.hero-card:after{bottom:15px;left:20px}.hero-card span{font-size:.95rem;letter-spacing:.12em;margin-bottom:20px}.hero-card strong{font-size:2rem;line-height:1.65;font-weight:500;letter-spacing:.12em;text-align:center}.hero-card small{margin-top:20px;letter-spacing:.18em;color:#8a8a73}.art-spark{position:absolute;top:21%;left:20%;color:#b08b67;font-size:34px}.below-fold{border-top:1px solid var(--line);padding:50px 0 72px;max-width:800px}.below-fold h2{font-family:'Noto Serif TC',serif;font-weight:500;font-size:1.75rem}.below-fold p{color:var(--muted)}details{border-top:1px solid var(--line);padding:16px 0;margin-top:20px}summary{cursor:pointer;font-weight:600;color:var(--olive-dark)}details p{font-size:.9rem}
main{min-height:65vh}.progress-wrap{max-width:780px;margin:36px auto 18px}.progress-meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:8px}.progress{height:4px;background:#e4e0d6;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;border-radius:9px;background:var(--olive)}.panel{max-width:780px;margin:0 auto;padding:36px 0 70px}.panel>h1{font-family:'Noto Serif TC',serif;font-size:clamp(1.9rem,5vw,2.6rem);font-weight:500;line-height:1.4;margin:8px 0 6px;letter-spacing:.035em}.panel>.lead{margin-bottom:28px}.draw-instruction{color:var(--muted);margin:22px 0}.card-spread{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0 32px}.draw-card{min-width:0;text-align:center}.card-image{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;box-shadow:var(--shadow)}.card-text{display:flex;flex-direction:column;text-align:left;padding:9px 4px;gap:2px}.card-text strong{font-family:'Noto Serif TC',serif;font-size:1.06rem}.card-text span{font-size:.78rem;color:var(--muted)}.card-back{width:100%;aspect-ratio:2/3;border:1px solid #c9cbb8;border-radius:8px;background:linear-gradient(145deg,#eeebdf,#e0e3d5);color:var(--olive);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;position:relative;overflow:hidden}.card-back:before,.card-back:after{content:'❧';position:absolute;color:#a8b19a;font-size:52px;opacity:.7}.card-back:before{top:8%;left:8%}.card-back:after{bottom:8%;right:8%;transform:rotate(160deg)}.card-back span{font-size:3rem}.card-back small{max-width:110px;line-height:1.5;letter-spacing:.1em}.feeling-choices{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mini-chip{border:1px solid var(--line);background:#faf8f2;border-radius:20px;padding:5px 4px;font-size:.7rem;color:var(--muted)}.mini-chip.selected{background:var(--sage);color:var(--olive-dark);border-color:#9eae96}.button-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:26px 0 8px}.button-row.compact{justify-content:flex-start;flex-wrap:wrap}.button-row.wrap{flex-wrap:wrap;justify-content:center}.context-card{display:flex;align-items:center;gap:18px;padding:14px;background:#eeece2;border-radius:12px;margin:26px 0}.context-card img{width:74px;height:110px;object-fit:cover;border-radius:5px}.context-card h2{margin:0;font-family:'Noto Serif TC',serif;font-size:1.2rem}.context-card h2 small{font-family:'DM Sans',sans-serif;font-weight:400;font-size:.75rem;color:var(--muted)}.context-card p{font-size:.88rem;line-height:1.6;margin:5px 0}.question{font-family:'Noto Serif TC',serif;font-size:1.15rem;font-weight:600;margin:26px 0 12px}.field-group{margin:20px 0}.field-label{font-size:.85rem;font-weight:700;margin-bottom:8px;color:#515d4d}.chip-group{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid #d9d5c9;border-radius:99px;background:#faf8f2;padding:9px 15px;color:#4f564c;font-size:.87rem;min-height:42px}.chip:hover{border-color:#87977e}.chip.selected{background:#e4e9de;border-color:#9eae96;color:var(--olive-dark);box-shadow:inset 0 0 0 1px #9eae96}.sub-options{margin-top:-8px;margin-bottom:14px}.sub-options .chip{min-height:34px;padding:5px 12px;font-size:.78rem}.other-field,.edit-summary{display:block;margin:18px 0;font-size:.83rem;font-weight:600;color:#515d4d}.other-field input,.edit-summary input,.edit-summary textarea,textarea{width:100%;margin-top:7px;border:1px solid #d8d3c7;border-radius:9px;padding:12px 14px;background:#fcfaf4;color:var(--ink);resize:vertical}.other-field input{height:48px}.edit-summary textarea{min-height:82px}.reuse{margin-top:6px}.skip-link{display:block;margin:14px auto}.tiny-note{line-height:1.65}.question-block{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px}.focus-list{display:grid;gap:10px}.focus-card{width:100%;display:flex;gap:14px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fbf9f3;padding:10px}.focus-card.selected{border-color:#809177;background:#edf0e7;box-shadow:0 0 0 2px #dce3d5}.focus-card img{width:56px;height:82px;object-fit:cover;border-radius:4px}.focus-card span:nth-child(2){display:flex;flex-direction:column;flex:1}.focus-card strong{font-family:'Noto Serif TC',serif}.focus-card small{font-size:.79rem;color:#62695f}.radio-dot{height:18px;width:18px;border:1px solid #909789;border-radius:50%;margin:0 7px}.focus-card.selected .radio-dot{border:5px solid var(--olive)}.gentle-callout,.safety-callout{background:#f2ede1;border-left:4px solid #b28a67;padding:14px 17px;margin:22px 0;border-radius:0 8px 8px 0;font-size:.9rem}.safety-callout{background:#f4e9e3;border-color:#aa705b}.safety-callout p{margin:6px 0}.summary-card{background:#eeece2;border-radius:12px;padding:18px;margin:20px 0}.summary-card p{margin:5px 0}.muted{color:var(--muted);font-size:.82rem}.confirm-row{margin:12px 0 24px}.suggestions{display:grid;gap:9px}.suggestion{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:13px 16px;border:1px solid var(--line);border-radius:11px;background:#fbf9f3;color:var(--ink)}.suggestion.selected{background:#e7ebdf;border-color:#9eae96}.suggestion-icon{font-size:1.4rem;color:var(--olive)}.story-card{padding:24px;background:#f3f0e7;border:1px solid #e0dccf;border-radius:15px;margin:24px 0}.story-meta{display:flex;flex-wrap:wrap;justify-content:space-between;font-size:.78rem;color:var(--muted)}.story-card h2{font-family:'Noto Serif TC',serif;font-size:1.5rem;font-weight:500;line-height:1.5;margin:12px 0}.story-card p{margin:7px 0}.story-note{border-top:1px solid #dcd7c8;margin-top:18px;padding-top:12px}.story-note strong{font-size:.82rem;color:var(--olive-dark)}.source-link{display:inline-block;margin-top:10px}.center{text-align:center}.finish-flower{text-align:center;font-size:3rem;color:#9aa68e;margin:24px}.final-card{padding:22px;background:#eeece2;border-radius:13px;margin:25px 0}.final-card h2{font-family:'Noto Serif TC',serif;font-size:1.3rem;margin:9px 0}.final-card p{margin:0;color:#586052}footer{border-top:1px solid var(--line);padding:20px 0 30px;display:flex;justify-content:space-between;align-items:start;gap:20px;color:var(--muted);font-size:.82rem}footer details{width:min(420px,60%);padding:0;margin:0;border:0}footer details p{font-size:.82rem}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-head h2{font-family:'Noto Serif TC',serif;font-size:1.35rem;font-weight:500;margin:0}.icon-button{border:0;background:transparent;font-size:1.7rem;color:var(--muted);width:42px;height:42px;border-radius:50%}dialog{border:1px solid var(--line);border-radius:15px;padding:24px;max-width:min(760px,calc(100vw - 28px));width:720px;background:var(--cream);color:var(--ink);box-shadow:0 20px 80px rgba(0,0,0,.18);max-height:88vh;overflow:auto}dialog::backdrop{background:rgba(35,40,32,.43)}dialog>p{color:#5d6458}.check-row{display:flex;align-items:flex-start;gap:10px;margin:16px 0;font-size:.92rem}.check-row input{width:18px;height:18px;accent-color:var(--olive);margin-top:3px;flex:none}.saved-card{background:#efede5;padding:15px;border-radius:10px;margin:15px 0}.saved-card h3{margin:0 0 5px}.saved-card p{font-size:.87rem}.card-dialog-content{display:grid;grid-template-columns:210px 1fr;gap:22px;margin-top:18px}.card-dialog-content img{width:100%;border-radius:6px}.card-dialog-content p,.card-dialog-content li{font-size:.9rem}.card-dialog-content h3{font-size:.95rem;margin:16px 0 3px}.card-topic{font-family:'Noto Serif TC',serif;color:var(--olive-dark);font-size:1.15rem!important}.source-detail{margin-top:32px}
@media(max-width:760px){.app-shell{padding:0 20px}.topbar{height:68px}.hero{grid-template-columns:1fr;min-height:auto;padding:62px 0 32px;gap:25px}.hero-copy{max-width:none}.hero h1{font-size:clamp(3rem,12vw,4.4rem);margin:12px 0}.hero-art{height:380px;max-width:480px;width:100%;margin:auto}.hero-card{width:190px;height:280px}.hero-card strong{font-size:1.6rem}.hero-card span{font-size:.8rem}.leaf{font-size:115px}.below-fold{padding:34px 0 52px}.progress-wrap{margin:24px auto 14px}.panel{padding:22px 0 48px}.panel>h1{font-size:1.85rem}.panel>.lead{font-size:.97rem}.card-spread{gap:9px;margin:17px -4px 24px}.card-image{border-radius:6px}.card-back{border-radius:6px}.card-back span{font-size:2.3rem}.card-back small{font-size:.65rem;padding:0 5px}.card-text{padding:7px 1px}.card-text strong{font-size:.9rem}.card-text span{font-size:.68rem;line-height:1.4;min-height:36px}.feeling-choices{gap:4px}.mini-chip{font-size:.62rem;padding:5px 2px}.draw-card>.text-button{font-size:.72rem}.button-row{gap:8px}.button-row .button{flex:1;padding:10px 14px;min-height:46px;font-size:.87rem}.button-row.compact .button{flex:0 1 auto}.context-card{align-items:flex-start;gap:12px;padding:10px}.context-card img{width:60px;height:90px}.chip{padding:8px 12px;font-size:.84rem;min-height:42px}.field-group{margin:16px 0}.focus-card img{width:51px;height:76px}.story-card{padding:18px}.story-card h2{font-size:1.27rem}.card-dialog-content{grid-template-columns:105px 1fr;gap:15px}.card-dialog-content p,.card-dialog-content li{font-size:.82rem}.card-dialog-content img{position:sticky;top:0}footer{display:block;padding-bottom:24px}footer details{width:100%;margin-top:14px}.privacy-pills span{font-size:.72rem}.source-detail{margin-top:24px}}
@media(max-width:390px){.app-shell{padding:0 15px}.card-spread{gap:6px}.mini-chip{font-size:.58rem}.card-text strong{font-size:.81rem}.card-text span{font-size:.62rem}.card-back small{font-size:.59rem}.button-row{flex-wrap:wrap}.button-row .button{flex:1 1 42%}.context-card h2{font-size:1rem}.context-card h2 small{display:block}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.theme-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:22px 0}.theme-option{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:13px 15px;min-height:72px;border:1px solid var(--line);background:#fbf9f3;border-radius:10px;color:var(--ink)}.theme-option:hover{background:#e7ebdf;border-color:#9eae96}.theme-option strong{font-size:.87rem}.theme-option small{color:var(--muted);font-size:.72rem}.card-back.waiting{cursor:default;opacity:.72}

/* Warm paper and botanical tones shared with the emotion cards. */
body{background:radial-gradient(ellipse at 5% 5%,rgba(255,252,244,.75),transparent 54%),radial-gradient(ellipse at 95% 65%,rgba(211,190,156,.15),transparent 58%),var(--paper)}
main:focus{outline:none}
.hero{grid-template-columns:1fr 1fr;gap:48px;min-height:610px;padding:44px 0 48px}
.hero-copy{min-width:0}
.hero h1{display:flex;flex-wrap:wrap;column-gap:.12em;font-size:clamp(2.65rem,5.2vw,4rem);line-height:1.35;letter-spacing:.035em;margin:20px 0 24px;color:#493c29}
.hero h1 span{white-space:nowrap}
.hero-tag{font-size:clamp(1.15rem,2.1vw,1.4rem);color:#655943;line-height:1.8}
.hero .lead{color:var(--muted);font-size:1rem;line-height:1.95;margin-bottom:30px}
.hero .tiny-note{font-size:.84rem;margin-top:16px;letter-spacing:.04em}
.hero-art{display:block;height:auto;width:100%;max-width:450px;justify-self:end;position:relative;overflow:hidden;border-radius:10px;background:#e5d4bd;box-shadow:0 18px 45px rgba(99,77,48,.13)}
.hero-art img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.button-primary{background:#606d53;box-shadow:0 7px 20px rgba(78,75,48,.14)}
.button-quiet,.context-card,.summary-card,.final-card,.saved-card{background:#eee5d7}
.card-back{background:radial-gradient(ellipse at top left,#faf4e9,#e6d8c2);border-color:#c5b79f;color:#70674f}
.card-back:before,.card-back:after{color:#8c957a}
.card-image{box-shadow:0 12px 30px rgba(97,72,43,.14)}
.story-card{background:#f5eee2;border-color:var(--line)}
.chip,.mini-chip,.focus-card,.suggestion,.theme-option{background:var(--cream)}
.dialog-head{position:sticky;top:-24px;z-index:2;background:var(--cream);padding:10px 0}
.icon-button:hover{background:var(--pale);color:var(--ink)}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:30px;padding:42px 0 36px;min-height:auto}.hero h1{font-size:clamp(2.45rem,11.5vw,3.4rem);margin:14px 0 20px}.hero-art{height:auto;width:100%;max-width:440px;justify-self:center;margin:0}.hero-copy{max-width:520px}.hero .lead{margin-bottom:25px}.hero-tag{font-size:1.2rem}}