:root{--ink: #2a2622;--ink-soft: #4a443c;--accent: #3f6b53;--accent-2: #a84d2e;--muted: #7a736a;--maxw: 440px;--surface-fill: rgba(255, 255, 255, .7);--btn-fill: rgba(54, 50, 50, .7);--grad-border: linear-gradient(145deg, rgba(2, 2, 2, .5), rgba(205, 177, 177, 1))}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:"Noto Serif TC",Songti TC,Microsoft JhengHei,serif;color:var(--ink);-webkit-font-smoothing:antialiased;background:#e9e3d5 url(/bg-collage.jpg) center center / cover no-repeat fixed}.app{max-width:var(--maxw);min-height:100%;margin:0 auto;position:relative}.bg-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff6;pointer-events:none;z-index:0}.bg-overlay.landing{background:#fff6}.bg-overlay.loading{background:#434343c7}.intro-splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#e9e3d5 url(/bg-collage.jpg) center center / cover no-repeat;opacity:1;transition:opacity 1s ease}.intro-splash:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff14}.intro-splash.out{opacity:0}.bgm-toggle{position:fixed;top:14px;right:14px;z-index:40;width:40px;height:40px;padding:0;display:grid;place-items:center;border:none;border-radius:50%;cursor:pointer;background:#00000052;color:#fbf8f0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px #00000040;transition:background .15s ease}.bgm-toggle:hover{background:#00000075}.fade{position:relative;z-index:1;transition:opacity .22s ease}.fade.in{opacity:1}.fade.out{opacity:0}.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:30px 22px calc(26px + env(safe-area-inset-bottom))}.screen.center{align-items:center;justify-content:center;text-align:center;gap:16px}.card{border:2px solid transparent;border-radius:15px;background:linear-gradient(var(--surface-fill),var(--surface-fill)) padding-box,var(--grad-border) border-box;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.btn{font:inherit;font-size:16px;font-weight:500;min-height:56px;padding:12px 22px;cursor:pointer;color:#f6f2e9;border:2px solid transparent;border-radius:15px;background:linear-gradient(var(--btn-fill),var(--btn-fill)) padding-box,var(--grad-border) border-box;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:transform .05s ease,opacity .2s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-ghost{min-height:0;background:none;border-color:transparent;color:var(--muted);-webkit-backdrop-filter:none;backdrop-filter:none}.link{background:none;border:none;color:#f4efe4;font:inherit;font-size:14px;cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.35)}.landing{justify-content:center}.landing .welcome{padding:34px 26px;text-align:center}.landing .hello{font-size:20px;font-weight:700;line-height:20px;letter-spacing:0;text-align:center}.landing h1{font-size:24px;font-weight:700;letter-spacing:-.32px;color:#000;margin:12px 0 22px;line-height:1.4}.landing .lede{color:#000;font-size:16px;line-height:26px;letter-spacing:-.32px;font-weight:600;display:flex;flex-direction:column;gap:16px}.landing .ask{font-weight:700;color:#000}.landing .cta{margin:26px auto 0;display:block;min-width:180px;font-size:18px;padding:15px 30px}.quiz{justify-content:space-between}.quiz-card{padding:26px 24px;text-align:center;margin-top:4px}.q-prompt{font-size:24px;font-weight:700;line-height:33px;letter-spacing:-.32px;color:#000}.q-hint{margin-top:10px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em}.choice-heading{font-size:18px;font-weight:700;color:#000;letter-spacing:-.32px;margin:24px 0 -6px}.choices{list-style:none;display:flex;flex-direction:column;gap:13px;margin:26px 0}.choices.grid{display:grid;grid-template-columns:1fr 1fr}.choice{width:100%;font:inherit;cursor:pointer;text-align:left;border:2px solid transparent;border-radius:15px;padding:14px 18px;background:linear-gradient(var(--surface-fill),var(--surface-fill)) padding-box,var(--grad-border) border-box;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;transition:box-shadow .15s,background .15s}.choice.is-selected{background:linear-gradient(#ffffffeb,#ffffffeb) padding-box,var(--grad-border) border-box;box-shadow:inset 0 0 0 2px var(--accent)}.choices.inline .choice{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0}.choices.inline.break .choice{flex-direction:column;align-items:flex-start;gap:2px}.choices.inline .choice-label,.choices.inline .choice-desc{font-size:16px;font-weight:600;color:#000;letter-spacing:-.32px;line-height:26px}.choices.subject .choice{justify-content:flex-start;align-items:center;gap:14px}.choices.subject .choice-label{font-size:17px;font-weight:700;color:#000}.choices.subject .choice-desc{font-size:14px;font-weight:600;color:#000;line-height:26px;letter-spacing:-.32px}.choices.grid .choice{justify-content:center;text-align:center;padding:16px 10px}.choices.grid .choice-label{font-size:16px;font-weight:600;color:#000}.choices.terrain{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0}.choices.terrain .choice{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:133px;border-radius:15px;padding:16px 10px}.choices.terrain .choice-cat{font-size:16px;font-weight:700;color:#000;letter-spacing:-.32px;line-height:26px}.choices.terrain .choice-label{font-size:14px;font-weight:600;color:#000;letter-spacing:-.32px;line-height:26px}.text-answer{margin:22px 0;display:flex;flex-direction:column;gap:8px}.text-answer textarea{font:inherit;font-size:18px;line-height:1.8;min-height:150px;resize:none;border:2px solid transparent;border-radius:15px;padding:18px;color:var(--ink);background:linear-gradient(var(--surface-fill),var(--surface-fill)) padding-box,var(--grad-border) border-box;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.text-answer textarea::placeholder{color:var(--muted)}.text-answer .counter{align-self:flex-end;font-size:12px;color:#f4efe4;text-shadow:0 1px 3px rgba(0,0,0,.35)}.quiz-nav{display:flex;gap:14px}.quiz-nav .btn{flex:1}.loading-text{font-size:22px;font-weight:700;letter-spacing:.12em;color:#fbf8f0;text-shadow:0 2px 8px rgba(0,0,0,.4)}.loading-sub{font-size:13px;color:#f0ebe0;text-shadow:0 1px 5px rgba(0,0,0,.4);max-width:250px}.loading-fact{margin-top:22px;max-width:300px;font-size:14px;line-height:24px;color:#f0ebe0;text-shadow:0 1px 5px rgba(0,0,0,.45);animation:factFade 1s ease}@keyframes factFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.ripple{position:relative;width:70px;height:70px;margin-bottom:6px}.ripple span{position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid rgba(255,255,255,.8);border-radius:50%;animation:ripple 1.8s cubic-bezier(0,.2,.8,1) infinite;opacity:0}.ripple span:nth-child(2){animation-delay:.6s}.ripple span:nth-child(3){animation-delay:1.2s}@keyframes ripple{0%{transform:scale(.2);opacity:.8}to{transform:scale(1);opacity:0}}.result{gap:22px;background:none}.result:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:#e9e3d5;background-image:linear-gradient(#ffffffe0,#ffffffe0),url(/bg-collage.jpg);background-repeat:no-repeat;background-position:center center;background-size:100% 100%,cover}.result-intro{color:#000;text-shadow:0 1px 5px rgba(255,255,255,.55)}.result-intro p{font-size:16px;font-weight:700;line-height:30px;letter-spacing:-.32px}.result-intro p+p{margin-top:10px}.art-canvas{width:100%;height:auto;display:block;border-radius:2px;box-shadow:0 10px 30px #281e0a2e}.result-done{text-align:center;font-size:26px;font-weight:900;letter-spacing:.05em;color:#000;text-shadow:0 1px 6px rgba(255,255,255,.6)}.art-card{background:#fbfaf6;border-radius:8px;padding:20px 20px 18px;box-shadow:0 10px 34px #281e0a38}.art-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.art-card-head .work{font-size:17px;font-weight:700;letter-spacing:.04em}.art-card-head .brand{text-align:right;font-size:10px;line-height:1.5;color:var(--ink-soft)}.art-card-head .brand b{display:block;font-size:13px;letter-spacing:.18em}.art-card img{width:100%;display:block}.art-card .pledge{margin-top:12px;font-size:14px;color:#000}.narrative,.share-block{width:320px;max-width:100%;margin-left:auto;margin-right:auto;color:#000;text-shadow:0 1px 5px rgba(255,255,255,.55)}.share-block{width:355px}.narrative .lead{font-size:16px;font-weight:700;line-height:30px;letter-spacing:-.32px;margin-bottom:12px}.narrative .body{font-size:16px;font-weight:700;line-height:30px;letter-spacing:-.32px}.share-title{font-size:24px;font-weight:700;line-height:26px;letter-spacing:-.32px;color:#000;margin-bottom:14px}.share-note{font-size:16px;font-weight:700;line-height:30px;letter-spacing:-.32px;color:#000}.btn-download{width:155px;flex:none;align-self:center}.share-postbox{width:100%;margin:14px 0;display:flex;flex-direction:column;gap:12px;padding:16px;border:2px solid transparent;border-radius:15px;background:linear-gradient(#fff,#fff) padding-box,var(--grad-border) border-box}.share-posttext{white-space:pre-wrap;font-size:14px;font-weight:700;line-height:26px;letter-spacing:-.32px;color:#000}.btn-copy{align-self:center;flex:none;min-height:48px;padding:10px 26px;color:#fff;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(#8b99ca,#8b99ca) padding-box,var(--grad-border) border-box}.copy-ico{width:16px;height:16px;flex:none}.share-do{display:block;width:155px;margin:2px auto 0}.restart{text-align:center}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:flex-end;justify-content:center;z-index:100;animation:fadeIn .2s ease}.sheet{width:100%;max-width:var(--maxw);background:#fbfaf6;border-radius:20px 20px 0 0;padding:24px 22px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:11px;animation:sheetUp .25s cubic-bezier(.2,.8,.2,1)}.sheet-title{font-size:18px;font-weight:700;text-align:center;color:#000}.sheet-text{font-size:13px;line-height:1.8;color:var(--ink-soft);text-align:center;margin-bottom:6px}.sheet-hint{font-size:11.5px;line-height:1.6;color:var(--muted);text-align:center;margin-top:4px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.credits{width:304px;max-width:100%;margin:0 auto;border-top:1px solid rgba(120,110,90,.4);padding-top:16px;display:flex;flex-direction:column;gap:6px}.credits div{font-size:14px;font-weight:700;line-height:26px;letter-spacing:-.32px;color:#000;padding-left:10px;border-left:3px solid var(--accent)}