:root{--wine:#b51517;--ink:#612615;--gold:#b56b11;--cream:#fff4df;--muted:#80583b}
.actions[hidden]{display:none}
body{background:#fae7ce}header{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0}main{width:100%;max-width:none;padding:0 0 24px}.calendar-art{position:relative;isolation:isolate}.calendar-art>picture{display:block}.calendar-art>picture>img{display:block;width:100%;height:auto}.calendar-art .grid{position:absolute;left:27.5%;top:28%;width:54.2%;height:48%;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:0}.calendar-art .door{padding:0;min-height:0;border-radius:35% 35% 44% 44%;color:#fff5d5;transition:background .2s,box-shadow .2s,transform .2s}.calendar-art .door .heart{height:100%;aspect-ratio:auto;filter:none}.calendar-art .door svg,.calendar-art .door .number,.calendar-art .door-label{display:none}.calendar-art .door:hover{transform:scale(1.04);background:#fff2c229;box-shadow:inset 0 0 0 2px #fff1b5cc}.calendar-art .door:focus-visible{outline:3px solid #fff5d3;outline-offset:-6px;background:#fff8df33}.calendar-art .door.done:after{content:'✓';position:absolute;right:10%;top:5%;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#fff8e8;color:#a21516;box-shadow:0 1px 4px #54251c66;font-weight:bold}.calendar-art .door[aria-disabled=true]{opacity:1;background:#582a1750}.legend{margin:24px 20px 0}.progress,.bottom{margin-left:24px;margin-right:24px}.progress{background:#e5c9a4}.bottom{padding-top:12px}.legend,.bottom{color:#774727}footer{border-color:#dfbd90;margin-top:0;max-width:1444px}dialog{background:#fff6e8;border-color:#dcaf65}dialog::backdrop{background:#3d1b13b8}.option,.check{border-color:#dec299}.option:has(input:checked),.check:has(input:checked){background:#ffe6bd;border-color:#c9832f}.feedback{background:#ffebca;border-color:#dc8616}.badge{color:#ad2017}.action{background:#b51517;border-color:#b51517}.secondary{background:none;color:#b51517}.mobile-instruction{display:none}
@media(max-width:680px){.calendar-art .grid{position:static;width:auto;height:auto;margin:0 14px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:18px 12px;padding:0 0 26px}.calendar-art .door{border-radius:0;align-self:start;background:none}.calendar-art .door .heart{width:100%;height:auto;aspect-ratio:134/126;background-image:url('design-desktop-v1.webp');background-size:1113.43284% 836.50794%;background-position:var(--crop-x) var(--crop-y);border-radius:18%;overflow:hidden}.calendar-art .door-label{display:block;font-size:14px;color:#692c1b;margin-top:9px;min-height:0}.calendar-art .door:hover{transform:translateY(-3px);box-shadow:none;background:none}.calendar-art .door:focus-visible{outline:3px solid #b51517;outline-offset:4px;background:none}.calendar-art .door.done:after{top:3%;right:6%}.calendar-art .door[aria-disabled=true]{background:none}.calendar-art .door[aria-disabled=true] .heart{opacity:.42}.calendar-art .topic-link{display:none}.mobile-instruction{display:block;text-align:center;font-size:15px;margin:20px 16px;color:#6f301c}.calendar-art{background:#ffefda}.legend{margin-top:20px}.dialog-inner{padding:24px}}
@media(prefers-reduced-motion:reduce){.calendar-art .door{transition:none}}

.calendar-art .door:not(:disabled){background:linear-gradient(145deg,#ffe9a51c 0%,#fff4d40a 48%,#9c45131c 100%)}
.calendar-art .door:not(:disabled):hover{background:linear-gradient(145deg,#fff0bd38 0%,#fff4d418 48%,#9c45132b 100%)}

@media(max-width:680px){
  .calendar-art .door:not(:disabled){background:none}
  .calendar-art .door:not(:disabled):hover{background:none}
  .calendar-art .door:not(:disabled) .heart{
    background-image:linear-gradient(145deg,#ffe9a54a 0%,#fff4d410 48%,#9c451345 100%),url('design-desktop-v1.webp');
    background-size:100% 100%,921% 680%;
    background-position:center,var(--crop-x) var(--crop-y);
  }

  }

.calendar-art .topic-link{position:absolute;z-index:3;left:20.8%;top:85%;width:6.2%;height:9.3%;border-radius:50%;transition:background .2s,box-shadow .2s}
.calendar-art .topic-link:hover{background:#fff2c229;box-shadow:inset 0 0 0 2px #fff1b5cc}
.calendar-art .topic-link:focus-visible{outline:3px solid #fff5d3;outline-offset:2px;background:#fff8df33}
@media(min-width:681px){.calendar-art .grid{left:27.9%;top:32.8%;width:67%;height:59.3%}.calendar-art .topic-link{left:1.2%;top:87%;width:5%;height:7%}}
@media(max-width:680px){.calendar-art .door .heart{background-image:linear-gradient(145deg,#ffe9a54a 0%,#fff4d410 48%,#9c451345 100%),url('design-desktop-v1.webp');background-size:100% 100%,921% 680%;background-position:center,var(--crop-x) var(--crop-y)}}
html,body{background:#fff}
.calendar-art{background:#fff4df}
.tutorial-link{width:min(100% - 36px,410px);min-height:70px;margin:0 auto 18px;padding:10px 16px;display:flex;align-items:center;gap:14px;border:1px solid #eadfd5;border-radius:12px;background:#fffaf2;color:#612615;text-align:left;text-decoration:none;box-shadow:0 3px 12px #54251c0d;transition:border-color .18s,box-shadow .18s,transform .18s}
.tutorial-link[hidden]{display:none}
.tutorial-link:hover{border-color:#b51517;box-shadow:0 6px 18px #54251c1a;transform:translateY(-2px)}
.tutorial-link:focus-visible{outline:3px solid #b51517;outline-offset:3px}
.tutorial-link-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;background:#f5e7db;color:#a52a21;font:700 21px Georgia,serif}
.tutorial-link-copy{display:grid;gap:4px;flex:1}
.tutorial-link-copy strong{font:600 15px Georgia,serif}
.tutorial-link-copy>span{color:#80583b;font-size:12px;line-height:1.35}
.tutorial-link-arrow{color:#a52a21;font-size:22px;transition:transform .18s}
.tutorial-link:hover .tutorial-link-arrow{transform:translateX(3px)}
.tutorial-link[hidden],.tutorial-badge-link[hidden]{display:none!important}
.tutorial-badge-link{position:absolute;z-index:4;top:9.5%;right:1.6%;width:17.2%;height:22%;display:block;border-radius:50%;background:transparent;cursor:pointer}
.tutorial-badge-link:focus-visible{outline:3px solid #b51517;outline-offset:3px}
.tutorial-dialog{width:min(920px,calc(100% - 28px));height:min(88dvh,900px);max-width:none;max-height:88dvh;padding:0;border:1px solid #d6bea0;border-radius:16px;background:#fff;color:#612615;box-shadow:0 25px 100px #2c151b55;overflow:hidden}
.tutorial-dialog::backdrop{background:#24131bad;backdrop-filter:blur(4px)}
.tutorial-dialog-bar{height:58px;padding:0 14px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #eadfd5;background:#fffaf2}
.tutorial-dialog-bar h2{margin:0;font:600 16px/1.3 Georgia,serif}
.tutorial-dialog-close{width:38px;height:38px;flex:0 0 38px;border:1px solid #d9cbbb;border-radius:50%;background:transparent;color:#612615;font-size:25px;line-height:1}
.tutorial-dialog-content{display:block;width:100%;height:calc(100% - 58px);overflow:auto;background:#fff}
.app-update-controls{display:grid;justify-items:center;gap:6px;margin:18px auto 0}
.app-update-controls .action{min-height:40px;padding:8px 18px;font-size:13px}
.app-update-controls .note{min-height:1.4em;margin:0}
.app-update-controls button:disabled{opacity:.65;cursor:wait}
@media(max-width:680px){.calendar-art>picture{position:relative}.tutorial-badge-link{top:52%;right:2%;width:17%;height:42%}.tutorial-dialog{width:calc(100% - 16px);height:92dvh;max-height:92dvh;border-radius:12px}.tutorial-dialog-bar{height:52px;padding-left:14px}.tutorial-dialog-bar h2{font-size:14px}.tutorial-dialog-content{height:calc(100% - 52px)}}
@media(min-width:681px){.tutorial-link{display:none}}
@media(max-width:440px){.tutorial-link{min-height:64px;margin-bottom:14px;padding:9px 12px;gap:10px}.tutorial-link-icon{width:34px;height:34px;flex-basis:34px}.tutorial-link-copy strong{font-size:14px}.tutorial-link-copy>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.tutorial-link,.tutorial-link-arrow{transition:none}}
.theme-guide{width:100%;max-width:none;margin:clamp(30px,5vw,64px) auto 34px;padding:0 clamp(18px,2.75vw,44px);color:#612615}
.theme-guide h2{margin:0;text-align:center;font:400 clamp(1.8rem,3.5vw,2.5rem)/1.2 Georgia,serif}
.theme-guide-intro{max-width:680px;margin:12px auto 28px;text-align:center;color:#774727}
.theme-guide-list{display:grid;gap:18px}
.theme-way{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(20px,4vw,48px);min-height:260px;padding:clamp(18px,2vw,26px);border:1px solid #dfbd90;border-radius:18px;background:#fff6e8}
.theme-copy{grid-column:1;grid-row:1}
.theme-way:nth-child(even) .theme-copy{grid-column:2}
.theme-way h3{margin:0;color:#8f2b22;font:600 clamp(1.4rem,2.4vw,1.8rem) Georgia,serif}
.theme-way p{margin:12px 0 0;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.7}
.theme-way a{display:inline-block;margin-top:16px;color:#8f2b22;font-weight:650;text-underline-offset:3px}
.theme-illustration{grid-column:2;grid-row:1;display:block;width:100%;height:100%;min-height:200px;max-height:270px;border-radius:13px}
.theme-way:nth-child(even) .theme-illustration{grid-column:1}
.art-wash{fill:#f9e6ca}.art-line,.art-spark,.art-stem,.art-face{fill:none;stroke-linecap:round;stroke-linejoin:round}.art-line{stroke:#b51517;stroke-width:7}.art-heart{fill:#df6326;stroke:#a82e21;stroke-width:4;stroke-linejoin:round}.art-spark{stroke:#c17b21;stroke-width:5}.art-stem{stroke:#386449;stroke-width:8}.art-bloom{fill:#d97623;stroke:#9e3922;stroke-width:3}.art-person{fill:#df6326;stroke:#8f2b22;stroke-width:5}.art-sun{fill:#ffd166;stroke:#d88a19;stroke-width:5}.art-face{stroke:#612615;stroke-width:6}.art-bubble{fill:#fff8ed;stroke:#b51517;stroke-width:5;stroke-linejoin:round}.art-bubble-alt{fill:#ffdfbb;stroke:#cf8124;stroke-width:5;stroke-linejoin:round}
@media(max-width:680px){.theme-guide{margin:24px auto;padding:0 16px}.theme-guide-intro{margin-bottom:18px}.theme-guide-list{gap:12px}.theme-way{grid-template-columns:1fr;gap:14px;min-height:0;padding:16px}.theme-copy,.theme-way:nth-child(even) .theme-copy{grid-column:1;grid-row:1}.theme-illustration,.theme-way:nth-child(even) .theme-illustration{grid-column:1;grid-row:2;min-height:170px;max-height:220px}.theme-way:nth-child(even) .theme-copy{grid-row:2}.theme-way:nth-child(even) .theme-illustration{grid-row:1}}
#modal .dialog-top{position:sticky;top:0;z-index:20;margin:-35px -35px 12px;padding:12px 35px;background:#fff6e8;border-bottom:1px solid #ead9bf}
@media(max-width:680px){#modal .dialog-top{margin:-24px -24px 12px;padding:10px 24px}}
.door-widget header{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
