/* Shared requested additions. Existing PDF descriptions remain intact. */
.element-context{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0;color:#725b35;font-size:14px}
.element-context>div{display:flex;gap:7px;padding:4px 10px;background:#eee8da;border-radius:4px}
.element-context dt{font-weight:bold}.element-context dd{margin:0}

/* Both layouts: the actual role explanation belongs inside its PDF frame. */
#complement-pair .complement-card{aspect-ratio:auto;min-height:360px;padding:82px 50px 80px 90px}
#complement-pair .complement-kind{position:absolute;top:9%;left:14%;padding:3px 11px;border:1px solid color-mix(in srgb,var(--element) 38%,transparent);border-radius:3px;background:linear-gradient(110deg,#fffdf4f2,#fffdf4c7);color:var(--element);font-size:14.4px;line-height:1.6;letter-spacing:.5px;white-space:nowrap}
#complement-pair .function-card{background:transparent;border:0;padding:0;margin:0;text-align:center}
#complement-pair .function-card h3{font-size:24px;line-height:1.5;margin:0 0 20px;word-break:keep-all}
#complement-pair .function-card p{font-size:17px;line-height:1.9;margin:0;color:#536560;word-break:keep-all;overflow-wrap:anywhere}
#functions{display:none}
@media(min-width:681px) and (max-width:1000px){#complement-pair{flex-direction:column}#complement-pair .complement-card{width:100%}}

/* Both layouts: keep each guide detail directly beneath its label. */
.guide-detail h4{margin-bottom:0;line-height:1.35}
.guide-detail h4+p{margin-top:-2px;line-height:1.5}

/* Other sizing refinements remain mobile-only. */
@media(max-width:680px){
 .welcome-elements{width:80%;gap:5.6px;margin:24px auto}
 .element-tile{padding:10.4px 2.4px 9.6px;border-radius:17.6px 17.6px 4.8px 4.8px}
 .element-tile svg{width:28.8px;height:28.8px;margin-bottom:6.4px}
 .element-tile-name{font-size:16.8px}.element-tile-name small{font-size:8.8px;margin-left:3.2px}
 .element-tile>span{font-size:9.6px;margin-top:4.8px}
 .welcome-art.moon-scene figcaption{padding-left:0;padding-right:0;container-type:inline-size}
 .moon-scene figcaption span{font-size:min(15px,7.3cqw);white-space:nowrap;letter-spacing:-.3px}
 #store-link .button{display:block;position:relative;text-align:center;padding:20px 42px}
 #store-link .button span{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
 .result-head{padding:36px 0 24px}
 .result-head>.eyebrow{font-size:11px;margin-bottom:12px}
 .result-head>p:not(.eyebrow){font-size:13px;margin-top:14px}
 .result-actions{gap:8px 18px;margin-top:16px}
 .result-actions .text-link{font-size:12px;padding:8px 0;gap:8px}
 .result-nav{font-size:11.76px;gap:14px;padding:12px 14px}
 #chart-section h2{font-size:clamp(20px,5.7vw,24px);white-space:nowrap;letter-spacing:-.5px}
 #chart-section .text-link{font-size:12px;padding:7px 0}
 #chart-section .section-heading{gap:8px;margin-bottom:22px}
 #elements{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #elements .element-card{padding:12px 10px}
 #elements .element-symbol{gap:6px;font-size:24px}
 #elements .element-symbol svg{width:23px;height:23px}
 #elements .element-label{font-size:16px;margin:5px 0}
 #elements .element-count{font-size:22px;margin:7px 0}
 #elements .element-count small{font-size:10px}
 #elements .bar-track{margin-top:8px;height:3px}
 #animal-section{padding-top:30px;padding-bottom:30px}
 .animal-inner{gap:18px}
 #animal-section .animal-visual{min-height:0;width:210px;max-width:65%;height:220px}
 #animal-section .animal-visual img{max-height:220px}
 #animal-section .animal-copy{padding:0}
 #animal-section .eyebrow{font-size:12px;margin-bottom:12px}
 #animal-section .animal-pillar{font-size:14px;margin-bottom:8px}
 #animal-title{font-size:24px;line-height:1.5;margin-bottom:12px}
 #animal-section .keywords{font-size:14px;line-height:1.6;margin:10px 0}
 #animal-description{font-size:15px;line-height:1.75;white-space:normal}
 #animal-section .caption{font-size:11px;line-height:1.7;margin-top:16px}
 #complement-pair .complement-card{min-height:310px;padding:76px 10% 64px 22%}
 #complement-pair .complement-kind{left:15%;font-size:13.2px;padding:2px 9px}
 #complement-pair .function-card h3{font-size:18px;line-height:1.5;margin:0 0 16px}
 #complement-pair .function-card p{font-size:14px;line-height:1.8;margin:0;word-break:keep-all;overflow-wrap:anywhere}
 #routine-section .section-heading{gap:12px;margin-bottom:18px}
 #routine-section h2{font-size:25px}
 #routine-section .section-heading>p{font-size:12px;line-height:1.6}
 #routines{gap:8px}
 .routine{padding:12px;gap:9px;align-items:flex-start}
 .routine input{width:15px;height:15px;flex-shrink:0;margin:4px 0 0}
 .routine-number{font-size:10px;line-height:1.4;margin-bottom:4px}
 .routine h3{font-size:15px;line-height:1.5;margin-bottom:5px;letter-spacing:-.35px}
 .routine p{font-size:12px;line-height:1.65;margin:0}
 #routine-progress{font-size:12px;margin-top:14px}
 #recommend-section h2{font-size:clamp(20px,5.7vw,24px);letter-spacing:-.5px;white-space:nowrap}
 #recommend-section h2 br{display:none}
 .element-context{font-size:13px;gap:8px}
}