@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Chakra+Petch:wght@400;500;600;700&display=swap');
:root{--ink:#151624;--muted:#374b6b;--purple:#ff40c7;--paper:#0b9cff;--green:#e4ff00;--sky:#079bff;--pink:#ff35c2;--yellow:#eaff00;--display:'Amatic SC','Arial Narrow',sans-serif;--body:'Chakra Petch',Arial,sans-serif}
body{background:var(--sky);font-family:var(--body);position:relative;isolation:isolate}body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url('assets/clouds.png'),url('assets/clouds.png');background-position:calc(50% - 290px) -150px,calc(50% - 430px) calc(100% + 100px);background-size:1000px auto,850px auto;background-repeat:no-repeat;opacity:.85}.intro{position:relative}.brand{font-family:var(--display);color:var(--yellow);font-size:66px;letter-spacing:-2px;line-height:1}.brand span{color:var(--pink);display:inline-block;text-shadow:2px 2px white}.intro .eyebrow{color:#fff;font-size:11px;letter-spacing:2px}.intro h1{font-family:var(--display);text-transform:uppercase;font-size:89px;font-weight:700;line-height:.96;letter-spacing:-1.7px;background:#ffbde8;color:#fa254f;padding:17px 23px 23px;border-radius:6px;transform:rotate(-3deg);box-shadow:9px 9px 0 var(--pink);width:fit-content}.intro p:not(.eyebrow){color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 5px #0872b5}.tags span{color:#111;font-weight:700;border:2px solid #ffffff90;background:var(--yellow);box-shadow:0 4px 0 #31629835;font-size:10px}.tags span:nth-child(2){background:var(--pink);color:#fff;transform:rotate(3deg)}.tags span:nth-child(3){background:white;transform:rotate(-3deg)}.intro footer{color:white;border-color:#ffffff77;font-weight:600}.device{background:var(--sky);border-color:#29283a;box-shadow:0 0 0 2px #d0d8ef,0 0 0 5px #ffffff55,15px 30px 70px #003d9245;isolation:isolate}.device::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url('assets/clouds.png'),url('assets/clouds.png');background-size:500px auto,440px auto;background-repeat:no-repeat;background-position:-140px -45px,90px 410px;opacity:.9}.status{color:#fff}.island{background:#171723}.homebar{background:#fff}.avatar{background:var(--yellow);box-shadow:inset 0 2px 3px #fff,0 3px 8px #0060b444;border:2px solid white;transform:rotate(-7deg);color:#ff28b5}.greeting b{font-size:13px;color:white}.greeting small{color:#f2f8ff;font-size:9px}.round{background:#ffffff44;border:1.5px solid #ffffffa0;box-shadow:inset 0 2px 4px #ffffff80,0 3px 10px #004b8c18;backdrop-filter:blur(14px);color:#101a35}.page-title{font-family:var(--display);text-transform:uppercase;font-size:43px;line-height:1.02;font-weight:700;letter-spacing:-.9px;background:#ffb8e4;color:#f41846;padding:10px 15px 13px;border-radius:5px;transform:rotate(-1.5deg);width:fit-content;margin:3px 0 15px;box-shadow:4px 4px 0 #ff42bf}main>.anim>.sub{color:white;font-weight:500}.eyeline{font-size:9px;color:#ecf7ff;letter-spacing:1.4px}.hero{background:var(--pink);border:2px solid #ffb5ee;border-radius:32px;box-shadow:inset 0 2px 7px #ffffff77,0 7px 16px #006caa22;padding:20px;margin-top:22px;min-height:145px;overflow:visible;transform:rotate(1deg)}.hero h2{font-family:var(--display);text-transform:uppercase;font-size:34px;letter-spacing:-.5px;line-height:.98;margin:7px 0 13px;color:white;max-width:220px}.hero .eyeline{color:#550a59;font-size:8px;font-weight:700}.hero p{font-size:10px;color:#510a50;font-weight:600}.flower{font-size:105px;color:var(--yellow);top:20px;right:0;filter:drop-shadow(3px 5px 0 #a49e0280);text-shadow:inset 0 0 white;transform:rotate(10deg)}.section{margin-top:26px;margin-bottom:11px}.section h2{font-family:var(--display);text-transform:uppercase;font-size:26px;letter-spacing:0;color:#fff;line-height:1}.section>span,.section .link{font-size:10px;color:#fff}.carousel{padding:10px 4px 17px;gap:13px}.expiry{border-radius:32px;background:var(--yellow);border:2px solid #f7ff9a;box-shadow:inset 0 3px 8px #ffffffb3,0 6px 10px #075b9720;height:228px;flex-basis:193px;transform:rotate(-2deg);padding:18px;overflow:visible}.expiry:nth-child(2){background:var(--pink);border-color:#ffabeb;transform:rotate(2deg)}.expiry:nth-child(3){background:#8c5aff;border-color:#d1baff}.expiry:nth-child(4n){background:#fe7928;border-color:#ffc796}.expiry b{font-family:var(--display);font-size:32px;text-transform:uppercase;line-height:1;letter-spacing:-.5px;max-width:155px}.expiry:nth-child(2n) b{color:#fff}.expiry small{font-size:10px;font-weight:600}.chip{border:1px solid #ffffffa0;background:#ffffff80;backdrop-filter:blur(9px);font-size:9px;padding:5px 9px;box-shadow:inset 0 1px 1px white}.expiry .arrow{border:1px solid #fff;background:#ffffffb0;width:29px;height:29px;bottom:14px;left:14px;box-shadow:0 3px 5px #0001}.sticker{display:inline-block;flex-shrink:0;width:60px;height:60px;background-image:url('assets/stickers.png');background-size:400% 400%;background-position:calc(var(--sx)*100%/3) calc(var(--sy)*100%/3);background-repeat:no-repeat;filter:drop-shadow(0 5px 3px #18357338);vertical-align:middle}.expiry>.sticker{position:absolute;width:145px;height:145px;right:-9px;bottom:-14px;transform:rotate(-12deg);pointer-events:none}.expiry:nth-child(2n)>.sticker{transform:rotate(12deg)}.thumb{background:#ffffff50;border:1px solid #ffffff70;border-radius:19px;width:60px;height:65px;overflow:visible}.thumb .sticker{width:64px;height:64px}.row{border:1.5px solid #ffffffa0;border-radius:26px;margin:10px 0;padding:11px;background:#ffffff47;backdrop-filter:blur(19px);box-shadow:inset 0 2px 4px #ffffff60,0 4px 8px #0065a520;gap:10px}.row b{font-family:var(--display);text-transform:uppercase;font-size:24px;font-weight:700;line-height:1}.row small{color:#193b5b;font-size:9px;margin-top:5px;font-weight:500}.row .badge{background:var(--yellow);border:1px solid #faffae;font-size:8px;padding:6px;color:#191923;font-weight:700}.pill{background:var(--yellow);color:#151525;border:2px solid #f6ff88;font-family:var(--display);text-transform:uppercase;font-size:20px;font-weight:700;padding:5px 16px;box-shadow:0 3px 0 #0061ac44}.summary{gap:10px}.summary>div{background:#ffffff45;border:1.5px solid #ffffffb0;backdrop-filter:blur(20px);border-radius:25px;box-shadow:inset 0 2px 3px #ffffff70}.summary>div:nth-child(2){background:#ffffff65}.summary strong{font-family:var(--display);font-size:36px;line-height:1.1}.summary small{color:#183b5e;font-size:9px;font-weight:600}nav{border:1.5px solid #ffffffd0;background:#ffffff45;box-shadow:inset 0 2px 6px #fff8,0 7px 25px #003a9140;backdrop-filter:blur(28px) saturate(1.8);padding:5px;border-radius:38px;bottom:24px}nav button{color:#fff;height:49px;border:1px solid #ffffff00}nav button.active{background:var(--yellow);color:#171723;border:1px solid #ffffb0;box-shadow:inset 0 2px 3px #fff9,0 2px 6px #457d8e30}nav span{font-family:var(--display);font-size:21px;text-transform:uppercase;font-weight:700}nav svg{width:21px;height:21px}.add{background:var(--yellow);color:#20203b;font-size:29px;border-color:#fff}.backhead h2{color:white;font-family:var(--display);font-size:26px;text-transform:uppercase}.backhead{margin-bottom:23px}.search{background:#ffffffb8;backdrop-filter:blur(15px);border:1.5px solid #fff;border-radius:24px;font-size:11px;padding:13px 16px;box-shadow:inset 0 2px 3px #fff}.search::placeholder{color:#5d6b8e}.filters{gap:7px;margin:17px 0}.filters button{background:#ffffff55;border:1px solid #ffffffb0;color:white;font-size:10px;border-radius:25px;padding:9px 13px;backdrop-filter:blur(15px)}.filters button.selected{background:var(--pink);border-color:#ffbdec;color:#fff;box-shadow:inset 0 2px 2px #ffffff77}.shelf{border:2px solid #ffffffa0;border-radius:36px;background:#ffffff38;backdrop-filter:blur(22px) saturate(1.2);box-shadow:inset 0 2px 9px #fff8,0 8px 20px #0067b525;padding:16px 13px;margin:23px 0}.shelf-top{color:white;font-size:9px;font-weight:700;letter-spacing:.5px;padding-bottom:14px}.shelfgrid{border-bottom:4px solid #ffffff6b;gap:9px;padding-bottom:11px;margin-bottom:13px}.tile{background:#ffffff70;border:1.5px solid #ffffffaa;border-radius:25px;height:88px;box-shadow:inset 0 2px 4px #ffffffc0;display:grid;place-items:center}.tile:nth-child(3n+1){background:#eaff00}.tile:nth-child(3n+2){background:#ff48c6}.tile:nth-child(3n){background:#c2a9ff}.tile .sticker{width:79px;height:79px;transform:rotate(-8deg);transition:transform .2s}.tile:hover .sticker{transform:rotate(6deg) scale(1.1)}.tile small{background:white;color:#191923;right:4px;top:4px;border:1px solid #2222;font-size:9px;padding:4px 6px}.tile.plus{border:2px solid #fff;background:#ffffff22;color:white;border-radius:25px;font-size:37px}.recipe-card{background:var(--yellow);border:2px solid #f5ff90;border-radius:35px;min-height:180px;padding:20px;box-shadow:inset 0 3px 7px #fff9,0 6px 12px #007bbf30;overflow:visible;transform:rotate(-1deg)}.recipe-card .eyeline{color:#4f5210;font-size:8px}.recipe-card b{font-family:var(--display);font-size:34px;letter-spacing:-.4px;text-transform:uppercase;line-height:.94;max-width:180px}.recipe-card small{font-size:10px}.recipe-card .bowl{right:-18px;bottom:-13px;font-size:inherit;transform:rotate(9deg)}.recipe-card .bowl .sticker{width:155px;height:155px}.recipe-card .chip{font-size:8px;position:relative;z-index:1;margin-top:5px}.detail-art{border:2px solid #ffffffb0;background:#ffffff38;backdrop-filter:blur(19px);border-radius:42px;box-shadow:inset 0 4px 8px #fff7,0 8px 18px #0063b330;height:220px}.detail-art>.sticker{width:210px;height:210px;transform:rotate(-9deg);filter:drop-shadow(0 11px 4px #004b9045)}.detail-art:has(.salad){background:var(--yellow)!important}.detail-art>.round{z-index:2}.detail-art .chip{border-radius:30px;z-index:1}.facts{gap:10px}.fact{border:1.5px solid #ffffffa0;background:#ffffff55;backdrop-filter:blur(20px);border-radius:25px;padding:16px;box-shadow:inset 0 2px 3px #ffffff77}.fact small{color:#244260;font-size:8px;font-weight:600}.fact b{font-size:11px}.note{border:1.5px solid #ffffffc0;background:#ffffffb8;backdrop-filter:blur(22px);border-radius:25px;box-shadow:inset 0 2px 5px #fff8;font-size:10px;line-height:1.8;color:#26364b;padding:16px}.quantity{color:white;font-size:11px}.stepper button{background:#ffffff6b;border:1px solid #fff;color:#17253b}.primary{background:var(--yellow);color:#17182b;border:2px solid #f8ffb0;border-radius:28px;font-family:var(--display);font-size:26px;text-transform:uppercase;font-weight:700;padding:11px;box-shadow:inset 0 2px 4px #fff,0 4px 8px #0064b022}.secondary{background:var(--pink);border:1.5px solid #ffb9ec;border-radius:28px;color:#fff;margin-top:11px;font-family:var(--display);font-size:23px;font-weight:700;padding:11px;text-transform:uppercase}.field{color:white;font-size:10px;letter-spacing:.4px;margin:18px 0}.field input,.field select,.field textarea{border:1.5px solid #fff;background:#ffffffb5;border-radius:23px;font-size:11px;padding:13px 15px;backdrop-filter:blur(12px);box-shadow:inset 0 2px 3px #ffffffcc;color:#1b2c42}.field input::placeholder,.field textarea::placeholder{color:#758396}.upload{background:#ffffff3f;border:1.5px solid #ffffffc0;border-radius:30px;backdrop-filter:blur(20px);box-shadow:inset 0 2px 6px #ffffff80;color:#fff;font-size:11px}.upload input{font-size:9px}.ring{box-shadow:0 0 0 10px #ffffff33,0 0 0 12px #ffffff80;border:2px solid #ffffffc0;background:conic-gradient(var(--pink) 0 66%,#ffffff66 66%);width:205px;height:205px;margin:35px auto}.ring>div{background:#ffffffbd;backdrop-filter:blur(15px);box-shadow:inset 0 3px 8px #ffffffa0;width:161px;height:161px}.ring strong{font-family:var(--display);font-size:68px;line-height:1}.ring small{color:#36506d;font-size:10px}.bar{color:white;font-size:10px}.bar i{background:var(--yellow);border:1px solid #f6ff9b;border-radius:8px 8px 0 0;box-shadow:inset 0 2px 3px #fff8}.ingredient{padding:14px 10px;border:1px solid #ffffff99;background:#ffffffb0;backdrop-filter:blur(13px);border-radius:20px;margin:9px 0;font-size:11px}.ingredient input{accent-color:var(--pink);width:17px;height:17px}.instruction{background:#ffffffb8;border:1px solid #fff;border-radius:24px;padding:13px;font-size:11px;line-height:1.8}.instruction b{background:var(--pink);color:white;border:1px solid #ffa9e9}.empty{color:white}.sub{color:#eaf6ff}.thumb img,.detail-art img,.expiry img{filter:drop-shadow(2px 0 white) drop-shadow(-2px 0 white) drop-shadow(0 2px white) drop-shadow(0 -2px white) drop-shadow(0 6px 4px #16467655)}#toast{background:#ffffffd9;backdrop-filter:blur(24px);border:1.5px solid white;color:#163153;border-radius:25px;box-shadow:0 8px 25px #004a9440;font-size:11px;bottom:100px}.anim{animation:enter .24s ease}@media(max-width:950px){.intro h1{font-size:70px}.intro{width:330px}.tags{max-width:290px}}@media(max-width:740px){body{background:var(--sky)}.device{border:0;border-radius:0;box-shadow:none;min-height:0;height:100dvh}.device::before{background-position:-120px -50px,60px 400px}.status{color:white}.page-title{font-size:44px}main{padding-top:13px}body::before{display:none}}
/* Open refrigerator: preserve the Sky Pop glass and tile palette. */
.shelf.fridge{position:relative;padding:45px 15px 15px;border-radius:29px 29px 24px 24px;border:3px solid #d5f5ffd9;background:linear-gradient(90deg,#ffffff45 0%,#ffffff18 8%,#ffffff35 48%,#ffffff15 90%,#ffffff55 100%);box-shadow:inset 0 0 0 5px #ffffff20,inset 9px 0 16px #ffffff55,inset -9px 0 17px #0081c350,inset 0 11px 14px #ffffff80,0 9px 20px #005da433;overflow:visible;margin:24px 0 29px}.fridge::before{content:'';position:absolute;inset:12px 10px 12px;border-radius:20px 20px 16px 16px;border:1px solid #ffffff50;box-shadow:inset 0 0 13px #0068ad22;pointer-events:none}.fridge-light{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:95px;height:17px;border-radius:4px 4px 11px 11px;background:#efffff;border:3px solid #bcecff;box-shadow:0 6px 18px #ffffffbb,inset 0 2px 3px #fff}.fridge .shelf-top{position:relative;font-size:8px;padding:0 2px 13px;color:#f8fcff}.fridge-inside{position:relative}.fridge-level{min-height:88px;position:relative;padding:0 0 16px;margin:0 0 10px}.fridge-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;min-height:68px;align-items:end;padding:0 3px}.fridge .tile{height:68px;border-radius:21px}.fridge .tile .sticker{width:66px;height:66px}.fridge .tile.plus{font-size:32px;box-shadow:inset 0 2px 4px #ffffff77}.fridge-shelf{position:absolute;bottom:0;left:-4px;right:-4px;height:7px;border-radius:3px;background:linear-gradient(180deg,#ecffffe0,#ffffff80 45%,#a8d9ecb0 50%,#ffffff44);box-shadow:0 4px 7px #03619d29,inset 0 1px 0 white}.fridge-level:last-child{margin-bottom:7px}.fridge-level:nth-child(3) .fridge-shelf{height:9px}.fridge-drawer{position:relative;height:45px;margin:0 0 0;border-radius:4px 4px 15px 15px;border:1.5px solid #e7ffffa0;background:#ffffff22;box-shadow:inset 0 3px 9px #fff3,inset 0 -5px 8px #1188bc24;display:flex;justify-content:center}.fridge-drawer span{display:block;width:58px;height:5px;background:#ebffffa0;border-radius:0 0 5px 5px;box-shadow:0 2px 3px #007ab344}.fridge-feet::before,.fridge-feet::after{content:'';position:absolute;bottom:-8px;width:27px;height:7px;background:#d7f4ffc9;border-radius:0 0 5px 5px;box-shadow:0 3px 4px #0069b22b}.fridge-feet::before{left:26px}.fridge-feet::after{right:26px}
/* Open glass medicine case, with raised lid and inset trays. */
.medicine-case{position:relative;margin:43px 0 28px;padding-top:0}.case-handle{position:absolute;top:-23px;left:50%;transform:translateX(-50%);width:95px;height:31px;border:6px solid #dbf7ffcf;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:inset 0 2px 2px #fff8,0 -2px 4px #fff5}.case-lid{position:relative;height:83px;border:3px solid #dbf8ffd9;border-radius:25px 25px 13px 13px;background:#ffffff32;backdrop-filter:blur(20px);box-shadow:inset 0 0 0 5px #ffffff22,inset 0 4px 10px #ffffff70,0 5px 12px #005aab22;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.case-lid::before{content:'';position:absolute;inset:9px;border:1px solid #ffffff55;border-radius:15px 15px 5px 5px;pointer-events:none}.case-lid>span{font-size:7px;color:#f8ffff;letter-spacing:1.7px;font-weight:700}.case-cross{position:relative;width:26px;height:26px;filter:drop-shadow(0 2px 2px #00629a33)}.case-cross::before,.case-cross::after{content:'';position:absolute;background:#edff09;box-shadow:inset 0 1px 2px #fff9;border-radius:2px}.case-cross::before{width:10px;height:26px;left:8px}.case-cross::after{height:10px;width:26px;top:8px}.case-hinge{height:12px;position:relative;display:flex;justify-content:space-between;padding:0 46px;z-index:1}.case-hinge i{width:30px;height:17px;position:relative;top:-3px;border-radius:4px;background:linear-gradient(90deg,#dcfaffb0,#fff9,#b9ebff88);border:1px solid #f3ffffcc;box-shadow:0 2px 4px #00539633}.shelf.case-body{position:relative;padding:17px 12px 23px;margin:0;border-radius:13px 13px 28px 28px;border:3px solid #dcfaffd9;background:#ffffff32;backdrop-filter:blur(23px);box-shadow:inset 0 0 0 5px #ffffff18,inset 6px 0 10px #ffffff55,inset -5px 0 10px #0082c344,inset 0 -6px 11px #1b8fb23b,0 8px 18px #0061a533}.case-body>.shelf-top{padding:0 5px 14px;font-size:8px;position:relative}.case-trays{position:relative;display:flex;flex-direction:column;gap:15px}.case-tray{position:relative;border:2px solid #d9f9ffa0;border-radius:14px 14px 10px 10px;background:#ffffff17;padding:11px 7px 17px;box-shadow:inset 0 3px 7px #ffffff66,0 5px 7px #0066a333}.case-tray:first-child{margin:0 -4px;transform:perspective(500px) rotateX(-3deg);z-index:2;box-shadow:inset 0 3px 7px #ffffff66,0 8px 9px #006ba63d}.case-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:9px;min-height:76px}.case-items .tile{height:76px;border-radius:23px}.case-items .tile .sticker{width:73px;height:73px}.case-items .tile.plus{font-size:34px}.tray-edge{position:absolute;height:9px;left:-2px;right:-2px;bottom:-2px;border-radius:0 0 9px 9px;background:linear-gradient(180deg,#f2ffffc9,#b5e7f8b0 48%,#eefcff80);border-top:1px solid #ffffffa0;box-shadow:0 2px 3px #0073ab22}.case-clasp{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);height:19px;width:47px;border-radius:5px 5px 8px 8px;border:1.5px solid #f3ffffd9;background:#c7f3ffae;box-shadow:inset 0 2px 4px #fff9,0 3px 4px #006b9b33}.case-clasp::after{content:'';position:absolute;width:19px;height:3px;left:12px;top:7px;border-radius:2px;background:#ffffffd9}
.case-lid{overflow:visible}.lid-clasp{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:43px;height:23px;border:1.5px solid #efffffe6;border-radius:5px 5px 9px 9px;background:linear-gradient(180deg,#edffffbb,#b7e9ff9e);box-shadow:inset 0 2px 4px #ffffffbd,0 3px 5px #0066a633;z-index:3}.lid-clasp::after{content:'';position:absolute;left:11px;top:9px;width:18px;height:4px;border-radius:3px;background:#ffffffd9;box-shadow:0 1px 2px #2889a53b}
.case-items{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;min-height:66px}.case-items .tile{height:66px;border-radius:19px;min-width:0}.case-items .tile .sticker{width:59px;height:59px}.case-items .tile small{font-size:8px;padding:3px 4px;right:2px;top:2px}.case-items .tile.plus{font-size:30px}
.fridge-items{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;min-height:64px}.fridge .tile{height:64px;border-radius:19px;min-width:0}.fridge .tile .sticker{width:59px;height:59px}.fridge .tile small{font-size:8px;padding:3px 4px;right:2px;top:2px}.fridge .tile.plus{font-size:30px}
/* Four-column glass storage cabinet with framed compartments and feet. */
.shelf.storage-cabinet{position:relative;padding:17px 10px 21px;margin:24px 0 35px;border-radius:21px 21px 14px 14px;border:3px solid #d7f7ffd9;background:#ffffff32;backdrop-filter:blur(23px);box-shadow:inset 0 0 0 5px #ffffff25,inset 7px 0 11px #ffffff6b,inset -7px 0 12px #0477b533,0 8px 18px #0063a52b;overflow:visible}.storage-cabinet>.shelf-top{font-size:8px;padding:0 7px 14px;color:white}.cabinet-sections{display:flex;flex-direction:column;gap:8px;position:relative}.cabinet-compartment{position:relative;padding:12px 7px 21px;border:5px solid #c6f0ff9e;border-top-color:#eaffffc9;border-bottom-color:#a2dcedad;border-radius:10px;background:#ffffff22;box-shadow:inset 0 3px 8px #0067a52e,inset 0 -2px 4px #fff4,0 3px 4px #006ca526;min-height:102px}.cabinet-compartment::before{content:'';position:absolute;inset:5px;border:1px solid #ffffff44;border-radius:5px;pointer-events:none}.cabinet-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;align-items:start;min-height:64px;position:relative}.cabinet-items .tile{height:64px;border-radius:18px;min-width:0}.cabinet-items .tile .sticker{width:57px;height:57px}.cabinet-items .tile small{font-size:8px;padding:3px 4px;right:2px;top:2px}.cabinet-items .tile.plus{font-size:30px}.cabinet-knob{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;border:1px solid #f2ffff;background:#e3faff;box-shadow:inset 0 2px 2px #fff,0 2px 3px #287b9f44}.cabinet-plinth{position:absolute;left:-3px;right:-3px;bottom:-3px;height:17px;border:1.5px solid #dffbffd9;border-radius:7px;background:linear-gradient(180deg,#dcfaffb5,#9bdcf6b0);box-shadow:inset 0 2px 3px #ffffffa0,0 3px 5px #0074ac22}.cabinet-feet::before,.cabinet-feet::after{content:'';position:absolute;bottom:-18px;width:24px;height:17px;border:1px solid #e6ffffa0;border-top:0;border-radius:0 0 4px 4px;background:#c0edffb0;box-shadow:inset 0 0 4px #fff5,0 3px 3px #006eb322}.cabinet-feet::before{left:15px}.cabinet-feet::after{right:15px}
.row.expired-row{background:#ff716fee;border:1.5px solid #ffd0c7;box-shadow:inset 0 2px 5px #ffffff88,0 4px 10px #a6274433;color:#43142a}.row.expired-row small{color:#651f31}.row.expired-row .thumb{background:#ffffff44;border-color:#ffe2dc}.row.expired-row .badge{background:#fff1de;border-color:#fff9ed;color:#a22135;font-weight:700}
.avatar{background-image:url('assets/avatar.jpg');background-size:cover;background-position:center;transform:none;overflow:hidden;border:2px solid white;box-shadow:0 3px 8px #0060b444;flex-shrink:0}
/* Let the horizontal card rail clip at the phone screen edge. */
.carousel{margin-left:-20px;margin-right:-20px;padding-left:24px;padding-right:24px;scroll-padding-left:24px;overflow-y:hidden}
@media(max-width:740px){.carousel{margin-left:-23px;margin-right:-23px;padding-left:27px;padding-right:27px;scroll-padding-left:27px}}
.ingredient{gap:9px}.ingredient input{flex-shrink:0}.ingredient-picture{width:47px;height:47px;display:grid;place-items:center;flex-shrink:0;border-radius:15px;background:#ffffff45;border:1px solid #ffffff85}.ingredient-picture .sticker{width:46px;height:46px;filter:drop-shadow(0 2px 2px #18357325)}.ingredient-picture img{width:43px;height:43px;object-fit:cover;border-radius:12px}.ingredient-olive{font-size:31px;line-height:1}.ingredient>span:last-child{white-space:nowrap;font-size:10px}
.recipe-fact{position:relative;padding-left:45px;min-height:77px;display:flex;flex-direction:column;justify-content:center}.fact-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:#214361;filter:drop-shadow(0 1px 0 #ffffff88)}.recipe-fact small{font-size:7px}.recipe-fact b{font-size:10px;white-space:nowrap}
.recipe-fact{padding-left:53px}.fact-icon-3d{left:9px;width:39px;height:39px;background-image:url('assets/recipe-icons-3d.png');background-size:200% 100%;background-repeat:no-repeat;filter:drop-shadow(0 3px 2px #1b527638)}.clock-3d{background-position:0 50%}.people-3d{background-position:100% 50%}
/* User-supplied status bar: time, signal, Wi-Fi and battery. */
.status{height:44px;padding:0;background-image:url('assets/status-bar.png');background-size:100% auto;background-position:center;background-repeat:no-repeat}.status>*{display:none}main{height:calc(100% - 44px)}
.search-icon{display:block;width:21px;height:21px;color:#101a35}
/* Reduce cloud visibility by 50 percent. */
body::before{opacity:.425}.device::before{opacity:.45}
/* Reduce cloud overlay opacity by 30% from the previous values. */
body::before{opacity:.595}.device::before{opacity:.63}
/* Geometrically centered add mark, independent of font baseline. */
.round.add{position:relative;font-size:0;display:inline-grid;place-items:center;padding:0;line-height:1}.round.add::before,.round.add::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:currentColor;border-radius:1px}.round.add::before{width:15px;height:2px}.round.add::after{width:2px;height:15px}
/* Upcoming expiry: warm yellow; expired items retain coral. */
.row.expiring-row{background:#ffe16de8;border:1.5px solid #fff4b5;box-shadow:inset 0 2px 5px #ffffffa0,0 4px 10px #946b1730;color:#493716}.row.expiring-row small{color:#695021}.row.expiring-row .thumb{background:#ffffff50;border-color:#fff6ce}.row.expiring-row .badge{background:#fff9e5;border-color:#fffef2;color:#8c5400;font-weight:700}
/* Scale the desktop slogan card uniformly to 70%. */
.intro h1{zoom:.7}
/* Meadow landscape: fixed scenic backdrop with readable glass overlays. */
body.landscape{background:#527f9a url('assets/hills-background.png') center center/cover fixed no-repeat}body.landscape::before{display:block;background:linear-gradient(180deg,#16304410,#122e2026);opacity:1}body.landscape .device{background:#527f9a url('assets/hills-background.png') 48% center/auto 100% no-repeat;box-shadow:0 0 0 2px #d6e4e8,0 0 0 5px #ffffff55,15px 30px 70px #142c3645}body.landscape .device::before{background:linear-gradient(180deg,#204f7810 0%,#1c45311a 55%,#142b232d 100%);opacity:1}body.landscape .intro p:not(.eyebrow){text-shadow:0 1px 5px #18372a90}body.landscape .intro footer{background:#1b35251a;padding:15px 8px;border-radius:0 0 12px 12px}body.landscape .greeting b,body.landscape .greeting small,body.landscape .section h2,body.landscape .section>span,body.landscape .section .link,body.landscape .eyeline,body.landscape .backhead h2,body.landscape main>.anim>.sub,body.landscape .sub,body.landscape .quantity,body.landscape .empty,body.landscape .field,body.landscape .bar{ text-shadow:0 1px 4px #152f3f9c}body.landscape .row:not(.expired-row):not(.expiring-row){background:#effaff9e}body.landscape .note,body.landscape .ingredient{background:#f3fbf5d4}body.landscape .fact{background:#effaffac}body.landscape .fact small,body.landscape .fact b{color:#183745}body.landscape .shelf.fridge,body.landscape .shelf.case-body,body.landscape .shelf.storage-cabinet{background:#eaf8ff45;box-shadow:inset 0 0 0 5px #ffffff20,inset 7px 0 13px #ffffff60,inset -7px 0 13px #264d5938,0 8px 18px #142d3033}body.landscape .shelf-top,body.landscape .case-lid>span{ text-shadow:0 1px 4px #183c4099}body.landscape .case-lid{background:#eaf8ff45}body.landscape nav{background:#e8fff56b;box-shadow:inset 0 2px 6px #fff9,0 7px 25px #122e2840}body.landscape nav button{color:#1f4544}body.landscape .summary>div{background:#f1fbf1ad}body.landscape .summary small{color:#294b3e}body.landscape .round:not(.add){background:#effaff66}body.landscape .search{background:#f4fff2d4}body.landscape .filters button:not(.selected){background:#e9f6f58c;color:#183f40}body.landscape .upload{background:#efffff55}body.landscape .instruction{background:#f4fcf1da}body.landscape #toast{background:#f5fff3eb;color:#183d32}
@media(max-width:740px){body.landscape{background:#527f9a}body.landscape .device{background:#527f9a url('assets/hills-background.png') 48% center/auto 100% no-repeat}body.landscape .device::before{background:linear-gradient(180deg,#204f7810,#142b232d);opacity:1}}

.brandbar{display:flex;align-items:center;justify-content:space-between;gap:14px}.theme-switch{display:inline-flex;align-items:center;gap:5px;padding:5px;border:1px solid #ffffffb0;border-radius:30px;background:#ffffff38;backdrop-filter:blur(18px);box-shadow:inset 0 2px 4px #fff5,0 3px 10px #0001;flex-shrink:0}.theme-switch span{padding:9px 12px;border-radius:24px;color:white;font:600 11px var(--body);white-space:nowrap}.theme-switch span.active{background:var(--yellow);color:#172735;box-shadow:0 2px 5px #0001}.mobile-theme{display:none}@media(max-width:740px){.mobile-theme{display:inline-flex;position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:5;padding:2px;gap:0}.mobile-theme span{font-size:8px;padding:5px 9px}}
/* Stack theme control beneath the brand, aligned to its left edge. */
.brandbar{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:15px}
.brandbar{gap:27px}
/* Independent live background settings. */
body.custom-web-bg{background:var(--web-background)!important}body.custom-web-bg::before{display:none!important}body.custom-app-bg .device{background:var(--app-background)!important}body.custom-app-bg .device::before{display:none!important}
body{padding-right:310px;gap:55px}.appearance-panel{position:fixed;right:22px;top:50%;transform:translateY(-50%);width:244px;padding:21px;border-radius:25px;background:#f2f9f2ed;border:1px solid #ffffffd9;backdrop-filter:blur(25px);box-shadow:0 14px 45px #18394830,inset 0 1px 2px white;color:#243b43;font-family:var(--body);z-index:20;max-height:calc(100dvh - 40px);overflow:auto}.appearance-heading{display:flex;justify-content:space-between;align-items:center}.appearance-heading span{font-size:8px;letter-spacing:1.7px;color:#6a7a78;font-weight:700}.appearance-heading h2{font-size:20px;margin:5px 0 0;letter-spacing:-.7px}.appearance-hint{font-size:10px;line-height:1.7;color:#667b7b;margin:14px 0}.appearance-hint.small{font-size:9px}.scene-options{display:flex;gap:8px;margin:18px 0}.scene-options button{border:1px solid #d1dedb;flex:1;background:#fff8;border-radius:15px;padding:9px;font-size:11px;font-weight:600;color:#31464c}.scene-options button[aria-pressed=true]{background:#eaff00;border-color:#cadb00;box-shadow:0 2px 4px #9ead2520}.scene-options i{display:block;height:40px;border-radius:8px;margin-bottom:7px}.sky-swatch{background:#079bff url('assets/clouds.png') center/110% auto no-repeat}.hills-swatch{background:url('assets/hills-background.png') center/cover no-repeat}.color-setting{border-top:1px solid #cbdad6;padding:17px 0 3px}.color-setting h3{font-size:11px;margin:0}.color-setting p{font-size:9px;color:#6a7c7c;margin:6px 0 12px}.custom-toggle{display:flex;align-items:center;gap:7px;font-size:10px}.custom-toggle input{accent-color:#71832a;margin:0;width:14px;height:14px}.color-controls{display:flex;gap:8px;align-items:center;margin:13px 0 10px}.color-controls input[type=color]{height:35px;width:43px;border-radius:9px;border:1px solid #d1dedb;padding:3px;background:white;cursor:pointer}.color-controls input[type=text],.color-controls input:not([type]){height:35px;min-width:0;width:100%;border:1px solid #d1dedb;background:white;border-radius:9px;padding:8px;font-size:11px;color:#324b4d}.appearance-reset{width:100%;border:1px solid #c4d1ca;border-radius:14px;background:#fff8;color:#324b4d;padding:11px;font-size:10px;font-weight:600}.appearance-close,.appearance-toggle{display:none}
@media(max-width:1300px) and (min-width:741px){.intro{width:280px}.intro h1{font-size:65px}body{gap:30px;padding-right:280px}.appearance-panel{width:224px;right:15px;padding:18px}}
@media(max-width:1050px) and (min-width:741px){.intro{display:none}body{padding-left:24px;padding-right:270px}}
@media(max-width:740px){body{padding:0}.appearance-panel{display:none;right:12px;top:65px;transform:none;width:245px;max-height:calc(100dvh - 90px)}.appearance-panel.is-open{display:block}.appearance-close{display:block;background:none;font-size:23px;color:#526969}.appearance-toggle{display:block;position:fixed;right:12px;top:9px;z-index:25;border-radius:20px;background:#f5ffeded;border:1px solid white;color:#254446;padding:7px 12px;font-size:9px;backdrop-filter:blur(20px)}.status{background-size:100% auto}.appearance-toggle{top:auto;bottom:96px;box-shadow:0 3px 15px #0002}}
/* Collapsible settings drawer on every screen size. */
.appearance-panel{transition:transform .25s ease,opacity .2s ease}.appearance-close{display:block;width:28px;height:28px;background:#ffffff70;border:1px solid #cfdbd5;border-radius:50%;font-size:20px;color:#526969;line-height:1}.appearance-toggle{display:block;position:fixed;right:18px;top:18px;bottom:auto;z-index:25;border-radius:22px;background:#f5ffeded;border:1px solid white;color:#254446;padding:10px 15px;font:600 11px var(--body);backdrop-filter:blur(20px);box-shadow:0 3px 15px #0002}.appearance-panel:not(.is-open){display:block;transform:translate(115%,-50%);opacity:0;pointer-events:none;visibility:hidden}body.settings-collapsed{padding-right:30px}
@media(max-width:1300px) and (min-width:741px){body.settings-collapsed{padding-right:24px}}
@media(max-width:740px){body.settings-collapsed{padding:0}.appearance-toggle{top:auto;bottom:96px;right:12px;padding:8px 12px;font-size:9px}.appearance-panel:not(.is-open){transform:translateX(115%)}.appearance-panel.is-open{transform:none}}
/* Floating vertical glass capsule, with a separate settings drawer. */
nav.glass-rail{position:fixed;left:auto;right:20px;top:50%;bottom:auto;transform:translateY(-50%);width:76px;display:flex;flex-direction:column;align-items:center;gap:13px;padding:20px 8px 10px;border:1.5px solid #ffffff80;border-radius:48px;background:#eff5f13b;backdrop-filter:blur(24px) saturate(.85);box-shadow:inset 0 2px 5px #ffffff77,inset 0 -2px 5px #ffffff22,0 12px 28px #16312b30;z-index:24}.glass-rail .rail-button{display:grid;place-items:center;flex:none;width:55px;height:55px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff;filter:drop-shadow(0 1px 2px #15333133)}.glass-rail svg{width:28px;height:28px;filter:drop-shadow(0 1px 1px #ffffff77)}.glass-rail .rail-settings{width:59px;height:59px;margin-top:8px;border:1px solid #ffffff80;background:#ffffff40;box-shadow:inset 0 2px 5px #ffffff77,0 4px 9px #1f3e2d18}.glass-rail .rail-settings[aria-expanded=true]{background:#ffffff77}.appearance-panel{right:112px;width:244px}.appearance-panel:not(.is-open){transform:translate(130%,-50%)}body{padding-right:118px}body.settings-collapsed{padding-right:118px}body:has(.appearance-panel.is-open){padding-right:390px}
@media(max-width:1300px) and (min-width:741px){body,body.settings-collapsed{padding-right:118px}body:has(.appearance-panel.is-open){padding-right:380px}.intro{width:280px}.appearance-panel{right:109px;width:224px}}
@media(max-width:1050px) and (min-width:741px){body:has(.appearance-panel.is-open){padding-right:370px}}
@media(max-width:740px){body,body.settings-collapsed,body:has(.appearance-panel.is-open){padding:0}nav.glass-rail{right:8px;width:49px;padding:11px 4px 6px;gap:8px;border-radius:32px}.glass-rail .rail-button{width:37px;height:37px}.glass-rail svg{width:22px;height:22px}.glass-rail .rail-settings{width:39px;height:39px;margin-top:4px}.appearance-panel{right:65px;top:50%;transform:translateY(-50%);width:min(245px,calc(100vw - 80px));max-height:85dvh}.appearance-panel.is-open{transform:translateY(-50%)}.appearance-panel:not(.is-open){transform:translate(130%,-50%)}}