@font-face{font-family:"Great Vibes";src:url('./assets/great-vibes.woff2') format('woff2');font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url('./assets/cormorant.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url('./assets/nunito.woff2') format('woff2');font-style:normal;font-weight:400 600;font-display:swap}
:root{--color-ink:#630c33;--color-rose:#9b3158;--color-blush:#f5d2d1;--color-porcelain:#fff1ed;--color-gold:#ad753e;--font-display:"Great Vibes",cursive;--font-heading:"Cormorant Garamond",Georgia,serif;--font-body:"Nunito Sans",system-ui,sans-serif;--ease-out:cubic-bezier(.16,1,.3,1);--space-sm:8px;--space-md:16px;--space-lg:24px;--radius-surface:16px;font-family:var(--font-body);color:var(--color-ink);background:var(--color-blush);font-size:16px;color-scheme:light;scrollbar-color:#ba7188 #f5d2d1}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--color-ink);outline-offset:5px}::selection{background:#9b3158;color:#fff1ed}a{color:var(--color-ink);text-underline-offset:4px}svg{width:24px;height:24px;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}
.world{position:fixed;inset:0;z-index:-2;background:#f5d2d1 url('./assets/garden.png') center 54%/cover no-repeat}.world::after{content:"";position:absolute;inset:0;background:rgba(246,208,212,.32)}
.palace{position:relative;isolation:isolate;width:min(100%,520px);min-height:100svh;margin:0 auto;background:#f5d2d1 url('./assets/garden.png') center top/100% 100% no-repeat;overflow:hidden;overflow:clip;padding: max(20px,env(safe-area-inset-top)) 20px max(26px,env(safe-area-inset-bottom)) 46px}
.garden-light{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(255,228,225,.14),rgba(255,229,232,.04) 65%,rgba(245,210,209,.2));pointer-events:none}
.home{position:relative;z-index:2;width:100%;max-width:420px;margin:auto}.masthead{text-align:center;position:relative;padding-top:4px}.crown{width:35px;height:27px;display:block;margin:0 auto -2px}.masthead h1{font:400 clamp(88px,25vw,142px)/1.17 var(--font-display);margin:0 0 -8px;letter-spacing:0;color:#861d43;text-shadow:0 1px 0 #fff0cb,1px 2px 0 #c99662,0 4px 6px rgba(100,22,49,.13)}
.ornament{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto;max-width:175px;height:22px}.ornament span{height:1px;flex:1;background:var(--color-gold)}.ornament svg{width:18px;height:18px}.greeting{font:600 clamp(23px,6.5vw,31px)/1.15 var(--font-heading);margin:7px 0 22px;text-shadow:0 1px 4px #fff4ed}
.settings-button{position:absolute;z-index:8;top:max(20px,env(safe-area-inset-top));right:16px;display:grid;place-items:center;width:44px;height:46px;border:2px solid #bd864e;border-radius:42% 42% 46% 46%;background:#fbe2dc;box-shadow:0 3px 7px rgba(101,47,37,.15)}.settings-button svg{width:23px;height:23px;color:#8b3854}
.portals{display:grid;gap:6px;justify-items:center}.portal{display:block;position:relative;border:0;padding:0;background:transparent;isolation:isolate;transition:transform 220ms var(--ease-out);border-radius:46% 46% 9% 9%}.portal-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:-1}.portal--main{width:87%;aspect-ratio: .78;filter:drop-shadow(0 7px 5px rgba(96,39,43,.15));margin-right:4%}.portal-content{position:absolute;inset:26% 7% 8%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}.storybook{width:75%;height:auto;aspect-ratio:1.5;object-fit:contain;flex-shrink:1;min-height:0;margin-bottom:2px}.portal-title{font:600 clamp(30px,8.7vw,44px)/1.07 var(--font-heading);white-space:nowrap;text-shadow:0 1px 0 #fff4ed}.example-badge{display:flex;align-items:center;gap:5px;background:#9b3158;color:#fff2e8;border:1px solid #d09a55;border-radius:30px;box-shadow:0 2px 4px #9d6b6340;padding:5px 14px;font:600 16px/1.15 var(--font-heading);margin-top:2px}.example-badge svg{width:13px;height:13px}.portal--main:active{transform:scale(.97)}.portal-glint{position:absolute;left:48%;top:9%;width:5px;height:5px;background:#fff8d9;transform:rotate(45deg);opacity:.5;animation:jewel-glint 6s ease-in-out infinite;pointer-events:none}
.future-portals{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;margin-top:4px}.portal--future{width:100%;aspect-ratio:.72;opacity:1;filter:drop-shadow(0 5px 4px rgba(96,39,43,.12))}.portal--future .portal-content{inset:32% 7% 10%;gap:14px}.future-icon{width:42px;height:42px;filter:drop-shadow(0 2px 1px #bc837866)}.portal--future .portal-title{font-size:clamp(20px,5.4vw,28px)}
.home-footer{text-align:center;margin:22px -10px 0}.home-footer p{font:600 17px/1.4 var(--font-heading);margin:8px 0 0;text-shadow:0 1px 4px #fff1ed}.home-footer .ornament{max-width:130px}
.rose-layer{position:absolute;inset:0;z-index:3;pointer-events:none}.rose-vine{position:absolute;width:44%;height:79%;object-fit:fill;left:-12%;top:-4%;transform-origin:40% 90%;animation:rose-sway 9s ease-in-out infinite alternate}.rose-vine--two{left:-12%;top:41%;height:69%;width:45%;animation-delay:-4s;transform-origin:40% 20%}
.flying-things{position:absolute;inset:0;z-index:5;pointer-events:none}.butterfly{position:absolute;width:57px;height:44px;left:7%;top:24%;animation:fly-one 22s ease-in-out infinite}.butterfly--two{width:36px;height:29px;left:79%;top:9%;animation:fly-two 29s ease-in-out infinite;animation-delay:-9s}.butterfly--three{width:42px;height:33px;left:12%;top:71%;animation:fly-three 27s ease-in-out infinite;animation-delay:-12s}.wings{position:relative;width:100%;height:100%;transform:rotate(-25deg);perspective:180px}.wing{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%}.wing--left{clip-path:inset(0 50% 0 0);animation:wing-left .6s ease-in-out infinite alternate}.wing--right{clip-path:inset(0 0 0 50%);animation:wing-right .6s ease-in-out infinite alternate}.butterfly--two .wing{animation-duration:.44s}.butterfly--three .wing{animation-duration:.7s}#magic{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
.notice{position:fixed;z-index:15;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(90%,440px);background:var(--color-porcelain);border:1px solid #ba834b;border-radius:var(--radius-surface);padding:18px 16px 18px 20px;display:flex;align-items:flex-start;gap:8px}.notice strong{font:600 25px/1.1 var(--font-heading)}.notice p{font-size:15px;line-height:1.45;margin:8px 0 0}.notice button,.icon-button{display:grid;place-items:center;background:transparent;border:0;width:44px;height:44px;flex:0 0 44px;border-radius:50%;padding:10px}.notice button:hover,.icon-button:hover{background:#f5d2d1}
dialog{color:var(--color-ink);background:var(--color-porcelain);border:1px solid #bf8c53;border-radius:var(--radius-surface);padding:24px;width:min(calc(100% - 32px),420px);max-height:calc(100svh - 48px);box-shadow:none}dialog::backdrop{background:rgba(58,24,47,.45)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.dialog-heading h2{font:600 30px/1.1 var(--font-heading);margin:0}dialog p{font-size:16px;line-height:1.55}dialog h3{font:600 24px/1.2 var(--font-heading);margin:0}.motion-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;cursor:pointer}.motion-setting small{display:block;font-size:14px;margin-top:4px}.motion-setting input{width:26px;height:26px;flex-shrink:0;accent-color:#9b3158;cursor:pointer}.settings-note,.offline-note{font-size:14px!important}.settings-divider{height:1px;background:#d9b3a7;margin:24px 0}.text-button{padding:10px 0;min-height:44px;border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:14px}.primary-button{display:block;padding:12px 20px;border:1px solid #ad753e;border-radius:10px;color:#fff1ed;background:#9b3158;margin-top:12px}.version{font-size:13px!important;margin-bottom:0}.noscript{position:fixed;bottom:0;background:#fff1ed;padding:10px;z-index:30}
html[data-motion="off"] .rose-vine,html[data-motion="off"] .butterfly,html[data-motion="off"] .wing,html[data-motion="off"] .portal-glint,html[data-paused] .rose-vine,html[data-paused] .butterfly,html[data-paused] .wing,html[data-paused] .portal-glint{animation-play-state:paused}html[data-motion="off"] #magic{opacity:0}html[data-motion="off"] .portal{transition:none}
@keyframes rose-sway{from{transform:rotate(-1deg) translateX(-2px)}to{transform:rotate(1.5deg) translateX(3px)}}
@keyframes wing-left{from{transform:rotateY(0deg)}to{transform:rotateY(68deg)}}@keyframes wing-right{from{transform:rotateY(0deg)}to{transform:rotateY(-68deg)}}
@keyframes fly-one{0%,100%{transform:translate(0,0) rotate(-10deg)}25%{transform:translate(45px,-30px) rotate(15deg)}50%{transform:translate(135px,70px) rotate(50deg)}75%{transform:translate(14px,160px) rotate(-20deg)}}
@keyframes fly-two{0%,100%{transform:translate(0,0) rotate(18deg)}35%{transform:translate(-95px,60px) rotate(-28deg)}65%{transform:translate(-15px,185px) rotate(25deg)}}
@keyframes fly-three{0%,100%{transform:translate(0,0) rotate(12deg)}35%{transform:translate(75px,-65px) rotate(35deg)}70%{transform:translate(125px,15px) rotate(-15deg)}}
@keyframes jewel-glint{0%,70%,100%{opacity:.15;transform:rotate(45deg) scale(.4)}80%{opacity:.9;transform:rotate(45deg) scale(1.7)}90%{opacity:.35;transform:rotate(45deg) scale(.8)}}
@media(hover:hover){.portal--main:hover{transform:translateY(-3px)}.settings-button:hover{background:#fff1ed}}
@media(min-width:600px){.palace{padding-left:68px;padding-right:38px;min-height:1020px}.masthead h1{font-size:136px}.greeting{margin-bottom:26px}.portal--main{width:82%}.future-portals{gap:12px}.home-footer{margin-top:24px}.settings-button{right:24px;top:26px}.rose-vine{left:-13%}.rose-vine--two{left:-14%}}
@media(max-width:359px){.palace{padding-left:37px;padding-right:12px}.masthead h1{font-size:86px}.greeting{font-size:22px}.portal-title{font-size:29px}.portal--future .portal-title{font-size:19px}.portal--future .portal-content{gap:9px}.future-icon{width:34px;height:34px}.settings-button{right:10px;width:42px;height:44px}.example-badge{font-size:14px;padding:4px 10px}}
@media(prefers-reduced-motion:reduce){.rose-vine,.butterfly,.wing,.portal-glint{animation:none!important}.portal{transition:none!important}#magic{display:none}.portal--main:hover{transform:none}}