:root{
  --cream:#F3EADD;
  --paper:#FFFDF8;
  --white:#FFFDF8;
  --iris:#7C93F5;
  --iris-soft:#E7EBFD;
  --iris-deep:#5C6BB0;
  --sky:#7C93F5;
  --sun:#E8C56B;
  --leaf:#8BB8A0;
  --berry:#E8A0B0;
  --plum:#2A2826;
  --night:#2A2826;
  --ink:#2A2826;
  --text-dim:#8B8880;
  --line:#E3DCC9;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  background-image:
    radial-gradient(circle, rgba(227,220,201,.55) 1.1px, transparent 1.4px),
    radial-gradient(circle at 12% 12%, rgba(124,147,245,.14) 0, transparent 42%),
    radial-gradient(circle at 90% 8%, rgba(232,197,107,.16) 0, transparent 38%),
    radial-gradient(circle at 88% 88%, rgba(124,147,245,.10) 0, transparent 42%);
  background-size:18px 18px, auto, auto, auto;
  font-family:'Huninn','Noto Sans TC',sans-serif;
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Huninn','Noto Sans TC',sans-serif;font-weight:400;}
h1.title{
  color:var(--ink);margin:4px 0 2px;letter-spacing:0.5px;
  -webkit-text-stroke:0.55px currentColor;
}
.subtitle{color:var(--text-dim);margin:0;}
footer{text-align:center;color:var(--text-dim);font-size:12.5px;margin-top:20px;}

.mascot{
  margin:0 auto 8px;position:relative;
  animation:bob 3.2s ease-in-out infinite;
}
.mascot.ayun{width:120px;height:85px;}
.mascot.ayun img{width:100%;height:100%;display:block;object-fit:contain;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

.back-btn{
  font-family:'Huninn','Noto Sans TC',sans-serif;
  background:var(--paper);
  border:3px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  color:var(--ink);
  text-decoration:none;
  display:inline-block;
}
.topbar{display:flex;align-items:center;justify-content:space-between;}