:root{
  --accent: #56C6E8;
  --accent-daylight: #56C6E8;
  --accent-tungsten: #F2A64B;
}
body{ background:#fff; color:#08161E; -webkit-font-smoothing:antialiased; }

.accent-text{ color: var(--accent); transition: color .5s ease; }
.accent-bg{ background: var(--accent); transition: background-color .5s ease; }
.accent-border{ border-color: var(--accent); transition: border-color .5s ease; }

.temp-glow{
  background: radial-gradient(60% 70% at 78% 28%, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 68%);
  transition: background .7s ease;
}

.frame-mark::before,
.frame-mark::after{
  content:''; position:absolute; width:22px; height:22px;
  border:1.5px solid var(--accent); transition:border-color .5s ease;
}
.frame-mark::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.frame-mark::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.rule{ height:1px; background:linear-gradient(90deg, var(--accent), transparent); }

.rise{ opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

.prose p{ margin-bottom:1.15rem; }
.prose h2{ margin:2.2rem 0 .9rem; }
.prose h3{ margin:1.6rem 0 .7rem; }
.prose ul{ margin:0 0 1.15rem 1.1rem; list-style:disc; }
.prose li{ margin-bottom:.45rem; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .rise,.reveal{ opacity:1 !important; transform:none !important; }
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }