/* Homepage only. Module pages retain their own layout and saved data. */
:root{--home-paper:#f1e8d4;--home-ink:#542e1c;--home-line:#79543d;--home-header:78px;--hero-height:clamp(700px,calc(100svh - 78px),1040px);--home-font:"IWA Hand","IWA Cute Hand","Segoe Print","Bradley Hand","Comic Sans MS",cursive}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--home-header) + 25px)}
body{margin:0;min-width:0;background:var(--home-paper);color:var(--home-ink);font-family:var(--home-font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #8e5a28;outline-offset:6px;border-radius:5px}
.skip-link{position:fixed;top:-80px;left:24px;z-index:200;padding:12px 18px;background:#fff7df}
.skip-link:focus{top:12px}
#home-main{position:relative;overflow:hidden;background:transparent;isolation:isolate}
.home-hero{position:relative;height:var(--hero-height);isolation:isolate}
.hero-scene{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,calc(var(--hero-height) * 1.77683));aspect-ratio:1672/941;z-index:0}
.hero-art{display:block;width:100%;height:auto;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 79%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 95%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 79%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 95%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.home-hero:before{content:"";position:absolute;inset:-80px 0 0;z-index:-3;pointer-events:none;background:radial-gradient(ellipse at 0 35%,#f5d28d35,transparent 45%),radial-gradient(ellipse at 90% 30%,#e5ba7733,transparent 45%)}
.hero-heading{position:relative;z-index:2;max-width:1600px;margin:auto;padding:clamp(42px,4.4vw,80px) clamp(48px,5.5vw,106px) 0;pointer-events:none}
.hero-heading h1{margin:0;white-space:nowrap;font-size:clamp(29px,2.9vw,52px);font-weight:700;line-height:1.3;letter-spacing:-.06em;text-shadow:.25px .4px currentColor,-.2px 0 #542e1c90}
.scroll-invitation{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);min-width:180px;padding:11px 20px;display:flex;flex-direction:column;align-items:center;gap:7px;font-weight:700;font-size:15px;line-height:1.3;text-align:center;z-index:3;text-shadow:0 1px #fff7e3}
.scroll-invitation:before{content:"";position:absolute;inset:-5px -25px;z-index:-1;background:radial-gradient(ellipse,#f5ecd9dc 25%,#f5ecd985 45%,transparent 73%);filter:blur(6px)}
.scroll-invitation svg{width:30px;height:23px;animation:scroll-nudge 2.4s ease-in-out infinite}
@keyframes scroll-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.home-calendar-section{--calendar-art-top:clamp(96px,8vw,160px);position:relative;min-height:calc(var(--calendar-art-top) + 53vw + 90px);height:auto;padding-bottom:80px;isolation:isolate;scroll-margin-top:25px}
.home-calendar-section:before{content:"";position:absolute;z-index:-3;inset:-90px 0 0;pointer-events:none;background:radial-gradient(ellipse at 0 0,#e8be7950,transparent 42%),radial-gradient(ellipse at 100% 95%,#e0ac5e50,transparent 42%)}
.hanging-scene{position:absolute;z-index:0;top:var(--calendar-art-top);right:0;width:94%;aspect-ratio:1672/941}
.hanging-art{display:block;width:100%;height:auto;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 98%,transparent 100%),linear-gradient(to right,transparent 0,#000 24%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 98%,transparent 100%),linear-gradient(to right,transparent 0,#000 24%,#000 100%);mask-composite:intersect;-webkit-mask-composite:source-in}
.calendar-paper{width:44%;max-width:690px;margin-left:clamp(48px,5vw,100px);padding-top:calc(var(--calendar-art-top) + clamp(60px,6vw,140px));position:relative;z-index:1}
.calendar-paper:before{content:"";position:absolute;inset:100px -30px -20px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 45% 20%,#edc57866,transparent 68%);filter:blur(22px)}
.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 22px}
.calendar-heading h2{font-size:clamp(25px,2.35vw,39px);letter-spacing:-.055em;font-weight:700;line-height:1.2;margin:0;text-align:center}
.calendar-heading button{background:transparent;border:0;padding:8px;min-width:42px;min-height:42px;display:grid;place-items:center}
.calendar-heading button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.calendar-heading button:hover{color:#b16e27}
.writing-calendar{border-collapse:collapse;table-layout:fixed;width:100%;color:var(--home-ink);background:rgb(248 238 215 / .1);border:2.6px solid var(--home-line);transform:rotate(-.35deg);box-shadow:1px 0 0 #79543d44}
.writing-calendar th,.writing-calendar td{width:14.2857%;text-align:center;border:2.2px solid var(--home-line);font-weight:700;padding:0;position:relative}
.writing-calendar th{height:clamp(46px,4.2vw,65px);font-size:clamp(14px,1.25vw,19px);line-height:1}
.writing-calendar td{height:clamp(61px,5.2vw,84px);font-size:clamp(18px,1.55vw,25px)}
.writing-calendar td time{display:inline-grid;place-items:center;width:42px;height:42px;position:relative}
.writing-calendar [aria-current="date"] time:before{content:"";position:absolute;inset:-2px;border:2.8px solid #bf872c;border-radius:48% 52% 47% 53%;transform:rotate(-12deg);box-shadow:1px -1px 0 #bf872c55}
.calendar-today{display:block;margin:20px auto 0;border:0;border-bottom:1.6px solid #8b6348;background:transparent;font-weight:700;font-size:15px;padding:6px 2px;line-height:1.4}
.calendar-today:hover{color:#b16e27}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-invitation svg{animation:none}*{transition:none!important}}
html[data-iwa-reduced-motion="true"]{scroll-behavior:auto}
html[data-iwa-reduced-motion="true"] .scroll-invitation svg{animation:none}
html[data-iwa-reduced-motion="true"] *{transition:none!important}
[hidden]{display:none!important}
.home-welcome{font-family:"IWA Hand","IWA Cute Hand","Segoe Print","Microsoft YaHei",sans-serif;font-size:15px;color:#88694b;line-height:1.7;margin:15px 0 8px}
.continue-reading{display:inline-block;max-width:550px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;border-bottom:1px solid #b49a76;padding-bottom:4px;line-height:1.6;pointer-events:auto;color:#856544}
.continue-reading:hover{color:#b57824}
.art-hotspot{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;border-radius:45%;color:var(--home-ink)}
.art-hotspot:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,#f9dda752,transparent 70%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.art-hotspot:hover:before,.art-hotspot:focus-visible:before{opacity:1}
.art-hotspot>span{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 12px;background:#fff2dbea;color:#6b4b29;box-shadow:0 2px 14px #61442410;border-radius:5px;font:14px/1.5 "Microsoft YaHei",sans-serif;opacity:0;pointer-events:none;transition:opacity .2s}
.art-hotspot:hover>span,.art-hotspot:focus-visible>span{opacity:1}
.cup-hotspot{left:44.5%;top:62%;width:14%;height:17%}
.bread-hotspot{left:11%;top:59%;width:32%;height:25%}
.bag-hotspot{left:58%;top:29%;width:16%;height:44%}
.art-discovery{position:absolute;right:7%;top:50%;font:14px/1.8 "Microsoft YaHei",sans-serif;color:#947c5b;max-width:160px}
.cup-steam{position:absolute;left:49%;top:54%;height:10%;width:5%;display:none;pointer-events:none}
.cup-steam.is-running{display:flex;justify-content:space-around}
.cup-steam i{display:block;width:5px;height:70%;border-left:2px solid #f9f1dfcc;border-radius:50%;filter:blur(1px);animation:steam-rise 3.5s ease-in-out infinite}
.cup-steam i:nth-child(2){animation-delay:.8s}.cup-steam i:nth-child(3){animation-delay:1.6s}
@keyframes steam-rise{0%{opacity:0;transform:translateY(15px) rotate(-5deg)}45%{opacity:.9}100%{opacity:0;transform:translateY(-20px) rotate(8deg)}}
.calendar-grid-wrap{position:relative;transform:rotate(-.35deg)}
.calendar-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.calendar-lines path{fill:none;stroke:#79543d;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.calendar-grid-wrap .writing-calendar{border:0;box-shadow:none;transform:none;background:transparent}
.calendar-grid-wrap .writing-calendar th,.calendar-grid-wrap .writing-calendar td{border:0}
.writing-calendar td button,.calendar-day-content{width:100%;height:100%;min-height:61px;display:grid;place-items:center;position:relative;padding:0;background:transparent;border:0}
.writing-calendar td button{cursor:pointer}
.writing-calendar td button:hover{background:#e6c77935}
.writing-calendar td time{font-family:"IWA Hand","IWA Cute Hand","Segoe Print","Comic Sans MS",cursive;font-weight:700}
.calendar-sticker{position:absolute;width:76%;height:76%;object-fit:contain;left:12%;top:12%;filter:drop-shadow(0 2px 1px #6f491a18)}
.writing-calendar td.has-sticker time{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
.writing-calendar [aria-current="date"].has-sticker time:before{inset:0}
.sticker-drop-ready{background:#e1bc6544}
.sticker-shelf{margin-top:20px}
.sticker-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font:14px/1.6 "Microsoft YaHei",sans-serif;color:#8a6d47}
.sticker-heading button{padding:4px 0;border:0;border-bottom:1px solid #ab8e6a;background:transparent;font:12px "Microsoft YaHei",sans-serif}
.sticker-options{display:flex;gap:12px;align-items:center;justify-content:center;padding-top:15px;min-height:85px}
.sticker-option,.sticker-pending{width:64px;height:66px;position:relative;display:grid;place-items:center;flex-shrink:0}
.sticker-option{cursor:grab;background:transparent;border:1px solid transparent;border-radius:10px;padding:3px;transition:transform .2s}
.sticker-option:hover{transform:rotate(-5deg) translateY(-3px)}
.sticker-option:active{cursor:grabbing}
.sticker-option[aria-pressed="true"]{border:1px dashed #ac803c;background:#f1deb166}
.sticker-option img{width:64px;height:64px;max-width:none;max-height:none;object-fit:contain;pointer-events:none}
.sticker-used{position:absolute;right:0;top:0;color:#886a2f;font-size:14px}
.sticker-pending{width:57px;height:57px;border:1px dashed #b5a18166;border-radius:46% 54% 50% 48%;background:#e8dac033}
#sticker-status{font:12px/1.6 "Microsoft YaHei",sans-serif;color:#9e8969;text-align:center;margin:8px 0 0;min-height:20px}
.home-paper-dialog{position:fixed;inset:0;margin:auto;width:480px;max-width:calc(100vw - 80px);max-height:85vh;overflow:auto;border:1.5px solid #b69a74;border-radius:9px 14px 10px 8px;padding:42px;background:#f7efdd;color:#65472a;box-shadow:0 10px 70px #53330e26;font-family:"IWA Hand","IWA Cute Hand","Segoe Print","Microsoft YaHei",sans-serif;text-align:center}
.home-paper-dialog::backdrop{background:#4b361637;backdrop-filter:blur(5px)}
.home-paper-dialog h2{font-size:26px;margin:0 0 25px;line-height:1.5}
.home-paper-dialog p{font:14px/1.9 "Microsoft YaHei",sans-serif;color:#947750}
.home-dialog-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:27px;padding:0 7px}
.focus-durations,.focus-actions{display:flex;gap:12px;justify-content:center}
.focus-durations button,.focus-actions button{border:1px solid #c8b18a;background:#fff5e1;padding:9px 13px;border-radius:6px;font:14px "Microsoft YaHei",sans-serif;min-height:40px}
.focus-durations button[aria-pressed="true"],#focus-start{background:#8b6c43;color:#fff9ee;border-color:#8b6c43}
.focus-durations button:disabled{opacity:.55;cursor:default}
.home-paper-dialog .focus-clock{font:700 52px/1.2 "IWA Hand","IWA Cute Hand","Segoe Print",cursive;color:#634326;margin:28px 0 17px;font-variant-numeric:tabular-nums}
.focus-actions{margin-top:24px}
.home-progress-counts{display:flex;justify-content:space-around;margin:30px 0}
.home-progress-counts span{display:flex;flex-direction:column;font:14px/1.8 "Microsoft YaHei",sans-serif;color:#8b7250}
.home-progress-counts b{font:700 34px/1.5 "IWA Hand","IWA Cute Hand","Segoe Print",cursive;color:#6c4b27}
.continue-work{display:inline-block;padding:9px 0;border-bottom:1px solid #8b6c43;font:16px "Microsoft YaHei",sans-serif}
@media(prefers-reduced-motion:reduce){.cup-steam i{animation:none;opacity:.6}}
html[data-iwa-reduced-motion="true"] .cup-steam i{animation:none;opacity:.6}

@media(max-width:800px){:root{--home-header:118px}.hero-heading{padding:32px 25px 0}.hero-heading h1{white-space:normal;max-width:600px;font-size:30px}.home-calendar-section{min-height:900px}.calendar-paper{width:calc(100% - 64px);max-width:580px;margin:0 32px;padding-top:70px}.hanging-scene{opacity:.35;top:340px;width:100%;pointer-events:none}.sticker-options{gap:6px;flex-wrap:wrap}.home-welcome{max-width:65%}}
@media(max-width:530px){:root{--home-header:162px}.hero-heading h1{font-size:26px}.art-discovery{right:25px;top:72%;font-size:12px}.home-calendar-section{min-height:850px}.calendar-paper{width:calc(100% - 40px);margin:0 20px}.calendar-heading h2{font-size:26px}.writing-calendar th{font-size:12px}.writing-calendar td{height:62px}.calendar-paper:before{inset:50px -10px 0}.home-paper-dialog{padding:30px 22px;max-width:calc(100vw - 32px)}}

/* Match visible artwork area across silhouettes; the source PNGs remain unchanged. */
.sticker-option img,.calendar-sticker{transform:scale(var(--sticker-scale,1));transform-origin:center}
.sticker-options{min-height:101px;padding-block:20px 8px}
.sticker-option img[src$="/breakfast-burger.eb0f15b82edc.webp"],.calendar-sticker[src$="/breakfast-burger.eb0f15b82edc.webp"]{--sticker-scale:0.9}
.sticker-option img[src$="/cheeseburger.e593712e2db5.webp"],.calendar-sticker[src$="/cheeseburger.e593712e2db5.webp"]{--sticker-scale:0.91}
.sticker-option img[src$="/cherry-chocolate-cake.8af0dda3be19.webp"],.calendar-sticker[src$="/cherry-chocolate-cake.8af0dda3be19.webp"]{--sticker-scale:1.12}
.sticker-option img[src$="/chocolate-cup.1247ae708e5c.webp"],.calendar-sticker[src$="/chocolate-cup.1247ae708e5c.webp"]{--sticker-scale:1.1}
.sticker-option img[src$="/fig-tart.4e8ce5d73b74.webp"],.calendar-sticker[src$="/fig-tart.4e8ce5d73b74.webp"]{--sticker-scale:1.02}
.sticker-option img[src$="/lemon-tart.69e3715ba5cf.webp"],.calendar-sticker[src$="/lemon-tart.69e3715ba5cf.webp"]{--sticker-scale:1.03}
.sticker-option img[src$="/lime-soda.5ebcbd59c562.webp"],.calendar-sticker[src$="/lime-soda.5ebcbd59c562.webp"]{--sticker-scale:1.25}
.sticker-option img[src$="/matcha-frappe.65dd8fbc0547.webp"],.calendar-sticker[src$="/matcha-frappe.65dd8fbc0547.webp"]{--sticker-scale:1.21}
.sticker-option img[src$="/matcha-fruit-roll.fa28a3a8164b.webp"],.calendar-sticker[src$="/matcha-fruit-roll.fa28a3a8164b.webp"]{--sticker-scale:1.28}
.sticker-option img[src$="/matcha-gelato-latte.f327fce2737e.webp"],.calendar-sticker[src$="/matcha-gelato-latte.f327fce2737e.webp"]{--sticker-scale:1.28}
.sticker-option img[src$="/matcha-gelato.397967f24008.webp"],.calendar-sticker[src$="/matcha-gelato.397967f24008.webp"]{--sticker-scale:1.12}
.sticker-option img[src$="/matcha-pudding.1ea5fb0fbf03.webp"],.calendar-sticker[src$="/matcha-pudding.1ea5fb0fbf03.webp"]{--sticker-scale:1.14}
.sticker-option img[src$="/matcha-souffle.e535bd749715.webp"],.calendar-sticker[src$="/matcha-souffle.e535bd749715.webp"]{--sticker-scale:1.11}
.sticker-option img[src$="/matcha-tiramisu-latte.20d94af02371.webp"],.calendar-sticker[src$="/matcha-tiramisu-latte.20d94af02371.webp"]{--sticker-scale:1.16}
.sticker-option img[src$="/melon-tart.34aae856d7a6.webp"],.calendar-sticker[src$="/melon-tart.34aae856d7a6.webp"]{--sticker-scale:0.98}
.sticker-option img[src$="/peach-tart.1a5fba604075.webp"],.calendar-sticker[src$="/peach-tart.1a5fba604075.webp"]{--sticker-scale:1.03}
.sticker-option img[src$="/strawberry-chocolate-drink.e2d55328624f.webp"],.calendar-sticker[src$="/strawberry-chocolate-drink.e2d55328624f.webp"]{--sticker-scale:1.22}
.sticker-option img[src$="/strawberry-layer-cake.e8b182384a67.webp"],.calendar-sticker[src$="/strawberry-layer-cake.e8b182384a67.webp"]{--sticker-scale:0.95}
.sticker-option img[src$="/strawberry-tiramisu.06d917766843.webp"],.calendar-sticker[src$="/strawberry-tiramisu.06d917766843.webp"]{--sticker-scale:1.05}
.sticker-option img[src$="/strawberry-waffle.2d27ddd7888a.webp"],.calendar-sticker[src$="/strawberry-waffle.2d27ddd7888a.webp"]{--sticker-scale:1.06}
