:root{--ink:#33445a;--muted:#778596;--accent:#58788d;--soft:#e4edf2;background:#edf3f6}
body{background:radial-gradient(ellipse at top left,#fcf9ef 0,#edf3f6 65%)}.brand-icon{background:#d9e9ed;color:#577b90;font-size:35px}.themes{background:#e2e9ed}.themes button[aria-pressed=true]{color:#476d83}.settings{background:#ffffffb0;border-color:#dce5eb}.options button{border-color:#dfe7eb}.presets button{background:#e8eef2}.stepper{background:#eaf0f4}#status{background:#dcebee;color:#537584}.progress{background:#dfe7ed}header{margin-bottom:28px}.theme-bar{margin-bottom:24px}
.scene{height:360px;background:#d8e4eb;border-radius:22px;--frame-x:0%;--frame-y:0%}.winter-landscape{position:absolute;inset:0;background-image:url('./assets/winter-backgrounds.png');background-size:300% auto;background-position:0% 65%;background-repeat:no-repeat}.snowman .winter-landscape{background-position:50% 65%}.igloo .winter-landscape{background-position:100% 65%}.winter-landscape:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#17222b15,transparent 55%,#e9f5ff18)}
.winter-journey{position:absolute;inset:0;z-index:3;pointer-events:none}.winter-actor{position:absolute;width:clamp(190px,34%,300px);aspect-ratio:1;right:calc(3% + var(--p) * 56%);bottom:26px}.winter-frame{position:absolute;inset:0;background-size:400% 400%;background-position:var(--frame-x) var(--frame-y);background-repeat:no-repeat;background-image:url('./assets/motion-santa.png')}.snowman .winter-frame{background-image:url('./assets/motion-snowman.png')}.igloo .winter-frame{background-image:url('./assets/motion-igloo.png')}.snowman .winter-actor,.igloo .winter-actor{right:5%;width:clamp(200px,36%,320px);bottom:22px}
.snow-trail{position:absolute;left:14%;bottom:9%;width:75%;height:13%;transform:rotate(-6deg);background:radial-gradient(ellipse,#6b849625 0 30%,transparent 34%) 0 0/42px 18px repeat-x;mask-image:linear-gradient(90deg,transparent,#0005)}
.snowman-build,.igloo-build{display:none;position:absolute;left:10%;bottom:24px;width:clamp(140px,27%,240px);height:260px;z-index:2;overflow:visible}.snowman .snowman-build{display:block}.igloo .igloo-build{display:block;left:6%;width:clamp(180px,36%,300px);height:230px}.snow-base{transform-origin:110px 280px;transform:scale(var(--snow-base,.1))}.snow-middle{opacity:var(--snow-middle,0);transform-origin:110px 190px;transform:scale(var(--snow-middle,0))}.snow-head{opacity:var(--snow-head,0);transform-origin:110px 100px;transform:scale(var(--snow-head,0))}.snow-scarf{opacity:var(--snow-scarf,0)}.igloo-dome{transform-origin:150px 205px;transform:scaleY(var(--igloo-size,.2))}.igloo-door{opacity:var(--door-opacity,0)}
.scene-caption{z-index:5;top:14px;left:18px;border-radius:12px;background:#ffffffd9;padding:11px 16px;gap:6px;max-width:80%;box-shadow:0 2px 12px #17364a0a}.scene-caption strong{font-size:16px;color:#33445a}.scene-caption span{color:#738897;font-size:8px}.snow-flurry{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}.snow-flurry i{position:absolute;top:-10%;left:var(--x);width:var(--size);height:var(--size);border-radius:50%;background:#fff;opacity:0;animation:winter-snow var(--speed) linear infinite;animation-delay:var(--delay)}@keyframes winter-snow{10%,85%{opacity:.8}100%{transform:translate(38px,430px);opacity:0}}
.snow-flurry,.snow-trail{display:none}.running .snow-flurry,.running.santa .snow-trail{display:block}.calm .snow-flurry{display:none!important}
.story-art{position:absolute;display:none;aspect-ratio:1;background-size:400% 200%;background-repeat:no-repeat;border-radius:16px;background-color:#d8e3ea}.scene.story{background:linear-gradient(130deg,#d9e6ee,#f5f4ec);height:360px}.scene.story>.winter-landscape,.scene.story>.winter-journey,.scene.story>.snowman-build,.scene.story>.igloo-build,.scene.story>.snow-trail,.scene.story>.snow-flurry,.scene.story>.complete-badge{display:none}.story .story-art{display:block;height:100%;left:2%;top:0}.story .scene-caption{top:50%;left:auto;right:3%;width:35%;transform:translateY(-50%);z-index:6;gap:12px;padding:18px;max-width:none;background:#ffffffeb}.story .scene-caption strong{font-size:21px;line-height:1.5}#story-description{font-size:14px;line-height:1.9;margin:0}.story .scene-caption #story-next{font-size:11px;color:#778596;letter-spacing:0;line-height:1.7}#overtime-label{text-align:center;font-size:12px;color:#647f91;margin:-5px 0 16px;min-height:16px;font-variant-numeric:tabular-nums}
#story-preview{background:#e6eef3;border-radius:10px;padding:10px;margin-top:12px;font-size:12px;min-height:44px}.story-effects{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;border-radius:inherit}.story .story-effects,.preview-picture .story-effects{display:block}.story-effects i{position:absolute;left:var(--x);top:-10%;width:5px;height:5px;border-radius:50%;background:white;opacity:0;animation:winter-snow 5s linear infinite;animation-delay:var(--delay)}.story-effects[data-effect=sparkles] i{top:var(--y);width:12px;height:12px;background:#ffe6a9;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);animation:winter-star 2.4s ease-in-out infinite;animation-delay:var(--delay)}.story-effects[data-effect=steam] i{left:calc(22% + var(--x) * .2);top:70%;width:15px;height:30px;background:linear-gradient(transparent,#fff9,transparent);border:0;filter:blur(3px);animation:winter-steam 3s ease-out infinite;animation-delay:var(--delay)}.story-effects[data-effect=glow] i{top:80%;width:8px;height:8px;background:#ffd395;box-shadow:0 0 12px #ffb354;animation:winter-star 3s ease-in-out infinite;animation-delay:var(--delay)}@keyframes winter-star{50%{opacity:.7;transform:scale(1.3) rotate(25deg)}}@keyframes winter-steam{10%{opacity:.4}100%{transform:translate(8px,-70px) scale(2);opacity:0}}.story-paused .story-effects i{animation-play-state:paused}.calm .story-effects i{animation:none!important;opacity:0!important}
#story-dialog{width:550px;max-width:calc(100vw - 24px);padding:22px;max-height:94vh;overflow:auto}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;color:#778596}#preview-close{width:44px;height:44px;background:#e6eef3;border-radius:50%;font-size:22px}.preview-picture{position:relative;width:min(100%,340px);aspect-ratio:1;margin:auto;border-radius:18px;overflow:hidden}.preview-picture .story-art{display:block;inset:0;width:100%;height:100%}#preview-title{font-size:20px;margin:12px 0 4px;line-height:1.5}#preview-description{font-size:14px;line-height:1.8;margin:0 0 16px;min-height:50px}.preview-controls{display:flex;gap:8px}.preview-controls button{min-height:46px;padding:8px 14px;border-radius:10px;background:#e6eef3;font-size:13px}.preview-controls #preview-play{flex:1;background:#58788d;color:white}
@media(min-width:901px) and (max-width:1200px){.story .story-art{left:2%;height:auto;width:52%;top:50%;transform:translateY(-50%)}.story .scene-caption{right:2%;width:44%;padding:13px}.story .scene-caption strong{font-size:19px}#story-description{font-size:12px}}
@media(max-width:900px){.scene{height:340px}.winter-actor{width:32%}.snowman .winter-actor,.igloo .winter-actor{width:38%;right:4%}.scene-caption{max-width:88%}.snowman-build{left:13%;width:26%;height:240px}.igloo-build{left:7%;width:35%;height:210px}}
@media(max-width:600px){.scene{height:310px}.winter-actor{width:47%;bottom:35px;right:calc(1% + var(--p) * 50%)}.snowman .winter-actor,.igloo .winter-actor{width:54%;right:0%;bottom:32px}.snowman-build{left:2%;width:36%;height:205px;bottom:22px}.igloo .igloo-build{left:1%;width:44%;height:200px;bottom:15px}.scene-caption{top:12px;left:12px;max-width:92%;padding:9px 12px}.scene-caption strong{font-size:14px}.scene.story{height:425px}.story .story-art{height:300px;left:50%;transform:translateX(-50%)}.story .scene-caption{top:auto;bottom:0;left:0;right:0;width:100%;transform:none;padding:14px 18px;gap:4px;border-radius:0;max-width:none}.story .scene-caption strong{font-size:18px}#story-description{font-size:12px;line-height:1.7}.story .scene-caption #scene-kicker{font-size:8px}.story .scene-caption #story-next{font-size:10px}#time{font-size:88px}}
@media(prefers-reduced-motion:reduce){.snow-flurry{display:none!important}.story-effects i{animation:none!important;opacity:0!important}}
.story-reveal{animation:story-reveal .45s ease-out both}@keyframes story-reveal{from{opacity:0}to{opacity:1}}.story-paused .story-reveal{animation-play-state:paused}.calm .story-reveal{animation:none!important}@media(prefers-reduced-motion:reduce){.story-reveal{animation:none!important}}
.winter-frame{clip-path:inset(4%)}

/* サンタはトナカイとそり全体が入る横長の16コマ素材。反転しない。 */
.santa .winter-actor{width:clamp(260px,52%,460px);aspect-ratio:2;right:calc(2% + var(--p) * 42%);bottom:var(--flight-altitude,24%);transform:none}
@media(max-width:600px){.santa .winter-actor{width:78%;right:calc(1% + var(--p) * 20%);bottom:var(--flight-altitude,24%)}}

/* 夜空→降下→到着。背景の重なりと高度は同じ進行値で制御。 */
.flight-sky{display:none;position:absolute;inset:0;background:url('./assets/santa-flight-sky.png') center/cover no-repeat;pointer-events:none}
.santa .flight-sky{display:block;opacity:calc(1 - var(--landing,0))}
.scene.story>.flight-sky{display:none}
.running.santa .snow-trail{display:none}
.santa .winter-actor:after{content:"";position:absolute;left:83%;top:63%;width:38%;height:14px;z-index:-1;background:radial-gradient(ellipse,#ffeac3 0 18%,transparent 38%) 0 0/25px 14px repeat-x;filter:drop-shadow(0 0 5px #ffe2aa);opacity:calc((1 - var(--landing,0)) * .65);mask-image:linear-gradient(90deg,#000,transparent)}

/* 水平に滑空。雲と流れ星の位置は経過時間で更新し、一時停止で止まる。 */
.santa .winter-actor:after{content:none}
.santa .snow-flurry{display:none!important}
.flight-weather{display:none;position:absolute;inset:0;overflow:hidden;z-index:2;pointer-events:none;opacity:calc(1 - var(--landing,0))}
.santa .flight-weather{display:block}
.scene.story>.flight-weather{display:none}
.flight-cloud{position:absolute;width:65%;height:48px;background:radial-gradient(ellipse at 24% 50%,#dce8fa70 0,transparent 58%),radial-gradient(ellipse at 58% 65%,#dee9f975 0,transparent 55%),radial-gradient(ellipse at 78% 46%,#b7cfe755 0,transparent 56%);filter:blur(8px);border-radius:50%;pointer-events:none}
.cloud-far{left:var(--cloud-far-x,-5%);top:30%;opacity:.45;transform:scaleY(.55)}
.cloud-near{left:var(--cloud-near-x,65%);top:73%;width:75%;height:70px;opacity:.55;filter:blur(11px)}
.shooting-star{position:absolute;left:var(--meteor-x,86%);top:var(--meteor-y,16%);width:clamp(65px,18%,130px);height:2px;background:linear-gradient(90deg,#fff9e7,#deedffb0 20%,transparent);transform:rotate(-25deg);transform-origin:left center;opacity:var(--meteor-opacity,0);filter:drop-shadow(0 0 4px #e3efff)}
.shooting-star:before{content:"";position:absolute;left:0;top:-1px;width:4px;height:4px;border-radius:50%;background:#fff8e5}
.calm .flight-weather{display:none}@media(prefers-reduced-motion:reduce){.flight-weather{display:none!important}}