html {
scrollbar-width: thin;
} 
body {margin: 0;height: 100vh;display: flex;justify-content: center;align-items: center;background: repeating-conic-gradient(from 45deg, #f2f2ff 0deg 90deg, white 90deg 180deg);background-size: 1.7em 1.7em;animation: moveToTopLeft 2s linear infinite;font-family: Times, serif;color: #9696e0;}


@keyframes moveToTopLeft {
from {
background-position: 0 0;
}
to {
background-position: -1.7em -1.7em;
}
}
#s-m-t-tooltip{
z-index: 10;
margin: 24px 14px 7px 12px;
background: linear-gradient(to bottom, #f7fbff, #e0ecff 100%);
color: #9696e0;
font-size: 12px;
font-family: MS UI Gothic;
padding: 8px 8px;
white-space: normal;
max-width: 180px;
word-wrap: break-word;outline: 1px solid #cce0ff;
outline-offset: -2px;
box-shadow:
0 0 0 1px #cce0ff,   
1px 1px 0 #000;  text-shadow:
-1px -1px 0 black,
0px -1px 0 black,
1px -1px 0 black,
-1px  0px 0 black,
1px  0px 0 black,
-1px  1px 0 black,
0px  1px 0 black,
1px  1px 0 black;
}
.container {
top:20px;
left:-180px;
max-width: 910px;
max-height:620px;
min-height:620px;
background: #feffff;
padding: 20px;
position: relative;
box-sizing: border-box;
overflow: hidden;
background: linear-gradient(to bottom, #efedff, #cdc7ff);
background-size: auto 100%, 100% 100%;
background-position: right center, center;
background-repeat: no-repeat;
overflow: hidden;
background: linear-gradient(#e8f4ff, #dbdbff);
border: 3px solid #ebebff;
box-shadow: 0px 0px 4px #d5c7ff, 0px 0px 3px #9aa7f3 inset, 0 0 20px rgba(199, 216, 255, 0.4);
border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGBgAAAAAP//XRcpzQAAAAZJREFUAwAADwADJDd96QAAAABJRU5ErkJggg==);
border-image-outset: 6px;
border-image-slice: 20;
border-image-width: 7px;
border-image-repeat: round;
z-index: 10;
position: relative;
overflow: visible;
background: linear-gradient(to bottom, #e8f4ff 0%, #dbdbff 61%, #dbdbff 100%);
}
.container h1,
.container h2 {
text-align: center;
}
#progress {
margin-bottom: 15px;
text-align: center;
font-style: italic;
}
.question {
display: none;
animation: fadeIn 0.5s ease forwards;
}
.question p {
font-weight: bold;
font-size:18px;
margin-bottom: 10px;
}
.header {
background: linear-gradient(white, #ebf5ff);
border: 2px solid #b0d9fe;
box-shadow: 0px 0px 3px #00000044, 0px 0px 3px #9ac9f3 inset;
margin: 2px;
flex-shrink: 0;
text-align: center;
padding: 5px;
line-height: 12px;
display: flex;
margin-top: 6px;
}
label {
display: block;
margin: 5px 0;
padding: 8px;
cursor: pointer;
border-radius: 3px;
transition: background 0.2s;
}
label:hover {
background-color: rgba(230, 243, 255, 0.9);
}
input[type="radio"] {
margin-right: 8px;
}
.thing {
width: 252px;
height: 90px;
padding: 0.55em 1em;
font-family: "MS UI Gothic";
line-height: 1;
font-size: 12px;
color: #776e9c;
background: linear-gradient(to bottom, #e8f4ff 0%, #d7d7fa 61%, #dbdbff 100%);
box-sizing: border-box;
outline: 1px solid #a7a8eb;
outline-offset: -4px;
box-shadow: 2px 2px #7c7ecc;
border: 1px solid #7c7ecc;
z-index:9999;
white-space: normal;
overflow-y: hidden;
overflow-x: hidden;
}
.thing:hover {
transform: translateY(-1px);
}
.thing:active {
transform: translateY(1px);
box-shadow: 2px 1px #7c7ecc;
}
.thing p {
margin: 5px 0;
font-size: 14px;
overflow-wrap: break-word; 
}
.thingcontainer {
margin-top: 135px;
margin-bottom: 10px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px; padding-top: 4px; 
box-sizing: border-box;
padding-bottom:2px;
display: flex;       
flex-wrap: wrap;      
gap: 12px;          
}
#result {
display: none;
text-align: center;
margin-top: 20px;
animation: fadeIn 1s ease forwards;
}
#result img {
max-width: 200px;
margin: 15px 0;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#progressBar {
position: absolute;
left: -20px;
top: 30px;
width: 8px;
height: calc(100% - 60px);
background: #e8f4ff;
border-radius: 4px;
border: 2px solid #dbdbff;
border-radius: 4px;
background: url(img/dot.png) 0px 0px / 10px;
}
#progressFill {
width: 100%;
height: 0%;
background: lavender;
border-radius: 4px;
transition: height 0.4s ease;
}
#startScreen {
text-align: center;
}
.mayura {
position: fixed;
bottom: 0;
right: 0;
height: 50vh;
width: auto;
z-index: 11;
pointer-events: none;
}
.title {
font-size: 42px;
}
.tab {
padding:5px;
width:110px;
border: 3px solid white;
box-shadow: 0px 0px 3px inset #d8dde3, 0px 0px 3px #d8dde3;
background:  #feffff;
padding-right:25px;
z-index: -1;
position: absolute;
left:-85px;
top:14%;
}
.tablinks {
width:100%;
margin-bottom:5px;
cursor: pointer;
background:white;
border:none;
padding:2px;
font-family: MS UI Gothic;
position: relative;
z-index: 15;
border:1px solid #ccc7ff;
background-color: #e0e7ff;
}
.tablinks:hover {
transform: translateY(-1px);
}
.tablinks:active {
transform: translateY(1px);
}
.tablinks span {
border:  1px dashed #bbbfee;
background-color:#ebf5ff;
display: block;
}
.tablinks:nth-child(4) {
margin:0;
}
.outer {
display: flex;              
flex-direction: column;    
flex: 1;                 
border: 3px solid white;
box-shadow: 0px 0px 3px inset #d8dde3, 0px 0px 3px #d8dde3;
background:  #feffff;
background-size: 230px auto;
background-position: right bottom;
padding: 10px;
min-height:545px;
max-height:545px;
}
.inner {
flex: 1;                   
border: 1px dashed #cdc7ff;
padding: 10px 16px;
margin: 0;
overflow-y: hidden;          
}
.floating-notes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; 
overflow: hidden;
z-index: 0; 
}
.box {line-height: 1;  background: linear-gradient(to bottom, #f7fbff,  #e0ecff 100%);
box-shadow:   0px 0px 7px #cce0ff inset;
border-radius: 0px; border: 1px dashed #b9d7fa; outline: 1px solid #e0ecff; outline-offset:-2px; padding: 10px 10px;  
position:absolute; left:165px;  height: 76px; width:660px;margin-top:16px; font-family: MS UI Gothic; font-size:13px;}
.title {
position:absolute;top:-130px;font-size:54px; font-family: Times; left:85px;  background: linear-gradient(to bottom, #a6a6e5, #9898d6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.note {
position: absolute;
font-size: 32px; 
color: rgba(150, 120, 220, 0.7);
animation: floatSway linear infinite;
opacity: 0.8;
will-change: transform; 
}
@keyframes floatSway {
0% {
transform: translateY(100vh) translateX(0) rotate(0deg);
opacity: 0;
}
10% { opacity: 1; }
100% {
transform: translateY(-10vh) translateX(0) rotate(360deg);
opacity: 0;
}
}
.notes-mobile {
image-rendering: pixelated;
}
.notes-desktop {
image-rendering:pixelated;
margin-left:-6px;
}
::-webkit-scrollbar{
width: 11px;
background: #fff;
}
::-webkit-scrollbar-thumb{
background: #f0f7ff;
border: 1px dashed #abd6ff;
box-shadow: inset 0 0 4px #abd6ff; 
}
*::-webkit-scrollbar-track {
background: #fff;
border: 1px dashed #abd6ff;
box-shadow: inset 0 0 2px #abd6ff; 
}
::-webkit-scrollbar-thumb:hover{
background: #e3f1ff;
}
.jelly {
position:absolute;
height:120px;
filter: opacity(87%);
left:45px;
top:90px
}
.jelly:hover {
animation: jelly 0.5s;
}
@keyframes jelly {
from, to { transform: scale(1, 1); }
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}
a {
color: inherit;          
text-decoration: none;   
}
a:visited {
color: inherit;         
}
a:hover, a:focus {
text-decoration: none;   
}