#contexts-page{background:linear-gradient(#d8f1e558,#e0f5e040),url('assets/menu-bilangan.webp') center/cover;align-items:flex-start;padding:72px 24px 30px;color:#153b30}#contexts-page:before{display:none}
#contexts-page .context-content{width:min(1080px,100%)}#contexts-title{text-align:center;font-family:Georgia,serif;font-size:clamp(30px,4vw,52px);color:#0c332a;text-shadow:0 2px 4px #ffffffa0;margin:12px 0 6px}#contexts-page .entry-intro{text-align:center;color:#193f39;text-shadow:0 1px 3px white;margin-bottom:22px;font-weight:800}#contexts-page .nav-back{background:linear-gradient(135deg,#ad7c48,#70472e);border-color:#d9b583;color:#fff2da;box-shadow:0 4px 14px #57351d33}
#contexts-page .context-grid{gap:36px;max-width:1000px;margin:auto}#contexts-page .context-option{position:relative;border:0;padding:0;background:none;backdrop-filter:none;overflow:visible;transition:transform .35s ease,opacity .35s ease}#contexts-page .context-art{aspect-ratio:640/770;border:0;border-radius:35px;box-shadow:0 14px 34px #25382640;transition:transform .38s ease;isolation:isolate}
#contexts-page .context-art>img{position:absolute;max-width:none;width:240%;height:auto;object-fit:initial;top:-18.831%;left:-14.844%}#contexts-page .art-water>img{top:-19.48%;left:-123.438%}
#contexts-page .context-option h2,#contexts-page .context-option>p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}#contexts-page .context-option>small,#contexts-page .entry-note{display:none}
#contexts-page .context-option .portal-button{position:absolute;bottom:5.6%;left:52%;transform:translateX(-50%);width:62%;height:12%;min-height:56px;margin:0;padding:0 10px;border:2px solid #ffd49a;border-radius:34px;background:repeating-linear-gradient(3deg,#b97a4415 0 2px,#0000 2px 7px),linear-gradient(140deg,#bb8146,#88512e);color:#fff4e3;box-shadow:inset 0 2px 0 #ffe3b077,0 0 16px #f9953466;font:900 clamp(20px,2.6vw,31px) Georgia,serif;cursor:pointer;overflow:visible;isolation:isolate;transition:box-shadow .2s,filter .2s}
#contexts-page .context-option .portal-air{background:linear-gradient(145deg,#e3faffee,#78c8f4dd);color:#123d66;border-color:#effcff;box-shadow:inset 0 2px 0 #fff,0 0 17px #8ae3ff88;backdrop-filter:blur(6px)}.portal-label{position:relative;z-index:2;pointer-events:none}.portal-button-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:1}
.portal-api .portal-button-fx i{position:absolute;left:calc(var(--i)*9%);bottom:-12px;width:26px;height:46px;background:radial-gradient(ellipse at 50% 70%,#fff4ae 0 13%,#ffbd34 28%,#ff6815 48%,#ff5b0000 73%);opacity:0;transform-origin:center bottom;animation:portal-ember 650ms ease-in-out infinite alternate;animation-delay:calc(var(--i)*-100ms);animation-play-state:paused}
.portal-air .portal-button-fx i{position:absolute;left:50%;top:50%;width:25px;height:12px;border:2px solid #eaffff;border-radius:50%;opacity:0;animation:portal-ripple 1.5s ease-out infinite;animation-delay:calc(var(--i)*-.5s);animation-play-state:paused}
.portal-button.portal-pulse .portal-button-fx i,.portal-button:focus-visible .portal-button-fx i{animation-play-state:running;opacity:1}.portal-api.portal-pulse{filter:brightness(1.15)}.portal-button:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media(hover:hover){.context-option:has(.portal-button:hover) .context-art{transform:translateY(-5px) scale(1.012)}.portal-button:hover .portal-button-fx i{animation-play-state:running;opacity:1}#contexts-page .portal-api:hover{box-shadow:0 0 28px #ff801c,inset 0 0 14px #ffc664}#contexts-page .portal-air:hover{box-shadow:0 0 28px #8ee8ff,inset 0 0 14px #fff}}
#contexts-page .context-option.portal-entering .context-art{transform:scale(1.055);filter:brightness(1.08)}
@keyframes portal-ember{from{transform:scale(.75,.6) rotate(-8deg)}to{transform:scale(1.1,1.2) rotate(7deg)}}@keyframes portal-ripple{0%{transform:translate(-50%,-50%) scale(1);opacity:.9}100%{transform:translate(-50%,-50%) scale(15);opacity:0}}
@media(max-width:800px){#contexts-page{padding:70px 16px 28px}#contexts-page .context-content{max-width:460px}#contexts-page .context-grid{grid-template-columns:1fr;gap:28px}#contexts-title{font-size:32px}#contexts-page .entry-intro{font-size:14px}#contexts-page .context-option .portal-button{font-size:25px;min-height:52px}#contexts-page .context-art{border-radius:26px}}
@media(prefers-reduced-motion:reduce){#contexts-page .context-option,#contexts-page .context-art{transition:none!important;transform:none!important}.portal-button-fx i{animation:none!important}.portal-button.portal-pulse .portal-button-fx i{opacity:.4}.portal-air .portal-button-fx i{transform:translate(-50%,-50%) scale(6)}}
#contexts-page .context-option .portal-button{left:21%;transform:none}
#contexts-page{background:linear-gradient(#e8f8ec88,#d3ead944),url('assets/forest-immersive.webp') center/cover}
@media(hover:hover) and (prefers-reduced-motion:no-preference){#contexts-page .portal-button:hover{animation:portal-button-bounce .85s ease-in-out infinite}}
@keyframes portal-button-bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}70%{transform:translateY(-1px)}}
/* Separate the live title from the activity label; keep the forest free of baked lettering. */
#contexts-page #selected-activity{margin:18px 0 6px}#contexts-page #contexts-title{margin:0 0 26px;line-height:1.15;font-size:clamp(28px,4vw,48px)}
#contexts-page .portal-air .portal-button-fx{overflow:visible}
#contexts-page .portal-air .portal-button-fx i{left:50%;top:40%;width:7px;height:11px;border:0;background:linear-gradient(#e4fbff,#50bbec);border-radius:50% 50% 60% 60%;opacity:0;animation:none;box-shadow:0 0 3px #d8faff}
#contexts-page .portal-air:not(.portal-pulse) .portal-button-fx i{opacity:0!important}
#contexts-page .portal-air.portal-pulse .portal-button-fx i{animation:portal-water-drop .85s ease-out both;animation-delay:calc(var(--i)*.012s)}
#contexts-page .portal-air .portal-button-fx:before{content:"";position:absolute;top:-40px;left:calc(50% - 7px);width:14px;height:45px;border-radius:45% 45% 25% 25%;background:linear-gradient(#e7fbff00,#cdf6ff,#65c7ed);opacity:0;transform-origin:top}
#contexts-page .portal-air .portal-button-fx:after{content:"";position:absolute;left:50%;top:45%;width:12px;height:18px;background:linear-gradient(#d8f7ffbd,#6bcbec88);border:1px solid #eaffff;border-radius:50%;opacity:0}
#contexts-page .portal-air.portal-pulse .portal-button-fx:before{animation:portal-water-pour .65s ease-out both}#contexts-page .portal-air.portal-pulse .portal-button-fx:after{animation:portal-water-spread .9s ease-out both}
@keyframes portal-water-pour{0%{opacity:0;transform:translateY(-18px) scaleY(.2)}20%{opacity:.9;transform:translateY(0) scaleY(1.4)}55%{opacity:.8;transform:translateY(12px) scaleY(.9)}100%{opacity:0;transform:translateY(32px) scaleY(.1)}}
@keyframes portal-water-spread{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:.75}75%{opacity:.3}100%{opacity:0;transform:translate(-50%,-50%) scale(22,2.3)}}
@keyframes portal-water-drop{0%,12%{opacity:0;transform:translate(-50%,0)}25%{opacity:.95}60%{opacity:.75;transform:translate(calc(-50% + var(--dx)),var(--dy)) rotate(20deg)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),28px) rotate(-20deg)}}
@media(max-width:800px){#contexts-page #contexts-title{font-size:30px;margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){#contexts-page .portal-air .portal-button-fx i,#contexts-page .portal-air .portal-button-fx:before,#contexts-page .portal-air .portal-button-fx:after{animation:none!important;opacity:0!important}}