:root { color-scheme: light; font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; --ink:#44331f; }
* { box-sizing: border-box; }
html { min-height: 100%; background:#f69a1c; }
body { margin:0; min-height:100vh; color:var(--ink); background:
  radial-gradient(circle at 50% 7%, rgba(255,241,146,.75), transparent 26rem),
  linear-gradient(120deg, transparent 0 46%, rgba(255,243,165,.25) 46% 48%, transparent 48% 100%),
  repeating-linear-gradient(90deg, rgba(255,242,166,.18) 0 2px, transparent 2px 72px),
  linear-gradient(160deg,#ffad22,#ff8b16 52%,#ffc34d); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.45; background-image:
  radial-gradient(circle at 12% 14%,transparent 0 5px,#ffe383 6px 7px,transparent 8px),
  radial-gradient(circle at 84% 22%,transparent 0 4px,#ffe383 5px 6px,transparent 7px),
  linear-gradient(90deg,transparent 12%,#ffe383 12% 12.3%,transparent 12.3%),
  linear-gradient(0deg,transparent 78%,#ffe383 78% 78.2%,transparent 78.2%); background-size:190px 240px; }
a { color:inherit; }
.app-shell { width:min(100%,520px); min-height:100vh; margin:auto; padding:max(18px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom)); position:relative; }
.hero { text-align:center; padding-top:4px; }
.eyebrow { margin:5px 0 0; font-weight:900; letter-spacing:.35em; color:#087e68; font-size:.8rem; }
h1 { margin:0; color:white; text-shadow:0 3px 0 rgba(128,73,0,.28); font-size:clamp(2rem,9vw,3.1rem); letter-spacing:.08em; }
.tagline { margin:3px 0 14px; font-size:.9rem; font-weight:700; color:#704513; }
.robot { width:112px; height:92px; margin:0 auto; position:relative; filter:drop-shadow(0 7px 8px rgba(103,53,0,.22)); }
.robot-head { position:absolute; width:88px; height:59px; left:12px; top:13px; border:8px solid #fffdf4; border-radius:35px; background:#12272c; box-shadow:inset 0 0 10px #4b7f82,0 2px 0 #d8cdb7; }
.antenna { position:absolute; left:53px; top:0; width:7px; height:17px; border-radius:5px; background:#f7f5e9; box-shadow:0 -3px 0 3px #82dbc8; }
.eye { position:absolute; width:10px; height:16px; top:13px; border-radius:50%; background:#75fff0; box-shadow:0 0 9px #38e6dc; }
.eye.left { left:17px; }.eye.right { right:17px; }
.smile { position:absolute; left:31px; top:29px; width:16px; height:10px; border:3px solid #8afff1; border-top:0; border-radius:0 0 12px 12px; }
.robot-body { position:absolute; left:27px; bottom:0; width:58px; height:31px; border-radius:25px 25px 9px 9px; background:#fffdf4; text-align:center; padding-top:6px; box-shadow:-30px 6px 0 -14px #fffdf4,30px 6px 0 -14px #fffdf4; }
.robot-body span { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#17a77f; font-size:14px; }
.feature-list { display:grid; gap:14px; }
.jelly { --c1:#a9f0d6; --c2:#49c5aa; min-height:92px; position:relative; display:grid; grid-template-columns:82px 1fr; grid-template-rows:1fr auto; align-items:center; padding:10px 22px 10px 10px; border:2px solid rgba(255,255,255,.75); border-radius:34px; text-decoration:none; color:white; font-size:clamp(1.7rem,8vw,2.35rem); font-weight:900; letter-spacing:.05em; text-shadow:0 3px 2px rgba(68,38,6,.28); background:linear-gradient(155deg,rgba(255,255,255,.7),transparent 28%),linear-gradient(110deg,var(--c1),var(--c2)); box-shadow:inset 0 4px 5px rgba(255,255,255,.65),inset 0 -7px 9px rgba(82,42,0,.12),0 8px 14px rgba(109,55,0,.24); overflow:hidden; transition:transform .15s,filter .15s; }
.jelly::after { content:""; position:absolute; top:9px; right:18px; width:43%; height:8px; border-radius:50%; background:rgba(255,255,255,.5); filter:blur(3px); }
.jelly:hover { filter:brightness(1.04); }.jelly:active { transform:translateY(3px) scale(.99); }.jelly:focus-visible { outline:4px solid #fff; outline-offset:3px; }
.jelly .icon { grid-row:1/3; display:grid; place-items:center; width:70px; height:70px; border:2px solid rgba(255,255,255,.75); border-radius:50%; background:rgba(255,255,255,.27); box-shadow:inset 0 4px 8px rgba(255,255,255,.7),0 4px 8px rgba(70,35,0,.18); font-size:2.25rem; text-shadow:none; }
.jelly small { align-self:start; font-size:.58rem; letter-spacing:.2em; opacity:.82; margin-top:-10px; }
.blue { --c1:#8de2ff;--c2:#46a9ed }.coral { --c1:#ffbd8d;--c2:#ff795b }.purple { --c1:#cbb5ff;--c2:#cf72ca }.yellow { --c1:#ffe98f;--c2:#ffc515 }
.jelly.reminder-alert{--c1:#ff7b69;--c2:#f0261c;animation:reminder-pulse 1.8s ease-in-out infinite}.reminder-badge{position:absolute;right:-1px;top:-8px;z-index:2;display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border:3px solid #fff;border-radius:999px;background:#e31f1f;color:#fff;font-size:1rem;text-shadow:none;box-shadow:0 4px 8px #8f170c66}.jelly.reminder-alert small{font-size:.7rem;letter-spacing:.04em}@keyframes reminder-pulse{50%{filter:brightness(1.12);box-shadow:inset 0 4px 5px rgba(255,255,255,.65),inset 0 -7px 9px rgba(82,42,0,.12),0 8px 20px rgba(190,25,14,.45)}}
footer { min-height:76px; display:flex; align-items:flex-end; justify-content:center; gap:9px; padding-top:14px; font-size:.75rem; font-weight:700; white-space:nowrap; }
footer p { margin:0 0 8px; } footer p span { padding:0 4px; } footer strong { color:#078f79; letter-spacing:.08em; }
.cat { width:61px; height:44px; position:relative; border-radius:24px 24px 16px 16px; background:#fff4dc; border:2px solid #ca8e5b; box-shadow:0 4px 8px rgba(83,41,0,.22); }
.cat .ear { position:absolute; top:-12px; width:21px; height:23px; background:#f2b27b; clip-path:polygon(50% 0,100% 100%,0 100%); }.cat .ear.left{left:4px}.cat .ear.right{right:4px}
.cat-face { position:absolute; inset:13px 0 auto; text-align:center; font-size:.75rem; }.paw { position:absolute; width:68px; height:12px; left:-4px; bottom:-5px; background:#fff4dc; border-radius:50%; border-bottom:2px solid #ca8e5b; }
@media (max-width:360px){.app-shell{padding-inline:12px}.jelly{grid-template-columns:68px 1fr;min-height:80px;padding-right:12px}.jelly .icon{width:60px;height:60px;font-size:1.9rem}.jelly small{display:none}footer{font-size:.68rem}}
@media (min-width:700px){body{padding:24px}.app-shell{min-height:calc(100vh - 48px);border-radius:44px;box-shadow:0 20px 60px rgba(90,42,0,.35);background:rgba(255,179,44,.2)}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.reminder-badge[hidden]{display:none}