@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--paper:#f7f5ed;--ivory:#fffdf7;--ink:#2d3d33;--muted:#778176;--jade:#426b56;--jade-deep:#315341;--jade-pale:#e8eee5;--celadon:#cbdac9;--line:#e1ddcf;--gold:#b08d59;--cinnabar:#a96c57;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow-x:hidden}body{overflow-y:auto;color:var(--ink);background:var(--paper);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}button,a,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}button:disabled{cursor:not-allowed}.site-header{height:66px;flex:none;position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5.5vw,82px);background:rgba(249,247,240,.94);border-bottom:1px solid rgba(205,199,183,.55);box-shadow:0 4px 20px rgba(57,67,49,.025)}.brand{display:flex;align-items:center;gap:10px;min-width:205px}.brand-mark{width:34px;height:34px;display:grid;place-items:center;color:#a98a56}.brand-mark svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.1}.brand-copy b{display:block;font:500 20px/1 var(--serif);letter-spacing:.22em;color:#8d7044}.brand-copy small{display:block;font-size:7px;letter-spacing:.2em;margin-top:5px;color:#8a887c}.header-tools{display:flex;align-items:center;gap:24px}.language{font-size:10px;letter-spacing:.08em;color:#495b4c}.language span{font-size:12px;margin-left:5px}.menu-button{width:30px;height:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border:0;background:transparent;padding:3px}.menu-button span{height:1px;width:22px;background:#415446;transition:transform .18s}.menu-button[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-button[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.menu-panel{position:absolute;right:clamp(18px,5.5vw,82px);top:56px;width:190px;padding:8px;background:rgba(255,253,247,.98);border:1px solid var(--line);box-shadow:0 14px 36px #28392c18}.menu-panel[hidden]{display:none}.menu-panel a{display:block;padding:10px 12px;font-size:11px;color:#536458}.menu-panel a:hover{background:#edf1e9;color:#324e3c}
.app-main{height:calc(100% - 66px);min-height:0;position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 40%,#fffdf7 0,#f8f6ef 53%,#f0eee4 100%)}.app-main:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,rgba(223,232,219,.5),transparent 43%),linear-gradient(180deg,rgba(255,255,255,.23),transparent 48%,rgba(217,225,211,.13))}.view{height:100%;width:100%;min-height:0;position:relative;overflow:hidden}.view[hidden]{display:none!important}.home-view{display:grid;grid-template-rows:auto minmax(155px,1fr) auto auto auto;gap:clamp(4px,1vh,10px);padding:clamp(8px,1.7vh,17px) clamp(16px,5.1vw,78px) clamp(7px,1.5vh,14px);isolation:isolate}.home-view:before{content:"";position:absolute;z-index:-1;left:-3%;right:-3%;bottom:0;height:40%;opacity:.45;background:linear-gradient(180deg,transparent 0%,#ebece1 87%)}.home-intro{text-align:center;position:relative;z-index:3}.eyebrow{font-size:8px;letter-spacing:.25em;font-weight:600;color:#927e5b;margin:0 0 4px}.eyebrow i{font-style:normal;color:#bd9c66;padding:0 6px}.tiny-sun{font-size:12px;color:#b49360;margin-right:6px}.home-intro h1{font:500 clamp(25px,3vw,39px)/1.03 var(--serif);letter-spacing:-.02em;margin:0;color:#2e4034}.home-intro h1 em{font-weight:400;color:#77917a}.intro-copy{margin:6px 0 0;font-size:10px;color:#7b8277;letter-spacing:.02em}
.oracle-scene{position:relative;min-height:0;width:min(100%,740px);height:100%;margin:0 auto;isolation:isolate}.scene-sun{position:absolute;width:clamp(105px,13vw,165px);aspect-ratio:1;border-radius:50%;top:6%;left:calc(50% - clamp(52px,6.5vw,82px));background:radial-gradient(circle at 34% 30%,#f5ecda,#e7dcc0 78%);opacity:.58}.scene-rings{position:absolute;top:4%;left:50%;transform:translateX(-50%);width:clamp(190px,25vw,310px);height:88%;max-height:275px;border:1px solid rgba(178,164,132,.33);border-radius:50%;box-shadow:0 0 0 12px rgba(242,238,226,.38),0 0 0 13px rgba(178,164,132,.15)}.mountain-range{position:absolute;left:-7%;right:-7%;bottom:0;height:55%;pointer-events:none}.range-back{opacity:.52;background:#e6e6d9;clip-path:polygon(0 75%,9% 53%,19% 67%,30% 19%,38% 58%,50% 3%,61% 61%,72% 24%,83% 64%,93% 38%,100% 61%,100% 100%,0 100%)}.range-mid{height:43%;opacity:.48;background:#d0d9ca;clip-path:polygon(0 67%,10% 35%,21% 59%,37% 5%,51% 65%,64% 21%,80% 60%,92% 30%,100% 61%,100% 100%,0 100%)}.range-front{height:26%;opacity:.38;background:#b4c7b1;clip-path:polygon(0 54%,14% 39%,28% 66%,44% 20%,62% 59%,78% 27%,90% 51%,100% 38%,100% 100%,0 100%)}.branch-decoration{position:absolute;right:10%;top:16%;width:80px;height:110px;border-left:1px solid #91a18d;transform:rotate(32deg);opacity:.42}.branch-decoration i{position:absolute;width:35px;height:11px;background:#9cae98;border-radius:100% 0 100% 0;transform:rotate(-28deg);left:-3px;top:12px}.branch-decoration i:nth-child(2){top:31px;left:9px;transform:rotate(22deg)}.branch-decoration i:nth-child(3){top:50px;left:-8px}.branch-decoration i:nth-child(4){top:68px;left:6px;transform:rotate(22deg)}.branch-decoration i:nth-child(5){top:84px;left:-7px}.symbol-orbit{position:absolute;z-index:1;left:50%;top:7%;width:clamp(180px,23vw,285px);height:84%;max-height:265px;transform:translateX(-50%);pointer-events:none;animation:orbitBreathe 18s ease-in-out infinite alternate}.symbol-orbit span{position:absolute;display:grid;place-items:center;width:20px;height:20px;font:16px/1 serif;color:#7f9980;opacity:.47}.symbol-orbit span:nth-child(1){top:0;left:calc(50% - 10px)}.symbol-orbit span:nth-child(2){top:26px;right:20px}.symbol-orbit span:nth-child(3){top:calc(50% - 10px);right:0}.symbol-orbit span:nth-child(4){bottom:26px;right:20px}.symbol-orbit span:nth-child(5){bottom:0;left:calc(50% - 10px)}.symbol-orbit span:nth-child(6){bottom:26px;left:20px}.symbol-orbit span:nth-child(7){top:calc(50% - 10px);left:0}.symbol-orbit span:nth-child(8){top:26px;left:20px}.fortune-sticks{position:absolute;z-index:2;left:50%;bottom:27%;width:155px;height:78%;max-height:235px;transform:translateX(-50%)}.fortune-sticks i{position:absolute;bottom:4px;left:calc(50% - 4px);width:9px;height:82%;max-height:190px;border:1px solid #c3a271;border-radius:4px 4px 1px 1px;background:linear-gradient(90deg,#c5a675,#f1e2c4 46%,#c9ad7e);box-shadow:1px 3px 5px #64513a12;color:#94674c;text-align:center;padding-top:7px;font:9px/1.3 serif;font-style:normal;transform-origin:bottom center}.fortune-sticks i:nth-child(1){transform:rotate(-27deg) translateY(-5px)}.fortune-sticks i:nth-child(2){transform:rotate(-18deg) translateY(-15px)}.fortune-sticks i:nth-child(3){transform:rotate(-9deg) translateY(-5px)}.fortune-sticks i:nth-child(4){transform:translateY(-13px)}.fortune-sticks i:nth-child(5){transform:rotate(9deg) translateY(-3px)}.fortune-sticks i:nth-child(6){transform:rotate(18deg) translateY(-12px)}.fortune-sticks i:nth-child(7){transform:rotate(27deg) translateY(-2px)}.draw-tube{position:absolute;z-index:4;left:50%;bottom:13%;transform:translateX(-50%);width:clamp(103px,10vw,128px);height:clamp(125px,22vh,170px);border-radius:19px 19px 24px 24px;border:1px solid #71513a;background:linear-gradient(90deg,#5d402f 0%,#886247 15%,#ae8861 38%,#c19d72 50%,#9e7954 72%,#604432 100%);box-shadow:inset 5px 0 10px #e7c9a522,inset -8px 0 12px #20130e27,0 17px 24px #4a3b2e1c,0 2px 2px #fff8e01a;filter:saturate(.82);transition:transform .2s ease}.tube-mouth{position:absolute;left:-5px;top:-12px;width:calc(100% + 10px);height:25px;border-radius:50%;border:2px solid #8b684b;background:linear-gradient(180deg,#f2e5cb 0%,#cfb07b 24%,#73503b 47%,#9a704c 70%,#d6b885 100%);box-shadow:0 2px 5px #20130e2b}.tube-band{position:absolute;left:0;right:0;height:8px;background:linear-gradient(180deg,#f0dfba,#c9a974 50%,#ecd9b1);border-block:1px solid #896846;box-shadow:0 1px 3px #2e20152c}.tube-band-top{top:19px}.tube-band-bottom{bottom:20px}.tube-medallion{position:absolute;top:38%;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:44px;height:44px;border:1px solid #dfc79c;border-radius:50%;background:linear-gradient(145deg,#a96f58,#8a5544);color:#fff8e9;font:23px/1 serif;box-shadow:0 2px 6px #2b1d1722}.tube-inscription{position:absolute;top:68%;left:0;right:0;text-align:center;color:#f5e8d1;font:9px serif;letter-spacing:.2em;text-shadow:0 1px 2px #654225}.tube-foot{position:absolute;bottom:-6px;left:10px;right:10px;height:11px;border-radius:50%;background:#66412c;border:1px solid #543522}.scene-shadow{position:absolute;z-index:3;bottom:10%;left:50%;transform:translateX(-50%);height:13px;width:155px;border-radius:50%;background:#3e503a17;filter:blur(11px)}.draw-tube.shaking{animation:tubeShake 1.1s cubic-bezier(.3,.8,.3,1)}
.focus-block{position:relative;z-index:5;width:min(100%,980px);margin:0 auto}.focus-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:7px}.step-label{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:8px;letter-spacing:.18em;font-weight:700;color:#917c58}.step-label i{display:inline-block;width:24px;height:1px;background:#c4a36c}.focus-heading p{margin:0;font:13px var(--serif);color:#606e61}.topics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.topic{min-width:0;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;padding:6px 5px 7px;border:1px solid #e1d7c4;border-radius:3px;background:rgba(255,253,247,.77);box-shadow:0 4px 14px rgba(70,66,48,.025);color:var(--ink);transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}.topic:hover{transform:translateY(-2px);border-color:#bdad88;box-shadow:0 7px 18px rgba(70,66,48,.07)}.topic.selected{background:linear-gradient(135deg,#e9f0e6,#f9f7ee);border-color:#76947a;box-shadow:inset 0 0 0 1px #c0d0bd,0 5px 16px #48634a12}.topic-icon{width:28px;height:28px;display:grid;place-items:center;border:1px solid #d8c6a7;border-radius:50%;color:#9c7b4a;font:18px/1 var(--serif);background:rgba(255,253,247,.65)}.topic strong{font:500 14px/1.1 var(--serif);white-space:nowrap}.topic small{font-size:8px;letter-spacing:.06em;color:#8a8879}.topic:after{content:"✓";position:absolute;right:6px;top:5px;color:var(--jade);background:var(--jade);font-size:8px;line-height:15px;text-align:center;width:15px;height:15px;border-radius:50%;opacity:0}.topic.selected:after{opacity:1;background:var(--jade);color:#43664e}.topic.love .topic-icon{color:#b77c70;border-color:#dfc4bb}.topic.career .topic-icon{color:#8b886c}.topic.wealth .topic-icon{color:#ac8e52}.topic.life .topic-icon{color:#758e94}.topic.growth .topic-icon{color:#648a6a}.question-details{position:absolute;right:0;top:-20px;transform:translateY(-100%);width:min(330px,80%);background:#fffdf7;border:1px solid var(--line);z-index:7;box-shadow:0 10px 28px #33402f16}.question-details summary{list-style:none;cursor:pointer;padding:10px 12px;font-size:10px;color:#6f786d}.question-details summary::-webkit-details-marker{display:none}.question-details summary span{float:right;color:#ac8b5a;font-size:8px;letter-spacing:.12em}.question-details[open]{padding:0 12px 10px}.questionlabel{display:block;font-size:9px;letter-spacing:.04em;color:#68766a;margin:3px 0 5px}textarea{display:block;width:100%;height:54px;resize:none;border:1px solid var(--line);background:#fffefa;padding:8px;font:11px/1.5 var(--sans);color:var(--ink)}.counter{display:flex;justify-content:space-between;font-size:8px;color:#8e9286;margin-top:3px}.draw-area{position:relative;z-index:5;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}.draw-area p{margin:0;font:13px var(--serif);color:#717a6e}.btn{display:inline-flex;justify-content:center;align-items:center;gap:24px;border:1px solid var(--jade-deep);border-radius:2px;background:var(--jade-deep);color:#fffdf7;padding:12px 26px;min-width:230px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 4px 0 #2d513c;transition:background .18s,transform .18s,box-shadow .18s}.btn:hover:not(:disabled){background:#315b45;transform:translateY(-1px);box-shadow:0 5px 0 #2d513c}.btn:disabled{background:#c9d4c7;border-color:#c9d4c7;box-shadow:none;color:#f7f5ed}.btn span{font-size:15px;line-height:1}.draw-area>small{font-size:8px;letter-spacing:.04em;color:#929388}.home-bottomline{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:7px;letter-spacing:.2em;color:#969283}.home-bottomline i,.result-bottom i{font-style:normal;color:#b99a66;padding:0 5px}
/* One-screen sign result */
.result-view{display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(12px,2.3vh,22px) clamp(16px,7vw,108px) clamp(8px,1.4vh,13px);gap:12px;background:radial-gradient(ellipse at 24% 48%,rgba(227,235,223,.78),transparent 43%),radial-gradient(ellipse at 75% 58%,rgba(246,231,203,.4),transparent 40%)}.view-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:24px}.back-link,.subtle-button{border:0;background:transparent;padding:6px 0;color:#607365;font-size:10px}.back-link:hover,.subtle-button:hover{color:var(--cinnabar)}.tiny-note{font-size:7px;letter-spacing:.18em;color:#9a988b}.result-layout{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr);gap:clamp(22px,5vw,75px);width:min(100%,1000px);height:100%;min-height:0;margin:0 auto;align-items:center}.sign-display{height:100%;min-height:0;max-height:610px;display:grid;place-items:center;position:relative;isolation:isolate}.sign-display:before{content:"";position:absolute;z-index:-2;width:min(80%,360px);aspect-ratio:1;border:1px solid #d4ddce;border-radius:50%;box-shadow:0 0 0 14px #f1f3ea,0 0 0 15px #dbe3d5,0 0 0 29px #f1f3ea,0 0 0 30px #e3e7dc}.sign-display:after{content:"";position:absolute;z-index:-1;bottom:12%;left:4%;right:4%;height:30%;opacity:.48;background:#d8e2d4;clip-path:polygon(0 70%,18% 34%,34% 66%,49% 0,62% 64%,80% 29%,100% 59%,100% 100%,0 100%)}.sign-glow{position:absolute;z-index:-2;width:80%;height:80%;background:radial-gradient(circle,#fbf8ef 0,#e9eee4 62%,transparent 76%)}.drawn-sign-card{width:clamp(140px,16vw,205px);height:min(55vh,390px);min-height:240px;position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 12px 15px;border:1px solid #cdbb98;background:linear-gradient(90deg,#e7dbc0,#fffbef 21%,#f5ecd9 77%,#e6d6b5);box-shadow:0 13px 30px #55442d18;color:#67543c;text-align:center;transform:rotate(-1deg);z-index:1}.drawn-sign-card:before{content:"";position:absolute;inset:6px;border:1px solid #dfcfaf;pointer-events:none}.drawn-sign-card>small{font-size:7px;letter-spacing:.2em;color:#918065}.drawn-sign-card>span{font:clamp(38px,4.4vw,58px)/1 var(--serif);margin:17px 0 12px;color:#405b45}.drawn-sign-card>i{height:1px;width:58%;background:#c7b28a;margin:0 0 19px}.drawn-sign-card>b{font:clamp(40px,4vw,52px)/1 var(--serif);font-weight:400;color:#a66d58}.drawn-sign-card>em{font:14px/1.5 serif;font-style:normal;color:#716049;letter-spacing:.1em;margin-top:10px}.drawn-sign-card .sign-card-foot{margin-top:auto;font-size:8px;letter-spacing:.22em}.result-stamp{position:absolute;right:2%;top:13%;writing-mode:vertical-rl;font:11px serif;letter-spacing:.22em;color:#a96c57;border:1px solid #c79a89;padding:8px 5px}.verse-content{max-width:590px;min-width:0;margin:0 auto}.grade{display:inline-flex;padding:5px 9px;background:#edf1e8;border:1px solid #d9e2d5;color:#54765b;font-size:8px;letter-spacing:.13em}.verse-content h2{font:500 clamp(30px,4vw,49px)/1.08 var(--serif);letter-spacing:-.02em;margin:13px 0 0;color:#2d4033}.chinese{font:16px/1.5 serif;letter-spacing:.18em;color:#a56d58;margin:7px 0 24px}.verse-divider{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#947f59;font-size:7px;letter-spacing:.15em}.verse-divider i{height:1px;background:#d9d4c7;flex:1}.verse-divider span:first-child{color:#b39158;font-size:13px}.verse-content blockquote{font:italic 19px/1.75 var(--serif);white-space:pre-line;color:#536d59;border-block:1px solid #e2dfd5;padding:18px 0;margin:0}.verse-note{font-size:9px;line-height:1.6;color:#8a8b80;margin:11px 0 21px}.reveal-btn{background:#3f6752;min-width:245px}.reveal-btn:hover:not(:disabled){background:#315541}.sign-disclaimer{font-size:8px;color:#929185;margin:14px 0 0}.result-bottom,.reading-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #e2dece;padding-top:8px;font-size:7px;letter-spacing:.16em;color:#999384}
/* Story and interpretation state remains inside the same viewport */
.reading-view{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:clamp(10px,1.8vh,18px) clamp(16px,6.5vw,98px) clamp(7px,1.2vh,12px);background:radial-gradient(ellipse at 20% 20%,rgba(228,236,224,.65),transparent 47%),var(--paper)}.reading-columns{display:grid;grid-template-rows:minmax(0,.83fr) minmax(0,1fr);gap:10px;min-height:0;overflow:hidden}.parable-panel{min-height:0;position:relative;overflow:auto;padding:clamp(13px,2vh,22px) clamp(18px,3vw,42px);background:linear-gradient(125deg,#e8eee4,#f4f4ec 78%);border:1px solid #dbe3d7;box-shadow:0 7px 25px #344a3505}.story-illustration{position:absolute;right:2.5%;top:13%;height:74%;width:29%;object-fit:contain;object-position:center;opacity:.35;mix-blend-mode:multiply;filter:saturate(.72);pointer-events:none}.story-copy{position:relative;z-index:1;max-width:78%}.story-copy>p{position:relative;z-index:1;max-width:100%;font:clamp(12px,1.15vw,15px)/1.65 var(--serif);color:#5b6b5c;margin:0;white-space:pre-line}.parable-panel:after{content:"山水有意";position:absolute;right:20px;bottom:10px;font:12px serif;letter-spacing:.2em;color:#c0cbbc;writing-mode:vertical-rl}.story-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.story-kicker,.reading-kicker{font-size:7px;letter-spacing:.18em;color:#a06e57;font-weight:700}.story-seal{display:grid;place-items:center;width:26px;height:30px;border:1px solid #c49a86;color:#a96c57;font:11px serif}.parable-panel h2{font:500 clamp(23px,2.8vw,33px)/1.1 var(--serif);color:#2d4234;margin:6px 0 8px}.parable-panel>p{position:relative;z-index:1;max-width:1100px;font:clamp(12px,1.15vw,15px)/1.65 var(--serif);color:#5b6b5c;margin:0;white-space:pre-line}.story-endmark{text-align:center;color:#b5a37e;font:10px var(--serif);margin-top:8px}.story-endmark span{padding:0 8px;color:#8c9484}.simple-reading{min-height:0;overflow:auto;background:rgba(255,253,247,.92);border:1px solid #e3dfd4;padding:clamp(12px,1.8vh,20px) clamp(18px,3vw,42px);display:flex;flex-direction:column;gap:6px}.reading-kicker{margin-bottom:1px}.reading-kicker i{font-style:normal;color:#c0a06c;padding:0 4px}.simple-reading h3{font:600 10px/1.3 var(--sans);letter-spacing:.12em;color:#415e4a;margin:0}.theme-reading{font-size:clamp(10px,.9vw,12px);line-height:1.65;color:#697669;margin:0}.meaning-block{border-top:1px solid #e7e3d8;padding-top:7px}.meaning-block>b,.advice>b{font-size:7px;letter-spacing:.16em;color:#a16f57}.meaning-block p,.advice p{font-size:clamp(10px,.9vw,12px);line-height:1.55;color:#687669;margin:3px 0 0}.advice{background:#edf2e9;border-left:2px solid #8ba58b;padding:8px 12px}.advice>b{color:#4d7356}.reflection{display:flex;align-items:baseline;gap:13px;border-bottom:1px solid #ebe6db;padding:3px 0 6px}.reflection small{font-size:7px;letter-spacing:.15em;white-space:nowrap;color:#a16f57}.reflection p{font:italic 13px/1.4 var(--serif);color:#526b57;margin:0}.reading-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:4px}.reading-actions .btn,.reading-actions .outline{min-width:0;padding:9px 15px;font-size:8px;letter-spacing:.06em}.reading-actions .btn{background:#416b56}.outline{border:1px solid #ccd7c9;background:transparent;color:#496953}.disclaimer{font-size:7px;color:#929489;letter-spacing:.02em}.toast{position:fixed;z-index:50;bottom:18px;left:50%;transform:translate(-50%,15px);padding:10px 16px;background:#3c644f;color:#fffdf7;border:1px solid #7f9e83;box-shadow:0 8px 28px #2c473516;font-size:11px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes tubeShake{0%,100%{transform:translateX(-50%) rotate(0)}15%{transform:translateX(calc(-50% - 9px)) rotate(-8deg)}30%{transform:translateX(calc(-50% + 9px)) rotate(8deg)}45%{transform:translateX(calc(-50% - 7px)) rotate(-6deg)}60%{transform:translateX(calc(-50% + 7px)) rotate(6deg)}75%{transform:translateX(calc(-50% - 3px)) rotate(-3deg)}90%{transform:translateX(-50%) rotate(1deg)}}@keyframes orbitBreathe{from{opacity:.43;transform:translateX(-50%) scale(.99)}to{opacity:.74;transform:translateX(-50%) scale(1.015)}}
/* Auxiliary informational pages never alter the one-screen oracle. */
.legal-body{overflow:auto;background:radial-gradient(ellipse at 50% 10%,#edf1e8,transparent 50%),var(--paper)}.legal-body .site-header{height:66px}.legal-content{width:min(720px,88%);margin:7vh auto 4vh;padding:clamp(22px,5vw,54px);border:1px solid var(--line);background:#fffdf7}.legal-content .eyebrow{color:#a06e57}.legal-content h1{font:500 clamp(34px,5vw,52px)/1.08 var(--serif);color:#2c4033;margin:14px 0 25px}.legal-content h1 em{font-weight:400;color:#78937b}.legal-content p{font-size:13px;line-height:1.9;color:#667467;margin:0 0 17px}.legal-content .legal-end{font:italic 18px var(--serif);color:#728774;margin-top:23px}.legal-content .btn{margin-top:12px}
@media(min-width:1400px) and (min-height:850px){.home-view{padding-top:22px}.oracle-scene{max-width:820px}.topic{min-height:86px}.topic-icon{width:32px;height:32px}.topic strong{font-size:16px}.topic small{font-size:9px}.btn{padding-block:14px}.result-view,.reading-view{padding-inline:9vw}}
@media(max-height:760px){.home-view{gap:3px;padding-top:7px;padding-bottom:6px}.eyebrow{font-size:7px}.home-intro h1{font-size:clamp(23px,2.7vw,32px)}.intro-copy{margin-top:3px;font-size:9px}.topics{gap:7px}.topic{min-height:62px;padding:4px}.topic-icon{width:23px;height:23px;font-size:15px}.topic strong{font-size:12px}.topic small{font-size:7px}.oracle-scene{min-height:125px}.draw-tube{height:clamp(112px,19vh,145px);width:100px}.fortune-sticks{bottom:25%}.focus-heading{margin-bottom:5px}.draw-area{gap:3px}.draw-area p{font-size:11px}.btn{padding-block:10px}.home-bottomline{font-size:6px}.result-view,.reading-view{padding-block:8px;gap:7px}.drawn-sign-card{min-height:220px;height:42vh}.drawn-sign-card>span{margin:10px 0}.drawn-sign-card>b{font-size:38px}.chinese{margin-bottom:15px}.verse-content blockquote{font-size:16px;line-height:1.65;padding:12px 0}.verse-note{margin:8px 0 13px}.reading-columns{gap:7px}.parable-panel{padding-block:10px}.parable-panel h2{font-size:23px;margin:5px 0}.parable-panel>p{font-size:11px;line-height:1.5}.simple-reading{padding-block:9px;gap:4px}.theme-reading,.meaning-block p,.advice p{font-size:10px}.reading-actions .btn,.reading-actions .outline{padding:7px 10px}}
@media(max-width:720px){.story-illustration{right:0;top:10%;height:80%;width:35%;opacity:.19}.story-copy{max-width:100%}.parable-panel>p{max-width:100%}.site-header{height:58px;padding-inline:16px}.brand{min-width:0;gap:7px}.brand-mark,.brand-mark svg{width:29px;height:29px}.brand-copy b{font-size:17px}.brand-copy small{font-size:6px;letter-spacing:.17em}.header-tools{gap:13px}.app-main{height:calc(100% - 58px)}.home-view{padding:7px 12px 7px;grid-template-rows:auto minmax(112px,1fr) auto auto auto;gap:4px}.eyebrow{font-size:6px;letter-spacing:.17em}.home-intro h1{font-size:clamp(23px,6vw,31px)}.intro-copy{font-size:9px;margin-top:4px}.oracle-scene{width:min(100%,410px)}.scene-sun{width:100px;left:calc(50% - 50px)}.scene-rings{width:190px}.branch-decoration{right:7%;transform:scale(.75) rotate(32deg);transform-origin:top right}.symbol-orbit{width:180px}.symbol-orbit span{font-size:13px}.fortune-sticks{width:120px}.fortune-sticks i{width:7px}.draw-tube{width:88px;height:120px;bottom:12%}.tube-mouth{height:21px;top:-10px}.tube-medallion{width:34px;height:34px;font-size:19px}.tube-inscription{font-size:7px}.tube-band-top{top:15px}.tube-band-bottom{bottom:16px}.tube-foot{bottom:-5px}.scene-shadow{width:120px;bottom:9%}.focus-heading{gap:7px;margin-bottom:5px}.step-label{font-size:6px;gap:5px;letter-spacing:.14em}.step-label i{width:15px}.focus-heading p{font-size:11px;text-align:right}.topics{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.topic{min-height:55px;gap:1px;padding:4px 2px}.topic-icon{width:20px;height:20px;font-size:13px}.topic strong{font-size:11px}.topic small{font-size:6px}.topic:nth-child(4){grid-column:1/2}.topic:nth-child(5){grid-column:2/3}.question-details{width:min(310px,93%);right:0;top:-14px}.draw-area{gap:3px}.draw-area p{font-size:11px}.draw-area .btn{min-width:205px;padding:10px 19px;font-size:9px}.draw-area>small{font-size:7px}.home-bottomline{font-size:5px;letter-spacing:.1em}.home-bottomline span:last-child{display:none}.result-view{padding:9px 13px 7px;gap:8px}.view-topline{min-height:22px}.tiny-note{font-size:6px;letter-spacing:.1em}.result-layout{grid-template-columns:minmax(100px,.68fr) minmax(0,1.32fr);gap:12px}.sign-display:before{width:90%;box-shadow:0 0 0 8px #f1f3ea,0 0 0 9px #dbe3d5,0 0 0 18px #f1f3ea,0 0 0 19px #e3e7dc}.drawn-sign-card{width:clamp(102px,33vw,145px);height:min(42vh,300px);min-height:180px;padding:14px 7px 10px}.drawn-sign-card>small{font-size:5px}.drawn-sign-card>span{font-size:38px;margin:13px 0 9px}.drawn-sign-card>b{font-size:32px}.drawn-sign-card>em{font-size:10px}.drawn-sign-card .sign-card-foot{font-size:6px}.result-stamp{right:-2%;top:18%;font-size:8px;padding:5px 3px}.verse-content h2{font-size:clamp(24px,7vw,35px);margin-top:9px}.grade{font-size:6px;padding:4px 5px;letter-spacing:.07em}.chinese{font-size:12px;margin:5px 0 14px}.verse-divider{gap:5px;font-size:5px;letter-spacing:.09em}.verse-content blockquote{font-size:14px;line-height:1.55;padding:10px 0}.verse-note{font-size:7px;line-height:1.4;margin:6px 0 12px}.reveal-btn{min-width:0;width:100%;padding:10px 12px;gap:8px;font-size:8px}.sign-disclaimer{font-size:6px;margin-top:8px}.result-bottom,.reading-bottom{font-size:5px;letter-spacing:.08em}.back-link,.subtle-button{font-size:8px}.reading-view{padding:8px 11px 6px;gap:6px}.reading-columns{grid-template-rows:minmax(0,.9fr) minmax(0,1.1fr);gap:6px}.parable-panel{padding:9px 12px}.story-kicker,.reading-kicker{font-size:6px;letter-spacing:.12em}.story-seal{width:21px;height:24px;font-size:9px}.parable-panel h2{font-size:21px;margin:4px 0}.parable-panel>p,.story-copy>p{font-size:10px;line-height:1.45}.story-endmark{font-size:7px;margin-top:4px}.simple-reading{padding:8px 11px;gap:4px}.simple-reading h3{font-size:8px}.theme-reading,.meaning-block p,.advice p{font-size:9px;line-height:1.42}.meaning-block{padding-top:4px}.meaning-block>b,.advice>b{font-size:6px}.advice{padding:5px 8px}.reflection{gap:7px;padding-bottom:4px}.reflection small{font-size:6px}.reflection p{font-size:11px}.reading-actions{gap:6px}.reading-actions .btn,.reading-actions .outline{font-size:6px;padding:7px 8px}.disclaimer{font-size:6px}}
@media(max-width:390px){.home-intro h1{font-size:22px}.intro-copy{font-size:8px}.topic strong{font-size:10px}.topic small{font-size:5px}.draw-area .btn{min-width:190px}.result-layout{gap:8px}.verse-content h2{font-size:23px}.verse-content blockquote{font-size:13px}.reading-actions .btn,.reading-actions .outline{letter-spacing:0;padding:6px}.home-bottomline{letter-spacing:.05em}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Premium cinematic single-screen home, v7 */
.site-header{background:rgba(250,248,242,.94);backdrop-filter:blur(14px);border-bottom-color:rgba(174,151,108,.28);padding-inline:clamp(18px,5.2vw,76px)}
.app-main{background:#f6f2e8}
.home-view{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;gap:clamp(7px,1.2vh,12px);padding:clamp(12px,2vh,20px) clamp(18px,5.2vw,76px) clamp(9px,1.5vh,15px);isolation:isolate}
.home-view:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;height:auto;opacity:1;background:linear-gradient(90deg,rgba(248,246,238,.89) 0%,rgba(248,246,238,.76) 27%,rgba(248,246,238,.20) 50%,rgba(248,246,238,.02) 100%),linear-gradient(0deg,rgba(247,245,237,.99) 0%,rgba(247,245,237,.96) 16%,rgba(247,245,237,.52) 29%,rgba(247,245,237,0) 52%)}
.oracle-scene{position:absolute;inset:0;z-index:0;width:auto;height:auto;max-width:none;min-height:0;margin:0;pointer-events:none;isolation:isolate;overflow:hidden;background:#f0ede3 url("assets/temple-courtyard.webp") center 48%/cover no-repeat;transition:filter .4s ease;}
.oracle-scene>*{display:none!important}
.home-intro,.focus-block,.draw-area,.home-bottomline{position:relative;z-index:2}
.home-intro{grid-row:1;align-self:center;justify-self:start;width:min(41%,490px);margin:0 0 3vh clamp(0px,2.5vw,36px);text-align:left;padding:0 0 1vh}
.home-intro .eyebrow{font-size:clamp(8px,.68vw,10px);letter-spacing:.24em;color:#8b744c;margin:0 0 16px}
.home-intro h1.hero-wordmark{font:500 clamp(52px,6.4vw,88px)/.88 var(--serif);letter-spacing:.09em;color:#2b3d31;margin:0 -4px 9px;text-shadow:0 1px rgba(255,255,255,.5)}
.hero-subtitle{font:600 clamp(8px,.78vw,11px)/1.5 var(--sans);letter-spacing:.36em;color:#4a594b;margin:0 0 19px}
.home-intro .intro-copy{font:400 clamp(13px,1.12vw,16px)/1.8 var(--sans);letter-spacing:.01em;color:#515f54;margin:0;max-width:340px}
.home-intro .intro-copy br{display:block}
.focus-block{grid-row:2;width:min(100%,1120px);margin:0 auto}
.focus-heading{margin-bottom:10px;gap:18px}
.focus-heading .step-label{font-size:8px;letter-spacing:.19em;color:#8e764d}
.focus-heading p{font:500 clamp(14px,1.25vw,17px)/1.15 var(--serif);color:#35463a}
.topics{gap:clamp(7px,1vw,14px)}
.topic{min-height:clamp(68px,9vh,86px);gap:3px;padding:8px 6px 10px;border:1px solid rgba(177,151,108,.44);border-radius:10px;background:linear-gradient(150deg,rgba(255,253,247,.94),rgba(249,245,234,.84));box-shadow:0 8px 22px rgba(74,65,43,.045),inset 0 0 0 3px rgba(255,255,255,.36);backdrop-filter:blur(5px);overflow:hidden;transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}
.topic:before{content:"";position:absolute;inset:auto -12% -46% -12%;height:72%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 0%,rgba(197,211,191,.26),transparent 68%);pointer-events:none}
.topic:after{right:8px;top:8px}
.topic:hover{transform:translateY(-3px);border-color:#bea16f;box-shadow:0 13px 25px rgba(74,65,43,.09),inset 0 0 0 3px rgba(255,255,255,.4)}
.topic.selected{transform:translateY(-3px);border-color:#63836a;background:linear-gradient(160deg,rgba(243,247,237,.98),rgba(221,232,215,.92));box-shadow:0 10px 22px rgba(51,79,57,.11),inset 0 0 0 2px rgba(255,255,255,.54)}
.topic-icon{position:relative;z-index:1;width:31px;height:31px;border-color:rgba(173,142,91,.63);background:rgba(255,253,247,.62);font-size:18px}
.topic strong{position:relative;z-index:1;font:500 clamp(13px,1.05vw,15px)/1.05 var(--serif);color:#344438}
.topic small{position:relative;z-index:1;font-size:clamp(7px,.63vw,9px);letter-spacing:.04em;color:#858574}
.question-details{display:none!important}
.draw-area{grid-row:3;gap:5px;padding:0 0 1px}
.draw-area p{font:500 11px/1.35 var(--sans);letter-spacing:.035em;color:#687768;margin:0}
.draw-area .btn{min-width:220px;border:1px solid #9b7e4d;border-radius:4px;background:linear-gradient(135deg,#415f4a,#2f4c39);box-shadow:0 6px 20px rgba(45,68,48,.18),inset 0 1px rgba(255,255,255,.16);padding:12px 26px;font-size:10px;letter-spacing:.08em;color:#fffbf1;transition:transform .2s,box-shadow .2s,opacity .2s}
.draw-area .btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 9px 25px rgba(45,68,48,.24)}
.draw-area .btn:disabled{background:linear-gradient(135deg,#899487,#758575);border-color:#b7b7a4;box-shadow:none;opacity:.86}
.draw-area>small{font-size:8px;color:#8c8e80;letter-spacing:.06em}
.home-bottomline{grid-row:4;justify-content:space-between;border-top:1px solid rgba(177,151,108,.3);padding-top:8px;font-size:7px;letter-spacing:.15em;color:#8c8a7b}
.home-bottomline i{font-style:normal;color:#b79a68;padding:0 5px}
.home-view.shaking .oracle-scene{animation:none!important;filter:none!important}
@keyframes oracleSceneShake{0%,100%{transform:translateX(0) scale(1)}14%{transform:translateX(-5px) rotate(-.3deg) scale(1.005)}27%{transform:translateX(5px) rotate(.3deg) scale(1.005)}42%{transform:translateX(-4px) rotate(-.2deg)}57%{transform:translateX(4px) rotate(.2deg)}72%{transform:translateX(-2px)}87%{transform:translateX(1px)} }
.menu-panel{border-radius:10px;box-shadow:0 20px 50px rgba(49,61,46,.13);padding:10px}
.menu-panel a{padding:11px 13px;border-radius:6px;font-size:12px}
.menu-panel a:hover{background:#eef1e8}
/* The verse and story states use the same refined paper-and-jade visual system. */
.result-view,.reading-view{background:linear-gradient(135deg,rgba(248,246,238,.97),rgba(240,241,230,.93));}
.view-topline{border-bottom-color:rgba(177,151,108,.3)}
.drawn-sign-card{border-radius:5px;box-shadow:0 16px 35px rgba(82,68,44,.12),inset 0 0 0 5px rgba(255,255,255,.28)}
.verse-content h2,.parable-panel h2{letter-spacing:-.02em}
.verse-content blockquote{font:italic 500 clamp(19px,2vw,27px)/1.62 var(--serif);color:#566b56}
.reveal-btn,.btn{border-radius:4px}
.parable-panel,.simple-reading{border-radius:10px;box-shadow:0 10px 25px rgba(61,68,50,.045)}
@media(max-width:720px){
  .site-header{height:58px}
  .app-main{height:calc(100% - 58px)}
  .home-view{grid-template-rows:minmax(0,1fr) auto auto auto;gap:6px;padding:9px 13px 9px}
  .oracle-scene{background-position:61% 48%;background-size:auto 100%}
  .home-view:before{background:linear-gradient(180deg,rgba(248,246,238,.86) 0%,rgba(248,246,238,.69) 24%,rgba(248,246,238,.12) 50%,rgba(247,245,237,.54) 65%,rgba(247,245,237,.98) 83%),linear-gradient(90deg,rgba(248,246,238,.38),transparent 100%)}
  .home-intro{align-self:start;justify-self:stretch;width:100%;margin:8px 0 0;padding:12px 10px 14px;text-align:center;border:1px solid rgba(255,253,247,.58);border-radius:9px;background:rgba(250,248,242,.72);backdrop-filter:blur(7px)}
  .home-intro .eyebrow{font-size:6px;letter-spacing:.19em;margin-bottom:8px}
  .home-intro h1.hero-wordmark{font-size:clamp(39px,12vw,57px);letter-spacing:.08em;margin-bottom:5px}
  .hero-subtitle{font-size:7px;letter-spacing:.25em;margin-bottom:8px}
  .home-intro .intro-copy{max-width:none;font-size:10px;line-height:1.55}
  .focus-heading{justify-content:space-between;margin-bottom:6px;gap:5px}
  .focus-heading .step-label{font-size:6px;letter-spacing:.12em;gap:5px}
  .focus-heading .step-label i{width:13px}
  .focus-heading p{font-size:12px;text-align:right}
  .topics{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .topic{grid-column:span 2;min-height:58px;padding:4px 2px;border-radius:8px}
  .topic:nth-child(4){grid-column:2/span 2}
  .topic:nth-child(5){grid-column:4/span 2}
  .topic-icon{width:22px;height:22px;font-size:13px}
  .topic strong{font-size:11px}
  .topic small{font-size:6px}
  .draw-area{gap:4px}
  .draw-area p{font-size:9px}
  .draw-area .btn{width:min(100%,260px);min-width:0;padding:11px 18px;font-size:9px}
  .draw-area>small{font-size:6px}
  .home-bottomline{padding-top:5px;font-size:5px;letter-spacing:.07em}
  .home-bottomline span:last-child{display:none}
}
@media(max-width:390px){
  .home-intro{padding-block:9px}
  .home-intro h1.hero-wordmark{font-size:37px}
  .topics{gap:4px}
  .topic{min-height:53px}
  .topic strong{font-size:10px}
  .topic small{font-size:5px}
  .home-bottomline{font-size:4.5px}
}
@media(max-height:700px) and (min-width:721px){
  .home-intro{margin-bottom:0;padding-bottom:0}
  .home-intro .eyebrow{margin-bottom:9px}
  .home-intro h1.hero-wordmark{font-size:clamp(44px,5.2vw,70px)}
  .hero-subtitle{margin-bottom:9px}
  .focus-heading{margin-bottom:6px}
  .topic{min-height:60px}
  .topic-icon{width:26px;height:26px}
  .draw-area .btn{padding-block:9px}
}


/* v8: the landscape remains fixed; only the foreground oracle vessel moves. */
.home-view>.draw-tube-art{
  display:block;position:absolute;z-index:1;left:59.2%;top:24.4%;width:17.25%;height:auto;max-width:none;
  object-fit:contain;transform-origin:52% 78%;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 11px 11px rgba(78,60,37,.10));
}
.draw-tube-art.shaking{animation:tubeShakeArt 1.3s cubic-bezier(.3,.8,.3,1) both;}
@keyframes tubeShakeArt{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  10%{transform:translate(-6px,0) rotate(-3.8deg)}
  22%{transform:translate(7px,-1px) rotate(4deg)}
  34%{transform:translate(-7px,0) rotate(-4.2deg)}
  46%{transform:translate(6px,1px) rotate(3.5deg)}
  58%{transform:translate(-4px,0) rotate(-2.6deg)}
  70%{transform:translate(4px,0) rotate(2deg)}
  82%{transform:translate(-2px,0) rotate(-1deg)}
  92%{transform:translate(1px,0) rotate(.5deg)}
}
/* The revealed sign now carries its own ink-wash illustration. */
.drawn-sign-card{width:clamp(176px,18vw,236px);height:min(57vh,420px);min-height:315px;padding:12px 12px 12px;gap:0;}
.drawn-sign-card .sign-card-brand{font-size:7px;letter-spacing:.2em;margin:2px 0 7px;}
.sign-art-frame{width:100%;height:clamp(112px,24vh,178px);flex:0 0 auto;overflow:hidden;border:1px solid rgba(198,175,135,.7);background:#ede6d6;margin:0 0 7px;position:relative;}
.sign-art-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 4px rgba(255,252,242,.20);pointer-events:none;}
.sign-art-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.sign-art-frame img.portrait-art{object-fit:contain;background:#efe7d7;}
.drawn-sign-card>span{font:clamp(21px,2.2vw,29px)/1 var(--serif);margin:1px 0 5px;color:#405b45;}
.drawn-sign-card>i{width:48%;margin:0 0 6px;}
.drawn-sign-card>b{font:clamp(26px,2.8vw,34px)/1 var(--serif);font-weight:400;color:#a66d58;}
.drawn-sign-card>em{font:12px/1.35 serif;margin-top:5px;letter-spacing:.07em;}
.drawn-sign-card .sign-card-foot{margin-top:auto;font-size:7px;}
@media(min-aspect-ratio:16/9){.home-view>.draw-tube-art{top:22.8%;width:16.75%;}}
@media(max-width:720px){
  .oracle-scene{background-position:71% 48%;}
  .home-view>.draw-tube-art{left:28.5%;top:24.4%;width:60%;}
  .drawn-sign-card{width:clamp(112px,33vw,150px);height:min(43vh,310px);min-height:235px;padding:9px 7px 8px;}
  .drawn-sign-card .sign-card-brand{font-size:5px;letter-spacing:.13em;margin-bottom:5px;}
  .sign-art-frame{height:clamp(84px,17vh,124px);margin-bottom:5px;}
  .drawn-sign-card>span{font-size:20px;margin:0 0 4px;}
  .drawn-sign-card>i{margin-bottom:4px;}
  .drawn-sign-card>b{font-size:27px;}
  .drawn-sign-card>em{font-size:10px;margin-top:3px;}
  .drawn-sign-card .sign-card-foot{font-size:5px;}
}
@media(max-width:390px){
 .home-view>.draw-tube-art{left:27%;top:24.4%;width:62%;}
 .sign-art-frame{height:clamp(78px,16vh,112px);}
}
@media(prefers-reduced-motion:reduce){.draw-tube-art.shaking{animation:none;}}

/* v9 readability pass: illustrated focus cards and more comfortable type sizes. */
.brand-copy b{font-size:22px}
.brand-copy small{font-size:8px}
.language{font-size:12px}
.menu-panel a{font-size:13px}
.home-intro .eyebrow{font-size:10px}
.hero-subtitle{font-size:11px}
.home-intro .intro-copy{font-size:clamp(14px,1.15vw,17px);line-height:1.7}
.focus-heading .step-label{font-size:10px;letter-spacing:.16em}
.focus-heading p{font-size:clamp(16px,1.3vw,19px)}
.topics{gap:clamp(8px,1vw,14px)}
.topic{min-height:clamp(146px,19vh,172px);padding:9px 8px 11px;gap:5px;justify-content:flex-start}
.topic .topic-art{display:block;width:100%;height:clamp(82px,12vh,108px);flex:0 0 auto;object-fit:cover;object-position:center;border-radius:5px;box-shadow:0 1px 5px rgba(73,69,52,.06)}
.topic-icon{display:none!important}
.topic strong{font-size:clamp(16px,1.25vw,20px);line-height:1.1;margin-top:1px}
.topic small{font-size:clamp(10px,.8vw,12px);line-height:1.25;letter-spacing:.02em;color:#6e776b}
.draw-area p{font-size:13px;line-height:1.45}
.draw-area .btn{font-size:13px;letter-spacing:.05em;padding:13px 27px}
.draw-area>small{font-size:10px;letter-spacing:.015em}
.home-bottomline{font-size:9px;letter-spacing:.1em}
.view-topline{min-height:30px}
.back-link,.subtle-button{font-size:12px}
.step-label{font-size:10px}
.tiny-note{font-size:8px;letter-spacing:.13em}
.grade{font-size:10px;letter-spacing:.1em}
.verse-divider{font-size:9px;letter-spacing:.12em}
.verse-note{font-size:12px;line-height:1.6}
.sign-disclaimer{font-size:10px}
.drawn-sign-card .sign-card-brand{font-size:8px}
.drawn-sign-card .sign-card-foot{font-size:9px}
.story-kicker,.reading-kicker{font-size:9px;letter-spacing:.15em}
.simple-reading h3{font-size:13px}
.theme-reading,.meaning-block p,.advice p{font-size:14px;line-height:1.55}
.meaning-block>b,.advice>b{font-size:9px;letter-spacing:.12em}
.reflection small{font-size:9px}
.reflection p{font-size:15px}
.reading-actions .btn,.reading-actions .outline{font-size:11px}
.disclaimer{font-size:9px}
@media(max-width:720px){
 .brand-copy b{font-size:19px}
 .brand-copy small{font-size:6px}
 .language{font-size:11px}
 .home-intro .eyebrow{font-size:8px;letter-spacing:.15em;margin-bottom:6px}
 .hero-subtitle{font-size:8px;letter-spacing:.2em;margin-bottom:6px}
 .home-intro .intro-copy{font-size:12px;line-height:1.5}
 .focus-heading{margin-bottom:7px}
 .focus-heading .step-label{font-size:8px;letter-spacing:.1em}
 .focus-heading p{font-size:13px;line-height:1.25}
 .topics{gap:6px}
 .topic{min-height:112px;padding:6px 4px 7px;gap:4px;border-radius:8px}
 .topic .topic-art{height:clamp(48px,8.5vh,65px);border-radius:4px}
 .topic strong{font-size:clamp(12px,3.2vw,15px);line-height:1.05}
 .topic small{font-size:clamp(8px,2.1vw,10px);line-height:1.15}
 .draw-area p{font-size:11px}
 .draw-area .btn{padding:11px 18px;font-size:12px}
 .draw-area>small{font-size:9px}
 .home-bottomline{font-size:7px;letter-spacing:.05em;padding-top:4px}
 .view-topline{min-height:26px}
 .back-link,.subtle-button{font-size:11px}
 .tiny-note{font-size:7px}
 .grade{font-size:8px}
 .verse-divider{font-size:7px}
 .verse-note{font-size:10px}
 .sign-disclaimer{font-size:8px}
 .story-kicker,.reading-kicker{font-size:8px}
 .simple-reading h3{font-size:11px}
 .theme-reading,.meaning-block p,.advice p{font-size:11px;line-height:1.45}
 .meaning-block>b,.advice>b,.reflection small{font-size:7px}
 .reflection p{font-size:12px}
 .reading-actions .btn,.reading-actions .outline{font-size:8px}
 .disclaimer{font-size:7px}
}
@media(max-width:390px){
 .home-intro{padding:8px 7px 9px}
 .home-intro .intro-copy{font-size:11px}
 .topic{min-height:103px;padding:5px 3px 6px}
 .topic .topic-art{height:45px}
 .topic strong{font-size:11.5px}
 .topic small{font-size:7.5px}
 .home-bottomline{font-size:6.5px}
}

/* v10: a focused, cinematic ritual sequence. The landscape never moves. */
.draw-tube-art{
  transition:left .72s cubic-bezier(.2,.75,.15,1),top .72s cubic-bezier(.2,.75,.15,1),width .72s cubic-bezier(.2,.75,.15,1),transform .72s cubic-bezier(.2,.75,.15,1),filter .45s ease;
  transform-origin:52% 77%;
}
.home-view:after{
  content:"";position:absolute;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%,rgba(71,54,38,.10),rgba(36,37,28,.38) 100%);
  opacity:0;transition:opacity .42s ease;
}
.home-view.ritual-active:after{opacity:1;}
.home-view.ritual-active .home-intro,
.home-view.ritual-active .focus-block,
.home-view.ritual-active .draw-area,
.home-view.ritual-active .home-bottomline{
  opacity:.13;filter:blur(1.4px);transition:opacity .4s ease,filter .4s ease;
}
.home-view.ritual-active>.draw-tube-art{
  z-index:12;left:50%;top:2.5%;width:clamp(190px,22vw,285px);height:auto;max-width:none;
  transform:translateX(-50%);filter:drop-shadow(0 24px 28px rgba(43,31,22,.32));
}
.home-view>.draw-tube-art.shaking{
  animation:tubeShakeArt 1.48s cubic-bezier(.36,.05,.28,.98) both;
}
@keyframes tubeShakeArt{
  0%{transform:translateX(-50%) rotate(0deg) translateY(0)}
  7%{transform:translateX(calc(-50% - 9px)) rotate(-4.8deg) translateY(1px)}
  15%{transform:translateX(calc(-50% + 10px)) rotate(5.2deg) translateY(-3px)}
  23%{transform:translateX(calc(-50% - 12px)) rotate(-6deg) translateY(1px)}
  31%{transform:translateX(calc(-50% + 11px)) rotate(5.4deg) translateY(-2px)}
  40%{transform:translateX(calc(-50% - 9px)) rotate(-4.4deg) translateY(2px)}
  49%{transform:translateX(calc(-50% + 8px)) rotate(3.8deg) translateY(-1px)}
  59%{transform:translateX(calc(-50% - 6px)) rotate(-2.8deg) translateY(1px)}
  69%{transform:translateX(calc(-50% + 5px)) rotate(2.2deg) translateY(-1px)}
  79%{transform:translateX(calc(-50% - 3px)) rotate(-1.4deg)}
  90%{transform:translateX(calc(-50% + 1px)) rotate(.6deg)}
  100%{transform:translateX(-50%) rotate(0deg) translateY(0)}
}
.ritual-overlay{
  position:absolute;z-index:9;left:0;right:0;bottom:9%;display:flex;flex-direction:column;align-items:center;gap:13px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility .32s ease;
}
.home-view.ritual-active .ritual-overlay{opacity:1;visibility:visible;}
.ritual-aura{
  display:block;width:clamp(90px,12vw,145px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(218,190,133,.85),transparent);position:relative;
}
.ritual-aura:before{content:"✳";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:16px serif;color:#e6d4ad;background:rgba(49,45,33,.24);padding:0 8px;}
.ritual-overlay p{margin:0;color:#fbf4e7;text-shadow:0 1px 8px rgba(26,27,20,.45);font:500 clamp(13px,1.25vw,17px)/1.3 var(--serif);letter-spacing:.08em;}
.falling-sign{
  position:absolute;z-index:15;left:50%;top:21%;width:clamp(30px,3.1vw,43px);height:clamp(178px,25vh,230px);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 4px 9px;
  border:1px solid #8d5d37;border-radius:3px 3px 5px 5px;
  background:linear-gradient(90deg,#87552d 0%,#d0a36a 15%,#f2d8a5 45%,#c28c4e 78%,#87562f 100%);
  box-shadow:0 10px 22px rgba(20,18,12,.24),inset 0 0 0 3px rgba(255,234,194,.28);
  color:#6f392b;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-32px) rotate(-8deg);transform-origin:50% 12%;
}
.falling-sign:before{content:"";position:absolute;inset:6px 7px;border:1px solid rgba(111,57,43,.4);pointer-events:none;}
.falling-slip-label{font:600 5px/1 var(--sans);letter-spacing:.05em;writing-mode:vertical-rl;position:absolute;top:13px;left:7px;color:rgba(95,48,35,.66)}
.falling-slip-number{font:500 18px/1 var(--serif);margin-top:20px;color:#66382d}
.falling-slip-mark{font:500 28px/1 serif;writing-mode:vertical-rl;letter-spacing:.05em;color:#66382d}
.falling-slip-grade{font:500 11px/1 serif;color:#8f382d;border:1px solid rgba(147,57,43,.65);padding:3px 2px;writing-mode:vertical-rl}
.falling-slip-seal{display:grid;place-items:center;width:16px;height:16px;border-radius:1px;background:#a74336;color:#f6e6c9;font:9px/1 serif;box-shadow:0 0 0 1px rgba(167,67,54,.15)}
.falling-sign.dropping{visibility:visible;opacity:1;animation:signSlipFall 1.23s cubic-bezier(.22,.78,.22,1) both;}
.falling-sign.landed{visibility:visible;opacity:1;top:55%;transform:translate(calc(-50% + 22px),46px) rotate(76deg);}
@keyframes signSlipFall{
  0%{top:15%;opacity:0;transform:translate(-50%,-58px) rotate(-7deg) scale(.82)}
  10%{top:19%;opacity:1;transform:translate(calc(-50% + 5px),-35px) rotate(10deg) scale(1)}
  27%{top:27%;opacity:1;transform:translate(calc(-50% - 12px),-8px) rotate(-13deg) scale(1.02)}
  44%{top:35%;transform:translate(calc(-50% + 14px),13px) rotate(15deg) scale(1.03)}
  61%{top:45%;transform:translate(calc(-50% - 9px),31px) rotate(-19deg) scale(1.02)}
  78%{top:54%;transform:translate(calc(-50% + 22px),46px) rotate(80deg) scale(1.02)}
  89%{top:55%;transform:translate(calc(-50% + 22px),39px) rotate(72deg) scale(1.01)}
  100%{top:55%;opacity:1;transform:translate(calc(-50% + 22px),46px) rotate(76deg) scale(1)}
}
@media(max-width:720px){
  .home-view.ritual-active>.draw-tube-art{left:50%;top:1.5%;width:clamp(175px,43vw,225px);}
  .ritual-overlay{bottom:6%;}
  .ritual-overlay p{font-size:12px;}
  .falling-sign{top:23%;width:30px;height:clamp(145px,22vh,185px);}
  .falling-slip-number{font-size:15px;}
  .falling-slip-mark{font-size:23px;}
  .falling-sign.landed{top:53%;transform:translate(calc(-50% + 13px),28px) rotate(76deg);}
  @keyframes signSlipFall{
    0%{top:15%;opacity:0;transform:translate(-50%,-35px) rotate(-7deg) scale(.82)}
    10%{top:20%;opacity:1;transform:translate(calc(-50% + 3px),-20px) rotate(10deg) scale(1)}
    27%{top:29%;transform:translate(calc(-50% - 8px),-4px) rotate(-13deg) scale(1.02)}
    44%{top:37%;transform:translate(calc(-50% + 10px),12px) rotate(15deg) scale(1.03)}
    61%{top:45%;transform:translate(calc(-50% - 5px),23px) rotate(-19deg) scale(1.02)}
    78%{top:52%;transform:translate(calc(-50% + 13px),28px) rotate(80deg) scale(1.02)}
    89%{top:53%;transform:translate(calc(-50% + 13px),23px) rotate(72deg) scale(1.01)}
    100%{top:53%;opacity:1;transform:translate(calc(-50% + 13px),28px) rotate(76deg) scale(1)}
  }
}
@media(prefers-reduced-motion:reduce){
  .draw-tube-art,.home-view:after,.home-intro,.focus-block,.draw-area,.home-bottomline,.ritual-overlay{transition:none!important;}
  .draw-tube-art.shaking,.falling-sign.dropping{animation:none!important;}
}


/* v11: independent physical layers — vessel, bamboo fan, then falling slip. */
.home-view>.draw-tube-art,
.home-view>.draw-sticks-art{
  position:absolute;display:block;left:59.2%;top:24.4%;width:17.25%;height:auto;max-width:none;
  object-fit:contain;pointer-events:none;will-change:transform,top,left,width;
  transition:left .72s cubic-bezier(.18,.82,.2,1),top .72s cubic-bezier(.18,.82,.2,1),width .72s cubic-bezier(.18,.82,.2,1),transform .72s cubic-bezier(.18,.82,.2,1),filter .45s ease;
}
.home-view>.draw-tube-art{z-index:2;transform-origin:44% 63%;filter:drop-shadow(0 11px 12px rgba(48,31,20,.13));}
.home-view>.draw-sticks-art{z-index:3;transform-origin:44% 28%;filter:drop-shadow(0 3px 2px rgba(39,25,13,.12));}
.home-view.ritual-active>.draw-tube-art,
.home-view.ritual-active>.draw-sticks-art{
  left:50%;top:2.5%;width:clamp(190px,22vw,285px);height:auto;max-width:none;
  transform:translateX(-50%);
}
.home-view.ritual-active>.draw-tube-art{z-index:12;filter:drop-shadow(0 25px 31px rgba(36,23,16,.34));}
.home-view.ritual-active>.draw-sticks-art{z-index:13;filter:drop-shadow(0 5px 4px rgba(36,23,16,.19));}
.home-view>.draw-tube-art.shaking{animation:vesselMomentum 2.18s cubic-bezier(.32,.04,.24,1) both;}
.home-view>.draw-sticks-art.rattling{animation:bambooRattle 2.12s cubic-bezier(.36,.03,.25,1) both;}
@keyframes vesselMomentum{
  0%{transform:translateX(-50%) rotate(0) translateY(0)}
  7%{transform:translateX(calc(-50% - 3px)) rotate(-2.2deg) translateY(1px)}
  15%{transform:translateX(calc(-50% + 6px)) rotate(3.5deg) translateY(-2px)}
  23%{transform:translateX(calc(-50% - 8px)) rotate(-4.1deg) translateY(2px)}
  31%{transform:translateX(calc(-50% + 8px)) rotate(4.2deg) translateY(-3px)}
  39%{transform:translateX(calc(-50% - 7px)) rotate(-3.6deg) translateY(2px)}
  48%{transform:translateX(calc(-50% + 6px)) rotate(3.1deg) translateY(-2px)}
  57%{transform:translateX(calc(-50% - 5px)) rotate(-2.5deg) translateY(1px)}
  66%{transform:translateX(calc(-50% + 4px)) rotate(1.9deg) translateY(-1px)}
  75%{transform:translateX(calc(-50% - 2.5px)) rotate(-1.3deg)}
  85%{transform:translateX(calc(-50% + 1.4px)) rotate(.7deg)}
  94%{transform:translateX(calc(-50% - .4px)) rotate(-.2deg)}
  100%{transform:translateX(-50%) rotate(0) translateY(0)}
}
@keyframes bambooRattle{
  0%{transform:translateX(-50%) rotate(0) translateY(0)}
  5%{transform:translateX(calc(-50% - 4px)) rotate(-3.2deg) translateY(1px)}
  12%{transform:translateX(calc(-50% + 8px)) rotate(6.8deg) translateY(-4px)}
  19%{transform:translateX(calc(-50% - 11px)) rotate(-7.8deg) translateY(3px)}
  27%{transform:translateX(calc(-50% + 12px)) rotate(8.4deg) translateY(-5px)}
  35%{transform:translateX(calc(-50% - 10px)) rotate(-7deg) translateY(4px)}
  43%{transform:translateX(calc(-50% + 9px)) rotate(6.1deg) translateY(-4px)}
  51%{transform:translateX(calc(-50% - 7px)) rotate(-4.8deg) translateY(3px)}
  60%{transform:translateX(calc(-50% + 6px)) rotate(4deg) translateY(-2px)}
  69%{transform:translateX(calc(-50% - 4px)) rotate(-2.9deg) translateY(2px)}
  77%{transform:translateX(calc(-50% + 3px)) rotate(2deg) translateY(-1px)}
  86%{transform:translateX(calc(-50% - 1.5px)) rotate(-1deg)}
  94%{transform:translateX(calc(-50% + .6px)) rotate(.4deg)}
  100%{transform:translateX(-50%) rotate(0) translateY(0)}
}
/* The slip is flicked up first, then falls in a weighted arc, impacts, rebounds once, and settles. */
.falling-sign{transform-origin:50% 9%;will-change:top,transform,opacity;}
.falling-sign:after{content:"";position:absolute;z-index:-1;left:6%;right:6%;bottom:9px;height:13px;border-radius:50%;background:rgba(42,30,19,.28);filter:blur(7px);opacity:0;transform:scale(.65);}
.falling-sign.dropping{visibility:visible;opacity:1;animation:signSlipPhysics 1.72s both;}
.falling-sign.dropping:after{animation:slipShadowImpact 1.72s ease-out both;}
.falling-sign.landed{visibility:visible;opacity:1;top:52.7%;transform:translate(calc(-50% + 22px),5.2vh) rotate(76deg);box-shadow:0 7px 11px rgba(20,18,12,.18),inset 0 0 0 3px rgba(255,234,194,.28);}
@keyframes signSlipPhysics{
  0%{top:15%;opacity:0;transform:translate(-50%,-58px) rotate(-9deg) scale(.8)}
  7%{top:13%;opacity:1;transform:translate(calc(-50% - 4px),-76px) rotate(9deg) scale(1.03)}
  15%{top:16%;opacity:1;transform:translate(calc(-50% + 7px),-40px) rotate(-14deg) scale(1.01)}
  27%{top:22%;transform:translate(calc(-50% - 10px),-5px) rotate(15deg) scale(1.02)}
  42%{top:32%;transform:translate(calc(-50% + 13px),15px) rotate(-20deg) scale(1.03)}
  56%{top:42%;transform:translate(calc(-50% - 8px),28px) rotate(28deg) scale(1.02)}
  69%{top:51%;transform:translate(calc(-50% + 22px),5.2vh) rotate(84deg) scale(1.01)}
  77%{top:49.5%;transform:translate(calc(-50% + 22px),3.8vh) rotate(66deg) scale(1)}
  85%{top:52.9%;transform:translate(calc(-50% + 22px),5.8vh) rotate(80deg) scale(1)}
  92%{top:52.3%;transform:translate(calc(-50% + 22px),4.9vh) rotate(73deg) scale(1)}
  100%{top:52.7%;opacity:1;transform:translate(calc(-50% + 22px),5.2vh) rotate(76deg) scale(1)}
}
@keyframes slipShadowImpact{
  0%,48%{opacity:0;transform:scale(.55)}
  68%{opacity:.8;transform:scale(1.1)}
  77%{opacity:.42;transform:scale(.84)}
  86%{opacity:.58;transform:scale(1)}
  100%{opacity:.48;transform:scale(.94)}
}
@media(max-width:720px){
 .home-view.ritual-active>.draw-tube-art,.home-view.ritual-active>.draw-sticks-art{left:50%;top:1.5%;width:clamp(175px,43vw,225px);}
 .falling-sign.landed{top:51.8%;transform:translate(calc(-50% + 13px),3.5vh) rotate(76deg);}
 @keyframes signSlipPhysics{
   0%{top:17%;opacity:0;transform:translate(-50%,-35px) rotate(-9deg) scale(.8)}
   7%{top:14%;opacity:1;transform:translate(calc(-50% - 3px),-50px) rotate(10deg) scale(1.02)}
   15%{top:17%;transform:translate(calc(-50% + 5px),-24px) rotate(-14deg) scale(1.01)}
   27%{top:24%;transform:translate(calc(-50% - 8px),-2px) rotate(15deg) scale(1.02)}
   42%{top:34%;transform:translate(calc(-50% + 10px),12px) rotate(-20deg) scale(1.02)}
   56%{top:43%;transform:translate(calc(-50% - 5px),22px) rotate(28deg) scale(1.01)}
   69%{top:51%;transform:translate(calc(-50% + 13px),3.5vh) rotate(84deg)}
   77%{top:49.7%;transform:translate(calc(-50% + 13px),2.5vh) rotate(66deg)}
   85%{top:52%;transform:translate(calc(-50% + 13px),4vh) rotate(80deg)}
   92%{top:51.4%;transform:translate(calc(-50% + 13px),3.2vh) rotate(73deg)}
   100%{top:51.8%;opacity:1;transform:translate(calc(-50% + 13px),3.5vh) rotate(76deg)}
 }
}
@media(prefers-reduced-motion:reduce){
 .home-view>.draw-tube-art.shaking,.home-view>.draw-sticks-art.rattling,.falling-sign.dropping{animation:none!important;}
 .home-view>.draw-tube-art,.home-view>.draw-sticks-art{transition:none!important;}
}

/* v11 finishing pass: preserve the original mobile placement for both aligned layers,
   and give the falling bamboo slip a more plausible slender bamboo profile. */
.falling-sign{
  width:clamp(24px,2.55vw,34px);height:clamp(176px,27vh,226px);
  border:1px solid #80532f;border-radius:8px 8px 4px 4px;
  background:linear-gradient(90deg,#754924 0%,#b98548 9%,#e0ba7b 22%,#f1d7a1 43%,#e8c88d 60%,#b17b40 88%,#714522 100%);
  box-shadow:2px 8px 18px rgba(20,18,12,.24),inset 0 0 0 2px rgba(255,234,194,.24);
}
.falling-sign:before{inset:5px 4px;border:1px solid rgba(99,57,32,.36);border-radius:5px 5px 2px 2px;}
.falling-slip-label{left:4px;top:12px;font-size:4px;}
.falling-slip-number{font-size:16px;}
.falling-slip-mark{font-size:25px;}
.falling-slip-grade{font-size:9px;}
@media(max-width:720px){
  .home-view>.draw-tube-art,.home-view>.draw-sticks-art{left:28.5%;top:24.4%;width:60%;}
  .home-view.ritual-active>.draw-tube-art,.home-view.ritual-active>.draw-sticks-art{left:50%;top:1.5%;width:clamp(175px,43vw,225px);}
  .falling-sign{width:25px;height:clamp(148px,23vh,188px);}
  .falling-slip-number{font-size:14px;}
  .falling-slip-mark{font-size:22px;}
}
@media(max-width:390px){
 .home-view>.draw-tube-art,.home-view>.draw-sticks-art{left:27%;top:24.4%;width:62%;}
}

/* v12: one shared vessel rig keeps the mouth and bamboo bases physically aligned. */
.tube-rig{
  position:absolute;z-index:3;left:59.2%;top:24.4%;width:17.25%;aspect-ratio:915 / 1806;
  transform:translateX(-50%);transform-origin:50% 52%;
  transition:left .74s cubic-bezier(.18,.82,.2,1),top .74s cubic-bezier(.18,.82,.2,1),width .74s cubic-bezier(.18,.82,.2,1),transform .74s cubic-bezier(.18,.82,.2,1),filter .4s ease;
  will-change:left,top,width,transform;pointer-events:none;
}
.tube-rig>.draw-tube-art,.tube-rig>.draw-sticks-art{
  position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:fill!important;margin:0!important;padding:0!important;
  transform:none;transition:none!important;pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.tube-rig>.draw-tube-art{z-index:1;filter:drop-shadow(0 9px 11px rgba(48,31,20,.14));}
.tube-rig>.draw-sticks-art{z-index:2;transform-origin:50% 27.1%;filter:drop-shadow(0 2px 2px rgba(39,25,13,.13));}
.home-view.ritual-active>.tube-rig{
  z-index:12;left:50%;top:1.5%;width:clamp(205px,25vw,300px);transform:translateX(-50%);
  filter:drop-shadow(0 23px 28px rgba(36,23,16,.28));
}
.tube-rig.shaking{animation:vesselRockV12 2.42s both cubic-bezier(.28,.04,.23,1);}
.tube-rig>.draw-sticks-art.rattling{animation:bambooFanRattleV12 2.28s both cubic-bezier(.24,.02,.25,1);}
@keyframes vesselRockV12{
  0%{transform:translateX(-50%) rotate(0) translateY(0)}
  5%{transform:translateX(calc(-50% - 3px)) rotate(-1.8deg) translateY(1px)}
  12%{transform:translateX(calc(-50% + 6px)) rotate(3.2deg) translateY(-2px)}
  20%{transform:translateX(calc(-50% - 8px)) rotate(-4deg) translateY(2px)}
  28%{transform:translateX(calc(-50% + 9px)) rotate(4.5deg) translateY(-3px)}
  36%{transform:translateX(calc(-50% - 8px)) rotate(-3.9deg) translateY(2px)}
  44%{transform:translateX(calc(-50% + 7px)) rotate(3.4deg) translateY(-2px)}
  52%{transform:translateX(calc(-50% - 6px)) rotate(-2.9deg) translateY(2px)}
  60%{transform:translateX(calc(-50% + 5px)) rotate(2.3deg) translateY(-1px)}
  68%{transform:translateX(calc(-50% - 3.8px)) rotate(-1.8deg)}
  76%{transform:translateX(calc(-50% + 2.8px)) rotate(1.3deg)}
  84%{transform:translateX(calc(-50% - 1.8px)) rotate(-.8deg)}
  92%{transform:translateX(calc(-50% + .8px)) rotate(.35deg)}
  100%{transform:translateX(-50%) rotate(0) translateY(0)}
}
@keyframes bambooFanRattleV12{
  0%{transform:rotate(0) translateY(0)}
  6%{transform:rotate(-2.5deg) translateY(1px)}
  13%{transform:rotate(4.8deg) translateY(-4px)}
  20%{transform:rotate(-6deg) translateY(4px)}
  28%{transform:rotate(5.1deg) translateY(-4px)}
  36%{transform:rotate(-4.8deg) translateY(3.5px)}
  44%{transform:rotate(4.1deg) translateY(-3px)}
  52%{transform:rotate(-3.4deg) translateY(2.5px)}
  60%{transform:rotate(3.2deg) translateY(-2px)}
  68%{transform:rotate(-2.3deg) translateY(2px)}
  76%{transform:rotate(1.7deg) translateY(-1px)}
  84%{transform:rotate(-1.1deg)}
  92%{transform:rotate(.45deg)}
  100%{transform:rotate(0) translateY(0)}
}
/* A dropped bamboo fortune stick, not a flat paper sign. */
.falling-sign{
  position:absolute;z-index:15;left:50%;top:18%;width:clamp(14px,1.25vw,18px);height:clamp(155px,23vh,190px);
  display:block;padding:0;border:1px solid #845b31;border-radius:48% 48% 5px 5px / 3.5% 3.5% 2.5px 2.5px;
  background:linear-gradient(90deg,#8b5a2f 0%,#b98549 12%,#e5c78f 27%,#f3dfaf 42%,#d6ad6c 63%,#a8733d 87%,#744825 100%);
  box-shadow:1px 7px 13px rgba(39,25,13,.22),inset 1px 0 1px rgba(255,249,218,.45),inset -2px 0 2px rgba(81,46,21,.25);
  color:#7d372d;text-align:center;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;
  transform:translate(-50%,-55px) rotate(-11deg);transform-origin:50% 10%;will-change:transform,opacity;
}
.falling-sign:before{
  content:"";position:absolute;left:1px;right:1px;top:27%;height:4px;border-top:1px solid rgba(104,60,28,.52);border-bottom:1px solid rgba(255,233,178,.55);background:rgba(129,82,39,.12);
}
.falling-sign:after{
  content:"";position:absolute;left:1px;right:1px;top:70%;height:4px;border-top:1px solid rgba(104,60,28,.4);border-bottom:1px solid rgba(255,233,178,.4);background:rgba(129,82,39,.1);
}
.falling-slip-number{position:absolute;left:50%;top:14%;transform:translateX(-50%);font:600 8px/1 var(--serif);color:#75402f;writing-mode:vertical-rl;letter-spacing:.06em;}
.falling-slip-mark{position:absolute;left:50%;top:39%;transform:translateX(-50%);font:500 15px/1 serif;color:#75392d;writing-mode:vertical-rl;}
.falling-slip-grade{position:absolute;left:50%;top:61%;transform:translateX(-50%);font:600 7px/1 serif;color:#8e3c30;writing-mode:vertical-rl;border:1px solid rgba(147,57,43,.52);padding:2px 1px;background:rgba(246,222,172,.25);}
.falling-slip-seal{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:grid;place-items:center;width:10px;height:10px;border-radius:1px;background:#a74336;color:#f6e6c9;font:6px/1 serif;box-shadow:0 0 0 1px rgba(167,67,54,.15);}
.falling-sign:where(.dropping):before,.falling-sign:where(.dropping):after{animation:none;}
.falling-sign.dropping{visibility:visible;opacity:1;animation:bambooSlipFlightV12 1.68s both cubic-bezier(.24,.68,.28,1);}
.falling-sign.dropping{filter:drop-shadow(0 8px 5px rgba(44,28,14,.15));}
.falling-sign.landed{visibility:visible;opacity:1;top:18%;transform:translate(calc(-50% + 48px),33vh) rotate(83deg);}
@keyframes bambooSlipFlightV12{
  0%{opacity:0;transform:translate(calc(-50% - 8px),-28px) rotate(-16deg) scale(.9)}
  7%{opacity:1;transform:translate(calc(-50% - 4px),-42px) rotate(10deg) scale(1.03)}
  17%{opacity:1;transform:translate(calc(-50% + 7px),-12px) rotate(-12deg) scale(1.02)}
  29%{transform:translate(calc(-50% - 9px),6vh) rotate(14deg) scale(1.01)}
  42%{transform:translate(calc(-50% + 11px),15vh) rotate(-17deg) scale(1.01)}
  54%{transform:translate(calc(-50% - 7px),23vh) rotate(22deg)}
  66%{transform:translate(calc(-50% + 23px),30vh) rotate(64deg)}
  75%{transform:translate(calc(-50% + 48px),33vh) rotate(86deg)}
  82%{transform:translate(calc(-50% + 48px),30.5vh) rotate(74deg)}
  89%{transform:translate(calc(-50% + 48px),33.7vh) rotate(85deg)}
  95%{transform:translate(calc(-50% + 48px),32.6vh) rotate(80deg)}
  100%{opacity:1;transform:translate(calc(-50% + 48px),33vh) rotate(83deg)}
}
@media(max-width:720px){
  .home-view.ritual-active>.tube-rig{top:1.5%;width:clamp(185px,44vw,235px);}
  .falling-sign{top:19%;width:14px;height:clamp(145px,22vh,178px);}
  .falling-slip-number{font-size:7px;}
  .falling-slip-mark{font-size:13px;}
  .falling-slip-grade{font-size:6px;}
  .falling-sign.landed{transform:translate(calc(-50% + 26px),30vh) rotate(83deg);}
  @keyframes bambooSlipFlightV12{
    0%{opacity:0;transform:translate(calc(-50% - 6px),-22px) rotate(-16deg) scale(.9)}
    7%{opacity:1;transform:translate(calc(-50% - 3px),-34px) rotate(10deg) scale(1.03)}
    17%{transform:translate(calc(-50% + 5px),-10px) rotate(-12deg) scale(1.02)}
    29%{transform:translate(calc(-50% - 7px),5vh) rotate(14deg)}
    42%{transform:translate(calc(-50% + 9px),13vh) rotate(-17deg)}
    54%{transform:translate(calc(-50% - 5px),21vh) rotate(22deg)}
    66%{transform:translate(calc(-50% + 15px),27vh) rotate(64deg)}
    75%{transform:translate(calc(-50% + 26px),30vh) rotate(86deg)}
    82%{transform:translate(calc(-50% + 26px),27.8vh) rotate(74deg)}
    89%{transform:translate(calc(-50% + 26px),30.7vh) rotate(85deg)}
    95%{transform:translate(calc(-50% + 26px),29.6vh) rotate(80deg)}
    100%{opacity:1;transform:translate(calc(-50% + 26px),30vh) rotate(83deg)}
  }
}
@media(prefers-reduced-motion:reduce){
 .tube-rig,.tube-rig>.draw-sticks-art{transition:none!important;}
 .tube-rig.shaking,.tube-rig>.draw-sticks-art.rattling,.falling-sign.dropping{animation:none!important;}
}

/* v13: one coherent lacquer vessel asset, compact at rest and enlarged only for the ritual. */
.tube-rig{
  position:absolute;z-index:2;left:61.5%;top:1.8%;width:clamp(132px,10.3vw,186px);
  aspect-ratio:915 / 1806;transform:translateX(-50%);transform-origin:50% 53%;
  transition:left .78s cubic-bezier(.16,.82,.22,1),top .78s cubic-bezier(.16,.82,.22,1),width .78s cubic-bezier(.16,.82,.22,1),transform .78s cubic-bezier(.16,.82,.22,1),filter .35s ease;
  will-change:left,top,width,transform;pointer-events:none;filter:drop-shadow(0 9px 11px rgba(48,31,20,.13));
}
.tube-rig>.draw-tube-art{
  position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:fill!important;transform:none!important;margin:0!important;padding:0!important;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
/* During the ritual, clear the controls out of the way instead of leaving them behind the vessel. */
.home-view.ritual-active .home-intro,
.home-view.ritual-active .focus-block,
.home-view.ritual-active .draw-area,
.home-view.ritual-active .home-bottomline{
  opacity:0;visibility:hidden;pointer-events:none;filter:blur(2px);
  transition:opacity .28s ease,filter .28s ease,visibility 0s linear .28s;
}
.home-view.ritual-active>.tube-rig{
  z-index:12;left:50%;top:2.3%;width:clamp(205px,20vw,270px);transform:translateX(-50%);
  filter:drop-shadow(0 24px 28px rgba(36,23,16,.29));
}
.tube-rig.shaking{animation:vesselRockV13 2.55s both cubic-bezier(.25,.04,.24,1);}
@keyframes vesselRockV13{
  0%{transform:translateX(-50%) rotate(0deg) translateY(0)}
  5%{transform:translateX(calc(-50% - 4px)) rotate(-2.2deg) translateY(1px)}
  12%{transform:translateX(calc(-50% + 7px)) rotate(3.6deg) translateY(-2px)}
  20%{transform:translateX(calc(-50% - 10px)) rotate(-4.7deg) translateY(3px)}
  28%{transform:translateX(calc(-50% + 11px)) rotate(5deg) translateY(-3px)}
  36%{transform:translateX(calc(-50% - 9px)) rotate(-4.3deg) translateY(2px)}
  44%{transform:translateX(calc(-50% + 8px)) rotate(3.7deg) translateY(-2px)}
  52%{transform:translateX(calc(-50% - 6px)) rotate(-3deg) translateY(2px)}
  61%{transform:translateX(calc(-50% + 5px)) rotate(2.5deg) translateY(-1px)}
  70%{transform:translateX(calc(-50% - 3px)) rotate(-1.5deg)}
  80%{transform:translateX(calc(-50% + 2px)) rotate(1deg)}
  91%{transform:translateX(calc(-50% - .7px)) rotate(-.35deg)}
  100%{transform:translateX(-50%) rotate(0deg) translateY(0)}
}
/* Launch the bamboo slip from the actual jar mouth, then let it tumble and rebound once. */
.falling-sign{
  left:50%;top:20%;width:clamp(15px,1.25vw,19px);height:clamp(160px,22vh,190px);
  border:1px solid #845a31;border-radius:48% 48% 5px 5px / 4% 4% 2px 2px;
  background:linear-gradient(90deg,#744624 0%,#b98549 13%,#e5c78f 28%,#f3dfaf 45%,#d5aa68 67%,#a5723d 88%,#744825 100%);
  box-shadow:1px 7px 13px rgba(39,25,13,.22),inset 1px 0 1px rgba(255,249,218,.45),inset -2px 0 2px rgba(81,46,21,.25);
  transform-origin:50% 8%;will-change:transform,opacity;overflow:hidden;
}
.falling-sign.dropping{visibility:visible;opacity:1;animation:bambooSlipFlightV13 1.78s cubic-bezier(.22,.7,.28,1) both;}
.falling-sign.landed{visibility:visible;opacity:1;transform:translate(calc(-50% + var(--fall-x, 44px)),var(--fall-y, 320px)) rotate(82deg);}
@keyframes bambooSlipFlightV13{
  0%{opacity:0;transform:translate(-50%,-14px) rotate(-7deg) scale(.92)}
  8%{opacity:1;transform:translate(calc(-50% - 4px),-24px) rotate(9deg) scale(1)}
  19%{opacity:1;transform:translate(calc(-50% + 7px),8px) rotate(-12deg)}
  34%{transform:translate(calc(-50% - 7px),var(--fall-mid, 110px)) rotate(16deg)}
  52%{transform:translate(calc(-50% + 9px),var(--fall-near, 230px)) rotate(-13deg)}
  69%{transform:translate(calc(-50% + var(--fall-x, 44px)),calc(var(--fall-y, 320px) + 9px)) rotate(88deg)}
  80%{transform:translate(calc(-50% + var(--fall-x, 44px)),calc(var(--fall-y, 320px) - 7px)) rotate(75deg)}
  90%{transform:translate(calc(-50% + var(--fall-x, 44px)),calc(var(--fall-y, 320px) + 3px)) rotate(85deg)}
  100%{opacity:1;transform:translate(calc(-50% + var(--fall-x, 44px)),var(--fall-y, 320px)) rotate(82deg)}
}
.falling-sign:after{animation:impactShadowV13 1.78s ease-out both;}
@keyframes impactShadowV13{
  0%,62%{opacity:0;transform:scale(.45)}
  70%{opacity:.65;transform:scale(1)}
  82%{opacity:.38;transform:scale(.82)}
  100%{opacity:.52;transform:scale(.9)}
}
@media(max-width:720px){
  .tube-rig{left:62%;top:0.8%;width:clamp(118px,35vw,158px);}
  .home-view.ritual-active>.tube-rig{left:50%;top:2%;width:clamp(178px,49vw,222px);}
  .falling-sign{width:16px;height:clamp(142px,21vh,174px);}
}
@media(max-width:390px){
  .tube-rig{left:61%;top:0.4%;width:clamp(110px,34vw,135px);}
  .home-view.ritual-active>.tube-rig{left:50%;top:1.5%;width:clamp(165px,48vw,190px);}
}
@media(prefers-reduced-motion:reduce){
  .tube-rig,.home-view:after,.home-intro,.focus-block,.draw-area,.home-bottomline,.ritual-overlay{transition:none!important;}
  .tube-rig.shaking,.falling-sign.dropping{animation:none!important;}
  .falling-sign.dropping{opacity:1;transform:translate(calc(-50% + var(--fall-x,44px)),var(--fall-y,320px)) rotate(82deg);}
}


/* v14 mobile safety + genuinely independent bamboo movement. */
.tube-rig{z-index:2;overflow:visible;}
.tube-rig>img.draw-tube-art,
.tube-rig>img.draw-sticks-art,
.tube-rig>img.draw-rim-art{
  position:absolute!important;inset:0!important;display:block!important;
  width:100%!important;height:100%!important;max-width:none!important;
  object-fit:fill!important;margin:0!important;padding:0!important;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.tube-rig>img.draw-tube-art{z-index:1!important;transform:none!important;}
.tube-rig>img.draw-sticks-art{z-index:2!important;transform-origin:50% 27.7%;filter:drop-shadow(0 2px 2px rgba(39,25,13,.11));}
.tube-rig>img.draw-rim-art{z-index:3!important;transform:none!important;}
.tube-rig.shaking{animation:vesselRockV14 2.55s both cubic-bezier(.25,.04,.24,1);}
.tube-rig>img.draw-sticks-art.rattling{animation:bambooFanRattleV14 2.42s .035s both cubic-bezier(.22,.03,.25,1);}
@keyframes vesselRockV14{
  0%{transform:translateX(-50%) rotate(0) translateY(0)}
  7%{transform:translateX(calc(-50% - 3px)) rotate(-2.3deg) translateY(1px)}
  15%{transform:translateX(calc(-50% + 6px)) rotate(3.6deg) translateY(-2px)}
  23%{transform:translateX(calc(-50% - 8px)) rotate(-4deg) translateY(2px)}
  31%{transform:translateX(calc(-50% + 8px)) rotate(4.2deg) translateY(-3px)}
  40%{transform:translateX(calc(-50% - 7px)) rotate(-3.5deg) translateY(2px)}
  50%{transform:translateX(calc(-50% + 6px)) rotate(3deg) translateY(-2px)}
  61%{transform:translateX(calc(-50% - 4px)) rotate(-2.2deg) translateY(1px)}
  72%{transform:translateX(calc(-50% + 3px)) rotate(1.5deg)}
  84%{transform:translateX(calc(-50% - 1px)) rotate(-.6deg)}
  94%{transform:translateX(calc(-50% + .3px)) rotate(.2deg)}
  100%{transform:translateX(-50%) rotate(0) translateY(0)}
}
@keyframes bambooFanRattleV14{
  0%{transform:rotate(0deg) translate(0,0)}
  6%{transform:rotate(-3.3deg) translate(-1px,1px)}
  14%{transform:rotate(5.8deg) translate(2px,-2px)}
  22%{transform:rotate(-6.5deg) translate(-3px,2px)}
  30%{transform:rotate(6.1deg) translate(3px,-2px)}
  38%{transform:rotate(-5.2deg) translate(-2px,2px)}
  47%{transform:rotate(4.4deg) translate(2px,-1px)}
  57%{transform:rotate(-3.5deg) translate(-2px,1px)}
  67%{transform:rotate(2.7deg) translate(1px,-1px)}
  77%{transform:rotate(-1.8deg) translate(-1px,1px)}
  87%{transform:rotate(.9deg) translate(.5px,0)}
  95%{transform:rotate(-.3deg)}
  100%{transform:rotate(0deg) translate(0,0)}
}
@media(max-width:720px){
  .home-view{
    grid-template-rows:auto minmax(0,1fr) auto auto!important;
    gap:6px!important;padding:7px 12px 7px!important;
  }
  /* The mountain scene is a background layer, not an extra grid row. */
  .home-view>.oracle-scene{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;z-index:0!important;pointer-events:none;}
  .home-view>.home-intro{
    align-self:start;justify-self:start;width:72%;max-width:72%;
    margin:3px 0 0!important;padding:10px 8px 11px!important;
    text-align:left!important;z-index:4!important;
    background:rgba(250,248,242,.95)!important;
    border:1px solid rgba(255,253,247,.88)!important;
    border-radius:9px;backdrop-filter:blur(6px);
  }
  .home-intro .eyebrow{font-size:clamp(6px,1.2vw,8px)!important;letter-spacing:.13em!important;margin-bottom:5px!important;}
  .home-intro h1.hero-wordmark{font-size:clamp(29px,6.5vw,44px)!important;letter-spacing:.045em!important;line-height:1!important;margin-bottom:4px!important;}
  .home-intro .hero-subtitle{font-size:clamp(6px,1.15vw,8px)!important;letter-spacing:.17em!important;margin-bottom:5px!important;}
  .home-intro .intro-copy{font-size:clamp(10px,1.8vw,12px)!important;line-height:1.45!important;margin-top:4px!important;}
  .home-view>.tube-rig{left:85%!important;top:1.2%!important;width:clamp(72px,13vw,90px)!important;z-index:2!important;filter:drop-shadow(0 4px 6px rgba(48,31,20,.13));}
  .home-view>.focus-block{z-index:5!important;align-self:center!important;}
  .focus-heading p{max-width:53%;font-size:clamp(10px,1.9vw,13px)!important;line-height:1.2!important;}
  .topic{background:rgba(255,253,247,.97)!important;box-shadow:0 3px 10px rgba(70,66,48,.06)!important;}
  .home-view>.draw-area,.home-view>.home-bottomline{z-index:5!important;}
  .home-view.ritual-active>.tube-rig{left:50%!important;top:2%!important;width:clamp(170px,43vw,218px)!important;z-index:12!important;}
  .home-view.ritual-active .home-intro,.home-view.ritual-active .focus-block,.home-view.ritual-active .draw-area,.home-view.ritual-active .home-bottomline{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
  .tube-rig>img.draw-sticks-art.rattling{animation-name:bambooFanRattleV14;}
}
@media(max-width:390px){
  .home-view>.home-intro{width:72%;max-width:72%;padding:8px 6px 9px!important;}
  .home-intro h1.hero-wordmark{font-size:clamp(27px,7.2vw,31px)!important;letter-spacing:.025em!important;}
  .home-view>.tube-rig{left:85%!important;top:1.2%!important;width:72px!important;}
  .home-view.ritual-active>.tube-rig{width:clamp(160px,48vw,188px)!important;top:1.5%!important;}
  .focus-heading p{max-width:47%;font-size:10px!important;}
}
@media(prefers-reduced-motion:reduce){
 .tube-rig.shaking,.tube-rig>img.draw-sticks-art.rattling,.falling-sign.dropping{animation:none!important;}
}

/* v15: clearer supporting pages */
.contact-note{margin:28px 0;padding:24px 26px;border:1px solid #ded3bd;background:rgba(255,253,247,.82);border-radius:4px}.contact-note h2{margin-top:0}.legal-content p,.legal-content li{font-size:16px;line-height:1.75}.legal-content h2{font-size:23px;margin-top:30px}.legal-content .eyebrow{font-size:11px;letter-spacing:.18em}
@media(max-width:720px){.legal-content{padding:28px 18px!important}.legal-content h1{font-size:clamp(34px,9vw,48px)!important}.legal-content p,.legal-content li{font-size:15px;line-height:1.7}.legal-content h2{font-size:21px}.contact-note{padding:18px}}

/* v16: daily sign view and native share-card actions. The primary homepage remains a fixed, single-screen ritual. */
.menu-panel button{display:block;width:100%;border:0;text-align:left;padding:10px 12px;font:inherit;font-size:11px;color:#536458;background:transparent;border-radius:5px}
.menu-panel button:hover{background:#edf1e9;color:#324e3c}
.result-bottom-actions{display:flex;align-items:center;gap:clamp(12px,2vw,24px)}
.result-bottom-actions .subtle-button{white-space:nowrap}
.reading-actions #shareReading{background:rgba(255,253,247,.6)}
.daily-view{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,1.5vh,15px);padding:clamp(11px,2.2vh,22px) clamp(16px,6vw,92px) clamp(8px,1.4vh,14px);background:radial-gradient(ellipse at 20% 38%,rgba(222,233,217,.65),transparent 43%),radial-gradient(ellipse at 83% 55%,rgba(241,225,202,.44),transparent 40%),linear-gradient(135deg,#faf8f1,#f0eee4)}
.daily-view:before{content:"";position:absolute;z-index:0;pointer-events:none;left:0;right:0;bottom:0;height:32%;opacity:.25;background:linear-gradient(180deg,transparent,#dce4d7)}
.daily-view>*{position:relative;z-index:1}
.daily-panel{width:min(100%,1040px);min-height:0;height:100%;margin:0 auto;display:grid;grid-template-columns:minmax(230px,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(18px,4vw,58px)}
.daily-art-side{min-height:0;display:grid;place-items:center}
.daily-art-card{position:relative;width:min(100%,350px);height:min(62vh,510px);min-height:230px;padding:11px;background:linear-gradient(135deg,#e8e0cc,#fffdf6 24%,#eee5d2 76%,#e2d5ba);border:1px solid #cdbb98;box-shadow:0 18px 40px rgba(62,54,37,.12),inset 0 0 0 4px rgba(255,255,255,.45);transform:rotate(-1deg);display:grid;grid-template-rows:minmax(0,1fr) auto}
.daily-art-card:before{content:"";position:absolute;inset:7px;border:1px solid rgba(188,160,112,.65);pointer-events:none}
.daily-art-frame{position:relative;min-height:0;overflow:hidden;background:rgba(224,227,214,.45);border:1px solid rgba(195,174,136,.54)}
.daily-art-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 5px rgba(255,252,242,.25);pointer-events:none}
.daily-art-frame img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
.daily-art-caption{display:flex;justify-content:space-between;gap:8px;padding:10px 4px 4px;color:#89744f;font:600 8px/1.2 var(--sans);letter-spacing:.16em}
.daily-content{min-width:0;max-width:620px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.1vh,12px)}
.daily-kicker{font-size:9px;letter-spacing:.18em;color:#98764a;font-weight:700;margin:0}
.daily-kicker i{font-style:normal;color:#ba9763;padding:0 5px}
.daily-grade{align-self:flex-start;padding:5px 9px;border:1px solid #dce3d6;background:rgba(237,242,232,.86);color:#55765b;font-size:9px;letter-spacing:.1em}
.daily-content h2{font:500 clamp(30px,3.5vw,48px)/1.04 var(--serif);color:#2d4033;margin:0;letter-spacing:-.02em}
.daily-cn{font:18px/1.35 serif;letter-spacing:.16em;color:#a66d58;margin:0}
.daily-verse-label{display:flex;align-items:center;gap:9px;margin-top:4px;color:#967c53;font-size:8px;letter-spacing:.14em}
.daily-verse-label i{height:1px;background:#d9d1c0;flex:1}
.daily-verse-label span:first-child{font-size:13px;color:#b39158}
.daily-verse{white-space:pre-line;font:italic 500 clamp(17px,1.75vw,23px)/1.55 var(--serif);color:#526a55;margin:0;padding:11px 0;border-block:1px solid #e0ddcf}
.daily-reflection{background:rgba(255,253,247,.68);border:1px solid rgba(221,215,200,.86);padding:11px 14px}
.daily-reflection small{font-size:8px;letter-spacing:.16em;color:#a16f57;font-weight:700}
.daily-reflection p{font:italic 15px/1.45 var(--serif);color:#4f6652;margin:4px 0 0}
.daily-reflection p.daily-advice{font:11px/1.45 var(--sans);color:#777d70;margin-top:7px}
.daily-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.daily-actions .btn,.daily-actions .outline{min-height:39px;padding:10px 15px;font-size:10px}
.daily-actions .btn{background:#3f6752;color:#fffdf7;border:1px solid #3f6752}
.daily-actions .outline{background:rgba(255,253,247,.45)}
.daily-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid rgba(177,151,108,.3);padding-top:7px;color:#999384;font-size:7px;letter-spacing:.14em}
.daily-bottom .subtle-button{font-size:11px;white-space:nowrap}
@media(max-width:720px){
  .menu-panel{right:12px;top:56px}
  .result-bottom{gap:7px;letter-spacing:.08em}
  .result-bottom-actions{gap:10px}
  .result-bottom-actions .subtle-button{font-size:10px}
  .daily-view{padding:8px 12px 8px;gap:7px}
  .daily-view .view-topline{gap:6px;min-height:25px}
  .daily-view .view-topline .step-label{font-size:8px;white-space:nowrap}
  .daily-view .tiny-note{font-size:6px;letter-spacing:.08em;white-space:nowrap}
  .daily-panel{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:10px;align-items:center}
  .daily-art-card{width:100%;height:min(55vh,420px);min-height:170px;padding:6px}
  .daily-art-caption{font-size:6px;letter-spacing:.07em;padding:6px 2px 2px}
  .daily-content{gap:clamp(5px,.9vh,8px)}
  .daily-kicker{font-size:7px;letter-spacing:.09em;line-height:1.25}
  .daily-grade{font-size:7px;padding:4px 6px;letter-spacing:.04em}
  .daily-content h2{font-size:clamp(21px,5.5vw,31px);line-height:1.02}
  .daily-cn{font-size:15px;letter-spacing:.1em}
  .daily-verse-label{font-size:6px;letter-spacing:.06em;gap:5px;margin-top:0}
  .daily-verse{font-size:clamp(13px,3.45vw,17px);line-height:1.48;padding:7px 0}
  .daily-reflection{padding:7px 8px}
  .daily-reflection small{font-size:6px;letter-spacing:.1em}
  .daily-reflection p{font-size:clamp(12px,3vw,14px);line-height:1.32}
  .daily-reflection p.daily-advice{font-size:9px;line-height:1.3;margin-top:5px}
  .daily-actions{gap:6px}
  .daily-actions .btn,.daily-actions .outline{min-height:32px;padding:7px 8px;font-size:9px;flex:1 1 100%;}
  .daily-bottom{font-size:5px;letter-spacing:.05em}
  .daily-bottom .subtle-button{font-size:9px}
}
@media(max-width:390px){
  .daily-panel{grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);gap:7px}
  .daily-art-card{height:min(49vh,350px);min-height:145px;padding:5px}
  .daily-content{gap:5px}
  .daily-content h2{font-size:22px}
  .daily-verse{font-size:12px;line-height:1.42}
  .daily-reflection p{font-size:11px}
  .daily-actions .btn,.daily-actions .outline{font-size:8px;min-height:29px}
}


/* v18: a small embroidered East-Asian lucky pouch is the visible Daily Sign button. */
.header-tools{gap:clamp(9px,1.8vw,24px)}
.daily-pouch-link{position:relative;isolation:isolate;display:block;flex:none;width:58px;height:62px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 3px 3px rgba(70,42,28,.14));transition:transform .2s ease,filter .2s ease}
.daily-pouch-link:hover{transform:translateY(-2px) rotate(-2deg);filter:drop-shadow(0 6px 6px rgba(70,42,28,.2))}
.daily-pouch-link:active{transform:translateY(1px) scale(.97)}
.pouch-body{position:absolute;left:7px;right:7px;bottom:7px;height:45px;display:grid;place-items:center;overflow:hidden;border:1px solid #c5a15d;border-radius:43% 43% 35% 35% / 28% 28% 45% 45%;background:radial-gradient(ellipse at 35% 18%,#bb5b4d 0,#9d3d35 43%,#792c2b 100%);box-shadow:inset 0 0 0 2px rgba(231,195,119,.25),inset 0 -7px 10px rgba(63,16,18,.22),0 2px 4px rgba(83,48,29,.18)}
.pouch-body:before{content:"";position:absolute;inset:4px;border:1px solid rgba(229,195,121,.72);border-radius:inherit;pointer-events:none}
.pouch-body:after{content:"";position:absolute;top:8px;left:50%;width:28px;height:28px;transform:translateX(-50%);border:1px solid rgba(228,192,112,.3);border-radius:50%;pointer-events:none}
.pouch-inscription{position:relative;z-index:1;writing-mode:vertical-rl;text-orientation:upright;font-family:serif;font-size:11px;font-weight:700;letter-spacing:1px;line-height:1;color:#fff0cd;text-shadow:0 1px 1px rgba(67,21,18,.62)}
.pouch-cord{position:absolute;z-index:2;top:5px;left:50%;width:24px;height:17px;transform:translateX(-50%);border:2px solid #b18a48;border-bottom-color:transparent;border-radius:50% 50% 0 0}
.pouch-knot{position:absolute;z-index:3;top:17px;left:50%;width:7px;height:7px;transform:translateX(-50%) rotate(45deg);border:1px solid #e4c87e;border-radius:2px;background:linear-gradient(135deg,#d8b96e,#8f6336)}
.pouch-tassel{position:absolute;z-index:2;bottom:0;left:50%;width:15px;height:13px;transform:translateX(-50%);display:flex;justify-content:center;gap:1px}
.pouch-tassel i{display:block;width:3px;height:12px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#7b2626,#b74439 55%,#6d2424);transform-origin:top center}
.pouch-tassel i:nth-child(1){transform:rotate(12deg);height:10px}.pouch-tassel i:nth-child(3){transform:rotate(-12deg);height:11px}
.daily-pouch-link:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:720px){
  .site-header{padding-inline:12px}
  .header-tools{gap:8px}
  .daily-pouch-link{width:48px;height:54px}
  .pouch-body{left:5px;right:5px;bottom:6px;height:40px}
  .pouch-inscription{font-size:10px;letter-spacing:.5px}
  .pouch-cord{top:3px;width:21px;height:15px}
  .pouch-knot{top:14px}
  .pouch-tassel{height:11px}
  .pouch-tassel i{height:10px}
  .language{display:none}
  .menu-button{width:27px;flex:none}
}
@media(max-width:360px){
  .site-header{padding-inline:9px}
  .brand{gap:5px}
  .brand-mark,.brand-mark svg{width:25px;height:25px}
  .brand-copy b{font-size:15px;letter-spacing:.16em}
  .brand-copy small{font-size:5px;letter-spacing:.12em}
  .header-tools{gap:5px}
  .daily-pouch-link{width:44px;height:51px}
  .pouch-body{height:37px}
  .pouch-inscription{font-size:9px}
}


/* v19: Daily Sign is a clear feature, not a tiny utility icon. The pouch is English-only. */
.site-header{height:78px;padding-inline:clamp(16px,5.5vw,82px)}
.app-main{height:calc(100% - 78px)}
.header-tools{gap:clamp(12px,2vw,26px)}
.daily-pouch-link{width:82px;height:90px;overflow:visible;filter:drop-shadow(0 4px 5px rgba(70,42,28,.2))}
.pouch-body{left:8px;right:8px;bottom:10px;height:57px;border-radius:43% 43% 35% 35% / 28% 28% 45% 45%}
.pouch-body:after{top:5px;width:43px;height:43px;opacity:.6}
.pouch-inscription{writing-mode:horizontal-tb;text-orientation:mixed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.12em;line-height:1.02}
.pouch-inscription span{display:block}
.pouch-cord{top:5px;width:27px;height:18px}
.pouch-knot{top:18px;width:8px;height:8px}
.pouch-tassel{width:19px;height:17px;gap:2px}
.pouch-tassel i{width:3px;height:16px}
.pouch-tassel i:nth-child(1){height:13px}.pouch-tassel i:nth-child(3){height:14px}
.daily-art-frame{isolation:isolate}
.daily-art-frame:before{content:"PREPARING TODAY'S SIGN";position:absolute;z-index:0;inset:0;display:grid;place-items:center;padding:12px;text-align:center;color:#9a835e;font:600 9px/1.5 var(--sans);letter-spacing:.15em;background:radial-gradient(ellipse at center,rgba(255,253,247,.72),rgba(224,227,214,.25));opacity:0;transition:opacity .18s ease;pointer-events:none}
.daily-art-frame.is-loading:before{opacity:1}
.daily-art-frame img{position:relative;z-index:1;opacity:0;transition:opacity .22s ease}
.daily-art-frame img.is-visible{opacity:1}
.daily-art-caption span:last-child{font-size:7px;letter-spacing:.1em}
@media(max-width:720px){
 .site-header{height:68px;padding-inline:11px}
 .app-main{height:calc(100% - 68px)}
 .header-tools{gap:7px}
 .daily-pouch-link{width:65px;height:75px}
 .pouch-body{left:6px;right:6px;bottom:8px;height:48px}
 .pouch-body:after{top:4px;width:37px;height:37px}
 .pouch-inscription{font-size:7px;letter-spacing:.1em}
 .pouch-cord{top:4px;width:22px;height:15px}
 .pouch-knot{top:15px;width:7px;height:7px}
 .pouch-tassel{height:14px;width:16px}
 .pouch-tassel i{height:13px;width:2.5px}
 .pouch-tassel i:nth-child(1){height:11px}.pouch-tassel i:nth-child(3){height:12px}
}
@media(max-width:390px){
 .site-header{height:64px;padding-inline:8px}
 .app-main{height:calc(100% - 64px)}
 .brand{gap:5px;min-width:0}
 .brand-mark,.brand-mark svg{width:25px;height:25px}
 .brand-copy b{font-size:15px;letter-spacing:.14em}
 .brand-copy small{font-size:5px;letter-spacing:.09em}
 .header-tools{gap:4px}
 .daily-pouch-link{width:58px;height:69px}
 .pouch-body{left:5px;right:5px;bottom:7px;height:44px}
 .pouch-inscription{font-size:6.4px;letter-spacing:.08em}
 .pouch-body:after{width:33px;height:33px;top:4px}
 .menu-button{width:25px}
}

/* v26: restore independent vessel + landscape background; do not bake the vessel into the backdrop. */
.home-view{background:none!important;}
.home-view:before{background:linear-gradient(90deg,rgba(248,246,238,.88) 0%,rgba(248,246,238,.68) 28%,rgba(248,246,238,.12) 55%,rgba(248,246,238,.03) 100%),linear-gradient(0deg,rgba(247,245,237,.98) 0%,rgba(247,245,237,.88) 16%,rgba(247,245,237,.24) 35%,rgba(247,245,237,0) 58%)!important;}
.oracle-scene{background:#f0ede3 url("assets/oracle-landscape-clean.webp") center 48%/cover no-repeat!important;}
.oracle-scene>.mountain-range,.oracle-scene>.scene-sun,.oracle-scene>.scene-rings,.oracle-scene>.branch-decoration,.oracle-scene>.symbol-orbit{display:none!important;}
#tubeRig{display:block!important;left:76%!important;top:5%!important;width:clamp(118px,12vw,190px)!important;transform:translateX(-50%)!important;z-index:3!important;}
#tubeRig>.draw-tube-art,#tubeRig>.draw-sticks-art,#tubeRig>.draw-rim-art{display:block!important;}
.home-view.ritual-active>#tubeRig{left:50%!important;top:2.5%!important;width:clamp(175px,18vw,245px)!important;transform:translateX(-50%)!important;z-index:12!important;}
.home-view.shaking .oracle-scene{animation:none!important;}
.topic strong{font-family:var(--sans);font-size:clamp(10px,.9vw,13px);font-weight:600;letter-spacing:-.015em;}
.topic small{font-family:var(--sans);font-size:clamp(8px,.68vw,10px);letter-spacing:.01em;color:#667365;}
@media(max-width:720px){
 .oracle-scene{background-position:58% 48%!important;background-size:cover!important;}
 .home-view:before{background:linear-gradient(180deg,rgba(248,246,238,.76) 0%,rgba(248,246,238,.56) 28%,rgba(248,246,238,.14) 48%,rgba(247,245,237,.7) 68%,rgba(247,245,237,.98) 86%)!important;}
 #tubeRig{left:84%!important;top:1.5%!important;width:clamp(78px,19vw,125px)!important;}
 .home-view.ritual-active>#tubeRig{left:50%!important;top:1.5%!important;width:clamp(160px,43vw,205px)!important;}
 .topic strong{font-size:clamp(9px,2.55vw,11px);line-height:1.1;white-space:normal;text-align:center;}
 .topic small{font-size:clamp(7px,1.9vw,9px);line-height:1.15;text-align:center;}
}

/* v27: use the user's refined temple-and-altar artwork as scenery; keep the oracle rig interactive and separate. */
.oracle-scene{background-image:url("assets/home-temple-altar.webp")!important;background-position:center 53%!important;background-size:cover!important;background-repeat:no-repeat!important;}
.home-view:before{background:linear-gradient(90deg,rgba(248,246,238,.88) 0%,rgba(248,246,238,.70) 25%,rgba(248,246,238,.18) 48%,rgba(248,246,238,.03) 100%),linear-gradient(0deg,rgba(247,245,237,.97) 0%,rgba(247,245,237,.78) 13%,rgba(247,245,237,.18) 31%,transparent 53%)!important;}
@media(min-width:721px){.home-view>.tube-rig{left:78%!important;top:38%!important;width:clamp(118px,10.5vw,168px)!important;z-index:3!important;filter:drop-shadow(0 9px 12px rgba(48,31,20,.22));}.home-view.ritual-active>.tube-rig{left:50%!important;top:2%!important;width:clamp(190px,22vw,275px)!important;}}
@media(max-width:720px){.oracle-scene{background-position:62% 52%!important;background-size:auto 100%!important;}.home-view:before{background:linear-gradient(180deg,rgba(248,246,238,.88) 0%,rgba(248,246,238,.67) 26%,rgba(248,246,238,.14) 48%,rgba(247,245,237,.72) 68%,rgba(247,245,237,.98) 86%)!important;}}

/* v28: swap the old layered lacquer tube for the user's transparent jade-dragon product cutout.
   Keep the rig as a separate, animated interaction layer over the temple background. */
#tubeRig{aspect-ratio:2 / 3!important;}
#tubeRig>.jade-composite-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;z-index:1!important;filter:drop-shadow(0 10px 12px rgba(42,31,18,.2))!important;}
#tubeRig>.ritual-animation-proxy{opacity:0!important;pointer-events:none!important;}
@media(min-width:721px){.home-view>.tube-rig{left:78%!important;top:31%!important;width:clamp(112px,10.8vw,172px)!important;aspect-ratio:2 / 3!important;}.home-view.ritual-active>.tube-rig{left:50%!important;top:1.5%!important;width:clamp(180px,22vw,255px)!important;}}
@media(max-width:720px){.home-view>.tube-rig{left:82%!important;top:15%!important;width:clamp(86px,24vw,128px)!important;aspect-ratio:2 / 3!important;}.home-view.ritual-active>.tube-rig{left:50%!important;top:1.5%!important;width:clamp(150px,40vw,200px)!important;}}

/* v29: airy hero composition — one temple, misty mountain distance, timber altar;
   five focus cards in a centered 3+2 arrangement; jade vessel stays a separate interactive layer. */
@media (min-width:721px){
 .home-view{display:block!important;padding:0!important;}
 .home-view:before{z-index:1!important;background:
   linear-gradient(90deg,rgba(249,247,240,.78) 0%,rgba(249,247,240,.48) 28%,rgba(249,247,240,.08) 53%,rgba(249,247,240,0) 100%),
   linear-gradient(0deg,rgba(247,245,237,.72) 0%,rgba(247,245,237,.28) 11%,rgba(247,245,237,0) 33%)!important;}
 .home-view>.oracle-scene{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;z-index:0!important;background-image:url("assets/home-temple-open-altar.webp")!important;background-position:center 53%!important;background-size:cover!important;background-repeat:no-repeat!important;}
 .home-view>.home-intro{position:absolute!important;left:7.2%!important;top:8.5%!important;width:min(41%,560px)!important;margin:0!important;padding:0!important;z-index:4!important;}
 .home-view>.focus-block{position:absolute!important;left:7.2%!important;bottom:14%!important;width:min(57%,930px)!important;margin:0!important;z-index:5!important;}
 .focus-heading{justify-content:flex-start!important;margin-bottom:11px!important;}
 .focus-heading p{margin-left:12px!important;font-size:clamp(12px,1vw,15px)!important;}
 .topics{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:clamp(8px,.85vw,13px)!important;}
 .topics .topic{grid-column:span 2;min-height:clamp(92px,11vh,120px)!important;padding:8px 7px 10px!important;}
 .topics .topic:nth-child(4){grid-column:2/span 2!important;}
 .topics .topic:nth-child(5){grid-column:4/span 2!important;}
 .topic-art{height:clamp(50px,6.5vh,70px)!important;}
 .topic strong{font-size:clamp(11px,.92vw,14px)!important;}
 .topic small{font-size:clamp(8px,.66vw,10px)!important;}
 .home-view>.draw-area{position:absolute!important;left:7.2%!important;bottom:4.5%!important;width:min(57%,930px)!important;z-index:5!important;}
 .home-view>.draw-area .btn{min-width:250px!important;}
 .home-view>.home-bottomline{position:absolute!important;left:5.2%!important;right:5.2%!important;bottom:1.2%!important;z-index:5!important;}
 .home-view>.tube-rig{left:84%!important;top:39%!important;width:clamp(150px,14vw,225px)!important;aspect-ratio:2/3!important;transform:translateX(-50%)!important;z-index:3!important;filter:drop-shadow(0 12px 13px rgba(43,31,18,.28))!important;}
 .home-view.ritual-active>.tube-rig{left:50%!important;top:2%!important;width:clamp(185px,21vw,260px)!important;}
}
@media (max-width:720px){
 .home-view>.oracle-scene{background-image:url("assets/home-temple-open-altar.webp")!important;background-position:68% center!important;background-size:auto 100%!important;}
 .home-view:before{background:linear-gradient(180deg,rgba(249,247,240,.78) 0%,rgba(249,247,240,.54) 30%,rgba(249,247,240,.16) 49%,rgba(247,245,237,.76) 68%,rgba(247,245,237,.97) 88%)!important;}
 .topics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
 .topics .topic{grid-column:auto!important;min-height:68px!important;}
 .topics .topic:nth-child(5){grid-column:1/span 2!important;justify-self:center!important;width:calc(50% - 4px)!important;}
 .topic-art{height:36px!important;}
 .home-view>.tube-rig{left:86%!important;top:20%!important;width:clamp(90px,25vw,135px)!important;}
}

/* v30: ground the jade vessel on the visible altar and animate the actual composite art. */
@keyframes jadeVesselWeightedShakeV30{
  0%{transform:rotate(0deg) translateY(0)}
  10%{transform:rotate(-3deg) translateY(-1px)}
  22%{transform:rotate(3.5deg) translateY(-2px)}
  34%{transform:rotate(-4deg) translateY(-1px)}
  47%{transform:rotate(3deg) translateY(-2px)}
  60%{transform:rotate(-2.8deg) translateY(-1px)}
  72%{transform:rotate(2deg) translateY(0)}
  86%{transform:rotate(-1deg) translateY(0)}
  100%{transform:rotate(0deg) translateY(0)}
}
@media(min-width:721px){
 .home-view>.tube-rig{left:86%!important;top:58%!important;width:clamp(145px,12vw,195px)!important;transform:translate(-50%,-8%)!important;filter:drop-shadow(0 3px 3px rgba(38,27,17,.24))!important;}
 .home-view.ritual-active>.tube-rig{left:50%!important;top:17%!important;width:clamp(185px,19vw,245px)!important;transform:translateX(-50%)!important;}
}
#tubeRig>.jade-composite-art{transform-origin:50% 88%!important;}
#tubeRig.shaking>.jade-composite-art{animation:jadeVesselWeightedShakeV30 2.55s both cubic-bezier(.24,.04,.25,1)!important;}
@media(max-width:720px){
 .home-view>.tube-rig{left:84%!important;top:43%!important;width:clamp(92px,25vw,132px)!important;transform:translate(-50%,-5%)!important;}
 .home-view.ritual-active>.tube-rig{left:50%!important;top:12%!important;width:clamp(150px,40vw,195px)!important;transform:translateX(-50%)!important;}
}
@media(prefers-reduced-motion:reduce){#tubeRig.shaking>.jade-composite-art{animation:none!important;}}

/* v31 hotfix: target the vessel by ID so earlier ID-level positioning cannot override it.
   Anchor the composite to the foreground tabletop at rest; keep ritual placement separate. */
@media (min-width:721px){
  #tubeRig{left:82%!important;right:auto!important;top:auto!important;bottom:13.5%!important;width:clamp(150px,13vw,205px)!important;transform:translateX(-50%)!important;z-index:4!important;filter:drop-shadow(0 8px 7px rgba(39,27,15,.26))!important;}
  .home-view.ritual-active #tubeRig{left:50%!important;right:auto!important;top:15%!important;bottom:auto!important;width:clamp(185px,19vw,245px)!important;transform:translateX(-50%)!important;z-index:12!important;}
}
@media (max-width:720px){
  #tubeRig{left:83%!important;right:auto!important;top:auto!important;bottom:17%!important;width:clamp(94px,25vw,132px)!important;transform:translateX(-50%)!important;z-index:4!important;}
  .home-view.ritual-active #tubeRig{left:50%!important;right:auto!important;top:12%!important;bottom:auto!important;width:clamp(150px,40vw,195px)!important;transform:translateX(-50%)!important;z-index:12!important;}
}

/* v32: final responsive layout + visibly articulated draw ritual */
@keyframes fuseersTubeWobble32 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  12% { transform: translateY(-3px) rotate(-5deg); }
  24% { transform: translateY(1px) rotate(6deg); }
  36% { transform: translateY(-4px) rotate(-7deg); }
  48% { transform: translateY(2px) rotate(6deg); }
  60% { transform: translateY(-3px) rotate(-5deg); }
  72% { transform: translateY(1px) rotate(4deg); }
  84% { transform: translateY(-1px) rotate(-2deg); }
}
@keyframes fuseersSticksRattle32 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-7px) rotate(-4deg); }
  40% { transform: translateY(3px) rotate(5deg); }
  60% { transform: translateY(-5px) rotate(-3deg); }
  80% { transform: translateY(2px) rotate(2deg); }
}
#tubeRig.shaking > #drawTube { animation: fuseersTubeWobble32 2.55s ease-in-out both!important; }
#tubeRig.shaking > #drawSticks { opacity:1!important; animation: fuseersSticksRattle32 .22s ease-in-out infinite!important; }
#tubeRig.shaking > #drawRim { opacity:1!important; }

@media (min-width:721px) {
  /* Set vessel base to the foreground tabletop/book baseline, not the sky/temple. */
  #tubeRig { bottom:8.2%!important; top:auto!important; }
}
@media (max-width:720px) {
  /* Mobile becomes a readable vertical page; no absolute overlay collisions. */
  .home-view {
    display:flex!important; flex-direction:column!important; align-items:stretch!important;
    height:auto!important; min-height:calc(100svh - 78px)!important;
    padding:22px 14px 14px!important; gap:16px!important; overflow:visible!important;
  }
  .home-view > .oracle-scene { position:absolute!important; inset:0!important; height:100%!important; z-index:0!important;
    background-position:70% top!important; background-size:auto 620px!important; }
  .home-view:before { position:absolute!important; inset:0!important; height:100%!important; z-index:1!important;
    background:linear-gradient(180deg,rgba(249,247,240,.88) 0%,rgba(249,247,240,.74) 240px,rgba(247,245,237,.93) 530px,rgba(247,245,237,.99) 100%)!important; }
  .home-view > .home-intro { position:relative!important; inset:auto!important; width:100%!important; margin:0!important;
    padding:0 8px!important; text-align:left!important; z-index:3!important; }
  .home-intro .eyebrow { margin-bottom:9px!important; font-size:9px!important; }
  .home-intro h1.hero-wordmark { font-size:clamp(42px,12vw,60px)!important; margin-bottom:7px!important; }
  .home-intro .hero-subtitle { font-size:9px!important; }
  .home-intro .intro-copy { font-size:13px!important; line-height:1.55!important; }
  .home-view > .focus-block { position:relative!important; inset:auto!important; width:100%!important; margin:0!important; z-index:5!important; }
  .focus-heading { display:flex!important; flex-wrap:wrap!important; align-items:flex-start!important; gap:6px 12px!important; margin-bottom:9px!important; }
  .focus-heading p { width:100%!important; margin:0!important; font-size:13px!important; }
  .topics { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; }
  .topics .topic { grid-column:auto!important; justify-self:stretch!important; width:auto!important; min-height:88px!important; padding:7px 5px!important; }
  .topics .topic:nth-child(5) { grid-column:1 / span 2!important; justify-self:center!important; width:calc(50% - 4px)!important; }
  .topic-art { height:42px!important; width:100%!important; object-fit:cover!important; }
  .topic strong { font-size:12px!important; white-space:normal!important; text-align:center!important; }
  .topic small { font-size:9px!important; text-align:center!important; }
  .home-view > .draw-area { position:relative!important; inset:auto!important; width:100%!important; margin:0!important; z-index:6!important; padding:2px 0 5px!important; }
  .draw-area p { font-size:13px!important; }
  .draw-area .btn { min-width:0!important; width:min(100%,330px)!important; padding:14px 18px!important; font-size:11px!important; }
  .draw-area > small { font-size:9px!important; text-align:center!important; }
  .home-view > .home-bottomline { position:relative!important; inset:auto!important; width:100%!important; margin:0!important; z-index:5!important;
    display:flex!important; flex-wrap:wrap!important; justify-content:space-between!important; gap:5px!important; padding-top:9px!important; font-size:7px!important; }
  /* At rest, keep the vessel visible in the open right-hand hero area, away from controls. */
  #tubeRig { position:absolute!important; left:auto!important; right:5%!important; top:115px!important; bottom:auto!important;
    width:clamp(76px,23vw,112px)!important; height:auto!important; aspect-ratio:2/3!important; transform:none!important; z-index:2!important; }
  .home-view.ritual-active #tubeRig { position:fixed!important; left:50%!important; right:auto!important; top:24vh!important; bottom:auto!important;
    width:clamp(150px,43vw,205px)!important; transform:translateX(-50%)!important; z-index:30!important; }
  .ritual-overlay { z-index:29!important; }
}
@media (prefers-reduced-motion:reduce) {
  #tubeRig.shaking > #drawTube,#tubeRig.shaking > #drawSticks { animation-duration:.01ms!important; }
}

/* v33 layout refinement: keep the five focus cards and draw control in separate lanes;
   keep the vessel anchored to the tabletop throughout the ritual (no legacy center-stage jump). */
@media (min-width:721px) {
  .home-view > .focus-block { bottom:22%!important; }
  .home-view > .draw-area { bottom:5.2%!important; }
  .home-view > .home-bottomline { bottom:1%!important; }
  .home-view.ritual-active #tubeRig { left:82%!important; right:auto!important; top:auto!important; bottom:8.2%!important;
    width:clamp(150px,13vw,205px)!important; transform:translateX(-50%)!important; z-index:4!important; }
  .home-view.ritual-active .ritual-overlay { position:absolute!important; left:64%!important; right:5%!important; bottom:7%!important;
    top:auto!important; transform:none!important; text-align:center!important; z-index:6!important; }
}
@media (max-width:720px) {
  .home-view > .focus-block { margin-top:4px!important; }
  .home-view > .draw-area { margin-top:0!important; padding-top:4px!important; }
  .home-view > .draw-area .btn { display:block!important; margin:0 auto!important; position:relative!important; }
  .home-view.ritual-active #tubeRig { position:absolute!important; left:auto!important; right:5%!important; top:115px!important; bottom:auto!important;
    width:clamp(76px,23vw,112px)!important; transform:none!important; z-index:4!important; }
  .home-view.ritual-active .ritual-overlay { position:absolute!important; left:12px!important; right:12px!important; bottom:8px!important;
    top:auto!important; transform:none!important; z-index:7!important; text-align:center!important; }
}
/* Animate the composite cutout in place, including a restrained stick rattle. */
#tubeRig.shaking > .jade-composite-art { animation:jadeVesselWeightedShakeV30 2.55s both cubic-bezier(.24,.04,.25,1)!important; }
#tubeRig.shaking > #drawSticks { animation:fuseersSticksRattle32 .22s ease-in-out infinite!important; }

/* v34 ritual correction: remove the legacy round-stick overlay. The new jade
   composite already contains the intended broad, cinnabar-tipped flat slips. */
#tubeRig > #drawSticks,
#tubeRig > .ritual-animation-proxy { display:none!important; }

@keyframes fuseersJadeCompositeRitualV34 {
  0%   { transform:translateY(0) rotate(0deg); }
  12%  { transform:translateY(-3px) rotate(-4.5deg); }
  25%  { transform:translateY(1px) rotate(5deg); }
  38%  { transform:translateY(-4px) rotate(-6deg); }
  51%  { transform:translateY(2px) rotate(5deg); }
  64%  { transform:translateY(-2px) rotate(-4deg); }
  78%  { transform:translateY(1px) rotate(2.5deg); }
  90%,100% { transform:translateY(0) rotate(0deg); }
}
#tubeRig > .jade-composite-art { transform-origin:50% 84%!important; }
#tubeRig.shaking > .jade-composite-art {
  animation:fuseersJadeCompositeRitualV34 2.55s cubic-bezier(.24,.04,.25,1) both!important;
}

/* During the draw, move the whole new vessel to a deliberate stage-center
   position. The resting tabletop anchor remains unchanged. */
@media (min-width:721px) {
  .home-view.ritual-active #tubeRig {
    position:absolute!important; left:50%!important; right:auto!important;
    top:39%!important; bottom:auto!important;
    width:clamp(190px,18vw,245px)!important;
    transform:translate(-50%,-50%)!important; z-index:30!important;
  }
  .home-view.ritual-active .ritual-overlay {
    position:absolute!important; left:0!important; right:0!important;
    top:auto!important; bottom:5%!important; transform:none!important;
    text-align:center!important; z-index:31!important;
  }
}
@media (max-width:720px) {
  .home-view.ritual-active #tubeRig {
    position:absolute!important; left:50%!important; right:auto!important;
    top:34%!important; bottom:auto!important;
    width:clamp(155px,43vw,195px)!important;
    transform:translate(-50%,-50%)!important; z-index:30!important;
  }
  .home-view.ritual-active .ritual-overlay {
    position:relative!important; left:auto!important; right:auto!important;
    top:auto!important; bottom:auto!important; margin-top:auto!important;
    transform:none!important; text-align:center!important; z-index:31!important;
  }
}
@media (prefers-reduced-motion:reduce) {
  #tubeRig.shaking > .jade-composite-art { animation:none!important; }
}

/* v35: physical, pivoted vessel motion is driven on #tubeRig by Web Animations.
   Suppress legacy child transforms so they cannot cancel/overwrite the motion. */
#tubeRig.shaking { transform-origin:50% 84%!important; }
#tubeRig.shaking > #drawTube { animation:none!important; transform:none!important; }
#tubeRig.shaking > #drawSticks,
#tubeRig.shaking > #drawRim { animation:none!important; }

/* v36: retain CSS centering transform; animate independent transform properties. */
#tubeRig.shaking { transform-origin:50% 84%!important; }
#tubeRig.shaking > .jade-composite-art { animation:none!important; }
@media (prefers-reduced-motion:reduce) { #tubeRig.shaking { rotate:none!important; translate:none!important; } }

/* v37 mobile layout rescue: keep all five focus cards and the draw action
   in normal document flow; decorative vessel must never cover controls. */
@media (max-width:720px) {
  #homeView.home-view {
    display:flex!important; flex-direction:column!important; align-items:stretch!important;
    height:auto!important; min-height:calc(100svh - 78px)!important; max-height:none!important;
    overflow:visible!important; padding:18px 14px 20px!important; gap:14px!important;
  }
  #homeView.home-view > .oracle-scene { position:absolute!important; inset:0 0 auto!important;
    height:420px!important; z-index:0!important; pointer-events:none!important;
    background-position:72% top!important; background-size:auto 420px!important; }
  #homeView.home-view:before { position:absolute!important; inset:0!important; height:100%!important; z-index:1!important;
    pointer-events:none!important; background:linear-gradient(180deg,rgba(249,247,240,.87) 0%,rgba(249,247,240,.76) 210px,rgba(247,245,237,.94) 430px,rgba(247,245,237,.99) 100%)!important; }
  #homeView.home-view > .home-intro { position:relative!important; inset:auto!important; order:1!important;
    width:100%!important; margin:0!important; padding:0 92px 0 5px!important; min-height:148px!important;
    z-index:3!important; text-align:left!important; }
  #homeView .home-intro h1.hero-wordmark { font-size:clamp(39px,11vw,54px)!important; }
  #homeView .home-intro .intro-copy { font-size:12px!important; line-height:1.45!important; }
  /* Compact, non-interactive decorative vessel in its own reserved strip. */
  #homeView.home-view > #tubeRig { position:absolute!important; display:block!important;
    left:auto!important; right:9px!important; top:118px!important; bottom:auto!important;
    width:clamp(68px,21vw,96px)!important; height:auto!important; aspect-ratio:2/3!important;
    transform:none!important; z-index:2!important; pointer-events:none!important; }
  #homeView.home-view > #ritualOverlay { display:none!important; }
  #homeView.home-view > #fallingSign { z-index:8!important; }
  #homeView.home-view > .focus-block { position:relative!important; inset:auto!important; order:2!important;
    display:block!important; width:100%!important; margin:24px 0 0!important; padding:0!important; z-index:5!important; }
  #homeView .focus-heading { display:flex!important; flex-wrap:wrap!important; gap:6px 10px!important; margin:0 0 10px!important; }
  #homeView .focus-heading p { width:100%!important; margin:0!important; font-size:12px!important; }
  #homeView .topics { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:minmax(100px,auto)!important; gap:9px!important; width:100%!important; }
  #homeView .topics .topic { display:flex!important; flex-direction:column!important; grid-column:auto!important;
    justify-self:stretch!important; width:auto!important; min-width:0!important; min-height:100px!important;
    height:auto!important; padding:7px 6px!important; overflow:hidden!important; }
  #homeView .topics .topic:nth-child(5) { grid-column:1 / -1!important; justify-self:center!important;
    width:calc(50% - 4px)!important; }
  #homeView .topic-art { display:block!important; flex:0 0 45px!important; height:45px!important; max-height:45px!important;
    width:100%!important; object-fit:cover!important; }
  #homeView .topic strong { display:block!important; font-size:11px!important; line-height:1.25!important;
    white-space:normal!important; text-align:center!important; }
  #homeView .topic small { display:block!important; font-size:9px!important; line-height:1.2!important; text-align:center!important; }
  #homeView .question-details { margin-top:10px!important; }
  #homeView.home-view > .draw-area { position:relative!important; inset:auto!important; order:3!important;
    display:flex!important; flex-direction:column!important; align-items:center!important; width:100%!important;
    margin:0!important; padding:4px 0 8px!important; z-index:6!important; }
  #homeView .draw-area p { margin:0 0 8px!important; font-size:12px!important; text-align:center!important; }
  #homeView .draw-area .btn { position:static!important; display:block!important; visibility:visible!important;
    opacity:1!important; width:min(100%,340px)!important; min-width:0!important; margin:0 auto!important;
    padding:14px 16px!important; font-size:11px!important; }
  #homeView .draw-area > small { display:block!important; margin-top:7px!important; font-size:9px!important; text-align:center!important; }
  #homeView.home-view > .home-bottomline { position:relative!important; inset:auto!important; order:4!important;
    display:flex!important; flex-wrap:wrap!important; width:100%!important; margin:0!important; padding:10px 0 0!important;
    gap:5px!important; z-index:5!important; font-size:7px!important; }
  /* While drawing, use a viewport overlay; don't let ritual positioning alter
     the card/button layout underneath. */
  #homeView.home-view.ritual-active > #tubeRig { position:fixed!important; left:50%!important; right:auto!important;
    top:36vh!important; bottom:auto!important; width:clamp(150px,43vw,190px)!important;
    transform:translateX(-50%)!important; z-index:100!important; pointer-events:none!important; }
  #homeView.home-view.ritual-active > #ritualOverlay { display:block!important; position:fixed!important;
    left:12px!important; right:12px!important; top:auto!important; bottom:12vh!important;
    margin:0!important; transform:none!important; text-align:center!important; z-index:101!important; }
  #homeView.home-view.ritual-active:after { content:""; position:fixed!important; inset:0!important;
    background:rgba(247,242,229,.36)!important; z-index:90!important; pointer-events:none!important; }
}

/* v38 mobile: allow the entire page to scroll vertically instead of clipping
   the longer, touch-friendly homepage inside the fixed app viewport. */
@media (max-width:720px) {
  html, body { height:auto!important; min-height:100%!important; overflow-x:hidden!important; overflow-y:auto!important; }
  body { min-height:100svh!important; }
  .app-main { height:auto!important; min-height:calc(100svh - 58px)!important; overflow:visible!important; }
  #homeView.home-view { height:auto!important; min-height:calc(100svh - 58px)!important; max-height:none!important; overflow:visible!important; }
  #homeView.home-view:not([hidden]) { padding-bottom:30px!important; }
  /* Keep scene art behind the content; its own height must not constrain scroll. */
  #homeView.home-view > .oracle-scene { position:absolute!important; inset:0 0 auto!important; height:460px!important; }
  #homeView.home-view:before { height:100%!important; }
  /* Avoid viewport-fixed header/content traps while the user scrolls. */
  .site-header { position:sticky!important; top:0!important; }
}

/* v39: mobile results are a true separate screen, not appended beneath the
   scrolled homepage. Let the verse card flow vertically on narrow displays. */
@media (max-width:720px) {
  #resultView.result-view, #readingView.reading-view, #dailyView {
    height:auto!important; min-height:calc(100svh - 58px)!important;
    max-height:none!important; overflow:visible!important;
  }
  #resultView.result-view { display:grid; grid-template-rows:auto auto auto!important; }
  #resultView .result-layout { height:auto!important; min-height:0!important;
    grid-template-columns:minmax(0,1fr)!important; gap:18px!important; }
  #resultView .sign-display { height:auto!important; min-height:250px!important; max-height:none!important; }
  #resultView .drawn-sign-card { height:270px!important; min-height:250px!important; width:clamp(145px,48vw,190px)!important; }
  #resultView .verse-content { width:100%!important; max-width:none!important; }
  #resultView .result-bottom { margin-top:12px!important; }
  #readingView .reading-columns { grid-template-rows:auto auto!important; }
}

/* v40 critical: mobile layout rules use display:flex!important on the home
   section. That can override the browser's built-in [hidden] behavior, leaving
   the homepage visible underneath the result screen. Enforce hidden globally. */
[hidden] { display: none !important; }


/* v42: restore the temple plaque on desktop while keeping the open altar scene on mobile. */
@media (min-width:721px){
 .home-view>.oracle-scene{background-image:url("assets/home-temple-altar.webp")!important;background-position:center 53%!important;background-size:cover!important;background-repeat:no-repeat!important;}
}


/* v43: the falling bamboo slip must render above the vessel during the exit arc.
   In v42 the ritual-active tube rig sat at z-index 12 while #fallingSign was
   at 8, so the opaque composite jar/rim could cover the slip and make it look
   as if it emerged from the lower body. Keep the slip above the jar only during
   the active draw; normal page stacking remains unchanged. */
#homeView.ritual-active > #fallingSign.dropping,
#homeView.ritual-active > #fallingSign.landed {
  z-index: 14 !important;
}


/* v45: align the flying slip with the real vessel mouth and force it above the opaque composite art.
   The jade vessel's rim is at about 29% of the source image, not 18%. */
#homeView.ritual-active > #tubeRig { z-index: 10 !important; }
#homeView.ritual-active > #fallingSign.dropping,
#homeView.ritual-active > #fallingSign.landed {
  z-index: 999 !important;
  isolation: isolate;
  pointer-events: none !important;
}

/* Unified site footer — v48 */
.global-footer{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px 18px;border-top:1px solid rgba(177,151,108,.28);color:#858779;font-size:10px;line-height:1.7;text-align:center;background:rgba(248,246,238,.88)}.global-footer a{color:#526b56;text-decoration:underline;text-underline-offset:3px}.legal-body .global-footer{margin-top:30px}.global-footer .footer-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}@media(max-width:390px){.global-footer{font-size:9px;gap:7px;padding-inline:12px}.global-footer .footer-links{gap:9px}}


/* v49: Keep the sign illustration in its own column so long parables never cover it. */
#readingView .parable-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 29%);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(14px, 2.5vw, 32px);
}
#readingView .story-copy {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
}
#readingView .story-illustration {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  right: auto;
  top: auto;
  width: 100%;
  height: min(100%, 230px);
  max-height: 100%;
  object-fit: contain;
  opacity: .72;
  mix-blend-mode: multiply;
  z-index: 0;
}
@media (max-width: 720px) {
  #readingView .parable-panel {
    grid-template-columns: minmax(0, 1fr) 84px;
    column-gap: 8px;
    align-items: center;
  }
  #readingView .story-copy {
    grid-column: 1;
    max-width: none;
  }
  #readingView .story-illustration {
    grid-column: 2;
    width: 100%;
    height: 125px;
    opacity: .7;
  }
}


/* v51 hard fix: render the two home-intro sentences as independent block lines.
   This deliberately overrides older accumulated desktop/mobile layout rules. */
#homeView.home-view > .home-intro .intro-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: relative !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.7 !important;
  gap: 2px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}
#homeView.home-view > .home-intro .intro-copy > .intro-line {
  display: block !important;
  position: static !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.7 !important;
  white-space: normal !important;
  opacity: 1 !important;
}
@media (max-width: 720px) {
  #homeView.home-view > .home-intro .intro-copy {
    font-size: 12px !important;
    line-height: 1.65 !important;
    gap: 3px !important;
    margin-top: 7px !important;
  }
  #homeView.home-view > .home-intro .intro-copy > .intro-line {
    line-height: 1.65 !important;
  }
}


/* v54 artwork-first visual upgrade: give each sign painting real visual priority.
   The original source artwork is fitted into a consistent 1024x1586 canvas,
   so preserve the whole image rather than cropping it. */
.sign-art-frame {
  width: 100%;
  height: clamp(290px, 43vh, 520px);
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(173, 145, 96, .42);
  border-radius: 3px;
  background: #f2ede0;
  margin: 0 0 12px;
  position: relative;
  box-shadow: 0 8px 22px rgba(80, 65, 42, .08);
}
.sign-art-frame:after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(173, 145, 96, .18);
  box-shadow: none;
  pointer-events: none;
}
.sign-art-frame img,
.sign-art-frame img.portrait-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #f2ede0;
}
@media (max-width: 720px) {
  .sign-art-frame {
    height: clamp(300px, 52svh, 430px);
    margin-bottom: 12px;
  }
}


/* v55 sign-gallery layout: the painting, not the decorative card, is the hero. */
#resultView.result-view {
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: clamp(14px, 2.5vh, 24px);
  padding: clamp(14px, 2.4vh, 24px) clamp(18px, 5vw, 76px) clamp(18px, 3vh, 30px);
  scrollbar-gutter: stable;
}
#resultView .view-topline { width: min(100%, 1120px); margin-inline: auto; }
#resultView .result-layout {
  grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 76px);
  width: min(100%, 1120px);
  height: auto;
  min-height: 0;
  align-items: center;
  padding: clamp(4px, 1vh, 12px) 0;
}
#resultView .sign-display {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 10px 0 18px;
}
#resultView .sign-display:before {
  width: min(92%, 460px);
  top: 50%;
  transform: translateY(-50%);
}
#resultView .sign-display:after { bottom: 4%; left: 0; right: 0; height: 18%; opacity: .22; }
#resultView .sign-glow { width: 100%; height: 100%; }
#resultView .drawn-sign-card {
  width: clamp(300px, 34vw, 410px);
  height: auto;
  min-height: 0;
  padding: clamp(14px, 1.8vw, 22px) clamp(12px, 1.5vw, 18px) 16px;
  transform: rotate(-.35deg);
  box-shadow: 0 18px 44px rgba(65, 54, 34, .12), 0 2px 5px rgba(65, 54, 34, .06);
}
#resultView .drawn-sign-card:before { inset: 5px; }
#resultView .drawn-sign-card .sign-card-brand { font-size: 8px; letter-spacing: .22em; margin: 0 0 12px; }
#resultView .sign-art-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 0.646 / 1;
  flex: 0 0 auto;
  margin: 0 0 10px;
  border: 1px solid rgba(173, 145, 96, .48);
  background: #f2ede0;
  box-shadow: none;
}
#resultView .sign-art-frame img,
#resultView .sign-art-frame img.portrait-art {
  width: 100%; height: 100%; object-fit: contain; object-position: center; background: #f2ede0;
}
#resultView .drawn-sign-card > span { font-size: clamp(27px, 2.8vw, 36px); margin: 2px 0 7px; }
#resultView .drawn-sign-card > i { margin: 0 0 8px; }
#resultView .drawn-sign-card > b { font-size: clamp(28px, 2.8vw, 36px); }
#resultView .drawn-sign-card > em { font-size: 13px; margin-top: 5px; }
#resultView .drawn-sign-card .sign-card-foot { margin-top: 12px; font-size: 7px; }
#resultView .result-stamp { right: 0; top: 8%; }
#resultView .verse-content { max-width: 590px; width: 100%; padding: clamp(8px, 2vh, 20px) 0; }
#resultView .grade { font-size: 9px; letter-spacing: .15em; }
#resultView .verse-content h2 { font-size: clamp(34px, 4.1vw, 54px); line-height: 1.08; margin-top: 15px; }
#resultView .chinese { font-size: 18px; margin: 9px 0 26px; }
#resultView .verse-content blockquote { font-size: clamp(19px, 1.65vw, 23px); line-height: 1.85; padding: 22px 0; }
#resultView .verse-note { font-size: 11px; margin: 14px 0 22px; }
#resultView .reveal-btn { min-height: 48px; min-width: min(100%, 270px); font-size: 12px; }
#resultView .sign-disclaimer { font-size: 10px; line-height: 1.6; }
#resultView .result-bottom { width: min(100%, 1120px); margin: 0 auto; padding-top: 12px; font-size: 8px; }
/* v59: remove the horizontal divider beneath the verse/action area. */
#resultView .result-bottom { border-top: 0 !important; }
#resultView #signIllustration { transition: opacity .12s ease; }
#resultView #signIllustration.is-loading { opacity: 0; }
@media (max-width: 900px) and (min-width: 721px) {
  #resultView .result-layout { grid-template-columns: minmax(270px, .9fr) minmax(0, 1.1fr); gap: 28px; }
  #resultView .drawn-sign-card { width: clamp(270px, 34vw, 330px); }
  #resultView .verse-content h2 { font-size: clamp(31px, 3.7vw, 42px); }
}
@media (max-width: 720px) {
  #resultView.result-view { padding: 12px 16px 22px; gap: 12px; }
  #resultView .view-topline { min-height: 30px; }
  #resultView .tiny-note { display: none; }
  #resultView .result-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; padding: 0; }
  #resultView .sign-display { padding: 6px 0 12px; }
  #resultView .sign-display:before { width: min(92%, 390px); }
  #resultView .drawn-sign-card { width: min(100%, 390px); padding: 14px 12px 13px; }
  #resultView .drawn-sign-card .sign-card-brand { font-size: 7px; margin-bottom: 9px; }
  #resultView .sign-art-frame { aspect-ratio: 0.646 / 1; margin-bottom: 8px; }
  #resultView .drawn-sign-card > span { font-size: 27px; margin: 1px 0 5px; }
  #resultView .drawn-sign-card > i { margin-bottom: 6px; }
  #resultView .drawn-sign-card > b { font-size: 30px; }
  #resultView .drawn-sign-card > em { font-size: 12px; }
  #resultView .drawn-sign-card .sign-card-foot { margin-top: 9px; }
  #resultView .result-stamp { right: max(0px, calc((100% - 390px) / 2 - 18px)); top: 7%; }
  #resultView .verse-content { padding: 2px 0 8px; }
  #resultView .verse-content h2 { font-size: clamp(31px, 8.5vw, 42px); margin-top: 11px; }
  #resultView .chinese { font-size: 17px; margin: 7px 0 20px; }
  #resultView .verse-content blockquote { font-size: 19px; line-height: 1.8; padding: 18px 0; }
  #resultView .verse-note { font-size: 10px; margin: 12px 0 18px; }
  #resultView .reveal-btn { width: 100%; min-width: 0; }
  #resultView .sign-disclaimer { font-size: 9px; }
  #resultView .result-bottom { align-items: flex-start; flex-direction: column; gap: 7px; padding-top: 10px; }
  #resultView .result-bottom-actions { width: 100%; display: flex; justify-content: space-between; gap: 14px; }
}
@media (max-width: 390px) {
  #resultView.result-view { padding-inline: 12px; }
  #resultView .drawn-sign-card { width: min(100%, 350px); }
  #resultView .result-stamp { right: 0; }
}


/* v57: a restrained, consistent seal on every sign painting. It is a UI overlay,
   not burned into the source artwork, so the original 50 illustrations stay intact. */
#resultView .sign-art-frame .artwork-seal {
  position: absolute;
  z-index: 3;
  right: 5.2%;
  bottom: 4.2%;
  width: clamp(32px, 3.4vw, 40px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 3px;
  color: #f8ead1;
  background: linear-gradient(145deg, #b74735 0%, #a23329 58%, #8f2b24 100%);
  border: 1px solid rgba(117, 35, 27, .78);
  outline: 1px solid rgba(174, 67, 48, .72);
  outline-offset: -4px;
  box-shadow: 0 2px 5px rgba(72, 36, 25, .18), inset 0 0 0 1px rgba(248, 234, 209, .08);
  font-family: "Noto Serif CJK TC", "Songti TC", "Noto Serif CJK SC", serif;
  font-size: clamp(12px, 1.15vw, 15px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.12em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform: rotate(1.5deg);
  opacity: .94;
  pointer-events: none;
  user-select: none;
}
#resultView .sign-art-frame .artwork-seal::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(248, 234, 209, .38);
  pointer-events: none;
}
@media (max-width: 720px) {
  #resultView .sign-art-frame .artwork-seal {
    width: 34px;
    right: 5%;
    bottom: 4%;
    font-size: 13px;
  }
}


/* v58: enforce a consistent 0.646:1 portrait frame for all 50 sign artworks.
   Source WebP files are already 1024x1586; this fixes display-frame differences. */
.sign-art-frame {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 0.646 / 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: hidden;
}
.sign-art-frame img,
.sign-art-frame img.portrait-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* v58 interaction fix: prevent the result footer/separator from overlaying the CTA. */
#resultView .result-layout,
#resultView .verse-content {
  position: relative !important;
  z-index: 2 !important;
}
#resultView .reveal-btn {
  position: relative !important;
  z-index: 10 !important;
  isolation: isolate;
  pointer-events: auto !important;
  touch-action: manipulation;
}
#resultView .result-bottom {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
}
/* Keep the complete verse column above the footer separator if rows touch on short screens. */
#resultView .result-layout { z-index: 20 !important; }
#resultView .verse-content { z-index: 21 !important; }
#resultView .reveal-btn { z-index: 30 !important; }


/* v60: warm-paper brand footer, matching FUSEERS' jade, champagne and ink-wash palette. */
.brand-footer{position:relative;isolation:isolate;overflow:hidden;padding:44px clamp(18px,5vw,72px) 38px;background:linear-gradient(180deg,#f7f3e9 0%,#f0e7d6 100%);border-top:1px solid rgba(176,141,89,.28);color:var(--ink)}
.brand-footer:before,.brand-footer:after{content:"";position:absolute;z-index:-1;pointer-events:none;bottom:-2px;width:43%;height:78%;opacity:.23;background:linear-gradient(145deg,transparent 28%,#b7c2ad 28.5%,#b7c2ad 29%,transparent 29.5%),linear-gradient(25deg,transparent 40%,#c4c9b5 40.5%,#c4c9b5 41%,transparent 41.5%),linear-gradient(160deg,transparent 50%,#d4c6a8 50.5%,#d4c6a8 51%,transparent 51.5%);}
.brand-footer:before{left:0;transform:scaleX(-1)}.brand-footer:after{right:0}
.brand-footer-inner{width:min(1100px,100%);margin:0 auto;text-align:center}
.brand-footer-kicker{margin:0 0 4px;color:#817b5b;font-size:9px;font-weight:600;letter-spacing:.25em}
.brand-footer h2{margin:0;color:#2e4034;font:500 clamp(24px,3vw,32px)/1.15 var(--serif)}
.brand-footer-ornament{display:flex;align-items:center;justify-content:center;gap:9px;margin:12px auto 25px;color:#b08d59}
.brand-footer-ornament span{width:68px;height:1px;background:linear-gradient(90deg,transparent,#c2a36d)}.brand-footer-ornament span:last-child{transform:scaleX(-1)}.brand-footer-ornament i{font-size:15px;font-style:normal;line-height:1}
.brand-footer-values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));}
.brand-footer-value{min-width:0;padding:0 12px;border-right:1px solid rgba(176,141,89,.27)}.brand-footer-value:last-child{border-right:0}
.brand-footer-icon{display:block;height:36px;color:#b08d59;font:34px/1 var(--serif)}
.brand-footer-value h3{margin:7px 0 5px;color:#304537;font:600 14px/1.25 var(--serif)}
.brand-footer-value p{margin:0;color:#777264;font-size:11px;line-height:1.65}
.global-footer{background:rgba(234,224,206,.94)}
@media(max-width:720px){.brand-footer{padding:32px 16px 27px}.brand-footer h2{font-size:26px}.brand-footer-ornament{margin:10px auto 19px}.brand-footer-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.brand-footer-value{padding:15px 8px;border-right:1px solid rgba(176,141,89,.24);border-bottom:1px solid rgba(176,141,89,.24)}.brand-footer-value:nth-child(2n){border-right:0}.brand-footer-value:nth-child(5){grid-column:1/-1;border-right:0;border-bottom:0}.brand-footer-value h3{font-size:14px}.brand-footer-value p{font-size:11px}}

/* v61: restrained classical-paper refinement for the sign and interpretation screens. */
#resultView.result-view,
#readingView.reading-view {
  background:
    radial-gradient(ellipse at 12% 7%, rgba(190,166,116,.09), transparent 24%),
    radial-gradient(ellipse at 92% 88%, rgba(111,139,111,.08), transparent 26%),
    linear-gradient(135deg, #f8f5ec 0%, #f1eee3 52%, #f8f5ed 100%);
}
#resultView .drawn-sign-card {
  border: 1px solid rgba(174,145,88,.68);
  outline: 1px solid rgba(174,145,88,.22);
  outline-offset: 4px;
  background: linear-gradient(145deg, rgba(255,253,247,.98), rgba(247,242,229,.98));
  box-shadow: 0 18px 44px rgba(65,54,34,.12), 0 2px 5px rgba(65,54,34,.06), inset 0 0 0 1px rgba(255,255,255,.85);
}
#resultView .drawn-sign-card:before {
  border-color: rgba(176,141,89,.38);
  background: linear-gradient(135deg, rgba(255,255,255,.26), transparent 38%, rgba(185,157,105,.035));
}
#resultView .sign-art-frame {
  border: 1px solid rgba(173,145,96,.68);
  box-shadow: 0 0 0 3px rgba(255,253,247,.82), 0 0 0 4px rgba(173,145,96,.2);
}
#resultView .verse-content:before {
  content: ""; display: block; width: 48px; height: 1px; margin: 0 0 15px;
  background: linear-gradient(90deg, transparent, #b79a60, transparent);
}
#resultView .verse-content blockquote {
  border-top: 1px solid rgba(183,154,96,.3);
  border-bottom: 1px solid rgba(183,154,96,.3);
  position: relative;
}
#resultView .verse-content blockquote:before,
#resultView .verse-content blockquote:after {
  content: "✦"; position: absolute; left: 50%; transform: translateX(-50%);
  color: #b79a60; background: #f7f4eb; padding: 0 8px; font-size: 9px;
}
#resultView .verse-content blockquote:before { top: -7px; }
#resultView .verse-content blockquote:after { bottom: -7px; }
#readingView .parable-panel {
  border: 1px solid rgba(183,154,96,.28);
  box-shadow: inset 0 0 0 4px rgba(255,253,247,.5), 0 8px 24px rgba(61,67,49,.035);
  background: linear-gradient(135deg, rgba(235,239,229,.97), rgba(246,245,235,.96));
}
#readingView .parable-panel:before,
#readingView .simple-reading:before {
  content: ""; position: absolute; pointer-events: none; inset: 8px;
  border: 1px solid rgba(183,154,96,.17); border-radius: inherit;
}
#readingView .parable-panel:after {
  content: "☁"; position: absolute; right: 24px; bottom: 10px; pointer-events: none;
  color: rgba(183,154,96,.24); font: 30px var(--serif);
}
#readingView .simple-reading {
  position: relative;
  border: 1px solid rgba(183,154,96,.3);
  background: linear-gradient(145deg, rgba(255,253,247,.98), rgba(250,247,239,.98));
  box-shadow: 0 8px 24px rgba(61,67,49,.035), inset 0 0 0 3px rgba(255,255,255,.52);
}
#readingView .reading-kicker,
#readingView .meaning-block > b,
#readingView .advice > b,
#readingView .reflection > small {
  letter-spacing: .15em;
}
#readingView .meaning-block {
  border-top: 1px solid rgba(183,154,96,.32);
  position: relative;
}
#readingView .meaning-block:before {
  content: "✧"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 0 8px; background: #fffdf7; color: #b79a60; font-size: 11px;
}
#readingView .advice {
  border: 0; border-left: 2px solid #78927b;
  background: linear-gradient(100deg, rgba(231,238,226,.94), rgba(239,242,231,.8));
  position: relative; overflow: hidden;
}
#readingView .advice:after {
  content: "竹"; position: absolute; right: 13px; bottom: -14px; pointer-events: none;
  color: rgba(79,113,83,.12); font: 42px var(--serif);
}
#readingView .reflection {
  border-bottom: 1px solid rgba(183,154,96,.24);
  padding-top: 3px;
}
#readingView .story-seal { box-shadow: inset 0 0 0 1px rgba(169,108,87,.15); }
#resultView .btn, #readingView .btn,
#resultView .outline, #readingView .outline {
  border-radius: 3px;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#resultView .btn:hover, #readingView .btn:hover,
#resultView .outline:hover, #readingView .outline:hover { transform: translateY(-1px); }
#readingView .advice[hidden] { display: none !important; }
@media (max-width: 720px) {
  #resultView .drawn-sign-card { outline-offset: 2px; }
  #resultView .verse-content:before { margin-bottom: 8px; }
  #readingView .parable-panel:before, #readingView .simple-reading:before { inset: 5px; }
  #readingView .parable-panel:after { right: 12px; font-size: 22px; }
}

/* v62: full footer redesign — deep jade pavilion, warm paper and intentional cinnabar seal. */
.brand-footer{padding:42px clamp(18px,5vw,72px) 34px;background:#263e32;color:#f7f1e5;border-top:3px solid #b99a63}
.brand-footer:before,.brand-footer:after{width:30%;height:70%;opacity:.14;background:repeating-linear-gradient(135deg,transparent 0 18px,#d5c39c 19px 20px,transparent 21px 38px);mask-image:linear-gradient(to top,#000,transparent)}
.brand-footer-inner{max-width:1000px}
.brand-footer-kicker{color:#d1b77d;letter-spacing:.24em}
.brand-footer h2{color:#fff8e9;font-size:clamp(25px,3vw,36px);letter-spacing:.01em}
.brand-footer-ornament{margin:15px auto 24px;color:#d0b276}
.brand-footer-ornament span{background:linear-gradient(90deg,transparent,#cdb47b)}
.brand-footer-ornament i{display:grid;place-items:center;width:42px;height:42px;border:1px solid #c9a96d;outline:1px solid rgba(201,169,109,.4);outline-offset:4px;background:#9e382e;color:#fff0d7;font:600 13px/1 serif;letter-spacing:.12em;transform:rotate(-4deg)}
.brand-footer-values{grid-template-columns:repeat(3,minmax(0,1fr));max-width:850px;margin:0 auto}
.brand-footer-value{padding:8px 22px;border-right:1px solid rgba(205,180,123,.28)}
.brand-footer-value:last-child{border-right:0}
.brand-footer-icon{height:32px;color:#d0b276;font-size:28px}
.brand-footer-value h3{color:#f8efd9;font-size:15px}
.brand-footer-value p{color:#d0d0bf;font-size:12px}
.global-footer{background:#1c3027;color:#c9c7b8;border-top:1px solid rgba(205,180,123,.3);padding:16px 18px 20px}
.global-footer a{color:#e0c78e;text-decoration:none}.global-footer a:hover{text-decoration:underline}
@media(max-width:720px){.brand-footer{padding:30px 16px 26px}.brand-footer h2{font-size:25px}.brand-footer-values{grid-template-columns:1fr;max-width:380px}.brand-footer-value{padding:13px 8px;border-right:0;border-bottom:1px solid rgba(205,180,123,.22)}.brand-footer-value:last-child{border-bottom:0}.brand-footer-value p{font-size:11px}.global-footer{padding:14px 12px 18px}}
/* v62: hide empty advice/reflection content rather than leaving blank cards. */
.advice[hidden],.reflection[hidden]{display:none!important}


/* v63: align footer, controls, illustration and reading pages to the approved ivory-and-gold design. */
.brand-footer{position:relative;isolation:isolate;overflow:hidden;padding:42px clamp(18px,3vw,48px) 26px;background:radial-gradient(ellipse at 50% 25%,rgba(255,253,246,.96),rgba(246,240,226,.98) 72%);border-top:1px solid rgba(183,154,96,.24);color:#2e4437}
.brand-footer:before,.brand-footer:after{content:"";position:absolute;z-index:-1;pointer-events:none;bottom:-8px;width:18%;height:34%;opacity:.16;background:linear-gradient(150deg,transparent 45%,#aab4a0 45.5%,#aab4a0 46%,transparent 46.5%),linear-gradient(25deg,transparent 56%,#c6b48c 56.5%,#c6b48c 57%,transparent 57.5%);mask-image:linear-gradient(to top,#000,transparent)}
.brand-footer:before{left:0;transform:scaleX(-1)}.brand-footer:after{right:0}
.brand-footer-inner{width:min(1420px,100%);margin:0 auto;text-align:center}
.brand-footer-kicker{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 14px;color:#9b7a43;font-size:10px;font-weight:700;letter-spacing:.25em}
.brand-footer-kicker:before,.brand-footer-kicker:after{content:"✥";font-size:12px;color:#b99a61}
.brand-footer h2{margin:0;color:#304638;font:500 clamp(25px,3vw,38px)/1.2 var(--serif);letter-spacing:.005em}
.brand-footer-ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:17px auto 40px;color:#b99a61}
.brand-footer-ornament span{width:min(10vw,150px);height:1px;background:linear-gradient(90deg,transparent,#b99a61)}.brand-footer-ornament span:last-child{transform:scaleX(-1)}
.brand-footer-ornament i{display:grid;place-items:center;width:39px;height:39px;border:2px double #b99a61;outline:1px solid rgba(185,154,97,.45);outline-offset:3px;border-radius:50% 50% 46% 46%;background:#f8f1e3;color:#a3342a;font:700 13px/1 serif;letter-spacing:.08em;transform:none}
.brand-footer-values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:1500px;margin:0 auto}
.brand-footer-value{min-width:0;padding:0 16px 4px;border-right:1px solid rgba(185,154,97,.44);position:relative}
.brand-footer-value:not(:last-child):after{content:"◇";position:absolute;right:-5px;top:55px;background:#f7f0e2;color:#b99a61;font-size:10px;line-height:12px}
.brand-footer-value:last-child{border-right:0}
.brand-footer-icon{display:block;height:45px;color:#b99a61;font:40px/1 var(--serif)}
.brand-footer-value h3{margin:9px 0 7px;color:#304638;font:500 clamp(14px,1.2vw,19px)/1.25 var(--serif)}
.brand-footer-value p{margin:0;color:#7a796b;font-size:clamp(11px,.9vw,14px);line-height:1.65}
.global-footer{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:10px 18px 24px;background:#f7f0e2;color:#817b69;border-top:0;font-size:12px;text-align:center}
.global-footer a{color:#536b56;text-decoration:none;text-underline-offset:4px}.global-footer a:hover,.global-footer a:focus-visible{text-decoration:underline;color:#9c6f3e}
.global-footer .footer-links{display:flex;gap:clamp(10px,1.6vw,24px);flex-wrap:wrap;justify-content:center}.global-footer .footer-links a+a:before{content:"·";color:#b99a61;margin-right:clamp(10px,1.6vw,24px);margin-left:calc(clamp(10px,1.6vw,24px)*-1)}
/* One coherent button system: forest-green primary, parchment-and-gold secondary. */
:root{--fuseers-forest:#244638;--fuseers-forest-hover:#315642;--fuseers-gold:#b99a61;--fuseers-paper:#faf5e9;--fuseers-ink:#2e4437}
button,.btn,.outline,.subtle-button,.back-link,.daily-pouch-link,.menu-button{font-family:inherit;transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.btn,button.btn{background:var(--fuseers-forest);color:#fff8e9;border:1px solid #b99a61;border-radius:7px;box-shadow:0 3px 0 rgba(121,91,47,.12);font-weight:600;letter-spacing:.015em}
.btn:hover:not(:disabled),button.btn:hover:not(:disabled){background:var(--fuseers-forest-hover);box-shadow:0 5px 13px rgba(36,70,56,.14);transform:translateY(-1px)}
.outline,.subtle-button,.back-link{background:var(--fuseers-paper);color:var(--fuseers-forest);border:1px solid rgba(185,154,97,.8);border-radius:7px;font-weight:500}
.outline:hover:not(:disabled),.subtle-button:hover:not(:disabled),.back-link:hover:not(:disabled){background:#f0e5cf;border-color:#a88449;color:#203a2d;transform:translateY(-1px)}
button:disabled,.btn:disabled,.outline:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
button:focus-visible,.btn:focus-visible,.outline:focus-visible,.subtle-button:focus-visible,.back-link:focus-visible,a:focus-visible{outline:2px solid #b99a61;outline-offset:3px}
#resultView .btn,#readingView .btn,#resultView .outline,#readingView .outline{border-radius:7px}
#resultView .drawn-sign-card,#readingView .parable-panel,#readingView .simple-reading{border-color:rgba(185,154,97,.55)}
#resultView .drawn-sign-card{background:#faf5e9}
#resultView .verse-content blockquote:before,#resultView .verse-content blockquote:after{background:#faf5e9}
#readingView .meaning-block:before{background:#fffdf7}
@media(max-width:720px){
 .brand-footer{padding:30px 14px 18px}.brand-footer h2{font-size:clamp(23px,6vw,29px)}.brand-footer-ornament{margin:13px auto 24px}.brand-footer-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.brand-footer-value{padding:15px 8px;border-right:1px solid rgba(185,154,97,.32);border-bottom:1px solid rgba(185,154,97,.3)}.brand-footer-value:after{display:none}.brand-footer-value:nth-child(2n){border-right:0}.brand-footer-value:nth-child(5){grid-column:1/-1;border-right:0;border-bottom:0}.brand-footer-icon{height:36px;font-size:32px}.brand-footer-value h3{font-size:14px}.brand-footer-value p{font-size:11px}.global-footer{padding:10px 12px 20px;font-size:11px}.global-footer .footer-links{column-gap:18px;row-gap:8px}.global-footer .footer-links a+a:before{margin-right:9px;margin-left:-9px}
 #resultView .result-bottom-actions,#readingView .reading-actions,.daily-actions{gap:9px}
 #resultView .result-bottom-actions button,#readingView .reading-actions button,.daily-actions button{min-height:42px}
}
@media(prefers-reduced-motion:reduce){button,.btn,.outline,.subtle-button,.back-link{transition:none!important}}


/* v64: match the approved FUSEERS footer reference — ivory paper, five gold-line values, cloud divider and centered vermilion seal. */
.brand-footer{position:relative;isolation:isolate;overflow:hidden;padding:30px clamp(18px,3vw,48px) 0;background:radial-gradient(ellipse at 50% 28%,#fffdf6 0%,#f7f0e2 78%);border-top:1px solid rgba(185,154,97,.16);color:#304638}
.brand-footer:before,.brand-footer:after{content:"";position:absolute;z-index:-1;pointer-events:none;bottom:0;width:16%;height:36%;opacity:.12;background:linear-gradient(150deg,transparent 45%,#9fae9c 45.5%,#9fae9c 46%,transparent 46.5%),linear-gradient(25deg,transparent 56%,#c6b48c 56.5%,#c6b48c 57%,transparent 57.5%);mask-image:linear-gradient(to top,#000,transparent)}
.brand-footer:before{left:0;transform:scaleX(-1)}.brand-footer:after{right:0}
.brand-footer-inner{width:min(1500px,100%);margin:0 auto;text-align:center}
.brand-footer-kicker{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 26px;color:#9b7a43;font-size:10px;font-weight:700;letter-spacing:.25em}
.brand-footer-kicker:before,.brand-footer-kicker:after{content:"✥";font-size:12px;color:#b99a61}
.brand-footer-values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:1500px;margin:0 auto 0}
.brand-footer-value{min-width:0;padding:0 14px 4px;border-right:1px solid rgba(185,154,97,.45);position:relative}
.brand-footer-value:not(:last-child):after{content:"◇";position:absolute;right:-5px;top:58px;background:#f7f0e2;color:#b99a61;font-size:10px;line-height:12px}
.brand-footer-value:last-child{border-right:0}
.brand-footer-icon{display:flex;align-items:center;justify-content:center;height:43px;color:#b99a61;font:39px/1 var(--serif)}
.brand-footer-value h3{margin:6px 0 6px;color:#304638;font:500 clamp(14px,1.15vw,19px)/1.25 var(--serif)}
.brand-footer-value p{margin:0;color:#7a796b;font-size:clamp(11px,.9vw,14px);line-height:1.65}
.footer-cloud-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:30px auto 0;min-height:52px;color:#b99a61;position:relative}
.footer-cloud{width:clamp(70px,12vw,190px);height:auto;fill:none;stroke:#b99a61;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex:0 1 auto}
.footer-cloud-right{transform:scaleX(-1)}
.footer-rule{height:1px;flex:1;max-width:440px;background:linear-gradient(90deg,transparent,#b99a61 12%,#b99a61 88%,transparent)}
.footer-diamond{font-size:8px;color:#b99a61;flex:none}
.footer-seal{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;padding:3px;box-sizing:border-box;border:1px solid rgba(117,35,27,.78);outline:1px solid rgba(174,67,48,.72);outline-offset:-4px;border-radius:3px;background:linear-gradient(145deg,#b74735 0%,#a23329 58%,#8f2b24 100%);color:#f8ead1;font-family:"Noto Serif CJK SC","Songti SC","Noto Serif CJK TC",serif;font-size:15px;font-weight:700;line-height:1.05;letter-spacing:0;writing-mode:vertical-rl;text-orientation:upright;transform:rotate(1.5deg);box-shadow:0 2px 5px rgba(72,36,25,.18),inset 0 0 0 1px rgba(248,234,209,.08)}.footer-seal::after{content:"";position:absolute;inset:2px;border:1px solid rgba(248,234,209,.38);pointer-events:none}
.global-footer{display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;padding:7px 18px 22px;background:#f7f0e2;color:#817b69;border-top:0;font-size:12px;text-align:center}
.global-footer a{color:#536b56;text-decoration:none;text-underline-offset:4px}.global-footer a:hover,.global-footer a:focus-visible{text-decoration:underline;color:#9c6f3e}
.global-footer .footer-links{display:flex;gap:clamp(10px,1.6vw,24px);flex-wrap:wrap;justify-content:center}.global-footer .footer-links a+a:before{content:"·";color:#b99a61;margin-right:clamp(10px,1.6vw,24px);margin-left:calc(clamp(10px,1.6vw,24px)*-1)}
@media(max-width:720px){.brand-footer{padding:26px 12px 0}.brand-footer-kicker{margin-bottom:15px}.brand-footer-values{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-footer-value{padding:13px 7px 14px;border-right:1px solid rgba(185,154,97,.32);border-bottom:1px solid rgba(185,154,97,.3)}.brand-footer-value:after{display:none}.brand-footer-value:nth-child(2n){border-right:0}.brand-footer-value:nth-child(5){grid-column:1/-1;border-right:0;border-bottom:0}.brand-footer-icon{height:34px;font-size:31px}.brand-footer-value h3{font-size:14px}.brand-footer-value p{font-size:11px}.footer-cloud-divider{gap:5px;margin-top:20px;min-height:42px}.footer-cloud{width:clamp(25px,8vw,58px)}.footer-rule{min-width:12px}.footer-seal{width:34px;height:34px;font-size:13px}.global-footer{padding:8px 10px 18px;font-size:11px}.global-footer .footer-links{column-gap:18px;row-gap:8px}.global-footer .footer-links a+a:before{margin-right:9px;margin-left:-9px}}



/* v71: rebuilt responsive footer. No stretched artwork, duplicate text, or overlaid navigation. */
.final-footer{position:relative;isolation:isolate;display:block;clear:both;width:100%;box-sizing:border-box;overflow:hidden;margin:0;padding:22px clamp(18px,3vw,48px) 24px;border:0;background:linear-gradient(180deg,#f8f2e5 0%,#f5eddd 100%);color:#304638}
.final-footer:before,.final-footer:after{content:"";position:absolute;z-index:-1;bottom:0;width:clamp(120px,20vw,350px);height:155px;background-repeat:no-repeat;background-position:bottom left;background-size:contain;opacity:.52;pointer-events:none}
.final-footer:before{left:0;background-image:url('assets/footer-mountain-left.png')}
.final-footer:after{right:0;background-image:url('assets/footer-mountain-right.png');background-position:bottom right}
.final-footer .brand-footer-inner{position:relative;width:min(1500px,100%);margin:0 auto;text-align:center}
.final-footer .brand-footer-kicker{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto 18px;color:#9b7a43;font-size:10px;font-weight:700;letter-spacing:.28em;line-height:1.3}
.final-footer .brand-footer-kicker:before,.final-footer .brand-footer-kicker:after{content:"";display:block;width:clamp(35px,5vw,90px);height:1px;background:linear-gradient(90deg,transparent,#b99a61)}
.final-footer .brand-footer-kicker:after{transform:scaleX(-1)}
.final-footer .brand-footer-values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 auto;max-width:1420px}
.final-footer .brand-footer-value{position:relative;min-width:0;padding:0 12px 4px;border:0;border-right:1px solid rgba(185,154,97,.42)}
.final-footer .brand-footer-value:last-child{border-right:0}
.final-footer .brand-footer-value:not(:last-child):after{content:"◇";position:absolute;right:-5px;top:45px;z-index:1;background:#f6efdf;color:#b99a61;font-size:10px;line-height:12px}
.final-footer .brand-footer-icon{display:flex;align-items:center;justify-content:center;height:36px;color:#b99a61;font:34px/1 Georgia,'Times New Roman',serif}
.final-footer .brand-footer-value h3{margin:5px 0 5px;color:#304638;font:500 clamp(13px,1.05vw,17px)/1.25 var(--serif,Georgia,serif)}
.final-footer .brand-footer-value p{margin:0;color:#7a796b;font-size:clamp(10px,.78vw,12px);line-height:1.5}
.final-footer .footer-cloud-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px auto 8px;min-height:42px;color:#b99a61;position:relative}
.final-footer .footer-cloud-art{display:block;flex:0 1 150px;width:clamp(45px,10vw,150px);height:35px;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.95}
.final-footer .footer-cloud-left{background-image:url('assets/footer-mountain-left.png')}
.final-footer .footer-cloud-right{background-image:url('assets/footer-mountain-right.png')}
.final-footer .footer-rule{height:1px;flex:1;max-width:440px;background:linear-gradient(90deg,transparent,#b99a61 12%,#b99a61 88%,transparent)}
.final-footer .footer-diamond{font-size:7px;color:#b99a61;flex:none}
.final-footer .footer-seal{position:relative;display:grid;place-items:center;flex:none;width:36px;height:48px;padding:4px;box-sizing:border-box;border:1px solid rgba(117,35,27,.78);outline:1px solid rgba(174,67,48,.72);outline-offset:-4px;border-radius:3px;background:linear-gradient(145deg,#b74735 0%,#a23329 58%,#8f2b24 100%);color:#f8ead1;font-family:'Noto Serif CJK SC','Songti SC','Noto Serif CJK TC',serif;font-size:15px;font-weight:700;line-height:1.05;letter-spacing:0;writing-mode:vertical-rl;text-orientation:upright;transform:rotate(1deg);box-shadow:0 2px 5px rgba(72,36,25,.18),inset 0 0 0 1px rgba(248,234,209,.08)}
.final-footer .footer-seal:after{content:"";position:absolute;inset:2px;border:1px solid rgba(248,234,209,.38);pointer-events:none}
.final-footer-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:2}
.final-footer-copyright{margin:0;color:#817b69;font-size:12px;line-height:1.5}
.final-footer-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;color:#304638}
.final-footer-links a{display:inline-block;color:#304638;text-decoration:none;text-underline-offset:4px;font:500 15px/1.5 var(--serif,Georgia,'Times New Roman',serif);padding:0 13px}
.final-footer-links a+a:before{content:"·";color:#b99a61;position:relative;left:-13px;margin-right:-4px}
.final-footer-links a:hover,.final-footer-links a:focus-visible{color:#9c6f3e;text-decoration:underline}
@media(max-width:720px){
 .final-footer{padding:18px 12px 20px}
 .final-footer .brand-footer-kicker{margin-bottom:10px}
 .final-footer .brand-footer-values{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
 .final-footer .brand-footer-value{padding:10px 7px 11px;border-right:1px solid rgba(185,154,97,.32);border-bottom:1px solid rgba(185,154,97,.3)}
 .final-footer .brand-footer-value:after{display:none}
 .final-footer .brand-footer-value:nth-child(2n){border-right:0}
 .final-footer .brand-footer-value:nth-child(5){grid-column:1/-1;border-right:0;border-bottom:0}
 .final-footer .brand-footer-icon{height:29px;font-size:27px}
 .final-footer .brand-footer-value h3{font-size:13px}
 .final-footer .brand-footer-value p{font-size:10px}
 .final-footer .footer-cloud-divider{gap:5px;margin-top:14px;min-height:36px}
 .final-footer .footer-cloud-art{flex-basis:38px;width:38px;height:28px}
 .final-footer .footer-rule{min-width:8px}
 .final-footer .footer-diamond{font-size:6px}
 .final-footer .footer-seal{width:30px;height:40px;font-size:12px}
 .final-footer-copyright{font-size:11px}
 .final-footer-links{gap:5px 0;max-width:390px}
 .final-footer-links a{font-size:12px;padding:0 8px}
 .final-footer-links a+a:before{left:-8px;margin-right:-3px}
 .final-footer:before,.final-footer:after{width:110px;height:90px;opacity:.35}
}
@media(prefers-reduced-motion:reduce){.final-footer *{scroll-behavior:auto}}


/* v72: custom Eastern line-art footer icons (replacing card-suit-like glyphs). */
.final-footer .brand-footer-icon{height:48px;color:#b39459;font-size:initial;line-height:1}
.final-footer .footer-classic-icon{display:block;width:clamp(48px,4.4vw,70px);height:46px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .35px 0 rgba(185,154,97,.16))}
.final-footer .brand-footer-value:nth-child(1) .footer-classic-icon{width:68px}
.final-footer .brand-footer-value:nth-child(2) .footer-classic-icon{width:66px}
.final-footer .brand-footer-value:nth-child(3) .footer-classic-icon{width:66px}
.final-footer .brand-footer-value:nth-child(4) .footer-classic-icon{width:68px}
.final-footer .brand-footer-value:nth-child(5) .footer-classic-icon{width:70px}
@media(max-width:720px){.final-footer .brand-footer-icon{height:37px}.final-footer .footer-classic-icon{width:52px!important;height:36px}}


/* v73: final unified button interaction polish — preserve existing layout and palette. */
:root{--fuseers-forest:#304d3c;--fuseers-forest-hover:#243f30;--fuseers-paper:#fbf8ef;--fuseers-gold:#b99a61}
button,.btn,.outline,.subtle-button,.back-link,.daily-pouch-link,.menu-button{box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.btn,button.btn{min-height:42px;background:linear-gradient(135deg,#3d624b 0%,#2e4b39 100%);color:#fff9ed;border:1px solid #b99a61;border-radius:7px;box-shadow:0 2px 0 rgba(121,91,47,.12),inset 0 1px rgba(255,255,255,.12);font-weight:600}
.btn:hover:not(:disabled),button.btn:hover:not(:disabled){background:linear-gradient(135deg,#355740 0%,#243f30 100%);border-color:#c7a76a;box-shadow:0 5px 13px rgba(36,70,56,.16),inset 0 1px rgba(255,255,255,.12);transform:translateY(-1px)}
.btn:active:not(:disabled),button.btn:active:not(:disabled),.outline:active:not(:disabled),.subtle-button:active:not(:disabled),.back-link:active:not(:disabled){transform:translateY(0);box-shadow:inset 0 1px 3px rgba(42,52,39,.13)}
.outline,.subtle-button,.back-link{min-height:42px;background:#fbf8ef;color:#304d3c;border:1px solid rgba(185,154,97,.82);border-radius:7px;box-shadow:inset 0 1px rgba(255,255,255,.75);font-weight:500}
.outline:hover:not(:disabled),.subtle-button:hover:not(:disabled),.back-link:hover:not(:disabled){background:#f1e8d6;border-color:#a88449;color:#203a2d;box-shadow:0 3px 9px rgba(60,66,48,.08);transform:translateY(-1px)}
button:disabled,.btn:disabled,.outline:disabled,.subtle-button:disabled{opacity:.56;cursor:not-allowed;transform:none;box-shadow:none}
button:focus-visible,.btn:focus-visible,.outline:focus-visible,.subtle-button:focus-visible,.back-link:focus-visible,a:focus-visible{outline:2px solid #b99a61;outline-offset:3px}
#resultView .result-bottom-actions button,#readingView .reading-actions button,.daily-actions button{min-height:42px}
.final-footer .footer-seal{font-family:'Noto Serif CJK TC','Noto Serif CJK SC','Songti TC','Songti SC',serif;letter-spacing:0;line-height:1.05}
@media(max-width:720px){.final-footer .footer-seal{width:30px;height:40px;font-size:12px}.reading-actions .btn,.reading-actions .outline,.daily-actions .btn,.daily-actions .outline{min-height:40px}}
@media(prefers-reduced-motion:reduce){button,.btn,.outline,.subtle-button,.back-link{transition:none!important}}

/* v74 corrective pass: real mountain silhouettes and a complete control system. */
.final-footer:before,
.final-footer:after{
  content:"";
  position:absolute;
  z-index:-1;
  bottom:0;
  width:clamp(150px,24vw,330px);
  height:clamp(110px,15vw,190px);
  opacity:.62;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  background-position:bottom left!important;
  pointer-events:none;
}
.final-footer:before{left:0;transform:none;background-image:url('/assets/footer-mountain-left.png')!important}
.final-footer:after{right:0;transform:none;background-image:url('/assets/footer-mountain-right.png')!important;background-position:bottom right!important}
.final-footer .footer-cloud-art{background-image:none!important;flex:0 1 42px;width:42px;height:24px;opacity:.7}
.final-footer .footer-cloud-left:before,.final-footer .footer-cloud-right:before{content:"⌁";display:block;color:#b99a61;font:28px/1 Georgia,serif}
.final-footer .footer-cloud-right:before{transform:scaleX(-1)}

/* Primary and secondary controls: consistent across all pages and states. */
button,
button.btn,
button.outline,
button.subtle-button,
button.back-link,
button.daily-pouch-link,
button.menu-button,
.reading-actions button,
.result-bottom-actions button,
.daily-actions button{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
button.btn,
button#draw,
button#interpret,
button#copy,
button#dailyStory{
  min-height:44px!important;
  padding:11px 19px!important;
  background:#304d3c!important;
  color:#fff9ed!important;
  border:1px solid #b99a61!important;
  border-radius:8px!important;
  box-shadow:0 2px 0 rgba(121,91,47,.12),inset 0 1px rgba(255,255,255,.10)!important;
  font-weight:600!important;
}
button.btn:hover:not(:disabled),button#draw:hover:not(:disabled),button#interpret:hover:not(:disabled),button#copy:hover:not(:disabled),button#dailyStory:hover:not(:disabled){background:#243f30!important;border-color:#c7a76a!important;box-shadow:0 5px 13px rgba(36,70,56,.16)!important;transform:translateY(-1px)}
button.outline,button.subtle-button,button.back-link,button#dailyRetry,button#shareReading,button#againReading,button#dailyShare{
  min-height:42px!important;
  padding:10px 16px!important;
  background:#fbf8ef!important;
  color:#304d3c!important;
  border:1px solid rgba(185,154,97,.82)!important;
  border-radius:8px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.75)!important;
  font-weight:500!important;
}
button.outline:hover:not(:disabled),button.subtle-button:hover:not(:disabled),button.back-link:hover:not(:disabled){background:#f1e8d6!important;border-color:#a88449!important;color:#203a2d!important;transform:translateY(-1px)}
button:active:not(:disabled){transform:translateY(0)!important;box-shadow:inset 0 1px 3px rgba(42,52,39,.13)!important}
button:disabled{opacity:.56!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}
button:focus-visible{outline:2px solid #b99a61!important;outline-offset:3px!important}
/* Topic selectors are choice cards, not CTA buttons; retain their artwork and selection affordance. */
button.topic{min-height:0!important;padding:0!important;border-radius:10px!important;border:1px solid #d8c9a7!important;background:#fbf8ef!important;color:#304d3c!important;box-shadow:0 2px 8px rgba(51,62,44,.045)!important;overflow:hidden}
button.topic:hover:not(:disabled){border-color:#b99a61!important;box-shadow:0 5px 14px rgba(51,62,44,.10)!important;transform:translateY(-2px)}
button.topic[aria-pressed="true"]{border:2px solid #b99a61!important;background:#f4ecda!important;box-shadow:0 0 0 2px rgba(185,154,97,.14)!important}
button#dailyHeaderLink{background:transparent!important;border:1px solid rgba(185,154,97,.7)!important;color:#304d3c!important;border-radius:999px!important;min-height:38px!important}
button.menu-button{background:transparent!important;border:1px solid rgba(185,154,97,.65)!important;border-radius:7px!important}
@media(max-width:720px){
 .final-footer:before,.final-footer:after{width:clamp(100px,30vw,160px);height:100px;opacity:.48}
 button.btn,button#draw,button#interpret,button#copy,button#dailyStory{min-height:42px!important;padding:10px 14px!important}
 button.outline,button.subtle-button,button.back-link,button#dailyRetry,button#shareReading,button#againReading,button#dailyShare{min-height:40px!important;padding:9px 12px!important}
}
.final-footer:before,.final-footer:after{z-index:0!important}
.final-footer .brand-footer-inner{position:relative;z-index:1}


/* v75: high-specificity action-button system; preserve topic cards and the daily pouch. */
body button:not(.topic):not(.daily-pouch-link), body .btn, body .outline, body .subtle-button, body .back-link {
  box-sizing:border-box !important;
  font-family:inherit !important;
  letter-spacing:.01em !important;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease !important;
}
body button.btn, body button#draw, body button#interpret, body button#dailyStory, body button.reveal-btn {
  min-height:46px !important; padding:12px 20px !important;
  background:#294735 !important; color:#fff9ee !important;
  border:1px solid #b99a61 !important; border-radius:8px !important;
  box-shadow:0 2px 0 rgba(93,70,35,.16), inset 0 1px rgba(255,255,255,.12) !important;
  font-size:14px !important; font-weight:600 !important;
}
body button.subtle-button, body button.outline, body button.back-link,
body button#shareSign, body button#again, body button#backToFocus,
body button#dailyBack, body button#dailyRetry, body button#dailyShare,
body button#dailyDrawOwn, body button#shareReading, body button#againReading,
body button#copy, body button#copyReading {
  min-height:42px !important; padding:10px 16px !important;
  background:#fbf7ec !important; color:#294735 !important;
  border:1px solid #b99a61 !important; border-radius:8px !important;
  box-shadow:0 1px 2px rgba(62,52,31,.05) !important;
  font-size:13px !important; font-weight:550 !important;
}
body button:not(.topic):not(.daily-pouch-link):not(:disabled):hover {
  border-color:#a9854c !important; box-shadow:0 4px 12px rgba(41,71,53,.13) !important;
  transform:translateY(-1px);
}
body button.subtle-button:not(:disabled):hover, body button.outline:not(:disabled):hover,
body button.back-link:not(:disabled):hover { background:#f0e7d4 !important; color:#203a2b !important; }
body button:not(.topic):not(.daily-pouch-link):active { transform:translateY(0) !important; box-shadow:inset 0 2px 4px rgba(41,71,53,.12) !important; }
body button:not(.topic):focus-visible { outline:2px solid #b99a61 !important; outline-offset:3px !important; }
body button:disabled { opacity:.58 !important; cursor:not-allowed !important; }
body button.topic { font-size:inherit !important; }
@media(max-width:720px) {
 body button.btn, body button#draw, body button#interpret, body button#dailyStory, body button.reveal-btn { min-height:44px !important; padding:10px 14px !important; }
 body button.subtle-button, body button.outline, body button.back-link { min-height:40px !important; padding:9px 12px !important; }
}

/* v76 final home focus polish: preserve the existing homepage composition. */
#homeView .focus-block { margin-top: clamp(10px, 1.2vw, 18px) !important; }
#homeView .focus-heading { display:flex !important; flex-wrap:wrap !important; align-items:baseline !important; column-gap:18px !important; row-gap:6px !important; margin:0 0 12px !important; }
#homeView .focus-heading .step-label { margin:0 !important; line-height:1.25 !important; }
#homeView .focus-heading p { margin:0 !important; line-height:1.45 !important; }
#homeView .topics { gap:12px !important; align-items:stretch !important; }
#homeView .topics .topic { min-width:0 !important; min-height:0 !important; padding:7px !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:3px !important; border:1px solid #d7c49b !important; border-radius:11px !important; background:rgba(251,247,237,.94) !important; overflow:hidden !important; }
#homeView .topic-art { display:block !important; width:100% !important; height:clamp(58px, 6.2vw, 88px) !important; max-height:none !important; flex:none !important; object-fit:cover !important; object-position:center !important; border-radius:6px !important; }
#homeView .topics .topic strong { display:block !important; margin:4px 5px 0 !important; font-size:clamp(13px,1.05vw,17px) !important; line-height:1.25 !important; text-align:left !important; white-space:normal !important; }
#homeView .topics .topic small { display:block !important; margin:0 5px 4px !important; font-size:clamp(10px,.8vw,12px) !important; line-height:1.3 !important; text-align:left !important; }
#homeView .topics .topic[aria-pressed="true"] { border:2px solid #54765c !important; background:rgba(235,241,226,.97) !important; box-shadow:0 0 0 2px rgba(185,154,97,.18) !important; }
#homeView .draw-area { margin-top:10px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:8px !important; }
#homeView .draw-area p { margin:0 !important; line-height:1.4 !important; }
#homeView .draw-area button#draw { min-width:260px !important; width:auto !important; max-width:100% !important; min-height:48px !important; padding:13px 26px !important; border:1px solid #c5a45e !important; border-radius:999px !important; background:#173f32 !important; color:#fff8e9 !important; box-shadow:inset 0 1px rgba(255,255,255,.13),0 3px 0 rgba(65,50,24,.16) !important; font-family:inherit !important; font-size:13px !important; font-weight:650 !important; letter-spacing:.045em !important; text-transform:uppercase !important; }
#homeView .draw-area button#draw:not(:disabled):hover { background:#214e3e !important; box-shadow:inset 0 1px rgba(255,255,255,.16),0 5px 12px rgba(23,63,50,.2) !important; transform:translateY(-1px) !important; }
#homeView .draw-area button#draw:disabled { background:#849180 !important; color:#fffaf0 !important; border-color:#c9b887 !important; opacity:.92 !important; }
#homeView .draw-area > small { margin:0 !important; line-height:1.35 !important; text-align:center !important; }
@media (max-width:720px) {
 #homeView .focus-block { margin-top:8px !important; }
 #homeView .focus-heading { margin-bottom:9px !important; row-gap:4px !important; }
 #homeView .topics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; }
 #homeView .topics .topic { padding:5px !important; }
 #homeView .topics .topic:nth-child(5) { grid-column:1 / -1 !important; width:calc(50% - 4px) !important; justify-self:center !important; }
 #homeView .topic-art { height:54px !important; }
 #homeView .topics .topic strong { font-size:12px !important; margin:3px 3px 0 !important; }
 #homeView .topics .topic small { font-size:10px !important; margin:0 3px 3px !important; }
 #homeView .draw-area { margin-top:9px !important; gap:7px !important; }
 #homeView .draw-area button#draw { width:min(100%,330px) !important; min-width:0 !important; min-height:46px !important; padding:12px 15px !important; font-size:12px !important; }
}

/* v77 final deployment pass: jade-and-champagne primary actions, stable focus cards, and non-overlapping result actions. */
#homeView .topics{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px!important;}
#homeView .topics .topic{grid-column:span 2!important;}
#homeView .topics .topic:nth-child(4){grid-column:2/span 2!important;}
#homeView .topics .topic:nth-child(5){grid-column:4/span 2!important;}
#homeView .topics .topic-art{height:clamp(56px,5.7vw,82px)!important;aspect-ratio:16/7!important;object-fit:cover!important;object-position:center!important;}
#homeView .topics .topic strong{font-size:clamp(12px,1vw,16px)!important;line-height:1.25!important;overflow-wrap:anywhere!important;}
#homeView .topics .topic small{font-size:clamp(9px,.72vw,11px)!important;line-height:1.3!important;}
#homeView .draw-area button#draw,
#resultView #interpret,
#readingView #copy{
  background:linear-gradient(135deg,#245b4c 0%,#3f8a73 32%,#72b69d 52%,#327b65 76%,#1d5142 100%)!important;
  color:#fffaf0!important;border:1px solid #c9a968!important;border-radius:12px!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.48),inset 0 -2px 5px rgba(10,45,35,.24),0 3px 8px rgba(24,65,51,.16)!important;
  text-shadow:0 1px 1px rgba(12,44,34,.28)!important;position:relative!important;overflow:hidden!important;
}
#homeView .draw-area button#draw:before,#resultView #interpret:before,#readingView #copy:before{
 content:"";position:absolute;inset:2px;border-radius:9px;border:1px solid rgba(246,225,166,.42);pointer-events:none;
}
#homeView .draw-area button#draw:not(:disabled):hover,#resultView #interpret:hover,#readingView #copy:hover{
 background:linear-gradient(135deg,#2b6856 0%,#4b987f 34%,#8ac5ad 52%,#3b896f 76%,#235b49 100%)!important;
 box-shadow:inset 0 1px 1px rgba(255,255,255,.56),0 5px 14px rgba(24,65,51,.23)!important;transform:translateY(-1px)!important;
}
#homeView .draw-area button#draw:disabled{background:linear-gradient(135deg,#849b8b,#a5b5a3 48%,#7f9687)!important;color:#fffaf0!important;border-color:#d2bd83!important;opacity:1!important;}
#resultView .verse-content{min-width:0;width:100%;}
#resultView #interpret{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;width:fit-content!important;max-width:100%!important;min-width:0!important;padding:13px 20px!important;white-space:normal!important;line-height:1.35!important;}
#resultView .verse-note{margin-bottom:14px!important;}
#resultView .sign-disclaimer{margin-top:10px!important;}
#resultView .result-bottom{flex-wrap:wrap!important;}
#resultView .result-bottom-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;align-items:center!important;gap:8px 18px!important;min-width:0!important;max-width:100%!important;}
#resultView .result-bottom-actions .subtle-button{white-space:normal!important;max-width:100%!important;line-height:1.35!important;padding:8px 12px!important;border:1px solid #d8c7a3!important;border-radius:9px!important;background:rgba(255,252,244,.82)!important;}
@media(max-width:720px){
 #homeView .topics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
 #homeView .topics .topic{grid-column:auto!important;}
 #homeView .topics .topic:nth-child(5){grid-column:1/-1!important;width:calc(50% - 4px)!important;justify-self:center!important;}
 #homeView .topics .topic-art{height:54px!important;aspect-ratio:16/7!important;}
 #homeView .draw-area button#draw{border-radius:10px!important;}
 #resultView .result-bottom{align-items:flex-start!important;}
 #resultView .result-bottom>span{width:100%!important;}
 #resultView .result-bottom-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
 #resultView .result-bottom-actions .subtle-button{min-width:0!important;width:100%!important;text-align:center!important;font-size:10px!important;padding:9px 7px!important;}
 #resultView #interpret{width:100%!important;padding:11px 12px!important;font-size:12px!important;}
}


/* v78: align all three sign-page actions in one stable row; wrap cleanly on narrow screens. */
#resultView .verse-actions{display:flex;align-items:stretch;justify-content:flex-start;flex-wrap:wrap;gap:10px 12px;width:100%;min-width:0;margin-top:2px;}
#resultView .verse-actions button{box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:0;line-height:1.25;white-space:normal;}
#resultView .verse-actions .reveal-btn{flex:1 1 235px;width:auto!important;min-width:0!important;max-width:100%;padding:12px 18px!important;}
#resultView .verse-actions .subtle-button{flex:0 1 auto;padding:10px 16px;border:1px solid #d8c7a3;border-radius:9px;background:rgba(255,252,244,.86);color:#34483a;font-size:11px;letter-spacing:0;white-space:nowrap;}
#resultView .verse-actions .subtle-button:hover{border-color:#b99a66;background:#fffdf7;color:#294d3a;}
#resultView .sign-disclaimer{margin-top:9px!important;}
#resultView .result-bottom{align-items:center;}
@media(max-width:720px){
 #resultView .verse-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
 #resultView .verse-actions .reveal-btn{grid-column:1/-1;width:100%!important;min-width:0!important;padding:11px 12px!important;font-size:11px!important;}
 #resultView .verse-actions .subtle-button{width:100%;min-width:0;min-height:40px;padding:9px 7px;font-size:10px;white-space:normal;}
}

/* v79: prevent the two-line homepage intro from colliding with the focus heading.
   Keep the existing composition and artwork; reserve real vertical space for the intro. */
@media (min-width:721px) {
  #homeView.home-view {
    grid-template-rows: minmax(218px, 1fr) auto auto auto !important;
    row-gap: clamp(8px, 1.25vh, 12px) !important;
  }
  #homeView .home-intro {
    align-self: start !important;
    margin-top: clamp(7px, 1.5vh, 14px) !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  #homeView .home-intro .intro-copy {
    line-height: 1.55 !important;
    margin-top: 8px !important;
  }
  #homeView .focus-block {
    align-self: start !important;
    margin-top: 0 !important;
  }
  #homeView .focus-heading { margin-bottom: 8px !important; }
  #homeView .topic { min-height: clamp(124px, 16vh, 145px) !important; }
  #homeView .topic .topic-art { height: clamp(62px, 9vh, 82px) !important; }
}
@media (max-width:720px) {
  #homeView.home-view { row-gap: 8px !important; }
  #homeView .home-intro { margin-bottom: 0 !important; }
  #homeView .home-intro .intro-copy { line-height: 1.5 !important; }
  #homeView .focus-block { margin-top: 4px !important; }
  #homeView .focus-heading { align-items: flex-start !important; }
}


/* v80: real collision fix. The hero copy and focus block were both absolutely positioned;
   the previous grid-row adjustment could not reserve space. Keep the scene and intro intact,
   but anchor the focus section below the intro instead of pulling it up from the bottom. */
@media (min-width:721px) {
  #homeView.home-view > .focus-block {
    top: clamp(290px, 43vh, 390px) !important;
    bottom: auto !important;
    margin-top: 0 !important;
  }
  #homeView.home-view > .home-intro {
    top: clamp(34px, 8.5vh, 78px) !important;
  }
  #homeView.home-view > .focus-block .focus-heading {
    margin-bottom: 10px !important;
  }
}
@media (max-width:720px) {
  #homeView.home-view > .home-intro {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #homeView.home-view > .focus-block {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
  }
}

/* v81 homepage layout stabilization: desktop content now flows vertically.
   Keep the existing artwork, intro copy, theme-card design, vessel animation and draw logic;
   remove the bottom-anchored layout that caused the draw action to cover row two. */
@media (min-width:721px) {
  #homeView.home-view {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    height:auto !important;
    min-height:calc(100vh - 66px) !important;
    max-height:none !important;
    overflow:visible !important;
    padding:clamp(42px,8.5vh,78px) clamp(28px,6.9vw,116px) 28px !important;
  }
  #homeView.home-view > .oracle-scene {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    pointer-events:none !important;
    z-index:0 !important;
  }
  #homeView.home-view > .home-intro {
    position:relative !important;
    inset:auto !important;
    flex:none !important;
    width:min(48%,620px) !important;
    min-height:0 !important;
    margin:0 0 clamp(44px,7vh,66px) 0 !important;
    padding:0 !important;
    text-align:left !important;
    align-self:flex-start !important;
    z-index:4 !important;
  }
  #homeView.home-view > .home-intro .eyebrow { margin-bottom:16px !important; }
  #homeView.home-view > .home-intro h1.hero-wordmark { font-size:clamp(58px,6.2vw,88px) !important; }
  #homeView.home-view > .home-intro .hero-subtitle { margin-bottom:14px !important; }
  #homeView.home-view > .home-intro .intro-copy {
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    max-width:390px !important;
    margin:0 !important;
    line-height:1.65 !important;
  }
  #homeView.home-view > .focus-block {
    position:relative !important;
    inset:auto !important;
    flex:none !important;
    align-self:flex-start !important;
    width:min(100%,970px) !important;
    margin:0 !important;
    padding:0 !important;
    z-index:5 !important;
  }
  #homeView .focus-heading {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    column-gap:18px !important;
    row-gap:6px !important;
    margin:0 0 12px !important;
  }
  #homeView .focus-heading p { margin:0 !important; line-height:1.4 !important; }
  #homeView .topics {
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    gap:12px !important;
    align-items:stretch !important;
  }
  #homeView .topics .topic {
    grid-column:span 2 !important;
    width:auto !important;
    min-width:0 !important;
    min-height:clamp(132px,17vh,154px) !important;
    height:auto !important;
    padding:8px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:4px !important;
    overflow:hidden !important;
  }
  #homeView .topics .topic:nth-child(4) { grid-column:2 / span 2 !important; }
  #homeView .topics .topic:nth-child(5) { grid-column:4 / span 2 !important; justify-self:stretch !important; }
  #homeView .topic-art {
    display:block !important;
    flex:0 0 clamp(64px,8vh,78px) !important;
    width:100% !important;
    height:clamp(64px,8vh,78px) !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
  }
  #homeView .topics .topic strong { margin:3px 5px 0 !important; line-height:1.25 !important; white-space:normal !important; }
  #homeView .topics .topic small { margin:0 5px 4px !important; line-height:1.3 !important; }
  #homeView .question-details { position:relative !important; inset:auto !important; transform:none !important; width:min(100%,420px) !important; margin-top:12px !important; }
  #homeView.home-view > .draw-area {
    position:relative !important;
    inset:auto !important;
    flex:none !important;
    width:min(100%,970px) !important;
    margin:18px 0 0 !important;
    padding:0 0 4px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    z-index:6 !important;
  }
  #homeView .draw-area p { position:static !important; margin:0 !important; line-height:1.4 !important; text-align:center !important; }
  #homeView .draw-area button#draw { position:relative !important; inset:auto !important; display:inline-flex !important; margin:0 !important; min-height:48px !important; }
  #homeView .draw-area > small { position:static !important; display:block !important; margin:0 !important; line-height:1.35 !important; text-align:center !important; }
  #homeView.home-view > .home-bottomline {
    position:relative !important;
    inset:auto !important;
    flex:none !important;
    width:100% !important;
    margin:18px 0 0 !important;
    padding:10px 0 0 !important;
    z-index:5 !important;
  }
  #homeView.home-view > #tubeRig { z-index:3 !important; pointer-events:none !important; }
}

@media (min-width:721px) and (max-width:1050px) {
  #homeView.home-view { padding-left:5vw !important; padding-right:5vw !important; }
  #homeView.home-view > .home-intro { width:min(55%,590px) !important; }
  #homeView .topics { gap:9px !important; }
  #homeView .topics .topic { min-height:126px !important; padding:6px !important; }
  #homeView .topic-art { flex-basis:62px !important; height:62px !important; }
  #homeView .topics .topic strong { font-size:13px !important; }
  #homeView .topics .topic small { font-size:10px !important; }
}

/* v82: final homepage flow correction.
   The previous homepage filled a fixed-height app-main while the footer followed it,
   so a taller two-row topic grid could visually collide with the footer. Let the home
   view determine its own height and keep the footer in normal document flow. */
@media (min-width:721px) {
  .app-main:has(#homeView:not([hidden])) {
    height:auto !important;
    min-height:calc(100vh - 66px) !important;
    overflow:visible !important;
  }
  #homeView.home-view {
    height:auto !important;
    min-height:calc(100vh - 66px) !important;
    max-height:none !important;
    overflow:visible !important;
    padding-top:clamp(34px,6.5vh,58px) !important;
    padding-bottom:30px !important;
  }
  #homeView.home-view > .home-intro {
    margin-bottom:clamp(28px,4.5vh,42px) !important;
  }
  #homeView.home-view > .home-intro .eyebrow { margin-bottom:10px !important; }
  #homeView.home-view > .home-intro h1.hero-wordmark { font-size:clamp(56px,5.8vw,78px) !important; }
  #homeView.home-view > .home-intro .hero-subtitle { margin-bottom:8px !important; }
  #homeView.home-view > .home-intro .intro-copy {
    display:block !important;
    max-width:none !important;
    margin:0 !important;
    font-size:clamp(11px,.92vw,13px) !important;
    line-height:1.45 !important;
    white-space:normal !important;
  }
  #homeView.home-view > .home-intro .intro-line { display:inline !important; }
  #homeView.home-view > .home-intro .intro-line + .intro-line:before { content:"  ·  " !important; color:#b08d59 !important; }
  #homeView.home-view > .focus-block { margin-top:0 !important; }
  #homeView .topics { row-gap:12px !important; }
  #homeView .topics .topic { min-height:clamp(126px,16vh,146px) !important; }
  #homeView.home-view > .draw-area { margin-top:16px !important; }
  #homeView.home-view > .home-bottomline { margin-top:16px !important; }
}
@media (max-width:720px) {
  .app-main:has(#homeView:not([hidden])) {
    height:auto !important;
    min-height:calc(100vh - 58px) !important;
    overflow:visible !important;
  }
  #homeView.home-view {
    height:auto !important;
    min-height:calc(100vh - 58px) !important;
    max-height:none !important;
    overflow:visible !important;
    padding-bottom:22px !important;
  }
  #homeView.home-view > .home-intro .intro-copy {
    display:block !important;
    font-size:10px !important;
    line-height:1.4 !important;
    margin-top:4px !important;
  }
  #homeView.home-view > .home-intro .intro-line { display:inline !important; }
  #homeView.home-view > .home-intro .intro-line + .intro-line:before { content:"  ·  " !important; color:#b08d59 !important; }
  #homeView.home-view > .draw-area { margin-top:12px !important; }
  #homeView.home-view > .home-bottomline { margin-top:12px !important; }
}

/* v83: compact final pass for homepage and sign-card view only.
   Keep the interpretation/reading view untouched. */
@media (min-width:721px) {
  #homeView.home-view {
    padding-top:clamp(24px,4.2vh,38px) !important;
    padding-bottom:20px !important;
  }
  #homeView.home-view > .home-intro {
    margin-bottom:clamp(18px,2.8vh,26px) !important;
  }
  #homeView.home-view > .home-intro .eyebrow { margin-bottom:7px !important; }
  #homeView.home-view > .home-intro h1.hero-wordmark { font-size:clamp(52px,5.2vw,70px) !important; }
  #homeView.home-view > .home-intro .hero-subtitle { margin-bottom:5px !important; }
  #homeView.home-view > .home-intro .intro-copy {
    font-size:clamp(10px,.82vw,12px) !important;
    line-height:1.35 !important;
  }
  #homeView .topics { row-gap:9px !important; column-gap:10px !important; }
  #homeView .topics .topic { min-height:clamp(112px,13.5vh,128px) !important; }
  #homeView.home-view > .draw-area { margin-top:11px !important; gap:5px !important; }
  #homeView.home-view > .draw-area button#draw { min-height:44px !important; padding-block:10px !important; }
  #homeView.home-view > .home-bottomline { margin-top:10px !important; padding-top:6px !important; }
}
@media (max-width:720px) {
  #homeView.home-view { padding-top:5px !important; padding-bottom:14px !important; }
  #homeView.home-view > .home-intro { margin-bottom:12px !important; }
  #homeView.home-view > .home-intro .eyebrow { margin-bottom:5px !important; }
  #homeView.home-view > .home-intro h1.hero-wordmark { font-size:clamp(30px,8vw,42px) !important; }
  #homeView.home-view > .home-intro .hero-subtitle { margin-bottom:4px !important; }
  #homeView.home-view > .home-intro .intro-copy { font-size:9px !important; line-height:1.3 !important; }
  #homeView .topics { row-gap:7px !important; column-gap:7px !important; }
  #homeView .topics .topic { min-height:clamp(94px,13vh,112px) !important; }
  #homeView.home-view > .draw-area { margin-top:9px !important; gap:4px !important; }
  #homeView.home-view > .draw-area button#draw { min-height:42px !important; }
  #homeView.home-view > .home-bottomline { margin-top:8px !important; padding-top:5px !important; }
}
/* Sign page: remove the protruding back button, reduce the sign card modestly,
   and reclaim whitespace without changing the interpretation page. */
#resultView .view-topline { position:relative; }
#resultView #start { display:none !important; }
#resultView .view-topline .step-label { margin-inline:auto; }
#resultView .view-topline .tiny-note { text-align:right; }
#resultView .result-layout { gap:clamp(18px,3.6vw,54px) !important; }
#resultView .sign-display { max-height:570px !important; }
#resultView .drawn-sign-card {
  width:clamp(132px,15vw,194px) !important;
  height:min(51vh,365px) !important;
  min-height:220px !important;
  padding:17px 10px 12px !important;
}
#resultView .sign-art-frame { height:clamp(100px,22vh,164px) !important; margin-bottom:6px !important; }
#resultView .drawn-sign-card>span { margin-top:13px !important; margin-bottom:9px !important; }
#resultView .drawn-sign-card>i { margin-bottom:14px !important; }
#resultView .drawn-sign-card>b { font-size:clamp(36px,3.7vw,48px) !important; }
#resultView .result-view { gap:9px !important; }
@media (max-width:720px) {
  #resultView.result-view { padding:10px 12px 8px !important; gap:8px !important; }
  #resultView .view-topline { min-height:20px !important; }
  #resultView .view-topline .tiny-note { font-size:6px !important; }
  #resultView .result-layout { gap:12px !important; }
  #resultView .sign-display { max-height:none !important; }
  #resultView .drawn-sign-card {
    width:clamp(116px,36vw,160px) !important;
    height:min(43vh,300px) !important;
    min-height:190px !important;
    padding:13px 8px 10px !important;
  }
  #resultView .sign-art-frame { height:clamp(78px,16vh,116px) !important; margin-bottom:5px !important; }
  #resultView .drawn-sign-card>span { margin:9px 0 7px !important; }
  #resultView .drawn-sign-card>i { margin-bottom:10px !important; }
  #resultView .drawn-sign-card>b { font-size:34px !important; }
}


/* v84: final user-requested sizing pass.
   Enlarge only the homepage primary action and make the sign card the visual focus.
   The interpretation/reading view remains untouched. */
@media (min-width:721px) {
  #homeView.home-view > .draw-area button#draw {
    min-height:52px !important;
    padding:13px 34px !important;
    min-width:300px !important;
    font-size:15px !important;
    letter-spacing:.045em !important;
  }
}
@media (max-width:720px) {
  #homeView.home-view > .draw-area button#draw {
    min-height:48px !important;
    min-width:min(82vw,300px) !important;
    padding:12px 24px !important;
    font-size:14px !important;
  }
}
/* Sign-card enlargement: reclaim emphasis from surrounding whitespace, not the artwork. */
#resultView .result-layout { gap:clamp(16px,2.8vw,40px) !important; }
#resultView .sign-display { max-height:620px !important; }
#resultView .drawn-sign-card {
  width:clamp(150px,17vw,220px) !important;
  height:min(57vh,410px) !important;
  min-height:250px !important;
  padding:18px 11px 13px !important;
}
#resultView .sign-art-frame {
  height:clamp(112px,25vh,184px) !important;
  margin-bottom:7px !important;
}
#resultView .drawn-sign-card>b { font-size:clamp(38px,4vw,52px) !important; }
@media (max-width:720px) {
  #resultView .result-layout { gap:12px !important; }
  #resultView .sign-display { max-height:none !important; }
  #resultView .drawn-sign-card {
    width:clamp(128px,39vw,172px) !important;
    height:min(47vh,330px) !important;
    min-height:210px !important;
    padding:14px 8px 10px !important;
  }
  #resultView .sign-art-frame { height:clamp(88px,18vh,132px) !important; margin-bottom:5px !important; }
  #resultView .drawn-sign-card>b { font-size:36px !important; }
}

/* v85: fix the actual sign-card view and give Daily Sign actions a dedicated row. */
@media (min-width:721px) {
  #resultView.result-view {
    height:auto !important;
    min-height:calc(100vh - var(--header-height, 76px)) !important;
    grid-template-rows:auto auto auto !important;
    align-content:start !important;
    padding-bottom:18px !important;
  }
  #resultView .result-layout {
    grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr) !important;
    align-items:center !important;
    gap:clamp(22px,3vw,44px) !important;
  }
  #resultView .sign-display { max-height:none !important; }
  #resultView .drawn-sign-card {
    width:clamp(230px,19vw,280px) !important;
    height:min(64vh,470px) !important;
    min-height:340px !important;
    padding:19px 13px 14px !important;
  }
  #resultView .sign-art-frame {
    height:clamp(170px,29vh,225px) !important;
    margin-bottom:9px !important;
  }
  #resultView .drawn-sign-card .sign-card-brand { margin-bottom:10px !important; }
  #resultView .drawn-sign-card>span { margin:9px 0 7px !important; }
  #resultView .drawn-sign-card>i { margin-bottom:10px !important; }
  #resultView .drawn-sign-card>b { font-size:clamp(42px,3.5vw,54px) !important; }
  #resultView .drawn-sign-card>em { margin-top:4px !important; }
}
@media (max-width:720px) {
  #resultView .drawn-sign-card {
    width:clamp(150px,44vw,190px) !important;
    height:min(49vh,350px) !important;
    min-height:230px !important;
  }
  #resultView .sign-art-frame { height:clamp(105px,20vh,145px) !important; }
}

/* Daily Sign: avoid pinning the final action to the far page edge. */
#dailyView.daily-view {
  height:auto !important;
  min-height:calc(100vh - 76px) !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
  gap:clamp(10px,1.5vh,16px) !important;
  padding-bottom:14px !important;
}
#dailyView .daily-panel {
  height:auto !important;
  min-height:0 !important;
  align-items:center !important;
  padding-bottom:4px !important;
}
#dailyView .daily-content { justify-content:center !important; }
#dailyView .daily-actions {
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:4px !important;
}
#dailyView .daily-actions button {
  flex:0 1 auto !important;
  min-height:44px !important;
  padding:11px 18px !important;
  font-size:11px !important;
  white-space:nowrap !important;
}
#dailyView .daily-bottom {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:10px 18px !important;
  margin-top:4px !important;
  padding-top:10px !important;
}
#dailyView .daily-bottom>span { flex:1 1 280px !important; }
#dailyView .daily-bottom #dailyDrawOwn { margin-left:auto !important; }
@media (max-width:720px) {
  #dailyView.daily-view { padding:10px 12px 12px !important; gap:10px !important; }
  #dailyView .daily-panel { grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr) !important; gap:10px !important; }
  #dailyView .daily-actions { gap:6px !important; }
  #dailyView .daily-actions button { flex:1 1 100% !important; min-height:40px !important; padding:9px 10px !important; font-size:10px !important; }
  #dailyView .daily-bottom { align-items:flex-start !important; }
  #dailyView .daily-bottom>span { flex-basis:100% !important; }
  #dailyView .daily-bottom #dailyDrawOwn { margin-left:0 !important; }
}


/* v86: give the Daily Sign painting real visual priority. Keep the original art uncropped. */
#dailyView.daily-view {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
#dailyView .daily-panel {
  width: min(100%, 1180px) !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr) !important;
  gap: clamp(24px, 4vw, 64px) !important;
}
#dailyView .daily-art-side {
  width: 100%;
  min-width: 0;
}
#dailyView .daily-art-card {
  width: min(100%, 460px) !important;
  height: min(76vh, 660px) !important;
  min-height: 390px !important;
  padding: 13px !important;
}
#dailyView .daily-art-frame {
  min-height: 0;
}
#dailyView .daily-art-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}
#dailyView .daily-art-caption {
  font-size: 9px;
  padding: 10px 5px 4px;
}
@media (min-width: 721px) {
  #dailyView .daily-content { max-width: 560px; }
}
@media (max-width: 720px) {
  #dailyView.daily-view {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    grid-template-rows: auto auto auto !important;
    padding: 12px 14px 18px !important;
  }
  #dailyView .daily-panel {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }
  #dailyView .daily-art-side {
    width: 100%;
    justify-items: center;
  }
  #dailyView .daily-art-card {
    width: min(100%, 430px) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 9px !important;
    transform: none;
  }
  #dailyView .daily-art-frame {
    width: 100%;
    height: auto !important;
    aspect-ratio: 0.646 / 1;
    min-height: 0 !important;
  }
  #dailyView .daily-art-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
  }
  #dailyView .daily-art-caption {
    font-size: 8px;
    padding: 8px 3px 3px;
  }
  #dailyView .daily-content {
    width: 100%;
    max-width: 620px;
    gap: 10px !important;
  }
  #dailyView .daily-actions {
    flex-wrap: wrap;
    gap: 8px !important;
  }
}
@media (max-width: 390px) {
  #dailyView .daily-art-card { padding: 7px !important; }
  #dailyView .daily-art-caption { font-size: 7px; }
}


/* v87: result page — refine ONLY the left sign card; keep all right-side verse UI unchanged. */
#resultView .drawn-sign-card {
  padding: 8px 10px 8px !important;
  gap: 0 !important;
}
#resultView .drawn-sign-card .sign-card-brand {
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}
#resultView .drawn-sign-card .sign-art-frame {
  width: 100% !important;
  aspect-ratio: 0.646 / 1 !important;
  height: auto !important;
  margin: 0 0 5px !important;
  overflow: hidden !important;
}
#resultView .drawn-sign-card .sign-art-frame img,
#resultView .drawn-sign-card .sign-art-frame img.portrait-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
#resultView .drawn-sign-card > span {
  margin: 0 0 3px !important;
  line-height: 1 !important;
}
#resultView .drawn-sign-card > i {
  margin: 0 0 4px !important;
}
#resultView .drawn-sign-card > b {
  line-height: 1 !important;
}
#resultView .drawn-sign-card > em {
  margin-top: 3px !important;
  line-height: 1.25 !important;
}
#resultView .drawn-sign-card .sign-card-foot {
  margin-top: 5px !important;
  line-height: 1.2 !important;
}
@media (max-width: 720px) {
  #resultView .drawn-sign-card {
    padding: 9px 9px 7px !important;
  }
  #resultView .drawn-sign-card .sign-card-brand {
    margin-bottom: 4px !important;
  }
  #resultView .drawn-sign-card .sign-art-frame {
    margin-bottom: 4px !important;
  }
  #resultView .drawn-sign-card > span {
    margin-bottom: 3px !important;
  }
  #resultView .drawn-sign-card > i {
    margin-bottom: 4px !important;
  }
  #resultView .drawn-sign-card > em {
    margin-top: 2px !important;
  }
  #resultView .drawn-sign-card .sign-card-foot {
    margin-top: 4px !important;
  }
}

/* v90: visible theme-button redesign; preserve dimensions, grid, artwork and spacing. */
button.topic {
  position: relative !important;
  border: 1px solid rgba(177, 145, 83, .88) !important;
  border-radius: 10px !important;
  background: linear-gradient(155deg, rgba(255,253,246,.97) 0%, rgba(248,241,222,.96) 100%) !important;
  color: #294735 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.68), inset 0 -3px 0 rgba(185,154,97,.10), 0 3px 10px rgba(74,65,43,.07) !important;
  transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
button.topic::before {
  border-top: 1px solid rgba(185,154,97,.36) !important;
  pointer-events: none !important;
}
button.topic:hover:not(:disabled) {
  border-color: #9c7c43 !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), inset 0 -3px 0 rgba(185,154,97,.16), 0 5px 13px rgba(55,65,46,.12) !important;
  filter: brightness(1.025) saturate(1.03);
  transform: translateY(-2px) !important;
}
button.topic.selected,
button.topic[aria-pressed="true"] {
  border: 2px solid #a8874d !important;
  background: linear-gradient(155deg, #f8f5e9 0%, #e6eee0 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.76), 0 0 0 2px rgba(185,154,97,.18), 0 5px 13px rgba(55,75,54,.12) !important;
}
button.topic.love { --topic-accent: #b77c70; }
button.topic.career { --topic-accent: #6e8b72; }
button.topic.wealth { --topic-accent: #b08a42; }
button.topic.life { --topic-accent: #648e91; }
button.topic.growth { --topic-accent: #668b60; }
button.topic:focus-visible { outline: 2px solid #6f9279 !important; outline-offset: 3px !important; }


/* v96: subtle focus-grid alignment polish; preserve v90 topic card dimensions. */
@media (min-width: 721px) {
  #homeView .topics {
    width: min(100%, 1080px) !important;
    margin-left: max(0px, calc((100% - min(100%, 1080px)) / 2 - 10px)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }
}
@media (max-width: 720px) {
  #homeView .topics {
    column-gap: 9px !important;
    row-gap: 9px !important;
  }
}
/* Reduce only excess space after the topic grid, without changing card size. */
#homeView .topics {
  margin-bottom: 8px !important;
}