/* Softer contrast and roomier live controls, without changing the embed size. */
.yearly-frame{opacity:.48}
.yearly-interior{right:5%;background:#191919;color:#dedad6}
.yearly-header{gap:14px;padding-right:4px}
.yearly-header h1{color:#d6c9ac;font-size:clamp(24px,3.3cqw,36px)}
.yearly-header nav{flex:none}.yearly-header nav button{font-size:16px;color:#cec6d8}
.yearly-header nav button[aria-pressed=true]{background:#aaa0b8;border-color:#aaa0b8;color:#211e27}
.yearly-tools{flex:none;gap:14px}.yearly-tools .pixel-icon{flex:none;display:grid;place-items:center;overflow:visible}
.yearly-tools .pixel-icon img{display:block;width:100%;height:100%;object-fit:contain}
.yearly-tools .pixel-icon[aria-pressed=true]{outline-color:#a69abb}
.yearly-body h2{color:#dedad6}
.yearly-body .eyebrow,.yearly-body .quiet{font-size:15px;color:#b8afc3}
.setup-home>div>p:not(.eyebrow){font-size:18px;color:#bdb7c3}
.setup-home .setup-choice{background:#28232e;border-color:#665e70;color:#d8d3dd}
.setup-home .setup-choice strong{color:#d6c9ac;font-size:23px}
.setup-home .setup-choice span{font-size:16px;line-height:1.4}
.setup-home-footer button{font-size:16px;color:#c6bcd4}
.period-bar h2{font-size:clamp(17px,2cqw,23px)}
.yearly-body .period-bar button,.month-badge{color:#d6c9ac}
.overview-grid .overview-month{color:#d8d3dd}
.overview-grid .current-month{border-color:#a69abb;background:#a69abb16;color:#d3c7e2}
.overview-label{font-size:clamp(13px,1.6cqw,18px)}
.overview-name{font-size:clamp(11px,1.25cqw,14px)}
.month-explanation h3{color:#d6c9ac}
.month-summary{font-size:clamp(16px,1.9cqw,21px);color:#d8d1df}
.meaning-pages ul{font-size:clamp(15px,1.8cqw,20px)}
.meaning-footer,.meaning-footer button,.month-card span,.month-badge{font-size:14px}
.yearly-shell button:focus-visible{outline-color:#b9a8ce}
dialog:not(.widget-menu) .year-draw-copy,dialog:not(.widget-menu) .year-reversals,dialog:not(.widget-menu) .storage-copy{font-size:16px}
@container(max-width:760px){.yearly-header{gap:9px}.yearly-header nav button{font-size:14px;padding:7px}.yearly-header h1{font-size:25px}.yearly-tools{gap:9px}.setup-home .setup-choice strong{font-size:20px}.setup-home .setup-choice span,.setup-home>div>p:not(.eyebrow){font-size:15px}.setup-home-footer button,.yearly-body .quiet,.yearly-body .eyebrow{font-size:13px}.setup-home .setup-choice{padding:12px;gap:8px}.setup-home .setup-choices{margin:8px 0}}
@container(max-height:440px){.setup-home{gap:3px}.setup-home .setup-choice .choice-icon{width:42px;height:42px}.setup-home .setup-choice{padding:8px}.setup-home .setup-choice strong{font-size:18px}.setup-home .setup-choice span{font-size:13px}.setup-home>div>p:not(.eyebrow){margin:6px 0}.setup-home .eyebrow{margin-bottom:5px}.setup-home .setup-choices{margin:6px 0}.overview-name{font-size:11px}.overview-label{font-size:13px}}


/* Let the shuffle circle the draw window without covering its controls. */
.year-draw:has(.year-shuffle-stage[aria-label]){position:relative;isolation:isolate;height:clamp(320px,65dvh,480px)}
.year-draw .year-shuffle-stage[aria-label]{position:absolute;inset:0;height:100%;z-index:-1;pointer-events:none}
.year-draw:has(.year-shuffle-stage[aria-label])>.back-button{position:relative;z-index:30}
.year-draw:has(.year-shuffle-stage[aria-label])>.year-draw-copy,.year-draw:has(.year-shuffle-stage[aria-label])>.year-draw-actions,.year-draw:has(.year-shuffle-stage[aria-label])>.storage-copy{position:absolute;left:50%;transform:translateX(-50%);z-index:30;margin:0;text-align:center}
.year-draw:has(.year-shuffle-stage[aria-label])>.year-draw-copy{top:42%;width:50%;color:#e0d8e7;background:#251c3680;padding:6px}
.year-draw:has(.year-shuffle-stage[aria-label])>.year-draw-actions{top:55%;width:55%}
.year-draw:has(.year-shuffle-stage[aria-label])>.storage-copy{top:69%;width:48%;color:#d0c8d7;background:#251c3680;padding:6px;font-size:12px}

.year-motion-card{will-change:transform;backface-visibility:hidden}